@shopgate/engage 7.30.4-beta.1 → 7.31.0-alpha.2

package/styles/theme/createTheme/createTypography.js

@@ -1,14 +1,5 @@
 import _merge from "lodash/merge";
 import { isDev } from '@shopgate/engage/core/helpers';
-
-/**
- * Round a number to a fixed precision of five decimal places.
- * @param {number} value The value to round.
- * @returns {number} The rounded value.
- */
-function round(value) {
-  return Math.round(value * 1e5) / 1e5;
-}
 const caseAllCaps = {
   textTransform: 'uppercase'
 };
@@ -25,11 +16,15 @@ const defaultFontFamily = '"Roboto", "Helvetica", "Arial", sans-serif';
 export default function createTypography(palette, typography) {
   const {
     fontFamily = defaultFontFamily,
-    fontSize = 16,
+    // The default font size of the Material Specification.
+    fontSize = 14,
     fontWeightLight = 300,
     fontWeightRegular = 400,
     fontWeightMedium = 500,
     fontWeightBold = 700,
+    // Tell the theme what's the font-size on the html element.
+    // 16px is the default font-size used by browsers.
+    htmlFontSize = 16,
     // Apply the CSS properties to all the variants.
     allVariants,
     pxToRem: pxToRem2,
@@ -40,13 +35,14 @@ export default function createTypography(palette, typography) {
       console.error('Shopgate Theme: `fontSize` is required to be a number.');
     }
   }
+  const coef = fontSize / 14;
 
   /**
    * Calculates a rem value for a passed pixel value.
    * @param {number} size The source value in pixels.
    * @returns {string} The result value in rem.
    */
-  const pxToRem = size => `${round(size / fontSize)}rem`;
+  const pxToRem = size => `${size / htmlFontSize * coef}rem`;
 
   /**
    * Creates a typography variant object.

package/styles/theme/createTheme/helpers/cssVarsColorAugmentation.d.ts

@@ -0,0 +1,10 @@
+import type { BaseTheme } from '..';
+import type { CssVarsParserReturnValue } from './cssVarsParser';
+/**
+ * Augments the CSS variables for the color palette by adding light and dark variants for each color.
+ * @param cssParserReturn The result from the CSS variables parser.
+ * @param theme The base theme object, which includes the palette and the lighten/darken functions.
+ * @returns An object containing the augmented CSS variables.
+ */
+export default function cssVarsColorAugmentation(cssParserReturn: CssVarsParserReturnValue<BaseTheme>, theme: BaseTheme): CssVarsParserReturnValue<BaseTheme>;
+//# sourceMappingURL=cssVarsColorAugmentation.d.ts.map

package/styles/theme/createTheme/helpers/cssVarsColorAugmentation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cssVarsColorAugmentation.d.ts","sourceRoot":"","sources":["../../../../../styles/theme/createTheme/helpers/cssVarsColorAugmentation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,IAAI,CAAC;AACpC,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAC;AA+BhE;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAC9C,eAAe,EAAE,wBAAwB,CAAC,SAAS,CAAC,EACpD,KAAK,EAAE,SAAS,GACf,wBAAwB,CAAC,SAAS,CAAC,CAerC"}

package/styles/theme/createTheme/helpers/cssVarsColorAugmentation.js

@@ -0,0 +1,44 @@
+function addAugmentationToVars(vars, theme) {
+  if (!vars.palette) return vars;
+  const augmentedPalette = {
+    ...vars.palette
+  };
+  Object.keys(augmentedPalette).forEach(key => {
+    // @ts-expect-error - We are sure about the type here
+    const paletteEntry = augmentedPalette[key];
+    if (paletteEntry && typeof paletteEntry === 'object' && paletteEntry.main) {
+      // @ts-expect-error - We are sure about the type here
+      augmentedPalette[key] = {
+        ...paletteEntry,
+        // Inject css color-mix function to create light and dark variants of the main color
+        light: theme.lighten(paletteEntry.main),
+        dark: theme.darken(paletteEntry.main)
+      };
+    }
+  });
+  return {
+    ...vars,
+    palette: augmentedPalette
+  };
+}
+
+/**
+ * Augments the CSS variables for the color palette by adding light and dark variants for each color.
+ * @param cssParserReturn The result from the CSS variables parser.
+ * @param theme The base theme object, which includes the palette and the lighten/darken functions.
+ * @returns An object containing the augmented CSS variables.
+ */
+export default function cssVarsColorAugmentation(cssParserReturn, theme) {
+  const {
+    vars: varsInput,
+    varsWithDefaults: varsWithDefaultsInput,
+    ...rest
+  } = cssParserReturn;
+  const vars = addAugmentationToVars(varsInput, theme);
+  const varsWithDefaults = addAugmentationToVars(varsWithDefaultsInput, theme);
+  return {
+    ...rest,
+    vars,
+    varsWithDefaults
+  };
+}

package/styles/theme/createTheme/helpers/cssVarsParser.d.ts

@@ -0,0 +1,58 @@
+/**
+ * @file Helper function to parse a theme-like object to generate matching CSS variables.
+ * Heavily inspired by Material UI's implementation:
+ * @see https://github.com/mui/material-ui/blob/master/packages/mui-system/src/cssVars/cssVarsParser.ts
+ */
+type CssVarsParserOptions = {
+    prefix?: string;
+    shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
+};
+export type CssVarsParserReturnValue<T> = {
+    /**
+     * An object containing the CSS variables as keys and their corresponding values
+     * For example: { '--sg-palette-primary-main': '#000000' }
+     */
+    css: Record<string, string | number>;
+    /**
+     * An object with the same structure as the input theme, but with values replaced by CSS variable references.
+     * For example: { palette: { primary: { main: 'var(--sg-palette-primary-main)' } }
+     */
+    vars: T;
+    /**
+     * An object with the same structure as the input theme, but with values replaced by CSS variable references with fallback values.
+     * For example: { palette: { primary: { main: 'var(--sg-palette-primary-main, #000000)' } }
+     */
+    varsWithDefaults: T;
+    /**
+     * An object with the same structure as the input theme, but with values replaced by the raw CSS variable names.
+     * For example: { palette: { primary: { main: '--sg-palette-primary-main' } }
+     */
+    varNames: T;
+};
+/**
+ * Helper function to parse a theme-like object to generate matching CSS variables.
+ * It will return an object containing `css`, `vars`, and `varsWithDefaults`.
+ * The `css` object can be used to set CSS variables in a style tag,
+ * the `vars` object can be used to reference the CSS variables in the theme,
+ * and the `varsWithDefaults` object can be used to reference the CSS variables with fallback
+ * values in the theme.
+ *
+ * @param theme A theme-like object to be parsed
+ * @param options Options for parsing the theme
+ * @returns `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme), `varsWithDefaults`
+ * is an object to get css variable with fallback values (same structure as theme), `varsRaw` is an object to get the raw css
+ * variable name (same structure as theme).
+ * @example
+ * const { css, vars, varsRaw } = parser({
+ *   fontSize: 12,
+ *   lineHeight: 1.2,
+ *   palette: { primary: { 500: 'var(--color)' } }
+ * }, { prefix: 'foo' })
+ *
+ * console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--color)' }
+ * console.log(vars) // { fontSize: 'var(--foo-fontSize)', lineHeight: 'var(--foo-lineHeight)', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
+ * console.log(varsRaw) // { fontSize: '--foo-fontSize', lineHeight: '--foo-lineHeight', palette: { primary: { 500: '--foo-palette-primary-500' } } }
+ */
+export default function cssVarsParser<T extends object>(theme: object, options?: CssVarsParserOptions): CssVarsParserReturnValue<T>;
+export {};
+//# sourceMappingURL=cssVarsParser.d.ts.map

package/styles/theme/createTheme/helpers/cssVarsParser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cssVarsParser.d.ts","sourceRoot":"","sources":["../../../../../styles/theme/createTheme/helpers/cssVarsParser.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AA4HH,KAAK,oBAAoB,GAAG;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uBAAuB,CAAC,EAAE,CAAC,cAAc,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,OAAO,CAAC;CAC9F,CAAC;AAEF,MAAM,MAAM,wBAAwB,CAAC,CAAC,IAAI;IACxC;;;OAGG;IACH,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;IACrC;;;OAGG;IACH,IAAI,EAAE,CAAC,CAAC;IACR;;;OAGG;IACH,gBAAgB,EAAE,CAAC,CAAC;IACpB;;;OAGG;IACH,QAAQ,EAAE,CAAC,CAAC;CACb,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,CAAC,SAAS,MAAM,EACpD,KAAK,EAAE,MAAM,EACb,OAAO,CAAC,EAAE,oBAAoB,GAC7B,wBAAwB,CAAC,CAAC,CAAC,CA+D7B"}

package/styles/theme/createTheme/helpers/cssVarsParser.js

@@ -0,0 +1,173 @@
+import "core-js/modules/es.array.includes.js";
+/**
+ * @file Helper function to parse a theme-like object to generate matching CSS variables.
+ * Heavily inspired by Material UI's implementation:
+ * @see https://github.com/mui/material-ui/blob/master/packages/mui-system/src/cssVars/cssVarsParser.ts
+ */
+
+/**
+ * This function creates an object from keys, value and then assign to target
+ *
+ * @param obj The target object to be assigned
+ * @param keys An array of keys to create the nested object
+ * @param value The value to be assigned to the deepest key
+ * @param arrayKeys An array of keys that are arrays, so the function will create
+ * array instead of object when it encounters these keys
+ * @example
+ * const source = {}
+ * assignNestedKeys(source, ['palette', 'primary'], 'var(--palette-primary)')
+ * console.log(source) // { palette: { primary: 'var(--palette-primary)' } }
+ * @example
+ * const source = { palette: { primary: 'var(--palette-primary)' } }
+ * assignNestedKeys(source, ['palette', 'secondary'], 'var(--palette-secondary)')
+ * console.log(source) // { palette: { primary: 'var(--palette-primary)', secondary: 'var(--palette-secondary)' } }
+ */
+const assignNestedKeys = (obj, keys, value, arrayKeys = []) => {
+  let temp = obj;
+  keys.forEach((k, index) => {
+    if (index === keys.length - 1) {
+      if (Array.isArray(temp)) {
+        temp[Number(k)] = value;
+      } else if (temp && typeof temp === 'object') {
+        temp[k] = value;
+      }
+    } else if (temp && typeof temp === 'object') {
+      if (!temp[k]) {
+        temp[k] = arrayKeys.includes(k) ? [] : {};
+      }
+      // @ts-expect-error - We are sure about the type here
+      temp = temp[k];
+    }
+  });
+};
+
+/**
+ * Walk through an object recursively and call the callback when the deepest key is reached
+ * and its value is not `undefined` | `null`.
+ * @param obj Source object
+ * @param callback A function that will be called when
+ * - the deepest key in source object is reached
+ * - the value of the deepest key is NOT `undefined` | `null`
+ * @param shouldSkipPaths A function that will be called before traversing the object,
+ * if it returns true, the current path will be skipped
+ * @example
+ * walkObjectDeep({ palette: { primary: { main: '#000000' } } }, console.log)
+ * // ['palette', 'primary', 'main'] '#000000'
+ */
+const walkObjectDeep = (obj, callback, shouldSkipPaths) => {
+  function recurse(
+  // @ts-expect-error - We are sure about the type here
+  object, parentKeys = [], arrayKeys = []) {
+    Object.entries(object).forEach(([key, value]) => {
+      if (!shouldSkipPaths || !shouldSkipPaths([].concat(parentKeys, [key]))) {
+        if (value !== undefined && value !== null) {
+          if (typeof value === 'object' && Object.keys(value).length > 0) {
+            recurse(value, // @ts-expect-error - We are sure about the type here
+            [].concat(parentKeys, [key]), Array.isArray(value) ? [].concat(arrayKeys, [key]) : arrayKeys);
+          } else {
+            // @ts-expect-error - We are sure about the type here
+            callback([].concat(parentKeys, [key]), value, arrayKeys);
+          }
+        }
+      }
+    });
+  }
+  recurse(obj);
+};
+
+/**
+ * Get CSS value with unit if needed. For example, if the value is a number and the key is not
+ * unitless, it will add 'px' unit to the value.
+ * @param keys The keys of the value, used to determine if the value is unitless or not
+ * @param value The value to be converted to a CSS value, if it's a number
+ * and not unitless, it will be converted to a string with 'px' unit
+ * @returns The CSS value with unit if needed
+ */
+const getCssValue = (keys, value) => {
+  if (typeof value === 'number') {
+    if (['lineHeight', 'fontWeight', 'opacity', 'zIndex'].some(prop => keys.includes(prop))) {
+      // CSS property that are unitless
+      return value;
+    }
+    const lastKey = keys[keys.length - 1];
+    if (lastKey.toLowerCase().includes('opacity')) {
+      // opacity values are unitless
+      return value;
+    }
+    return `${value}px`;
+  }
+  return value;
+};
+/**
+ * Helper function to parse a theme-like object to generate matching CSS variables.
+ * It will return an object containing `css`, `vars`, and `varsWithDefaults`.
+ * The `css` object can be used to set CSS variables in a style tag,
+ * the `vars` object can be used to reference the CSS variables in the theme,
+ * and the `varsWithDefaults` object can be used to reference the CSS variables with fallback
+ * values in the theme.
+ *
+ * @param theme A theme-like object to be parsed
+ * @param options Options for parsing the theme
+ * @returns `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme), `varsWithDefaults`
+ * is an object to get css variable with fallback values (same structure as theme), `varsRaw` is an object to get the raw css
+ * variable name (same structure as theme).
+ * @example
+ * const { css, vars, varsRaw } = parser({
+ *   fontSize: 12,
+ *   lineHeight: 1.2,
+ *   palette: { primary: { 500: 'var(--color)' } }
+ * }, { prefix: 'foo' })
+ *
+ * console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--color)' }
+ * console.log(vars) // { fontSize: 'var(--foo-fontSize)', lineHeight: 'var(--foo-lineHeight)', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
+ * console.log(varsRaw) // { fontSize: '--foo-fontSize', lineHeight: '--foo-lineHeight', palette: { primary: { 500: '--foo-palette-primary-500' } } }
+ */
+export default function cssVarsParser(theme, options) {
+  const {
+    prefix = 'sg',
+    shouldSkipGeneratingVar
+  } = options || {};
+  const css = {};
+  const vars = {};
+  const varsWithDefaults = {};
+  const varNames = {};
+  walkObjectDeep(theme, (keys, value, arrayKeys) => {
+    if (typeof value === 'string' || typeof value === 'number') {
+      if (!shouldSkipGeneratingVar || !shouldSkipGeneratingVar(keys, value)) {
+        // only create css & var if `shouldSkipGeneratingVar` return false
+        const cssVar = `--${prefix ? `${prefix}-` : ''}${keys.join('-')}`;
+        const resolvedValue = getCssValue(keys, value);
+
+        // Add the current css variable to the `css` object (--varName: value)
+        Object.assign(css, {
+          [cssVar]: resolvedValue
+        });
+
+        // Add the reference to the current css variable to the `vars` object
+        // e.g. ({ palette: { primary: { main: 'var(--varName)' } } })
+        assignNestedKeys(
+        // @ts-expect-error - We are sure about the type here
+        vars, keys, `var(${cssVar})`, arrayKeys);
+
+        // Add the reference to the current css variable with fallback value to the `varsWithDefaults` object
+        // e.g. ({ palette: { primary: { main: 'var(--varName, fallbackValue)' } } })
+        assignNestedKeys(
+        // @ts-expect-error - We are sure about the type here
+        varsWithDefaults, keys, `var(${cssVar}, ${resolvedValue})`, arrayKeys);
+
+        // Add the raw css variable name to the `varNames` object
+        // e.g. ({ palette: { primary: { main: '--varName' } } })
+        assignNestedKeys(
+        // @ts-expect-error - We are sure about the type here
+        varNames, keys, cssVar, arrayKeys);
+      }
+    }
+  }, keys => keys[0] === 'vars' // skip 'vars/*' paths
+  );
+  return {
+    css,
+    vars,
+    varsWithDefaults,
+    varNames
+  };
+}

package/styles/theme/createTheme/helpers/cssVarsSelector.d.ts

@@ -0,0 +1,28 @@
+import type { ColorSchemeName, ColorSchemeSelectorType } from '..';
+/**
+ * Function that generates a CSS selector string for a given color scheme.
+ */
+export type GetColorSchemeSelector = (colorScheme: ColorSchemeName) => string;
+/**
+ * Function that switches the color scheme by the corresponding selector type.
+ */
+export type ActiveColorSchemeSwitcher = (colorScheme: ColorSchemeName) => void;
+/**
+ * Creates a function that generates a CSS selector string for a given color scheme,
+ * based on the specified selector type (either 'data' for data attributes or 'class' for class names).
+ *
+ * @param selectorType The type of selector to be used, either 'data' for data attributes or
+ * 'class' for class names.
+ * @returns A function that generates the corresponding selector string.
+ */
+export declare function createGetColorSchemeSelector(selectorType: ColorSchemeSelectorType): GetColorSchemeSelector;
+/**
+ * Creates a function that switches the color scheme, based on the specified selector type
+ * (either 'data' for data attributes or 'class' for class names).
+ *
+ * @param selectorType The type of selector to be used, either 'data' for data attributes or
+ * 'class' for class names.
+ * @returns A function that switches the color scheme by the corresponding selector type.
+ */
+export declare function createSetActiveColorScheme(selectorType: ColorSchemeSelectorType): ActiveColorSchemeSwitcher;
+//# sourceMappingURL=cssVarsSelector.d.ts.map

package/styles/theme/createTheme/helpers/cssVarsSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cssVarsSelector.d.ts","sourceRoot":"","sources":["../../../../../styles/theme/createTheme/helpers/cssVarsSelector.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,uBAAuB,EAAE,MAAM,IAAI,CAAC;AAEnE;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAAG,CAAC,WAAW,EAAE,eAAe,KAAK,MAAM,CAAC;AAE9E;;GAEG;AACH,MAAM,MAAM,yBAAyB,GAAG,CAAC,WAAW,EAAE,eAAe,KAAK,IAAI,CAAC;AAE/E;;;;;;;GAOG;AACH,wBAAgB,4BAA4B,CAC1C,YAAY,EAAE,uBAAuB,GACpC,sBAAsB,CAQxB;AAED;;;;;;;GAOG;AACH,wBAAgB,0BAA0B,CACxC,YAAY,EAAE,uBAAuB,GACpC,yBAAyB,CAW3B"}

package/styles/theme/createTheme/helpers/cssVarsSelector.js

@@ -0,0 +1,44 @@
+/**
+ * Function that generates a CSS selector string for a given color scheme.
+ */
+
+/**
+ * Function that switches the color scheme by the corresponding selector type.
+ */
+
+/**
+ * Creates a function that generates a CSS selector string for a given color scheme,
+ * based on the specified selector type (either 'data' for data attributes or 'class' for class names).
+ *
+ * @param selectorType The type of selector to be used, either 'data' for data attributes or
+ * 'class' for class names.
+ * @returns A function that generates the corresponding selector string.
+ */
+export function createGetColorSchemeSelector(selectorType) {
+  return colorScheme => {
+    if (selectorType === 'data') {
+      return `[data-sg-color-scheme="${colorScheme}"]`;
+    }
+    return `.${colorScheme}`;
+  };
+}
+
+/**
+ * Creates a function that switches the color scheme, based on the specified selector type
+ * (either 'data' for data attributes or 'class' for class names).
+ *
+ * @param selectorType The type of selector to be used, either 'data' for data attributes or
+ * 'class' for class names.
+ * @returns A function that switches the color scheme by the corresponding selector type.
+ */
+export function createSetActiveColorScheme(selectorType) {
+  return colorScheme => {
+    const root = document.documentElement;
+    if (selectorType === 'data') {
+      root.setAttribute('data-sg-color-scheme', colorScheme);
+    } else {
+      root.classList.remove('light', 'dark');
+      root.classList.add(colorScheme);
+    }
+  };
+}

package/styles/theme/createTheme/helpers/index.d.ts

@@ -0,0 +1,6 @@
+export { default as cssVarsParser } from './cssVarsParser';
+export type { CssVarsParserReturnValue } from './cssVarsParser';
+export { createGetColorSchemeSelector, createSetActiveColorScheme } from './cssVarsSelector';
+export type { ActiveColorSchemeSwitcher, GetColorSchemeSelector } from './cssVarsSelector';
+export { default as cssVarsColorAugmentation } from './cssVarsColorAugmentation';
+//# sourceMappingURL=index.d.ts.map

package/styles/theme/createTheme/helpers/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../styles/theme/createTheme/helpers/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,YAAY,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAC;AAChE,OAAO,EAAE,4BAA4B,EAAE,0BAA0B,EAAE,MAAM,mBAAmB,CAAC;AAC7F,YAAY,EAAE,yBAAyB,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAC3F,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,4BAA4B,CAAC"}

package/styles/theme/createTheme/helpers/index.js

@@ -0,0 +1,3 @@
+export { default as cssVarsParser } from "./cssVarsParser";
+export { createGetColorSchemeSelector, createSetActiveColorScheme } from "./cssVarsSelector";
+export { default as cssVarsColorAugmentation } from "./cssVarsColorAugmentation";

package/styles/theme/createTheme/index.d.ts

@@ -1,41 +1,9 @@
-import { type Palette } from './createPalette'
-import { type Typography, type TypographyOptions } from './createTypography';
-import { type Breakpoints } from './createBreakpoints';
-import { type Spacing } from './createSpacing';
-import { type Transitions } from './transitions';
-import { type ZIndex } from './zIndex';
-
-export { type Breakpoint } from './createBreakpoints'
-
-export interface ThemeOptions {
-  typography?: TypographyOptions | ((palette: Palette) => TypographyOptions);
-}
-
-export interface Theme {
-  /**
-   * The palette defines the theme colors.
-   */
-  palette: Palette;
-  /**
-   * API to simplify the use of media queries.
-   */
-  breakpoints: Breakpoints;
-  /**
-   * Use the spacing function to create consistent spacing.
-   */
-  spacing: Spacing;
-  /**
-   * API to simplify the creation of transitions
-   */
-  transitions: Transitions;
-  /**
-   * Font styles for multiple typography variants.
-   */
-  typography: Typography;
-  /**
-   * Reference to z-index values for multiple components.
-   */
-  zIndex: ZIndex;
-}
-
-export function createTheme(options?: ThemeOptions): Theme;
+import { type ThemeOptions, type ThemeInternal } from './types';
+export type { Theme, BaseTheme, ThemeInternal, ThemeOptions, Breakpoint, ColorSchemeName, ColorSchemeSelectorType, PaletteColorsWithMain, } from './types';
+/**
+ * Creates a theme object for the ThemeProvider.
+ * @param options The theme options.
+ * @returns The theme object
+ */
+export declare const createTheme: (options?: ThemeOptions) => ThemeInternal;
+//# sourceMappingURL=index.d.ts.map

package/styles/theme/createTheme/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/index.ts"],"names":[],"mappings":"AASA,OAAO,EACL,KAAK,YAAY,EAGjB,KAAK,aAAa,EACnB,MAAM,SAAS,CAAC;AAEjB,YAAY,EACV,KAAK,EACL,SAAS,EACT,aAAa,EACb,YAAY,EACZ,UAAU,EACV,eAAe,EACf,uBAAuB,EACvB,qBAAqB,GACtB,MAAM,SAAS,CAAC;AAEjB;;;;GAIG;AACH,eAAO,MAAM,WAAW,GAAI,UAAS,YAAiB,KAAG,aAkExD,CAAC"}

package/styles/theme/createTheme/index.js

@@ -1,29 +1,70 @@
-import createPalette from "./createPalette";
+import "core-js/modules/es.array.reduce.js";
+import merge from 'lodash/merge';
 import createBreakpoints from "./createBreakpoints";
-import createTypography from "./createTypography";
 import createSpacing from "./createSpacing";
 import transitions from "./transitions";
 import zIndex from "./zIndex";
-
-// eslint-disable-next-line valid-jsdoc
+import createThemeFromColorScheme from "./createThemeFromColorScheme";
+import createCssVarsForColorSchemeThemes from "./createCssVarsForColorSchemeThemes";
+import applyStyles from "./applyStyles";
+import { createGetColorSchemeSelector, createSetActiveColorScheme } from "./helpers";
 /**
  * Creates a theme object for the ThemeProvider.
+ * @param options The theme options.
  * @returns The theme object
  */
 export const createTheme = (options = {}) => {
   const {
-    typography: typographyInput = {}
+    defaultColorScheme = 'light',
+    colorSchemeSelector = 'data',
+    cssVarPrefix = 'sg',
+    palette: paletteInput = {},
+    typography: typographyInput = {},
+    colorSchemes: colorSchemesInput = {
+      light: {}
+    }
   } = options;
-  const palette = createPalette();
+  const defaultScheme = merge({}, {
+    palette: paletteInput,
+    typography: typographyInput
+    // @ts-expect-error - Sure about the type here
+  }, colorSchemesInput[defaultColorScheme] ?? {});
+  const colorSchemes = Object.entries(colorSchemesInput).reduce((acc, [type, scheme]) => {
+    // @ts-expect-error - Sure about the type here
+    acc[type] = createThemeFromColorScheme(merge({}, {
+      palette: {
+        mode: type
+      }
+    }, defaultScheme, scheme));
+    return acc;
+  }, {});
+  const getColorSchemeSelector = createGetColorSchemeSelector(colorSchemeSelector);
+  const setActiveColorScheme = createSetActiveColorScheme(colorSchemeSelector);
+  const {
+    cssVarsTheme,
+    generateStyleSheets
+  } = createCssVarsForColorSchemeThemes(colorSchemes, {
+    getColorSchemeSelector,
+    cssVarPrefix
+  });
+  const currentTheme = colorSchemes[defaultColorScheme] ?? colorSchemes.light;
   const breakpoints = createBreakpoints();
   const spacing = createSpacing();
-  const typography = createTypography(palette, typographyInput);
-  return {
-    palette,
-    typography,
+
+  // @ts-expect-error applyStyles is added to the theme object after its creation
+  const theme = {
+    ...currentTheme,
+    ...cssVarsTheme,
+    defaultColorScheme,
     breakpoints,
     spacing,
     transitions,
-    zIndex
+    zIndex,
+    colorSchemes,
+    getColorSchemeSelector,
+    setActiveColorScheme,
+    generateStyleSheets
   };
+  theme.applyStyles = applyStyles;
+  return theme;
 };

package/styles/theme/createTheme/shadows.d.ts

@@ -0,0 +1,4 @@
+declare const shadows: readonly ["none", string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string];
+export type Shadows = typeof shadows;
+export default shadows;
+//# sourceMappingURL=shadows.d.ts.map

package/styles/theme/createTheme/shadows.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shadows.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/shadows.ts"],"names":[],"mappings":"AAaA,QAAA,MAAM,OAAO,mNA0BH,CAAC;AAEX,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAA;AAEpC,eAAe,OAAO,CAAC"}

package/styles/theme/createTheme/shadows.js

@@ -0,0 +1,10 @@
+const shadowKeyUmbraOpacity = 0.2;
+const shadowKeyPenumbraOpacity = 0.14;
+const shadowAmbientShadowOpacity = 0.12;
+function createShadow(...px) {
+  return [`${px[0]}px ${px[1]}px ${px[2]}px ${px[3]}px rgba(0,0,0,${shadowKeyUmbraOpacity})`, `${px[4]}px ${px[5]}px ${px[6]}px ${px[7]}px rgba(0,0,0,${shadowKeyPenumbraOpacity})`, `${px[8]}px ${px[9]}px ${px[10]}px ${px[11]}px rgba(0,0,0,${shadowAmbientShadowOpacity})`].join(',');
+}
+
+// Values from https://github.com/material-components/material-components-web/blob/be8747f94574669cb5e7add1a7c54fa41a89cec7/packages/mdc-elevation/_variables.scss
+const shadows = ['none', createShadow(0, 2, 1, -1, 0, 1, 1, 0, 0, 1, 3, 0), createShadow(0, 3, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0), createShadow(0, 3, 3, -2, 0, 3, 4, 0, 0, 1, 8, 0), createShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0), createShadow(0, 3, 5, -1, 0, 5, 8, 0, 0, 1, 14, 0), createShadow(0, 3, 5, -1, 0, 6, 10, 0, 0, 1, 18, 0), createShadow(0, 4, 5, -2, 0, 7, 10, 1, 0, 2, 16, 1), createShadow(0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2), createShadow(0, 5, 6, -3, 0, 9, 12, 1, 0, 3, 16, 2), createShadow(0, 6, 6, -3, 0, 10, 14, 1, 0, 4, 18, 3), createShadow(0, 6, 7, -4, 0, 11, 15, 1, 0, 4, 20, 3), createShadow(0, 7, 8, -4, 0, 12, 17, 2, 0, 5, 22, 4), createShadow(0, 7, 8, -4, 0, 13, 19, 2, 0, 5, 24, 4), createShadow(0, 7, 9, -4, 0, 14, 21, 2, 0, 5, 26, 4), createShadow(0, 8, 9, -5, 0, 15, 22, 2, 0, 6, 28, 5), createShadow(0, 8, 10, -5, 0, 16, 24, 2, 0, 6, 30, 5), createShadow(0, 8, 11, -5, 0, 17, 26, 2, 0, 6, 32, 5), createShadow(0, 9, 11, -5, 0, 18, 28, 2, 0, 7, 34, 6), createShadow(0, 9, 12, -6, 0, 19, 29, 2, 0, 7, 36, 6), createShadow(0, 10, 13, -6, 0, 20, 31, 3, 0, 8, 38, 7), createShadow(0, 10, 13, -6, 0, 21, 33, 3, 0, 8, 40, 7), createShadow(0, 10, 14, -6, 0, 22, 35, 3, 0, 8, 42, 7), createShadow(0, 11, 14, -7, 0, 23, 36, 3, 0, 9, 44, 8), createShadow(0, 11, 15, -7, 0, 24, 38, 3, 0, 9, 46, 8)];
+export default shadows;