@frontegg/types 4.37.0 → 4.39.2-dashboard

package/ThemeOptions/index.d.ts

@@ -6,8 +6,10 @@ import { Transitions, TransitionsOptions } from './TransitionsOptions';
 import { Breakpoints, BreakpointsOptions } from './BreakpointsOptions';
 import { ComponentsOptions } from './ComponentsOptions';
 import { TypographyOptions, Typography } from './TypographyOptions';
-import { AdminPortalThemeOptions } from './AdminPortalThemeOptions';
-import { LoginBoxThemeOptions } from './LoginBoxThemeOptions';
+import { AdminPortalTheme, AdminPortalThemeOptions } from './AdminPortalThemeOptions';
+import { LoginBoxTheme, LoginBoxThemeOptions } from './LoginBoxTheme';
+export * from './LoginBoxTheme';
+export * from './ComponentsOptions';
 export declare type Direction = 'ltr' | 'rtl';
 export interface FronteggThemeOptions {
     palette?: ThemePaletteOptions;
@@ -21,107 +23,7 @@ export interface FronteggThemeOptions {
     typography?: TypographyOptions;
     adminPortal?: AdminPortalThemeOptions;
     loginBox?: LoginBoxThemeOptions;
-    navigation?: {
-        groupTitleColor?: CSSProperties['color'];
-        groupTitleSize?: CSSProperties['fontSize'];
-        headerColor?: CSSProperties['color'];
-        subHeaderColor?: CSSProperties['color'];
-        background?: CSSProperties['background'];
-        default: {
-            color?: CSSProperties['color'];
-            borderColor?: CSSProperties['borderColor'];
-            avatarBgColor?: CSSProperties['background'];
-            avatarColor?: CSSProperties['color'];
-        };
-        hover: {
-            color?: CSSProperties['color'];
-            background?: CSSProperties['background'];
-            borderColor?: CSSProperties['borderColor'];
-            avatarColor?: CSSProperties['color'];
-            avatarBgColor?: CSSProperties['backgroundColor'];
-        };
-        selected: {
-            color?: CSSProperties['color'];
-            background?: CSSProperties['background'];
-            borderColor?: CSSProperties['borderColor'];
-            avatarColor?: CSSProperties['color'];
-            avatarBgColor?: CSSProperties['backgroundColor'];
-        };
-    };
-    dialog?: {
-        headerBackground?: CSSProperties['background'];
-        headerTextColor?: CSSProperties['color'];
-        bodyBackground?: CSSProperties['background'];
-        footerBackground?: CSSProperties['background'];
-    };
-    socialLogins?: {
-        rowLayout?: boolean;
-        google?: socialLogin;
-        github?: socialLogin;
-        facebook?: socialLogin;
-        microsoft?: socialLogin;
-    };
-    rightPanel?: {
-        headerBackground?: CSSProperties['background'];
-        pageBackground?: CSSProperties['background'];
-        elementBackground?: CSSProperties['color'];
-        profileHeader?: CSSProperties['background'];
-        tableHeaderBackground?: CSSProperties['background'];
-        tableBodyBackground?: CSSProperties['background'];
-    };
-    authPage?: {
-        loginBox: {
-            width?: CSSProperties['width'];
-            padding?: CSSProperties['padding'];
-            border?: CSSProperties['border'];
-            borderRadius?: CSSProperties['borderRadius'];
-            boxShadow?: CSSProperties['boxShadow'];
-            backgroundCard?: CSSProperties['background'];
-        };
-        loginSignupSwitch?: {
-            color?: CSSProperties['color'];
-            fontSize?: CSSProperties['fontSize'];
-            fontFamily?: CSSProperties['fontFamily'];
-            textAlign?: CSSProperties['textAlign'];
-            padding?: CSSProperties['padding'];
-            margin?: CSSProperties['margin'];
-            link?: {
-                color?: CSSProperties['color'];
-                decoration?: CSSProperties['textDecoration'];
-                fontWeight?: CSSProperties['fontWeight'];
-            };
-        };
-        inputError: {
-            fontFamily?: CSSProperties['fontFamily'];
-            fontSize?: CSSProperties['fontSize'];
-            fontWeight?: CSSProperties['fontWeight'];
-            padding?: CSSProperties['padding'];
-        };
-    };
-    subHeaderMsg?: {
-        color?: CSSProperties['color'];
-        fontSize?: CSSProperties['fontSize'];
-        fontFamily?: CSSProperties['fontFamily'];
-        textAlign?: CSSProperties['textAlign'];
-        padding?: CSSProperties['padding'];
-        margin?: CSSProperties['margin'];
-        textDecoration?: CSSProperties['textDecoration'];
-    };
 }
-export declare type socialLogin = {
-    background?: CSSProperties['background'];
-    default: {
-        color?: CSSProperties['color'];
-    };
-    hover: {
-        color?: CSSProperties['color'];
-        background?: CSSProperties['background'];
-    };
-    selected: {
-        color?: CSSProperties['color'];
-        background?: CSSProperties['background'];
-    };
-};
 export interface FronteggTheme {
     palette: ThemePalette;
     typographyStyleOptions: CSSProperties;
@@ -132,94 +34,8 @@ export interface FronteggTheme {
     direction: Direction;
     components: ComponentsOptions;
     typography: Typography;
-    adminPortal?: AdminPortalThemeOptions;
-    loginBox?: LoginBoxThemeOptions;
-    navigation: {
-        groupTitleColor: CSSProperties['color'];
-        groupTitleSize: CSSProperties['fontSize'];
-        headerColor: CSSProperties['color'];
-        subHeaderColor: CSSProperties['color'];
-        background: CSSProperties['background'];
-        default: {
-            color?: CSSProperties['color'];
-            borderColor?: CSSProperties['borderColor'];
-            avatarBgColor?: CSSProperties['background'];
-            avatarColor?: CSSProperties['color'];
-        };
-        hover: {
-            color?: CSSProperties['color'];
-            background?: CSSProperties['background'];
-            borderColor?: CSSProperties['borderColor'];
-            avatarColor?: CSSProperties['color'];
-            avatarBgColor?: CSSProperties['backgroundColor'];
-        };
-        selected: {
-            color?: CSSProperties['color'];
-            background?: CSSProperties['background'];
-            borderColor?: CSSProperties['borderColor'];
-            avatarColor?: CSSProperties['color'];
-            avatarBgColor?: CSSProperties['backgroundColor'];
-        };
-    };
-    dialog: {
-        headerBackground?: CSSProperties['background'];
-        headerTextColor?: CSSProperties['color'];
-        bodyBackground?: CSSProperties['background'];
-        footerBackground?: CSSProperties['background'];
-    };
-    socialLogins: {
-        rowLayout?: boolean;
-        google?: socialLogin;
-        github?: socialLogin;
-        facebook?: socialLogin;
-        microsoft?: socialLogin;
-    };
-    rightPanel: {
-        headerBackground?: CSSProperties['background'];
-        pageBackground?: CSSProperties['background'];
-        elementBackground?: CSSProperties['color'];
-        profileHeader?: CSSProperties['background'];
-        tableHeaderBackground?: CSSProperties['background'];
-        tableBodyBackground?: CSSProperties['background'];
-    };
-    authPage: {
-        loginBox: {
-            width?: CSSProperties['width'];
-            padding?: CSSProperties['padding'];
-            border?: CSSProperties['border'];
-            borderRadius?: CSSProperties['borderRadius'];
-            boxShadow?: CSSProperties['boxShadow'];
-            backgroundCard?: CSSProperties['background'];
-        };
-        loginSignupSwitch?: {
-            color?: CSSProperties['color'];
-            fontSize?: CSSProperties['fontSize'];
-            fontFamily?: CSSProperties['fontFamily'];
-            textAlign?: CSSProperties['textAlign'];
-            padding?: CSSProperties['padding'];
-            margin?: CSSProperties['margin'];
-            link?: {
-                color?: CSSProperties['color'];
-                decoration?: CSSProperties['textDecoration'];
-                fontWeight?: CSSProperties['fontWeight'];
-            };
-        };
-        inputError: {
-            fontFamily?: CSSProperties['fontFamily'];
-            fontSize?: CSSProperties['fontSize'];
-            fontWeight?: CSSProperties['fontWeight'];
-            padding?: CSSProperties['padding'];
-        };
-    };
-    subHeaderMsg: {
-        color?: CSSProperties['color'];
-        fontSize?: CSSProperties['fontSize'];
-        fontFamily?: CSSProperties['fontFamily'];
-        textAlign?: CSSProperties['textAlign'];
-        padding?: CSSProperties['padding'];
-        margin?: CSSProperties['margin'];
-        textDecoration?: CSSProperties['textDecoration'];
-    };
+    adminPortal: AdminPortalTheme;
+    loginBox: LoginBoxTheme;
 }
 export declare type BaseThemeOptions = Omit<FronteggThemeOptions, 'adminPortal' | 'loginBox'>;
 export declare type BaseTheme = Omit<FronteggTheme, 'adminPortal' | 'loginBox'>;

package/index.js

@@ -132,201 +132,9 @@ var cjs = deepmerge_1;
 
 var deepMerge = cjs;
 
-/**
- * Returns a number whose value is limited to the given range.
- * @param {number} value The value to be clamped
- * @param {number} min The lower boundary of the output range
- * @param {number} max The upper boundary of the output range
- * @returns {number} A number in the range [min, max]
- */
-function clamp(value, min = 0, max = 1) {
-    return Math.min(Math.max(min, value), max);
-}
-/**
- * Converts a color from CSS hex format to CSS rgb format.
- * @param {string} color - Hex color, i.e. #nnn or #nnnnnn
- * @returns {string} A CSS rgb color string
- */
-function hexToRgb(color) {
-    color = color.substr(1);
-    const re = new RegExp(`.{1,${color.length >= 6 ? 2 : 1}}`, 'g');
-    let colors = color.match(re);
-    if (colors && colors[0].length === 1) {
-        colors = colors.map((n) => n + n);
-    }
-    return colors
-        ? `rgb${colors.length === 4 ? 'a' : ''}(${colors
-            .map((n, index) => {
-            return index < 3 ? parseInt(n, 16) : Math.round((parseInt(n, 16) / 255) * 1000) / 1000;
-        })
-            .join(', ')})`
-        : '';
-}
-function intToHex(int) {
-    const hex = int.toString(16);
-    return hex.length === 1 ? `0${hex}` : hex;
-}
-/**
- * Returns an object with the type and values of a color.
- *
- * Note: Does not support rgb % values.
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
- * @returns {object} - A MUI color object: {type: string, values: number[]}
- */
-function decomposeColor(color) {
-    // Idempotent
-    if (color.type) {
-        return color;
-    }
-    if (color.charAt(0) === '#') {
-        return decomposeColor(hexToRgb(color));
-    }
-    const marker = color.indexOf('(');
-    const type = color.substring(0, marker);
-    if (['rgb', 'rgba', 'hsl', 'hsla', 'color'].indexOf(type) === -1) {
-        throw new Error('MUI: Unsupported `%s` color.\n' +
-            'The following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color(). ' + color);
-    }
-    let values = color.substring(marker + 1, color.length - 1);
-    let colorSpace;
-    if (type === 'color') {
-        values = values.split(' ');
-        colorSpace = values.shift();
-        if (values.length === 4 && values[3].charAt(0) === '/') {
-            values[3] = values[3].substr(1);
-        }
-        if (['srgb', 'display-p3', 'a98-rgb', 'prophoto-rgb', 'rec-2020'].indexOf(colorSpace) === -1) {
-            throw new Error('MUI: unsupported `%s` color space.\n' +
-                'The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rgb, rec-2020.' + colorSpace);
-        }
-    }
-    else {
-        values = values.split(',');
-    }
-    values = values.map((value) => parseFloat(value));
-    return { type, values, colorSpace };
-}
-/**
- * Converts a color object with type and values to a string.
- * @param {object} color - Decomposed color
- * @param {string} color.type - One of: 'rgb', 'rgba', 'hsl', 'hsla'
- * @param {array} color.values - [n,n,n] or [n,n,n,n]
- * @returns {string} A CSS color string
- */
-function recomposeColor(color) {
-    const { type, colorSpace } = color;
-    let { values } = color;
-    if (type.indexOf('rgb') !== -1) {
-        // Only convert the first 3 values to int (i.e. not alpha)
-        values = values.map((n, i) => (i < 3 ? parseInt(n, 10) : n));
-    }
-    else if (type.indexOf('hsl') !== -1) {
-        values[1] = `${values[1]}%`;
-        values[2] = `${values[2]}%`;
-    }
-    if (type.indexOf('color') !== -1) {
-        values = `${colorSpace} ${values.join(' ')}`;
-    }
-    else {
-        values = `${values.join(', ')}`;
-    }
-    return `${type}(${values})`;
-}
-/**
- * Converts a color from CSS rgb format to CSS hex format.
- * @param {string} color - RGB color, i.e. rgb(n, n, n)
- * @returns {string} A CSS rgb color string, i.e. #nnnnnn
- */
-function rgbToHex(color) {
-    // Idempotent
-    if (color.indexOf('#') === 0) {
-        return color;
-    }
-    const { values } = decomposeColor(color);
-    return `#${values.map((n, i) => intToHex(i === 3 ? Math.round(255 * n) : n)).join('')}`;
-}
-/**
- * Darkens a color.
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
- * @param {number} coefficient - multiplier in the range 0 - 1
- * @returns {string} A CSS color string. Hex input values are returned as rgb
- */
-function darken(color, coefficient) {
-    color = decomposeColor(color);
-    coefficient = clamp(coefficient);
-    if (color.type.indexOf('hsl') !== -1) {
-        color.values[2] *= 1 - coefficient;
-    }
-    else if (color.type.indexOf('rgb') !== -1 || color.type.indexOf('color') !== -1) {
-        for (let i = 0; i < 3; i += 1) {
-            color.values[i] *= 1 - coefficient;
-        }
-    }
-    return recomposeColor(color);
-}
-/**
- * Lightens a color.
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
- * @param {number} coefficient - multiplier in the range 0 - 1
- * @returns {string} A CSS color string. Hex input values are returned as rgb
- */
-function lighten(color, coefficient) {
-    color = decomposeColor(color);
-    coefficient = clamp(coefficient);
-    if (color.type.indexOf('hsl') !== -1) {
-        color.values[2] += (100 - color.values[2]) * coefficient;
-    }
-    else if (color.type.indexOf('rgb') !== -1) {
-        for (let i = 0; i < 3; i += 1) {
-            color.values[i] += (255 - color.values[i]) * coefficient;
-        }
-    }
-    else if (color.type.indexOf('color') !== -1) {
-        for (let i = 0; i < 3; i += 1) {
-            color.values[i] += (1 - color.values[i]) * coefficient;
-        }
-    }
-    return recomposeColor(color);
-}
-
-const generateMainColorObject = (color) => {
-    if (!!color) {
-        return {
-            main: color,
-            light: rgbToHex(lighten(color, 0.4)),
-            dark: rgbToHex(darken(color, 0.15)),
-            hover: rgbToHex(darken(color, 0.15)),
-            active: rgbToHex(darken(color, 0.20)),
-        };
-    }
-};
-const generateSubColorObject = (color) => {
-    if (!!color) {
-        return {
-            main: color,
-            light: lighten(color, 0.7),
-            dark: darken(color, 0.2),
-        };
-    }
-};
-const getPalette = (theme, defaultTheme) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-    if (!(theme === null || theme === void 0 ? void 0 : theme.palette) || typeof ((_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.primary) !== 'string') {
-        return {};
-    }
-    return Object.assign(Object.assign({}, defaultTheme), { palette: {
-            primary: Object.assign(Object.assign({}, generateMainColorObject((_b = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _b === void 0 ? void 0 : _b.primary)), { contrastText: (_d = (_c = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _c === void 0 ? void 0 : _c.primaryText) !== null && _d !== void 0 ? _d : '#000000' }),
-            secondary: Object.assign(Object.assign({}, generateMainColorObject((_e = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _e === void 0 ? void 0 : _e.secondary)), { contrastText: (_g = (_f = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _f === void 0 ? void 0 : _f.secondaryText) !== null && _g !== void 0 ? _g : '#000000' }),
-            danger: Object.assign(Object.assign({}, generateMainColorObject((_h = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _h === void 0 ? void 0 : _h.error)), { contrastText: '#FFF' }),
-            success: Object.assign(Object.assign({}, generateSubColorObject((_j = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _j === void 0 ? void 0 : _j.success)), { contrastText: '#FFF' }),
-            error: Object.assign(Object.assign({}, generateSubColorObject((_k = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _k === void 0 ? void 0 : _k.error)), { contrastText: '#FFF' }),
-            warning: Object.assign(Object.assign({}, generateSubColorObject((_l = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _l === void 0 ? void 0 : _l.warning)), { contrastText: '#FFF' }),
-            info: Object.assign(Object.assign({}, generateSubColorObject((_m = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _m === void 0 ? void 0 : _m.info)), { contrastText: '#FFF' }),
-        } });
-};
-
 const defaultMetadata = {
     theme: {},
+    themeV2: {},
     navigation: {
         usage: {
             visibility: 'hidden',
@@ -385,7 +193,7 @@ const defaultMetadata = {
 };
 class Metadata {
     constructor() {
-        this._theme = defaultMetadata.theme;
+        this._theme = defaultMetadata.themeV2;
         this._navigation = defaultMetadata.navigation;
     }
     static getInstance(name = 'default') {
@@ -408,14 +216,15 @@ class Metadata {
         return (_a = this._navigation) !== null && _a !== void 0 ? _a : {};
     }
     set(metadata) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         try {
             this._navigation = deepMerge.all([(_a = defaultMetadata.navigation) !== null && _a !== void 0 ? _a : {}, (_b = metadata === null || metadata === void 0 ? void 0 : metadata.navigation) !== null && _b !== void 0 ? _b : {}]);
-            this._theme = deepMerge.all([(_c = defaultMetadata.theme) !== null && _c !== void 0 ? _c : {}, getPalette(metadata === null || metadata === void 0 ? void 0 : metadata.theme, defaultMetadata.theme)]);
+            this._theme = deepMerge.all([(_c = defaultMetadata.themeV2) !== null && _c !== void 0 ? _c : {}, (_d = metadata === null || metadata === void 0 ? void 0 : metadata.themeV2) !== null && _d !== void 0 ? _d : {}]);
+            debugger;
         }
         catch (e) {
             this._navigation = defaultMetadata.navigation;
-            this._theme = defaultMetadata.theme;
+            this._theme = defaultMetadata.themeV2;
         }
     }
 }

package/node/index.js

@@ -134,201 +134,9 @@ var deepmerge_1 = deepmerge;
 
 var cjs = deepmerge_1;
 
-/**
- * Returns a number whose value is limited to the given range.
- * @param {number} value The value to be clamped
- * @param {number} min The lower boundary of the output range
- * @param {number} max The upper boundary of the output range
- * @returns {number} A number in the range [min, max]
- */
-function clamp(value, min = 0, max = 1) {
-    return Math.min(Math.max(min, value), max);
-}
-/**
- * Converts a color from CSS hex format to CSS rgb format.
- * @param {string} color - Hex color, i.e. #nnn or #nnnnnn
- * @returns {string} A CSS rgb color string
- */
-function hexToRgb(color) {
-    color = color.substr(1);
-    const re = new RegExp(`.{1,${color.length >= 6 ? 2 : 1}}`, 'g');
-    let colors = color.match(re);
-    if (colors && colors[0].length === 1) {
-        colors = colors.map((n) => n + n);
-    }
-    return colors
-        ? `rgb${colors.length === 4 ? 'a' : ''}(${colors
-            .map((n, index) => {
-            return index < 3 ? parseInt(n, 16) : Math.round((parseInt(n, 16) / 255) * 1000) / 1000;
-        })
-            .join(', ')})`
-        : '';
-}
-function intToHex(int) {
-    const hex = int.toString(16);
-    return hex.length === 1 ? `0${hex}` : hex;
-}
-/**
- * Returns an object with the type and values of a color.
- *
- * Note: Does not support rgb % values.
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
- * @returns {object} - A MUI color object: {type: string, values: number[]}
- */
-function decomposeColor(color) {
-    // Idempotent
-    if (color.type) {
-        return color;
-    }
-    if (color.charAt(0) === '#') {
-        return decomposeColor(hexToRgb(color));
-    }
-    const marker = color.indexOf('(');
-    const type = color.substring(0, marker);
-    if (['rgb', 'rgba', 'hsl', 'hsla', 'color'].indexOf(type) === -1) {
-        throw new Error('MUI: Unsupported `%s` color.\n' +
-            'The following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color(). ' + color);
-    }
-    let values = color.substring(marker + 1, color.length - 1);
-    let colorSpace;
-    if (type === 'color') {
-        values = values.split(' ');
-        colorSpace = values.shift();
-        if (values.length === 4 && values[3].charAt(0) === '/') {
-            values[3] = values[3].substr(1);
-        }
-        if (['srgb', 'display-p3', 'a98-rgb', 'prophoto-rgb', 'rec-2020'].indexOf(colorSpace) === -1) {
-            throw new Error('MUI: unsupported `%s` color space.\n' +
-                'The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rgb, rec-2020.' + colorSpace);
-        }
-    }
-    else {
-        values = values.split(',');
-    }
-    values = values.map((value) => parseFloat(value));
-    return { type, values, colorSpace };
-}
-/**
- * Converts a color object with type and values to a string.
- * @param {object} color - Decomposed color
- * @param {string} color.type - One of: 'rgb', 'rgba', 'hsl', 'hsla'
- * @param {array} color.values - [n,n,n] or [n,n,n,n]
- * @returns {string} A CSS color string
- */
-function recomposeColor(color) {
-    const { type, colorSpace } = color;
-    let { values } = color;
-    if (type.indexOf('rgb') !== -1) {
-        // Only convert the first 3 values to int (i.e. not alpha)
-        values = values.map((n, i) => (i < 3 ? parseInt(n, 10) : n));
-    }
-    else if (type.indexOf('hsl') !== -1) {
-        values[1] = `${values[1]}%`;
-        values[2] = `${values[2]}%`;
-    }
-    if (type.indexOf('color') !== -1) {
-        values = `${colorSpace} ${values.join(' ')}`;
-    }
-    else {
-        values = `${values.join(', ')}`;
-    }
-    return `${type}(${values})`;
-}
-/**
- * Converts a color from CSS rgb format to CSS hex format.
- * @param {string} color - RGB color, i.e. rgb(n, n, n)
- * @returns {string} A CSS rgb color string, i.e. #nnnnnn
- */
-function rgbToHex(color) {
-    // Idempotent
-    if (color.indexOf('#') === 0) {
-        return color;
-    }
-    const { values } = decomposeColor(color);
-    return `#${values.map((n, i) => intToHex(i === 3 ? Math.round(255 * n) : n)).join('')}`;
-}
-/**
- * Darkens a color.
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
- * @param {number} coefficient - multiplier in the range 0 - 1
- * @returns {string} A CSS color string. Hex input values are returned as rgb
- */
-function darken(color, coefficient) {
-    color = decomposeColor(color);
-    coefficient = clamp(coefficient);
-    if (color.type.indexOf('hsl') !== -1) {
-        color.values[2] *= 1 - coefficient;
-    }
-    else if (color.type.indexOf('rgb') !== -1 || color.type.indexOf('color') !== -1) {
-        for (let i = 0; i < 3; i += 1) {
-            color.values[i] *= 1 - coefficient;
-        }
-    }
-    return recomposeColor(color);
-}
-/**
- * Lightens a color.
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
- * @param {number} coefficient - multiplier in the range 0 - 1
- * @returns {string} A CSS color string. Hex input values are returned as rgb
- */
-function lighten(color, coefficient) {
-    color = decomposeColor(color);
-    coefficient = clamp(coefficient);
-    if (color.type.indexOf('hsl') !== -1) {
-        color.values[2] += (100 - color.values[2]) * coefficient;
-    }
-    else if (color.type.indexOf('rgb') !== -1) {
-        for (let i = 0; i < 3; i += 1) {
-            color.values[i] += (255 - color.values[i]) * coefficient;
-        }
-    }
-    else if (color.type.indexOf('color') !== -1) {
-        for (let i = 0; i < 3; i += 1) {
-            color.values[i] += (1 - color.values[i]) * coefficient;
-        }
-    }
-    return recomposeColor(color);
-}
-
-const generateMainColorObject = (color) => {
-    if (!!color) {
-        return {
-            main: color,
-            light: rgbToHex(lighten(color, 0.4)),
-            dark: rgbToHex(darken(color, 0.15)),
-            hover: rgbToHex(darken(color, 0.15)),
-            active: rgbToHex(darken(color, 0.20)),
-        };
-    }
-};
-const generateSubColorObject = (color) => {
-    if (!!color) {
-        return {
-            main: color,
-            light: lighten(color, 0.7),
-            dark: darken(color, 0.2),
-        };
-    }
-};
-const getPalette = (theme, defaultTheme) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-    if (!(theme === null || theme === void 0 ? void 0 : theme.palette) || typeof ((_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.primary) !== 'string') {
-        return {};
-    }
-    return Object.assign(Object.assign({}, defaultTheme), { palette: {
-            primary: Object.assign(Object.assign({}, generateMainColorObject((_b = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _b === void 0 ? void 0 : _b.primary)), { contrastText: (_d = (_c = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _c === void 0 ? void 0 : _c.primaryText) !== null && _d !== void 0 ? _d : '#000000' }),
-            secondary: Object.assign(Object.assign({}, generateMainColorObject((_e = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _e === void 0 ? void 0 : _e.secondary)), { contrastText: (_g = (_f = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _f === void 0 ? void 0 : _f.secondaryText) !== null && _g !== void 0 ? _g : '#000000' }),
-            danger: Object.assign(Object.assign({}, generateMainColorObject((_h = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _h === void 0 ? void 0 : _h.error)), { contrastText: '#FFF' }),
-            success: Object.assign(Object.assign({}, generateSubColorObject((_j = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _j === void 0 ? void 0 : _j.success)), { contrastText: '#FFF' }),
-            error: Object.assign(Object.assign({}, generateSubColorObject((_k = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _k === void 0 ? void 0 : _k.error)), { contrastText: '#FFF' }),
-            warning: Object.assign(Object.assign({}, generateSubColorObject((_l = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _l === void 0 ? void 0 : _l.warning)), { contrastText: '#FFF' }),
-            info: Object.assign(Object.assign({}, generateSubColorObject((_m = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _m === void 0 ? void 0 : _m.info)), { contrastText: '#FFF' }),
-        } });
-};
-
 const defaultMetadata = {
     theme: {},
+    themeV2: {},
     navigation: {
         usage: {
             visibility: 'hidden',
@@ -387,7 +195,7 @@ const defaultMetadata = {
 };
 class Metadata {
     constructor() {
-        this._theme = defaultMetadata.theme;
+        this._theme = defaultMetadata.themeV2;
         this._navigation = defaultMetadata.navigation;
     }
     static getInstance(name = 'default') {
@@ -410,14 +218,15 @@ class Metadata {
         return (_a = this._navigation) !== null && _a !== void 0 ? _a : {};
     }
     set(metadata) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         try {
             this._navigation = cjs.all([(_a = defaultMetadata.navigation) !== null && _a !== void 0 ? _a : {}, (_b = metadata === null || metadata === void 0 ? void 0 : metadata.navigation) !== null && _b !== void 0 ? _b : {}]);
-            this._theme = cjs.all([(_c = defaultMetadata.theme) !== null && _c !== void 0 ? _c : {}, getPalette(metadata === null || metadata === void 0 ? void 0 : metadata.theme, defaultMetadata.theme)]);
+            this._theme = cjs.all([(_c = defaultMetadata.themeV2) !== null && _c !== void 0 ? _c : {}, (_d = metadata === null || metadata === void 0 ? void 0 : metadata.themeV2) !== null && _d !== void 0 ? _d : {}]);
+            debugger;
         }
         catch (e) {
             this._navigation = defaultMetadata.navigation;
-            this._theme = defaultMetadata.theme;
+            this._theme = defaultMetadata.themeV2;
         }
     }
 }