@webpros/mui-theme 0.1.6 → 0.2.0

package/dist/src/components/data-display/Chip/Chip.theme.js

@@ -1,501 +1,157 @@
 // Copyright 2025 WebPros International GmbH. All rights reserved.
-import { chipClasses, alpha, } from '@mui/material';
-import { ChipDeleteIcon } from '../../../components/data-display/Chip/components/ChipDeleteIcon';
-import { getStateLayerColorByOpacityKey, getStateLayerColor, OnStateLayer, StateLayer, getOnStateLayerColor, } from '../../../utils/getStateLayerColor';
+import { chipClasses, touchRippleClasses, } from '@mui/material';
+import { getChipColorsMap } from './get-chip-colors-map';
+import { rippleEnterKeyframe } from '../../../shared/rippleEnterKeyframe';
 export const getChip = (theme) => {
-    const { palette } = theme;
-    return {
-        MuiChip: {
-            defaultProps: {
-                deleteIcon: ChipDeleteIcon,
-                color: 'primary',
-            },
-            styleOverrides: {
-                root: {
-                    textTransform: 'none',
-                    fontWeight: 500,
-                },
-            },
-            variants: [
-                {
-                    props: { size: 'small' },
-                    style: {
-                        borderRadius: '3px',
-                    },
-                },
-                {
-                    props: { size: 'medium' },
-                    style: {
-                        fontSize: '0.875rem',
-                        fontWeight: 500,
-                        lineHeight: '1.25rem',
-                        letterSpacing: '0.006rem',
-                        borderRadius: 10,
-                    },
-                },
-                {
-                    // color="default"
-                    props: { variant: 'filled' },
-                    style: {
-                        background: palette.undefinedContainer.main,
-                        color: palette.onUndefinedContainer.main,
-                        [`& > .${chipClasses.deleteIcon}`]: {
-                            color: palette.onUndefinedContainer.main,
-                        },
-                        '&:hover, &:focus': {
-                            background: palette.onSurfaceVariant.main,
-                            color: palette.onPrimary.main,
-                            [`& > .${chipClasses.deleteIcon}`]: {
-                                color: palette.onPrimary.main,
-                            },
-                        },
-                        '&.Mui-disabled': {
-                            background: alpha(palette.onSurfaceVariant.main, 0.12),
-                            color: alpha(palette.onSurface.main, 0.38),
-                            opacity: 1,
-                            [`& > .${chipClasses.deleteIcon}`]: {
-                                color: alpha(palette.onSurface.main, 0.38),
-                            },
-                        },
-                    },
-                },
-                {
-                    props: { variant: 'filled', selected: true },
-                    style: {
-                        background: palette.onSurfaceVariant.main,
-                        color: palette.onPrimary.main,
-                        [`& > .${chipClasses.deleteIcon}`]: {
-                            color: palette.onPrimary.main,
-                        },
-                    },
-                },
-                {
-                    props: { variant: 'filled', clickable: false },
-                    style: {
-                        [`& > .${chipClasses.deleteIcon}`]: {
-                            cursor: 'default',
-                        },
-                        '&:hover, &:focus': {
-                            cursor: 'default',
-                            [`& > .${chipClasses.deleteIcon}`]: {
-                                cursor: 'default',
-                            },
-                        },
-                    },
-                },
-                {
-                    props: { variant: 'filled', color: 'primary' },
-                    style: {
-                        background: palette.secondaryContainer.main,
-                        color: palette.onSecondaryContainer.main,
-                        [`& > .${chipClasses.deleteIcon}`]: {
-                            color: palette.onSecondaryContainer.main,
-                        },
-                        '&:hover, &:focus': {
-                            background: palette.primary.main,
-                            color: palette.onPrimary.main,
-                            [`& > .${chipClasses.deleteIcon}`]: {
-                                color: palette.onPrimary.main,
-                            },
-                        },
-                    },
-                },
-                {
-                    props: { variant: 'filled', color: 'primary', selected: true },
-                    style: {
-                        background: palette.primary.main,
-                        color: palette.onPrimary.main,
-                        [`& > .${chipClasses.deleteIcon}`]: {
-                            color: palette.onPrimary.main,
-                        },
-                    },
-                },
-                {
-                    props: { variant: 'filled', color: 'error' },
-                    style: {
-                        // Enabled state
-                        background: palette.errorContainer.main,
-                        color: palette.onErrorContainer.main,
-                        // Trailing Icon: On Surface Variant
-                        [`& > .${chipClasses.deleteIcon}`]: {
-                            color: palette.onSurfaceVariant.main,
-                        },
-                        // Start Icon: On Error Container
-                        [`& > .${chipClasses.icon}`]: {
-                            color: palette.onErrorContainer.main,
-                        },
-                        // Hovered state
+    const { typography } = theme;
+    const colorsMap = getChipColorsMap(theme);
+    const inverseColorsMap = getChipColorsMap(theme, 'inverse');
+    const sizes = [
+        {
+            props: { size: 'extraSmall' },
+            style: Object.assign(Object.assign({}, typography.BodySmall), { height: 20, padding: '0 5px', borderRadius: 6, [`& .${chipClasses.label}`]: {
+                    padding: '0 4px',
+                }, [`& .${chipClasses.icon}, & .${chipClasses.deleteIcon}`]: {
+                    width: 12,
+                    height: 12,
+                } }),
+        },
+        {
+            props: { size: 'small' },
+            style: Object.assign(Object.assign({}, typography.BodySmall), { height: 24, padding: '0 7px', borderRadius: 8, [`& .${chipClasses.label}`]: {
+                    padding: '0 4px',
+                }, [`& .${chipClasses.icon}, & .${chipClasses.deleteIcon}`]: {
+                    width: 16,
+                    height: 16,
+                } }),
+        },
+        {
+            props: { size: 'medium' },
+            style: Object.assign(Object.assign({}, typography.BodyMedium), { height: 28, padding: '0 7px', borderRadius: 8, [`& .${chipClasses.label}`]: {
+                    padding: '0 4px',
+                }, [`& .${chipClasses.icon}, & .${chipClasses.deleteIcon}`]: {
+                    width: 20,
+                    height: 20,
+                } }),
+        },
+        {
+            props: { size: 'large' },
+            style: Object.assign(Object.assign({}, typography.BodyMedium), { height: 32, padding: '0 11px', borderRadius: 6, [`& .${chipClasses.label}`]: {
+                    padding: '0 6px',
+                }, [`& .${chipClasses.icon}, & .${chipClasses.deleteIcon}`]: {
+                    width: 20,
+                    height: 20,
+                } }),
+        },
+    ];
+    const getStylesByColor = (color, viewContext) => {
+        const chipColors = viewContext === 'inverse' ? inverseColorsMap[color] : colorsMap[color];
+        return [
+            {
+                props: { color, viewContext },
+                style: {
+                    background: chipColors.baseColor.background,
+                    color: chipColors.baseColor.label,
+                    [`& .${chipClasses.icon}`]: {
+                        color: chipColors.baseColor.icon,
+                    },
+                    [`& .${chipClasses.deleteIcon}`]: {
+                        color: chipColors.baseColor.deleteIcon.base,
                         '&:hover': {
-                            background: getStateLayerColor(StateLayer.Hover, palette.errorContainer.main, palette.onErrorContainer.main),
-                            color: palette.onErrorContainer.main,
-                            [`& > .${chipClasses.deleteIcon}`]: {
-                                color: palette.onSurfaceVariant.main,
-                            },
-                            [`& > .${chipClasses.icon}`]: {
-                                color: palette.onErrorContainer.main,
-                            },
-                        },
-                        // Focused state
-                        '&:focus': {
-                            background: getStateLayerColor(StateLayer.Focus, palette.errorContainer.main, palette.onErrorContainer.main),
-                            color: palette.onErrorContainer.main,
-                            [`& > .${chipClasses.deleteIcon}`]: {
-                                color: palette.onSurfaceVariant.main,
-                            },
-                            [`& > .${chipClasses.icon}`]: {
-                                color: palette.onErrorContainer.main,
-                            },
-                        },
-                        // Pressed state
-                        '&:active': {
-                            background: getStateLayerColor(StateLayer.Press, palette.errorContainer.main, palette.onErrorContainer.main),
-                            color: palette.onErrorContainer.main,
-                            [`& > .${chipClasses.deleteIcon}`]: {
-                                color: palette.onSurfaceVariant.main,
-                            },
-                            [`& > .${chipClasses.icon}`]: {
-                                color: palette.onErrorContainer.main,
-                            },
-                        },
-                        // Disabled state
-                        '&.Mui-disabled': {
-                            background: getStateLayerColor(StateLayer.Disabled, palette.onSurfaceVariant.main),
-                            color: getOnStateLayerColor(OnStateLayer.Disabled, palette.onSurface.main),
-                            [`& > .${chipClasses.deleteIcon}`]: {
-                                color: getOnStateLayerColor(OnStateLayer.Disabled, palette.onSurface.main),
-                            },
-                            [`& > .${chipClasses.icon}`]: {
-                                color: getOnStateLayerColor(OnStateLayer.Disabled, palette.onSurface.main),
-                            },
+                            color: chipColors.baseColor.deleteIcon.hover,
                         },
                     },
-                },
-                {
-                    props: { variant: 'filled', color: 'error', selected: true },
-                    style: {
-                        background: getStateLayerColor(StateLayer.Selected, palette.errorContainer.main, palette.onErrorContainer.main),
-                        color: palette.onErrorContainer.main,
-                        [`& > .${chipClasses.deleteIcon}`]: {
-                            color: palette.onSurfaceVariant.main,
-                        },
-                        [`& > .${chipClasses.icon}`]: {
-                            color: palette.onErrorContainer.main,
-                        },
+                    '&:hover': {
+                        background: chipColors.hover,
                     },
-                },
-                {
-                    props: { variant: 'filled', color: 'warning' },
-                    style: {
-                        // Enabled state
-                        background: palette.warningContainer.main,
-                        color: palette.onWarningContainer.main,
-                        // Trailing Icon: On Surface Variant
-                        [`& > .${chipClasses.deleteIcon}`]: {
-                            color: palette.onSurfaceVariant.main,
-                        },
-                        // Start Icon: On Warning Container
-                        [`& > .${chipClasses.icon}`]: {
-                            color: palette.onWarningContainer.main,
-                        },
-                        // Hovered state
-                        '&:hover': {
-                            background: getStateLayerColor(StateLayer.Hover, palette.warningContainer.main, palette.onWarningContainer.main),
-                            color: palette.onWarningContainer.main,
-                            [`& > .${chipClasses.deleteIcon}`]: {
-                                color: palette.onSurfaceVariant.main,
-                            },
-                            [`& > .${chipClasses.icon}`]: {
-                                color: palette.onWarningContainer.main,
-                            },
-                        },
-                        // Focused state
-                        '&:focus': {
-                            background: getStateLayerColor(StateLayer.Focus, palette.warningContainer.main, palette.onWarningContainer.main),
-                            color: palette.onWarningContainer.main,
-                            [`& > .${chipClasses.deleteIcon}`]: {
-                                color: palette.onSurfaceVariant.main,
-                            },
-                            [`& > .${chipClasses.icon}`]: {
-                                color: palette.onWarningContainer.main,
-                            },
-                        },
-                        // Pressed state
-                        '&:active': {
-                            background: getStateLayerColor(StateLayer.Press, palette.warningContainer.main, palette.onWarningContainer.main),
-                            color: palette.onWarningContainer.main,
-                            [`& > .${chipClasses.deleteIcon}`]: {
-                                color: palette.onSurfaceVariant.main,
-                            },
-                            [`& > .${chipClasses.icon}`]: {
-                                color: palette.onWarningContainer.main,
-                            },
-                        },
-                        // Disabled state
-                        '&.Mui-disabled': {
-                            background: getStateLayerColor(StateLayer.Disabled, palette.onSurfaceVariant.main),
-                            color: getOnStateLayerColor(OnStateLayer.Disabled, palette.onSurface.main),
-                            [`& > .${chipClasses.deleteIcon}`]: {
-                                color: getOnStateLayerColor(OnStateLayer.Disabled, palette.onSurface.main),
-                            },
-                            [`& > .${chipClasses.icon}`]: {
-                                color: getOnStateLayerColor(OnStateLayer.Disabled, palette.onSurface.main),
-                            },
-                        },
+                    '&:focus': {
+                        background: chipColors.focus,
                     },
-                },
-                {
-                    props: { variant: 'filled', color: 'warning', selected: true },
-                    style: {
-                        background: getStateLayerColor(StateLayer.Selected, palette.warningContainer.main, palette.onWarningContainer.main),
-                        color: palette.onWarningContainer.main,
-                        [`& > .${chipClasses.deleteIcon}`]: {
-                            color: palette.onSurfaceVariant.main,
-                        },
-                        [`& > .${chipClasses.icon}`]: {
-                            color: palette.onWarningContainer.main,
-                        },
-                    },
-                },
-                {
-                    props: { variant: 'filled', color: 'info' },
-                    style: {
-                        // Enabled state
-                        background: palette.infoContainer.main,
-                        color: palette.onInfoContainer.main,
-                        // Trailing Icon: On Surface Variant
-                        [`& > .${chipClasses.deleteIcon}`]: {
-                            color: palette.onSurfaceVariant.main,
-                        },
-                        // Start Icon: On Info Container
-                        [`& > .${chipClasses.icon}`]: {
-                            color: palette.onInfoContainer.main,
-                        },
-                        // Hovered state
-                        '&:hover': {
-                            background: getStateLayerColor(StateLayer.Hover, palette.infoContainer.main, palette.onInfoContainer.main),
-                            color: palette.onInfoContainer.main,
-                            [`& > .${chipClasses.deleteIcon}`]: {
-                                color: palette.onSurfaceVariant.main,
-                            },
-                            [`& > .${chipClasses.icon}`]: {
-                                color: palette.onInfoContainer.main,
-                            },
-                        },
-                        // Focused state
-                        '&:focus': {
-                            background: getStateLayerColor(StateLayer.Focus, palette.infoContainer.main, palette.onInfoContainer.main),
-                            color: palette.onInfoContainer.main,
-                            [`& > .${chipClasses.deleteIcon}`]: {
-                                color: palette.onSurfaceVariant.main,
-                            },
-                            [`& > .${chipClasses.icon}`]: {
-                                color: palette.onInfoContainer.main,
-                            },
-                        },
-                        // Pressed state
-                        '&:active': {
-                            background: getStateLayerColor(StateLayer.Press, palette.infoContainer.main, palette.onInfoContainer.main),
-                            color: palette.onInfoContainer.main,
-                            [`& > .${chipClasses.deleteIcon}`]: {
-                                color: palette.onSurfaceVariant.main,
-                            },
-                            [`& > .${chipClasses.icon}`]: {
-                                color: palette.onInfoContainer.main,
-                            },
-                        },
-                        // Disabled state
-                        '&.Mui-disabled': {
-                            background: getStateLayerColor(StateLayer.Disabled, palette.onSurfaceVariant.main),
-                            color: getOnStateLayerColor(OnStateLayer.Disabled, palette.onSurface.main),
-                            [`& > .${chipClasses.deleteIcon}`]: {
-                                color: getOnStateLayerColor(OnStateLayer.Disabled, palette.onSurface.main),
-                            },
-                            [`& > .${chipClasses.icon}`]: {
-                                color: getOnStateLayerColor(OnStateLayer.Disabled, palette.onSurface.main),
-                            },
-                        },
+                    '&:active': {
+                        background: chipColors.active,
+                        boxShadow: 'none',
                     },
-                },
-                {
-                    props: { variant: 'filled', color: 'info', selected: true },
-                    style: {
-                        background: getStateLayerColor(StateLayer.Selected, palette.infoContainer.main, palette.onInfoContainer.main),
-                        color: palette.onInfoContainer.main,
-                        [`& > .${chipClasses.deleteIcon}`]: {
-                            color: palette.onSurfaceVariant.main,
-                        },
-                        [`& > .${chipClasses.icon}`]: {
-                            color: palette.onInfoContainer.main,
-                        },
+                    [`& .${touchRippleClasses.ripple}.${touchRippleClasses.rippleVisible}`]: {
+                        color: chipColors.ripple,
                     },
                 },
-                {
-                    props: { variant: 'filled', color: 'success' },
-                    style: {
-                        background: palette.successContainer.main,
-                        color: palette.onSuccessContainer.main,
-                        [`& > .${chipClasses.deleteIcon}`]: {
-                            color: palette.onSurfaceVariant.main,
-                        },
-                        [`& > .${chipClasses.icon}`]: {
-                            color: palette.onSuccessContainer.main,
-                        },
-                        '&:hover': {
-                            background: getStateLayerColor(StateLayer.Hover, palette.successContainer.main, palette.onSuccessContainer.main),
-                            color: palette.onSuccessContainer.main,
-                            [`& > .${chipClasses.deleteIcon}`]: {
-                                color: palette.onSurfaceVariant.main,
-                            },
-                            [`& > .${chipClasses.icon}`]: {
-                                color: palette.onSuccessContainer.main,
-                            },
-                        },
-                        // Focused state
-                        '&:focus': {
-                            background: getStateLayerColor(StateLayer.Focus, palette.successContainer.main, palette.onSuccessContainer.main),
-                            color: palette.onSuccessContainer.main,
-                            [`& > .${chipClasses.deleteIcon}`]: {
-                                color: palette.onSurfaceVariant.main,
-                            },
-                            [`& > .${chipClasses.icon}`]: {
-                                color: palette.onSuccessContainer.main,
-                            },
-                        },
-                        // Pressed state
-                        '&:active': {
-                            background: getStateLayerColor(StateLayer.Press, palette.successContainer.main, palette.onSuccessContainer.main),
-                            color: palette.onSuccessContainer.main,
-                            [`& > .${chipClasses.deleteIcon}`]: {
-                                color: palette.onSurfaceVariant.main,
-                            },
-                            [`& > .${chipClasses.icon}`]: {
-                                color: palette.onSuccessContainer.main,
-                            },
-                        },
-                        // Disabled state
-                        '&.Mui-disabled': {
-                            background: getStateLayerColor(StateLayer.Disabled, palette.onSurfaceVariant.main),
-                            color: getOnStateLayerColor(OnStateLayer.Disabled, palette.onSurface.main),
-                            [`& > .${chipClasses.deleteIcon}`]: {
-                                color: getOnStateLayerColor(OnStateLayer.Disabled, palette.onSurface.main),
-                            },
-                            [`& > .${chipClasses.icon}`]: {
-                                color: getOnStateLayerColor(OnStateLayer.Disabled, palette.onSurface.main),
-                            },
-                        },
+            },
+            {
+                props: { color, viewContext, disabled: true },
+                style: {
+                    color: chipColors.disabled.color,
+                    background: chipColors.disabled.background,
+                    [`& .${chipClasses.icon}`]: {
+                        color: chipColors.disabled.color,
                     },
-                },
-                {
-                    props: { variant: 'filled', color: 'success', selected: true },
-                    style: {
-                        background: getStateLayerColor(StateLayer.Selected, palette.successContainer.main, palette.onSurfaceVariant.main),
-                        color: palette.onSuccessContainer.main,
-                        [`& > .${chipClasses.deleteIcon}`]: {
-                            color: palette.onSurfaceVariant.main,
-                        },
-                        [`& > .${chipClasses.icon}`]: {
-                            color: palette.onSuccessContainer.main,
-                        },
+                    [`& .${chipClasses.deleteIcon}`]: {
+                        color: chipColors.disabled.iconColor,
                     },
                 },
-                {
-                    props: { variant: 'outlined' },
-                    style: {
-                        color: palette.onSurfaceVariant.main,
-                        borderColor: getStateLayerColorByOpacityKey(0.48, palette.outline.main),
-                        [`& > .${chipClasses.icon}`]: {
-                            color: palette.primary.main,
-                        },
-                        [`& > .${chipClasses.deleteIcon}`]: {
-                            color: palette.onSurfaceVariant.main,
-                        },
+            },
+            {
+                props: { color, viewContext, selected: true },
+                style: {
+                    color: chipColors.selectedColor.label,
+                    background: chipColors.selectedColor.background,
+                    [`& .${chipClasses.icon}`]: {
+                        color: chipColors.selectedColor.icon,
+                    },
+                    [`& .${chipClasses.deleteIcon}`]: {
+                        color: chipColors.selectedColor.deleteIcon.base,
                         '&:hover': {
-                            color: palette.onSurfaceVariant.main,
-                            borderColor: getStateLayerColorByOpacityKey(0.48, palette.outline.main),
-                            background: getStateLayerColor(StateLayer.Disabled, palette.surface.main, palette.onSurfaceVariant.main),
-                            [`& > .${chipClasses.deleteIcon}`]: {
-                                color: palette.onSurfaceVariant.main,
-                            },
-                        },
-                        '&:focus': {
-                            color: palette.onSurfaceVariant.main,
-                            borderColor: getStateLayerColorByOpacityKey(0.48, palette.outline.main),
-                            background: getStateLayerColor(StateLayer.Focus, palette.surface.main, palette.onSurfaceVariant.main),
-                        },
-                        '&:active': {
-                            color: palette.onSurfaceVariant.main,
-                            borderColor: getStateLayerColorByOpacityKey(0.48, palette.outline.main),
-                            background: getStateLayerColor(StateLayer.Active, palette.surface.main, palette.onSurfaceVariant.main),
-                            boxShadow: theme.shadows[0],
-                        },
-                        '&.Mui-disabled': {
-                            color: getOnStateLayerColor(OnStateLayer.Disabled, palette.onSurface.main),
-                            [`& > .${chipClasses.icon}`]: {
-                                color: getOnStateLayerColor(OnStateLayer.Disabled, palette.onSurface.main),
-                            },
-                            [`& > .${chipClasses.deleteIcon}`]: {
-                                color: getOnStateLayerColor(OnStateLayer.Disabled, palette.onSurface.main),
-                            },
-                            borderColor: getStateLayerColorByOpacityKey(0.12, palette.outline.main),
+                            color: chipColors.selectedColor.deleteIcon.hover,
                         },
                     },
-                },
-                {
-                    props: { variant: 'outlined', selected: true },
-                    style: {
-                        color: palette.onSecondaryContainer.main,
-                        background: palette.secondaryContainer.main,
-                        border: 'none',
-                        [`& > .${chipClasses.icon}`]: {
-                            color: palette.onSecondaryContainer.main,
-                        },
-                        [`& > .${chipClasses.deleteIcon}`]: {
-                            color: palette.onSecondaryContainer.main,
-                        },
+                    '&:hover, &:focus, &:active': {
+                        background: chipColors.selectedColor.background,
                     },
                 },
-                {
-                    props: { variant: 'ghost' },
-                    style: {
-                        color: palette.onSurfaceVariant.main,
-                        borderColor: 'transparent',
-                        background: 'transparent',
-                        [`& > .${chipClasses.deleteIcon}`]: {
-                            color: palette.onSurfaceVariant.main,
-                        },
-                        '&:hover': {
-                            background: alpha(palette.onSurfaceVariant.main, 0.04),
-                            [`& > .${chipClasses.deleteIcon}`]: {
-                                color: palette.onSurfaceVariant.main,
-                            },
-                        },
-                        '&:focus': {
-                            background: alpha(palette.onSurfaceVariant.main, 0.12),
-                            borderColor: palette.onSurface.main,
-                        },
-                        '&:active': {
-                            background: alpha(palette.onSurfaceVariant.main, 0.12),
-                            boxShadow: theme.shadows[0],
-                        },
-                        '&.Mui-disabled': {
-                            background: 'transparent',
-                            color: alpha(palette.onSurface.main, 0.38),
-                            opacity: 1,
-                            [`& > .${chipClasses.deleteIcon}`]: {
-                                color: alpha(palette.onSurface.main, 0.38),
-                            },
-                        },
+            },
+        ];
+    };
+    return {
+        MuiChip: {
+            defaultProps: {
+                size: 'large',
+                variant: 'filled',
+                color: 'default',
+            },
+            styleOverrides: {
+                root: {
+                    width: 'fit-content',
+                    textTransform: 'none',
+                    fontWeight: 500,
+                    [`& .${touchRippleClasses.ripple}.${touchRippleClasses.rippleVisible}`]: {
+                        opacity: 1,
+                        animationName: rippleEnterKeyframe,
                     },
                 },
-                {
-                    props: { variant: 'ghost', clickable: false },
-                    style: {
-                        color: theme.palette.onSurfaceVariant.main,
-                        background: 'transparent',
-                        boxShadow: theme.shadows[0],
-                        borderColor: 'transparent',
-                    },
+                icon: {
+                    margin: 0,
                 },
+                deleteIcon: {
+                    margin: 0,
+                },
+            },
+            variants: [
+                ...sizes,
+                ...getStylesByColor('default'),
+                ...getStylesByColor('primary'),
+                ...getStylesByColor('secondary'),
+                ...getStylesByColor('undefined'),
+                ...getStylesByColor('error'),
+                ...getStylesByColor('success'),
+                ...getStylesByColor('warning'),
+                ...getStylesByColor('info'),
+                ...getStylesByColor('default', 'inverse'),
+                ...getStylesByColor('primary', 'inverse'),
+                ...getStylesByColor('secondary', 'inverse'),
+                ...getStylesByColor('undefined', 'inverse'),
+                ...getStylesByColor('error', 'inverse'),
+                ...getStylesByColor('success', 'inverse'),
+                ...getStylesByColor('warning', 'inverse'),
+                ...getStylesByColor('info', 'inverse'),
             ],
         },
     };