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

package/src/styled/PaginationItem.ts

@@ -0,0 +1,72 @@
+import { Components } from '@mui/material';
+
+import {
+  CustomColors,
+  Spacing,
+  TokenStructure,
+} from '@/interfaces/theme.interface';
+
+const PaginationItem = (
+  _spacing: Spacing,
+  tokens: TokenStructure & CustomColors,
+): Components<unknown> => {
+  return {
+    MuiPaginationItem: {
+      styleOverrides: {
+        root: {
+          fontFamily: 'Roboto',
+          height: '44px !important',
+          width: '44px !important',
+          color: tokens.palette?.primary?.main?.value,
+          backgroundColor: 'white !important',
+          border: `1px solid ${tokens.palette?.border?.default?.value} !important`,
+          fontWeight: '700 !important',
+          outline: 'none !important',
+          fontSize: '14px !important',
+          '&:hover': {
+            backgroundColor:
+              tokens.palette?.primary['light 3']?.value + ' !important',
+            color: tokens.palette?.primary.dark?.value,
+            borderRadius: Number(tokens.radius?.small.value) + ' !important',
+            outline: 'none !important',
+          },
+          '&.Mui-selected': {
+            color: 'white !important',
+            backgroundColor:
+              tokens.palette?.primary?.main?.value + ' !important',
+            borderRadius: Number(tokens.radius?.small.value) + ' !important',
+            outline: 'none !important',
+            '&:hover': {
+              color: 'white !important',
+              backgroundColor:
+                tokens.palette?.primary.dark?.value + ' !important',
+              borderRadius: Number(tokens.radius?.small.value) + ' !important',
+              outline: 'none !important',
+            },
+            '&:focus': {
+              color: 'white !important',
+              borderRadius: Number(tokens.radius?.small.value) + ' !important',
+              outline: 'none !important',
+            },
+          },
+          '&.Mui-disabled': {
+            color: tokens.palette?.text.disabled.value + ' !important',
+            borderColor: tokens.palette?.border?.default.value + ' !important',
+            backgroundColor: 'white !important',
+            borderRadius: '4px !important',
+            outline: 'none !important',
+            opacity: '1 !important',
+          },
+          '&.MuiPaginationItem-ellipsis': {
+            color: tokens.textColors.greyDark?.value + ' !important',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          },
+        },
+      },
+    },
+  };
+};
+
+export default PaginationItem;

package/src/styled/Radio.ts

@@ -0,0 +1,67 @@
+import { Components } from '@mui/material';
+
+import {
+  CustomColors,
+  Spacing,
+  TokenStructure,
+} from '@/interfaces/theme.interface';
+
+const Radio = (
+  spacing: Spacing,
+  tokens: TokenStructure & CustomColors,
+): Components<unknown> => {
+  return {
+    MuiRadio: {
+      styleOverrides: {
+        root: {
+          height: spacing(6),
+          width: spacing(6),
+          marginRight: spacing(1),
+          padding: spacing(0) + ' !important',
+          '&:hover': {
+            backgroundColor: tokens.palette?.primary['light 3']?.value,
+            '.MuiSvgIcon-root': {
+              color: tokens?.blueHoverClickable?.value,
+            },
+          },
+          '&.Mui-disabled': {
+            '::before': {
+              zIndex: 0,
+              content: '" "',
+              display: 'block',
+              position: 'absolute',
+              borderRadius: '10px',
+              width: '14px',
+              height: '14px',
+              backgroundColor: tokens.palette?.background.grey.value,
+            },
+            '.MuiSvgIcon-root': {
+              color: tokens.palette?.border.default.value + ' !important',
+              backgroundColor: 'transparent !important',
+            },
+            '&.Mui-checked': {
+              '.MuiSvgIcon-root': {
+                color: tokens.palette?.border?.grey?.value + ' !important',
+              },
+            },
+          },
+          '.MuiFormControlLabel-root:hover &': {
+            backgroundColor: tokens.palette?.primary['light 3']?.value,
+            '.MuiSvgIcon-root': {
+              color: tokens?.blueHoverClickable?.value,
+            },
+            '&.Mui-disabled': {
+              backgroundColor: 'transparent',
+            },
+          },
+          '.MuiSvgIcon-root': {
+            width: spacing(4.8),
+            height: spacing(4.8),
+          },
+        },
+      },
+    },
+  };
+};
+
+export default Radio;

package/src/styled/Select.ts

@@ -0,0 +1,38 @@
+import { Components } from '@mui/material';
+
+import {
+  CustomColors,
+  Spacing,
+  TokenStructure,
+} from '@/interfaces/theme.interface';
+
+const Select = (
+  spacing: Spacing,
+  tokens: TokenStructure & CustomColors,
+): Components<unknown> => {
+  return {
+    MuiSelect: {
+      styleOverrides: {
+        root: {
+          '.itemIcon': {
+            display: 'inline-flex',
+            alignItems: 'center',
+            marginRight: spacing(2),
+          },
+          '.Mui-disabled.itemIcon': {
+            color: tokens.palette?.text.disabled?.value,
+          },
+          '&.MuiMultipleSelect': {
+            height: 'auto !important',
+            minHeight: spacing(11),
+          },
+        },
+        multiple: {
+          padding: spacing(2) + ' !important',
+        },
+      },
+    },
+  };
+};
+
+export default Select;

package/src/styled/Switch.ts

@@ -0,0 +1,62 @@
+import { Components } from '@mui/material';
+
+import {
+  CustomColors,
+  Spacing,
+  TokenStructure,
+} from '@/interfaces/theme.interface';
+
+const Switch = (
+  _spacing: Spacing,
+  tokens: TokenStructure & CustomColors,
+): Components<unknown> => {
+  return {
+    MuiSwitch: {
+      styleOverrides: {
+        root: {
+          '.MuiSwitch-track': {
+            backgroundColor:
+              tokens.backgroundColors?.blueHoverEquivalence?.value,
+            opacity: 1 + ' !important',
+            border: '1px solid',
+            borderColor: tokens.palette?.primary.main?.value,
+          },
+          '.MuiSwitch-thumb': {
+            backgroundColor: tokens.palette?.background?.default?.value,
+          },
+          '.Mui-checked': {
+            '.MuiSwitch-track': {
+              backgroundColor: tokens.palette?.primary.main?.value,
+              opacity: 1 + ' !important',
+              border: '1px solid',
+            },
+            '.MuiSwitch-thumb': {
+              backgroundColor: tokens.blueHoverClickable?.value + ' !important',
+            },
+          },
+          '&.Mui-disabled': {
+            '.MuiSwitch-track': {
+              backgroundColor:
+                tokens.borderColors?.greyLightDefaultBorder?.value,
+              borderColor: tokens.greyMediumInactive?.value,
+            },
+            '.MuiSwitch-thumb': {
+              backgroundColor: tokens.backgroundColors?.greyXLight?.value,
+            },
+            '&.Mui-checked': {
+              '.MuiSwitch-track': {
+                backgroundColor: tokens.greyMediumInactive?.value,
+              },
+              '.MuiSwitch-thumb': {
+                backgroundColor:
+                  tokens.textColors.greyDark?.value + ' !important',
+              },
+            },
+          },
+        },
+      },
+    },
+  };
+};
+
+export default Switch;

package/src/styled/Table.ts

@@ -0,0 +1,54 @@
+import { Components } from '@mui/material';
+
+import {
+  CustomColors,
+  Spacing,
+  TokenStructure,
+} from '@/interfaces/theme.interface';
+
+const Table = (
+  spacing: Spacing,
+  tokens: TokenStructure & CustomColors,
+): Components<unknown> => {
+  return {
+    MuiTableContainer: {
+      styleOverrides: {
+        root: {
+          backgroundColor: tokens.palette?.background.default.value,
+          borderRadius: spacing(1),
+        },
+      },
+    },
+    MuiTableCell: {
+      styleOverrides: {
+        root: {
+          height: spacing(12.5),
+          borderColor: tokens.borderColors.greyLightDefaultBorder?.value,
+        },
+        head: {
+          padding: spacing(0, 4),
+          '& .firstSortIcon': {
+            paddingLeft: spacing(1),
+          },
+        },
+        body: {
+          padding: spacing(3, 4),
+        },
+      },
+    },
+    MuiTableRow: {
+      styleOverrides: {
+        root: {
+          height: spacing(12.5),
+          borderColor: tokens.borderColors.greyLightDefaultBorder?.value,
+        },
+        head: {
+          height: spacing(10) + ' !important',
+          borderColor: tokens.borderColors.greyLightDefaultBorder?.value,
+        },
+      },
+    },
+  };
+};
+
+export default Table;

package/src/styled/TextField.ts

@@ -0,0 +1,105 @@
+import { Components } from '@mui/material';
+
+import {
+  CustomColors,
+  Spacing,
+  TokenStructure,
+} from '@/interfaces/theme.interface';
+
+const TextField = (
+  spacing: Spacing,
+  tokens: TokenStructure & CustomColors,
+): Components<unknown> => {
+  return {
+    MuiTextField: {
+      styleOverrides: {
+        root: {
+          '.itemIcon': {
+            display: 'inline-flex',
+            alignItems: 'center',
+            marginRight: spacing(4),
+          },
+          '.clearButton': {
+            color: tokens.palette?.primary?.main?.value,
+          },
+          '&::placeholder': {
+            color: tokens.palette?.text?.secondary?.value,
+            opacity: 1 + ' !important',
+          },
+          '&.Mui-focused': {
+            '.MuiOutlinedInput-notchedOutline': {
+              borderWidth: spacing(0.25),
+              borderColor: tokens.palette?.primary?.main?.value + ' !important',
+            },
+          },
+          '&.Mui-error': {
+            '.MuiOutlinedInput-notchedOutline': {
+              borderColor: tokens.palette?.error?.main?.value + ' !important',
+            },
+          },
+          '&.Mui-success': {
+            '.MuiOutlinedInput-notchedOutline': {
+              borderColor: tokens.palette?.success?.main?.value + ' !important',
+            },
+          },
+          '&.Mui-disabled': {
+            '.itemIcon': {
+              color: tokens.palette?.text.disabled?.value,
+            },
+            '.MuiOutlinedInput-root': {
+              backgroundColor: tokens.palette?.background?.grey?.value,
+              color: tokens.palette?.text?.disabled?.value,
+            },
+            '.MuiOutlinedInput-notchedOutline': {
+              borderColor:
+                tokens.palette?.border?.default?.value + ' !important',
+            },
+          },
+          '.MuiAutocomplete-endAdornment': {
+            marginRight: spacing(2),
+            right: 0 + ' !important',
+            '.Mui-error': {
+              color: tokens.palette?.error?.main?.value,
+            },
+            '.Mui-disabled': {
+              color: tokens.palette?.text.disabled?.value,
+            },
+            '.MuiAutocomplete-clearIndicator': {
+              height: spacing(5),
+              paddingRight: 0,
+              paddingLeft: 0,
+              marginRight: spacing(2),
+            },
+            '.itemIcon': {
+              marginRight: spacing(0),
+            },
+          },
+          '.MuiAutocomplete-clearIndicator': {
+            '&:hover': {
+              background: 'none',
+            },
+            '&:active': {
+              background: 'none',
+            },
+            '&:focus': {
+              background: 'none',
+            },
+          },
+          '.MuiAutocomplete-popupIndicator': {
+            '&:hover': {
+              background: 'none',
+            },
+            '&:active': {
+              background: 'none',
+            },
+            '&:focus': {
+              background: 'none',
+            },
+          },
+        },
+      },
+    },
+  };
+};
+
+export default TextField;

package/src/styled/Typography.ts

@@ -0,0 +1,67 @@
+import { Components } from '@mui/material';
+
+import { Spacing } from '@/interfaces/theme.interface';
+
+const Typography = (_spacing: Spacing): Components<unknown> => {
+  return {
+    MuiTypography: {
+      styleOverrides: {
+        root: {
+          variants: [
+            {
+              props: (props) => props.variant === 'bigNumber',
+              style: {
+                fontSize: '42px',
+                lineHeight: '49px',
+                fontWeight: 700,
+              },
+            },
+            {
+              props: (props) => props.variant === 'body1Medium',
+              style: {
+                fontWeight: 500,
+              },
+            },
+            {
+              props: (props) =>
+                props.variant === 'body1Bold' ||
+                props.variant === 'buttonNotif',
+              style: {
+                fontWeight: 700,
+              },
+            },
+            {
+              props: (props) => props.variant === 'body2Medium',
+              style: {
+                fontWeight: 500,
+              },
+            },
+            {
+              props: (props) => props.variant === 'body2Bold',
+              style: {
+                fontWeight: 700,
+              },
+            },
+            {
+              props: (props) => props.variant === 'link1',
+              style: {
+                fontWeight: 700,
+                textDecoration: 'underline',
+              },
+            },
+            {
+              props: (props) => props.variant === 'link2',
+              style: {
+                fontSize: '13px',
+                fontWeight: 700,
+                textDecoration: 'underline',
+              },
+            },
+          ],
+        },
+      },
+    },
+  };
+};
+
+export default Typography;

package/src/theme/theme.tsx

@@ -0,0 +1,23 @@
+import { useMemo } from 'react';
+
+import { PaletteMode, ThemeOptions } from '@mui/material';
+
+import getTheme from '@/helpers/theme.helper';
+import { Theme } from '@/interfaces/theme.interface';
+
+import tokens from '../tokens/tokens.json';
+
+const theme = (themeName: Theme, mode: PaletteMode = 'light'): ThemeOptions => {
+  const designSystemThemeObject = getTheme(themeName, mode, tokens);
+
+  const designSystemTheme = useMemo(
+    () => ({
+      ...designSystemThemeObject,
+    }),
+    [designSystemThemeObject],
+  );
+
+  return designSystemTheme;
+};
+
+export default theme;