@webpros/mui-theme 0.1.6 → 0.2.0

package/dist/src/tokens/colors/stateLayers.d.ts

@@ -0,0 +1,456 @@
+import { RecursiveKeyOf, GeneratedRgba } from './types';
+export type StateLayers = {
+    base: {
+        primary: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity28: string;
+            opacity38: string;
+            opacity10: string;
+            opacity72: string;
+        };
+        onPrimary: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity10: string;
+            opacity38: string;
+            opacity28: string;
+        };
+        primaryContainer: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity10: string;
+        };
+        onPrimaryContainer: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity20: string;
+            opacity10: string;
+            opacity38: string;
+            opacity28: string;
+        };
+        secondary: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity28: string;
+            opacity48: string;
+            opacity10: string;
+        };
+        onSecondary: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity10: string;
+            opacity28: string;
+            opacity38: string;
+            opacity20: string;
+        };
+        secondaryContainer: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity10: string;
+        };
+        onSecondaryContainer: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity20: string;
+            opacity10: string;
+            opacity28: string;
+            opacity38: string;
+        };
+        tertiary: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity10: string;
+        };
+        onTertiary: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity10: string;
+            opacity28: string;
+            opacity38: string;
+            opacity20: string;
+        };
+        tertiaryContainer: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity10: string;
+        };
+        onTertiaryContainer: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity10: string;
+        };
+    };
+    fixed: {
+        primaryFixed: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity10: string;
+        };
+        onPrimaryFixed: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity10: string;
+        };
+        primaryFixedDim: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity10: string;
+        };
+        onPrimaryFixedVariant: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity10: string;
+        };
+        secondaryFixed: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity10: string;
+        };
+        onSecondaryFixed: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity10: string;
+        };
+        secondaryFixedDim: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity10: string;
+        };
+        onSecondaryFixedVariant: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity10: string;
+        };
+        tertiaryFixed: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity10: string;
+        };
+        onTertiaryFixed: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity10: string;
+        };
+        tertiaryFixedDim: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity10: string;
+        };
+        onTertiaryFixedVariant: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity10: string;
+        };
+    };
+    status: {
+        error: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity28: string;
+            opacity48: string;
+            opacity10: string;
+        };
+        onError: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity10: string;
+            opacity38: string;
+            opacity28: string;
+        };
+        errorContainer: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity10: string;
+        };
+        onErrorContainer: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity20: string;
+            opacity10: string;
+            opacity38: string;
+            opacity28: string;
+        };
+        warning: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity28: string;
+            opacity48: string;
+        };
+        info: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity28: string;
+            opacity48: string;
+        };
+        success: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity28: string;
+            opacity48: string;
+        };
+        onWarning: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity38: string;
+        };
+        onSuccess: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity38: string;
+            opacity28: string;
+        };
+        onInfo: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity38: string;
+            opacity28: string;
+        };
+        onSuccessContainer: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity20: string;
+            opacity38: string;
+            opacity28: string;
+        };
+        onWarningContainer: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity20: string;
+            opacity38: string;
+            opacity28: string;
+        };
+        onInfoContainer: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity20: string;
+            opacity38: string;
+            opacity28: string;
+        };
+        onUndefined: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity38: string;
+            opacity28: string;
+        };
+        onUndefinedContainer: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity20: string;
+            opacity38: string;
+            opacity28: string;
+        };
+        undefined: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity28: string;
+            opacity48: string;
+        };
+        warningContainer: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+        };
+        successContainer: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+        };
+        infoContainer: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity38: string;
+        };
+        undefinedContainer: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+        };
+    };
+    surfaces: {
+        outline: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity48: string;
+            opacity10: string;
+        };
+        background: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity28: string;
+            opacity48: string;
+            opacity10: string;
+        };
+        onBackground: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity28: string;
+            opacity48: string;
+            opacity10: string;
+        };
+        surface: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity10: string;
+        };
+        onSurface: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity48: string;
+            opacity28: string;
+            opacity06: string;
+            opacity38: string;
+            opacity10: string;
+            opacity20: string;
+        };
+        surfaceVariant: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity10: string;
+        };
+        onSurfaceVariant: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity38: string;
+            opacity10: string;
+        };
+        shadow: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity10: string;
+        };
+        surfaceTint: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity10: string;
+        };
+        scrim: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity48: string;
+            opacity10: string;
+        };
+        surfaceContainerHighest: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity10: string;
+        };
+        surfaceContainerHigh: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity10: string;
+        };
+        surfaceContainer: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity10: string;
+        };
+        surfaceContainerLow: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity10: string;
+        };
+        surfaceContainerLowest: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity10: string;
+            opacity86: string;
+        };
+        surfaceBright: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity10: string;
+        };
+        surfaceDim: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity10: string;
+        };
+    };
+    stateLayers: {
+        basePrimary: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity64: string;
+        };
+        surfacesOnSurface: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity28: string;
+            opacity38: string;
+            opacity48: string;
+            opacity64: string;
+            opacity10: string;
+        };
+        surfacesOnSurfaceVariant: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity28: string;
+            opacity48: string;
+            opacity64: string;
+        };
+    };
+};
+export type StateLayersKey = `stateLayers.${RecursiveKeyOf<StateLayers>}`;
+export type StateLayersGenerated = Record<StateLayersKey, GeneratedRgba>;

package/dist/src/tokens/colors/stateLayers.js

@@ -0,0 +1,3 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+// Auto-generated file - do not edit manually
+export {};

package/dist/src/tokens/colors/types.d.ts

@@ -0,0 +1,9 @@
+export type GeneratedRgba = {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+};
+export type RecursiveKeyOf<T> = T extends object ? T extends readonly unknown[] ? RecursiveKeyOf<T[number]> : {
+    [K in keyof T]: T[K] extends string ? K extends string ? K extends `${string}GeneratedRgba` ? never : K : never : T[K] extends object ? T[K] extends readonly unknown[] ? never : K extends string ? `${K}.${RecursiveKeyOf<T[K]>}` : never : never;
+}[keyof T] : never;

package/dist/src/tokens/colors/types.js

@@ -0,0 +1,2 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+export {};

package/dist/src/tokens/index.d.ts

@@ -1,2 +1,6 @@
-export type { AdditionalColorKey } from './ThemeColorTokens';
-export type { AdditionalColorTone } from './Tone';
+export type { AdditionalColorKey } from './legacyColors/additionalColors';
+export type { AdditionalColorTone } from './legacyColors/Tone';
+export type { TypescaleTypographyVariants } from './typography';
+export { typographyVariants } from './typography';
+export type { M3ShadowLayer, M3ShadowTokenName, M3ShadowTokens } from './shadows';
+export { muiShadows, shadowCssValues, shadowTokens } from './shadows';

package/dist/src/tokens/index.js

@@ -1,2 +1,3 @@
 // Copyright 2025 WebPros International GmbH. All rights reserved.
-export {};
+export { typographyVariants } from './typography';
+export { muiShadows, shadowCssValues, shadowTokens } from './shadows';

package/dist/src/tokens/legacyColors/LegacyDark.d.ts

@@ -0,0 +1,2 @@
+import { ThemeColorTokensLegacy } from '../../tokens/legacyColors/ThemeColorTokensLegacy';
+export declare const LegacyDarkTokensDefault: ThemeColorTokensLegacy;

package/dist/src/tokens/legacyColors/LegacyDark.js

@@ -0,0 +1,88 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+import { additionalColors } from '../../tokens/legacyColors/additionalColors';
+// reference
+// https://www.figma.com/design/RPLeGa2LdhKElQQ0xIXtSh/WebPros-dashboard?node-id=53699-35493&t=pvKyGGnGRUL3kYn8-1
+export const LegacyDarkTokensDefault = {
+    primary: '#B09BEF',
+    onPrimary: '#19132D',
+    primaryContainer: '#4E388E',
+    onPrimaryContainer: '#F9F7FF',
+    secondary: '#9497AC',
+    onSecondary: '#23242A',
+    secondaryContainer: '#464854',
+    onSecondaryContainer: '#EDEEF1',
+    tertiary: '#8FAAB6',
+    onTertiary: '#3B4347',
+    tertiaryContainer: '#325261',
+    onTertiaryContainer: '#EDF0F1',
+    error: '#FA7A9A',
+    onError: '#68182C',
+    errorContainer: '#8C3148',
+    onErrorContainer: '#FFF2F5',
+    errorFixedDim: '#EF5350',
+    primaryFixed: '#E7DFFF',
+    primaryFixedDim: '#D0C0FF',
+    onPrimaryFixed: '#281C4C',
+    onPrimaryFixedVariant: '#4F4178',
+    secondaryFixed: '#E4E5F0',
+    secondaryFixedDim: '#C8CBD9',
+    onSecondaryFixed: '#1A1C2C',
+    onSecondaryFixedVariant: '#454859',
+    tertiaryFixed: '#D6E7EF',
+    tertiaryFixedDim: '#B9DAEA',
+    onTertiaryFixed: '#11262F',
+    onTertiaryFixedVariant: '#3C5560',
+    surface: '#222326',
+    onSurface: '#E5E7F3',
+    surfaceDim: '#131418',
+    surfaceBright: '#38393F',
+    surfaceContainerLowest: '#31323A',
+    surfaceContainerLow: '#25262C',
+    surfaceContainer: '#202126',
+    surfaceContainerHigh: '#1A1B20',
+    surfaceContainerHighest: '#16171A',
+    surfaceVariant: '#2B2C31',
+    onSurfaceVariant: '#AFB3C5',
+    outline: '#7F8293',
+    outlineVariant: '#454652',
+    inverseSurface: '#D9DBE4',
+    inverseOnSurface: '#222326',
+    inversePrimary: '#644EA5',
+    shadow: '#000000',
+    scrim: '#000000',
+    surfaceTint: '#9E8DD3',
+    background: '#151517',
+    onBackground: '#E2E4EE',
+    // custom colors
+    info: '#5696CE',
+    onInfo: '#0A253A',
+    infoContainer: '#124771',
+    onInfoContainer: '#E0ECF6',
+    infoFixedDim: '#03A9F4',
+    // ok
+    success: '#6EBB72',
+    onSuccess: '#0C440F',
+    successContainer: '#125F16',
+    onSuccessContainer: '#F1FDF1',
+    successFixedDim: '#4CAF50',
+    warning: '#DC8A4F',
+    onWarning: '#4E2305',
+    warningContainer: '#7B3C0F',
+    onWarningContainer: '#FAF0E9',
+    warningFixedDim: '#FF9800',
+    // ok
+    undefined: '#9BABB3',
+    onUndefined: '#2A3438',
+    undefinedContainer: '#3D464D',
+    onUndefinedContainer: '#E4EBF0',
+    supportive: '#8FAAB6',
+    // Custom accent colors matching with the theme.
+    // Should not be used in MUI components directly (i.e. for setting background/text somewhere) inside customization.
+    // Only for outer usage
+    // reference -
+    // Charts
+    // https://www.figma.com/design/RPLeGa2LdhKElQQ0xIXtSh/WebPros-dashboard?node-id=7648-60043&t=DhlQVfQGF7gEbkuU-0
+    // Colors
+    // https://www.figma.com/design/RPLeGa2LdhKElQQ0xIXtSh/WebPros-dashboard?node-id=7648-60043&t=DhlQVfQGF7gEbkuU-0
+    additionalColors,
+};

package/dist/src/tokens/legacyColors/LegacyLight.d.ts

@@ -0,0 +1,2 @@
+import { ThemeColorTokensLegacy } from '../../tokens/legacyColors/ThemeColorTokensLegacy';
+export declare const LegacyLightTokensDefault: ThemeColorTokensLegacy;

package/dist/src/tokens/legacyColors/LegacyLight.js

@@ -0,0 +1,86 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+import { additionalColors } from '../../tokens/legacyColors/additionalColors';
+// reference
+// https://www.figma.com/design/RPLeGa2LdhKElQQ0xIXtSh/WebPros-dashboard?node-id=53699-35493&t=pvKyGGnGRUL3kYn8-1
+export const LegacyLightTokensDefault = {
+    primary: '#4527A0',
+    onPrimary: '#FFFFFF',
+    primaryContainer: '#E2DFFF',
+    onPrimaryContainer: '#1E1A69',
+    secondary: '#5F6690',
+    onSecondary: '#FFFFFF',
+    secondaryContainer: '#D3D5E3',
+    onSecondaryContainer: '#282B40',
+    tertiary: '#546E7A',
+    onTertiary: '#FFFFFF',
+    tertiaryContainer: '#DAE9F0',
+    onTertiaryContainer: '#11262F',
+    error: '#BA1A1A',
+    onError: '#FFFFFF',
+    errorContainer: '#FFDAD6',
+    onErrorContainer: '#940E0F',
+    errorFixedDim: '#EF5350',
+    primaryFixed: '#E7DFFF',
+    primaryFixedDim: '#D0C0FF',
+    onPrimaryFixed: '#281C4C',
+    onPrimaryFixedVariant: '#4F4178',
+    secondaryFixed: '#E4E5F0',
+    secondaryFixedDim: '#C8CBD9',
+    onSecondaryFixed: '#1A1C2C',
+    onSecondaryFixedVariant: '#454859',
+    tertiaryFixed: '#D6E7EF',
+    tertiaryFixedDim: '#B9DAEA',
+    onTertiaryFixed: '#11262F',
+    onTertiaryFixedVariant: '#3C5560',
+    surface: '#F2F3FA',
+    onSurface: '#1B1C21',
+    surfaceDim: '#CED0E0',
+    surfaceBright: '#EDF0FF',
+    surfaceContainerLowest: '#FFFFFF',
+    surfaceContainerLow: '#E7E9F4',
+    surfaceContainer: '#E4E5F0',
+    surfaceContainerHigh: '#FFFFFF',
+    surfaceContainerHighest: '#DDDFED',
+    surfaceVariant: '#E4E6F0',
+    onSurfaceVariant: '#505263',
+    outline: '#8C8E96',
+    outlineVariant: '#EEEEF1',
+    inverseSurface: '#313036',
+    inverseOnSurface: '#F3EFF7',
+    inversePrimary: '#D0C0FF',
+    shadow: '#000000',
+    scrim: '#000000',
+    surfaceTint: '#5D4D8D',
+    background: '#E9EBF6',
+    onBackground: '#1B1C21',
+    // custom colors
+    info: '#0373CE',
+    onInfo: '#FFFFFF',
+    infoContainer: '#C8E8FF',
+    onInfoContainer: '#094A94',
+    infoFixedDim: '#03A9F4',
+    success: '#2D8731',
+    onSuccess: '#FFFFFF',
+    successContainer: '#CAEFCD',
+    onSuccessContainer: '#0F5C13',
+    successFixedDim: '#4CAF50',
+    warning: '#C75300',
+    onWarning: '#FFFFFF',
+    warningContainer: '#FFE0B2',
+    onWarningContainer: '#892303',
+    warningFixedDim: '#FF9800',
+    undefined: '#90A4AE',
+    onUndefined: '#FFFFFF',
+    undefinedContainer: '#DFE2E4',
+    onUndefinedContainer: '#263238',
+    supportive: '#546E7A',
+    // Custom accent colors matching with the theme.
+    // Should not be used in MUI components directly (i.e. for setting background/text somewhere) inside customization.
+    // Only for outer usage
+    // reference -
+    // Charts
+    // https://www.figma.com/design/RPLeGa2LdhKElQQ0xIXtSh/WebPros-dashboard?node-id=7648-60043&t=DhlQVfQGF7gEbkuU-0
+    // Colors
+    // https://www.figma.com/design/RPLeGa2LdhKElQQ0xIXtSh/WebPros-dashboard?node-id=7648-60043&t=DhlQVfQGF7gEbkuU-0
+    additionalColors,
+};