@mui/material 7.2.0 → 7.3.1

package/esm/SpeedDial/SpeedDial.js

@@ -220,13 +220,17 @@ const SpeedDial = /*#__PURE__*/React.forwardRef(function SpeedDial(inProps, ref)
    *
    * @param dialActionIndex {number}
    * @param origButtonRef {React.RefObject?}
+   * @param fabSlotOrigButtonRef {React.RefObject?}
    */
-  const createHandleSpeedDialActionButtonRef = (dialActionIndex, origButtonRef) => {
+  const createHandleSpeedDialActionButtonRef = (dialActionIndex, origButtonRef, fabSlotOrigButtonRef) => {
     return buttonRef => {
       actions.current[dialActionIndex + 1] = buttonRef;
       if (origButtonRef) {
         origButtonRef(buttonRef);
       }
+      if (fabSlotOrigButtonRef) {
+        fabSlotOrigButtonRef(buttonRef);
+      }
     };
   };
   const handleKeyDown = event => {
@@ -342,16 +346,26 @@ const SpeedDial = /*#__PURE__*/React.forwardRef(function SpeedDial(inProps, ref)
   const children = allItems.map((child, index) => {
     const {
       FabProps: {
-        ref: origButtonRef,
-        ...ChildFabProps
+        ref: origButtonRef
       } = {},
+      slotProps: childSlotProps = {},
       tooltipPlacement: tooltipPlacementProp
     } = child.props;
+    const {
+      fab: {
+        ref: fabSlotOrigButtonRef,
+        ...fabSlotProps
+      } = {},
+      ...restOfSlotProps
+    } = childSlotProps;
     const tooltipPlacement = tooltipPlacementProp || (getOrientation(direction) === 'vertical' ? 'left' : 'top');
     return /*#__PURE__*/React.cloneElement(child, {
-      FabProps: {
-        ...ChildFabProps,
-        ref: createHandleSpeedDialActionButtonRef(index, origButtonRef)
+      slotProps: {
+        fab: {
+          ...fabSlotProps,
+          ref: createHandleSpeedDialActionButtonRef(index, origButtonRef, fabSlotOrigButtonRef)
+        },
+        ...restOfSlotProps
       },
       delay: 30 * (open ? index : allItems.length - index),
       open,

package/esm/Switch/Switch.js

@@ -6,7 +6,6 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import refType from '@mui/utils/refType';
 import composeClasses from '@mui/utils/composeClasses';
-import { alpha, darken, lighten } from '@mui/system/colorManipulator';
 import capitalize from "../utils/capitalize.js";
 import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.js";
 import SwitchBase from "../internal/SwitchBase.js";
@@ -142,7 +141,7 @@ const SwitchSwitchBase = styled(SwitchBase, {
   theme
 }) => ({
   '&:hover': {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
+    backgroundColor: theme.alpha((theme.vars || theme).palette.action.active, (theme.vars || theme).palette.action.hoverOpacity),
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
       backgroundColor: 'transparent'
@@ -157,13 +156,13 @@ const SwitchSwitchBase = styled(SwitchBase, {
       [`&.${switchClasses.checked}`]: {
         color: (theme.vars || theme).palette[color].main,
         '&:hover': {
-          backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[color].main, theme.palette.action.hoverOpacity),
+          backgroundColor: theme.alpha((theme.vars || theme).palette[color].main, (theme.vars || theme).palette.action.hoverOpacity),
           '@media (hover: none)': {
             backgroundColor: 'transparent'
           }
         },
         [`&.${switchClasses.disabled}`]: {
-          color: theme.vars ? theme.vars.palette.Switch[`${color}DisabledColor`] : `${theme.palette.mode === 'light' ? lighten(theme.palette[color].main, 0.62) : darken(theme.palette[color].main, 0.55)}`
+          color: theme.vars ? theme.vars.palette.Switch[`${color}DisabledColor`] : `${theme.palette.mode === 'light' ? theme.lighten(theme.palette[color].main, 0.62) : theme.darken(theme.palette[color].main, 0.55)}`
         }
       },
       [`&.${switchClasses.checked} + .${switchClasses.track}`]: {
@@ -275,6 +274,9 @@ const Switch = /*#__PURE__*/React.forwardRef(function Switch(inProps, ref) {
         ...(slotProps.switchBase && {
           root: typeof slotProps.switchBase === 'function' ? slotProps.switchBase(ownerState) : slotProps.switchBase
         }),
+        input: {
+          role: 'switch'
+        },
         ...(slotProps.input && {
           input: typeof slotProps.input === 'function' ? slotProps.input(ownerState) : slotProps.input
         })

package/esm/TableCell/TableCell.js

@@ -4,7 +4,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import { darken, alpha, lighten } from '@mui/system/colorManipulator';
 import capitalize from "../utils/capitalize.js";
 import TableContext from "../Table/TableContext.js";
 import Tablelvl2Context from "../Table/Tablelvl2Context.js";
@@ -45,7 +44,7 @@ const TableCellRoot = styled('td', {
   // Workaround for a rendering bug with spanned columns in Chrome 62.0.
   // Removes the alpha (sets it to 1), and lightens or darkens the theme color.
   borderBottom: theme.vars ? `1px solid ${theme.vars.palette.TableCell.border}` : `1px solid
-    ${theme.palette.mode === 'light' ? lighten(alpha(theme.palette.divider, 1), 0.88) : darken(alpha(theme.palette.divider, 1), 0.68)}`,
+    ${theme.palette.mode === 'light' ? theme.lighten(theme.alpha(theme.palette.divider, 1), 0.88) : theme.darken(theme.alpha(theme.palette.divider, 1), 0.68)}`,
   textAlign: 'left',
   padding: 16,
   variants: [{

package/esm/TableRow/TableRow.js

@@ -4,7 +4,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import { alpha } from '@mui/system/colorManipulator';
 import Tablelvl2Context from "../Table/Tablelvl2Context.js";
 import { styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
@@ -45,9 +44,9 @@ const TableRowRoot = styled('tr', {
     backgroundColor: (theme.vars || theme).palette.action.hover
   },
   [`&.${tableRowClasses.selected}`]: {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+    backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, (theme.vars || theme).palette.action.selectedOpacity),
     '&:hover': {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity)
+      backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, `${(theme.vars || theme).palette.action.selectedOpacity} + ${(theme.vars || theme).palette.action.hoverOpacity}`)
     }
   }
 })));

package/esm/ToggleButton/ToggleButton.js

@@ -6,7 +6,6 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import resolveProps from '@mui/utils/resolveProps';
 import composeClasses from '@mui/utils/composeClasses';
-import { alpha } from '@mui/system/colorManipulator';
 import ButtonBase from "../ButtonBase/index.js";
 import capitalize from "../utils/capitalize.js";
 import { styled } from "../zero-styled/index.js";
@@ -56,7 +55,7 @@ const ToggleButtonRoot = styled(ButtonBase, {
   '&:hover': {
     textDecoration: 'none',
     // Reset on mouse devices
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
+    backgroundColor: theme.alpha((theme.vars || theme).palette.text.primary, (theme.vars || theme).palette.action.hoverOpacity),
     '@media (hover: none)': {
       backgroundColor: 'transparent'
     }
@@ -68,12 +67,12 @@ const ToggleButtonRoot = styled(ButtonBase, {
     style: {
       [`&.${toggleButtonClasses.selected}`]: {
         color: (theme.vars || theme).palette.text.primary,
-        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.text.primary, theme.palette.action.selectedOpacity),
+        backgroundColor: theme.alpha((theme.vars || theme).palette.text.primary, (theme.vars || theme).palette.action.selectedOpacity),
         '&:hover': {
-          backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.text.primary, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+          backgroundColor: theme.alpha((theme.vars || theme).palette.text.primary, `${(theme.vars || theme).palette.action.selectedOpacity} + ${(theme.vars || theme).palette.action.hoverOpacity}`),
           // Reset on touch devices, it doesn't add specificity
           '@media (hover: none)': {
-            backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.text.primary, theme.palette.action.selectedOpacity)
+            backgroundColor: theme.alpha((theme.vars || theme).palette.text.primary, (theme.vars || theme).palette.action.selectedOpacity)
           }
         }
       }
@@ -85,12 +84,12 @@ const ToggleButtonRoot = styled(ButtonBase, {
     style: {
       [`&.${toggleButtonClasses.selected}`]: {
         color: (theme.vars || theme).palette[color].main,
-        backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette[color].main, theme.palette.action.selectedOpacity),
+        backgroundColor: theme.alpha((theme.vars || theme).palette[color].main, (theme.vars || theme).palette.action.selectedOpacity),
         '&:hover': {
-          backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette[color].main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+          backgroundColor: theme.alpha((theme.vars || theme).palette[color].main, `${(theme.vars || theme).palette.action.selectedOpacity} + ${(theme.vars || theme).palette.action.hoverOpacity}`),
           // Reset on touch devices, it doesn't add specificity
           '@media (hover: none)': {
-            backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette[color].main, theme.palette.action.selectedOpacity)
+            backgroundColor: theme.alpha((theme.vars || theme).palette[color].main, (theme.vars || theme).palette.action.selectedOpacity)
           }
         }
       }

package/esm/Tooltip/Tooltip.js

@@ -6,7 +6,6 @@ import clsx from 'clsx';
 import useTimeout, { Timeout } from '@mui/utils/useTimeout';
 import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
 import composeClasses from '@mui/utils/composeClasses';
-import { alpha } from '@mui/system/colorManipulator';
 import { useRtl } from '@mui/system/RtlProvider';
 import isFocusVisible from '@mui/utils/isFocusVisible';
 import getReactElementRef from '@mui/utils/getReactElementRef';
@@ -157,7 +156,7 @@ const TooltipTooltip = styled('div', {
 })(memoTheme(({
   theme
 }) => ({
-  backgroundColor: theme.vars ? theme.vars.palette.Tooltip.bg : alpha(theme.palette.grey[700], 0.92),
+  backgroundColor: theme.vars ? theme.vars.palette.Tooltip.bg : theme.alpha(theme.palette.grey[700], 0.92),
   borderRadius: (theme.vars || theme).shape.borderRadius,
   color: (theme.vars || theme).palette.common.white,
   fontFamily: theme.typography.fontFamily,
@@ -278,7 +277,7 @@ const TooltipArrow = styled('span', {
   width: '1em',
   height: '0.71em' /* = width / sqrt(2) = (length of the hypotenuse) */,
   boxSizing: 'border-box',
-  color: theme.vars ? theme.vars.palette.Tooltip.bg : alpha(theme.palette.grey[700], 0.9),
+  color: theme.vars ? theme.vars.palette.Tooltip.bg : theme.alpha(theme.palette.grey[700], 0.9),
   '&::before': {
     content: '""',
     margin: 'auto',

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v7.2.0
+ * @mui/material v7.3.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/esm/styles/createColorScheme.d.ts

@@ -6,4 +6,6 @@ export declare function getOpacity(mode: 'light' | 'dark'): {
   switchTrack: number;
 };
 export declare function getOverlays(mode: 'light' | 'dark'): string[];
-export default function createColorScheme(options: ColorSystemOptions): ColorSystemOptions;
+export default function createColorScheme(options: ColorSystemOptions & {
+  colorSpace?: string;
+}): ColorSystemOptions;

package/esm/styles/createColorScheme.js

@@ -26,9 +26,14 @@ export default function createColorScheme(options) {
     // need to cast to avoid module augmentation test
     opacity,
     overlays,
+    colorSpace,
     ...rest
   } = options;
-  const palette = createPalette(paletteInput);
+  // need to cast because `colorSpace` is considered internal at the moment.
+  const palette = createPalette({
+    ...paletteInput,
+    colorSpace
+  });
   return {
     palette,
     opacity: {

package/esm/styles/createPalette.js

@@ -92,6 +92,19 @@ function addLightOrDark(intent, direction, shade, tonalOffset) {
     }
   }
 }
+function mixLightOrDark(colorSpace, intent, direction, shade, tonalOffset) {
+  const tonalOffsetLight = tonalOffset.light || tonalOffset;
+  const tonalOffsetDark = tonalOffset.dark || tonalOffset * 1.5;
+  if (!intent[direction]) {
+    if (intent.hasOwnProperty(shade)) {
+      intent[direction] = intent[shade];
+    } else if (direction === 'light') {
+      intent.light = `color-mix(in ${colorSpace}, ${intent.main}, #fff ${(tonalOffsetLight * 100).toFixed(0)}%)`;
+    } else if (direction === 'dark') {
+      intent.dark = `color-mix(in ${colorSpace}, ${intent.main}, #000 ${(tonalOffsetDark * 100).toFixed(0)}%)`;
+    }
+  }
+}
 function getDefaultPrimary(mode = 'light') {
   if (mode === 'dark') {
     return {
@@ -177,11 +190,17 @@ function getDefaultWarning(mode = 'light') {
     dark: orange[900]
   };
 }
+
+// Use the same name as the experimental CSS `contrast-color` function.
+export function contrastColor(background) {
+  return `oklch(from ${background} var(--__l) 0 h / var(--__a))`;
+}
 export default function createPalette(palette) {
   const {
     mode = 'light',
     contrastThreshold = 3,
     tonalOffset = 0.2,
+    colorSpace,
     ...other
   } = palette;
   const primary = palette.primary || getDefaultPrimary(mode);
@@ -195,6 +214,9 @@ export default function createPalette(palette) {
   // Bootstrap: https://github.com/twbs/bootstrap/blob/1d6e3710dd447de1a200f29e8fa521f8a0908f70/scss/_functions.scss#L59
   // and material-components-web https://github.com/material-components/material-components-web/blob/ac46b8863c4dab9fc22c4c662dc6bd1b65dd652f/packages/mdc-theme/_functions.scss#L54
   function getContrastText(background) {
+    if (colorSpace) {
+      return contrastColor(background);
+    }
     const contrastText = getContrastRatio(background, dark.text.primary) >= contrastThreshold ? dark.text.primary : light.text.primary;
     if (process.env.NODE_ENV !== 'production') {
       const contrast = getContrastRatio(background, contrastText);
@@ -223,8 +245,13 @@ export default function createPalette(palette) {
     if (typeof color.main !== 'string') {
       throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The color${name ? ` (${name})` : ''} provided to augmentColor(color) is invalid.\n` + `\`color.main\` should be a string, but \`${JSON.stringify(color.main)}\` was provided instead.\n` + '\n' + 'Did you intend to use one of the following approaches?\n' + '\n' + 'import { green } from "@mui/material/colors";\n' + '\n' + 'const theme1 = createTheme({ palette: {\n' + '  primary: green,\n' + '} });\n' + '\n' + 'const theme2 = createTheme({ palette: {\n' + '  primary: { main: green[500] },\n' + '} });' : _formatErrorMessage(12, name ? ` (${name})` : '', JSON.stringify(color.main)));
     }
-    addLightOrDark(color, 'light', lightShade, tonalOffset);
-    addLightOrDark(color, 'dark', darkShade, tonalOffset);
+    if (colorSpace) {
+      mixLightOrDark(colorSpace, color, 'light', lightShade, tonalOffset);
+      mixLightOrDark(colorSpace, color, 'dark', darkShade, tonalOffset);
+    } else {
+      addLightOrDark(color, 'light', lightShade, tonalOffset);
+      addLightOrDark(color, 'dark', darkShade, tonalOffset);
+    }
     if (!color.contrastText) {
       color.contrastText = getContrastText(color.main);
     }

package/esm/styles/createTheme.d.ts

@@ -8,7 +8,7 @@ export type { ThemeOptions, Theme, CssThemeVariables } from "./createThemeNoVars
  * @returns A complete, ready-to-use theme object.
  */
 export default function createTheme(options?: Omit<ThemeOptions, 'components'> & Pick<CssVarsThemeOptions, 'defaultColorScheme' | 'colorSchemes' | 'components'> & {
-  cssVariables?: boolean | Pick<CssVarsThemeOptions, 'colorSchemeSelector' | 'rootSelector' | 'disableCssColorScheme' | 'cssVarPrefix' | 'shouldSkipGeneratingVar'>;
+  cssVariables?: boolean | Pick<CssVarsThemeOptions, 'colorSchemeSelector' | 'rootSelector' | 'disableCssColorScheme' | 'cssVarPrefix' | 'shouldSkipGeneratingVar' | 'nativeColor'>;
 },
 // cast type to skip module augmentation test
 ...args: object[]): Theme;

package/esm/styles/createThemeNoVars.d.ts

@@ -60,6 +60,9 @@ export interface Theme extends BaseTheme, CssVarsProperties {
   components?: Components<BaseTheme>;
   unstable_sx: (props: SxProps<Theme>) => CSSObject;
   unstable_sxConfig: SxConfig;
+  alpha: (color: string, value: number | string) => string;
+  lighten: (color: string, coefficient: number | string) => string;
+  darken: (color: string, coefficient: number | string) => string;
 }
 
 /**

package/esm/styles/createThemeNoVars.js

@@ -2,6 +2,7 @@ import _formatErrorMessage from "@mui/utils/formatMuiErrorMessage";
 import deepmerge from '@mui/utils/deepmerge';
 import styleFunctionSx, { unstable_defaultSxConfig as defaultSxConfig } from '@mui/system/styleFunctionSx';
 import systemCreateTheme from '@mui/system/createTheme';
+import { alpha as systemAlpha, lighten as systemLighten, darken as systemDarken } from '@mui/system/colorManipulator';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import createMixins from "./createMixins.js";
 import createPalette from "./createPalette.js";
@@ -10,6 +11,58 @@ import shadows from "./shadows.js";
 import createTransitions from "./createTransitions.js";
 import zIndex from "./zIndex.js";
 import { stringifyTheme } from "./stringifyTheme.js";
+function coefficientToPercentage(coefficient) {
+  if (typeof coefficient === 'number') {
+    return `${(coefficient * 100).toFixed(0)}%`;
+  }
+  return `calc((${coefficient}) * 100%)`;
+}
+
+// This can be removed when moved to `color-mix()` entirely.
+const parseAddition = str => {
+  if (!Number.isNaN(+str)) {
+    return +str;
+  }
+  const numbers = str.match(/\d*\.?\d+/g);
+  if (!numbers) {
+    return 0;
+  }
+  let sum = 0;
+  for (let i = 0; i < numbers.length; i += 1) {
+    sum += +numbers[i];
+  }
+  return sum;
+};
+function attachColorManipulators(theme) {
+  Object.assign(theme, {
+    alpha(color, coefficient) {
+      const obj = this || theme;
+      if (obj.colorSpace) {
+        return `oklch(from ${color} l c h / ${typeof coefficient === 'string' ? `calc(${coefficient})` : coefficient})`;
+      }
+      if (obj.vars) {
+        // To preserve the behavior of the CSS theme variables
+        // In the future, this could be replaced by `color-mix` (when https://caniuse.com/?search=color-mix reaches 95%).
+        return `rgba(${color.replace(/var\(--([^,\s)]+)(?:,[^)]+)?\)+/g, 'var(--$1Channel)')} / ${typeof coefficient === 'string' ? `calc(${coefficient})` : coefficient})`;
+      }
+      return systemAlpha(color, parseAddition(coefficient));
+    },
+    lighten(color, coefficient) {
+      const obj = this || theme;
+      if (obj.colorSpace) {
+        return `color-mix(in ${obj.colorSpace}, ${color}, #fff ${coefficientToPercentage(coefficient)})`;
+      }
+      return systemLighten(color, coefficient);
+    },
+    darken(color, coefficient) {
+      const obj = this || theme;
+      if (obj.colorSpace) {
+        return `color-mix(in ${obj.colorSpace}, ${color}, #000 ${coefficientToPercentage(coefficient)})`;
+      }
+      return systemDarken(color, coefficient);
+    }
+  });
+}
 function createThemeNoVars(options = {}, ...args) {
   const {
     breakpoints: breakpointsInput,
@@ -19,6 +72,7 @@ function createThemeNoVars(options = {}, ...args) {
     transitions: transitionsInput = {},
     typography: typographyInput = {},
     shape: shapeInput,
+    colorSpace,
     ...other
   } = options;
   if (options.vars &&
@@ -29,7 +83,10 @@ function createThemeNoVars(options = {}, ...args) {
     // #host-reference
     'Please use another name or follow the [docs](https://mui.com/material-ui/customization/css-theme-variables/usage/) to enable the feature.' : _formatErrorMessage(20));
   }
-  const palette = createPalette(paletteInput);
+  const palette = createPalette({
+    ...paletteInput,
+    colorSpace
+  });
   const systemTheme = systemCreateTheme(options);
   let muiTheme = deepmerge(systemTheme, {
     mixins: createMixins(systemTheme.breakpoints, mixinsInput),
@@ -86,6 +143,7 @@ function createThemeNoVars(options = {}, ...args) {
   };
   muiTheme.toRuntimeSource = stringifyTheme; // for Pigment CSS integration
 
+  attachColorManipulators(muiTheme);
   return muiTheme;
 }
 export default createThemeNoVars;

package/esm/styles/createThemeWithVars.d.ts

@@ -266,6 +266,10 @@ export interface CssVarsThemeOptions extends Omit<ThemeOptions, 'palette' | 'com
    * @default false
    */
   disableCssColorScheme?: boolean;
+  /**
+   * If `true`, the CSS relative color will be used.
+   */
+  nativeColor?: boolean;
   /**
    * A function to determine if the key, value should be attached as CSS Variable
    * `keys` is an array that represents the object path keys.