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

package/src/styled/Chip.ts

@@ -0,0 +1,201 @@
+import { Components } from '@mui/material';
+
+import {
+  CustomColors,
+  Spacing,
+  TokenStructure,
+} from '@/interfaces/theme.interface';
+
+const Chip = (
+  spacing: Spacing,
+  tokens: TokenStructure & CustomColors,
+): Components<unknown> => {
+  return {
+    MuiChip: {
+      styleOverrides: {
+        root: {
+          borderRadius: '4px',
+          fontSize: '14px',
+          paddingLeft: `${spacing(2)} !important`,
+          paddingRight: `${spacing(2)} !important`,
+          variants: [
+            {
+              props: (props) =>
+                props.variant === 'filled' && props.color === 'default',
+              style: {
+                '.MuiChip-iconAction': {
+                  color: tokens.palette?.primary?.main?.value,
+                  '&:hover': {
+                    color: tokens.palette?.primary?.main?.value,
+                    opacity: 0.8,
+                  },
+                },
+              },
+            },
+            {
+              props: (props) =>
+                props.variant === 'filled' && props.color === 'primary',
+              style: {
+                fontWeight: '500',
+                '.MuiChip-iconAction': {
+                  color: tokens.palette?.background.default?.value,
+                  '&:hover': {
+                    opacity: 0.8,
+                  },
+                },
+              },
+            },
+            {
+              props: (props) =>
+                props.variant === 'outlined' && props.color === 'secondary',
+              style: {
+                border: '1px solid',
+                borderColor: tokens.palette?.border?.default?.value,
+                color: tokens.palette?.text.primary?.value,
+                '.MuiChip-iconAction': {
+                  color: tokens.palette?.primary?.main?.value,
+                  '&:hover': {
+                    color: tokens.palette?.primary?.main?.value,
+                    opacity: 0.8,
+                  },
+                },
+              },
+            },
+            {
+              props: (props) => props.variant === 'statusFilled',
+              style: {
+                color: tokens.palette?.text.primary?.value,
+              },
+            },
+            {
+              props: (props) =>
+                props.variant === 'statusFilled' && props.color === 'info',
+              style: {
+                backgroundColor: tokens.palette?.infos['light 2']?.value,
+                '.MuiChip-avatar': {
+                  color: tokens.palette?.infos?.main?.value,
+                },
+                '.MuiChip-icon': {
+                  color: tokens.palette?.infos?.main?.value,
+                  '&:hover': {
+                    color: tokens.palette?.infos?.main?.value,
+                  },
+                },
+              },
+            },
+            {
+              props: (props) =>
+                props.variant === 'statusFilled' && props.color === 'success',
+              style: {
+                backgroundColor: tokens.palette?.success['light 2']?.value,
+                '.MuiChip-avatar': {
+                  color: tokens.palette?.success?.main?.value,
+                },
+                '.MuiChip-icon': {
+                  color: tokens.palette?.infos?.main?.value,
+                  '&:hover': {
+                    color: tokens.palette?.infos?.main?.value,
+                  },
+                },
+              },
+            },
+            {
+              props: (props) =>
+                props.variant === 'statusFilled' && props.color === 'error',
+              style: {
+                backgroundColor: tokens.palette?.error['light 2']?.value,
+                '.MuiChip-avatar': {
+                  color: tokens.palette?.error?.main?.value,
+                },
+                '.MuiChip-icon': {
+                  color: tokens.palette?.infos?.main?.value,
+                  '&:hover': {
+                    color: tokens.palette?.infos?.main?.value,
+                  },
+                },
+              },
+            },
+            {
+              props: (props) =>
+                props.variant === 'statusFilled' && props.color === 'warning',
+              style: {
+                backgroundColor: tokens.palette?.warning['light 2']?.value,
+                '.MuiChip-avatar': {
+                  color: tokens.palette?.warning?.main?.value,
+                },
+                '.MuiChip-icon': {
+                  color: tokens.palette?.infos?.main?.value,
+                  '&:hover': {
+                    color: tokens.palette?.infos?.main?.value,
+                  },
+                },
+              },
+            },
+            {
+              props: (props) => props.variant === 'status',
+              style: {
+                backgroundColor: tokens.palette?.background.default?.value,
+                border: '1px solid',
+                fontWeight: '500',
+              },
+            },
+            {
+              props: (props) =>
+                props.variant === 'status' && props.color === 'info',
+              style: {
+                color: tokens.palette?.infos?.main?.value,
+                borderColor: tokens.palette?.infos?.main?.value,
+              },
+            },
+            {
+              props: (props) =>
+                props.variant === 'status' && props.color === 'success',
+              style: {
+                color: tokens.palette?.success?.main?.value,
+                borderColor: tokens.palette?.success?.main?.value,
+              },
+            },
+            {
+              props: (props) =>
+                props.variant === 'status' && props.color === 'error',
+              style: {
+                color: tokens.palette?.error?.main?.value,
+                borderColor: tokens.palette?.error?.main?.value,
+              },
+            },
+            {
+              props: (props) =>
+                props.variant === 'status' && props.color === 'warning',
+              style: {
+                color: tokens.palette?.warning?.main?.value,
+                borderColor: tokens.palette?.warning?.main?.value,
+              },
+            },
+          ],
+          '&.Mui-disabled': {
+            color: tokens.palette?.text.secondary?.value + ' !important',
+            backgroundColor:
+              tokens.palette?.background.grey?.value + ' !important',
+            border: '1px solid',
+            borderColor: tokens.palette?.border.grey?.value + ' !important',
+            '.MuiChip-iconAction': {
+              color: tokens.palette?.text.disabled?.value + ' !important',
+            },
+          },
+        },
+        deleteIcon: {
+          padding: 0,
+          margin: `0 0 0 ${spacing(2)}`,
+        },
+        label: {
+          padding: 0,
+        },
+        avatar: {
+          margin: `0 ${spacing(1)} 0 0`,
+        },
+      },
+    },
+  };
+};
+
+export default Chip;

package/src/styled/Divider.ts

@@ -0,0 +1,24 @@
+import { Components } from '@mui/material';
+
+import {
+  CustomColors,
+  Spacing,
+  TokenStructure,
+} from '@/interfaces/theme.interface';
+
+const Divider = (
+  _spacing: Spacing,
+  tokens: TokenStructure & CustomColors,
+): Components<unknown> => {
+  return {
+    MuiDivider: {
+      styleOverrides: {
+        root: {
+          color: tokens?.palette?.border.default?.value,
+        },
+      },
+    },
+  };
+};
+
+export default Divider;

package/src/styled/FormHelperText.ts

@@ -0,0 +1,28 @@
+import { Components } from '@mui/material';
+
+import {
+  CustomColors,
+  Spacing,
+  TokenStructure,
+} from '@/interfaces/theme.interface';
+
+const FormHelperText = (
+  _spacing: Spacing,
+  tokens: TokenStructure & CustomColors,
+): Components<unknown> => {
+  return {
+    MuiFormHelperText: {
+      styleOverrides: {
+        root: {
+          fontWeight: '400',
+          fontSize: '11px',
+          '&.Mui-success': {
+            color: tokens.palette?.success?.main?.value,
+          },
+        },
+      },
+    },
+  };
+};
+
+export default FormHelperText;

package/src/styled/FormLabel.ts

@@ -0,0 +1,30 @@
+import { Components } from '@mui/material';
+
+import {
+  CustomColors,
+  Spacing,
+  TokenStructure,
+} from '@/interfaces/theme.interface';
+
+const FormLabel = (
+  _spacing: Spacing,
+  tokens: TokenStructure & CustomColors,
+): Components<unknown> => {
+  return {
+    MuiFormLabel: {
+      styleOverrides: {
+        root: {
+          color: tokens?.palette?.text.primary?.value,
+          fontSize: '13px',
+          fontWeight: '500',
+          lineHeight: '16px',
+          '&.Mui-focused': {
+            color: tokens?.palette?.text.primary?.value + ' !important',
+          },
+        },
+      },
+    },
+  };
+};
+
+export default FormLabel;

package/src/styled/IconButton.ts

@@ -0,0 +1,161 @@
+import { Components } from '@mui/material';
+
+import {
+  CustomColors,
+  Spacing,
+  TokenStructure,
+} from '@/interfaces/theme.interface';
+
+const IconButton = (
+  spacing: Spacing,
+  tokens: TokenStructure & CustomColors,
+): Components<unknown> => {
+  return {
+    MuiIconButton: {
+      styleOverrides: {
+        root: {
+          borderRadius: '4px',
+          '&.Mui-disabled': {
+            color: tokens.palette?.text.disabled.value,
+          },
+          '&.MuiIconButton-colorPrimary': {
+            color: tokens.palette?.primary.main?.value,
+            '&:hover': {
+              color: tokens.palette?.primary.dark?.value,
+              '&.IconButtonVariant-outlined': {
+                borderColor: tokens.palette?.primary.dark?.value,
+                backgroundColor:
+                  tokens.palette?.background.default + ' !important',
+              },
+              '&.IconButtonVariant-plain': {
+                backgroundColor: tokens.palette?.primary.mainChannel?.value,
+              },
+            },
+            '&:active': {
+              borderColor: tokens.palette?.primary.dark?.value + ' !important',
+              backgroundColor: tokens.palette?.primary.mainChannel?.value,
+              color: tokens.palette?.primary.dark?.value,
+              '.MuiTouchRipple-root': {
+                opacity: 0,
+              },
+            },
+          },
+          '&.MuiIconButton-colorSuccess': {
+            '&:hover': {
+              color: tokens.palette?.success.dark?.value,
+              backgroundColor:
+                tokens.palette?.success['light 3']?.value + ' !important',
+              '&.IconButtonVariant-outlined': {
+                borderColor: tokens.palette?.success.dark?.value,
+                '--IconButton-hoverBg':
+                  tokens.palette?.background.default + ' !important',
+              },
+              '&.IconButtonVariant-plain': {
+                backgroundColor: tokens.palette?.success['light 3']?.value,
+              },
+            },
+            '&:active': {
+              backgroundColor:
+                tokens.palette?.success['light 3']?.value + ' !important',
+              borderColor: tokens.palette?.success.dark?.value + ' !important',
+              color: tokens.palette?.success.dark?.value,
+              '.MuiTouchRipple-root': {
+                opacity: 0,
+              },
+            },
+          },
+          '&.MuiIconButton-colorWarning': {
+            '&:hover': {
+              color: tokens.palette?.warning.dark?.value,
+              backgroundColor:
+                tokens.palette?.warning['light 3']?.value + ' !important',
+              '&.IconButtonVariant-outlined': {
+                borderColor: tokens.palette?.warning.dark?.value,
+                '--IconButton-hoverBg':
+                  tokens.palette?.background.default + ' !important',
+              },
+              '&.IconButtonVariant-plain': {
+                backgroundColor: tokens.palette?.warning.mainChannel?.value,
+              },
+            },
+            '&:active': {
+              borderColor: tokens.palette?.warning.dark?.value + ' !important',
+              backgroundColor:
+                tokens.palette?.warning['light 3']?.value + ' !important',
+              color: tokens.palette?.warning.dark?.value,
+              '.MuiTouchRipple-root': {
+                opacity: 0,
+              },
+            },
+          },
+          '&.MuiIconButton-colorError': {
+            '&:hover': {
+              color: tokens.palette?.error.dark?.value,
+              backgroundColor: tokens.palette?.error['light 3']?.value,
+              '&.IconButtonVariant-outlined': {
+                borderColor: tokens.palette?.error.dark?.value,
+                '--IconButton-hoverBg':
+                  tokens.palette?.background.default + ' !important',
+              },
+              '&.IconButtonVariant-plain': {
+                backgroundColor: tokens.palette?.error.mainChannel?.value,
+              },
+            },
+            '&:active': {
+              borderColor: tokens.palette?.error.dark?.value + ' !important',
+              backgroundColor: tokens.palette?.error['light 3']?.value,
+              color: tokens.palette?.error.dark?.value,
+              '.MuiTouchRipple-root': {
+                opacity: 0,
+              },
+            },
+          },
+          '&.IconButtonVariant-outlined': {
+            width: `${spacing(11)} !important`,
+            height: `${spacing(11)} !important`,
+            border: '1px solid',
+            borderColor: tokens.palette?.border?.default.value,
+            '&.Mui-disabled': {
+              color: tokens.palette?.text.disabled.value,
+            },
+          },
+          '&.IconButtonVariant-plain': {
+            width: `${spacing(10.5)} !important`,
+            height: `${spacing(10.5)} !important`,
+            border: '0px',
+            '&:active': {
+              border: '1px solid',
+            },
+            '&.Mui-disabled': {
+              color: tokens.palette?.text.disabled.value,
+            },
+          },
+          '&.IconButtonPositionGroup-left': {
+            borderRadius: '4px 0px 0px 4px',
+            '& .MuiTouchRipple-root .MuiTouchRipple-child': {
+              borderRadius: '4px 0px 0px 4px',
+            },
+          },
+          '&.IconButtonPositionGroup-middle': {
+            borderRadius: '0px',
+            '& .MuiTouchRipple-root .MuiTouchRipple-child': {
+              borderRadius: '0px',
+            },
+          },
+          '&.IconButtonPositionGroup-right': {
+            borderRadius: '0px 4px 4px 0px',
+            '& .MuiTouchRipple-root .MuiTouchRipple-child': {
+              borderRadius: '0px 4px 4px 0px',
+            },
+          },
+          '&.IconButtonSize-small': {
+            width: `${spacing(6)} !important`,
+            height: `${spacing(6)} !important`,
+          },
+        },
+      },
+    },
+  };
+};
+
+export default IconButton;

package/src/styled/InputLabel.ts

@@ -0,0 +1,30 @@
+import { Components } from '@mui/material';
+
+import {
+  CustomColors,
+  Spacing,
+  TokenStructure,
+} from '@/interfaces/theme.interface';
+
+const InputLabel = (
+  spacing: Spacing,
+  tokens: TokenStructure & CustomColors,
+): Components<unknown> => {
+  return {
+    MuiInputLabel: {
+      styleOverrides: {
+        root: {
+          marginBottom: spacing(2),
+          '&.Mui-success': {
+            color: tokens.palette?.success?.main?.value + ' !important',
+          },
+          '&.Mui-error': {
+            color: tokens.palette?.error?.main?.value + ' !important',
+          },
+        },
+      },
+    },
+  };
+};
+
+export default InputLabel;

package/src/styled/MenuItem.ts

@@ -0,0 +1,73 @@
+import { Components } from '@mui/material';
+
+import {
+  CustomColors,
+  Spacing,
+  TokenStructure,
+} from '@/interfaces/theme.interface';
+
+const MenuItem = (
+  spacing: Spacing,
+  tokens: TokenStructure & CustomColors,
+): Components<unknown> => {
+  return {
+    MuiMenuItem: {
+      styleOverrides: {
+        root: {
+          padding: spacing(3.25, 4),
+          '.MuiTypography-root': {
+            paddingTop: spacing(0.5),
+            color: tokens?.greyXDark?.value,
+          },
+          '.itemIcon': {
+            color: tokens?.textColors.greyDark?.value,
+            marginRight: spacing(2),
+          },
+          '&.Mui-selected': {
+            backgroundColor:
+              tokens.palette?.background?.grey?.value + ' !important',
+            '.MuiTypography-root': {
+              fontWeight: 500,
+            },
+            '.itemIcon': {
+              color: tokens?.blueHoverClickable?.value,
+            },
+          },
+          '&:hover': {
+            backgroundColor:
+              tokens?.palette?.primary?.mainChannel?.value + ' !important',
+            '.MuiTypography-root': {
+              color: tokens?.blueHoverClickable?.value + ' !important',
+              fontWeight: 500 + ' !important',
+            },
+            '.itemIcon': {
+              color: tokens?.blueHoverClickable?.value,
+            },
+          },
+          '&:focus': {
+            backgroundColor: tokens.backgroundColors?.white?.value,
+            '.MuiTypography-root': {
+              color: tokens?.greyXDark?.value,
+              fontWeight: 400,
+            },
+            '.itemIcon': {
+              color: tokens?.textColors.greyDark?.value,
+            },
+          },
+          '&.Mui-disabled': {
+            backgroundColor: tokens?.backgroundColors.greyXLight?.value,
+            '.MuiTypography-root': {
+              color: tokens?.textColors.greyDark?.value,
+              fontWeight: 500,
+            },
+            '.itemIcon': {
+              color: tokens?.greyMediumInactive?.value,
+            },
+          },
+        },
+      },
+    },
+  };
+};
+
+export default MenuItem;

package/src/styled/OutlinedInput.ts

@@ -0,0 +1,89 @@
+import { Components } from '@mui/material';
+
+import {
+  CustomColors,
+  Spacing,
+  TokenStructure,
+} from '@/interfaces/theme.interface';
+
+const OutlinedInput = (
+  spacing: Spacing,
+  tokens: TokenStructure & CustomColors,
+): Components<unknown> => {
+  return {
+    MuiOutlinedInput: {
+      styleOverrides: {
+        root: {
+          height: '44px',
+          padding: 0,
+          backgroundColor: tokens.palette?.background?.default?.value,
+          '&:hover': {
+            '.MuiOutlinedInput-notchedOutline': {
+              borderColor: tokens.palette?.text?.secondary?.value,
+            },
+          },
+          '&.Mui-focused': {
+            '.MuiOutlinedInput-notchedOutline': {
+              borderWidth: '1px',
+              borderColor: tokens.palette?.primary?.main?.value + ' !important',
+            },
+          },
+          '&.MuiInputBase-multiline': {
+            height: 'auto !important',
+            minHeight: '44px',
+            textarea: {
+              padding: spacing(2.75, 2, 2.75, 2),
+            },
+          },
+          '&.Mui-error': {
+            '.MuiOutlinedInput-notchedOutline': {
+              borderColor: tokens.palette?.error?.main?.value + ' !important',
+            },
+          },
+          '&.Mui-success': {
+            '.MuiOutlinedInput-notchedOutline': {
+              borderColor: tokens.palette?.success?.main?.value + ' !important',
+            },
+          },
+          '&.Mui-disabled': {
+            backgroundColor: tokens.palette?.background?.grey?.value,
+            '.MuiOutlinedInput-notchedOutline': {
+              borderColor:
+                tokens.palette?.border?.default?.value + ' !important',
+            },
+          },
+          '.Mui-success': {
+            color: tokens.palette?.success?.main?.value,
+          },
+        },
+        input: {
+          padding: spacing(3.25, 2, 3.25, 2),
+          '&:-webkit-autofill': {
+            '-webkit-box-shadow': 'none !important',
+            '-webkit-text-fill-color': 'inherit !important',
+          },
+          '&:-internal-autofill-selected': {
+            backgroundColor:
+              tokens.palette?.background?.default?.value + ' !important',
+          },
+          '&:-webkit-autofill:focus': {
+            transition:
+              'background-color 0s 600000s, color 0s 600000s !important',
+            backgroundColor:
+              tokens.palette?.background?.default?.value + ' !important',
+          },
+          '&::placeholder': {
+            color: tokens.palette?.text?.secondary?.value,
+            opacity: 1 + ' !important',
+          },
+        },
+        notchedOutline: {
+          borderWidth: '1px',
+          borderColor: tokens.palette?.border?.default?.value,
+        },
+      },
+    },
+  };
+};
+
+export default OutlinedInput;