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

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>;

package/src/themes/tokens.ts

@@ -8,7 +8,7 @@ export const DefaultWebShadowAllContent = {
   x: '0',
   y: '2',
   blur: '10',
-  spread: '0'
+  spread: '0',
 };
 export const DefaultSpacingXxs = '4';
 export const DefaultSpacingXs = '8';
@@ -94,7 +94,7 @@ export const EpAppShadowAllContent = {
   x: '0',
   y: '4',
   blur: '15',
-  spread: '0'
+  spread: '0',
 };
 export const EpAppShadowButtomMenu = {
   color: '#dedada66',
@@ -102,7 +102,7 @@ export const EpAppShadowButtomMenu = {
   x: '0',
   y: '-4',
   blur: '15',
-  spread: '0'
+  spread: '0',
 };
 export const EpBorderRadius4 = '4';
 export const EpBorderRadius8 = '8';

package/src/useMaterialThemeTokens.ts

@@ -1,21 +1,21 @@
 /* eslint-disable @typescript-eslint/restrict-plus-operands */
 import { useMemo } from 'react';
 
-import * as tokens from './themes/tokens';
-import { Theme } from './interfaces/theme';
 import { getFontFamilies, getMuiPalette } from './helpers/theme';
+import { MuiTokens, Theme } from './interfaces/theme';
+import * as tokens from './themes/tokens';
 
 interface useMaterialThemeTokensReturnType {
-  muiTokens: Record<string, any>;
+  muiTokens: MuiTokens;
 }
 
 const useMaterialThemeTokens = (
-  themeName: Theme
+  themeName: Theme,
 ): useMaterialThemeTokensReturnType => {
   const fontWeights = {
     RobotoBold: 700,
     RobotoMedium: 500,
-    RobotoRegular: 400
+    RobotoRegular: 400,
   };
   const designTokens = tokens as Record<string, string | number | unknown>;
 
@@ -26,7 +26,7 @@ const useMaterialThemeTokens = (
     letterSpacing: designTokens[`${themeName}LetterSpacingNone`],
     paragraphSpacing: designTokens[`${themeName}ParagraphSpacing0`] + 'px',
     textCase: designTokens[`${themeName}TextCaseNone`],
-    textDecoration: designTokens[`${themeName}TextDecorationNone`]
+    textDecoration: designTokens[`${themeName}TextDecorationNone`],
   };
   const h2 = {
     fontWeight: fontWeights.RobotoMedium,
@@ -35,7 +35,7 @@ const useMaterialThemeTokens = (
     letterSpacing: designTokens[`${themeName}LetterSpacingNone`],
     paragraphSpacing: designTokens[`${themeName}ParagraphSpacing0`] + 'px',
     textCase: designTokens[`${themeName}TextCaseNone`],
-    textDecoration: designTokens[`${themeName}TextDecorationNone`]
+    textDecoration: designTokens[`${themeName}TextDecorationNone`],
   };
   const h3 = {
     fontWeight: fontWeights.RobotoRegular,
@@ -44,7 +44,7 @@ const useMaterialThemeTokens = (
     letterSpacing: designTokens[`${themeName}LetterSpacingNone`],
     paragraphSpacing: designTokens[`${themeName}ParagraphSpacing0`] + 'px',
     textCase: designTokens[`${themeName}TextCaseNone`],
-    textDecoration: designTokens[`${themeName}TextDecorationNone`]
+    textDecoration: designTokens[`${themeName}TextDecorationNone`],
   };
   const h4 = {
     fontWeight: fontWeights.RobotoMedium,
@@ -53,7 +53,7 @@ const useMaterialThemeTokens = (
     letterSpacing: designTokens[`${themeName}LetterSpacingNone`],
     paragraphSpacing: designTokens[`${themeName}ParagraphSpacing0`] + 'px',
     textCase: designTokens[`${themeName}TextCaseNone`],
-    textDecoration: designTokens[`${themeName}TextDecorationNone`]
+    textDecoration: designTokens[`${themeName}TextDecorationNone`],
   };
   const body1 = {
     fontWeight: fontWeights.RobotoRegular,
@@ -62,7 +62,7 @@ const useMaterialThemeTokens = (
     letterSpacing: designTokens[`${themeName}LetterSpacingNone`],
     paragraphSpacing: designTokens[`${themeName}ParagraphSpacing8`] + 'px',
     textCase: designTokens[`${themeName}TextCaseNone`],
-    textDecoration: designTokens[`${themeName}TextDecorationNone`]
+    textDecoration: designTokens[`${themeName}TextDecorationNone`],
   };
   const body2 = {
     fontWeight: fontWeights.RobotoRegular,
@@ -71,7 +71,7 @@ const useMaterialThemeTokens = (
     letterSpacing: designTokens[`${themeName}LetterSpacingNone`],
     paragraphSpacing: designTokens[`${themeName}ParagraphSpacing8`] + 'px',
     textCase: designTokens[`${themeName}TextCaseNone`],
-    textDecoration: designTokens[`${themeName}TextDecorationNone`]
+    textDecoration: designTokens[`${themeName}TextDecorationNone`],
   };
 
   const muiTokensObject = {
@@ -80,10 +80,10 @@ const useMaterialThemeTokens = (
         defaultProps: {
           variantMapping: {
             subtitle1: 'body1',
-            subtitle2: 'body2'
-          }
-        }
-      }
+            subtitle2: 'body2',
+          },
+        },
+      },
     },
     typography: {
       fontFamily: getFontFamilies(themeName).join(','),
@@ -94,7 +94,7 @@ const useMaterialThemeTokens = (
         letterSpacing: designTokens[`${themeName}LetterSpacingNone`],
         paragraphSpacing: designTokens[`${themeName}ParagraphSpacing0`] + 'px',
         textCase: designTokens[`${themeName}TextCaseNone`],
-        textDecoration: designTokens[`${themeName}TextDecorationNone`]
+        textDecoration: designTokens[`${themeName}TextDecorationNone`],
       },
       h1,
       header1: h1, // Do not used this, use h1 instead
@@ -113,7 +113,7 @@ const useMaterialThemeTokens = (
         letterSpacing: designTokens[`${themeName}LetterSpacingNone`],
         paragraphSpacing: designTokens[`${themeName}ParagraphSpacing8`] + 'px',
         textCase: designTokens[`${themeName}TextCaseNone`],
-        textDecoration: designTokens[`${themeName}TextDecorationNone`]
+        textDecoration: designTokens[`${themeName}TextDecorationNone`],
       },
       body1Bold: {
         fontWeight: fontWeights.RobotoBold,
@@ -122,7 +122,7 @@ const useMaterialThemeTokens = (
         letterSpacing: designTokens[`${themeName}LetterSpacingNone`],
         paragraphSpacing: designTokens[`${themeName}ParagraphSpacing8`] + 'px',
         textCase: designTokens[`${themeName}TextCaseNone`],
-        textDecoration: designTokens[`${themeName}TextDecorationNone`]
+        textDecoration: designTokens[`${themeName}TextDecorationNone`],
       },
       body2,
       body2Regular: body2,
@@ -133,7 +133,7 @@ const useMaterialThemeTokens = (
         letterSpacing: designTokens[`${themeName}LetterSpacingNone`],
         paragraphSpacing: designTokens[`${themeName}ParagraphSpacing8`] + 'px',
         textCase: designTokens[`${themeName}TextCaseNone`],
-        textDecoration: designTokens[`${themeName}TextDecorationNone`]
+        textDecoration: designTokens[`${themeName}TextDecorationNone`],
       },
       body2Bold: {
         fontWeight: fontWeights.RobotoBold,
@@ -142,7 +142,7 @@ const useMaterialThemeTokens = (
         letterSpacing: designTokens[`${themeName}LetterSpacingNone`],
         paragraphSpacing: designTokens[`${themeName}ParagraphSpacing8`] + 'px',
         textCase: designTokens[`${themeName}TextCaseNone`],
-        textDecoration: designTokens[`${themeName}TextDecorationNone`]
+        textDecoration: designTokens[`${themeName}TextDecorationNone`],
       },
       caption: {
         fontWeight: fontWeights.RobotoRegular,
@@ -151,7 +151,7 @@ const useMaterialThemeTokens = (
         letterSpacing: designTokens[`${themeName}LetterSpacingNone`],
         paragraphSpacing: designTokens[`${themeName}ParagraphSpacing0`] + 'px',
         textCase: designTokens[`${themeName}TextCaseNone`],
-        textDecoration: designTokens[`${themeName}TextDecorationNone`]
+        textDecoration: designTokens[`${themeName}TextDecorationNone`],
       },
       buttonNotif: {
         fontWeight: fontWeights.RobotoBold,
@@ -160,7 +160,7 @@ const useMaterialThemeTokens = (
         letterSpacing: designTokens[`${themeName}LetterSpacingNone`],
         paragraphSpacing: designTokens[`${themeName}ParagraphSpacing0`] + 'px',
         textCase: designTokens[`${themeName}TextCaseNone`],
-        textDecoration: designTokens[`${themeName}TextDecorationNone`]
+        textDecoration: designTokens[`${themeName}TextDecorationNone`],
       },
       link1: {
         fontWeight: fontWeights.RobotoBold,
@@ -169,7 +169,7 @@ const useMaterialThemeTokens = (
         letterSpacing: designTokens[`${themeName}LetterSpacingNone`],
         paragraphSpacing: designTokens[`${themeName}ParagraphSpacing0`] + 'px',
         textCase: designTokens[`${themeName}TextCaseNone`],
-        textDecoration: designTokens[`${themeName}TextDecorationUnderline`]
+        textDecoration: designTokens[`${themeName}TextDecorationUnderline`],
       },
       link2: {
         fontWeight: fontWeights.RobotoBold,
@@ -178,11 +178,11 @@ const useMaterialThemeTokens = (
         letterSpacing: designTokens[`${themeName}LetterSpacingNone`],
         paragraphSpacing: designTokens[`${themeName}ParagraphSpacing0`] + 'px',
         textCase: designTokens[`${themeName}TextCaseNone`],
-        textDecoration: designTokens[`${themeName}TextDecorationUnderline`]
+        textDecoration: designTokens[`${themeName}TextDecorationUnderline`],
       },
       fontWeightRegular: fontWeights.RobotoRegular,
       fontWeightMedium: fontWeights.RobotoMedium,
-      fontWeightBold: fontWeights.RobotoBold
+      fontWeightBold: fontWeights.RobotoBold,
     },
     breakpoints: {
       values: {
@@ -190,8 +190,8 @@ const useMaterialThemeTokens = (
         sm: 600,
         md: 900,
         lg: 1200,
-        xl: 1536
-      }
+        xl: 1536,
+      },
     },
     zIndex: {
       mobileStepper: 1000,
@@ -201,16 +201,16 @@ const useMaterialThemeTokens = (
       drawer: 1200,
       modal: 1300,
       snackbar: 1400,
-      tooltip: 1500
+      tooltip: 1500,
     },
-    palette: getMuiPalette(themeName)
+    palette: getMuiPalette(themeName),
   };
 
   const muiTokens = useMemo(
     () => ({
-      ...muiTokensObject
+      ...muiTokensObject,
     }),
-    [muiTokensObject]
+    [muiTokensObject],
   );
 
   return { muiTokens };

package/src/useThemeTokens.ts

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 
-import { DesignTokens, Theme } from './interfaces/theme';
 import { getFontFamilies, getTokensByType } from './helpers/theme';
+import { DesignTokens, Theme } from './interfaces/theme';
 
 interface useThemeTokensReturnType {
   tokens: DesignTokens;
@@ -20,7 +20,7 @@ const useThemeTokens = (themeName: Theme): useThemeTokensReturnType => {
       textDecoration: getTokensByType(themeName, 'TextDecoration'),
       colors: getTokensByType(themeName, 'Colors'),
       spacing: getTokensByType(themeName, 'Spacing'),
-      sizing: getTokensByType(themeName, 'Sizing')
+      sizing: getTokensByType(themeName, 'Sizing'),
     };
   }, [themeName]);