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

package/src/css/datatable/datatableCss.ts

@@ -1,32 +0,0 @@
-import { MuiTokens } from '@/interfaces/theme';
-
-const DatatableCss = (muiTokens: MuiTokens): Record<string, unknown> => {
-  return {
-    '& .MuiTableContainer-root': {
-      backgroundColor: muiTokens.palette.white,
-      borderRadius: '4px',
-    },
-    '.MuiTableCell-root': {
-      borderColor: muiTokens.palette.greyLightDefaultBorder,
-    },
-    '& .MuiTableRow-root': {
-      height: '50px',
-      borderColor: muiTokens.palette.greyLightDefaultBorder,
-    },
-    '& .MuiTableRow-head': {
-      height: '40px !important',
-      borderColor: muiTokens.palette.greyLightDefaultBorder,
-    },
-    '& .MuiTableCell-head': {
-      padding: '0px 16px',
-      '& .firstSortIcon': {
-        paddingLeft: '4px',
-      },
-    },
-    '& .MuiTableCell-body': {
-      padding: '12px 16px',
-    },
-  };
-};
-
-export default DatatableCss;

package/src/css/form/autoCompleteCss.ts

@@ -1,340 +0,0 @@
-import { MuiTokens } from '@/interfaces/theme';
-
-const AutoCompleteCss = (muiTokens: MuiTokens): Record<string, unknown> => {
-  return {
-    '&.MuiFormControl-root': {
-      zIndex: 1,
-      '.MuiInputBase-root': {
-        backgroundColor: muiTokens.palette.white,
-        height: '44px',
-        padding: 0 + ' !important',
-        '.SelectIcon': {
-          marginTop: '-1px',
-          color: muiTokens.palette.blueClickable + ' !important',
-        },
-      },
-      '&:hover': {
-        '.MuiOutlinedInput-notchedOutline': {
-          borderColor: muiTokens.palette.greyDark + ' !important',
-        },
-      },
-      '.Mui-disabled': {
-        '.MuiOutlinedInput-notchedOutline': {
-          borderColor: muiTokens.palette.greyLightDefaultBorder + ' !important',
-        },
-      },
-      '.Mui-focused .MuiOutlinedInput-notchedOutline': {
-        borderWidth: '1px',
-        borderColor: muiTokens.palette.blueClickable + ' !important',
-      },
-      '.Mui-error': {
-        color: muiTokens.palette.redError,
-        '& span': {
-          color: `${muiTokens.palette.greyDark as string} !important`,
-        },
-        '& fieldset': {
-          borderColor: muiTokens.palette.redError + ' !important',
-        },
-        '.MuiOutlinedInput-notchedOutline': {
-          borderColor: muiTokens.palette.redError + ' !important',
-        },
-      },
-      '.MuiFormLabel-root.Mui-focused': {
-        transform: 'translate(14px, -7px) scale(0.75) !important',
-      },
-      '.MuiFormLabel-root.Mui-Input-filled': {
-        transform: 'translate(14px, -7px) scale(0.75) !important',
-      },
-      '.MuiOutlinedInput-root': {
-        height: '22px',
-      },
-      '.MuiChip-deleteIcon .MuiSvgIcon-root': {
-        color: muiTokens.palette.blueClickable,
-      },
-      '.MuiOutlinedInput-notchedOutline': {
-        borderColor: muiTokens.palette.greyLightDefaultBorder,
-        borderWidth: '1px !important',
-        fontSize: '16px !important',
-      },
-      '&.Mui-success': {
-        color: muiTokens.palette.greenSuccess,
-        '.SelectIcon': {
-          color: muiTokens.palette.greenSuccess + ' !important',
-        },
-        '& .MuiChip-label': {
-          color: 'unset',
-        },
-        '& .clear': {
-          '& span': {
-            color: muiTokens.palette.blueClickable,
-          },
-        },
-        '& .MuiAutocomplete-popupIndicatorOpen': {
-          transform: 'none',
-        },
-        '& button[title="Close"].MuiAutocomplete-popupIndicator': {
-          '& span': {
-            position: 'relative',
-            transform: 'none',
-          },
-        },
-        '.MuiOutlinedInput-notchedOutline': {
-          borderColor: muiTokens.palette.greenSuccess,
-        },
-      },
-      '&.Mui-disabled': {
-        '.MuiAutocomplete-endAdornment .SelectIcon': {
-          color: `${muiTokens.palette.greyMediumInactive} !important`,
-        },
-        input: {
-          backgroundColor: muiTokens.palette.greyXLight,
-          color: muiTokens.palette.greyDark,
-          borderColor: muiTokens.palette.greyLightDefaultBorder,
-          WebkitTextFillColor: muiTokens.palette.greyDark,
-        },
-        label: {
-          background: 'transparent',
-          backgroundColor: 'transparent !important',
-          color: muiTokens.palette.greyDark + ' !important',
-          '-webkit-text-fill-color': muiTokens.palette.greyDark,
-        },
-        color: muiTokens.palette.greyDark,
-      },
-      '.MuiInputLabel-root': {
-        '&.Mui-error': {
-          color: `${muiTokens.palette.redError} !important`,
-        },
-        '&.Mui-success': {
-          color: `${muiTokens.palette.greenSuccess} !important`,
-        },
-        '&.Mui-focused': {
-          lineHeight: '16px',
-          fontWeight: 500,
-          fontSize: '16px',
-          color: `${muiTokens.palette.blueClickable}`,
-          '&.Mui-error': {
-            color: `${muiTokens.palette.redError} !important`,
-          },
-          '&.Mui-success': {
-            color: muiTokens.palette.greenSuccess,
-          },
-        },
-      },
-      '.MuiFormHelperText-root': {
-        color: muiTokens.palette.greyDark,
-        marginTop: '8px',
-        marginLeft: '8px',
-        '&.Mui-error': {
-          color: muiTokens.palette.redError,
-        },
-      },
-      '.MuiAutocomplete-clearIndicator': {
-        backgroundColor: 'transparent',
-        '.MuiSvgIcon-root': {
-          color: muiTokens.palette.blueClickable,
-        },
-      },
-      '.MuiAutocomplete-popupIndicator': {
-        backgroundColor: 'transparent',
-      },
-      '.clear': {
-        alignSelf: 'center',
-        position: 'relative',
-      },
-      '&.MuiAutocomplete-listbox': {
-        '.clear': {
-          visibility: 'visible',
-        },
-      },
-      '&.MuiMenuItem-root': {
-        border: '1px solid green',
-      },
-      '& .Mui-focused': {
-        borderColor: muiTokens.palette.blueClickable,
-      },
-      '& .Mui-hover': {
-        borderColor: muiTokens.palette.greyDark,
-      },
-      '& .MuiMenuItem-root': {
-        border: '1px solid green',
-      },
-      '.MuiMenuItem-root': {
-        border: '1px solid green',
-      },
-      '&.Mui-filled': {
-        '.MuiAutocomplete-popupIndicator': {
-          backgroundColor: 'transparent',
-        },
-        '.Mui-success': {
-          '& button[title="Close"].MuiAutocomplete-popupIndicator': {
-            '& span': {
-              position: 'relative',
-              transform: 'none',
-            },
-          },
-        },
-        '.MuiOutlinedInput-notchedOutline': {
-          legend: {
-            maxWidth: '100%',
-          },
-        },
-      },
-      '.labelClassic': {
-        minHeight: '20px',
-        '.MuiFormLabel-root': {
-          transform: 'translate(14px, -7px) scale(0.75) !important',
-        },
-        '&.Mui-Input-filled': {
-          lineHeight: '16px',
-          fontWeight: '500',
-          fontSize: '16px',
-          marginTop: '2px',
-          color: muiTokens.palette.greyXDark,
-        },
-      },
-      '.labelCustom': {
-        color: muiTokens.palette.greyDark,
-        fontSize: '14px',
-        lineHeight: '18px',
-        height: '20px',
-        fontWeight: '400',
-        marginTop: '-3px',
-        '&.Mui-Input-filled': {
-          lineHeight: '16px',
-          fontWeight: '500',
-          fontSize: '16px',
-          marginTop: '2px',
-          marginLeft: '0px',
-          color: muiTokens.palette.greyXDark,
-        },
-        '& .MuiInputLabel-shrink': {
-          lineHeight: '16px',
-          fontWeight: '500',
-          fontSize: '16px',
-          marginTop: '2px',
-          marginLeft: '0px',
-          color: muiTokens.palette.greyXDark,
-        },
-        '&.Mui-focused': {
-          marginTop: '2px',
-          marginLeft: '0px',
-          color: muiTokens.palette.blueClickable,
-        },
-      },
-      '.MuiOutlinedInput-input': {
-        fontSize: '14px',
-        lineHeight: '18px',
-        fontWeight: 400,
-        padding: '12px 8px !important',
-        marginTop: '0px',
-        opacity: 1 + ' !important',
-        color: `${muiTokens.palette.greyDark as string}`,
-        '&.Mui-focused': {
-          marginTop: '0px',
-          color: `${muiTokens.palette.blueClickable as string}`,
-        },
-        '&.Mui-disabled': {
-          color: muiTokens.palette.greyDark,
-        },
-        '&::placeholder': {
-          color: `${muiTokens.palette.greyDark as string} !important`,
-          opacity: 1 + ' !important',
-          fontWeight: 400,
-          lineHeight: '18px',
-          fontSize: '14px',
-        },
-      },
-      '.MuiFormLabel-filled': {
-        lineHeight: '16px',
-        fontWeight: '500',
-        fontSize: '16px',
-        marginTop: '2px',
-        marginLeft: '0px',
-        color: muiTokens.palette.greyXDark,
-        transform: 'translate(14px, -7px) scale(0.75) !important',
-      },
-    },
-    '&.Mui-filled': {
-      '.MuiOutlinedInput-input': {
-        color: `${muiTokens.palette.greyXDark as string}`,
-      },
-    },
-    '&.DsAutoComplete': {
-      '.MuiAutocomplete-endAdornment': {
-        top: 'calc(50%)',
-        height: '36px',
-        display: 'flex',
-      },
-      '&.Mui-disabled .MuiAutocomplete-endAdornment': {
-        top: 'calc(50%)',
-      },
-      '&.Mui-filled': {
-        '.MuiAutocomplete-endAdornment': {
-          top: 'calc(50%)',
-        },
-      },
-      '.MuiInputBase-root': {
-        minHeight: '44px',
-        height: 'auto',
-      },
-      '&.MuiMenuItem-root': {
-        border: '1px solid green',
-      },
-      '& .MuiMenuItem-root': {
-        border: '1px solid green',
-      },
-      '.MuiMenuItem-root': {
-        border: '1px solid green',
-      },
-      '.MuiAutocomplete-popupIndicator': {
-        backgroundColor: 'transparent',
-      },
-      '.Mui-disabled': {
-        color: muiTokens.palette.greyDark + ' !important',
-        backgroundColor: muiTokens.palette.greyXLight + ' !important',
-        WebkitTextFillColor: muiTokens.palette.greyDark + ' !important',
-      },
-      '.Mui-success': {
-        '& button[title="Close"].MuiAutocomplete-popupIndicator': {
-          position: 'relative',
-          transform: 'none',
-        },
-      },
-    },
-    '&.DsAutoComplete.Mui-filled': {
-      '.MuiOutlinedInput-input': {
-        color: `${muiTokens.palette.greyXDark as string} !important`,
-        padding: '0px 7px 0px 7px !important',
-      },
-      ' .MuiOutlinedInput-root': {
-        padding: '7px 31px 7px 4px !important',
-      },
-      '.MuiAutocomplete-popupIndicator': {
-        backgroundColor: 'transparent',
-      },
-      '.Mui-disabled': {
-        color: muiTokens.palette.greyDark,
-        backgroundColor: muiTokens.palette.greyXLight,
-        WebkitTextFillColor: muiTokens.palette.greyDark,
-        '.MuiAutocomplete-popupIndicator': {
-          backgroundColor: 'transparent',
-        },
-      },
-    },
-    '.MenuItem ': {
-      backgroundColor: 'white',
-      fontWeight: 400,
-      whiteSpace: 'break-spaces',
-      wordBreak: 'break-word',
-    },
-    '.MenuItem[aria-selected="true"]': {
-      backgroundColor: muiTokens.palette.greyXLight,
-      fontWeight: 500,
-    },
-    '.MenuItem:hover': {
-      backgroundColor: muiTokens.palette.blueHoverEquivalence,
-    },
-  };
-};
-
-export default AutoCompleteCss;

package/src/css/form/checkboxCss.ts

@@ -1,128 +0,0 @@
-import { MuiTokens } from '@/interfaces/theme';
-
-const CheckboxCss = (muiTokens: MuiTokens): Record<string, unknown> => {
-  return {
-    '&.MuiFormControl-root': {
-      '&.DsCheckbox': {
-        '&.Mui-disabled': {
-          '.MuiFormControlLabel-root': {
-            cursor: 'auto !important',
-          },
-        },
-        '.MuiCheckbox-root': {
-          '::before': {
-            zIndex: 1,
-            content: '" "',
-            display: 'block',
-            position: 'absolute',
-            borderRadius: '2px',
-            width: '14px',
-            height: '14px',
-            backgroundColor: 'white',
-          },
-          width: '24px',
-          height: '24px',
-          marginRight: '4px',
-          marginBottom: '0px',
-          borderRadius: '4px',
-          '.MuiSvgIcon-root': {
-            zIndex: 1,
-            width: '18px',
-            height: '18px',
-            path: {
-              width: '14px',
-              height: '14px',
-            },
-          },
-          '&.Mui-checked': {
-            '.MuiSvgIcon-root': {
-              color: muiTokens.palette.blueClickable,
-            },
-          },
-          '&.MuiCheckbox-indeterminate': {
-            '::before': {
-              backgroundColor: muiTokens.palette.blueClickable,
-              borderRadius: '1.5px',
-            },
-            '.MuiSvgIcon-root': {
-              color: muiTokens.palette.white + ' !important',
-              border: '2px solid',
-              path: {
-                color: muiTokens.palette.white,
-              },
-            },
-            '&:hover .MuiSvgIcon-root': {
-              color: muiTokens.palette.blueHoverEquivalence + ' !important',
-            },
-          },
-          '&.Mui-disabled': {
-            '::before': {
-              backgroundColor: muiTokens.palette.greyXLight,
-            },
-            '.MuiSvgIcon-root': {
-              color: muiTokens.palette.greyLightDefaultBorder + ' !important',
-              backgroundColor: 'transparent !important',
-              outlineOffset: '-2px',
-            },
-            '&.Mui-checked': {
-              '.MuiSvgIcon-root': {
-                color: muiTokens.palette.greyMediumInactive + ' !important',
-              },
-            },
-            '&.MuiCheckbox-indeterminate': {
-              '::before': {
-                backgroundColor: muiTokens.palette.greyMediumInactive,
-                borderRadius: '1.5px',
-              },
-              '.MuiSvgIcon-root': {
-                color: muiTokens.palette.white + ' !important',
-                border: '2px solid',
-                path: {
-                  color: muiTokens.palette.greyXLight,
-                },
-              },
-            },
-          },
-          '&:hover': {
-            backgroundColor:
-              muiTokens.palette.blueHoverEquivalence + ' !important',
-            '.MuiSvgIcon-root': {
-              color: muiTokens.palette.blueHoverClickable + ' !important',
-            },
-          },
-        },
-        '.DsCheckbox-label': {
-          fontSize: '14px',
-          marginLeft: '-2px',
-          color: muiTokens.palette.greyXDark,
-          fontWeight: 400,
-          '&.Mui-disabled': {
-            color: muiTokens.palette.greyDark,
-          },
-        },
-        '.MuiTouchRipple-root': {
-          background: 'white',
-          height: '12px',
-          width: '12px',
-          top: '6px',
-          zIndex: 0,
-          left: '6px',
-          borderRadius: '0px',
-        },
-      },
-      '.MuiBox-root .MuiBox-root svg': {
-        top: '1px',
-        position: 'relative',
-      },
-    },
-    '.MuiFormHelperText-root': {
-      marginTop: '3px',
-      marginLeft: '-6px',
-      fontWeight: '400',
-      fontSize: '11px',
-      color: muiTokens.palette.greyDark,
-    },
-  };
-};
-
-export default CheckboxCss;

package/src/css/form/checkboxGroupCss.ts

@@ -1,42 +0,0 @@
-import { MuiTokens } from '@/interfaces/theme';
-
-const CheckboxGroupCss = (muiTokens: MuiTokens): Record<string, unknown> => {
-  return {
-    // à garder pour label.css 👇
-    '&.MuiFormControl-root': {
-      '.MuiFormLabel-root': {
-        color: muiTokens.palette.greyXDark,
-        marginLeft: '-6px',
-        fontWeight: '500',
-        fontSize: '13px',
-        lineHeight: '16px',
-        paddingBottom: '4px',
-      },
-      // à garder pour label.css ⬆️
-      '.MuiFormHelperText-root': {
-        marginTop: '3px',
-        marginLeft: '-6px',
-        color: muiTokens.palette.greyDark,
-        fontWeight: '400',
-        fontSize: '11px',
-        paddingTop: '4px',
-      },
-    },
-    // à garder pour label.css 👇
-    '&.Mui-disabled': {
-      '.MuiFormLabel-root': {
-        color: muiTokens.palette.greyDark + ' !important',
-      },
-    },
-    '&.Mui-error': {
-      '.MuiFormLabel-root': {
-        color: muiTokens.palette.redError + ' !important',
-      },
-      '.MuiFormHelperText-root': {
-        color: muiTokens.palette.redError + ' !important',
-      },
-    },
-  };
-};
-
-export default CheckboxGroupCss;

package/src/css/form/datePickerCss.ts

@@ -1,117 +0,0 @@
-import { MuiTokens } from '@/interfaces/theme';
-
-const DatePickerCss = (muiTokens: MuiTokens): Record<string, unknown> => {
-  return {
-    '.MuiInputBase-root': {
-      backgroundColor: muiTokens.palette.white,
-      height: 44,
-      fontSize: '14px',
-      '&.Mui-disabled': {
-        backgroundColor: muiTokens.palette.greyXLight + ' !important',
-        '.MuiSvgIcon-root': {
-          color: muiTokens.palette.greyMediumInactive,
-        },
-      },
-    },
-    '.MuiTextField-root': {
-      width: 'inherit',
-    },
-    legend: {
-      fontSize: '0.7em',
-    },
-    '.MuiFormHelperText-root': {
-      marginLeft: '-8px !important',
-      color: muiTokens.palette.greyDark,
-    },
-    '.Mui-error': {
-      '.MuiInputLabel-root': {
-        color: muiTokens.palette.redError + ' !important',
-      },
-      '.MuiOutlinedInput-notchedOutline': {
-        borderColor: muiTokens.palette.redError + ' !important',
-      },
-      '.MuiFormHelperText-root': {
-        color: muiTokens.palette.redError + ' !important',
-      },
-    },
-    '.Mui-disabled': {
-      '&.MuiButtonBase-root': {
-        color: muiTokens.palette.greyMediumInactive,
-      },
-      '.MuiOutlinedInput-notchedOutline': {
-        borderColor: muiTokens.palette.greyLightDefaultBorder + ' !important',
-      },
-    },
-    '.Mui-success': {
-      '.MuiInputLabel-root': {
-        color: muiTokens.palette.greenSuccess + ' !important',
-      },
-      '.MuiOutlinedInput-notchedOutline': {
-        fontSize: '16px !important',
-        borderColor: muiTokens.palette.greenSuccess + ' !important',
-      },
-      '.MuiInputAdornment-root': {
-        '.itemIcon .MuiSvgIcon-root': {
-          color: muiTokens.palette.greenSuccess,
-        },
-      },
-    },
-    '.MuiOutlinedInput-notchedOutline': {
-      fontSize: '16px !important',
-      legend: {
-        fontSize: '12px !important',
-      },
-    },
-
-    '.MuiInputBase-input': {
-      color: muiTokens.palette.greyXDark,
-      padding: 0,
-      '&.Mui-disabled': {
-        '-webkit-text-fill-color': muiTokens.palette.greyDark,
-      },
-    },
-    '.MuiOutlinedInput-root': {
-      padding: '13px 14.5px 13px 8px !important',
-      '& fieldset': {
-        borderWidth: '1px !important',
-      },
-    },
-    '& .MuiFormHelperText-root': {
-      marginTop: '8px',
-      paddingTop: '0px',
-      paddingLeft: '16px',
-    },
-    '& .MuiSvgIcon-root': {
-      color: muiTokens.palette.blueClickable,
-    },
-    '.MuiInputLabel-root': {
-      marginTop: '-4px',
-      color: muiTokens.palette.greyDark,
-      fontSize: '14px',
-      '&.Mui-disabled': {
-        color: muiTokens.palette.greyDark,
-      },
-    },
-    '.MuiInputLabel-shrink': {
-      marginTop: '4px',
-      marginLeft: '0px',
-      lineHeight: '16px',
-      fontWeight: '500',
-      fontSize: '16px',
-    },
-    '.MuiFormLabel-filled': {
-      marginTop: '6px',
-      lineHeight: '16px',
-      fontWeight: '500',
-      marginLeft: '0px',
-      color: muiTokens.palette.greyXDark,
-      fontSize: '16px !important', // bug fontsize limited max to 16px : https://github.com/mui/material-ui/issues/26607
-      transform: 'translate(14px, -11px) scale(0.75)',
-    },
-    '.MuiInputLabel-root.Mui-focused': {
-      color: muiTokens.palette.blueClickable,
-    },
-  };
-};
-
-export default DatePickerCss;