@vodafone_de/brix-components 3.1.0 → 3.1.2

package/dist/styles/createTheme.js

@@ -0,0 +1,105 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = createTheme;
+var _createPalette = _interopRequireDefault(require("./createPalette"));
+var _createThemeWithVars = _interopRequireDefault(require("./createThemeWithVars"));
+var _createThemeNoVars = _interopRequireDefault(require("./createThemeNoVars"));
+// eslint-disable-next-line consistent-return
+function attachColorScheme(theme, scheme, colorScheme) {
+  if (!theme.colorSchemes) {
+    return undefined;
+  }
+  if (colorScheme) {
+    theme.colorSchemes[scheme] = {
+      ...(colorScheme !== true && colorScheme),
+      palette: (0, _createPalette.default)({
+        ...(colorScheme === true ? {} : colorScheme.palette),
+        mode: scheme
+      }) // cast type to skip module augmentation test
+    };
+  }
+}
+
+/**
+ * Generate a theme base on the options received.
+ * @param options Takes an incomplete theme object and adds the missing parts.
+ * @param args Deep merge the arguments with the about to be returned theme.
+ * @returns A complete, ready-to-use theme object.
+ */
+function createTheme(options = {},
+// cast type to skip module augmentation test
+...args) {
+  const {
+    palette,
+    cssVariables = false,
+    colorSchemes: initialColorSchemes = !palette ? {
+      light: true
+    } : undefined,
+    defaultColorScheme: initialDefaultColorScheme = palette?.mode,
+    ...rest
+  } = options;
+  const defaultColorSchemeInput = initialDefaultColorScheme || 'light';
+  const defaultScheme = initialColorSchemes?.[defaultColorSchemeInput];
+  const colorSchemesInput = {
+    ...initialColorSchemes,
+    ...(palette ? {
+      [defaultColorSchemeInput]: {
+        ...(typeof defaultScheme !== 'boolean' && defaultScheme),
+        palette
+      }
+    } : undefined)
+  };
+  if (cssVariables === false) {
+    if (!('colorSchemes' in options)) {
+      // Behaves exactly as v5
+      return (0, _createThemeNoVars.default)(options, ...args);
+    }
+    let paletteOptions = palette;
+    if (!('palette' in options)) {
+      if (colorSchemesInput[defaultColorSchemeInput]) {
+        if (colorSchemesInput[defaultColorSchemeInput] !== true) {
+          paletteOptions = colorSchemesInput[defaultColorSchemeInput].palette;
+        } else if (defaultColorSchemeInput === 'dark') {
+          // @ts-ignore to prevent the module augmentation test from failing
+          paletteOptions = {
+            mode: 'dark'
+          };
+        }
+      }
+    }
+    const theme = (0, _createThemeNoVars.default)({
+      ...options,
+      palette: paletteOptions
+    }, ...args);
+    theme.defaultColorScheme = defaultColorSchemeInput;
+    theme.colorSchemes = colorSchemesInput;
+    if (theme.palette.mode === 'light') {
+      theme.colorSchemes.light = {
+        ...(colorSchemesInput.light !== true && colorSchemesInput.light),
+        palette: theme.palette
+      };
+      attachColorScheme(theme, 'dark', colorSchemesInput.dark);
+    }
+    if (theme.palette.mode === 'dark') {
+      theme.colorSchemes.dark = {
+        ...(colorSchemesInput.dark !== true && colorSchemesInput.dark),
+        palette: theme.palette
+      };
+      attachColorScheme(theme, 'light', colorSchemesInput.light);
+    }
+    return theme;
+  }
+  if (!palette && !('light' in colorSchemesInput) && defaultColorSchemeInput === 'light') {
+    colorSchemesInput.light = true;
+  }
+  return (0, _createThemeWithVars.default)({
+    ...rest,
+    colorSchemes: colorSchemesInput,
+    defaultColorScheme: defaultColorSchemeInput,
+    ...(typeof cssVariables !== 'boolean' && cssVariables)
+  }, ...args);
+}

package/dist/styles/createThemeNoVars.d.ts

@@ -0,0 +1,70 @@
+import { ThemeOptions as SystemThemeOptions, Theme as SystemTheme, SxProps, CSSObject, SxConfig } from '@mui/system';
+import { Mixins, MixinsOptions } from "./createMixins.js";
+import { Palette, PaletteOptions } from "./createPalette.js";
+import { TypographyVariants, TypographyVariantsOptions } from "./createTypography.js";
+import { Shadows } from "./shadows.js";
+import { Transitions, TransitionsOptions } from "./createTransitions.js";
+import { ZIndex, ZIndexOptions } from "./zIndex.js";
+import { Components } from "./components.js";
+import { CssVarsTheme, CssVarsPalette, ColorSystemOptions } from "./createThemeWithVars.js";
+
+/**
+ * To disable custom properties, use module augmentation
+ *
+ * @example
+ * declare module '@mui/material/styles' {
+ *   interface CssThemeVariables {
+ *     enabled: true;
+ *   }
+ * }
+ */
+export interface CssThemeVariables {}
+type CssVarsOptions = CssThemeVariables extends {
+  enabled: true;
+} ? ColorSystemOptions : {};
+export interface ThemeOptions extends Omit<SystemThemeOptions, 'zIndex'>, CssVarsOptions {
+  mixins?: MixinsOptions;
+  components?: Components<Omit<Theme, 'components'>>;
+  palette?: PaletteOptions;
+  shadows?: Shadows;
+  transitions?: TransitionsOptions;
+  typography?: TypographyVariantsOptions | ((palette: Palette) => TypographyVariantsOptions);
+  zIndex?: ZIndexOptions;
+  unstable_strictMode?: boolean;
+  unstable_sxConfig?: SxConfig;
+}
+export interface BaseTheme extends SystemTheme {
+  mixins: Mixins;
+  palette: Palette & (CssThemeVariables extends {
+    enabled: true;
+  } ? CssVarsPalette : {});
+  shadows: Shadows;
+  transitions: Transitions;
+  typography: TypographyVariants;
+  zIndex: ZIndex;
+  unstable_strictMode?: boolean;
+}
+
+// shut off automatic exporting for the `BaseTheme` above
+export {};
+type CssVarsProperties = CssThemeVariables extends {
+  enabled: true;
+} ? Pick<CssVarsTheme, 'applyStyles' | 'colorSchemes' | 'colorSchemeSelector' | 'rootSelector' | 'cssVarPrefix' | 'defaultColorScheme' | 'getCssVar' | 'getColorSchemeSelector' | 'generateThemeVars' | 'generateStyleSheets' | 'generateSpacing' | 'shouldSkipGeneratingVar' | 'vars'> : Partial<Pick<CssVarsTheme, 'vars'>>;
+
+/**
+ * Our [TypeScript guide on theme customization](https://mui.com/material-ui/guides/typescript/#customization-of-theme) explains in detail how you would add custom properties.
+ */
+export interface Theme extends BaseTheme, CssVarsProperties {
+  cssVariables?: false;
+  components?: Components<BaseTheme>;
+  unstable_sx: (props: SxProps<Theme>) => CSSObject;
+  unstable_sxConfig: SxConfig;
+}
+
+/**
+ * Generate a theme base on the options received.
+ * @param options Takes an incomplete theme object and adds the missing parts.
+ * @param args Deep merge the arguments with the about to be returned theme.
+ * @returns A complete, ready-to-use theme object.
+ */
+export default function createThemeNoVars(options?: ThemeOptions, ...args: object[]): Theme;

package/dist/styles/createThemeNoVars.js

@@ -0,0 +1,99 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _formatMuiErrorMessage = _interopRequireDefault(require("@mui/utils/formatMuiErrorMessage"));
+var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
+var _styleFunctionSx = _interopRequireWildcard(require("@mui/system/styleFunctionSx"));
+var _createTheme = _interopRequireDefault(require("@mui/system/createTheme"));
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _createMixins = _interopRequireDefault(require("./createMixins"));
+var _createPalette = _interopRequireDefault(require("./createPalette"));
+var _createTypography = _interopRequireDefault(require("./createTypography"));
+var _shadows = _interopRequireDefault(require("./shadows"));
+var _createTransitions = _interopRequireDefault(require("./createTransitions"));
+var _zIndex = _interopRequireDefault(require("./zIndex"));
+var _stringifyTheme = require("./stringifyTheme");
+function createThemeNoVars(options = {}, ...args) {
+  const {
+    breakpoints: breakpointsInput,
+    mixins: mixinsInput = {},
+    spacing: spacingInput,
+    palette: paletteInput = {},
+    transitions: transitionsInput = {},
+    typography: typographyInput = {},
+    shape: shapeInput,
+    ...other
+  } = options;
+  if (options.vars &&
+  // The error should throw only for the root theme creation because user is not allowed to use a custom node `vars`.
+  // `generateThemeVars` is the closest identifier for checking that the `options` is a result of `createTheme` with CSS variables so that user can create new theme for nested ThemeProvider.
+  options.generateThemeVars === undefined) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: `vars` is a private field used for CSS variables support.\n' +
+    // #host-reference
+    'Please use another name or follow the [docs](https://mui.com/material-ui/customization/css-theme-variables/usage/) to enable the feature.' : (0, _formatMuiErrorMessage.default)(20));
+  }
+  const palette = (0, _createPalette.default)(paletteInput);
+  const systemTheme = (0, _createTheme.default)(options);
+  let muiTheme = (0, _deepmerge.default)(systemTheme, {
+    mixins: (0, _createMixins.default)(systemTheme.breakpoints, mixinsInput),
+    palette,
+    // Don't use [...shadows] until you've verified its transpiled code is not invoking the iterator protocol.
+    shadows: _shadows.default.slice(),
+    typography: (0, _createTypography.default)(palette, typographyInput),
+    transitions: (0, _createTransitions.default)(transitionsInput),
+    zIndex: {
+      ..._zIndex.default
+    }
+  });
+  muiTheme = (0, _deepmerge.default)(muiTheme, other);
+  muiTheme = args.reduce((acc, argument) => (0, _deepmerge.default)(acc, argument), muiTheme);
+  if (process.env.NODE_ENV !== 'production') {
+    // TODO v6: Refactor to use globalStateClassesMapping from @mui/utils once `readOnly` state class is used in Rating component.
+    const stateClasses = ['active', 'checked', 'completed', 'disabled', 'error', 'expanded', 'focused', 'focusVisible', 'required', 'selected'];
+    const traverse = (node, component) => {
+      let key;
+
+      // eslint-disable-next-line guard-for-in
+      for (key in node) {
+        const child = node[key];
+        if (stateClasses.includes(key) && Object.keys(child).length > 0) {
+          if (process.env.NODE_ENV !== 'production') {
+            const stateClass = (0, _generateUtilityClass.default)('', key);
+            console.error([`MUI: The \`${component}\` component increases ` + `the CSS specificity of the \`${key}\` internal state.`, 'You can not override it like this: ', JSON.stringify(node, null, 2), '', `Instead, you need to use the '&.${stateClass}' syntax:`, JSON.stringify({
+              root: {
+                [`&.${stateClass}`]: child
+              }
+            }, null, 2), '', 'https://mui.com/r/state-classes-guide'].join('\n'));
+          }
+          // Remove the style to prevent global conflicts.
+          node[key] = {};
+        }
+      }
+    };
+    Object.keys(muiTheme.components).forEach(component => {
+      const styleOverrides = muiTheme.components[component].styleOverrides;
+      if (styleOverrides && component.startsWith('Mui')) {
+        traverse(styleOverrides, component);
+      }
+    });
+  }
+  muiTheme.unstable_sxConfig = {
+    ..._styleFunctionSx.unstable_defaultSxConfig,
+    ...other?.unstable_sxConfig
+  };
+  muiTheme.unstable_sx = function sx(props) {
+    return (0, _styleFunctionSx.default)({
+      sx: props,
+      theme: this
+    });
+  };
+  muiTheme.toRuntimeSource = _stringifyTheme.stringifyTheme; // for Pigment CSS integration
+
+  return muiTheme;
+}
+var _default = exports.default = createThemeNoVars;

package/dist/styles/createThemeWithVars.d.ts

@@ -0,0 +1,350 @@
+import { OverridableStringUnion } from '@mui/types';
+import { SxConfig, SxProps, CSSObject, ApplyStyles } from '@mui/system';
+import { ExtractTypographyTokens } from '@mui/system/cssVars';
+import { ThemeOptions, Theme } from "./createThemeNoVars.js";
+import { Palette, PaletteOptions } from "./createPalette.js";
+import { Shadows } from "./shadows.js";
+import { ZIndex } from "./zIndex.js";
+import { Components } from "./components.js";
+
+/**
+ * default MD color-schemes
+ */
+export type DefaultColorScheme = 'light' | 'dark';
+
+/**
+ * The application can add more color-scheme by extending this interface via module augmentation
+ *
+ * Ex.
+ * declare module @mui/material/styles {
+ *   interface ColorSchemeOverrides {
+ *     foo: true;
+ *   }
+ * }
+ *
+ * // SupportedColorScheme = 'light' | 'dark' | 'foo';
+ */
+export interface ColorSchemeOverrides {}
+export type ExtendedColorScheme = OverridableStringUnion<never, ColorSchemeOverrides>;
+
+/**
+ * All color-schemes that the application has
+ */
+export type SupportedColorScheme = DefaultColorScheme | ExtendedColorScheme;
+export interface Opacity {
+  inputPlaceholder: number;
+  inputUnderline: number;
+  switchTrackDisabled: number;
+  switchTrack: number;
+}
+export type Overlays = [string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined];
+export interface PaletteBackgroundChannel {
+  defaultChannel: string;
+  paperChannel: string;
+}
+export interface PaletteCommonChannel {
+  background: string;
+  backgroundChannel: string;
+  onBackground: string;
+  onBackgroundChannel: string;
+}
+export interface PaletteColorChannel {
+  mainChannel: string;
+  lightChannel: string;
+  darkChannel: string;
+  contrastTextChannel: string;
+}
+export interface PaletteActionChannel {
+  activeChannel: string;
+  selectedChannel: string;
+}
+export interface PaletteTextChannel {
+  primaryChannel: string;
+  secondaryChannel: string;
+}
+export interface PaletteAlert {
+  errorColor: string;
+  infoColor: string;
+  successColor: string;
+  warningColor: string;
+  errorFilledBg: string;
+  infoFilledBg: string;
+  successFilledBg: string;
+  warningFilledBg: string;
+  errorFilledColor: string;
+  infoFilledColor: string;
+  successFilledColor: string;
+  warningFilledColor: string;
+  errorStandardBg: string;
+  infoStandardBg: string;
+  successStandardBg: string;
+  warningStandardBg: string;
+  errorIconColor: string;
+  infoIconColor: string;
+  successIconColor: string;
+  warningIconColor: string;
+}
+export interface PaletteAppBar {
+  defaultBg: string;
+  darkBg: string;
+  darkColor: string;
+}
+export interface PaletteAvatar {
+  defaultBg: string;
+}
+export interface PaletteButton {
+  inheritContainedBg: string;
+  inheritContainedHoverBg: string;
+}
+export interface PaletteChip {
+  defaultBorder: string;
+  defaultAvatarColor: string;
+  defaultIconColor: string;
+}
+export interface PaletteFilledInput {
+  bg: string;
+  hoverBg: string;
+  disabledBg: string;
+}
+export interface PaletteLinearProgress {
+  primaryBg: string;
+  secondaryBg: string;
+  errorBg: string;
+  infoBg: string;
+  successBg: string;
+  warningBg: string;
+}
+export interface PaletteSkeleton {
+  bg: string;
+}
+export interface PaletteSlider {
+  primaryTrack: string;
+  secondaryTrack: string;
+  errorTrack: string;
+  infoTrack: string;
+  successTrack: string;
+  warningTrack: string;
+}
+export interface PaletteSnackbarContent {
+  bg: string;
+  color: string;
+}
+export interface PaletteSpeedDialAction {
+  fabHoverBg: string;
+}
+export interface PaletteStepConnector {
+  border: string;
+}
+export interface PaletteStepContent {
+  border: string;
+}
+export interface PaletteSwitch {
+  defaultColor: string;
+  defaultDisabledColor: string;
+  primaryDisabledColor: string;
+  secondaryDisabledColor: string;
+  errorDisabledColor: string;
+  infoDisabledColor: string;
+  successDisabledColor: string;
+  warningDisabledColor: string;
+}
+export interface PaletteTableCell {
+  border: string;
+}
+export interface PaletteTooltip {
+  bg: string;
+}
+
+// The Palette should be sync with `../themeCssVarsAugmentation/index.d.ts`
+export interface ColorSystemOptions {
+  palette?: PaletteOptions & {
+    background?: Partial<PaletteBackgroundChannel>;
+    common?: Partial<PaletteCommonChannel>;
+    primary?: Partial<PaletteColorChannel>;
+    secondary?: Partial<PaletteColorChannel>;
+    error?: Partial<PaletteColorChannel>;
+    info?: Partial<PaletteColorChannel>;
+    success?: Partial<PaletteColorChannel>;
+    text?: Partial<PaletteTextChannel>;
+    dividerChannel?: Partial<string>;
+    action?: Partial<PaletteActionChannel>;
+    Alert?: Partial<PaletteAlert>;
+    AppBar?: Partial<PaletteAppBar>;
+    Avatar?: Partial<PaletteAvatar>;
+    Button?: Partial<PaletteButton>;
+    Chip?: Partial<PaletteChip>;
+    FilledInput?: Partial<PaletteFilledInput>;
+    LinearProgress?: Partial<PaletteLinearProgress>;
+    Skeleton?: Partial<PaletteSkeleton>;
+    Slider?: Partial<PaletteSlider>;
+    SnackbarContent?: Partial<PaletteSnackbarContent>;
+    SpeedDialAction?: Partial<PaletteSpeedDialAction>;
+    StepConnector?: Partial<PaletteStepConnector>;
+    StepContent?: Partial<PaletteStepContent>;
+    Switch?: Partial<PaletteSwitch>;
+    TableCell?: Partial<PaletteTableCell>;
+    Tooltip?: Partial<PaletteTooltip>;
+  };
+  opacity?: Partial<Opacity>;
+  overlays?: Overlays;
+}
+export interface CssVarsPalette {
+  common: PaletteCommonChannel;
+  primary: PaletteColorChannel;
+  secondary: PaletteColorChannel;
+  error: PaletteColorChannel;
+  info: PaletteColorChannel;
+  success: PaletteColorChannel;
+  warning: PaletteColorChannel;
+  text: PaletteTextChannel;
+  background: PaletteBackgroundChannel;
+  dividerChannel: string;
+  action: PaletteActionChannel;
+  Alert: PaletteAlert;
+  AppBar: PaletteAppBar;
+  Avatar: PaletteAvatar;
+  Button: PaletteButton;
+  Chip: PaletteChip;
+  FilledInput: PaletteFilledInput;
+  LinearProgress: PaletteLinearProgress;
+  Skeleton: PaletteSkeleton;
+  Slider: PaletteSlider;
+  SnackbarContent: PaletteSnackbarContent;
+  SpeedDialAction: PaletteSpeedDialAction;
+  StepConnector: PaletteStepConnector;
+  StepContent: PaletteStepContent;
+  Switch: PaletteSwitch;
+  TableCell: PaletteTableCell;
+  Tooltip: PaletteTooltip;
+}
+export interface ColorSystem {
+  palette: Palette & CssVarsPalette;
+  opacity: Opacity;
+  overlays: Overlays;
+}
+export interface CssVarsThemeOptions extends Omit<ThemeOptions, 'palette' | 'components'> {
+  /**
+   * @default 'light'
+   */
+  defaultColorScheme?: SupportedColorScheme;
+  /**
+   * Prefix of the generated CSS variables
+   * @default 'mui'
+   */
+  cssVarPrefix?: string;
+  /**
+   * Theme components
+   */
+  components?: Components<Omit<Theme, 'components' | 'palette'> & CssVarsTheme>;
+  /**
+   * Color schemes configuration
+   */
+  colorSchemes?: Partial<Record<DefaultColorScheme, boolean | ColorSystemOptions>> & (ExtendedColorScheme extends string ? Record<ExtendedColorScheme, ColorSystemOptions> : {});
+  /**
+   * The strategy to generate CSS variables
+   *
+   * @example 'media'
+   * Generate CSS variables using [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)
+   *
+   * @example '.mode-%s'
+   * Generate CSS variables within a class .mode-light, .mode-dark
+   *
+   * @example '[data-mode-%s]'
+   * Generate CSS variables within a data attribute [data-mode-light], [data-mode-dark]
+   */
+  colorSchemeSelector?: 'media' | 'class' | 'data' | string;
+  /**
+   * The selector to generate the global CSS variables (non-color-scheme related)
+   * @default ':root'
+   * @example ':host' // (for shadow DOM)
+   * @see https://mui.com/material-ui/customization/shadow-dom/#3-css-theme-variables-optional
+   */
+  rootSelector?: string;
+  /**
+   * If `true`, the CSS color-scheme will not be set.
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
+   * @default false
+   */
+  disableCssColorScheme?: 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.
+   *  Ex, if the theme is { foo: { bar: 'var(--test)' } }
+   *  then, keys = ['foo', 'bar']
+   *        value = 'var(--test)'
+   */
+  shouldSkipGeneratingVar?: (keys: string[], value: string | number) => boolean;
+}
+
+// should not include keys defined in `shouldSkipGeneratingVar` and have value typeof function
+export interface ThemeVars {
+  font: ExtractTypographyTokens<Theme['typography']>;
+  palette: Omit<ColorSystem['palette'], 'colorScheme' | 'mode' | 'contrastThreshold' | 'tonalOffset' | 'getContrastText' | 'augmentColor'>;
+  opacity: Opacity;
+  overlays: Overlays;
+  shadows: Shadows;
+  shape: Theme['shape'];
+  spacing: string;
+  zIndex: ZIndex;
+}
+type Split<T, K extends keyof T = keyof T> = K extends string | number ? { [k in K]: Exclude<T[K], undefined> } : never;
+type ConcatDeep<T> = T extends Record<string | number, infer V> ? keyof T extends string | number ? V extends string | number ? keyof T : keyof V extends string | number ? `${keyof T}-${ConcatDeep<Split<V>>}` : never : never : never;
+
+/**
+ * Does not work for these cases:
+ * - { borderRadius: string | number } // the value can't be a union
+ * - { shadows: [string, string, ..., string] } // the value can't be an array
+ */
+type NormalizeVars<T> = ConcatDeep<Split<T>>;
+
+// shut off automatic exporting for the Generics above
+export {};
+export interface ThemeCssVarOverrides {}
+export type ThemeCssVar = OverridableStringUnion<NormalizeVars<Omit<ThemeVars, 'overlays' | 'shadows' | 'shape'>> | 'shape-borderRadius' | 'shadows-0' | 'shadows-1' | 'shadows-2' | 'shadows-3' | 'shadows-4' | 'shadows-5' | 'shadows-6' | 'shadows-7' | 'shadows-8' | 'shadows-9' | 'shadows-10' | 'shadows-11' | 'shadows-12' | 'shadows-13' | 'shadows-14' | 'shadows-15' | 'shadows-16' | 'shadows-17' | 'shadows-18' | 'shadows-19' | 'shadows-20' | 'shadows-21' | 'shadows-22' | 'shadows-23' | 'shadows-24' | 'overlays-0' | 'overlays-1' | 'overlays-2' | 'overlays-3' | 'overlays-4' | 'overlays-5' | 'overlays-6' | 'overlays-7' | 'overlays-8' | 'overlays-9' | 'overlays-10' | 'overlays-11' | 'overlays-12' | 'overlays-13' | 'overlays-14' | 'overlays-15' | 'overlays-16' | 'overlays-17' | 'overlays-18' | 'overlays-19' | 'overlays-20' | 'overlays-21' | 'overlays-22' | 'overlays-23' | 'overlays-24', ThemeCssVarOverrides>;
+
+/**
+ * Theme properties generated by extendTheme and CssVarsProvider
+ */
+export interface CssVarsTheme extends ColorSystem {
+  colorSchemes: Partial<Record<SupportedColorScheme, ColorSystem>>;
+  rootSelector: string;
+  colorSchemeSelector: 'media' | 'class' | 'data' | string;
+  cssVarPrefix: string;
+  defaultColorScheme: SupportedColorScheme;
+  vars: ThemeVars;
+  getCssVar: (field: ThemeCssVar, ...vars: ThemeCssVar[]) => string;
+  getColorSchemeSelector: (colorScheme: SupportedColorScheme) => string;
+  generateThemeVars: () => ThemeVars;
+  generateStyleSheets: () => Array<Record<string, any>>;
+  generateSpacing: () => Theme['spacing'];
+
+  // Default theme tokens
+  spacing: Theme['spacing'];
+  breakpoints: Theme['breakpoints'];
+  shape: Theme['shape'];
+  typography: Theme['typography'];
+  transitions: Theme['transitions'];
+  shadows: Theme['shadows'];
+  mixins: Theme['mixins'];
+  zIndex: Theme['zIndex'];
+  direction: Theme['direction'];
+  /**
+   * A function to determine if the key, value should be attached as CSS Variable
+   * `keys` is an array that represents the object path keys.
+   *  Ex, if the theme is { foo: { bar: 'var(--test)' } }
+   *  then, keys = ['foo', 'bar']
+   *        value = 'var(--test)'
+   */
+  shouldSkipGeneratingVar: (keys: string[], value: string | number) => boolean;
+  unstable_sxConfig: SxConfig;
+  unstable_sx: (props: SxProps<CssVarsTheme>) => CSSObject;
+  applyStyles: ApplyStyles<SupportedColorScheme>;
+}
+
+/**
+ * Generate a theme base on the options received.
+ * @param options Takes an incomplete theme object and adds the missing parts.
+ * @param args Deep merge the arguments with the about to be returned theme.
+ * @returns A complete, ready-to-use theme object.
+ */
+export default function createThemeWithVars(options?: CssVarsThemeOptions, ...args: object[]): Omit<Theme, 'applyStyles'> & CssVarsTheme;