@webpros/mui-theme 0.1.6 → 0.3.0

package/dist/src/components/inputs/Button/Button.theme.js

@@ -1,241 +1,108 @@
 // Copyright 2025 WebPros International GmbH. All rights reserved.
-import { alpha, } from '@mui/material';
-import { StateLayer, getStateLayerColor } from '../../../utils/getStateLayerColor';
+import { flatten } from '../../../utils/flatten';
+import { buttonClasses, circularProgressClasses, iconButtonClasses, touchRippleClasses, } from '@mui/material';
+import { getButtonColorsMap } from './get-button-colors-map';
+import { rippleEnterKeyframe } from '../../../shared/rippleEnterKeyframe';
 export const getButton = (theme) => {
-    const { palette } = theme;
-    return {
-        MuiButton: {
-            styleOverrides: {
-                root: {
-                    height: 40,
-                    minWidth: 0,
-                    padding: '0 6px',
-                    borderRadius: 14,
-                    textTransform: 'none',
-                    fontWeight: 500,
-                    '&.Mui-disabled': {
-                        color: alpha(palette.onSurface.main, 0.38),
+    const { typography } = theme;
+    const sizes = [
+        {
+            props: { size: 'small' },
+            style: Object.assign(Object.assign({}, typography.LabelSmall), { padding: '2px 8px', height: 20, borderRadius: '17px', 
+                // `!important` is the only way in this case to rewrite loader icon size
+                [`& .${circularProgressClasses.root}`]: {
+                    width: '12px !important',
+                    height: '12px !important',
+                } }),
+        },
+        {
+            props: { size: 'medium' },
+            style: Object.assign(Object.assign({}, typography.LabelMedium), { borderRadius: '17px', height: 34, padding: '7px 17px' }),
+        },
+        {
+            props: { size: 'large' },
+            style: Object.assign(Object.assign({}, typography.LabelLarge), { borderRadius: '24px', height: 42, padding: '9px 24px' }),
+        },
+    ];
+    const getStylesByColor = (color, viewContext) => {
+        const colorsMap = getButtonColorsMap(theme);
+        const inverseColorsMap = getButtonColorsMap(theme, 'inverse');
+        const colorsPalette = viewContext === 'inverse' ? inverseColorsMap[color] : colorsMap[color];
+        // variants = [filled?, tonal, ghost]
+        const variantsStyles = Object.entries(colorsPalette).map(([variant, variantColors]) => [
+            {
+                props: { variant: variant, color, viewContext },
+                style: {
+                    background: variantColors.background,
+                    color: variantColors.color,
+                    '&:hover': {
+                        background: variantColors.hover,
+                    },
+                    '&:active': {
+                        background: variantColors.active,
+                    },
+                    '&:focus': {
+                        background: variantColors.focus,
+                    },
+                    [`& .${touchRippleClasses.ripple}.${touchRippleClasses.rippleVisible}`]: {
+                        color: variantColors.ripple,
                     },
-                    '.MuiButton-startIcon': { marginRight: 4 },
-                    '.MuiButton-endIcon': { marginLeft: 4 },
                 },
             },
-            variants: [
-                {
-                    props: { size: 'small' },
-                    style: {
-                        height: 32,
-                        borderRadius: 10,
-                        fontSize: '0.875rem',
-                    },
-                },
-                {
-                    props: { variant: 'filled' },
-                    style: {
-                        backgroundColor: palette.primary.main,
-                        color: palette.onPrimary.main,
-                        boxShadow: theme.shadows[0],
-                        padding: '0 24px',
-                        '&:hover': {
-                            backgroundColor: getStateLayerColor(StateLayer.Hover, palette.primary.main, palette.onPrimary.main),
-                            boxShadow: theme.shadows[1],
-                        },
-                        '&:focus': {
-                            backgroundColor: getStateLayerColor(StateLayer.Focus, palette.primary.main, palette.onPrimary.main),
-                            boxShadow: theme.shadows[0],
-                        },
-                        '&:active': {
-                            backgroundColor: getStateLayerColor(StateLayer.Press, palette.primary.main, palette.onPrimary.main),
-                            boxShadow: theme.shadows[0],
-                            outline: `2px solid ${getStateLayerColor(StateLayer.Press, palette.primary.main, palette.onPrimary.main)}`,
-                            outlineOffset: 2,
-                        },
-                        '&.Mui-disabled': {
-                            backgroundColor: alpha(palette.onSurface.main, 0.04),
-                            boxShadow: theme.shadows[0],
-                        },
-                        '.MuiButton-startIcon': { marginLeft: -8 },
-                        '.MuiButton-endIcon': { marginRight: -8 },
-                    },
-                },
-                {
-                    props: { variant: 'filled', size: 'small' },
-                    style: {
-                        padding: '0 12px',
-                        '.MuiButton-startIcon': { marginLeft: -4 },
-                        '.MuiButton-endIcon': { marginRight: -4 },
-                    },
-                },
-                {
-                    props: { variant: 'outlined' },
-                    style: {
-                        color: palette.primary.main,
-                        borderColor: palette.outline.main,
-                        borderWidth: 1,
-                        padding: '0 24px',
-                        '&:hover': {
-                            backgroundColor: alpha(palette.primary.main, 0.08),
-                            borderColor: palette.outline.main,
-                        },
-                        '&:focus': {
-                            backgroundColor: alpha(palette.primary.main, 0.12),
-                            borderColor: palette.primary.main,
-                        },
-                        '&:active': {
-                            backgroundColor: alpha(palette.primary.main, 0.12),
-                            borderColor: palette.outline.main,
-                        },
-                        '&.Mui-disabled': {
-                            borderColor: alpha(palette.onSurface.main, 0.12),
-                        },
-                        '.MuiButton-startIcon': { marginLeft: -8 },
-                        '.MuiButton-endIcon': { marginRight: -8 },
-                    },
-                },
-                {
-                    props: { variant: 'outlined', size: 'small' },
-                    style: {
-                        padding: '0 12px',
-                        '.MuiButton-startIcon': { marginLeft: 0 },
-                        '.MuiButton-endIcon': { marginRight: 0 },
-                    },
-                },
-                {
-                    props: { variant: 'text' },
-                    style: {
-                        backgroundColor: 'transparent',
-                        color: palette.primary.main,
-                        '&:hover': {
-                            backgroundColor: alpha(palette.primary.main, 0.08),
-                        },
-                        '&:focus': {
-                            backgroundColor: alpha(palette.primary.main, 0.12),
-                        },
-                        '&:active': {
-                            backgroundColor: alpha(palette.primary.main, 0.12),
-                        },
-                        '.MuiButton-startIcon': { marginLeft: -2 },
-                        '.MuiButton-endIcon': { marginRight: -2 },
-                    },
-                },
-                {
-                    props: { variant: 'text', size: 'small' },
-                    style: {
-                        padding: '0 6px',
+            {
+                props: { variant: variant, color, viewContext, disabled: true },
+                style: {
+                    [`&.${buttonClasses.disabled}`]: {
+                        color: variantColors.disabledColor,
+                        background: variantColors.disabledBackground,
                     },
                 },
-                {
-                    props: { variant: 'ghost' },
-                    style: {
-                        backgroundColor: 'transparent',
-                        color: palette.onSurfaceVariant.main,
-                        '&:hover': {
-                            backgroundColor: alpha(palette.primary.main, 0.08),
-                        },
-                        '&:focus': {
-                            backgroundColor: alpha(palette.primary.main, 0.12),
-                        },
-                        '&:active': {
-                            backgroundColor: alpha(palette.primary.main, 0.12),
-                        },
-                        '& .MuiButton-startIcon': {
-                            marginRight: 4,
-                        },
-                        '.MuiButton-startIcon': { marginLeft: -2 },
-                        '.MuiButton-endIcon': { marginRight: -2 },
-                    },
-                },
-                {
-                    props: { variant: 'ghost', size: 'small' },
-                    style: {
-                        padding: '0 6px',
-                    },
-                },
-                {
-                    props: { variant: 'elevated' },
-                    style: {
-                        boxShadow: theme.shadows[1],
-                        backgroundColor: palette.surfaceContainerLow.main,
-                        color: palette.primary.main,
-                        padding: '0 24px',
-                        '&:hover': {
-                            background: getStateLayerColor(StateLayer.Hover, palette.surfaceContainerLow.main, palette.primary.main),
-                            boxShadow: theme.shadows[2],
-                        },
-                        '&:focus': {
-                            background: getStateLayerColor(StateLayer.Focus, palette.surfaceContainerLow.main, palette.primary.main),
-                        },
-                        '&:active': {
-                            background: getStateLayerColor(StateLayer.Press, palette.surfaceContainerLow.main, palette.primary.main),
-                        },
-                        '&.Mui-disabled': {
-                            backgroundColor: alpha(palette.onSurface.main, 0.04),
-                            boxShadow: theme.shadows[0],
-                        },
-                        '.MuiButton-startIcon': { marginLeft: -8 },
-                        '.MuiButton-endIcon': { marginRight: -8 },
-                    },
-                },
-                {
-                    props: { variant: 'elevated', size: 'small' },
-                    style: {
-                        padding: '0 12px',
-                        '.MuiButton-startIcon': { marginLeft: -4 },
-                        '.MuiButton-endIcon': { marginRight: -4 },
-                    },
-                },
-                {
-                    props: { variant: 'tonal' },
-                    style: {
-                        backgroundColor: palette.secondaryContainer.main,
-                        color: palette.onSecondaryContainer.main,
-                        padding: '0 24px',
-                        '&:hover': {
-                            backgroundColor: palette.primary.main,
-                            color: palette.onPrimary.main,
-                        },
-                        '&:focus': {
-                            backgroundColor: getStateLayerColor(StateLayer.Focus, palette.primary.main, palette.onSecondaryContainer.main),
-                            color: palette.onPrimary.main,
-                        },
-                        '&:active': {
-                            backgroundColor: getStateLayerColor(StateLayer.Press, palette.primary.main, palette.onSecondaryContainer.main),
-                            color: palette.onPrimary.main,
-                            outline: `2px solid ${getStateLayerColor(StateLayer.Press, palette.primary.main, palette.onSecondaryContainer.main)}`,
-                            outlineOffset: 2,
-                        },
-                        '&.Mui-disabled': {
-                            backgroundColor: alpha(palette.onSurface.main, 0.04),
-                        },
-                        '.MuiButton-startIcon': { marginLeft: -8 },
-                        '.MuiButton-endIcon': { marginRight: -8 },
-                    },
-                },
-                {
-                    props: { variant: 'tonal', size: 'small' },
-                    style: {
-                        padding: '0 12px',
-                        '.MuiButton-startIcon': { marginLeft: -4 },
-                        '.MuiButton-endIcon': { marginRight: -4 },
+            },
+            {
+                props: { variant: variant, color, viewContext, loading: true },
+                style: {
+                    [`&.${iconButtonClasses.disabled}`]: {
+                        color: variantColors.loadingColor,
+                        background: variantColors.loadingBackground,
                     },
-                },
-                {
-                    props: { variant: 'filled', color: 'error' },
-                    style: {
-                        backgroundColor: palette.error.main,
-                        color: palette.background.default,
-                        '&:hover': {
-                            backgroundColor: palette.error.main,
-                        },
+                    [`.${buttonClasses.loadingIndicator}`]: {
+                        color: variantColors.loadingIndicator,
                     },
                 },
-                {
-                    props: { variant: 'ghost', color: 'error' },
-                    style: {
-                        backgroundColor: 'transparent',
-                        color: palette.onSurface.main,
+            },
+        ]);
+        return flatten(variantsStyles);
+    };
+    return {
+        MuiButton: {
+            styleOverrides: {
+                root: {
+                    textTransform: 'none',
+                    boxShadow: 'none',
+                    '.MuiButton-startIcon': { marginRight: 4 },
+                    '.MuiButton-endIcon': { marginLeft: 4 },
+                    minWidth: 'auto', // Overriding for small buttons
+                    [`& .${touchRippleClasses.ripple}.${touchRippleClasses.rippleVisible}`]: {
+                        opacity: 1,
+                        animationName: rippleEnterKeyframe,
                     },
                 },
+            },
+            variants: [
+                // First we define size variants to ensure proper sizing. Do not couple size with variant and colors.
+                ...sizes,
+                // Now we define variants and colors. Name the variants and states according to the Figma file.
+                // Is there is required difference in namings - you should contract design team to clarify it and fix it.
+                ...getStylesByColor('primary'),
+                ...getStylesByColor('default'),
+                ...getStylesByColor('secondary'),
+                ...getStylesByColor('error'),
+                ...getStylesByColor('success'),
+                ...getStylesByColor('primary', 'inverse'),
+                ...getStylesByColor('default', 'inverse'),
+                ...getStylesByColor('secondary', 'inverse'),
+                ...getStylesByColor('error', 'inverse'),
+                ...getStylesByColor('success', 'inverse'),
             ],
         },
     };

package/dist/src/components/inputs/Button/get-button-colors-map.d.ts

@@ -0,0 +1,24 @@
+import { Theme } from '@mui/material';
+import { ViewContext } from '../../../shared/viewContext';
+type IconButtonColors = {
+    background: string;
+    color: string;
+    disabledBackground: string;
+    disabledColor: string;
+    loadingBackground: string;
+    loadingColor: string;
+    loadingIndicator: string;
+    hover: string;
+    active: string;
+    focus: string;
+    ripple?: string;
+};
+export type Variant = 'filled' | 'tonal' | 'ghost';
+export declare const getButtonColorsMap: (theme: Theme, viewContext?: ViewContext) => {
+    primary: Partial<Record<Variant, IconButtonColors>>;
+    default: Partial<Record<Variant, IconButtonColors>>;
+    secondary: Partial<Record<Variant, IconButtonColors>>;
+    error: Partial<Record<Variant, IconButtonColors>>;
+    success: Partial<Record<Variant, IconButtonColors>>;
+};
+export {};

package/dist/src/components/inputs/Button/get-button-colors-map.js

@@ -0,0 +1,211 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+// Here are extracted colors for `Button` and `IconButton` components, because they have the same color schemes.
+// Not applicable to other components
+export const getButtonColorsMap = (theme, viewContext) => {
+    const isInverseView = viewContext === 'inverse';
+    const { colors } = theme;
+    const schemesPath = isInverseView ? 'inverseSchemes' : 'schemes';
+    const stateLayersPath = isInverseView ? 'inverseStateLayers' : 'stateLayers';
+    const blendColors = isInverseView
+        ? colors.blendInverseSchemaWithStateLayer
+        : colors.blendSchemaWithStateLayer;
+    const PRIMARY_COLORS = {
+        filled: {
+            background: colors[schemesPath].base.primary,
+            color: colors[schemesPath].base.onPrimary,
+            disabledBackground: colors[stateLayersPath].surfaces.onSurface.opacity12,
+            disabledColor: colors[stateLayersPath].surfaces.onSurface.opacity38,
+            loadingBackground: colors[schemesPath].base.primary,
+            loadingColor: 'transparent',
+            loadingIndicator: colors[schemesPath].base.onPrimary,
+            hover: blendColors(`${schemesPath}.base.primary`, `${stateLayersPath}.base.onPrimary.opacity08`),
+            active: blendColors(`${schemesPath}.base.primary`, `${stateLayersPath}.base.onPrimary.opacity12`),
+            focus: blendColors(`${schemesPath}.base.primary`, `${stateLayersPath}.base.onPrimary.opacity12`),
+            ripple: colors[stateLayersPath].base.onPrimary.opacity12,
+        },
+        tonal: {
+            background: colors[schemesPath].base.primaryContainer,
+            color: colors[schemesPath].base.onPrimaryContainer,
+            disabledBackground: colors[stateLayersPath].surfaces.onSurface.opacity12,
+            disabledColor: colors[stateLayersPath].surfaces.onSurface.opacity38,
+            loadingBackground: colors[schemesPath].base.primaryContainer,
+            loadingColor: 'transparent',
+            loadingIndicator: colors[schemesPath].base.onPrimaryContainer,
+            hover: blendColors(`${schemesPath}.base.primaryContainer`, `${stateLayersPath}.base.onPrimaryContainer.opacity08`),
+            active: blendColors(`${schemesPath}.base.primaryContainer`, `${stateLayersPath}.base.onPrimaryContainer.opacity12`),
+            focus: blendColors(`${schemesPath}.base.primaryContainer`, `${stateLayersPath}.base.onPrimaryContainer.opacity12`),
+            ripple: colors[stateLayersPath].base.onPrimaryContainer.opacity12,
+        },
+        ghost: {
+            background: 'transparent',
+            color: colors[schemesPath].base.primary,
+            disabledBackground: 'transparent',
+            disabledColor: colors[stateLayersPath].surfaces.onSurface.opacity38,
+            loadingBackground: 'transparent',
+            loadingColor: 'transparent',
+            loadingIndicator: colors[schemesPath].base.primary,
+            hover: colors[stateLayersPath].base.primary.opacity08,
+            active: colors[stateLayersPath].base.primary.opacity12,
+            focus: colors[stateLayersPath].base.primary.opacity12,
+            ripple: colors[stateLayersPath].base.primary.opacity12,
+        },
+    };
+    const DEFAULT_COLORS = {
+        tonal: {
+            background: colors[schemesPath].surfaces.surfaceContainer,
+            color: colors[schemesPath].surfaces.onSurfaceVariant,
+            disabledBackground: colors[stateLayersPath].surfaces.onSurface.opacity12,
+            disabledColor: colors[stateLayersPath].surfaces.onSurface.opacity38,
+            loadingBackground: colors[schemesPath].surfaces.surfaceContainer,
+            loadingColor: 'transparent',
+            loadingIndicator: colors[schemesPath].surfaces.onSurfaceVariant,
+            hover: blendColors(`${schemesPath}.surfaces.surfaceContainer`, `${stateLayersPath}.surfaces.onSurfaceVariant.opacity08`),
+            active: blendColors(`${schemesPath}.surfaces.surfaceContainer`, `${stateLayersPath}.surfaces.onSurfaceVariant.opacity12`),
+            focus: blendColors(`${schemesPath}.surfaces.surfaceContainer`, `${stateLayersPath}.surfaces.onSurfaceVariant.opacity12`),
+            ripple: colors[stateLayersPath].surfaces.onSurfaceVariant.opacity12,
+        },
+        ghost: {
+            background: 'transparent',
+            color: colors[schemesPath].surfaces.onSurfaceVariant,
+            disabledBackground: 'transparent',
+            disabledColor: colors[stateLayersPath].surfaces.onSurface.opacity38,
+            loadingBackground: 'transparent',
+            loadingColor: 'transparent',
+            loadingIndicator: colors[schemesPath].surfaces.onSurfaceVariant,
+            hover: colors[stateLayersPath].surfaces.onSurfaceVariant.opacity08,
+            active: colors[stateLayersPath].surfaces.onSurfaceVariant.opacity12,
+            focus: colors[stateLayersPath].surfaces.onSurfaceVariant.opacity12,
+            ripple: colors[stateLayersPath].surfaces.onSurfaceVariant.opacity12,
+        },
+    };
+    const SECONDARY_COLORS = {
+        filled: {
+            background: colors[schemesPath].base.secondary,
+            color: colors[schemesPath].base.onSecondary,
+            disabledBackground: colors[stateLayersPath].surfaces.onSurface.opacity12,
+            disabledColor: colors[stateLayersPath].surfaces.onSurface.opacity38,
+            loadingBackground: colors[schemesPath].base.secondary,
+            loadingColor: 'transparent',
+            loadingIndicator: colors[schemesPath].base.onSecondary,
+            hover: blendColors(`${schemesPath}.base.secondary`, `${stateLayersPath}.base.onSecondary.opacity08`),
+            active: blendColors(`${schemesPath}.base.secondary`, `${stateLayersPath}.base.onSecondary.opacity12`),
+            focus: blendColors(`${schemesPath}.base.secondary`, `${stateLayersPath}.base.onSecondary.opacity12`),
+            ripple: colors[stateLayersPath].base.onSecondary.opacity12,
+        },
+        tonal: {
+            background: colors[schemesPath].base.secondaryContainer,
+            color: colors[schemesPath].base.onSecondaryContainer,
+            disabledBackground: colors[stateLayersPath].surfaces.onSurface.opacity12,
+            disabledColor: colors[stateLayersPath].surfaces.onSurface.opacity38,
+            loadingBackground: colors[schemesPath].base.secondaryContainer,
+            loadingColor: 'transparent',
+            loadingIndicator: colors[schemesPath].base.secondary,
+            hover: blendColors(`${schemesPath}.base.secondaryContainer`, `${stateLayersPath}.base.onSecondaryContainer.opacity08`),
+            active: blendColors(`${schemesPath}.base.secondaryContainer`, `${stateLayersPath}.base.onSecondaryContainer.opacity12`),
+            focus: blendColors(`${schemesPath}.base.secondaryContainer`, `${stateLayersPath}.base.onSecondaryContainer.opacity12`),
+            ripple: colors[stateLayersPath].base.onSecondaryContainer.opacity12,
+        },
+        ghost: {
+            background: 'transparent',
+            color: colors[schemesPath].base.secondary,
+            disabledBackground: 'transparent',
+            disabledColor: colors[stateLayersPath].surfaces.onSurface.opacity38,
+            loadingBackground: 'transparent',
+            loadingColor: 'transparent',
+            loadingIndicator: colors[schemesPath].base.secondary,
+            hover: colors[schemesPath].base.secondaryContainer,
+            active: blendColors(`${schemesPath}.base.secondaryContainer`, `${stateLayersPath}.base.secondary.opacity08`),
+            focus: blendColors(`${schemesPath}.base.secondaryContainer`, `${stateLayersPath}.base.secondary.opacity08`),
+            ripple: colors[stateLayersPath].base.secondary.opacity12,
+        },
+    };
+    const ERROR_COLORS = {
+        filled: {
+            background: colors[schemesPath].status.error,
+            color: colors[schemesPath].status.onError,
+            disabledBackground: colors[stateLayersPath].surfaces.onSurface.opacity12,
+            disabledColor: colors[stateLayersPath].surfaces.onSurface.opacity38,
+            loadingBackground: colors[schemesPath].status.error,
+            loadingColor: 'transparent',
+            loadingIndicator: colors[schemesPath].status.onError,
+            hover: blendColors(`${schemesPath}.status.error`, `${stateLayersPath}.status.onError.opacity08`),
+            active: blendColors(`${schemesPath}.status.error`, `${stateLayersPath}.status.onError.opacity12`),
+            focus: blendColors(`${schemesPath}.status.error`, `${stateLayersPath}.status.onError.opacity12`),
+            ripple: colors[stateLayersPath].status.onError.opacity12,
+        },
+        tonal: {
+            background: colors[schemesPath].status.errorContainer,
+            color: colors[schemesPath].status.onErrorContainer,
+            disabledBackground: colors[stateLayersPath].surfaces.onSurface.opacity12,
+            disabledColor: colors[stateLayersPath].surfaces.onSurface.opacity38,
+            loadingBackground: colors[schemesPath].status.errorContainer,
+            loadingColor: 'transparent',
+            loadingIndicator: colors[schemesPath].status.onErrorContainer,
+            hover: blendColors(`${schemesPath}.status.errorContainer`, `${stateLayersPath}.status.onErrorContainer.opacity08`),
+            active: blendColors(`${schemesPath}.status.errorContainer`, `${stateLayersPath}.status.onErrorContainer.opacity12`),
+            focus: blendColors(`${schemesPath}.status.errorContainer`, `${stateLayersPath}.status.onErrorContainer.opacity12`),
+            ripple: colors[stateLayersPath].status.onErrorContainer.opacity08,
+        },
+        ghost: {
+            background: 'transparent',
+            color: colors[schemesPath].status.onErrorContainer,
+            disabledBackground: colors[stateLayersPath].surfaces.onSurface.opacity12,
+            disabledColor: colors[stateLayersPath].surfaces.onSurface.opacity38,
+            loadingBackground: 'transparent',
+            loadingColor: 'transparent',
+            loadingIndicator: colors[schemesPath].status.error,
+            hover: colors[stateLayersPath].status.error.opacity08,
+            active: colors[stateLayersPath].status.error.opacity12,
+            focus: colors[stateLayersPath].status.error.opacity12,
+            ripple: colors[stateLayersPath].status.error.opacity12,
+        },
+    };
+    const SUCCESS_COLORS = {
+        filled: {
+            background: colors[schemesPath].status.success,
+            color: colors[schemesPath].status.onSuccess,
+            disabledBackground: colors[stateLayersPath].surfaces.onSurface.opacity12,
+            disabledColor: colors[stateLayersPath].surfaces.onSurface.opacity38,
+            loadingBackground: colors[schemesPath].status.success,
+            loadingColor: 'transparent',
+            loadingIndicator: colors[schemesPath].status.onSuccess,
+            hover: blendColors(`${schemesPath}.status.success`, `${stateLayersPath}.status.onSuccess.opacity08`),
+            active: blendColors(`${schemesPath}.status.success`, `${stateLayersPath}.status.onSuccess.opacity12`),
+            focus: blendColors(`${schemesPath}.status.success`, `${stateLayersPath}.status.onSuccess.opacity12`),
+            ripple: colors[stateLayersPath].status.onSuccess.opacity12,
+        },
+        tonal: {
+            background: colors[schemesPath].status.successContainer,
+            color: colors[schemesPath].status.onSuccessContainer,
+            disabledBackground: colors[stateLayersPath].surfaces.onSurface.opacity12,
+            disabledColor: colors[stateLayersPath].surfaces.onSurface.opacity38,
+            loadingBackground: colors[schemesPath].status.successContainer,
+            loadingColor: 'transparent',
+            loadingIndicator: colors[schemesPath].status.onSuccessContainer,
+            hover: blendColors(`${schemesPath}.status.successContainer`, `${stateLayersPath}.status.onSuccessContainer.opacity08`),
+            active: blendColors(`${schemesPath}.status.successContainer`, `${stateLayersPath}.status.onSuccessContainer.opacity12`),
+            focus: blendColors(`${schemesPath}.status.successContainer`, `${stateLayersPath}.status.onSuccessContainer.opacity12`),
+            ripple: colors[stateLayersPath].status.onSuccessContainer.opacity08,
+        },
+        ghost: {
+            background: 'transparent',
+            color: colors[schemesPath].status.onSuccessContainer,
+            disabledBackground: colors[stateLayersPath].surfaces.onSurface.opacity12,
+            disabledColor: colors[stateLayersPath].surfaces.onSurface.opacity38,
+            loadingBackground: 'transparent',
+            loadingColor: 'transparent',
+            loadingIndicator: colors[schemesPath].status.success,
+            hover: colors[stateLayersPath].status.success.opacity08,
+            active: colors[stateLayersPath].status.success.opacity12,
+            focus: colors[stateLayersPath].status.success.opacity12,
+            ripple: colors[stateLayersPath].status.success.opacity12,
+        },
+    };
+    return {
+        primary: PRIMARY_COLORS,
+        default: DEFAULT_COLORS,
+        secondary: SECONDARY_COLORS,
+        error: ERROR_COLORS,
+        success: SUCCESS_COLORS,
+    };
+};

package/dist/src/components/inputs/Checkbox/Checkbox.theme.d.ts

@@ -1,8 +1,13 @@
-import { Theme, ComponentsProps, ComponentsOverrides } from '@mui/material';
+import { Theme, ComponentsOverrides, ComponentsVariants } from '@mui/material';
+import { ComponentWithViewContextOwnProps } from '../../../shared/viewContext';
+declare module '@mui/material/Checkbox' {
+    interface CheckboxProps extends ComponentWithViewContextOwnProps {
+    }
+}
 interface M3Checkbox {
     MuiCheckbox: {
-        defaultProps?: ComponentsProps['MuiCheckbox'];
         styleOverrides?: ComponentsOverrides<Theme>['MuiCheckbox'];
+        variants?: ComponentsVariants<Theme>['MuiCheckbox'];
     };
 }
 export declare const getCheckbox: (theme: Theme) => M3Checkbox;

package/dist/src/components/inputs/Checkbox/Checkbox.theme.js

@@ -1,19 +1,69 @@
 export const getCheckbox = (theme) => {
-    const { palette } = theme;
+    const { colors } = theme;
     return {
         MuiCheckbox: {
             styleOverrides: {
                 root: {
-                    color: palette.outline.main,
-                    padding: 8,
-                    '&.Mui-checked': {
-                        color: palette.primary.main,
-                    },
                     '&.Mui-disabled': {
-                        color: palette.outline.main,
+                        color: colors.stateLayers.surfaces.onSurfaceVariant.opacity38,
                     },
                 },
             },
+            variants: [
+                {
+                    props: { color: 'default' },
+                    style: {
+                        color: colors.schemes.surfaces.onSurfaceVariant,
+                        '&.Mui-checked': {
+                            color: colors.schemes.base.primary,
+                        },
+                        '&.MuiCheckbox-indeterminate': {
+                            color: colors.schemes.base.primary,
+                        },
+                    },
+                },
+                {
+                    props: { color: 'error' },
+                    style: {
+                        color: colors.schemes.status.error,
+                        '&.Mui-checked': {
+                            color: colors.schemes.status.error,
+                        },
+                    },
+                },
+                {
+                    props: { viewContext: 'inverse' },
+                    style: {
+                        '&.Mui-disabled': {
+                            color: colors.inverseStateLayers.surfaces.onSurfaceVariant.opacity28,
+                        },
+                    },
+                },
+                {
+                    props: { color: 'default', viewContext: 'inverse' },
+                    style: {
+                        color: colors.inverseSchemes.surfaces.onSurfaceVariant,
+                        '&.Mui-checked': {
+                            color: colors.inverseSchemes.base.primary,
+                        },
+                        '&.MuiCheckbox-indeterminate': {
+                            color: colors.inverseSchemes.base.primary,
+                        },
+                    },
+                },
+                {
+                    props: { color: 'error', viewContext: 'inverse' },
+                    style: {
+                        color: colors.inverseSchemes.status.error,
+                        '&.Mui-checked': {
+                            color: colors.inverseSchemes.status.error,
+                        },
+                        '&.MuiCheckbox-indeterminate': {
+                            color: colors.inverseSchemes.status.error,
+                        },
+                    },
+                },
+            ],
         },
     };
 };