@linagora/twake-mui 9.0.0 → 9.2.0

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# @linagora/twake-mui [9.2.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@9.1.0...@linagora/twake-mui@9.2.0) (2026-09-22)
+
+
+### Bug Fixes
+
+* **twake-mui:** Tint light-mode shadows with Grey 900, like cozy-ui ([4c74b68](https://github.com/linagora/twake-ui/commit/4c74b6861f6160ce174b7022ec2b42a64f5d5ecd))
+
+
+### Features
+
+* Read the palette from twake-css ([7c0a9e6](https://github.com/linagora/twake-ui/commit/7c0a9e6719d9520bdfdbd7b32b9d3132f2ae7d64))
+
+
+### Dependencies
+
+* **@linagora/twake-css:** upgraded to 1.0.0
+
+# @linagora/twake-mui [9.1.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@9.0.0...@linagora/twake-mui@9.1.0) (2026-09-22)
+
+
+### Features
+
+* **twake-mui:** Migrate Layout from cozy-ui ([fdcb499](https://github.com/linagora/twake-ui/commit/fdcb499c9790e4b8fc7aaaa12087a8eebf250d42))
+
 # @linagora/twake-mui [9.0.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@8.0.0...@linagora/twake-mui@9.0.0) (2026-09-21)
 
 

package/dist/components/Button/index.d.ts

@@ -1,12 +1,19 @@
-import { ButtonProps as MuiButtonProps } from '@mui/material';
+import { ButtonProps as MuiButtonProps, ButtonTypeMap as MuiButtonTypeMap } from '@mui/material';
+import { OverridableComponent, OverrideProps } from '@mui/material/OverridableComponent';
 import React from 'react';
 declare const legacyVariants: {
     readonly primary: "contained";
     readonly secondary: "outlined";
 };
 type LegacyVariant = keyof typeof legacyVariants;
-export interface ButtonProps extends Omit<MuiButtonProps, 'variant'> {
-    variant?: MuiButtonProps['variant'] | LegacyVariant;
+export interface ButtonTypeMap<AdditionalProps = object, RootComponent extends React.ElementType = 'button'> {
+    props: AdditionalProps & Omit<MuiButtonTypeMap['props'], 'variant'> & {
+        variant?: MuiButtonProps['variant'] | LegacyVariant;
+    };
+    defaultComponent: RootComponent;
 }
-export declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export type ButtonProps<RootComponent extends React.ElementType = 'button', AdditionalProps = object> = OverrideProps<ButtonTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+export declare const Button: OverridableComponent<ButtonTypeMap> & {
+    displayName?: string;
+};
 export default Button;

package/dist/components/Layout/Content.d.ts

@@ -0,0 +1,7 @@
+import { SxProps } from '@mui/material';
+import { Theme } from '@mui/material/styles';
+import React from 'react';
+export interface ContentProps extends React.ComponentPropsWithoutRef<'div'> {
+    sx?: SxProps<Theme>;
+}
+export declare const Content: (props: ContentProps) => React.ReactElement;

package/dist/components/Layout/Content.js

@@ -0,0 +1,29 @@
+import { styled } from '@mui/material/styles';
+import React, { useContext } from 'react';
+import { LayoutContext } from './Layout';
+const ContentRoot = styled('div', {
+    shouldForwardProp: prop => prop !== 'monoColumn'
+})(({ theme }) => ({
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'column',
+    flex: '1 1 auto',
+    boxSizing: 'border-box',
+    overflow: 'hidden auto',
+    backgroundColor: theme.vars.palette.background.paper,
+    height: '100%',
+    variants: [
+        {
+            props: { monoColumn: false },
+            style: {
+                margin: '16px 16px 16px 0',
+                borderRadius: 16,
+                [theme.breakpoints.down('lg')]: { margin: 0, borderRadius: 0 }
+            }
+        }
+    ]
+}));
+export const Content = (props) => {
+    const { monoColumn } = useContext(LayoutContext);
+    return React.createElement(ContentRoot, { role: "main", monoColumn: monoColumn, ...props });
+};

package/dist/components/Layout/Layout.d.ts

@@ -0,0 +1,21 @@
+import { SxProps } from '@mui/material';
+import { CSSObject, Theme } from '@mui/material/styles';
+import React from 'react';
+interface LayoutContextValue {
+    monoColumn: boolean;
+    withTopBar: boolean;
+}
+export declare const LayoutContext: React.Context<LayoutContextValue>;
+export interface TwoPanesProps {
+    monoColumn?: boolean;
+}
+export declare const twoPanes: (theme: Theme) => CSSObject;
+export interface LayoutProps extends React.ComponentPropsWithoutRef<'div'> {
+    sx?: SxProps<Theme>;
+    /** Used to add/remove top spacing when using with or without a topbar */
+    withTopBar?: boolean;
+    /** Should be true if no sidebar in the app */
+    monoColumn?: boolean;
+}
+export declare const Layout: ({ children, withTopBar, monoColumn, ...props }: LayoutProps) => React.ReactElement;
+export {};

package/dist/components/Layout/Layout.js

@@ -0,0 +1,31 @@
+import { styled } from '@mui/material/styles';
+import React, { createContext, useMemo } from 'react';
+import { SIDEBAR_MOBILE_HEIGHT } from '../Sidebar';
+export const LayoutContext = createContext({
+    monoColumn: false,
+    withTopBar: true
+});
+export const twoPanes = (theme) => ({
+    backgroundColor: theme.vars.palette.background.default,
+    [theme.breakpoints.down('lg')]: {
+        height: `calc(100vh - var(${SIDEBAR_MOBILE_HEIGHT}, 0px))`,
+        backgroundColor: 'transparent'
+    }
+});
+const LayoutRoot = styled('div', {
+    shouldForwardProp: prop => prop !== 'monoColumn'
+})(({ theme }) => ({
+    boxSizing: 'border-box',
+    display: 'flex',
+    maxWidth: '100%',
+    width: '100%',
+    height: '100%',
+    backgroundColor: theme.vars.palette.background.paper,
+    color: theme.vars.palette.text.primary,
+    variants: [{ props: { monoColumn: false }, style: twoPanes(theme) }]
+}));
+export const Layout = ({ children, withTopBar = true, monoColumn = false, ...props }) => {
+    const value = useMemo(() => ({ monoColumn, withTopBar }), [monoColumn, withTopBar]);
+    return (React.createElement(LayoutContext.Provider, { value: value },
+        React.createElement(LayoutRoot, { monoColumn: monoColumn, ...props }, children)));
+};

package/dist/components/Layout/Layout.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Layout } from './index';
+declare const meta: Meta<typeof Layout>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Screenshot: Story;

package/dist/components/Layout/Layout.stories.js

@@ -0,0 +1,89 @@
+import { Check, Download, Warn } from '@linagora/twake-icons';
+import { Box, Typography } from '@mui/material';
+import React, { useState } from 'react';
+import { Content, Layout, Main } from './index';
+import { Nav } from '../Nav';
+import { NavDesktopDropdown } from '../NavDesktopDropdown';
+import { NavDesktopLimiter } from '../NavDesktopLimiter';
+import { NavIcon } from '../NavIcon';
+import { NavItem } from '../NavItem';
+import { NavLink } from '../NavLink';
+import { NavText } from '../NavText';
+import { Sidebar } from '../Sidebar';
+const paragraph = 'Ada Lovelace was an English mathematician chiefly known for her work on Charles Babbage’s proposed mechanical general-purpose computer, the Analytical Engine. She was the first to recognise that the machine had applications beyond pure calculation.';
+const TopBar = () => (React.createElement(Box, { id: "coz-bar", role: "banner", sx: theme => ({
+        display: 'flex',
+        alignItems: 'center',
+        px: 2,
+        minHeight: 48,
+        width: '100%',
+        boxSizing: 'border-box',
+        backgroundColor: theme.vars.palette.background.paper,
+        borderBottom: `1px solid ${theme.vars.palette.divider}`,
+        position: 'fixed',
+        top: 0,
+        right: 0,
+        zIndex: theme.zIndex.appBar,
+        [theme.breakpoints.up('lg')]: { position: 'relative' }
+    }) }, "Fake TopBar"));
+const LayoutDemo = ({ monoColumn = false, withTopBar = true, ...props }) => {
+    const [active, setActive] = useState(['Section 1', 'Subsection 1']);
+    const makeProps = (route) => ({
+        selected: active.slice(0, route.length).join('/') === route.join('/'),
+        onClick: () => setActive(route)
+    });
+    return (React.createElement(Box, { sx: { height: '100vh', display: 'flex', flexDirection: 'column' } },
+        withTopBar && React.createElement(TopBar, null),
+        React.createElement(Box, { role: "application", sx: { flex: '1 1 auto', minHeight: 0 } },
+            React.createElement(Layout, { monoColumn: monoColumn, withTopBar: withTopBar, ...props },
+                !monoColumn && (React.createElement(Sidebar, null,
+                    React.createElement(Nav, null,
+                        React.createElement(NavItem, null,
+                            React.createElement(NavLink, { ...makeProps(['Section 1']) },
+                                React.createElement(NavIcon, { icon: Warn }),
+                                React.createElement(NavText, null, "Section 1"))),
+                        React.createElement(NavDesktopLimiter, null, Array.from(Array(10).keys()).map(i => (React.createElement(NavItem, { secondary: true, key: i },
+                            React.createElement(NavLink, { ...makeProps(['Section 1', `Subsection ${i}`]) },
+                                React.createElement(NavText, null,
+                                    "Subsection ",
+                                    i)))))),
+                        React.createElement(NavItem, null,
+                            React.createElement(NavLink, { ...makeProps(['Section 2']) },
+                                React.createElement(NavIcon, { icon: Check }),
+                                React.createElement(NavText, null, "Section 2"))),
+                        React.createElement(NavItem, null,
+                            React.createElement(NavLink, { ...makeProps(['Section 3']) },
+                                React.createElement(NavIcon, { icon: Download }),
+                                React.createElement(NavText, null, "Section 3"))),
+                        React.createElement(NavDesktopDropdown, { label: "Section 4" }, Array.from(Array(6).keys()).map(i => (React.createElement(NavItem, { secondary: true, key: i },
+                            React.createElement(NavLink, { ...makeProps(['Section 4', `Subsection ${i}`]) },
+                                React.createElement(NavText, null,
+                                    "Subsection ",
+                                    i))))))))),
+                React.createElement(Main, null,
+                    React.createElement(Content, { sx: { p: 2 } },
+                        React.createElement(Typography, { variant: "h5" }, active.join(' / ')),
+                        React.createElement("p", null, "---Start---"),
+                        Array.from(Array(6).keys()).map(i => (React.createElement("p", { key: i }, paragraph))),
+                        React.createElement("p", null, "---END---")))))));
+};
+const meta = {
+    title: 'Layout',
+    component: Layout,
+    parameters: { layout: 'fullscreen' },
+    tags: ['autodocs'],
+    argTypes: {
+        monoColumn: { control: 'boolean' },
+        withTopBar: { control: 'boolean' }
+    },
+    render: args => React.createElement(LayoutDemo, { ...args })
+};
+export default meta;
+export const Default = {
+    args: { monoColumn: false, withTopBar: true }
+};
+// Visual Regression - Combined view for Argos testing
+export const Screenshot = {
+    tags: ['argos'],
+    args: { monoColumn: false, withTopBar: true }
+};

package/dist/components/Layout/Main.d.ts

@@ -0,0 +1,7 @@
+import { SxProps } from '@mui/material';
+import { Theme } from '@mui/material/styles';
+import React from 'react';
+export interface MainProps extends React.ComponentPropsWithoutRef<'main'> {
+    sx?: SxProps<Theme>;
+}
+export declare const Main: (props: MainProps) => React.ReactElement;

package/dist/components/Layout/Main.js

@@ -0,0 +1,37 @@
+import { styled } from '@mui/material/styles';
+import React, { useContext } from 'react';
+import { LayoutContext, twoPanes } from './Layout';
+/** Height of the top bar, which is out of the Layout but overlaps it */
+const TOP_BAR_HEIGHT = 48;
+const MainRoot = styled('main', {
+    shouldForwardProp: prop => prop !== 'monoColumn' && prop !== 'withTopBar'
+})(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    position: 'relative',
+    flex: '1 1 auto',
+    boxSizing: 'border-box',
+    overflow: 'hidden',
+    height: '100%',
+    variants: [
+        { props: { monoColumn: false }, style: twoPanes(theme) },
+        {
+            props: { withTopBar: true },
+            style: {
+                [theme.breakpoints.down('lg')]: {
+                    '&::before': {
+                        content: '""',
+                        display: 'block',
+                        height: TOP_BAR_HEIGHT,
+                        width: '100%',
+                        backgroundColor: theme.vars.palette.background.paper
+                    }
+                }
+            }
+        }
+    ]
+}));
+export const Main = (props) => {
+    const { monoColumn, withTopBar } = useContext(LayoutContext);
+    return React.createElement(MainRoot, { monoColumn: monoColumn, withTopBar: withTopBar, ...props });
+};

package/dist/components/Layout/index.d.ts

@@ -0,0 +1,6 @@
+export { Layout } from './Layout';
+export { Main } from './Main';
+export { Content } from './Content';
+export type { LayoutProps } from './Layout';
+export type { MainProps } from './Main';
+export type { ContentProps } from './Content';

package/dist/components/Layout/index.js

@@ -0,0 +1,3 @@
+export { Layout } from './Layout';
+export { Main } from './Main';
+export { Content } from './Content';

package/dist/components/Sidebar/index.d.ts

@@ -1,6 +1,7 @@
 import { SxProps } from '@mui/material';
 import { Theme } from '@mui/material/styles';
 import React from 'react';
+export declare const SIDEBAR_MOBILE_HEIGHT = "--sidebarHeight";
 export interface SidebarProps extends React.ComponentPropsWithoutRef<'aside'> {
     sx?: SxProps<Theme>;
 }

package/dist/components/Sidebar/index.js

@@ -1,5 +1,9 @@
+import { GlobalStyles } from '@mui/material';
 import { styled } from '@mui/material/styles';
-export const Sidebar = styled('aside')(({ theme }) => ({
+import React from 'react';
+export const SIDEBAR_MOBILE_HEIGHT = '--sidebarHeight';
+const makeSidebarHeightCSSVar = (React.createElement(GlobalStyles, { styles: { ':root': { [SIDEBAR_MOBILE_HEIGHT]: '52px' } } }));
+const SidebarRoot = styled('aside')(({ theme }) => ({
     width: 236,
     flex: '0 0 auto',
     display: 'flex',
@@ -12,10 +16,13 @@ export const Sidebar = styled('aside')(({ theme }) => ({
         bottom: 0,
         left: 0,
         width: '100%',
-        height: 52,
+        height: `var(${SIDEBAR_MOBILE_HEIGHT})`,
         boxSizing: 'content-box',
         display: 'block',
         borderTop: `1px solid ${theme.vars.palette.divider}`,
         zIndex: theme.zIndex.appBar
     }
 }));
+export const Sidebar = props => (React.createElement(React.Fragment, null,
+    makeSidebarHeightCSSVar,
+    React.createElement(SidebarRoot, { ...props })));

package/dist/index.d.ts

@@ -12,7 +12,8 @@ export { default as Chip } from './components/Chip';
 export { Dialog, default as DialogDefault } from './components/Dialog';
 export { Tabs, default as TabsDefault } from './components/Tabs';
 export { Switch, default as SwitchDefault } from './components/Switch';
-export { Sidebar } from './components/Sidebar';
+export { Sidebar, SIDEBAR_MOBILE_HEIGHT } from './components/Sidebar';
+export { Layout, Main, Content } from './components/Layout';
 export { Nav } from './components/Nav';
 export { NavItem } from './components/NavItem';
 export { NavLink } from './components/NavLink';
@@ -32,6 +33,7 @@ export type { DialogProps, DialogSize } from './components/Dialog';
 export type { TabsProps } from './components/Tabs';
 export type { SwitchProps } from './components/Switch';
 export type { SidebarProps } from './components/Sidebar';
+export type { LayoutProps, MainProps, ContentProps } from './components/Layout';
 export type { NavProps } from './components/Nav';
 export type { NavItemProps } from './components/NavItem';
 export type { NavLinkProps } from './components/NavLink';

package/dist/index.js

@@ -15,7 +15,8 @@ export { default as Chip } from './components/Chip';
 export { Dialog, default as DialogDefault } from './components/Dialog';
 export { Tabs, default as TabsDefault } from './components/Tabs';
 export { Switch, default as SwitchDefault } from './components/Switch';
-export { Sidebar } from './components/Sidebar';
+export { Sidebar, SIDEBAR_MOBILE_HEIGHT } from './components/Sidebar';
+export { Layout, Main, Content } from './components/Layout';
 export { Nav } from './components/Nav';
 export { NavItem } from './components/NavItem';
 export { NavLink } from './components/NavLink';

package/dist/lib/makePalette.js

@@ -1,6 +1,6 @@
+import paletteJson from '@linagora/twake-css/palette.json';
 import { alpha } from '@mui/material/styles';
 import { deepmerge } from '@mui/utils';
-import paletteJson from './palette.json';
 const paletteData = paletteJson;
 export const makePalette = (mode = 'light', overrides = {}) => {
     const palette = deepmerge(paletteData, overrides);

package/dist/lib/makeShadows.d.ts

@@ -1,3 +1,3 @@
 import { Shadows } from '@mui/material/styles';
 import { PaletteJson } from './types';
-export declare const makeShadows: (palette?: PaletteJson) => Shadows;
+export declare const makeShadows: (mode?: "light" | "dark", palette?: PaletteJson) => Shadows;

package/dist/lib/makeShadows.js

@@ -1,5 +1,5 @@
+import paletteJson from '@linagora/twake-css/palette.json';
 import { alpha } from '@mui/material/styles';
-import paletteJson from './palette.json';
 const paletteData = paletteJson;
 /**
  * Each elevation is two offset layers plus a constant hairline outline.
@@ -39,8 +39,8 @@ const OUTLINE_OPACITY = 0.12;
  * through the type. Kept to stay iso with cozy-ui.
  */
 const EXTRA_ELEVATION_OPACITY = 0.04;
-export const makeShadows = (palette = paletteData) => {
-    const shadowColor = palette.Common.black;
+export const makeShadows = (mode = 'light', palette = paletteData) => {
+    const shadowColor = mode === 'light' ? palette.Grey[900] : palette.Common.black;
     const outline = `0px 0px 0px 0.5px ${alpha(shadowColor, OUTLINE_OPACITY)}`;
     const shadows = elevations.map(([y1, blur1, spread1, o1, y2, blur2, spread2, o2]) => [
         `0px ${y1}px ${blur1}px ${spread1}px ${alpha(shadowColor, o1)}`,

package/dist/lib/makeTheme.js

@@ -25,14 +25,20 @@ const themesCommonConfig = {
 export const makeTheme = (mode = 'light', paletteOverrides, themeOptions) => {
     const baseOptions = {
         ...themesCommonConfig,
-        cssVariables: { colorSchemeSelector: 'data-theme' },
+        cssVariables: { colorSchemeSelector: 'data-theme', cssVarPrefix: 'twake' },
         defaultColorScheme: mode,
         colorSchemes: {
-            light: { palette: makePalette('light', paletteOverrides) },
-            dark: { palette: makePalette('dark', paletteOverrides) }
+            light: {
+                palette: makePalette('light', paletteOverrides),
+                shadows: makeShadows('light')
+            },
+            dark: {
+                palette: makePalette('dark', paletteOverrides),
+                shadows: makeShadows('dark')
+            }
         },
         typography: makeTypography(),
-        shadows: makeShadows(),
+        shadows: makeShadows(mode),
         components: overrides
     };
     return createTheme(deepmerge(baseOptions, themeOptions ?? {}));

package/dist/lib/types.d.ts

@@ -1,38 +1,9 @@
-import { TypographyVariantsOptions } from '@mui/material/styles';
-export interface CommonColor {
-    white: string;
-    black: string;
-}
-export interface PaletteColor {
-    50: string;
-    100: string;
-    200: string;
-    300: string;
-    400: string;
-    500: string;
-    600: string;
-    700: string;
-    800: string;
-    900: string;
-    ContrastText?: string;
-}
-export interface GreyPalette {
-    50: string;
-    100: string;
-    200: string;
-    300: string;
-    400: string;
-    500: string;
-    600: string;
-    700: string;
-    800: string;
-    900: string;
-    A100: string;
-    A200: string;
-    A400: string;
-    A700: string;
-    A900: string;
-}
+import paletteJson from '@linagora/twake-css/palette.json';
+import { Shadows, TypographyVariantsOptions } from '@mui/material/styles';
+export type PaletteJson = typeof paletteJson;
+export type PaletteColor = PaletteJson['Primary'];
+export type GreyPalette = PaletteJson['Grey'];
+export type CommonColor = PaletteJson['Common'];
 export interface TextPalette {
     primary: string;
     secondary: string;
@@ -61,16 +32,6 @@ export interface BorderPalette {
     opacity: number;
     ghostOpacity: number;
 }
-export interface PaletteJson {
-    Primary: PaletteColor;
-    Secondary: PaletteColor;
-    Error: PaletteColor;
-    Warning: PaletteColor;
-    Success: PaletteColor;
-    Info: Omit<PaletteColor, 'ContrastText'>;
-    Grey: GreyPalette;
-    Common: CommonColor;
-}
 export type TypographyOptions = TypographyVariantsOptions;
 export interface TypographyConfig {
     fontFamily?: string;
@@ -102,6 +63,9 @@ export type MakeTypography = () => TypographyOptions;
  * `theme.palette.background.contrast` get a type error.
  */
 declare module '@mui/material/styles' {
+    interface ColorSystemOptions {
+        shadows?: Shadows;
+    }
     interface CssThemeVariables {
         enabled: true;
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@linagora/twake-mui",
   "type": "module",
-  "version": "9.0.0",
+  "version": "9.2.0",
   "description": "MUI v9 theme system for Twake applications",
   "author": "Twake",
   "license": "MIT",
@@ -40,7 +40,7 @@
     "build": "tsc",
     "build:doc": "storybook build --output-dir storybook-static",
     "start": "tsc --watch",
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "vitest run --project unit",
     "lint": "eslint src --ext .ts,.tsx",
     "lint:fix": "eslint src --ext .ts,.tsx --fix",
     "clean": "rm -rf dist",
@@ -58,6 +58,7 @@
     "twake-i18n": ">=0.5.0"
   },
   "dependencies": {
+    "@linagora/twake-css": "^1.0.0",
     "@mui/utils": "^9.2.0",
     "classnames": "^2.5.1"
   },

package/dist/lib/palette.json

@@ -1,100 +0,0 @@
-{
-    "Primary": {
-        "50": "#f6fbff",
-        "100": "#e3f1ff",
-        "200": "#d2e9ff",
-        "300": "#bfdfff",
-        "400": "#7bbdff",
-        "500": "#46a2ff",
-        "600": "#0a84ff",
-        "700": "#006bd8",
-        "800": "#0157ad",
-        "900": "#082139",
-        "ContrastText": "#fff"
-    },
-    "Secondary": {
-        "50": "#f1f5fa",
-        "100": "#e8f0fa",
-        "200": "#d1e0f2",
-        "300": "#b5d1f1",
-        "400": "#96bce8",
-        "500": "#85b5ec",
-        "600": "#5c9ce6",
-        "700": "#5085c3",
-        "800": "#243b55",
-        "900": "#081f39",
-        "ContrastText": "#fff"
-    },
-    "Error": {
-        "50": "#fffbfe",
-        "100": "#fceeee",
-        "200": "#ffd2d7",
-        "300": "#ff939d",
-        "400": "#ff7a87",
-        "500": "#ff4d5e",
-        "600": "#ff3347",
-        "700": "#d32c3c",
-        "800": "#b52c39",
-        "900": "#7a1e27",
-        "ContrastText": "#fff"
-    },
-    "Warning": {
-        "50": "#fff8e1",
-        "100": "#ffecb3",
-        "200": "#ffe082",
-        "300": "#ffd54f",
-        "400": "#ffca28",
-        "500": "#ffb300",
-        "600": "#ff8f00",
-        "700": "#ff6f00",
-        "800": "#b5672c",
-        "900": "#281c07",
-        "ContrastText": "#fff"
-    },
-    "Success": {
-        "50": "#f3fff5",
-        "100": "#e3ffe7",
-        "200": "#b9f6ca",
-        "300": "#97eca1",
-        "400": "#66e475",
-        "500": "#38c949",
-        "600": "#00c853",
-        "700": "#00ad48",
-        "800": "#245538",
-        "900": "#08250b",
-        "ContrastText": "#fff"
-    },
-    "Info": {
-        "50": "#edffff",
-        "100": "#d4feff",
-        "200": "#affdff",
-        "300": "#86f5f7",
-        "400": "#4ee2e5",
-        "500": "#1de9b6",
-        "600": "#00bfa5",
-        "700": "#00796b",
-        "800": "#004345",
-        "900": "#002526"
-    },
-    "Grey": {
-        "50": "#FBFDFF",
-        "100": "#F3F6F9",
-        "200": "#EDF2F7",
-        "300": "#E1E3E6",
-        "400": "#C5C7CA",
-        "500": "#AAACAE",
-        "600": "#909294",
-        "700": "#757779",
-        "800": "#4E5052",
-        "900": "#424244",
-        "A100": "#FCFCFC",
-        "A200": "#E5ECF3",
-        "A400": "#2C3039",
-        "A700": "#5D6169",
-        "A900": "#1C1B1F"
-    },
-    "Common": {
-        "white": "#fff",
-        "black": "#000"
-    }
-}