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

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,

package/src/css/form/radioCss.ts

@@ -1,10 +1,10 @@
-const RadioCss = (
-  muiTokens: Record<string, string | number | any>
-): Record<string, unknown> => {
+import { MuiTokens } from '../../interfaces/theme';
+
+const RadioCss = (muiTokens: MuiTokens): Record<string, unknown> => {
   return {
     '&.MuiFormControl-root': {
       '.MuiSvgIcon-root': {
-        marginTop: '-2px'
+        marginTop: '-2px',
       },
       '.MuiRadio-root': {
         '.MuiSvgIcon-root': {
@@ -12,73 +12,73 @@ const RadioCss = (
           zIndex: 1,
           height: '16px',
           width: '16px',
-          marginTop: '-2px'
+          marginTop: '-2px',
         },
         height: '16px',
         width: '16px',
         marginRight: '8px',
         '&:hover': {
           '.MuiSvgIcon-root': {
-            color: muiTokens.palette.blueHoverClickable + ' !important'
-          }
-        }
+            color: muiTokens.palette.blueHoverClickable + ' !important',
+          },
+        },
       },
       '.MuiFormControlLabel-root': {
         margin: '0px 0px 4px 0px',
         color: muiTokens.palette.greyXDark,
-        alignItems: 'self-start'
+        alignItems: 'self-start',
       },
       '.MuiFormControlLabel-label': {
         fontWeight: '400',
         fontSize: '14px',
-        position: 'relative'
+        position: 'relative',
       },
       '.MuiButtonBase-root': {
         color: muiTokens.palette.greyLightDefaultBorder,
         '&.Mui-checked': {
-          color: muiTokens.palette.blueClickable
-        }
+          color: muiTokens.palette.blueClickable,
+        },
       },
       '.MuiFormLabel-root': {
         color: muiTokens.palette.greyXDark,
         fontWeight: '500',
         fontSize: '13px',
         paddingBottom: '4px',
-        paddingLeft: '2px'
+        paddingLeft: '2px',
       },
       '.MuiFormHelperText-root': {
         margin: '0px',
         paddingTop: '4px',
         color: muiTokens.palette.greyDark,
-        fontSize: '11px'
+        fontSize: '11px',
       },
       '&.Mui-disabled': {
         '.MuiFormLabel-root': {
-          color: muiTokens.palette.greyDark
+          color: muiTokens.palette.greyDark,
         },
         '.MuiFormControlLabel-label': {
           color: muiTokens.palette.greyMediumInactive,
-          fontWeight: '700'
+          fontWeight: '700',
         },
         '.MuiButtonBase-root': {
           backgroundColor: muiTokens.palette.greyXLight,
           color: muiTokens.palette.greyMediumInactive,
           transform: 'scale(0.889)',
           '& span': {
-            transform: 'scale(1.3)'
+            transform: 'scale(1.3)',
           },
           '&.Mui-checked': {
-            color: muiTokens.palette.greyMediumInactive
-          }
-        }
+            color: muiTokens.palette.greyMediumInactive,
+          },
+        },
       },
       '&.Mui-error': {
         '.MuiFormLabel-root': {
-          color: muiTokens.palette.redError
+          color: muiTokens.palette.redError,
         },
         '.MuiFormHelperText-root': {
-          color: muiTokens.palette.redError + ' !important'
-        }
+          color: muiTokens.palette.redError + ' !important',
+        },
       },
       '.MuiTouchRipple-root': {
         background: 'white',
@@ -86,9 +86,9 @@ const RadioCss = (
         width: '12px',
         top: '3px',
         zIndex: 0,
-        left: '3px'
-      }
-    }
+        left: '3px',
+      },
+    },
   };
 };
 

package/src/css/form/selectCss.ts

@@ -1,9 +1,23 @@
-const SelectCss = (
-  muiTokens: Record<string, string | number | any>,
-): Record<string, unknown> => {
+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',
@@ -11,9 +25,6 @@ const SelectCss = (
         '.SelectIcon': {
           color: muiTokens.palette.blueClickable + ' !important',
         },
-        '&.Mui-error': {
-          '.SelectIcon': { color: muiTokens.palette.redError },
-        },
       },
       '.MuiFormLabel-root.Mui-focused': {
         transform: 'translate(14px, -7px) scale(0.75) !important',
@@ -61,8 +72,10 @@ const SelectCss = (
         borderWidth: '1px',
         borderColor: muiTokens.palette.blueClickable,
       },
-      '.Mui-error .MuiOutlinedInput-notchedOutline': {
-        borderColor: muiTokens.palette.redError + ' !important',
+      '&.Mui-error': {
+        '.MuiOutlinedInput-notchedOutline': {
+          borderColor: muiTokens.palette.redError + ' !important',
+        },
       },
       '.clear': {
         visibility: 'hidden',
@@ -71,14 +84,7 @@ const SelectCss = (
         marginTop: '2px',
         marginRight: '-8px',
       },
-      '&:hover': {
-        '.clear': {
-          visibility: 'visible',
-        },
-        '.MuiOutlinedInput-notchedOutline': {
-          borderColor: muiTokens.palette.greyDark,
-        },
-      },
+
       '& .MuiSelect-select .notranslate::after': {
         fontWeight: 400,
         lineHeight: '18px',
@@ -91,7 +97,7 @@ const SelectCss = (
             fontSize: '14px',
             lineHeight: '18px',
             fontWeight: 400,
-            padding: '13px 31px 11px 8px',
+            padding: '13px 22px 11px 8px',
             '&.Mui-disabled': {
               color: muiTokens.palette.greyDark,
             },
@@ -194,12 +200,6 @@ const SelectCss = (
       '.MuiFormLabel-colorSuccess': {
         color: muiTokens.palette.greenSuccess + ' !important',
       },
-      '.MuiInputBase-root.Mui-disabled': {
-        backgroundColor: muiTokens.palette.greyXLight,
-        color: muiTokens.palette.greyDark,
-        borderColor: muiTokens.palette.greyLightDefaultBorder,
-        WebkitTextFillColor: muiTokens.palette.greyDark,
-      },
       '.MuiInputBase-colorSuccess': {
         '.SelectIcon': {
           color: muiTokens.palette.greenSuccess + ' !important',
@@ -229,4 +229,4 @@ const SelectCss = (
   };
 };
 
-export default SelectCss;
+export default SelectCss;

package/src/css/form/snackbarCss.ts

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

package/src/css/form/textFieldCss.ts

@@ -1,6 +1,6 @@
-const TextFieldCss = (
-  muiTokens: Record<string, string | number | any>,
-): Record<string, unknown> => {
+import { MuiTokens } from '../../interfaces/theme';
+
+const TextFieldCss = (muiTokens: MuiTokens): Record<string, unknown> => {
   return {
     '.Mui-error .MuiOutlinedInput-notchedOutline': {
       borderColor: muiTokens.palette.redError + ' !important',
@@ -8,14 +8,14 @@ const TextFieldCss = (
     '.Mui-focused .MuiOutlinedInput-notchedOutline': {
       borderColor: muiTokens.palette.blueClickable,
     },
-    '.Mui-disabled .MuiOutlinedInput-notchedOutline': {
-      borderColor: muiTokens.palette.greyLightDefaultBorder + ' !important',
-    },
     '&:hover': {
       '.MuiOutlinedInput-notchedOutline': {
-        borderColor: muiTokens.palette.greyDark,
+        borderColor: muiTokens.palette.greyDark + ' !important',
       },
     },
+    '.Mui-disabled .MuiOutlinedInput-notchedOutline': {
+      borderColor: muiTokens.palette.greyLightDefaultBorder + ' !important',
+    },
     '&.MuiTextField-root': {
       '.MuiInputBase-root': {
         backgroundColor: muiTokens.palette.white,