@groupeactual/design-tokens 1.7.10 → 2.0.0-beta.1

package/src/css/form/radioCss.ts

@@ -1,102 +0,0 @@
-import { MuiTokens } from '@/interfaces/theme';
-
-const RadioCss = (muiTokens: MuiTokens): Record<string, unknown> => {
-  return {
-    '&.MuiFormControl-root': {
-      '.MuiRadio-root': {
-        '.MuiSvgIcon-root': {
-          flexShrink: 0,
-          zIndex: 1,
-          height: '16px',
-          width: '16px',
-          color: muiTokens.palette.greyMediumInactive,
-        },
-        height: '16px',
-        width: '16px',
-        marginRight: '4px',
-        '&:hover': {
-          '.MuiSvgIcon-root': {
-            color: muiTokens.palette.blueHoverClickable + ' !important',
-          },
-        },
-      },
-      '.MuiBox-root .itemIcon svg': {
-        top: '1px',
-        position: 'relative',
-      },
-      '.MuiFormControlLabel-root': {
-        margin: '0px 0px 4px 0px',
-        color: muiTokens.palette.greyXDark,
-        alignItems: 'self-start',
-      },
-      '.MuiFormControlLabel-label': {
-        fontWeight: '400',
-        fontSize: '14px',
-        position: 'relative',
-      },
-      '.MuiButtonBase-root': {
-        color: muiTokens.palette.greyLightDefaultBorder,
-        '&.Mui-checked': {
-          color: muiTokens.palette.blueClickable,
-          '& .MuiSvgIcon-root': {
-            color: muiTokens.palette.blueClickable,
-          },
-        },
-      },
-      '.MuiFormLabel-root': {
-        color: muiTokens.palette.greyXDark,
-        fontWeight: '500',
-        fontSize: '13px',
-        paddingBottom: '4px',
-        paddingLeft: '2px',
-      },
-      '.MuiFormHelperText-root': {
-        margin: '0px',
-        paddingTop: '4px',
-        color: muiTokens.palette.greyDark,
-        fontSize: '11px',
-      },
-      '&.Mui-disabled': {
-        '.MuiFormLabel-root': {
-          color: muiTokens.palette.greyDark,
-        },
-        '.MuiTypography-root': {
-          color: muiTokens.palette.greyDark,
-        },
-        '.MuiFormControlLabel-label': {
-          color: muiTokens.palette.greyDark,
-        },
-        '.MuiButtonBase-root': {
-          backgroundColor: muiTokens.palette.greyXLight,
-          transform: 'scale(0.7)',
-          '& span': {
-            transform: 'scale(1.4)',
-          },
-          '& .MuiSvgIcon-root': {
-            color: muiTokens.palette.greyLightDefaultBorder,
-          },
-          '&.Mui-checked .MuiSvgIcon-root': {
-            color: muiTokens.palette.greyMediumInactive,
-          },
-        },
-      },
-      '&.Mui-error': {
-        '.MuiFormLabel-root': {
-          color: muiTokens.palette.redError,
-        },
-        '.MuiFormHelperText-root': {
-          color: muiTokens.palette.redError + ' !important',
-        },
-      },
-      '.MuiTouchRipple-root': {
-        background: 'white',
-        height: '16px',
-        width: '16px',
-        zIndex: 0,
-        left: '3px',
-      },
-    },
-  };
-};
-
-export default RadioCss;

package/src/css/form/selectCss.ts

@@ -1,233 +0,0 @@
-import { MuiTokens } from '@/interfaces/theme';
-
-const SelectCss = (muiTokens: MuiTokens): Record<string, unknown> => {
-  return {
-    '&.MuiFormControl-root': {
-      zIndex: 1,
-      '&:hover': {
-        '.clear': {
-          visibility: 'visible',
-        },
-        '.MuiOutlinedInput-notchedOutline': {
-          borderColor: muiTokens.palette.greyDark + ' !important',
-        },
-      },
-      '.MuiInputBase-root.Mui-disabled': {
-        backgroundColor: muiTokens.palette.greyXLight,
-        color: muiTokens.palette.greyDark,
-        borderColor: muiTokens.palette.greyLightDefaultBorder + ' !important',
-        WebkitTextFillColor: muiTokens.palette.greyDark,
-      },
-      '.MuiInputBase-root': {
-        height: '44px',
-        padding: 0 + ' !important',
-        backgroundColor: muiTokens.palette.white,
-        '.SelectIcon': {
-          marginTop: '-2px',
-          color: muiTokens.palette.blueClickable + ' !important',
-        },
-      },
-      '.MuiFormLabel-root.Mui-focused': {
-        transform: 'translate(14px, -7px) scale(0.75) !important',
-      },
-      '.MuiFormLabel-filled': {
-        transform: 'translate(14px, -7px) scale(0.75) !important',
-      },
-      '.MuiFormLabel-root.Mui-Input-filled': {
-        transform: 'translate(14px, -7px) scale(0.75) !important',
-      },
-      '.MuiInputLabel-root': {
-        marginTop: '2px',
-      },
-      '& label': {
-        color: muiTokens.palette.greyDark,
-      },
-      '&.Mui-filled': {
-        '& label': {
-          color: muiTokens.palette.greyXDark,
-        },
-      },
-      '&.DsMultiSelect': {
-        '&.Mui-filled': {
-          '.MuiInputBase-root': {
-            minHeight: '44px',
-            height: 'auto !important',
-          },
-        },
-        '.MuiOutlinedInput-input': {
-          padding: '8px 12px 7px 8px !important',
-        },
-      },
-      '.Mui-disabled': {
-        '.MuiOutlinedInput-notchedOutline': {
-          '-webkit-text-fill-color': muiTokens.palette.greyDark,
-          borderColor: muiTokens.palette.greyLightDefaultBorder + ' !important',
-        },
-      },
-      '.MuiOutlinedInput-notchedOutline': {
-        borderWidth: '1px !important',
-        borderColor: muiTokens.palette.greyLightDefaultBorder,
-        fontSize: '16px',
-      },
-      '.Mui-focused .MuiOutlinedInput-notchedOutline': {
-        borderWidth: '1px',
-        borderColor: muiTokens.palette.blueClickable,
-      },
-      '&.Mui-error': {
-        '.MuiOutlinedInput-notchedOutline': {
-          borderColor: muiTokens.palette.redError + ' !important',
-        },
-      },
-      '.clear': {
-        visibility: 'hidden',
-        alignSelf: 'center',
-        position: 'relative',
-        marginTop: '3px',
-        marginRight: '-8px',
-      },
-
-      '& .MuiSelect-select .notranslate::after': {
-        fontWeight: 400,
-        lineHeight: '18px',
-        fontSize: '14px',
-        color: muiTokens.palette.greyDark + ' !important',
-      },
-      '&.Select-mui': {
-        '&.Mui-filled': {
-          '.MuiOutlinedInput-input': {
-            fontSize: '14px',
-            lineHeight: '18px',
-            fontWeight: 400,
-            padding: '13px 2px 11px 8px',
-            '&.Mui-disabled': {
-              color: muiTokens.palette.greyDark,
-            },
-          },
-        },
-        '.MuiInputLabel-root': {
-          transform: 'translate(8px, 16px) scale(1)',
-          fontSize: '14px', // bug fontsize limited max to 16px : https://github.com/mui/material-ui/issues/26607
-          lineHeight: '18px',
-          height: '20px',
-          fontWeight: 400,
-          marginTop: '-3px',
-          '&.Mui-disabled': {
-            color: muiTokens.palette.greyDark,
-          },
-          '&.Mui-error': {
-            color: `${muiTokens.palette.redError} !important`,
-          },
-          '&.Mui-focused': {
-            lineHeight: '16px',
-            fontWeight: 500,
-            fontSize: '16px', // bug fontsize limited max to 16px : https://github.com/mui/material-ui/issues/26607
-            marginTop: '2px !important',
-            color: muiTokens.palette.blueClickable,
-            transform: 'translate(14px, -7px) scale(0.75)',
-            '&.Mui-error': {
-              color: `${muiTokens.palette.redError} !important`,
-            },
-            '&.Mui-success': {
-              color: muiTokens.palette.greenSuccess,
-            },
-          },
-        },
-        '.MuiOutlinedInput-input': {
-          fontSize: '14px',
-          lineHeight: '18px',
-          fontWeight: 400,
-          padding: '13px 2px 11px 8px',
-          '&.Mui-disabled': {
-            color: muiTokens.palette.greyDark,
-            WebkitTextFillColor: muiTokens.palette.greyDark,
-          },
-        },
-      },
-      '.SelectIcon': {
-        color: muiTokens.palette.blueClickable,
-        marginRight: '9px',
-      },
-      '.MuiFormHelperText-root': {
-        fontWeight: 400,
-        fontSize: '11px',
-        color: muiTokens.palette.greyDark,
-        marginLeft: '8px',
-        marginRight: '8px',
-        marginTop: '8px',
-        lineHeight: '12px',
-        '&.Mui-error': {
-          color: muiTokens.palette.redError,
-        },
-      },
-      '.MuiOutlinedInput-input': {
-        fontSize: '14px',
-        lineHeight: '18px',
-        fontWeight: 400,
-        padding: '12px 31px 11px 14px',
-        '&.Mui-disabled': {
-          color: muiTokens.palette.greyDark,
-        },
-        '&::placeholder': {
-          color: `${muiTokens.palette.greyDark as string} !important`,
-          opacity: 1 + ' !important',
-          fontWeight: 400,
-          lineHeight: '18px',
-          fontSize: '14px',
-        },
-      },
-      '&.Select-ds': {
-        '.MuiInputLabel-root': {
-          fontSize: '16px', // bug fontsize limited max to 16px : https://github.com/mui/material-ui/issues/26607
-          lineHeight: '16px',
-          height: '20px',
-          fontWeight: 500,
-          transform: 'translate(14px, -7px) scale(0.75)',
-          color: muiTokens.palette.greyDark,
-          '&.Mui-error': {
-            color: muiTokens.palette.redError + ' !important',
-          },
-          '&.Mui-disabled': {
-            color: muiTokens.palette.greyDark + ' !important',
-            '-webkit-text-fill-color': muiTokens.palette.greyDark,
-          },
-          '&.Mui-focused': {
-            lineHeight: '16px',
-            color: muiTokens.palette.blueClickable,
-            fontWeight: 500,
-            fontSize: '16px', // bug fontsize limited max to 16px : https://github.com/mui/material-ui/issues/26607
-          },
-        },
-      },
-      '.MuiFormLabel-colorSuccess': {
-        color: muiTokens.palette.greenSuccess + ' !important',
-      },
-      '.MuiInputBase-colorSuccess': {
-        '.SelectIcon': {
-          color: muiTokens.palette.greenSuccess + ' !important',
-          marginTop: '2px',
-        },
-        '.MuiOutlinedInput-notchedOutline': {
-          border: '1px solid',
-          fontSize: '16px',
-          borderColor: muiTokens.palette.greenSuccess,
-        },
-      },
-      '.MuiChip-root': {
-        height: '24px',
-      },
-      '.SelectIcon.Mui-disabled': {
-        color: muiTokens.palette.greyMediumInactive + ' !important',
-      },
-    },
-    '.MuiFormLabel-filled': {
-      lineHeight: '16px !important',
-      color: muiTokens.palette.greyDark,
-      fontWeight: '500 !important',
-      fontSize: '16px !important', // bug fontsize limited max to 16px : https://github.com/mui/material-ui/issues/26607
-      marginTop: '2px !important',
-      transform: 'translate(14px, -7px) scale(0.75)',
-    },
-  };
-};
-
-export default SelectCss;

package/src/css/form/snackbarCss.ts

@@ -1,42 +0,0 @@
-import { MuiTokens } from '@/interfaces/theme';
-
-const SnackbarCss = (muiTokens: MuiTokens): Record<string, unknown> => {
-  return {
-    '&.MuiPaper-root': {
-      padding: '8px 16px 8px 16px',
-      '&.MuiAlert-root': {
-        color: 'white',
-        fontWeight: '700',
-        fontSize: '14px',
-        width: '350px',
-      },
-      '.MuiAlert-message': {
-        padding: '0px',
-      },
-      '&.MuiAlert-standardSuccess': {
-        backgroundColor: muiTokens.palette.greenSuccess,
-      },
-      '&.MuiAlert-standardWarning': {
-        backgroundColor: muiTokens.palette.orangeWarning,
-      },
-      '&.MuiAlert-standardError': {
-        backgroundColor: muiTokens.palette.redError,
-      },
-      '&.MuiAlert-standardInfo': {
-        backgroundColor: muiTokens.palette.blueInfo,
-      },
-      '.MuiAlert-icon': {
-        alignSelf: 'center',
-        height: '16px',
-        marginRight: '16px',
-        alignItems: 'center',
-        opacity: 1,
-      },
-      '.MuiSvgIcon-root': {
-        color: 'white',
-      },
-    },
-  };
-};
-
-export default SnackbarCss;

package/src/css/form/textFieldCss.ts

@@ -1,188 +0,0 @@
-import { MuiTokens } from '@/interfaces/theme';
-
-const TextFieldCss = (muiTokens: MuiTokens): Record<string, unknown> => {
-  return {
-    '&:hover': {
-      '.MuiOutlinedInput-notchedOutline': {
-        borderColor: muiTokens.palette.greyDark + ' !important',
-      },
-    },
-    '.Mui-focused .MuiOutlinedInput-notchedOutline': {
-      borderColor: muiTokens.palette.blueClickable + ' !important',
-    },
-    '.Mui-error .MuiOutlinedInput-notchedOutline': {
-      borderColor: muiTokens.palette.redError + ' !important',
-    },
-    '.Mui-disabled': {
-      '.MuiSvgIcon-root': {
-        color: muiTokens.palette.greyMediumInactive,
-      },
-      '.MuiOutlinedInput-notchedOutline': {
-        borderColor: muiTokens.palette.greyLightDefaultBorder + ' !important',
-      },
-    },
-    '&.MuiTextField-root': {
-      '.MuiInputBase-root': {
-        backgroundColor: muiTokens.palette.white,
-      },
-      '.MuiInputLabel-root': {
-        '&.Mui-error': {
-          color: muiTokens.palette.redError + ' !important',
-        },
-        fontWeight: 500,
-        transform: 'translate(8px, 16px) scale(1)',
-      },
-      '&.Mui-success': {
-        '.MuiOutlinedInput-notchedOutline': {
-          borderColor: muiTokens.palette.greenSuccess + ' !important',
-        },
-        '.MuiFormLabel-root': {
-          color: muiTokens.palette.greenSuccess + ' !important',
-        },
-      },
-      '.Mui-focused.MuiOutlinedInput-notchedOutline': {
-        borderColor: muiTokens.palette.blueClickable,
-      },
-      '.MuiOutlinedInput-notchedOutline': {
-        borderWidth: '1px !important',
-        fontSize: '16px',
-      },
-      '.MuiFormLabel-colorSuccess': {
-        color: muiTokens.palette.greenSuccess,
-      },
-      '&.TextField-ds': {
-        '.MuiInputLabel-root': {
-          fontSize: '16px', // bug fontsize limited max to 16px : https://github.com/mui/material-ui/issues/26607
-          lineHeight: '16px',
-          height: '16px',
-          fontWeight: 500,
-          transform: 'translate(14px, -7px) scale(0.75)',
-          color: muiTokens.palette.greyXDark,
-          '&.Mui-disabled': {
-            color: muiTokens.palette.greyDark,
-          },
-          '&.Mui-focused': {
-            color: muiTokens.palette.blueClickable,
-          },
-        },
-      },
-      '&.TextField-mui': {
-        '.MuiInputLabel-root': {
-          fontSize: '14px', // bug fontsize limited max to 16px : https://github.com/mui/material-ui/issues/26607
-          lineHeight: '18px',
-          height: '16px',
-          color: `${muiTokens.palette.greyDark as string}`,
-          fontWeight: 400,
-          marginTop: '-3px',
-          '&.MuiFormLabel-filled': {
-            lineHeight: '16px',
-            color: muiTokens.palette.greyXDark,
-            fontWeight: 500,
-            fontSize: '16px', // bug fontsize limited max to 16px : https://github.com/mui/material-ui/issues/26607
-            marginTop: '2px',
-            transform: 'translate(14px, -7px) scale(0.75)',
-          },
-          '&.Mui-disabled': {
-            color: muiTokens.palette.greyDark,
-          },
-          '&.Mui-focused': {
-            lineHeight: '16px',
-            fontWeight: 500,
-            fontSize: '16px', // bug fontsize limited max to 16px : https://github.com/mui/material-ui/issues/26607
-            color: muiTokens.palette.blueClickable,
-            marginTop: '2px',
-            transform: 'translate(14px, -7px) scale(0.75)',
-          },
-          '&.MuiFormLabel-colorSuccess': {
-            '&.Mui-focused': {
-              color: muiTokens.palette.greenSuccess + ' !important',
-            },
-          },
-        },
-      },
-      '& input[type=number]': {
-        MozAppearance: 'textfield',
-      },
-      '& input[type=number]::-webkit-outer-spin-button': {
-        WebkitAppearance: 'none',
-        margin: 0,
-      },
-      '& input[type=number]::-webkit-inner-spin-button': {
-        WebkitAppearance: 'none',
-        margin: 0,
-      },
-      '.DsTextField-passwordIcon': {
-        cursor: 'pointer',
-      },
-      '.MuiFormHelperText-root': {
-        fontWeight: 400,
-        fontSize: '11px',
-        marginLeft: '8px',
-        marginRight: '8px',
-        marginTop: '8px',
-        lineHeight: '12px',
-        color: muiTokens.palette.greyDark,
-        '&.Mui-error': {
-          color: muiTokens.palette.redError,
-        },
-      },
-      '.MuiInputBase-root.Mui-disabled': {
-        backgroundColor: muiTokens.palette.greyXLight,
-      },
-      'textarea.MuiOutlinedInput-input': {
-        paddingBottom: '1px !important',
-      },
-      '.MuiOutlinedInput-input': {
-        fontSize: '14px',
-        lineHeight: '18px',
-        fontWeight: 400,
-        padding: '12px 8px !important',
-        height: '20px',
-        color: muiTokens.palette.greyXDark,
-        '&::placeholder': {
-          color: `${muiTokens.palette.greyDark as string} !important`,
-          opacity: 1 + ' !important',
-          fontWeight: 400,
-          lineHeight: '18px',
-          fontSize: '14px',
-        },
-        '&.Mui-disabled': {
-          backgroundColor: muiTokens.palette.greyXLight,
-          color: muiTokens.palette.greyDark,
-          WebkitTextFillColor: muiTokens.palette.greyDark,
-        },
-        '&.TextField-mui': {
-          fontSize: '14px',
-          lineHeight: '18px',
-          fontWeight: 400,
-          padding: '12px 8px !important',
-          height: '20px',
-          color: muiTokens.palette.greyXDark,
-          '&::placeholder': {
-            color: `${muiTokens.palette.greyDark as string} !important`,
-            opacity: 1 + ' !important',
-            fontWeight: 400,
-            lineHeight: '18px',
-            fontSize: '14px',
-          },
-          '&.Mui-disabled': {
-            backgroundColor: muiTokens.palette.greyXLight,
-            color: muiTokens.palette.greyDark,
-            WebkitTextFillColor: muiTokens.palette.greyDark,
-          },
-        },
-      },
-      '.MuiOutlinedInput-root': {
-        padding: '0px !important',
-        '& fieldset': {
-          borderWidth: '1px !important',
-        },
-        '.MuiSvgIcon-root': {
-          marginLeft: '-22px',
-        },
-      },
-    },
-  };
-};
-
-export default TextFieldCss;

package/src/css/iconButtonCss.ts

@@ -1,64 +0,0 @@
-import { MuiTokens } from '@/interfaces/theme';
-
-const IconButtonCss = (muiTokens: MuiTokens): Record<string, unknown> => {
-  return {
-    '&.MuiIconButton-root': {
-      borderRadius: '4px',
-      '& .MuiTouchRipple-root .MuiTouchRipple-child': {
-        borderRadius: '4px',
-      },
-      ':hover': {
-        '& .MuiSvgIcon-root': {
-          color: muiTokens.palette.blueHoverClickable,
-        },
-      },
-      '&.Mui-disabled': {
-        '& .MuiSvgIcon-root': {
-          color: muiTokens.palette.greyMediumInactive,
-        },
-      },
-      '&.IconButtonVariant-default': {
-        width: '44px !important',
-        height: '44px !important',
-        border: '1px solid',
-        borderColor: muiTokens.palette.greyLightDefaultBorder,
-        '&:hover': {
-          borderColor: muiTokens.palette.blueHoverClickable,
-          backgroundColor: muiTokens.palette.white,
-        },
-      },
-      '&.IconButtonVariant-table': {
-        width: '42px !important',
-        height: '42px !important',
-        border: '0px',
-        '&:hover': {
-          backgroundColor: muiTokens.palette.blueHoverOpacity12,
-        },
-      },
-      '&.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: '24px !important',
-        height: '24px !important',
-      },
-    },
-  };
-};
-
-export default IconButtonCss;

package/src/css/index.ts

@@ -1,20 +0,0 @@
-export { default as AccordionStyle } from './accordionCss';
-export { default as ButtonStyle } from './buttonCss';
-export { default as TooltipStyle } from './tooltipCss';
-export { default as ChipStyle } from './chipCss';
-export { default as PaginationStyle } from './paginationCss';
-export { default as BannerNotificationStyle } from './bannerNotificationCss';
-export { default as AutoCompleteStyle } from './form/autoCompleteCss';
-export { default as CheckboxStyle } from './form/checkboxCss';
-export { default as CheckboxGroupStyle } from './form/checkboxGroupCss';
-export { default as RadioStyle } from './form/radioCss';
-export { default as SelectStyle } from './form/selectCss';
-export { default as SnackbarStyle } from './form/snackbarCss';
-export { default as TextFieldStyle } from './form/textFieldCss';
-export { default as LinkStyle } from './linkCss';
-export { default as BreadcrumbsStyle } from './breadcrumbsCss';
-export { default as SwitchStyle } from './switchCss';
-export { default as DatePickerStyle } from './form/datePickerCss';
-export { default as DatatableStyle } from './datatable/datatableCss';
-export { default as IconButtonStyle } from './iconButtonCss';
-export { default as MenuItemStyle } from './menuItemCss';

package/src/css/linkCss.ts

@@ -1,15 +0,0 @@
-import { MuiTokens } from '@/interfaces/theme';
-
-const LinkCss = (muiTokens: MuiTokens): Record<string, unknown> => {
-  return {
-    '&.MuiLink-root': {
-      color: muiTokens.palette.blueClickable,
-      cursor: 'pointer',
-    },
-    '&:hover': {
-      color: muiTokens.palette.blueHoverClickable + ' !important',
-    },
-  };
-};
-
-export default LinkCss;