@groupeactual/design-tokens 1.7.9 → 2.0.0-beta.0

package/src/interfaces/theme.interface.ts

@@ -0,0 +1,270 @@
+import { ColorPartial } from '@mui/material/styles/createPalette';
+
+// * Interne = One theme only for now
+export type Theme = 'Interne' | 'Externe';
+
+export interface ThemeValue {
+  value: string;
+  type: string;
+}
+
+export type DefaultColors = { [key: string]: ThemeValue };
+
+export interface ThemeStructure {
+  'DFLib-Variables/Interne'?: TokenStructure;
+  'DFLib-Variables/Interne/defaultColors'?: CustomColors;
+  'DFLib-Variables/Externe'?: TokenStructure;
+}
+
+export interface PaletteColors {
+  primary: ColorCategory;
+  secondary: ColorCategory;
+  error: ColorCategory;
+  warning: ColorCategory;
+  success: ColorCategory;
+  infos: ColorCategory;
+  text: TextColors;
+  background: Background;
+  border: Border;
+  action: {
+    hoverOpacity: ThemeValue;
+  };
+}
+
+export interface TokenStructure {
+  palette?: PaletteColors;
+  Typography?: TypographyTokens;
+  spacing?: SpacingTokens;
+  radius?: RadiusTokens;
+}
+
+export interface TextDefaultColors {
+  greyDark?: ThemeValue;
+}
+
+export interface BackgroundDefaultColors {
+  white?: ThemeValue;
+  greyXLight?: ThemeValue;
+  greyXDarkBgModal?: ThemeValue;
+  blueHoverEquivalence?: ThemeValue;
+  blueHoverOpacity12?: ThemeValue;
+}
+
+export interface BorderDefaultColors {
+  greyLightDefaultBorder?: ThemeValue;
+}
+
+export interface NotificationDefaultColors {
+  blueInfo?: ThemeValue;
+  greenSuccess?: ThemeValue;
+  orangeWarning?: ThemeValue;
+  redError?: ThemeValue;
+}
+
+export interface SecondaryDefaultColors {
+  blueDark?: ThemeValue;
+  blueMedium?: ThemeValue;
+  blueLight?: ThemeValue;
+  greenDark?: ThemeValue;
+  greenMedium?: ThemeValue;
+  green?: ThemeValue;
+  greenLight?: ThemeValue;
+  brown?: ThemeValue;
+  brownLight?: ThemeValue;
+  orangeLight?: ThemeValue;
+  yellow?: ThemeValue;
+  purpleDark?: ThemeValue;
+  purple?: ThemeValue;
+  pink?: ThemeValue;
+  pinkLight?: ThemeValue;
+}
+
+export interface CustomColors {
+  redActual?: ThemeValue;
+  blueClickable?: ThemeValue;
+  blueHoverClickable?: ThemeValue;
+  blueHoverOpacity12?: ThemeValue;
+  greyMediumInactive?: ThemeValue;
+  greyXDark?: ThemeValue;
+  textColors: TextDefaultColors;
+  backgroundColors: BackgroundDefaultColors;
+  borderColors: BorderDefaultColors;
+  notificationColors: NotificationDefaultColors;
+  secondaryColors: SecondaryDefaultColors;
+}
+
+export interface ColorCategory {
+  main?: ThemeValue;
+  mainChannel?: ThemeValue;
+  light?: ThemeValue;
+  'light 2'?: ThemeValue;
+  'light 3'?: ThemeValue;
+  lightChannel?: ThemeValue;
+  dark?: ThemeValue;
+  'dark 2'?: ThemeValue;
+  'dark 3'?: ThemeValue;
+  darkChannel?: ThemeValue;
+  'secondary contrast text'?: ThemeValue;
+  'primary contrast text'?: ThemeValue;
+}
+
+export interface TextColors {
+  primary: ThemeValue;
+  secondary: ThemeValue;
+  disabled: ThemeValue;
+  dark: ThemeValue;
+}
+
+export interface Background {
+  default: ThemeValue;
+  grey: ThemeValue;
+}
+
+export interface Border {
+  default: ThemeValue;
+  grey: ThemeValue;
+}
+
+export interface TypographyToken {
+  fontFamily: { value: string; type: string };
+  fontSize: { value: string; type: string };
+  LineHeight: { value: string; type: string };
+  fontWeight: { value: string; type: string };
+}
+
+export interface TypographyTokens {
+  h1: TypographyToken;
+  h2: TypographyToken;
+  h3: TypographyToken;
+  h4: TypographyToken;
+  h5: TypographyToken;
+  h6: TypographyToken;
+  subtitle1: TypographyToken;
+  subtitle2: TypographyToken;
+  body1: TypographyToken;
+  body2: TypographyToken;
+  button: TypographyToken;
+  caption: TypographyToken;
+}
+
+export interface SpacingTokens {
+  xxs: ThemeValue;
+  xs: ThemeValue;
+  sm: ThemeValue;
+  md: ThemeValue;
+  lg: ThemeValue;
+  xl: ThemeValue;
+  xxl: ThemeValue;
+}
+
+export interface RadiusTokens {
+  small: ThemeValue;
+  medium: ThemeValue;
+  large: ThemeValue;
+  xLarge: ThemeValue;
+}
+
+export type PaletteColorOptions = BasicPaletteColorOptions | ColorPartial;
+
+export interface BasicPaletteColorOptions {
+  light?: string;
+  lightChannel?: string;
+  light2?: string;
+  light3?: string;
+  main: string;
+  mainChannel?: string;
+  dark?: string;
+  darkChannel?: string;
+  dark2?: string;
+  dark3?: string;
+  contrastText?: string;
+}
+
+export interface TextPaletteColorOptions {
+  secondary?: string;
+  primary?: string;
+  dark?: string;
+  disabled?: string;
+}
+
+export interface BackgroundPaletteColorOptions {
+  default?: string;
+  paper?: string;
+  grey?: string;
+}
+
+export interface BorderPaletteColorOptions {
+  default?: string;
+  grey?: string;
+}
+
+export interface PaletteDefaultColors {
+  redActual?: string;
+  blueClickable?: string;
+  blueHoverClickable?: string;
+  greyMediumInactive?: string;
+  greyXDark?: string;
+  greyDark?: string;
+  white?: string;
+  greyXLight?: string;
+  greyXDarkBgModal?: string;
+  blueHoverEquivalence?: string;
+  blueHoverOpacity12?: string;
+  greyLightDefaultBorder?: string;
+  blueInfo?: string;
+  greenSuccess?: string;
+  orangeWarning?: string;
+  redError?: string;
+  blueDark?: string;
+  blueMedium?: string;
+  blueLight?: string;
+  greenDark?: string;
+  greenMedium?: string;
+  green?: string;
+  greenLight?: string;
+  brown?: string;
+  brownLight?: string;
+  orangeLight?: string;
+  yellow?: string;
+  purpleDark?: string;
+  purple?: string;
+  pink?: string;
+  pinkLight?: string;
+}
+
+export interface PaletteDS extends PaletteDefaultColors {
+  primary?: BasicPaletteColorOptions;
+  secondary?: BasicPaletteColorOptions;
+  error?: BasicPaletteColorOptions;
+  warning?: BasicPaletteColorOptions;
+  success?: BasicPaletteColorOptions;
+  info?: BasicPaletteColorOptions;
+  text?: TextPaletteColorOptions;
+  border?: BorderPaletteColorOptions;
+}
+
+// * TODO = Remove this interface when all css are removed
+export interface MuiTokens {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  palette: any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  typography: any;
+}
+
+export type SpacingArgument = number | string;
+export interface Spacing {
+  (): string;
+  (_value: SpacingArgument): string;
+  (_topBottom: SpacingArgument, _rightLeft: SpacingArgument): string;
+  (
+    _top: SpacingArgument,
+    _rightLeft: SpacingArgument,
+    _bottom: SpacingArgument,
+  ): string;
+  (
+    _top: SpacingArgument,
+    _right: SpacingArgument,
+    _bottom: SpacingArgument,
+    _left: SpacingArgument,
+  ): string;
+}

package/src/styled/Accordion.ts

@@ -0,0 +1,49 @@
+import { Components } from '@mui/material';
+
+import {
+  CustomColors,
+  Spacing,
+  TokenStructure,
+} from '@/interfaces/theme.interface';
+
+const Accordion = (
+  spacing: Spacing,
+  tokens: TokenStructure & CustomColors,
+): Components<unknown> => {
+  return {
+    MuiAccordion: {
+      styleOverrides: {
+        root: {
+          border: `1px solid`,
+          borderColor: tokens.palette?.border.default?.value,
+          boxShadow: 'none',
+        },
+      },
+    },
+    MuiAccordionSummary: {
+      styleOverrides: {
+        root: {
+          minHeight: 'auto !important',
+          padding: spacing(2, 4),
+        },
+      },
+    },
+    MuiAccordionDetails: {
+      styleOverrides: {
+        root: {
+          borderTop: `1px solid`,
+          borderColor: tokens.palette?.border.default?.value,
+          backgroundColor: tokens.palette?.background.grey?.value,
+          fontWeight: 400,
+          fontSize: '14px',
+          lineHeight: '18px',
+          padding: spacing(4),
+          borderBottomLeftRadius: 1,
+          borderBottomRightRadius: 1,
+        },
+      },
+    },
+  };
+};
+
+export default Accordion;

package/src/styled/Alert.ts

@@ -0,0 +1,83 @@
+import { Components } from '@mui/material';
+
+import {
+  CustomColors,
+  Spacing,
+  TokenStructure,
+} from '@/interfaces/theme.interface';
+
+const Alert = (
+  spacing: Spacing,
+  tokens: TokenStructure & CustomColors,
+): Components<unknown> => {
+  return {
+    MuiAlert: {
+      styleOverrides: {
+        root: {
+          '&.MuiAlert-standardInfo': {
+            backgroundColor: tokens?.notificationColors?.blueInfo?.value,
+          },
+          '&.MuiAlert-standardWarning': {
+            backgroundColor: tokens?.notificationColors?.orangeWarning?.value,
+          },
+          '&.MuiAlert-standardError': {
+            backgroundColor: tokens?.notificationColors?.redError?.value,
+          },
+          '&.MuiAlert-standardSuccess': {
+            backgroundColor: tokens?.notificationColors?.greenSuccess?.value,
+          },
+          '&.MuiAlertSnackbar': {
+            padding: spacing(2, 4, 2, 4),
+            color: 'white',
+            fontWeight: '700',
+            fontSize: '14px',
+            width: '350px',
+            '.MuiAlert-message': {
+              padding: '0px',
+            },
+            '.MuiAlert-icon': {
+              alignSelf: 'center',
+              height: '16px',
+              marginRight: spacing(4),
+              alignItems: 'center',
+              opacity: 1,
+            },
+            '.MuiSvgIcon-root': {
+              color: 'white',
+            },
+          },
+          '&.MuiAlertBannerNotification': {
+            height: '50px',
+            paddingLeft: spacing(6),
+            paddingRight: spacing(6),
+            borderRadius: 0,
+            color: 'white',
+            fontWeight: '700',
+            fontSize: '14px',
+            maxWidth: '1600px',
+            '.MuiAlert-icon': {
+              opacity: 1 + ' !important',
+              alignItems: 'center',
+              marginRight: spacing(2),
+            },
+            '.MuiAlert-message': {
+              alignSelf: 'center',
+            },
+            '.MuiSvgIcon-root': {
+              color: 'white',
+              '-webkit-tap-highlight-color': 'white',
+            },
+            '.MuiAlert-action': {
+              cursor: 'pointer',
+              marginRight: 0,
+              padding: 0,
+              alignSelf: 'center',
+            },
+          },
+        },
+      },
+    },
+  };
+};
+
+export default Alert;

package/src/styled/Autocomplete.ts

@@ -0,0 +1,24 @@
+import { Components } from '@mui/material';
+
+import {
+  CustomColors,
+  Spacing,
+  TokenStructure,
+} from '@/interfaces/theme.interface';
+
+const Autocomplete = (
+  _spacing: Spacing,
+  _tokens: TokenStructure & CustomColors,
+): Components<unknown> => {
+  return {
+    MuiAutocomplete: {
+      styleOverrides: {
+        paper: {
+          marginTop: 0 + ' !important',
+        },
+      },
+    },
+  };
+};
+
+export default Autocomplete;

package/src/styled/Breadcrumbs.ts

@@ -0,0 +1,29 @@
+import { Components } from '@mui/material';
+
+import {
+  CustomColors,
+  Spacing,
+  TokenStructure,
+} from '@/interfaces/theme.interface';
+
+const Breadcrumbs = (
+  spacing: Spacing,
+  _tokens: TokenStructure & CustomColors,
+): Components<unknown> => {
+  return {
+    MuiBreadcrumbs: {
+      styleOverrides: {
+        root: {
+          margin: 0,
+          padding: `${spacing(1)} 0`,
+        },
+        separator: {
+          margin: 0,
+          padding: `0 ${spacing(1)}`,
+        },
+      },
+    },
+  };
+};
+
+export default Breadcrumbs;

package/src/styled/Button.ts

@@ -0,0 +1,109 @@
+import { Components } from '@mui/material';
+
+import {
+  CustomColors,
+  Spacing,
+  TokenStructure,
+} from '@/interfaces/theme.interface';
+
+const Button = (
+  _spacing: Spacing,
+  tokens: TokenStructure & CustomColors,
+): Components<unknown> => {
+  return {
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          height: '44px',
+          padding: `${tokens.spacing?.sm.value}px ${tokens.spacing?.md.value}px !important`,
+          textTransform: 'none',
+          borderRadius: Number(tokens.radius?.small.value),
+          variants: [
+            {
+              props: (props) => props.variant === 'tertiary',
+              style: {
+                padding: `${tokens.spacing?.xs.value}px ${tokens.spacing?.md.value}px !important`,
+                color: tokens.palette?.primary.main?.value,
+                '.itemIcon': {
+                  color: tokens.palette?.primary.main?.value,
+                },
+                '&.Mui-disabled': {
+                  color: tokens.palette?.text.disabled.value,
+                  '.itemIcon': {
+                    color: tokens.palette?.text.disabled.value,
+                  },
+                },
+                '&:hover': {
+                  backgroundColor: tokens.palette?.primary['light 3']?.value,
+                  color: tokens.palette?.primary.dark?.value,
+                  '.itemIcon': {
+                    color: tokens.palette?.primary.dark?.value,
+                  },
+                },
+                ':active': {
+                  color: tokens.palette?.primary.dark?.value,
+                  '.itemIcon': {
+                    color: tokens.palette?.primary.dark?.value,
+                  },
+                  '.MuiTouchRipple-root': {
+                    opacity: 0,
+                  },
+                },
+              },
+            },
+            {
+              props: (props) =>
+                props.variant === 'outlined' && props.color === 'primary', // secondary
+              style: {
+                '.itemIcon': {
+                  color: tokens.palette?.primary.main?.value,
+                },
+                '&.Mui-disabled': {
+                  borderColor: tokens.palette?.border?.default.value,
+                  '.itemIcon': {
+                    color: tokens.palette?.text.disabled.value,
+                  },
+                },
+                '&:hover': {
+                  color: tokens.palette?.primary.dark?.value,
+                  '.itemIcon': {
+                    color: tokens.palette?.primary.dark?.value,
+                  },
+                },
+                '&:active': {
+                  color: tokens.palette?.primary.dark?.value,
+                  '.itemIcon': {
+                    color: tokens.palette?.primary.dark?.value,
+                  },
+                  '.MuiTouchRipple-root': {
+                    opacity: 0,
+                  },
+                },
+              },
+            },
+          ],
+        },
+        outlined: {
+          borderColor: tokens.palette?.border?.default.value,
+          '&.Mui-disabled': {
+            color: tokens.palette?.text.disabled.value,
+          },
+          '&:hover': {
+            backgroundColor: tokens.palette?.primary['light 3']?.value,
+          },
+        },
+        contained: {
+          boxShadow: 'none !important',
+          '&:hover': {
+            boxShadow: 'none !important',
+          },
+          '&:active': {
+            boxShadow: 'none !important',
+          },
+        },
+      },
+    },
+  };
+};
+
+export default Button;

package/src/styled/Checkbox.ts

@@ -0,0 +1,81 @@
+import { Components } from '@mui/material';
+
+import {
+  CustomColors,
+  Spacing,
+  TokenStructure,
+} from '@/interfaces/theme.interface';
+
+const Checkbox = (
+  spacing: Spacing,
+  tokens: TokenStructure & CustomColors,
+): Components<unknown> => {
+  return {
+    MuiCheckbox: {
+      defaultProps: {
+        disableRipple: true,
+      },
+      styleOverrides: {
+        root: {
+          width: '24px',
+          height: '24px',
+          padding: `${spacing(1)} !important`,
+          marginRight: `${spacing(1)}`,
+          marginBottom: '0px',
+          borderRadius: '4px',
+          '::before': {
+            zIndex: 1,
+            content: '" "',
+            display: 'block',
+            position: 'absolute',
+            borderRadius: '4px',
+            width: '14px',
+            height: '14px',
+            backgroundColor: tokens?.palette?.background.default.value,
+          },
+          '&:hover': {
+            backgroundColor: tokens.palette?.primary['light 3']?.value,
+          },
+          '.MuiSvgIcon-root': {
+            zIndex: 1,
+            width: '16px',
+            height: '16px',
+            color: tokens.palette?.border.grey.value,
+            path: {
+              width: '14px',
+              height: '14px',
+            },
+          },
+          '.MuiFormControlLabel-root:hover &': {
+            backgroundColor: tokens.palette?.primary['light 3']?.value,
+            '&.Mui-disabled': {
+              backgroundColor: 'transparent',
+            },
+          },
+          '&.Mui-checked': {
+            '.MuiSvgIcon-root': {
+              color: tokens.palette?.primary.main?.value + ' !important',
+            },
+          },
+          '&.MuiCheckbox-indeterminate': {
+            '.MuiSvgIcon-root': {
+              color: tokens.palette?.primary.main?.value + ' !important',
+            },
+          },
+          '&.Mui-disabled': {
+            '::before': {
+              backgroundColor: tokens.palette?.background.grey.value,
+            },
+            '.MuiSvgIcon-root': {
+              color: tokens.palette?.text?.disabled?.value + ' !important',
+              backgroundColor: 'transparent !important',
+              outlineOffset: '-2px',
+            },
+          },
+        },
+      },
+    },
+  };
+};
+
+export default Checkbox;