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

package/dist/es/types/css/form/radioCss.d.ts

@@ -1,2 +1,3 @@
-declare const RadioCss: (muiTokens: Record<string, string | number | any>) => Record<string, unknown>;
+import { MuiTokens } from '../../interfaces/theme';
+declare const RadioCss: (muiTokens: MuiTokens) => Record<string, unknown>;
 export default RadioCss;

package/dist/es/types/css/form/selectCss.d.ts

@@ -1,2 +1,3 @@
-declare const SelectCss: (muiTokens: Record<string, string | number | any>) => Record<string, unknown>;
+import { MuiTokens } from '../../interfaces/theme';
+declare const SelectCss: (muiTokens: MuiTokens) => Record<string, unknown>;
 export default SelectCss;

package/dist/es/types/css/form/snackbarCss.d.ts

@@ -1,2 +1,3 @@
-declare const SnackbarCss: (muiTokens: Record<string, string | number | any>) => Record<string, unknown>;
+import { MuiTokens } from '../../interfaces/theme';
+declare const SnackbarCss: (muiTokens: MuiTokens) => Record<string, unknown>;
 export default SnackbarCss;

package/dist/es/types/css/form/textFieldCss.d.ts

@@ -1,2 +1,3 @@
-declare const TextFieldCss: (muiTokens: Record<string, string | number | any>) => Record<string, unknown>;
+import { MuiTokens } from '../../interfaces/theme';
+declare const TextFieldCss: (muiTokens: MuiTokens) => Record<string, unknown>;
 export default TextFieldCss;

package/dist/es/types/css/iconButtonCss.d.ts

@@ -1,2 +1,3 @@
-declare const IconButtonCss: (muiTokens: Record<string, string | number | any>) => Record<string, unknown>;
+import { MuiTokens } from '../interfaces/theme';
+declare const IconButtonCss: (muiTokens: MuiTokens) => Record<string, unknown>;
 export default IconButtonCss;

package/dist/es/types/css/linkCss.d.ts

@@ -1,2 +1,3 @@
-declare const LinkCss: (muiTokens: Record<string, string | number | any>) => Record<string, unknown>;
+import { MuiTokens } from '../interfaces/theme';
+declare const LinkCss: (muiTokens: MuiTokens) => Record<string, unknown>;
 export default LinkCss;

package/dist/es/types/css/paginationCss.d.ts

@@ -1,2 +1,3 @@
-declare const PaginationCss: (muiTokens: Record<string, string | number | any>) => Record<string, unknown>;
+import { MuiTokens } from '../interfaces/theme';
+declare const PaginationCss: (muiTokens: MuiTokens) => Record<string, unknown>;
 export default PaginationCss;

package/dist/es/types/css/switchCss.d.ts

@@ -1,2 +1,3 @@
-declare const SwitchCss: (muiTokens: Record<string, string | number | any>) => Record<string, unknown>;
+import { MuiTokens } from '../interfaces/theme';
+declare const SwitchCss: (muiTokens: MuiTokens) => Record<string, unknown>;
 export default SwitchCss;

package/dist/es/types/css/tooltipCss.d.ts

@@ -1,2 +1,2 @@
-declare const TooltipCss: (muiTokens: Record<string, string | number | any>) => Record<string, unknown>;
+declare const TooltipCss: () => Record<string, unknown>;
 export default TooltipCss;

package/dist/es/types/helpers/theme.d.ts

@@ -1,4 +1,4 @@
 import { Theme, Types } from '../interfaces/theme';
 export declare const getTokensByType: (themeName: Theme, type: Types) => Record<string, string>;
-export declare const getMuiPalette: (themeName: Theme) => Record<string, any>;
+export declare const getMuiPalette: (themeName: Theme) => Record<string, string | number | unknown>;
 export declare const getFontFamilies: (themeName: Theme) => string[];

package/dist/es/types/interfaces/theme.d.ts

@@ -13,3 +13,4 @@ export interface DesignTokens {
 }
 export type Types = 'FontSize' | 'FontWeights' | 'LineHeights' | 'Colors' | 'Spacing' | 'Sizing' | 'FontFamilies' | 'LetterSpacing' | 'ParagraphSpacing' | 'TextCase' | 'TextDecoration';
 export type Theme = 'Default' | 'Ep';
+export type MuiTokens = Record<string, any>;

package/dist/es/types/useMaterialThemeTokens.d.ts

@@ -1,6 +1,6 @@
-import { Theme } from './interfaces/theme';
+import { MuiTokens, Theme } from './interfaces/theme';
 interface useMaterialThemeTokensReturnType {
-    muiTokens: Record<string, any>;
+    muiTokens: MuiTokens;
 }
 declare const useMaterialThemeTokens: (themeName: Theme) => useMaterialThemeTokensReturnType;
 export default useMaterialThemeTokens;

package/package.json

@@ -1,44 +1,43 @@
 {
   "name": "@groupeactual/design-tokens",
-  "version": "1.5.2-beta.5",
+  "version": "1.6.0-beta.10",
   "type": "module",
   "description": "A simple library to manage design tokens",
   "dependencies": {
     "lodash": "^4.17.21",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.4",
-    "@babel/preset-env": "^7.24.4",
-    "@babel/preset-react": "^7.24.1",
-    "@babel/preset-typescript": "^7.24.1",
+    "@groupeactual/code-quality-front": "^1.2.0-beta.8",
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.4",
+    "@babel/preset-react": "^7.24.7",
+    "@babel/preset-typescript": "^7.24.7",
     "@mdx-js/react": "^3.0.1",
-    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@types/react": "^18.2.75",
-    "@typescript-eslint/eslint-plugin": "^6.4.0",
-    "@typescript-eslint/parser": "^6.0.0",
-    "babel-loader": "^9.1.2",
-    "clsx": "^1.2.1",
-    "css-loader": "^6.8.1",
-    "html-webpack-plugin": "^5.5.3",
+    "@types/react": "^18.3.4",
+    "@typescript-eslint/eslint-plugin": "^8.1.0",
+    "@typescript-eslint/parser": "^8.1.0",
+    "babel-loader": "^9.1.3",
+    "clsx": "^2.1.1",
+    "css-loader": "^7.1.2",
     "identity-obj-proxy": "^3.0.0",
-    "postcss": "^8.4.24",
-    "prettier": "^3.2.5",
-    "rollup": "^3.25.2",
-    "rollup-plugin-dts": "^5.3.0",
+    "postcss": "^8.4.41",
+    "prettier": "^3.3.3",
+    "rollup": "^4.21.0",
+    "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-postcss": "^4.0.2",
-    "sass": "^1.63.6",
-    "sass-loader": "^13.3.2",
-    "style-dictionary": "^3.8.0",
-    "style-loader": "^3.3.3",
+    "sass": "^1.77.8",
+    "sass-loader": "^16.0.1",
+    "style-dictionary": "^4.0.1",
+    "style-loader": "^4.0.0",
     "token-transformer": "^0.0.33",
-    "tslib": "^2.5.3",
-    "typescript": "^4.9.5",
-    "webpack": "^5.88.0"
+    "tslib": "^2.6.3",
+    "typescript": "^5.5.4"
   },
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.mjs",
@@ -48,8 +47,8 @@
   ],
   "types": "dist/es/types/index.d.ts",
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "scripts": {
     "build": "rollup -c",

package/src/css/accordionCss.ts

@@ -1,6 +1,6 @@
-const AccordionCss = (
-  muiTokens: Record<string, string | number | any>
-): Record<string, unknown> => {
+import { MuiTokens } from '../interfaces/theme';
+
+const AccordionCss = (muiTokens: MuiTokens): Record<string, unknown> => {
   return {
     '&.MuiAccordion-root': {
       border: `1px solid`,
@@ -12,18 +12,18 @@ const AccordionCss = (
         color: muiTokens.palette.greyXDark,
         fontWeight: muiTokens.typography.fontWeightMedium,
         fontSize: '18px',
-        lineHeight: '21px'
+        lineHeight: '21px',
       },
       '.MuiAccordionDetails-root': {
         padding: '16px',
         borderBottomLeftRadius: '4px',
-        borderBottomRightRadius: '4px'
+        borderBottomRightRadius: '4px',
       },
       '.MuiAccordionSummary-expandIconWrapper .MuiBox-root': {
         width: 'auto',
-        padding: '13px'
-      }
-    }
+        padding: '13px',
+      },
+    },
   };
 };
 

package/src/css/bannerNotificationCss.ts

@@ -1,5 +1,7 @@
+import { MuiTokens } from '../interfaces/theme';
+
 const bannerNotificationCss = (
-  muiTokens: Record<string, string | number | any>
+  muiTokens: MuiTokens,
 ): Record<string, unknown> => {
   return {
     '&.MuiPaper-root': {
@@ -11,39 +13,39 @@ const bannerNotificationCss = (
         color: 'white',
         fontWeight: '700',
         fontSize: '14px',
-        maxWidth: '1600px'
+        maxWidth: '1600px',
       },
       '.MuiAlert-icon': {
         opacity: 1 + ' !important',
         alignItems: 'center',
-        marginRight: '8px'
+        marginRight: '8px',
       },
       '.MuiAlert-message': {
-        alignSelf: 'center'
+        alignSelf: 'center',
       },
       '.MuiSvgIcon-root': {
         color: 'white',
-        '-webkit-tap-highlight-color': 'white'
+        '-webkit-tap-highlight-color': 'white',
       },
       '.MuiAlert-action': {
         cursor: 'pointer',
         marginRight: 0,
         padding: 0,
-        alignSelf: 'center'
+        alignSelf: 'center',
       },
       '&.MuiAlert-standardInfo': {
-        backgroundColor: muiTokens.palette.blueInfo
+        backgroundColor: muiTokens.palette.blueInfo,
       },
       '&.MuiAlert-standardWarning': {
-        backgroundColor: muiTokens.palette.orangeWarning
+        backgroundColor: muiTokens.palette.orangeWarning,
       },
       '&.MuiAlert-standardError': {
-        backgroundColor: muiTokens.palette.redError
+        backgroundColor: muiTokens.palette.redError,
       },
       '&.MuiAlert-standardSuccess': {
-        backgroundColor: muiTokens.palette.greenSuccess
-      }
-    }
+        backgroundColor: muiTokens.palette.greenSuccess,
+      },
+    },
   };
 };
 

package/src/css/breadcrumbsCss.ts

@@ -1,18 +1,18 @@
-const BreadcrumbsCss = (
-  muiTokens: Record<string, string | number | any>
-): Record<string, unknown> => {
+import { MuiTokens } from '../interfaces/theme';
+
+const BreadcrumbsCss = (muiTokens: MuiTokens): Record<string, unknown> => {
   return {
     '&.MuiBreadcrumbs-root': {
       margin: 0,
-      padding: '4px 0'
+      padding: '4px 0',
     },
     '& .MuiBreadcrumbs-separator': {
       margin: 0,
-      padding: '0 4px'
+      padding: '0 4px',
     },
     '& .MuiTypography-body1': {
-      color: muiTokens.palette.greyDark
-    }
+      color: muiTokens.palette.greyDark,
+    },
   };
 };
 

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',
+    },
   };
 };