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

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,

package/src/css/iconButtonCss.ts

@@ -1,24 +1,24 @@
-const IconButtonCss = (
-  muiTokens: Record<string, string | number | any>
-): Record<string, unknown> => {
+import { MuiTokens } from '../interfaces/theme';
+
+const IconButtonCss = (muiTokens: MuiTokens): Record<string, unknown> => {
   return {
     '&.MuiIconButton-root': {
       borderRadius: '4px',
       '& .MuiTouchRipple-root .MuiTouchRipple-child': {
-        borderRadius: '4px'
+        borderRadius: '4px',
       },
       '& .MuiSvgIcon-root': {
-        color: muiTokens.palette.blueClickable
+        color: muiTokens.palette.blueClickable,
       },
       '&:hover': {
         '& .MuiSvgIcon-root': {
-          color: muiTokens.palette.blueHoverClickable
-        }
+          color: muiTokens.palette.blueHoverClickable,
+        },
       },
       '&.Mui-disabled': {
         '& .MuiSvgIcon-root': {
-          color: muiTokens.palette.greyMediumInactive
-        }
+          color: muiTokens.palette.greyMediumInactive,
+        },
       },
       '&.IconButtonVariant-default': {
         width: '44px !important',
@@ -27,40 +27,40 @@ const IconButtonCss = (
         borderColor: muiTokens.palette.greyLightDefaultBorder,
         '&:hover': {
           borderColor: muiTokens.palette.blueHoverClickable,
-          backgroundColor: muiTokens.palette.white
-        }
+          backgroundColor: muiTokens.palette.white,
+        },
       },
       '&.IconButtonVariant-table': {
         width: '42px !important',
         height: '42px !important',
         border: '0px',
         '&:hover': {
-          backgroundColor: muiTokens.palette.blueHoverOpacity12
-        }
+          backgroundColor: muiTokens.palette.blueHoverOpacity12,
+        },
       },
       '&.IconButtonPositionGroup-left': {
         borderRadius: '4px 0px 0px 4px',
         '& .MuiTouchRipple-root .MuiTouchRipple-child': {
-          borderRadius: '4px 0px 0px 4px'
-        }
+          borderRadius: '4px 0px 0px 4px',
+        },
       },
       '&.IconButtonPositionGroup-middle': {
         borderRadius: '0px',
         '& .MuiTouchRipple-root .MuiTouchRipple-child': {
-          borderRadius: '0px'
-        }
+          borderRadius: '0px',
+        },
       },
       '&.IconButtonPositionGroup-right': {
         borderRadius: '0px 4px 4px 0px',
         '& .MuiTouchRipple-root .MuiTouchRipple-child': {
-          borderRadius: '0px 4px 4px 0px'
-        }
+          borderRadius: '0px 4px 4px 0px',
+        },
       },
       '&.IconButtonSize-small': {
         width: '24px !important',
-        height: '24px !important'
-      }
-    }
+        height: '24px !important',
+      },
+    },
   };
 };
 

package/src/css/linkCss.ts

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

package/src/css/paginationCss.ts

@@ -1,6 +1,6 @@
-const PaginationCss = (
-  muiTokens: Record<string, string | number | any>
-): Record<string, unknown> => {
+import { MuiTokens } from '../interfaces/theme';
+
+const PaginationCss = (muiTokens: MuiTokens): Record<string, unknown> => {
   return {
     '.MuiPaginationItem-root': {
       height: '44px !important',
@@ -16,7 +16,7 @@ const PaginationCss = (
         backgroundColor: 'white !important',
         borderColor: muiTokens.palette.blueHoverClickable + ' !important',
         borderRadius: '4px !important',
-        outline: 'none !important'
+        outline: 'none !important',
       },
       '&.Mui-selected': {
         color: 'white !important',
@@ -28,30 +28,30 @@ const PaginationCss = (
           backgroundColor: muiTokens.palette.blueClickable + ' !important',
           borderColor: muiTokens.palette.greyDark + ' !important',
           borderRadius: '4px !important',
-          outline: 'none !important'
+          outline: 'none !important',
         },
         '&:focus': {
           color: 'white !important',
           backgroundColor: muiTokens.palette.blueClickable + ' !important',
           borderColor: muiTokens.palette.greyDark + ' !important',
           borderRadius: '4px !important',
-          outline: 'none !important'
-        }
+          outline: 'none !important',
+        },
       },
       '&.Mui-disabled': {
         color: muiTokens.palette.greyMediumInactive + ' !important',
         backgroundColor: 'white !important',
         borderRadius: '4px !important',
         outline: 'none !important',
-        opacity: '1 !important'
+        opacity: '1 !important',
       },
       '&.MuiPaginationItem-ellipsis': {
         color: muiTokens.palette.greyDark + ' !important',
         display: 'flex',
         alignItems: 'center',
-        justifyContent: 'center'
-      }
-    }
+        justifyContent: 'center',
+      },
+    },
   };
 };
 

package/src/css/switchCss.ts

@@ -1,56 +1,57 @@
-const SwitchCss = (
-    muiTokens: Record<string, string | number | any>
-): Record<string, unknown> => {
+import { MuiTokens } from '../interfaces/theme';
+
+const SwitchCss = (muiTokens: MuiTokens): Record<string, unknown> => {
   return {
     '& .MuiSwitch-switchBase': {
       '&:hover': {
-        backgroundColor: muiTokens.palette.blueHoverOpacity12 + ' !important'
+        backgroundColor: muiTokens.palette.blueHoverOpacity12 + ' !important',
       },
       '& + .MuiSwitch-track': {
         backgroundColor: muiTokens.palette.blueHoverEquivalence + ' !important',
         border: '1px solid',
         borderColor: muiTokens.palette.blueClickable + ' !important',
-        opacity: 1
+        opacity: 1,
       },
       '& + .MuiSwitch-thumb': {
-        backgroundColor: muiTokens.palette.white + ' !important'
+        backgroundColor: muiTokens.palette.white + ' !important',
       },
       '&.Mui-disabled': {
         '& + .MuiSwitch-track': {
-          backgroundColor: muiTokens.palette.greyLightDefaultBorder + ' !important',
+          backgroundColor:
+            muiTokens.palette.greyLightDefaultBorder + ' !important',
           border: '1px solid',
           borderColor: muiTokens.palette.greyMediumInactive + ' !important',
-          opacity: 1
+          opacity: 1,
         },
         '& + .MuiSwitch-thumb': {
-          backgroundColor: muiTokens.palette.greyDark + ' !important'
-        }
+          backgroundColor: muiTokens.palette.greyDark + ' !important',
+        },
       },
       '&.Mui-checked': {
         '& + .MuiSwitch-track': {
           backgroundColor: muiTokens.palette.blueClickable + ' !important',
           opacity: 1,
           border: '1px solid',
-          borderColor: muiTokens.palette.blueClickable + ' !important'
+          borderColor: muiTokens.palette.blueClickable + ' !important',
         },
         '& .MuiSwitch-thumb': {
-          backgroundColor: muiTokens.palette.blueHoverClickable + ' !important'
+          backgroundColor: muiTokens.palette.blueHoverClickable + ' !important',
         },
         '&:hover': {
-          backgroundColor: muiTokens.palette.blueHoverOpacity12 + ' !important'
-        }
+          backgroundColor: muiTokens.palette.blueHoverOpacity12 + ' !important',
+        },
       },
       '&.Mui-disabled.Mui-checked': {
         '& .MuiSwitch-thumb': {
-          backgroundColor: muiTokens.palette.greyDark + ' !important'
+          backgroundColor: muiTokens.palette.greyDark + ' !important',
         },
         '& + .MuiSwitch-track': {
           backgroundColor: muiTokens.palette.greyMediumInactive + ' !important',
           border: '1px solid',
-          borderColor: muiTokens.palette.greyMediumInactive + ' !important'
-        }
-      }
-    }
+          borderColor: muiTokens.palette.greyMediumInactive + ' !important',
+        },
+      },
+    },
   };
 };
 

package/src/css/tooltipCss.ts

@@ -1,24 +1,21 @@
-const TooltipCss = (
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  muiTokens: Record<string, string | number | any>
-): Record<string, unknown> => {
+const TooltipCss = (): Record<string, unknown> => {
   return {
     '& .MuiTooltip-tooltip': {
       background: 'red',
-      backgroundColor: 'red'
+      backgroundColor: 'red',
     },
     '.MuiTooltip-tooltip': {
       background: 'red',
-      backgroundColor: 'red'
+      backgroundColor: 'red',
     },
     '& .MuiPopper-popper': {
       background: 'red',
-      backgroundColor: 'red'
+      backgroundColor: 'red',
     },
     '.MuiPopper-popper': {
       background: 'red',
-      backgroundColor: 'red'
-    }
+      backgroundColor: 'red',
+    },
   };
 };
 

package/src/helpers/theme.ts

@@ -1,9 +1,9 @@
-import * as tokens from '../themes/tokens';
 import { Theme, Types } from '../interfaces/theme';
+import * as tokens from '../themes/tokens';
 
 export const getTokensByType = (
   themeName: Theme,
-  type: Types
+  type: Types,
 ): Record<string, string> => {
   const defaultTokens: Record<string, string> = {};
 
@@ -17,10 +17,10 @@ export const getTokensByType = (
         case 'lineHeights':
         case 'fontSize':
         case 'paragraphSpacing':
-          defaultTokens[parsedTokenKey] = (tokens as any)[tokenKey] + 'px';
+          defaultTokens[parsedTokenKey] = tokens[tokenKey] + 'px';
           break;
         default:
-          defaultTokens[parsedTokenKey] = (tokens as any)[tokenKey];
+          defaultTokens[parsedTokenKey] = tokens[tokenKey];
       }
     }
   });
@@ -28,8 +28,10 @@ export const getTokensByType = (
   return defaultTokens;
 };
 
-export const getMuiPalette = (themeName: Theme): Record<string, any> => {
-  const palette: Record<string, string | any> = {};
+export const getMuiPalette = (
+  themeName: Theme,
+): Record<string, string | number | unknown> => {
+  const palette: Record<string, string | number | unknown> = {};
 
   Object.keys(tokens).forEach((colorName) => {
     // color structure :
@@ -37,39 +39,39 @@ export const getMuiPalette = (themeName: Theme): Record<string, any> => {
     // récupérer last iteration of "Colors" pour avoir le nom de la couleur
     if (colorName.startsWith(themeName) && colorName.indexOf('Colors')) {
       let colorKey = colorName.substring(
-        colorName.lastIndexOf('Colors') + 'Colors'.length
+        colorName.lastIndexOf('Colors') + 'Colors'.length,
       );
 
       colorKey = colorKey.charAt(0).toLowerCase() + colorKey.slice(1);
-      palette[colorKey] = (tokens as any)[colorName] as 'primary';
+      palette[colorKey] = tokens[colorName] as 'primary';
     }
   });
 
   const defaultPalette = {
     primary: {
       main: palette['blueClickable'],
-      dark: palette['blueHoverClickable']
+      dark: palette['blueHoverClickable'],
     },
     secondary: {
-      main: palette['redActual']
+      main: palette['redActual'],
     },
     success: {
-      main: palette['greenSuccess']
+      main: palette['greenSuccess'],
     },
     error: {
-      main: palette['redError']
+      main: palette['redError'],
     },
     warning: {
-      main: palette['orangeWarning']
+      main: palette['orangeWarning'],
     },
     infos: {
-      main: palette['blueInfo']
-    }
+      main: palette['blueInfo'],
+    },
   };
 
   return {
     ...palette,
-    ...defaultPalette
+    ...defaultPalette,
   };
 };
 

package/src/interfaces/theme.ts

@@ -29,3 +29,6 @@ export type Types =
 // Default = Theme backoffice Material
 // Ep = Espace personnel
 export type Theme = 'Default' | 'Ep';
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export type MuiTokens = Record<string, any>;