[4725] Inverted Variants of buttons (#5671)

Resolves #4725

---------

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

packages/twenty-ui/src/testing/ComponentStorybookLayout.tsx

@@ -1,7 +1,11 @@
 import styled from '@emotion/styled';
 
-const StyledLayout = styled.div<{ width?: number }>`
-  background: ${({ theme }) => theme.background.primary};
+const StyledLayout = styled.div<{
+  width?: number;
+  backgroundColor?: string | undefined;
+}>`
+  background: ${({ theme, backgroundColor }) =>
+    backgroundColor ?? theme.background.primary};
   border: 1px solid ${({ theme }) => theme.border.color.light};
   border-radius: 5px;
 
@@ -17,12 +21,16 @@ const StyledLayout = styled.div<{ width?: number }>`
 
 type ComponentStorybookLayoutProps = {
   width?: number;
+  backgroundColor?: string | undefined;
   children: JSX.Element;
 };
 
 export const ComponentStorybookLayout = ({
   width,
+  backgroundColor,
   children,
 }: ComponentStorybookLayoutProps) => (
-  <StyledLayout width={width}>{children}</StyledLayout>
+  <StyledLayout width={width} backgroundColor={backgroundColor}>
+    {children}
+  </StyledLayout>
 );

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>
   );