@groupeactual/design-tokens 1.5.2 → 1.6.0-beta.3

package/src/css/buttonCss.ts

@@ -1,6 +1,6 @@
-const ButtonCss = (
-  muiTokens: Record<string, string | number | any>,
-): Record<string, unknown> => {
+import { MuiTokens } from '../interfaces/theme';
+
+const ButtonCss = (muiTokens: MuiTokens): Record<string, unknown> => {
   return {
     '@font-face': {
       fontFamily: 'Roboto',
@@ -33,7 +33,7 @@ const ButtonCss = (
     },
     '&.MuiButton-secondary': {
       color: muiTokens.palette.blueClickable,
-      backgroundColor: muiTokens.palette.white  + ' !important',
+      backgroundColor: muiTokens.palette.white + ' !important',
       border: '1px solid',
       borderColor: muiTokens.palette.greyLightDefaultBorder + ' !important',
       '.MuiSvgIcon-root': {

package/src/css/chipCss.ts

@@ -1,6 +1,6 @@
-const ChipCss = (
-  muiTokens: Record<string, string | number | any>
-): Record<string, unknown> => {
+import { MuiTokens } from '../interfaces/theme';
+
+const ChipCss = (muiTokens: MuiTokens): Record<string, unknown> => {
   return {
     '&.MuiChip-root': {
       color: muiTokens.palette.greyXDark,
@@ -13,80 +13,80 @@ const ChipCss = (
         color: muiTokens.palette.blueClickable,
         cursor: 'default',
         width: 'auto',
-        height: 'auto'
+        height: 'auto',
       },
       '&.Mui-disabled': {
         '.MuiChip-deleteIcon .MuiSvgIcon-root': {
-          color: muiTokens.palette.greyMediumInactive + ' !important'
+          color: muiTokens.palette.greyMediumInactive + ' !important',
         },
         color: muiTokens.palette.greyDark + ' !important',
         backgroundColor: muiTokens.palette.greyXLight + ' !important',
         border: '1px solid',
         fontWeight: muiTokens.palette.fontWeightRegular,
         borderColor: muiTokens.palette.greyLightDefaultBorder + ' !important',
-        opacity: 1
+        opacity: 1,
       },
       '.MuiChip-deleteIcon': {
         width: '12px',
         height: '12px',
         margin: 0,
         marginLeft: '8px',
-        marginRight: '2px'
+        marginRight: '2px',
       },
       '.MuiChip-label': {
         padding: 0,
-        lineHeight: '18px'
+        lineHeight: '18px',
       },
       '.MuiChip-avatar': {
         marginLeft: '-1px',
         marginRight: '5px',
-        color: 'initial'
-      }
+        color: 'initial',
+      },
     },
     '&.MuiChip-filled': {
       border: 'none',
       fontWeight: 400,
-      color: muiTokens.palette.greyXDark
+      color: muiTokens.palette.greyXDark,
     },
     '&.MuiChip-outlined': {
       border: '1px solid',
-      fontWeight: muiTokens.typography.fontWeightRegular
+      fontWeight: muiTokens.typography.fontWeightRegular,
     },
     '&.MuiChip-status': {
       border: '1px solid !important',
-      fontWeight: muiTokens.typography.fontWeightRegular
+      fontWeight: muiTokens.typography.fontWeightRegular,
     },
     '&.MuiChip-statusFilled': {
       border: 'none !important',
       color: muiTokens.palette.greyXDark + ' !important',
-      fontWeight: muiTokens.typography.fontWeightRegular + ' !important'
+      fontWeight: muiTokens.typography.fontWeightRegular + ' !important',
     },
     '&.MuiChip-sizeSmall': {
       height: '24px',
-      paddingY: '3px'
+      paddingY: '3px',
     },
     '&.MuiChip-sizeMedium': {
       height: '33px',
-      paddingY: '8px'
+      paddingY: '8px',
     },
     '&.MuiChip-colorDefault': {
       backgroundColor: muiTokens.palette.greyXLight,
       border: 'none',
       fontWeight: muiTokens.typography.fontWeightRegular + ' !important',
-      color: muiTokens.palette.greyXDark
+      color: muiTokens.palette.greyXDark,
     },
     '&.MuiChip-colorSecondary': {
       borderColor: muiTokens.palette.greyLightDefaultBorder + ' !important',
       fontWeight: muiTokens.typography.fontWeightRegular + ' !important',
-      backgroundColor: muiTokens.palette.white
+      backgroundColor: muiTokens.palette.white,
     },
     '&.MuiChip-colorPrimary': {
       backgroundColor: muiTokens.palette.blueClickable + ' !important',
       color: muiTokens.palette.white + ' !important',
       fontWeight: muiTokens.typography.fontWeightBold,
       '& .MuiChip-deleteIcon': {
-        color: muiTokens.palette.white + ' !important'
-      }
+        color: muiTokens.palette.white + ' !important',
+      },
     },
     '&.MuiChip-colorSuccess': {
       border: '1px solid',
@@ -94,11 +94,11 @@ const ChipCss = (
       color: muiTokens.palette.greenSuccess,
       fontWeight: muiTokens.typography.fontWeightBold,
       '& .MuiChip-avatar': {
-        color: muiTokens.palette.greenSuccess + ' !important'
+        color: muiTokens.palette.greenSuccess + ' !important',
       },
       '& .MuiChip-deleteIcon': {
-        color: muiTokens.palette.blueInfo + ' !important'
-      }
+        color: muiTokens.palette.blueInfo + ' !important',
+      },
     },
     '&.MuiChip-colorWarning': {
       border: '1px solid',
@@ -106,11 +106,11 @@ const ChipCss = (
       color: muiTokens.palette.orangeWarning,
       fontWeight: muiTokens.typography.fontWeightBold,
       '& .MuiChip-avatar': {
-        color: muiTokens.palette.orangeWarning + ' !important'
+        color: muiTokens.palette.orangeWarning + ' !important',
       },
       '& .MuiChip-deleteIcon': {
-        color: muiTokens.palette.blueInfo + ' !important'
-      }
+        color: muiTokens.palette.blueInfo + ' !important',
+      },
     },
     '&.MuiChip-colorInfo': {
       border: '1px solid',
@@ -118,11 +118,11 @@ const ChipCss = (
       color: muiTokens.palette.blueInfo,
       fontWeight: muiTokens.typography.fontWeightBold,
       '& .MuiChip-avatar': {
-        color: muiTokens.palette.blueInfo + ' !important'
+        color: muiTokens.palette.blueInfo + ' !important',
       },
       '& .MuiChip-deleteIcon': {
-        color: muiTokens.palette.blueInfo + ' !important'
-      }
+        color: muiTokens.palette.blueInfo + ' !important',
+      },
     },
     '&.MuiChip-colorError': {
       border: '1px solid',
@@ -130,12 +130,12 @@ const ChipCss = (
       color: muiTokens.palette.redError,
       fontWeight: muiTokens.typography.fontWeightBold,
       '& .MuiChip-avatar': {
-        color: muiTokens.palette.redError + ' !important'
+        color: muiTokens.palette.redError + ' !important',
       },
       '& .MuiChip-deleteIcon': {
-        color: muiTokens.palette.blueInfo + ' !important'
-      }
-    }
+        color: muiTokens.palette.blueInfo + ' !important',
+      },
+    },
   };
 };
 

package/src/css/datatable/datatableCss.ts

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

package/src/css/form/autoCompleteCss.ts

@@ -1,6 +1,6 @@
-const AutoCompleteCss = (
-  muiTokens: Record<string, string | number | any>,
-): Record<string, unknown> => {
+import { MuiTokens } from '../../interfaces/theme';
+
+const AutoCompleteCss = (muiTokens: MuiTokens): Record<string, unknown> => {
   return {
     '&.MuiFormControl-root': {
       zIndex: 1,
@@ -9,6 +9,11 @@ const AutoCompleteCss = (
         height: '44px',
         padding: 0 + ' !important',
       },
+      '&:hover': {
+        '.MuiOutlinedInput-notchedOutline': {
+          borderColor: muiTokens.palette.greyDark + ' !important',
+        },
+      },
       '.Mui-disabled': {
         '.MuiOutlinedInput-notchedOutline': {
           borderColor: muiTokens.palette.greyLightDefaultBorder + ' !important',
@@ -17,9 +22,6 @@ const AutoCompleteCss = (
       '.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',
       },
@@ -33,16 +35,34 @@ const AutoCompleteCss = (
         borderWidth: '1px',
         borderColor: muiTokens.palette.blueClickable + ' !important',
       },
-      '&:hover': {
-        '.MuiOutlinedInput-notchedOutline': {
-          borderColor: muiTokens.palette.greyDark,
-        },
-      },
       '.MuiOutlinedInput-notchedOutline': {
         borderColor: muiTokens.palette.greyLightDefaultBorder,
         borderWidth: '1px !important',
         fontSize: '16px !important',
       },
+      '&.Mui-success': {
+        color: muiTokens.palette.greenSuccess,
+        '& .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`,
@@ -62,12 +82,6 @@ const AutoCompleteCss = (
         color: muiTokens.palette.greyDark,
       },
       '.MuiInputLabel-root': {
-        lineHeight: '16px',
-        fontWeight: '500',
-        fontSize: '16px',
-        marginTop: '2px',
-        transform: 'translate(8px, 16px) scale(1)',
-        color: muiTokens.palette.greyXDark,
         '&.Mui-error': {
           color: `${muiTokens.palette.redError} !important`,
         },
@@ -140,61 +154,54 @@ const AutoCompleteCss = (
       },
       '.Mui-error': {
         color: muiTokens.palette.redError,
-        '& fieldset': {
-          borderColor: muiTokens.palette.redError,
-        },
-      },
-      '.Mui-success': {
-        color: muiTokens.palette.greenSuccess,
-        '& fieldset': {
-          borderColor: muiTokens.palette.greenSuccess,
-        },
         '& span': {
-          color: muiTokens.palette.greenSuccess,
-          transform: 'none',
-        },
-        '& .MuiChip-label': {
-          color: 'unset',
-        },
-        '& .clear': {
-          '& span': {
-            color: muiTokens.palette.blueClickable,
-          },
-        },
-        '& .MuiAutocomplete-popupIndicatorOpen': {
-          transform: 'none',
+          color: `${muiTokens.palette.greyDark as string} !important`,
         },
-        '& button[title="Close"].MuiAutocomplete-popupIndicator': {
-          '& span': {
-            position: 'relative',
-            transform: 'none',
-          },
+        '& fieldset': {
+          borderColor: muiTokens.palette.redError,
         },
       },
       '.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': {
-        '& label': {
-          color: muiTokens.palette.greyDark,
-          fontSize: '14px',
-          lineHeight: '18px',
-          height: '16px',
-          fontWeight: '400',
-          marginTop: '-3px',
-          '&.Mui-focused': {
-            color: muiTokens.palette.blueClickable,
-          },
+        color: muiTokens.palette.greyDark,
+        fontSize: '14px',
+        lineHeight: '18px',
+        height: '20px',
+        fontWeight: '400',
+        marginTop: '-3px',
+        '&.Mui-Input-filled': {
+          lineHeight: '16px',
+          fontWeight: '500',
+          fontSize: '16px',
+          marginTop: '0px',
+          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: '0px',
+          marginLeft: '0px',
+          color: muiTokens.palette.blueClickable,
+        },
       },
       '.MuiOutlinedInput-input': {
         fontSize: '14px',
@@ -206,6 +213,7 @@ const AutoCompleteCss = (
         color: `${muiTokens.palette.greyDark as string}`,
         '&.Mui-focused': {
           marginTop: '0px',
+          color: `${muiTokens.palette.blueClickable as string}`,
         },
         '&.Mui-disabled': {
           color: muiTokens.palette.greyDark,
@@ -218,6 +226,15 @@ const AutoCompleteCss = (
           fontSize: '14px',
         },
       },
+      '.MuiFormLabel-filled': {
+        lineHeight: '16px',
+        fontWeight: '500',
+        fontSize: '16px',
+        marginTop: '0px',
+        marginLeft: '0px',
+        color: muiTokens.palette.greyXDark,
+        transform: 'translate(14px, -7px) scale(0.75) !important',
+      },
     },
     '&.Mui-filled': {
       '.MuiOutlinedInput-input': {

package/src/css/form/checkboxCss.ts

@@ -1,13 +1,13 @@
-const CheckboxCss = (
-  muiTokens: Record<string, string | number | any>
-): Record<string, unknown> => {
+import { MuiTokens } from '../../interfaces/theme';
+
+const CheckboxCss = (muiTokens: MuiTokens): Record<string, unknown> => {
   return {
     '&.MuiFormControl-root': {
       '&.DsCheckbox': {
         '&.Mui-disabled': {
           '.MuiFormControlLabel-root': {
-            cursor: 'auto !important'
-          }
+            cursor: 'auto !important',
+          },
         },
         '.MuiCheckbox-root': {
           '::before': {
@@ -18,7 +18,7 @@ const CheckboxCss = (
             borderRadius: '2px',
             width: '14px',
             height: '14px',
-            backgroundColor: 'white'
+            backgroundColor: 'white',
           },
           width: '24px',
           height: '24px',
@@ -31,31 +31,31 @@ const CheckboxCss = (
             height: '18.67px',
             path: {
               width: '14px',
-              height: '14px'
-            }
+              height: '14px',
+            },
           },
           '&.Mui-checked': {
             '.MuiSvgIcon-root': {
-              color: muiTokens.palette.blueClickable
-            }
+              color: muiTokens.palette.blueClickable,
+            },
           },
           '&.Mui-disabled': {
             '::before': {
-              backgroundColor: muiTokens.palette.greyXLight
+              backgroundColor: muiTokens.palette.greyXLight,
             },
             '.MuiSvgIcon-root': {
               color: muiTokens.palette.greyMediumInactive + ' !important',
               backgroundColor: 'transparent !important',
-              outlineOffset: '-2px'
-            }
+              outlineOffset: '-2px',
+            },
           },
           '&:hover': {
             backgroundColor:
               muiTokens.palette.blueHoverEquivalence + ' !important',
             '.MuiSvgIcon-root': {
-              color: muiTokens.palette.blueHoverClickable + ' !important'
-            }
-          }
+              color: muiTokens.palette.blueHoverClickable + ' !important',
+            },
+          },
         },
         '.DsCheckbox-label': {
           fontSize: '14px',
@@ -64,8 +64,8 @@ const CheckboxCss = (
           fontWeight: 400,
           '&.Mui-disabled': {
             color: muiTokens.palette.greyMediumInactive,
-            fontWeight: 700
-          }
+            fontWeight: 700,
+          },
         },
         '.MuiTouchRipple-root': {
           background: 'white',
@@ -74,17 +74,17 @@ const CheckboxCss = (
           top: '6px',
           zIndex: 0,
           left: '6px',
-          borderRadius: '0px'
-        }
-      }
+          borderRadius: '0px',
+        },
+      },
     },
     '.MuiFormHelperText-root': {
       marginTop: '3px',
       marginLeft: '-6px',
       fontWeight: '400',
       fontSize: '11px',
-      color: muiTokens.palette.greyDark
-    }
+      color: muiTokens.palette.greyDark,
+    },
   };
 };
 

package/src/css/form/checkboxGroupCss.ts

@@ -1,6 +1,6 @@
-const CheckboxGroupCss = (
-  muiTokens: Record<string, string | number | any>
-): Record<string, unknown> => {
+import { MuiTokens } from '../../interfaces/theme';
+
+const CheckboxGroupCss = (muiTokens: MuiTokens): Record<string, unknown> => {
   return {
     // à garder pour label.css 👇
     '&.MuiFormControl-root': {
@@ -10,7 +10,7 @@ const CheckboxGroupCss = (
         fontWeight: '500',
         fontSize: '13px',
         lineHeight: '16px',
-        paddingBottom: '4px'
+        paddingBottom: '4px',
       },
       // à garder pour label.css ⬆️
       '.MuiFormHelperText-root': {
@@ -19,22 +19,22 @@ const CheckboxGroupCss = (
         color: muiTokens.palette.greyDark,
         fontWeight: '400',
         fontSize: '11px',
-        paddingTop: '4px'
-      }
+        paddingTop: '4px',
+      },
     },
     // à garder pour label.css 👇
     '&.Mui-disabled': {
       '.MuiFormLabel-root': {
-        color: muiTokens.palette.greyDark + ' !important'
-      }
+        color: muiTokens.palette.greyDark + ' !important',
+      },
     },
     '&.Mui-error': {
       '.MuiFormLabel-root': {
-        color: muiTokens.palette.redError + ' !important'
+        color: muiTokens.palette.redError + ' !important',
       },
       '.MuiFormHelperText-root': {
-        color: muiTokens.palette.redError + ' !important'
-      }
+        color: muiTokens.palette.redError + ' !important',
+      },
     },
     // à garder pour label.css qui sera un fichier à faire peut être plus tard ⬆️
     // l'idée c'est d'avoir un label.css qui reprend ce css pour tous nos composants à label
@@ -42,8 +42,8 @@ const CheckboxGroupCss = (
     '.MuiBox-root .MuiBox-root svg': {
       // fix du tooltip uniquement pour checkboxGroup
       position: 'relative',
-      bottom: '-2px'
-    }
+      bottom: '-2px',
+    },
   };
 };
 

package/src/css/form/datePickerCss.ts

@@ -1,7 +1,6 @@
-const DatePickerCss = (
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  muiTokens: Record<string, string | number | any>,
-): Record<string, unknown> => {
+import { MuiTokens } from '../../interfaces/theme';
+
+const DatePickerCss = (muiTokens: MuiTokens): Record<string, unknown> => {
   return {
     '.MuiInputBase-root': {
       backgroundColor: muiTokens.palette.white,