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

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

@@ -0,0 +1,242 @@
+import { ColorPartial } from '@mui/material/styles/createPalette';
+export type Theme = 'Interne' | 'Externe';
+export interface ThemeValue {
+    value: string;
+    type: string;
+}
+export type DefaultColors = {
+    [key: string]: ThemeValue;
+};
+export interface ThemeStructure {
+    'DFLib-Variables/Interne'?: TokenStructure;
+    'DFLib-Variables/Interne/defaultColors'?: CustomColors;
+    'DFLib-Variables/Externe'?: TokenStructure;
+}
+export interface PaletteColors {
+    primary: ColorCategory;
+    secondary: ColorCategory;
+    error: ColorCategory;
+    warning: ColorCategory;
+    success: ColorCategory;
+    infos: ColorCategory;
+    text: TextColors;
+    background: Background;
+    border: Border;
+    action: {
+        hoverOpacity: ThemeValue;
+    };
+}
+export interface TokenStructure {
+    palette?: PaletteColors;
+    Typography?: TypographyTokens;
+    spacing?: SpacingTokens;
+    radius?: RadiusTokens;
+}
+export interface TextDefaultColors {
+    greyDark?: ThemeValue;
+}
+export interface BackgroundDefaultColors {
+    white?: ThemeValue;
+    greyXLight?: ThemeValue;
+    greyXDarkBgModal?: ThemeValue;
+    blueHoverEquivalence?: ThemeValue;
+    blueHoverOpacity12?: ThemeValue;
+}
+export interface BorderDefaultColors {
+    greyLightDefaultBorder?: ThemeValue;
+}
+export interface NotificationDefaultColors {
+    blueInfo?: ThemeValue;
+    greenSuccess?: ThemeValue;
+    orangeWarning?: ThemeValue;
+    redError?: ThemeValue;
+}
+export interface SecondaryDefaultColors {
+    blueDark?: ThemeValue;
+    blueMedium?: ThemeValue;
+    blueLight?: ThemeValue;
+    greenDark?: ThemeValue;
+    greenMedium?: ThemeValue;
+    green?: ThemeValue;
+    greenLight?: ThemeValue;
+    brown?: ThemeValue;
+    brownLight?: ThemeValue;
+    orangeLight?: ThemeValue;
+    yellow?: ThemeValue;
+    purpleDark?: ThemeValue;
+    purple?: ThemeValue;
+    pink?: ThemeValue;
+    pinkLight?: ThemeValue;
+}
+export interface CustomColors {
+    redActual?: ThemeValue;
+    blueClickable?: ThemeValue;
+    blueHoverClickable?: ThemeValue;
+    blueHoverOpacity12?: ThemeValue;
+    greyMediumInactive?: ThemeValue;
+    greyXDark?: ThemeValue;
+    textColors: TextDefaultColors;
+    backgroundColors: BackgroundDefaultColors;
+    borderColors: BorderDefaultColors;
+    notificationColors: NotificationDefaultColors;
+    secondaryColors: SecondaryDefaultColors;
+}
+export interface ColorCategory {
+    main?: ThemeValue;
+    mainChannel?: ThemeValue;
+    light?: ThemeValue;
+    'light 2'?: ThemeValue;
+    'light 3'?: ThemeValue;
+    lightChannel?: ThemeValue;
+    dark?: ThemeValue;
+    'dark 2'?: ThemeValue;
+    'dark 3'?: ThemeValue;
+    darkChannel?: ThemeValue;
+    'secondary contrast text'?: ThemeValue;
+    'primary contrast text'?: ThemeValue;
+}
+export interface TextColors {
+    primary: ThemeValue;
+    secondary: ThemeValue;
+    disabled: ThemeValue;
+    dark: ThemeValue;
+}
+export interface Background {
+    default: ThemeValue;
+    grey: ThemeValue;
+}
+export interface Border {
+    default: ThemeValue;
+    grey: ThemeValue;
+}
+export interface TypographyToken {
+    fontFamily: {
+        value: string;
+        type: string;
+    };
+    fontSize: {
+        value: string;
+        type: string;
+    };
+    LineHeight: {
+        value: string;
+        type: string;
+    };
+    fontWeight: {
+        value: string;
+        type: string;
+    };
+}
+export interface TypographyTokens {
+    h1: TypographyToken;
+    h2: TypographyToken;
+    h3: TypographyToken;
+    h4: TypographyToken;
+    h5: TypographyToken;
+    h6: TypographyToken;
+    subtitle1: TypographyToken;
+    subtitle2: TypographyToken;
+    body1: TypographyToken;
+    body2: TypographyToken;
+    button: TypographyToken;
+    caption: TypographyToken;
+}
+export interface SpacingTokens {
+    xxs: ThemeValue;
+    xs: ThemeValue;
+    sm: ThemeValue;
+    md: ThemeValue;
+    lg: ThemeValue;
+    xl: ThemeValue;
+    xxl: ThemeValue;
+}
+export interface RadiusTokens {
+    small: ThemeValue;
+    medium: ThemeValue;
+    large: ThemeValue;
+    xLarge: ThemeValue;
+}
+export type PaletteColorOptions = BasicPaletteColorOptions | ColorPartial;
+export interface BasicPaletteColorOptions {
+    light?: string;
+    lightChannel?: string;
+    light2?: string;
+    light3?: string;
+    main: string;
+    mainChannel?: string;
+    dark?: string;
+    darkChannel?: string;
+    dark2?: string;
+    dark3?: string;
+    contrastText?: string;
+}
+export interface TextPaletteColorOptions {
+    secondary?: string;
+    primary?: string;
+    dark?: string;
+    disabled?: string;
+}
+export interface BackgroundPaletteColorOptions {
+    default?: string;
+    paper?: string;
+    grey?: string;
+}
+export interface BorderPaletteColorOptions {
+    default?: string;
+    grey?: string;
+}
+export interface PaletteDefaultColors {
+    redActual?: string;
+    blueClickable?: string;
+    blueHoverClickable?: string;
+    greyMediumInactive?: string;
+    greyXDark?: string;
+    greyDark?: string;
+    white?: string;
+    greyXLight?: string;
+    greyXDarkBgModal?: string;
+    blueHoverEquivalence?: string;
+    blueHoverOpacity12?: string;
+    greyLightDefaultBorder?: string;
+    blueInfo?: string;
+    greenSuccess?: string;
+    orangeWarning?: string;
+    redError?: string;
+    blueDark?: string;
+    blueMedium?: string;
+    blueLight?: string;
+    greenDark?: string;
+    greenMedium?: string;
+    green?: string;
+    greenLight?: string;
+    brown?: string;
+    brownLight?: string;
+    orangeLight?: string;
+    yellow?: string;
+    purpleDark?: string;
+    purple?: string;
+    pink?: string;
+    pinkLight?: string;
+}
+export interface PaletteDS extends PaletteDefaultColors {
+    primary?: BasicPaletteColorOptions;
+    secondary?: BasicPaletteColorOptions;
+    error?: BasicPaletteColorOptions;
+    warning?: BasicPaletteColorOptions;
+    success?: BasicPaletteColorOptions;
+    info?: BasicPaletteColorOptions;
+    text?: TextPaletteColorOptions;
+    border?: BorderPaletteColorOptions;
+}
+export interface MuiTokens {
+    palette: any;
+    typography: any;
+}
+export type SpacingArgument = number | string;
+export interface Spacing {
+    (): string;
+    (_value: SpacingArgument): string;
+    (_topBottom: SpacingArgument, _rightLeft: SpacingArgument): string;
+    (_top: SpacingArgument, _rightLeft: SpacingArgument, _bottom: SpacingArgument): string;
+    (_top: SpacingArgument, _right: SpacingArgument, _bottom: SpacingArgument, _left: SpacingArgument): string;
+}

package/dist/types/styled/Accordion.d.ts

@@ -0,0 +1,4 @@
+import { Components } from '@mui/material';
+import { CustomColors, Spacing, TokenStructure } from '@/interfaces/theme.interface';
+declare const Accordion: (spacing: Spacing, tokens: TokenStructure & CustomColors) => Components<unknown>;
+export default Accordion;

package/dist/types/styled/Alert.d.ts

@@ -0,0 +1,4 @@
+import { Components } from '@mui/material';
+import { CustomColors, Spacing, TokenStructure } from '@/interfaces/theme.interface';
+declare const Alert: (spacing: Spacing, tokens: TokenStructure & CustomColors) => Components<unknown>;
+export default Alert;

package/dist/types/styled/Autocomplete.d.ts

@@ -0,0 +1,4 @@
+import { Components } from '@mui/material';
+import { CustomColors, Spacing, TokenStructure } from '@/interfaces/theme.interface';
+declare const Autocomplete: (_spacing: Spacing, _tokens: TokenStructure & CustomColors) => Components<unknown>;
+export default Autocomplete;

package/dist/types/styled/Breadcrumbs.d.ts

@@ -0,0 +1,4 @@
+import { Components } from '@mui/material';
+import { CustomColors, Spacing, TokenStructure } from '@/interfaces/theme.interface';
+declare const Breadcrumbs: (spacing: Spacing, _tokens: TokenStructure & CustomColors) => Components<unknown>;
+export default Breadcrumbs;

package/dist/types/styled/Button.d.ts

@@ -0,0 +1,4 @@
+import { Components } from '@mui/material';
+import { CustomColors, Spacing, TokenStructure } from '@/interfaces/theme.interface';
+declare const Button: (_spacing: Spacing, tokens: TokenStructure & CustomColors) => Components<unknown>;
+export default Button;

package/dist/types/styled/Checkbox.d.ts

@@ -0,0 +1,4 @@
+import { Components } from '@mui/material';
+import { CustomColors, Spacing, TokenStructure } from '@/interfaces/theme.interface';
+declare const Checkbox: (spacing: Spacing, tokens: TokenStructure & CustomColors) => Components<unknown>;
+export default Checkbox;

package/dist/types/styled/Chip.d.ts

@@ -0,0 +1,4 @@
+import { Components } from '@mui/material';
+import { CustomColors, Spacing, TokenStructure } from '@/interfaces/theme.interface';
+declare const Chip: (spacing: Spacing, tokens: TokenStructure & CustomColors) => Components<unknown>;
+export default Chip;

package/dist/types/styled/Divider.d.ts

@@ -0,0 +1,4 @@
+import { Components } from '@mui/material';
+import { CustomColors, Spacing, TokenStructure } from '@/interfaces/theme.interface';
+declare const Divider: (_spacing: Spacing, tokens: TokenStructure & CustomColors) => Components<unknown>;
+export default Divider;

package/dist/types/styled/FormHelperText.d.ts

@@ -0,0 +1,4 @@
+import { Components } from '@mui/material';
+import { CustomColors, Spacing, TokenStructure } from '@/interfaces/theme.interface';
+declare const FormHelperText: (_spacing: Spacing, tokens: TokenStructure & CustomColors) => Components<unknown>;
+export default FormHelperText;

package/dist/types/styled/FormLabel.d.ts

@@ -0,0 +1,4 @@
+import { Components } from '@mui/material';
+import { CustomColors, Spacing, TokenStructure } from '@/interfaces/theme.interface';
+declare const FormLabel: (_spacing: Spacing, tokens: TokenStructure & CustomColors) => Components<unknown>;
+export default FormLabel;

package/dist/types/styled/IconButton.d.ts

@@ -0,0 +1,4 @@
+import { Components } from '@mui/material';
+import { CustomColors, Spacing, TokenStructure } from '@/interfaces/theme.interface';
+declare const IconButton: (spacing: Spacing, tokens: TokenStructure & CustomColors) => Components<unknown>;
+export default IconButton;

package/dist/types/styled/InputLabel.d.ts

@@ -0,0 +1,4 @@
+import { Components } from '@mui/material';
+import { CustomColors, Spacing, TokenStructure } from '@/interfaces/theme.interface';
+declare const InputLabel: (spacing: Spacing, tokens: TokenStructure & CustomColors) => Components<unknown>;
+export default InputLabel;

package/dist/types/styled/MenuItem.d.ts

@@ -0,0 +1,4 @@
+import { Components } from '@mui/material';
+import { CustomColors, Spacing, TokenStructure } from '@/interfaces/theme.interface';
+declare const MenuItem: (spacing: Spacing, tokens: TokenStructure & CustomColors) => Components<unknown>;
+export default MenuItem;

package/dist/types/styled/OutlinedInput.d.ts

@@ -0,0 +1,4 @@
+import { Components } from '@mui/material';
+import { CustomColors, Spacing, TokenStructure } from '@/interfaces/theme.interface';
+declare const OutlinedInput: (spacing: Spacing, tokens: TokenStructure & CustomColors) => Components<unknown>;
+export default OutlinedInput;

package/dist/types/styled/PaginationItem.d.ts

@@ -0,0 +1,4 @@
+import { Components } from '@mui/material';
+import { CustomColors, Spacing, TokenStructure } from '@/interfaces/theme.interface';
+declare const PaginationItem: (_spacing: Spacing, tokens: TokenStructure & CustomColors) => Components<unknown>;
+export default PaginationItem;

package/dist/types/styled/Radio.d.ts

@@ -0,0 +1,4 @@
+import { Components } from '@mui/material';
+import { CustomColors, Spacing, TokenStructure } from '@/interfaces/theme.interface';
+declare const Radio: (spacing: Spacing, tokens: TokenStructure & CustomColors) => Components<unknown>;
+export default Radio;

package/dist/types/styled/Select.d.ts

@@ -0,0 +1,4 @@
+import { Components } from '@mui/material';
+import { CustomColors, Spacing, TokenStructure } from '@/interfaces/theme.interface';
+declare const Select: (spacing: Spacing, tokens: TokenStructure & CustomColors) => Components<unknown>;
+export default Select;

package/dist/types/styled/Switch.d.ts

@@ -0,0 +1,4 @@
+import { Components } from '@mui/material';
+import { CustomColors, Spacing, TokenStructure } from '@/interfaces/theme.interface';
+declare const Switch: (_spacing: Spacing, tokens: TokenStructure & CustomColors) => Components<unknown>;
+export default Switch;

package/dist/types/styled/Table.d.ts

@@ -0,0 +1,4 @@
+import { Components } from '@mui/material';
+import { CustomColors, Spacing, TokenStructure } from '@/interfaces/theme.interface';
+declare const Table: (spacing: Spacing, tokens: TokenStructure & CustomColors) => Components<unknown>;
+export default Table;

package/dist/types/styled/TextField.d.ts

@@ -0,0 +1,4 @@
+import { Components } from '@mui/material';
+import { CustomColors, Spacing, TokenStructure } from '@/interfaces/theme.interface';
+declare const TextField: (spacing: Spacing, tokens: TokenStructure & CustomColors) => Components<unknown>;
+export default TextField;

package/dist/types/styled/Typography.d.ts

@@ -0,0 +1,4 @@
+import { Components } from '@mui/material';
+import { Spacing } from '@/interfaces/theme.interface';
+declare const Typography: (_spacing: Spacing) => Components<unknown>;
+export default Typography;

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

@@ -0,0 +1,4 @@
+import { PaletteMode, ThemeOptions } from '@mui/material';
+import { Theme } from '@/interfaces/theme.interface';
+declare const theme: (themeName: Theme, mode?: PaletteMode) => ThemeOptions;
+export default theme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@groupeactual/design-tokens",
-  "version": "1.7.10",
+  "version": "2.0.0-beta.1",
   "type": "module",
   "description": "A simple library to manage design tokens",
   "main": "dist/cjs/index.js",
@@ -11,29 +11,37 @@
     "src"
   ],
   "devDependencies": {
-    "prettier": "^3.4.1",
-    "eslint": "^9.16.0",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint": "^9.24.0",
+    "eslint-config-prettier": "^10.1.2",
     "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-jest": "^28.9.0",
+    "eslint-plugin-jest": "^28.11.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-n": "^17.14.0",
-    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-n": "^17.17.0",
+    "eslint-plugin-prettier": "^5.2.6",
     "eslint-plugin-promise": "^7.2.1",
-    "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "sass": "^1.81.0",
-    "sass-loader": "^16.0.3",
-    "style-dictionary": "^4.2.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "prettier": "^3.5.3",
+    "sass": "^1.86.3",
+    "sass-loader": "^16.0.5",
     "style-loader": "^4.0.0",
     "token-transformer": "^0.0.33",
-    "tslib": "^2.8.1"
+    "tslib": "^2.8.1",
+    "typescript": "5.7.3"
+  },
+  "dependencies": {
+    "@mui/material": "7.0.2",
+    "@mui/system": "7.0.2",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0"
   },
   "scripts": {
     "build": "rollup -c",
     "build:watch": "rollup --bundleConfigAsCjs -c -w",
     "dev": "npm run build:watch",
     "eslint": "eslint --config \"eslint.config.js\" --color \".\" --max-warnings=0",
-    "lint": "npm run eslint"
+    "lint": "npm run eslint",
+    "prettier:check": "prettier --check .",
+    "prettier:format": "prettier --write ."
   }
 }

package/src/helpers/theme.helper.ts

@@ -0,0 +1,229 @@
+import { PaletteMode, ThemeOptions, createTheme } from '@mui/material';
+
+import {
+  BackgroundDefaultColors,
+  BasicPaletteColorOptions,
+  BorderDefaultColors,
+  ColorCategory,
+  CustomColors,
+  DefaultColors,
+  NotificationDefaultColors,
+  PaletteDefaultColors,
+  SecondaryDefaultColors,
+  TextDefaultColors,
+  Theme,
+  ThemeStructure,
+  ThemeValue,
+  TokenStructure,
+  TypographyToken,
+} from '@/interfaces/theme.interface';
+import Accordion from '@/styled/Accordion';
+import Alert from '@/styled/Alert';
+import Autocomplete from '@/styled/Autocomplete';
+import Breadcrumbs from '@/styled/Breadcrumbs';
+import Button from '@/styled/Button';
+import Checkbox from '@/styled/Checkbox';
+import Chip from '@/styled/Chip';
+import Divider from '@/styled/Divider';
+import FormHelperText from '@/styled/FormHelperText';
+import FormLabel from '@/styled/FormLabel';
+import IconButton from '@/styled/IconButton';
+import InputLabel from '@/styled/InputLabel';
+import MenuItem from '@/styled/MenuItem';
+import OutlinedInput from '@/styled/OutlinedInput';
+import PaginationItem from '@/styled/PaginationItem';
+import Radio from '@/styled/Radio';
+import Select from '@/styled/Select';
+import Switch from '@/styled/Switch';
+import Table from '@/styled/Table';
+import TextField from '@/styled/TextField';
+import Typography from '@/styled/Typography';
+
+const convertPaletteColor = (
+  colorCategory: ColorCategory,
+): BasicPaletteColorOptions => {
+  return {
+    main: colorCategory.main?.value || '',
+    mainChannel: colorCategory.mainChannel?.value || '',
+    light: colorCategory.light?.value,
+    light2: colorCategory['light 2']?.value || '',
+    light3: colorCategory['light 3']?.value || '',
+    lightChannel: colorCategory.lightChannel?.value || '',
+    dark: colorCategory.dark?.value || '',
+    dark2: colorCategory['dark 2']?.value || '',
+    dark3: colorCategory['dark 3']?.value || '',
+    darkChannel: colorCategory.darkChannel?.value || '',
+    contrastText:
+      colorCategory['primary contrast text']?.value ||
+      colorCategory['secondary contrast text']?.value ||
+      '#ffffff',
+  };
+};
+
+const convertTypographyVariant = (variant: TypographyToken | undefined) => {
+  return {
+    fontFamily: variant?.fontFamily.value,
+    fontSize: variant?.fontSize.value,
+    lineHeight: variant?.LineHeight.value,
+    fontWeight: Number(variant?.fontWeight.value),
+  };
+};
+
+export function isColor(colorValue: DefaultColors | ThemeValue): boolean {
+  if (colorValue?.value && colorValue?.type) {
+    return true;
+  }
+
+  return false;
+}
+
+const convertCustomColors = (
+  colors:
+    | CustomColors
+    | TextDefaultColors
+    | BackgroundDefaultColors
+    | BorderDefaultColors
+    | NotificationDefaultColors
+    | SecondaryDefaultColors,
+) => {
+  return Object.keys(colors).reduce((acc, key) => {
+    const colorValue = colors[key];
+
+    if (isColor(colorValue)) {
+      if (colorValue?.value) {
+        acc[key] = colorValue.value;
+      }
+    }
+
+    return acc;
+  }, {} as PaletteDefaultColors);
+};
+
+const getTheme = (
+  themeName: Theme,
+  mode: PaletteMode,
+  themesTokens: ThemeStructure,
+): ThemeOptions => {
+  const basicTokens: TokenStructure | undefined =
+    themesTokens[`DFLib-Variables/${themeName}`];
+  const customColors: CustomColors | undefined =
+    themesTokens[`DFLib-Variables/${themeName}/defaultColors`];
+
+  if (!basicTokens || !customColors) {
+    throw new Error(`Theme ${themeName} not found`);
+  }
+
+  const tokens: TokenStructure & CustomColors = {
+    ...basicTokens,
+    ...customColors,
+  };
+
+  const { spacing } = createTheme({
+    spacing: (factor: number) =>
+      `${factor * Number(tokens.spacing?.xxs.value)}px`,
+  });
+
+  // * TODO mainChannel, lightChannel, darkChannel get first 5 char "136cac" and convert to rgba color but without rgba function (ex: 105 15 105)
+
+  return {
+    palette: {
+      mode: mode,
+      primary: tokens.palette
+        ? convertPaletteColor(tokens.palette.primary)
+        : {},
+      secondary: tokens.palette
+        ? convertPaletteColor(tokens.palette.secondary)
+        : {},
+      error: tokens.palette ? convertPaletteColor(tokens.palette.error) : {},
+      warning: tokens.palette
+        ? convertPaletteColor(tokens.palette.warning)
+        : {},
+      success: tokens.palette
+        ? convertPaletteColor(tokens.palette.success)
+        : {},
+      info: tokens.palette ? convertPaletteColor(tokens.palette.infos) : {},
+      text: tokens.palette
+        ? {
+            primary: tokens.palette.text.primary.value,
+            secondary: tokens.palette.text.secondary.value,
+            dark: tokens.palette.text.dark.value,
+            disabled: tokens.palette.text.disabled.value,
+          }
+        : {},
+      background: tokens.palette
+        ? {
+            default: tokens.palette.background.default.value,
+            paper: tokens.palette.background.default.value,
+            grey: tokens.palette.background.grey.value,
+          }
+        : {},
+      divider: tokens.palette ? tokens.palette.border.default.value : '',
+      border: tokens.palette
+        ? {
+            default: tokens.palette.background.default.value,
+            grey: tokens.palette.background.grey.value,
+          }
+        : {},
+      action: tokens.palette
+        ? {
+            disabled: tokens.backgroundColors.white?.value,
+            disabledBackground: tokens.palette.text?.disabled.value,
+            disabledOpacity: 1,
+            hover: tokens.backgroundColors?.blueHoverEquivalence?.value,
+            hoverOpacity: Number(tokens.palette.action.hoverOpacity.value),
+          }
+        : {},
+      ...convertCustomColors(customColors),
+      ...convertCustomColors(customColors.textColors),
+      ...convertCustomColors(customColors.backgroundColors),
+      ...convertCustomColors(customColors.borderColors),
+      ...convertCustomColors(customColors.notificationColors),
+      ...convertCustomColors(customColors.secondaryColors),
+    },
+    typography: {
+      fontFamily: tokens.Typography?.body1?.fontFamily?.value || '',
+      h1: convertTypographyVariant(tokens?.Typography?.h1),
+      h2: convertTypographyVariant(tokens?.Typography?.h2),
+      h3: convertTypographyVariant(tokens?.Typography?.h3),
+      h4: convertTypographyVariant(tokens?.Typography?.h4),
+      h5: convertTypographyVariant(tokens?.Typography?.h5),
+      h6: convertTypographyVariant(tokens?.Typography?.h6),
+      subtitle1: convertTypographyVariant(tokens?.Typography?.subtitle1),
+      subtitle2: convertTypographyVariant(tokens?.Typography?.subtitle2),
+      body1: convertTypographyVariant(tokens?.Typography?.body1),
+      body2: convertTypographyVariant(tokens?.Typography?.body2),
+      button: convertTypographyVariant(tokens?.Typography?.button),
+      caption: convertTypographyVariant(tokens?.Typography?.caption),
+    },
+    shape: {
+      borderRadius: Number(tokens.radius?.small.value),
+    },
+    spacing: (factor: number) =>
+      `${factor * Number(tokens.spacing?.xxs.value)}px`,
+    components: {
+      ...Typography(spacing),
+      ...FormHelperText(spacing, tokens),
+      ...FormLabel(spacing, tokens),
+      ...Button(spacing, tokens),
+      ...IconButton(spacing, tokens),
+      ...Checkbox(spacing, tokens),
+      ...Radio(spacing, tokens),
+      ...MenuItem(spacing, tokens),
+      ...Accordion(spacing, tokens),
+      ...Breadcrumbs(spacing, tokens),
+      ...Chip(spacing, tokens),
+      ...InputLabel(spacing, tokens),
+      ...OutlinedInput(spacing, tokens),
+      ...Autocomplete(spacing, tokens),
+      ...Switch(spacing, tokens),
+      ...Select(spacing, tokens),
+      ...TextField(spacing, tokens),
+      ...Table(spacing, tokens),
+      ...Alert(spacing, tokens),
+      ...PaginationItem(spacing, tokens),
+      ...Divider(spacing, tokens),
+    },
+  };
+};
+
+export default getTheme;

package/src/index.ts

@@ -1,4 +1,2 @@
-export { default as useThemeTokens } from './useThemeTokens';
-export { default as useMaterialThemeTokens } from './useMaterialThemeTokens';
-export * from './interfaces/theme';
-export * from './css';
+export { default as theme } from './theme/theme';
+export * from './interfaces/theme.interface';