[4725] Inverted Variants of buttons (#5671)

Resolves #4725

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>

packages/twenty-ui/src/testing/decorators/ComponentDecorator.tsx

@@ -1,12 +1,35 @@
 import { Decorator } from '@storybook/react';
 
+import { GRAY_SCALE, MAIN_COLORS } from '@ui/theme';
+
 import { ComponentStorybookLayout } from '../ComponentStorybookLayout';
 
+const getBackgroundColor = (inverted: boolean, accent: string) => {
+  if (!inverted) return undefined;
+
+  switch (accent) {
+    case 'default':
+      return GRAY_SCALE.gray50;
+    case 'danger':
+      return MAIN_COLORS.red;
+    case 'blue':
+      return MAIN_COLORS.blue;
+    default:
+      return undefined;
+  }
+};
+
 export const ComponentDecorator: Decorator = (Story, context) => {
   const { container } = context.parameters;
+  const inverted = context.args.inverted as boolean;
+  const accent = context.args.accent as string;
+  const backgroundColor = getBackgroundColor(inverted, accent);
 
   return (
-    <ComponentStorybookLayout width={container?.width}>
+    <ComponentStorybookLayout
+      width={container?.width}
+      backgroundColor={backgroundColor}
+    >
       <Story />
     </ComponentStorybookLayout>
   );