@groupeactual/design-tokens 1.7.10 → 2.0.0-beta.0

package/src/css/menuItemCss.ts

@@ -1,31 +0,0 @@
-import { MuiTokens } from '@/interfaces/theme';
-
-const MenuItemCss = (muiTokens: MuiTokens): Record<string, unknown> => {
-  return {
-    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,
-      },
-      '& .MuiBox-root': {
-        color: muiTokens.palette.blueHoverClickable,
-      },
-    },
-  };
-};
-
-export default MenuItemCss;

package/src/css/paginationCss.ts

@@ -1,59 +0,0 @@
-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',
-      backgroundColor: 'white !important',
-      fontWeight: '700 !important',
-      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',
-        borderColor: muiTokens.palette.blueHoverClickable + ' !important',
-        borderRadius: '4px !important',
-        outline: 'none !important',
-      },
-      '&.Mui-disabled': {
-        color: muiTokens.palette.greyMediumInactive + ' !important',
-        backgroundColor: 'white !important',
-        borderRadius: '4px !important',
-        outline: 'none !important',
-        opacity: '1 !important',
-      },
-      '&.MuiPaginationItem-ellipsis': {
-        color: muiTokens.palette.greyDark + ' !important',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-      },
-    },
-  };
-};
-
-export default PaginationCss;

package/src/css/switchCss.ts

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

package/src/css/tooltipCss.ts

@@ -1,5 +0,0 @@
-const TooltipCss = (): Record<string, unknown> => {
-  return {};
-};
-
-export default TooltipCss;

package/src/helpers/theme.ts

@@ -1,89 +0,0 @@
-import { Theme, Types } from '@/interfaces/theme';
-import * as tokens from '@/themes/tokens';
-
-export const getTokensByType = (
-  themeName: Theme,
-  type: Types,
-): Record<string, string> => {
-  const defaultTokens: Record<string, string> = {};
-
-  Object.keys(tokens).forEach((tokenKey) => {
-    if (tokenKey.startsWith(`${themeName}${type}`)) {
-      let parsedTokenKey = tokenKey.replace(`${themeName}${type}`, '');
-      parsedTokenKey =
-        parsedTokenKey.charAt(0).toLowerCase() + parsedTokenKey.slice(1);
-
-      switch (parsedTokenKey) {
-        case 'lineHeights':
-        case 'fontSize':
-        case 'paragraphSpacing':
-          defaultTokens[parsedTokenKey] = tokens[tokenKey] + 'px';
-          break;
-        default:
-          defaultTokens[parsedTokenKey] = tokens[tokenKey];
-      }
-    }
-  });
-
-  return defaultTokens;
-};
-
-export const getMuiPalette = (
-  themeName: Theme,
-): Record<string, string | number | unknown> => {
-  const palette: Record<string, string | number | unknown> = {};
-
-  Object.keys(tokens).forEach((colorName) => {
-    // color structure :
-    // DefaultDefaultColorsBackgroundColorsGreyXLight : Default/DefaultColorsBackgroundColors/GreyXLight -> Theme/Catégorie/Couleur
-    // 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,
-      );
-
-      colorKey = colorKey.charAt(0).toLowerCase() + colorKey.slice(1);
-      palette[colorKey] = tokens[colorName] as 'primary';
-    }
-  });
-
-  const defaultPalette = {
-    primary: {
-      main: palette['blueClickable'],
-      dark: palette['blueHoverClickable'],
-    },
-    secondary: {
-      main: palette['redActual'],
-    },
-    success: {
-      main: palette['greenSuccess'],
-    },
-    error: {
-      main: palette['redError'],
-    },
-    warning: {
-      main: palette['orangeWarning'],
-    },
-    infos: {
-      main: palette['blueInfo'],
-    },
-  };
-
-  return {
-    ...palette,
-    ...defaultPalette,
-  };
-};
-
-export const getFontFamilies = (themeName: Theme): string[] => {
-  const designTokens = tokens as Record<string, string | number | unknown>;
-  const fontFamilies: string[] = [];
-
-  Object.keys(tokens).forEach((fontFamily) => {
-    if (fontFamily.startsWith(themeName + 'FontFamilies')) {
-      fontFamilies.push(designTokens[fontFamily] as string);
-    }
-  });
-
-  return fontFamilies;
-};

package/src/interfaces/theme.ts

@@ -1,34 +0,0 @@
-export interface DesignTokens {
-  fontSize: Record<string, string | number>;
-  fontWeights: Record<string, string | number>;
-  lineHeights: Record<string, string | number>;
-  fontFamilies: string[];
-  letterSpacing: Record<string, string | number>;
-  paragraphSpacing: Record<string, string | number>;
-  textCase: Record<string, string | number>;
-  textDecoration: Record<string, string | number>;
-  colors: Record<string, string | Record<string, string>>;
-  spacing: Record<string, string | number>;
-  sizing: Record<string, string | number>;
-}
-
-export type Types =
-  | 'FontSize'
-  | 'FontWeights'
-  | 'LineHeights'
-  | 'Colors'
-  | 'Spacing'
-  | 'Sizing'
-  | 'FontFamilies'
-  | 'LetterSpacing'
-  | 'ParagraphSpacing'
-  | 'TextCase'
-  | 'TextDecoration';
-
-// Deux themes pour le moment :
-// 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

@@ -1,169 +0,0 @@
-/**
- * Do not edit directly
- * Generated on Thu, 23 Feb 2023 15:24:19 GMT
- */
-export const DefaultWebShadowAllContent = {
-  color: '#2727271f',
-  type: 'dropShadow',
-  x: '0',
-  y: '2',
-  blur: '10',
-  spread: '0',
-};
-export const DefaultSpacingXxs = '4';
-export const DefaultSpacingXs = '8';
-export const DefaultSpacingMd = '16';
-export const DefaultSpacingLg = '24';
-export const DefaultSpacingXl = '32';
-export const DefaultSpacingXxl = '40';
-export const DefaultSpacingXxxl = '72';
-export const DefaultBorderRadius4 = '4';
-export const DefaultBorderRadius8 = '8';
-export const DefaultBorderRadius16 = '16';
-export const DefaultBorderRadius24 = '24';
-export const DefaultSizingXs = '8';
-export const DefaultSizingSm = '12';
-export const DefaultSizingMd = '16';
-export const DefaultSizingLg = '24';
-export const DefaultSizingXl = '32';
-export const DefaultSizingXxl = '40';
-export const DefaultSizingXxxl = '72';
-export const DefaultFontFamiliesRoboto = 'Roboto';
-export const DefaultLineHeights12 = '12';
-export const DefaultLineHeights16 = '16';
-export const DefaultLineHeights18 = '18';
-export const DefaultLineHeights21 = '21';
-export const DefaultLineHeights28 = '28';
-export const DefaultLineHeights34 = '34';
-export const DefaultLineHeights41 = '41';
-export const DefaultLineHeights49 = '49';
-export const DefaultFontWeightsRoboto700 = 'Bold';
-export const DefaultFontWeightsRoboto500 = 'Medium';
-export const DefaultFontWeightsRoboto400 = 'Regular';
-export const DefaultFontSize11 = '11';
-export const DefaultFontSize13 = '13';
-export const DefaultFontSize14 = '14';
-export const DefaultFontSize16 = '16';
-export const DefaultFontSize18 = '18';
-export const DefaultFontSize24 = '24';
-export const DefaultFontSize29 = '29';
-export const DefaultFontSize35 = '35';
-export const DefaultFontSize42 = '42';
-export const DefaultLetterSpacingNone = 'none';
-export const DefaultParagraphSpacing0 = '0';
-export const DefaultParagraphSpacing8 = '8';
-export const DefaultTextCaseNone = 'none';
-export const DefaultTextDecorationNone = 'none';
-export const DefaultTextDecorationUnderline = 'underline';
-export const DefaultDefaultColorsRedActual = '#e40521';
-export const DefaultDefaultColorsBlueClickable = '#136cac';
-export const DefaultDefaultColorsBlueHoverClickable = '#004f88';
-export const DefaultDefaultColorsGreyMediumInactive = '#808080';
-export const DefaultDefaultColorsTextColorsGreyXDark = '#272727';
-export const DefaultDefaultColorsTextColorsGreyDark = '#545352';
-export const DefaultDefaultColorsBackgroundColorsWhite = '#ffffff';
-export const DefaultDefaultColorsBackgroundColorsGreyXLight = '#f0f0f0';
-export const DefaultDefaultColorsBackgroundColorsGreyXDarkBgModal = '#27272780';
-export const DefaultDefaultColorsBackgroundColorsBlueHoverEquivalence =
-  '#e8f1f7';
-export const DefaultDefaultColorsBackgroundColorsBlueHoverOpacity12 =
-  '#136cac1f';
-export const DefaultDefaultColorsBorderColorsGreyLightDefaultBorder = '#cbcbcb';
-export const DefaultDefaultColorsNotificationColorsBlueInfo = '#1d91c3';
-export const DefaultDefaultColorsNotificationColorsGreenSuccess = '#23956d';
-export const DefaultDefaultColorsNotificationColorsOrangeWarning = '#e46221';
-export const DefaultDefaultColorsNotificationColorsRedError = '#b80025';
-export const DefaultDefaultColorsSecondaryColorsBlueDark = '#0d2c54';
-export const DefaultDefaultColorsSecondaryColorsBlueMedium = '#3d5a80';
-export const DefaultDefaultColorsSecondaryColorsBlueLight = '#7fdcea';
-export const DefaultDefaultColorsSecondaryColorsGreenDark = '#125e42';
-export const DefaultDefaultColorsSecondaryColorsGreenMedium = '#1f8461';
-export const DefaultDefaultColorsSecondaryColorsGreen = '#5dca8b';
-export const DefaultDefaultColorsSecondaryColorsGreenLight = '#bad07a';
-export const DefaultDefaultColorsSecondaryColorsBrown = '#6f2902';
-export const DefaultDefaultColorsSecondaryColorsBrownLight = '#b65700';
-export const DefaultDefaultColorsSecondaryColorsOrangeLight = '#f59b00';
-export const DefaultDefaultColorsSecondaryColorsYellow = '#f9d25e';
-export const DefaultDefaultColorsSecondaryColorsPurpleDark = '#530d48';
-export const DefaultDefaultColorsSecondaryColorsPurple = '#831443';
-export const DefaultDefaultColorsSecondaryColorsPink = '#ca1e5c';
-export const DefaultDefaultColorsSecondaryColorsPinkLight = '#fd6972';
-export const EpAppShadowAllContent = {
-  color: '#dedada66',
-  type: 'dropShadow',
-  x: '0',
-  y: '4',
-  blur: '15',
-  spread: '0',
-};
-export const EpAppShadowButtomMenu = {
-  color: '#dedada66',
-  type: 'dropShadow',
-  x: '0',
-  y: '-4',
-  blur: '15',
-  spread: '0',
-};
-export const EpBorderRadius4 = '4';
-export const EpBorderRadius8 = '8';
-export const EpBorderRadius16 = '16';
-export const EpBorderRadius24 = '24';
-export const EpSpacingXxs = '4';
-export const EpSpacingXs = '8';
-export const EpSpacingMd = '16';
-export const EpSpacingLg = '24';
-export const EpSpacingXl = '32';
-export const EpSpacingXxl = '40';
-export const EpSpacingXxxl = '72';
-export const EpColorsRed = '#e11c31';
-export const EpColorsRedHover = '#b61425';
-export const EpColorsGreenBlue = '#159f9f';
-export const EpColorsGreenBlueHover = '#128888';
-export const EpColorsGreyMediumInactive = '#808080';
-export const EpColorsBlack = '#161616';
-export const EpColorsGreyDark = '#676767';
-export const EpColorsWhite = '#ffffff';
-export const EpColorsRedLight = '#fff7f5';
-export const EpColorsGreenLight = '#f2f8f8';
-export const EpColorsGreyDarkBgModal = '#67676780';
-export const EpColorsGreyLightBorder = '#cbcbcb';
-export const EpColorsBlueInfo = '#1d91c3';
-export const EpColorsGreenSucces = '#23956d';
-export const EpColorsOrangeWarning = '#e46221';
-export const EpColorsRedError = '#b80025';
-export const EpColorsGrey = '#acc1cc';
-export const EpColorsRedPastel = '#feefeb';
-export const EpColorsGreenPastel = '#e4f1f1';
-export const EpColorsGreyPastel = '#eaf2f6';
-export const EpSizingXs = '8';
-export const EpSizingSm = '12';
-export const EpSizingMd = '16';
-export const EpSizingLg = '24';
-export const EpSizingXl = '32';
-export const EpSizingXxl = '40';
-export const EpSizingXxxl = '72';
-export const EpFontFamiliesManrope = 'Manrope';
-export const EpFontFamiliesOpenSans = 'Open Sans';
-export const EpLineHeights14 = '14';
-export const EpLineHeights16 = '16';
-export const EpLineHeights20 = '20';
-export const EpLineHeights24 = '24';
-export const EpLineHeights26 = '26';
-export const EpLineHeights34 = '34';
-export const EpFontWeightsManrope700 = 'Bold';
-export const EpFontWeightsManrope500 = 'Medium';
-export const EpFontWeightsOpenSans400 = 'Regular';
-export const EpFontWeightsOpenSans600 = 'SemiBold';
-export const EpFontWeightsOpenSans700 = 'Bold';
-export const EpFontSize10 = '10';
-export const EpFontSize12 = '12';
-export const EpFontSize14 = '14';
-export const EpFontSize16 = '16';
-export const EpFontSize18 = '18';
-export const EpFontSize24 = '24';
-export const EpLetterSpacingNone = 'none';
-export const EpParagraphSpacing0 = '0';
-export const EpParagraphSpacing8 = '8';
-export const EpTextCaseNone = 'none';
-export const EpTextDecorationNone = 'none';
-export const EpTextDecorationUnderline = 'underline';

package/src/useMaterialThemeTokens.ts

@@ -1,218 +0,0 @@
-import { useMemo } from 'react';
-
-import { getFontFamilies, getMuiPalette } from './helpers/theme';
-import { MuiTokens, Theme } from './interfaces/theme';
-import * as tokens from './themes/tokens';
-
-interface useMaterialThemeTokensReturnType {
-  muiTokens: MuiTokens;
-}
-
-const useMaterialThemeTokens = (
-  themeName: Theme,
-): useMaterialThemeTokensReturnType => {
-  const fontWeights = {
-    RobotoBold: 700,
-    RobotoMedium: 500,
-    RobotoRegular: 400,
-  };
-  const designTokens = tokens as Record<string, string | number | unknown>;
-
-  const h1 = {
-    fontWeight: fontWeights.RobotoBold,
-    lineHeight: designTokens[`${themeName}LineHeights41`] + 'px',
-    fontSize: designTokens[`${themeName}FontSize35`] + 'px',
-    letterSpacing: designTokens[`${themeName}LetterSpacingNone`],
-    paragraphSpacing: designTokens[`${themeName}ParagraphSpacing0`] + 'px',
-    textCase: designTokens[`${themeName}TextCaseNone`],
-    textDecoration: designTokens[`${themeName}TextDecorationNone`],
-  };
-  const h2 = {
-    fontWeight: fontWeights.RobotoMedium,
-    lineHeight: designTokens[`${themeName}LineHeights34`] + 'px',
-    fontSize: designTokens[`${themeName}FontSize29`] + 'px',
-    letterSpacing: designTokens[`${themeName}LetterSpacingNone`],
-    paragraphSpacing: designTokens[`${themeName}ParagraphSpacing0`] + 'px',
-    textCase: designTokens[`${themeName}TextCaseNone`],
-    textDecoration: designTokens[`${themeName}TextDecorationNone`],
-  };
-  const h3 = {
-    fontWeight: fontWeights.RobotoRegular,
-    lineHeight: designTokens[`${themeName}LineHeights28`] + 'px',
-    fontSize: designTokens[`${themeName}FontSize24`] + 'px',
-    letterSpacing: designTokens[`${themeName}LetterSpacingNone`],
-    paragraphSpacing: designTokens[`${themeName}ParagraphSpacing0`] + 'px',
-    textCase: designTokens[`${themeName}TextCaseNone`],
-    textDecoration: designTokens[`${themeName}TextDecorationNone`],
-  };
-  const h4 = {
-    fontWeight: fontWeights.RobotoMedium,
-    lineHeight: designTokens[`${themeName}LineHeights21`] + 'px',
-    fontSize: designTokens[`${themeName}FontSize18`] + 'px',
-    letterSpacing: designTokens[`${themeName}LetterSpacingNone`],
-    paragraphSpacing: designTokens[`${themeName}ParagraphSpacing0`] + 'px',
-    textCase: designTokens[`${themeName}TextCaseNone`],
-    textDecoration: designTokens[`${themeName}TextDecorationNone`],
-  };
-  const body1 = {
-    fontWeight: fontWeights.RobotoRegular,
-    lineHeight: designTokens[`${themeName}LineHeights18`] + 'px',
-    fontSize: designTokens[`${themeName}FontSize14`] + 'px',
-    letterSpacing: designTokens[`${themeName}LetterSpacingNone`],
-    paragraphSpacing: designTokens[`${themeName}ParagraphSpacing8`] + 'px',
-    textCase: designTokens[`${themeName}TextCaseNone`],
-    textDecoration: designTokens[`${themeName}TextDecorationNone`],
-  };
-  const body2 = {
-    fontWeight: fontWeights.RobotoRegular,
-    lineHeight: designTokens[`${themeName}LineHeights16`] + 'px',
-    fontSize: designTokens[`${themeName}FontSize13`] + 'px',
-    letterSpacing: designTokens[`${themeName}LetterSpacingNone`],
-    paragraphSpacing: designTokens[`${themeName}ParagraphSpacing8`] + 'px',
-    textCase: designTokens[`${themeName}TextCaseNone`],
-    textDecoration: designTokens[`${themeName}TextDecorationNone`],
-  };
-
-  const muiTokensObject = {
-    components: {
-      MuiTypography: {
-        defaultProps: {
-          variantMapping: {
-            subtitle1: 'body1',
-            subtitle2: 'body2',
-          },
-        },
-      },
-    },
-    typography: {
-      fontFamily: getFontFamilies(themeName).join(','),
-      bigNumber: {
-        fontWeight: fontWeights.RobotoBold,
-        lineHeight: designTokens[`${themeName}LineHeights49`] + 'px',
-        fontSize: designTokens[`${themeName}FontSize42`] + 'px',
-        letterSpacing: designTokens[`${themeName}LetterSpacingNone`],
-        paragraphSpacing: designTokens[`${themeName}ParagraphSpacing0`] + 'px',
-        textCase: designTokens[`${themeName}TextCaseNone`],
-        textDecoration: designTokens[`${themeName}TextDecorationNone`],
-      },
-      h1,
-      header1: h1, // Do not used this, use h1 instead
-      h2,
-      header2: h2, // Do not used this, use h2 instead
-      h3,
-      header3: h3, // Do not used this, use h3 instead
-      h4,
-      header4: h4, // Do not used this, use h4 instead
-      body1,
-      body1Regular: body1, // Do not used this, use body1 instead
-      body1Medium: {
-        fontWeight: fontWeights.RobotoMedium,
-        lineHeight: designTokens[`${themeName}LineHeights18`] + 'px',
-        fontSize: designTokens[`${themeName}FontSize14`] + 'px',
-        letterSpacing: designTokens[`${themeName}LetterSpacingNone`],
-        paragraphSpacing: designTokens[`${themeName}ParagraphSpacing8`] + 'px',
-        textCase: designTokens[`${themeName}TextCaseNone`],
-        textDecoration: designTokens[`${themeName}TextDecorationNone`],
-      },
-      body1Bold: {
-        fontWeight: fontWeights.RobotoBold,
-        lineHeight: designTokens[`${themeName}LineHeights18`] + 'px',
-        fontSize: designTokens[`${themeName}FontSize14`] + 'px',
-        letterSpacing: designTokens[`${themeName}LetterSpacingNone`],
-        paragraphSpacing: designTokens[`${themeName}ParagraphSpacing8`] + 'px',
-        textCase: designTokens[`${themeName}TextCaseNone`],
-        textDecoration: designTokens[`${themeName}TextDecorationNone`],
-      },
-      body2,
-      body2Regular: body2,
-      body2Medium: {
-        fontWeight: fontWeights.RobotoMedium,
-        lineHeight: designTokens[`${themeName}LineHeights16`] + 'px',
-        fontSize: designTokens[`${themeName}FontSize13`] + 'px',
-        letterSpacing: designTokens[`${themeName}LetterSpacingNone`],
-        paragraphSpacing: designTokens[`${themeName}ParagraphSpacing8`] + 'px',
-        textCase: designTokens[`${themeName}TextCaseNone`],
-        textDecoration: designTokens[`${themeName}TextDecorationNone`],
-      },
-      body2Bold: {
-        fontWeight: fontWeights.RobotoBold,
-        lineHeight: designTokens[`${themeName}LineHeights16`] + 'px',
-        fontSize: designTokens[`${themeName}FontSize13`] + 'px',
-        letterSpacing: designTokens[`${themeName}LetterSpacingNone`],
-        paragraphSpacing: designTokens[`${themeName}ParagraphSpacing8`] + 'px',
-        textCase: designTokens[`${themeName}TextCaseNone`],
-        textDecoration: designTokens[`${themeName}TextDecorationNone`],
-      },
-      caption: {
-        fontWeight: fontWeights.RobotoRegular,
-        lineHeight: designTokens[`${themeName}LineHeights12`] + 'px',
-        fontSize: designTokens[`${themeName}FontSize11`] + 'px',
-        letterSpacing: designTokens[`${themeName}LetterSpacingNone`],
-        paragraphSpacing: designTokens[`${themeName}ParagraphSpacing0`] + 'px',
-        textCase: designTokens[`${themeName}TextCaseNone`],
-        textDecoration: designTokens[`${themeName}TextDecorationNone`],
-      },
-      buttonNotif: {
-        fontWeight: fontWeights.RobotoBold,
-        lineHeight: designTokens[`${themeName}LineHeights18`] + 'px',
-        fontSize: designTokens[`${themeName}FontSize14`] + 'px',
-        letterSpacing: designTokens[`${themeName}LetterSpacingNone`],
-        paragraphSpacing: designTokens[`${themeName}ParagraphSpacing0`] + 'px',
-        textCase: designTokens[`${themeName}TextCaseNone`],
-        textDecoration: designTokens[`${themeName}TextDecorationNone`],
-      },
-      link1: {
-        fontWeight: fontWeights.RobotoBold,
-        lineHeight: designTokens[`${themeName}LineHeights18`] + 'px',
-        fontSize: designTokens[`${themeName}FontSize14`] + 'px',
-        letterSpacing: designTokens[`${themeName}LetterSpacingNone`],
-        paragraphSpacing: designTokens[`${themeName}ParagraphSpacing0`] + 'px',
-        textCase: designTokens[`${themeName}TextCaseNone`],
-        textDecoration: designTokens[`${themeName}TextDecorationUnderline`],
-      },
-      link2: {
-        fontWeight: fontWeights.RobotoBold,
-        lineHeight: designTokens[`${themeName}LineHeights16`] + 'px',
-        fontSize: designTokens[`${themeName}FontSize13`] + 'px',
-        letterSpacing: designTokens[`${themeName}LetterSpacingNone`],
-        paragraphSpacing: designTokens[`${themeName}ParagraphSpacing0`] + 'px',
-        textCase: designTokens[`${themeName}TextCaseNone`],
-        textDecoration: designTokens[`${themeName}TextDecorationUnderline`],
-      },
-      fontWeightRegular: fontWeights.RobotoRegular,
-      fontWeightMedium: fontWeights.RobotoMedium,
-      fontWeightBold: fontWeights.RobotoBold,
-    },
-    breakpoints: {
-      values: {
-        xs: 0,
-        sm: 600,
-        md: 900,
-        lg: 1200,
-        xl: 1536,
-      },
-    },
-    zIndex: {
-      mobileStepper: 1000,
-      fab: 1050,
-      speedDial: 1050,
-      appBar: 1100,
-      drawer: 1200,
-      modal: 1300,
-      snackbar: 1400,
-      tooltip: 1500,
-    },
-    palette: getMuiPalette(themeName),
-  };
-
-  const muiTokens = useMemo(
-    () => ({
-      ...muiTokensObject,
-    }),
-    [muiTokensObject],
-  );
-
-  return { muiTokens };
-};
-
-export default useMaterialThemeTokens;