@linagora/twake-mui 1.2.0

package/CHANGELOG.md

@@ -0,0 +1,95 @@
+# [1.2.0](https://github.com/linagora/twake-ui/compare/v1.1.0...v1.2.0) (2026-04-09)
+
+
+### Bug Fixes
+
+* remove :has() selector for jsdom compatibility in tests ([252889d](https://github.com/linagora/twake-ui/commit/252889d6499fa3ad76cfa7de8d05e88a5fe9197f))
+
+
+### Features
+
+* add component overrides for DatePicker, Accordion, Checkbox, IconButton ([c5e18a1](https://github.com/linagora/twake-ui/commit/c5e18a1faba4f8a65c7eaa56d5c3f0581be8aa59))
+* **twake-mui:** add Avatar component with gradient background support ([d3ad072](https://github.com/linagora/twake-ui/commit/d3ad072f78d94068a4675adb8493b630e9d7add2))
+
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [1.1.7]
+
+### Changed
+
+- DatePicker: MuiYearCalendar-root width set to 245px
+- DatePicker: MuiYearCalendar-button and MuiMonthCalendar-button use theme primary (orange) for selected/hover/focus instead of default blue
+- DatePicker: MuiYearCalendar-button base styles aligned with MuiMonthCalendar-button (fontSize, lineHeight, height, width, transparent tabindex="0")
+
+## [1.1.6]
+
+### Changed
+
+- DatePicker/DateCalendar: documented triple-class selector for MUI X specificity; no API change
+
+## [1.1.5]
+
+### Changed
+
+- Updated DatePicker selected day background color to use theme primary color (orange) instead of default blue
+- Added override for MuiButtonBase-root.MuiPickersDay-root.Mui-selected to ensure proper styling
+
+## [1.1.4]
+
+### Added
+
+- Global styles for DatePicker components
+- Custom styling for DateCalendar header and controls
+- Improved typography and spacing for calendar components
+
+## [1.1.3]
+
+### Changed
+
+- Updated CHANGELOG documentation
+
+## [1.1.2]
+
+### Changed
+
+- Updated Button component padding for medium size (from 8px to 9px, contained from 9px to 10px)
+- Updated ToggleButton component with medium size padding (9px 24px)
+- Improved type safety for palette grey configuration
+- Refactored component overrides to remove unnecessary theme parameter dependencies
+
+### Fixed
+
+- Updated TypeScript configuration to enable package building for local development usage
+- Added declaration file generation and output directory configuration
+
+## [1.1.1]
+
+### Added
+
+- Avatar component with gradient background support
+- Avatar helpers: nameToColor, supportedColors, colorMapping
+- Avatar overrides with custom size classes (xs, s, m, l, xl)
+- Export nameToColor and supportedColors from package index
+
+### Changed
+
+- Avatar component now supports gradient backgrounds with 11 predefined colors
+- Avatar size system updated with new dimensions and typography
+
+## [1.0.0] 
+
+### Added
+
+- Initial release
+- Palette system with techno-independent color definitions
+- Typography system with custom variants
+- Button component overrides (contained, outlined, text)
+- TextField component overrides
+- Dialog/Modal component overrides
+- ThemeProvider wrapper component
+- TypeScript type definitions

package/README.md

@@ -0,0 +1,97 @@
+# twake-mui
+
+MUI v7 theme system for Twake Calendar and other Twake applications.
+
+## Requirements
+
+You need to use Node 24+
+
+## Installation
+
+```bash
+npm install @linagora/twake-mui
+```
+
+Don't forget to also install peerDependencies (see package.json)
+
+## Usage
+
+### Basic Usage
+
+Wrap your app with the Provider to get the Material-UI theme
+
+```tsx
+import { TwakeMuiThemeProvider } from '@linagora/twake-mui'
+
+function App() {
+  return (
+    <TwakeMuiThemeProvider>{/* Your application */}</TwakeMuiThemeProvider>
+  )
+}
+```
+
+Then you can use Material-UI components from Twake-mui
+
+```tsx
+import { Button } from '@linagora/twake-mui'
+
+function Component() {
+  return (
+    <Button>Label</Button>
+  )
+}
+```
+
+### Accessing Theme
+
+```tsx
+import { useTheme } from '@linagora/twake-mui'
+
+function MyComponent() {
+  const theme = useTheme()
+  const primaryColor = theme.palette.primary.main
+  // ...
+}
+```
+
+## Features
+
+- **Palette System**: Techno-independent color definitions
+- **Component Overrides**: Pre-styled Button, TextField, Dialog components
+- **MUI v7 Compatible**: Built for Material-UI v7
+
+## Development
+
+This package is part of the `twake-ui` monorepo.
+
+### Build
+
+```bash
+npm run build
+```
+
+### Local Development
+
+To use this package locally in another project:
+
+```bash
+# In twake-ui/packages/twake-mui
+npm link
+
+# In your project
+npm link twake-mui
+```
+
+Or use file path in package.json:
+
+```json
+{
+  "dependencies": {
+    "@linagora/twake-mui": "file:../twake-ui/packages/twake-mui"
+  }
+}
+```
+
+## License
+
+MIT

package/dist/components/Avatar/helpers.js

@@ -0,0 +1,72 @@
+export var sizeToFontSize = {
+    xs: 9.109,
+    s: 12.525,
+    m: 18.219,
+    l: 27.328,
+    xl: 36.438
+};
+export var sizeToNb = {
+    xs: 18,
+    s: 28,
+    m: 36,
+    l: 54,
+    xl: 72
+};
+export var sizeToFontWeight = {
+    xs: 500,
+    s: 500,
+    m: 500,
+    l: 600,
+    xl: 600
+};
+export var sizeToLineHeight = {
+    xs: 18.219,
+    s: 18.219,
+    m: 27.328,
+    l: 36.438,
+    xl: 45.547
+};
+export var supportedColors = [
+    'sunrise',
+    'downy',
+    'sugarCoral',
+    'pinkBonnet',
+    'blueMana',
+    'nightBlue',
+    'snowPea',
+    'pluviophile',
+    'cornflower',
+    'paleGreen',
+    'moonBlue'
+];
+export var colorMapping = {
+    sunrise: 'linear-gradient(136deg, #F8D280 14.84%, #F2AC69 96.03%)',
+    downy: 'linear-gradient(136deg, #81EAD4 14.84%, #62C6B7 96.03%)',
+    sugarCoral: 'linear-gradient(136deg, #F19E86 14.84%, #F95967 96.03%)',
+    pinkBonnet: 'linear-gradient(136deg, #E4ABF0 14.84%, #D96EED 96.03%)',
+    blueMana: 'linear-gradient(136deg, #85D9FD 14.84%, #2A9EFC 96.03%)',
+    nightBlue: 'linear-gradient(136deg, #80AEFF 39.32%, #883DFE 96.03%)',
+    snowPea: 'linear-gradient(136deg, #BDF4A1 14.84%, #52CE64 96.03%)',
+    pluviophile: 'linear-gradient(136deg, #A1D6F4 14.84%, #52CEC2 96.03%)',
+    cornflower: 'linear-gradient(135deg, #86D9D3 0%, #1CCFB4 100%)',
+    paleGreen: 'linear-gradient(135deg, #E2FA17 0%, #75D8CB 100%)',
+    moonBlue: 'linear-gradient(136deg, #6DCFFF 14.84%, #3D88F8 96.03%)'
+};
+var colors = supportedColors.filter(Boolean);
+var makeKey = function (colors, name) {
+    return (Array.from(name.toUpperCase())
+        .map(function (letter) { return letter.charCodeAt(0); })
+        .reduce(function (sum, number) { return sum + number; }, 0) % colors.length);
+};
+/**
+ * Generate color from name
+ * @param name - Name string to generate color from
+ * @returns Color key from supportedColors
+ */
+export var nameToColor = function (name) {
+    if (name === void 0) { name = ''; }
+    if (!name)
+        return undefined;
+    var key = makeKey(colors, name);
+    return colors[key];
+};

package/dist/components/Avatar/index.js

@@ -0,0 +1,62 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { Avatar as MuiAvatar } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import React from 'react';
+import { colorMapping, nameToColor, supportedColors } from './helpers';
+var capitalize = function (str) {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+};
+var StyledAvatar = styled(MuiAvatar, {
+    shouldForwardProp: function (prop) { return prop !== 'gradientColor'; }
+})(function (_a) {
+    var theme = _a.theme, gradientColor = _a.gradientColor;
+    return (__assign({}, (gradientColor && {
+        color: theme.palette.primary.contrastText,
+        background: colorMapping[gradientColor] || undefined
+    })));
+});
+export var Avatar = function (_a) {
+    var className = _a.className, color = _a.color, size = _a.size, border = _a.border, innerBorder = _a.innerBorder, disabled = _a.disabled, _b = _a.display, display = _b === void 0 ? 'initial' : _b, sx = _a.sx, props = __rest(_a, ["className", "color", "size", "border", "innerBorder", "disabled", "display", "sx"]);
+    var defaultColor = typeof props.children === 'string' ? nameToColor(props.children) : undefined;
+    var finalColor = color === 'none'
+        ? undefined
+        : color && supportedColors.includes(color)
+            ? color
+            : defaultColor;
+    var classNames = [];
+    if (className)
+        classNames.push(className);
+    if (size && typeof size === 'string')
+        classNames.push("size-".concat(size));
+    if (disabled)
+        classNames.push('disabled');
+    if (border)
+        classNames.push('border');
+    if (innerBorder)
+        classNames.push('innerBorder');
+    if (display !== 'initial')
+        classNames.push("display".concat(capitalize(display)));
+    return (React.createElement(StyledAvatar, __assign({ gradientColor: finalColor, className: classNames.join(' ') || undefined, sx: sx }, props)));
+};
+export default Avatar;

package/dist/components/ThemeProvider/index.js

@@ -0,0 +1,17 @@
+import { CssBaseline } from '@mui/material';
+import { ThemeProvider as MuiThemeProvider, createTheme } from '@mui/material/styles';
+import React, { useMemo } from 'react';
+import { makeTheme } from '../../lib/makeTheme';
+export var TwakeMuiThemeProvider = function (_a) {
+    var children = _a.children, _b = _a.mode, mode = _b === void 0 ? 'light' : _b, themeOptions = _a.themeOptions;
+    var theme = useMemo(function () {
+        var baseTheme = makeTheme(mode);
+        if (!themeOptions) {
+            return baseTheme;
+        }
+        return createTheme(baseTheme, themeOptions);
+    }, [mode, themeOptions]);
+    return (React.createElement(MuiThemeProvider, { theme: theme },
+        React.createElement(CssBaseline, null),
+        children));
+};

package/dist/components/ThemeProvider/types.js

@@ -0,0 +1 @@
+export {};

package/dist/index.js

@@ -0,0 +1,8 @@
+export * from '@mui/material';
+export { createTheme, ThemeProvider, styled, alpha, darken, lighten, useTheme } from '@mui/material/styles';
+export { default as Autocomplete } from '@mui/material/Autocomplete';
+export { TwakeMuiThemeProvider } from './components/ThemeProvider';
+export { theme } from './lib/theme';
+export { radius } from './lib/radius';
+export { Avatar, default as AvatarDefault } from './components/Avatar';
+export { nameToColor, supportedColors } from './components/Avatar/helpers';

package/dist/lib/makeDarkOverrides.js

@@ -0,0 +1,42 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { alpha } from '@mui/material/styles';
+import { accordionOverrides } from './overrides/accordionOverrides';
+import { autocompleteOverrides } from './overrides/autocompleteOverrides';
+import { avatarOverrides } from './overrides/avatarOverrides';
+import { backdropOverrides } from './overrides/backdropOverrides';
+import { buttonOverrides } from './overrides/buttonOverrides';
+import { checkboxOverrides } from './overrides/checkboxOverrides';
+import { datePickerOverrides } from './overrides/datePickerOverrides';
+import { dialogOverrides, dialogTitleOverrides, dialogContentOverrides, dialogActionsOverrides } from './overrides/dialogOverrides';
+import { iconButtonOverrides } from './overrides/iconButtonOverrides';
+import { menuItemOverrides } from './overrides/menuItemOverrides';
+import { popoverOverrides } from './overrides/popoverOverrides';
+import { textFieldOverrides, outlinedInputOverrides, inputBaseOverrides, selectOverrides } from './overrides/textFieldOverrides';
+import { toggleButtonGroupOverrides, toggleButtonOverrides } from './overrides/toggleButtonOverrides';
+export var makeDarkOverrides = function (theme) {
+    var _a, _b;
+    var datePickerOverridesResult = datePickerOverrides(theme);
+    var accordionOverridesResult = accordionOverrides(theme);
+    return __assign(__assign({ MuiButton: buttonOverrides(theme), MuiTextField: textFieldOverrides(), MuiOutlinedInput: outlinedInputOverrides(), MuiInputBase: inputBaseOverrides(), MuiSelect: selectOverrides(), MuiAutocomplete: autocompleteOverrides(), MuiDialog: dialogOverrides(), MuiDialogTitle: dialogTitleOverrides(), MuiDialogContent: dialogContentOverrides(), MuiDialogActions: dialogActionsOverrides(), MuiPopover: popoverOverrides(), MuiAvatar: avatarOverrides(theme), MuiToggleButtonGroup: toggleButtonGroupOverrides(), MuiToggleButton: toggleButtonOverrides(theme), MuiIconButton: iconButtonOverrides(), MuiCheckbox: checkboxOverrides(), MuiBackdrop: backdropOverrides(theme), MuiTypography: {
+            styleOverrides: {
+                root: {
+                    color: alpha(theme.palette.grey[50], 0.9)
+                },
+                caption: {
+                // Typography caption overrides will be implemented later
+                }
+            }
+        } }, datePickerOverridesResult), { MuiAccordion: accordionOverridesResult.MuiAccordion, MuiAccordionSummary: accordionOverridesResult.MuiAccordionSummary, MuiCssBaseline: {
+            styleOverrides: __assign(__assign({}, (((_a = datePickerOverridesResult.MuiCssBaseline) === null || _a === void 0 ? void 0 : _a.styleOverrides) || {})), (((_b = accordionOverridesResult.MuiCssBaseline) === null || _b === void 0 ? void 0 : _b.styleOverrides) || {}))
+        }, MuiMenuItem: menuItemOverrides(theme) });
+};

package/dist/lib/makeLightOverrides.js

@@ -0,0 +1,42 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { alpha } from '@mui/material/styles';
+import { accordionOverrides } from './overrides/accordionOverrides';
+import { autocompleteOverrides } from './overrides/autocompleteOverrides';
+import { avatarOverrides } from './overrides/avatarOverrides';
+import { backdropOverrides } from './overrides/backdropOverrides';
+import { buttonOverrides } from './overrides/buttonOverrides';
+import { checkboxOverrides } from './overrides/checkboxOverrides';
+import { datePickerOverrides } from './overrides/datePickerOverrides';
+import { dialogOverrides, dialogTitleOverrides, dialogContentOverrides, dialogActionsOverrides } from './overrides/dialogOverrides';
+import { iconButtonOverrides } from './overrides/iconButtonOverrides';
+import { menuItemOverrides } from './overrides/menuItemOverrides';
+import { popoverOverrides } from './overrides/popoverOverrides';
+import { textFieldOverrides, outlinedInputOverrides, inputBaseOverrides, selectOverrides } from './overrides/textFieldOverrides';
+import { toggleButtonGroupOverrides, toggleButtonOverrides } from './overrides/toggleButtonOverrides';
+export var makeLightOverrides = function (theme) {
+    var _a, _b;
+    var datePickerOverridesResult = datePickerOverrides(theme);
+    var accordionOverridesResult = accordionOverrides(theme);
+    return __assign(__assign({ MuiButton: buttonOverrides(theme), MuiTextField: textFieldOverrides(), MuiOutlinedInput: outlinedInputOverrides(), MuiInputBase: inputBaseOverrides(), MuiSelect: selectOverrides(), MuiAutocomplete: autocompleteOverrides(), MuiDialog: dialogOverrides(), MuiDialogTitle: dialogTitleOverrides(), MuiDialogContent: dialogContentOverrides(), MuiDialogActions: dialogActionsOverrides(), MuiPopover: popoverOverrides(), MuiAvatar: avatarOverrides(theme), MuiToggleButtonGroup: toggleButtonGroupOverrides(), MuiToggleButton: toggleButtonOverrides(theme), MuiIconButton: iconButtonOverrides(), MuiCheckbox: checkboxOverrides(), MuiBackdrop: backdropOverrides(theme), MuiTypography: {
+            styleOverrides: {
+                root: {
+                    color: alpha(theme.palette.grey[900], 0.9)
+                },
+                caption: {
+                // Typography caption overrides will be implemented later
+                }
+            }
+        } }, datePickerOverridesResult), { MuiAccordionSummary: accordionOverridesResult.MuiAccordionSummary, MuiCssBaseline: {
+            styleOverrides: __assign(__assign({}, (((_a = datePickerOverridesResult.MuiCssBaseline) === null || _a === void 0 ? void 0 : _a.styleOverrides) || {})), (((_b = accordionOverridesResult.MuiCssBaseline) === null || _b === void 0 ? void 0 : _b.styleOverrides) || {}))
+        }, MuiMenuItem: menuItemOverrides(theme) });
+};

package/dist/lib/makePalette.js

@@ -0,0 +1,79 @@
+import paletteJson from './palette.json';
+var paletteData = paletteJson;
+export var makePalette = function (mode) {
+    if (mode === void 0) { mode = 'light'; }
+    return {
+        mode: mode,
+        primary: {
+            light: paletteData.Primary[300],
+            main: paletteData.Primary[600],
+            dark: paletteData.Primary[800],
+            contrastText: paletteData.Primary.ContrastText
+        },
+        secondary: {
+            light: paletteData.Secondary[300],
+            main: paletteData.Secondary[600],
+            dark: paletteData.Secondary[800],
+            contrastText: paletteData.Secondary.ContrastText
+        },
+        error: {
+            light: paletteData.Error[300],
+            main: paletteData.Error[600],
+            dark: paletteData.Error[800],
+            contrastText: paletteData.Error.ContrastText
+        },
+        warning: {
+            light: paletteData.Warning[300],
+            main: paletteData.Warning[500],
+            dark: paletteData.Warning[700],
+            contrastText: paletteData.Warning.ContrastText
+        },
+        success: {
+            light: paletteData.Success[300],
+            main: paletteData.Success[600],
+            dark: paletteData.Success[800],
+            contrastText: paletteData.Success.ContrastText
+        },
+        info: {
+            light: paletteData.Info[300],
+            main: paletteData.Info[600],
+            dark: paletteData.Info[800],
+            contrastText: '#fff'
+        },
+        grey: {
+            50: paletteData.Grey[50],
+            100: paletteData.Grey[100],
+            200: paletteData.Grey[200],
+            300: paletteData.Grey[300],
+            400: paletteData.Grey[400],
+            500: paletteData.Grey[500],
+            600: paletteData.Grey[600],
+            700: paletteData.Grey[700],
+            800: paletteData.Grey[800],
+            900: paletteData.Grey[900],
+            A100: paletteData.Grey.A100,
+            A200: paletteData.Grey.A200,
+            A400: paletteData.Grey.A400,
+            A700: paletteData.Grey.A700,
+            A900: paletteData.Grey.A900
+        },
+        text: {
+            primary: '#000000',
+            secondary: '#717D96',
+            disabled: '#C5C7CA'
+        },
+        background: {
+            default: '#FFFFFF',
+            paper: '#FFFFFF'
+        },
+        divider: '#E1E3E6',
+        action: {
+            active: paletteData.Primary['A400'],
+            hover: 'rgba(246, 126, 53, 0.04)',
+            selected: 'rgba(246, 126, 53, 0.08)',
+            disabled: 'rgba(0, 0, 0, 0.32)',
+            disabledBackground: 'rgba(0, 0, 0, 0.12)',
+            focus: 'rgba(246, 126, 53, 0.12)'
+        }
+    };
+};

package/dist/lib/makeTheme.js

@@ -0,0 +1,43 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { createTheme } from '@mui/material/styles';
+import { makeDarkOverrides } from './makeDarkOverrides';
+import { makeLightOverrides } from './makeLightOverrides';
+import { makePalette } from './makePalette';
+import { makeTypography } from './makeTypography';
+// DatePicker styles are applied through component overrides
+var themesCommonConfig = {
+    shape: {
+        borderRadius: 6
+    },
+    breakpoints: {
+        values: {
+            xs: 0,
+            sm: 480,
+            md: 768,
+            lg: 1023,
+            xl: 1200
+        }
+    },
+    zIndex: {
+        modal: 1300
+    }
+};
+export var makeTheme = function (mode) {
+    if (mode === void 0) { mode = 'light'; }
+    var palette = makePalette(mode);
+    var typography = makeTypography();
+    var theme = createTheme(__assign(__assign({}, themesCommonConfig), { palette: palette, typography: typography }));
+    var components = mode === 'dark' ? makeDarkOverrides(theme) : makeLightOverrides(theme);
+    // Create the final theme with components
+    return createTheme(__assign(__assign({}, theme), { components: components }));
+};

package/dist/lib/makeTypography.js

@@ -0,0 +1,111 @@
+export var makeTypography = function () {
+    return {
+        fontFamily: [
+            '"Inter"',
+            '-apple-system',
+            'BlinkMacSystemFont',
+            '"Segoe UI"',
+            'Roboto',
+            '"Helvetica Neue"',
+            'Arial',
+            'sans-serif',
+            '"Apple Color Emoji"',
+            '"Segoe UI Emoji"',
+            '"Segoe UI Symbol"'
+        ].join(','),
+        h1: {
+            fontSize: 45,
+            fontWeight: 600,
+            lineHeight: 1.156,
+            letterSpacing: '0'
+        },
+        h2: {
+            fontSize: 32,
+            fontWeight: 600,
+            lineHeight: 1.25,
+            letterSpacing: '0'
+        },
+        h3: {
+            fontSize: 24,
+            fontWeight: 600,
+            lineHeight: 1.333,
+            letterSpacing: '0'
+        },
+        h4: {
+            fontSize: 22,
+            fontWeight: 600,
+            lineHeight: 1.273,
+            letterSpacing: '0'
+        },
+        h5: {
+            fontSize: 16,
+            fontWeight: 600,
+            lineHeight: 1.5,
+            letterSpacing: '0'
+        },
+        h6: {
+            fontSize: 14,
+            fontWeight: 500,
+            lineHeight: 1.429,
+            letterSpacing: '0'
+        },
+        subtitle1: {
+            fontSize: 14,
+            fontWeight: 500,
+            lineHeight: 1.143,
+            letterSpacing: '0.5px'
+        },
+        subtitle2: {
+            fontSize: 14,
+            fontWeight: 600,
+            lineHeight: 1.429,
+            letterSpacing: '0.25px'
+        },
+        body1: {
+            fontSize: 16,
+            fontWeight: 400,
+            lineHeight: 1.5,
+            letterSpacing: '-0.15px'
+        },
+        body2: {
+            fontSize: 14,
+            fontWeight: 400,
+            lineHeight: 1.429,
+            letterSpacing: '0.25px'
+        },
+        button: {
+            fontSize: 14,
+            fontWeight: 500,
+            lineHeight: 1.429,
+            textTransform: 'none',
+            letterSpacing: '0.1px'
+        },
+        buttonLarge: {
+            fontSize: 16,
+            fontWeight: 500,
+            lineHeight: 1.5,
+            textTransform: 'none',
+            letterSpacing: '0.15px'
+        },
+        buttonSmall: {
+            fontSize: 11,
+            fontWeight: 500,
+            lineHeight: 1.455,
+            textTransform: 'none',
+            letterSpacing: '0.5px'
+        },
+        caption: {
+            fontSize: 12,
+            fontWeight: 500,
+            lineHeight: 1.333,
+            letterSpacing: '0.5px'
+        },
+        overline: {
+            fontSize: 11,
+            fontWeight: 500,
+            lineHeight: 1.455,
+            letterSpacing: '0.4px',
+            textTransform: 'none'
+        }
+    };
+};