@groupeactual/design-tokens 1.7.0-beta.0 → 1.7.0-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@groupeactual/design-tokens",
-  "version": "1.7.0-beta.0",
+  "version": "1.7.0-beta.4",
   "type": "module",
   "description": "A simple library to manage design tokens",
   "dependencies": {
@@ -9,36 +9,36 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.25.2",
-    "@babel/preset-env": "^7.25.4",
-    "@babel/preset-react": "^7.24.7",
-    "@babel/preset-typescript": "^7.24.7",
-    "@groupeactual/code-quality-front": "^1.2.1",
-    "@mdx-js/react": "^3.0.1",
+    "@babel/core": "^7.26.0",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.25.9",
+    "@babel/preset-typescript": "^7.26.0",
+    "@groupeactual/code-quality-front": "^1.3.0",
+    "@mdx-js/react": "^3.1.0",
     "@rollup/plugin-alias": "^5.1.1",
-    "@rollup/plugin-commonjs": "^26.0.1",
+    "@rollup/plugin-commonjs": "^28.0.1",
     "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-typescript": "^11.1.6",
-    "@types/react": "^18.3.4",
-    "@typescript-eslint/eslint-plugin": "^8.3.0",
-    "@typescript-eslint/parser": "^8.3.0",
-    "babel-loader": "^9.1.3",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-typescript": "^12.1.1",
+    "@types/react": "^18.3.12",
+    "@typescript-eslint/eslint-plugin": "^8.15.0",
+    "@typescript-eslint/parser": "^8.15.0",
+    "babel-loader": "^9.2.1",
     "clsx": "^2.1.1",
     "css-loader": "^7.1.2",
     "identity-obj-proxy": "^3.0.0",
-    "postcss": "^8.4.41",
+    "postcss": "^8.4.49",
     "prettier": "^3.3.3",
-    "rollup": "^4.21.1",
+    "rollup": "^4.27.3",
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-postcss": "^4.0.2",
-    "sass": "^1.77.8",
-    "sass-loader": "^16.0.1",
-    "style-dictionary": "^4.1.0",
+    "sass": "^1.81.0",
+    "sass-loader": "^16.0.3",
+    "style-dictionary": "^4.2.0",
     "style-loader": "^4.0.0",
     "token-transformer": "^0.0.33",
-    "tslib": "^2.7.0",
-    "typescript": "^5.5.4"
+    "tslib": "^2.8.1",
+    "typescript": "^5.6.3"
   },
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -51,7 +51,7 @@
     "build": "rollup -c",
     "build:watch": "rollup --bundleConfigAsCjs -c -w",
     "dev": "npm run build:watch",
-    "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx",
+    "eslint": "eslint --config \"eslint.config.js\" --color \".\"",
     "lint": "npm run eslint"
   }
 }

package/src/css/buttonCss.ts

@@ -15,13 +15,22 @@ const ButtonCss = (muiTokens: MuiTokens): Record<string, unknown> => {
       height: '44px',
       border: '1px solid',
       borderColor: muiTokens.palette.greyLightDefaultBorder + ' !important',
+      '.MuiSvgIcon-root': {
+        paddingBottom: '2px',
+      },
     },
     '&.MuiButton-primary': {
+      '.MuiTypography-buttonNotif': {
+        color: muiTokens.palette.white + ' !important',
+      },
       color: muiTokens.palette.white + ' !important',
       backgroundColor: muiTokens.palette.blueClickable + ' !important',
       border: '1px solid' + ' !important',
       borderColor: muiTokens.palette.blueClickable + ' !important',
       '&.Mui-disabled': {
+        '.MuiTypography-buttonNotif': {
+          color: muiTokens.palette.white + ' !important',
+        },
         backgroundColor: muiTokens.palette.greyMediumInactive + ' !important',
         borderColor: muiTokens.palette.greyMediumInactive + ' !important',
         color: muiTokens.palette.white + ' !important',
@@ -32,6 +41,9 @@ const ButtonCss = (muiTokens: MuiTokens): Record<string, unknown> => {
       },
     },
     '&.MuiButton-secondary': {
+      '.MuiTypography-buttonNotif': {
+        color: muiTokens.palette.blueClickable + ' !important',
+      },
       color: muiTokens.palette.blueClickable,
       backgroundColor: muiTokens.palette.white + ' !important',
       border: '1px solid',
@@ -40,6 +52,9 @@ const ButtonCss = (muiTokens: MuiTokens): Record<string, unknown> => {
         color: muiTokens.palette.blueClickable,
       },
       '&.Mui-disabled': {
+        '.MuiTypography-buttonNotif': {
+          color: muiTokens.palette.greyMediumInactive + ' !important',
+        },
         backgroundColor: muiTokens.palette.white,
         borderColor: muiTokens.palette.greyLightDefaultBorder + ' !important',
         color: muiTokens.palette.greyMediumInactive + ' !important',

package/src/css/datatable/datatableCss.ts

@@ -6,6 +6,9 @@ const DatatableCss = (muiTokens: MuiTokens): Record<string, unknown> => {
       backgroundColor: muiTokens.palette.white,
       borderRadius: '4px',
     },
+    '.MuiTableCell-root': {
+      borderColor: muiTokens.palette.greyLightDefaultBorder,
+    },
     '& .MuiTableRow-root': {
       height: '50px',
       borderColor: muiTokens.palette.greyLightDefaultBorder,

package/src/css/form/autoCompleteCss.ts

@@ -9,6 +9,7 @@ const AutoCompleteCss = (muiTokens: MuiTokens): Record<string, unknown> => {
         height: '44px',
         padding: 0 + ' !important',
         '.SelectIcon': {
+          marginTop: '-1px',
           color: muiTokens.palette.blueClickable + ' !important',
         },
       },

package/src/css/form/checkboxCss.ts

@@ -110,6 +110,10 @@ const CheckboxCss = (muiTokens: MuiTokens): Record<string, unknown> => {
           borderRadius: '0px',
         },
       },
+      '.MuiBox-root .MuiBox-root svg': {
+        top: '1px',
+        position: 'relative',
+      },
     },
     '.MuiFormHelperText-root': {
       marginTop: '3px',

package/src/css/form/checkboxGroupCss.ts

@@ -36,14 +36,6 @@ const CheckboxGroupCss = (muiTokens: MuiTokens): Record<string, unknown> => {
         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
-    // et donc éviter d'avoir à le réécrire à chaque fois
-    '.MuiBox-root .MuiBox-root svg': {
-      // fix du tooltip uniquement pour checkboxGroup
-      position: 'relative',
-      bottom: '-2px',
-    },
   };
 };
 

package/src/css/form/datePickerCss.ts

@@ -35,6 +35,9 @@ const DatePickerCss = (muiTokens: MuiTokens): Record<string, unknown> => {
       },
     },
     '.Mui-disabled': {
+      '&.MuiButtonBase-root': {
+        color: muiTokens.palette.greyMediumInactive,
+      },
       '.MuiOutlinedInput-notchedOutline': {
         borderColor: muiTokens.palette.greyLightDefaultBorder + ' !important',
       },
@@ -48,7 +51,7 @@ const DatePickerCss = (muiTokens: MuiTokens): Record<string, unknown> => {
         borderColor: muiTokens.palette.greenSuccess + ' !important',
       },
       '.MuiInputAdornment-root': {
-        '.MuiSvgIcon-root': {
+        '.itemIcon .MuiSvgIcon-root': {
           color: muiTokens.palette.greenSuccess,
         },
       },

package/src/css/form/radioCss.ts

@@ -3,16 +3,12 @@ import { MuiTokens } from '@/interfaces/theme';
 const RadioCss = (muiTokens: MuiTokens): Record<string, unknown> => {
   return {
     '&.MuiFormControl-root': {
-      '.MuiSvgIcon-root': {
-        marginTop: '-2px',
-      },
       '.MuiRadio-root': {
         '.MuiSvgIcon-root': {
           flexShrink: 0,
           zIndex: 1,
           height: '16px',
           width: '16px',
-          marginTop: '-2px',
           color: muiTokens.palette.greyMediumInactive,
         },
         height: '16px',
@@ -24,6 +20,10 @@ const RadioCss = (muiTokens: MuiTokens): Record<string, unknown> => {
           },
         },
       },
+      '.MuiBox-root .itemIcon svg': {
+        top: '1px',
+        position: 'relative',
+      },
       '.MuiFormControlLabel-root': {
         margin: '0px 0px 4px 0px',
         color: muiTokens.palette.greyXDark,
@@ -60,6 +60,9 @@ const RadioCss = (muiTokens: MuiTokens): Record<string, unknown> => {
         '.MuiFormLabel-root': {
           color: muiTokens.palette.greyDark,
         },
+        '.MuiTypography-root': {
+          color: muiTokens.palette.greyDark,
+        },
         '.MuiFormControlLabel-label': {
           color: muiTokens.palette.greyDark,
         },
@@ -87,9 +90,8 @@ const RadioCss = (muiTokens: MuiTokens): Record<string, unknown> => {
       },
       '.MuiTouchRipple-root': {
         background: 'white',
-        height: '12px',
-        width: '12px',
-        top: '3px',
+        height: '16px',
+        width: '16px',
         zIndex: 0,
         left: '3px',
       },

package/src/css/form/selectCss.ts

@@ -23,6 +23,7 @@ const SelectCss = (muiTokens: MuiTokens): Record<string, unknown> => {
         padding: 0 + ' !important',
         backgroundColor: muiTokens.palette.white,
         '.SelectIcon': {
+          marginTop: '-2px',
           color: muiTokens.palette.blueClickable + ' !important',
         },
       },
@@ -81,7 +82,7 @@ const SelectCss = (muiTokens: MuiTokens): Record<string, unknown> => {
         visibility: 'hidden',
         alignSelf: 'center',
         position: 'relative',
-        marginTop: '2px',
+        marginTop: '3px',
         marginRight: '-8px',
       },
 
@@ -89,7 +90,7 @@ const SelectCss = (muiTokens: MuiTokens): Record<string, unknown> => {
         fontWeight: 400,
         lineHeight: '18px',
         fontSize: '14px',
-        color: '#545352 !important',
+        color: muiTokens.palette.greyDark + ' !important',
       },
       '&.Select-mui': {
         '&.Mui-filled': {
@@ -135,7 +136,7 @@ const SelectCss = (muiTokens: MuiTokens): Record<string, unknown> => {
           fontSize: '14px',
           lineHeight: '18px',
           fontWeight: 400,
-          padding: '8px 31px 10px 14px',
+          padding: '13px 2px 11px 8px',
           '&.Mui-disabled': {
             color: muiTokens.palette.greyDark,
             WebkitTextFillColor: muiTokens.palette.greyDark,

package/src/css/form/textFieldCss.ts

@@ -13,8 +13,13 @@ const TextFieldCss = (muiTokens: MuiTokens): Record<string, unknown> => {
     '.Mui-error .MuiOutlinedInput-notchedOutline': {
       borderColor: muiTokens.palette.redError + ' !important',
     },
-    '.Mui-disabled .MuiOutlinedInput-notchedOutline': {
-      borderColor: muiTokens.palette.greyLightDefaultBorder + ' !important',
+    '.Mui-disabled': {
+      '.MuiSvgIcon-root': {
+        color: muiTokens.palette.greyMediumInactive,
+      },
+      '.MuiOutlinedInput-notchedOutline': {
+        borderColor: muiTokens.palette.greyLightDefaultBorder + ' !important',
+      },
     },
     '&.MuiTextField-root': {
       '.MuiInputBase-root': {
@@ -121,6 +126,12 @@ const TextFieldCss = (muiTokens: MuiTokens): Record<string, unknown> => {
           color: muiTokens.palette.redError,
         },
       },
+      '.MuiInputBase-root.Mui-disabled': {
+        backgroundColor: muiTokens.palette.greyXLight,
+      },
+      'textarea.MuiOutlinedInput-input': {
+        paddingBottom: '1px !important',
+      },
       '.MuiOutlinedInput-input': {
         fontSize: '14px',
         lineHeight: '18px',

package/src/css/iconButtonCss.ts

@@ -7,10 +7,7 @@ const IconButtonCss = (muiTokens: MuiTokens): Record<string, unknown> => {
       '& .MuiTouchRipple-root .MuiTouchRipple-child': {
         borderRadius: '4px',
       },
-      '& .MuiSvgIcon-root': {
-        color: muiTokens.palette.blueClickable,
-      },
-      '&:hover': {
+      ':hover': {
         '& .MuiSvgIcon-root': {
           color: muiTokens.palette.blueHoverClickable,
         },

package/src/css/menuItemCss.ts

@@ -2,8 +2,21 @@ import { MuiTokens } from '@/interfaces/theme';
 
 const MenuItemCss = (muiTokens: MuiTokens): Record<string, unknown> => {
   return {
-    padding: '16px 14px',
+    padding: '13px 16px',
+    '.itemIcon': {
+      color: muiTokens.palette.greyDark,
+    },
+    '.MuiTypography-root': {
+      paddingTop: '2px',
+    },
     '&:hover': {
+      '.MuiTypography-root': {
+        fontWeight: 500,
+        paddingTop: '2px',
+      },
+      '.itemIcon': {
+        color: muiTokens.palette.blueHoverClickable,
+      },
       backgroundColor: muiTokens.palette.blueHoverOpacity12,
       '& .MuiTypography-body2': {
         color: muiTokens.palette.blueHoverClickable,

package/src/css/paginationCss.ts

@@ -3,6 +3,7 @@ import { MuiTokens } from '@/interfaces/theme';
 const PaginationCss = (muiTokens: MuiTokens): Record<string, unknown> => {
   return {
     '.MuiPaginationItem-root': {
+      fontFamily: 'Roboto',
       height: '44px !important',
       width: '44px !important',
       color: muiTokens.palette.blueClickable + ' !important',
@@ -11,6 +12,26 @@ const PaginationCss = (muiTokens: MuiTokens): Record<string, unknown> => {
       outline: 'none !important',
       fontSize: '14px !important',
       borderColor: muiTokens.palette.greyLightDefaultBorder + ' !important',
+      '&.Mui-selected': {
+        color: 'white !important',
+        backgroundColor: muiTokens.palette.blueClickable + ' !important',
+        borderRadius: '4px !important',
+        outline: 'none !important',
+        '&:hover': {
+          color: 'white !important',
+          backgroundColor: muiTokens.palette.blueClickable + ' !important',
+          borderColor: muiTokens.palette.greyDark + ' !important',
+          borderRadius: '4px !important',
+          outline: 'none !important',
+        },
+        '&:focus': {
+          color: 'white !important',
+          backgroundColor: muiTokens.palette.blueClickable + ' !important',
+          borderColor: muiTokens.palette.greyDark + ' !important',
+          borderRadius: '4px !important',
+          outline: 'none !important',
+        },
+      },
       '&:hover': {
         color: muiTokens.palette.blueClickable + ' !important',
         backgroundColor: 'white !important',

package/src/css/tooltipCss.ts

@@ -1,22 +1,5 @@
 const TooltipCss = (): Record<string, unknown> => {
-  return {
-    '& .MuiTooltip-tooltip': {
-      background: 'red',
-      backgroundColor: 'red',
-    },
-    '.MuiTooltip-tooltip': {
-      background: 'red',
-      backgroundColor: 'red',
-    },
-    '& .MuiPopper-popper': {
-      background: 'red',
-      backgroundColor: 'red',
-    },
-    '.MuiPopper-popper': {
-      background: 'red',
-      backgroundColor: 'red',
-    },
-  };
+  return {};
 };
 
 export default TooltipCss;