@shopgate/engage 7.30.3 → 7.31.0-alpha.1

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

@@ -0,0 +1,35 @@
+import type { ComponentsOptions, Components, ComponentsFromSchema } from './createComponents.types';
+export type { ComponentsOptions, Components, ComponentVars } from './createComponents.types';
+/**
+ * Deeply resolves a components object:
+ * - strings remain strings
+ * - functions are executed with `theme`
+ * - arrays and objects are recursively traversed
+ * @param input The input components object to resolve.
+ * @param theme The theme object to pass to functions if any token values are functions.
+ * @returns The fully resolved components object with the same shape as the input.
+ */
+export declare function resolveComponentsValues<TTheme, TInput>(input: TInput, theme: TTheme): ComponentsFromSchema<TInput>;
+type AnyObject = Record<string, any>;
+/**
+ * Flattens component entries that contain a `vars` section.
+ * @param input The components object to flatten.
+ * @returns A flattened components object where entries with a `vars` property are replaced
+ * by their `vars` content.
+ * @example
+ * { price: { vars: { color: 'red' } } }
+ *
+ * becomes:
+ * { price: { color: 'red' } }
+ */
+export declare function flattenComponentVars<T extends AnyObject>(input: T): { [K in keyof T]: T[K] extends {
+    vars: infer V;
+} ? V : T[K]; };
+/**
+ * Creates a components object from the theme
+ * @param inputComponents The input components options
+ * @returns The components object
+ */
+declare const createComponents: (inputComponents: ComponentsOptions) => Components;
+export default createComponents;
+//# sourceMappingURL=createComponents.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"createComponents.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/createComponents.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,iBAAiB,EACjB,UAAU,EACV,oBAAoB,EACrB,MAAM,0BAA0B,CAAC;AAGlC,YAAY,EAAE,iBAAiB,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAE7F;;;;;;;;GAQG;AACH,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,MAAM,EACpD,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,GACZ,oBAAoB,CAAC,MAAM,CAAC,CAmB9B;AAGD,KAAK,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAErC;;;;;;;;;;GAUG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,SAAS,EAAE,KAAK,EAAE,CAAC,GAa/C,GACd,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS;IAAE,IAAI,EAAE,MAAM,CAAC,CAAA;CAAE,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAC1D,CACF;AAED;;;;GAIG;AACH,QAAA,MAAM,gBAAgB,GAAI,iBAAiB,iBAAiB,KAAG,UAQ9D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/styles/theme/createTheme/createComponents.js

@@ -0,0 +1,67 @@
+import merge from 'lodash/merge';
+import isPlainObject from 'lodash/isPlainObject';
+import mapValues from 'lodash/mapValues';
+import { componentsDefaults, componentsSchema } from "./createComponents.types";
+/**
+ * Deeply resolves a components object:
+ * - strings remain strings
+ * - functions are executed with `theme`
+ * - arrays and objects are recursively traversed
+ * @param input The input components object to resolve.
+ * @param theme The theme object to pass to functions if any token values are functions.
+ * @returns The fully resolved components object with the same shape as the input.
+ */
+export function resolveComponentsValues(input, theme) {
+  const visit = node => {
+    if (typeof node === 'function') {
+      return node(theme);
+    }
+    if (Array.isArray(node)) {
+      return node.map(visit);
+    }
+    if (isPlainObject(node)) {
+      // @ts-expect-error - We know this is an object
+      return mapValues(node, visit);
+    }
+    return node;
+  };
+  return visit(input);
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+/**
+ * Flattens component entries that contain a `vars` section.
+ * @param input The components object to flatten.
+ * @returns A flattened components object where entries with a `vars` property are replaced
+ * by their `vars` content.
+ * @example
+ * { price: { vars: { color: 'red' } } }
+ *
+ * becomes:
+ * { price: { color: 'red' } }
+ */
+export function flattenComponentVars(input) {
+  const result = {};
+  for (const [key, value] of Object.entries(input)) {
+    if (value && typeof value === 'object' && 'vars' in value) {
+      result[key] = {
+        ...value.vars
+      };
+    } else {
+      result[key] = value;
+    }
+  }
+  return result;
+}
+
+/**
+ * Creates a components object from the theme
+ * @param inputComponents The input components options
+ * @returns The components object
+ */
+const createComponents = inputComponents => {
+  const mergedComponents = merge({}, componentsSchema, componentsDefaults, inputComponents);
+  return mergedComponents;
+};
+export default createComponents;

package/styles/theme/createTheme/createComponents.types.d.ts

@@ -0,0 +1,132 @@
+import type { BaseTheme } from './index';
+type Theme = Omit<BaseTheme, 'components'>;
+/**
+ * Leaf placeholders used in schemas.
+ * (Schema values are placeholders; only keys matter.)
+ */
+type Leaf = string | number | boolean | null | undefined;
+/**
+ * Represents a component token value used during theme creation.
+ *
+ * A token can be provided as:
+ * - a `string` (direct value), or
+ * - a function that derives the value from theme tokens (e.g. palette).
+ *
+ * This enables component defaults / overrides like:
+ * - `{ color: '#111' }`
+ * - `{ color: (theme) => theme.palette.text.primary }`
+ */
+export type ComponentTokenValue<TTheme> = string | number | ((theme: TTheme) => string | number);
+/**
+ * Derives the **resolved** components type from `componentsSchema`.
+ *
+ * Represents the components object on the final theme (e.g. via `useTheme()`),
+ * where all token values are plain strings.
+ *
+ * Rules:
+ * - Leaf values become `string`.
+ * - Arrays (if present) are mapped element-by-element.
+ * - Objects are recursively mapped and all keys are required.
+ */
+export type ComponentsFromSchema<TSchema> = TSchema extends Leaf ? string : TSchema extends readonly (infer U)[] ? readonly ComponentsFromSchema<U>[] : TSchema extends object ? {
+    [K in keyof TSchema]: ComponentsFromSchema<TSchema[K]>;
+} : string;
+/**
+ * Derives the **defaults** components type from `componentsSchema`.
+ *
+ * Represents the internal default token set shipped with the design system.
+ * Defaults must cover the full schema (no missing keys), but each leaf can be
+ * either a string or a theme-derived function.
+ *
+ * Rules:
+ * - Leaf values become `ComponentTokenValue<TTheme>`.
+ * - Arrays (if present) are mapped element-by-element.
+ * - Objects are recursively mapped and all keys are required.
+ */
+export type ComponentsDefaultsFromSchema<TSchema, TTheme> = TSchema extends Leaf ? ComponentTokenValue<TTheme> : TSchema extends readonly (infer U)[] ? readonly ComponentsDefaultsFromSchema<U, TTheme>[] : TSchema extends object ? {
+    [K in keyof TSchema]: ComponentsDefaultsFromSchema<TSchema[K], TTheme>;
+} : ComponentTokenValue<TTheme>;
+/**
+ * Derives the **override** components type from `componentsSchema`.
+ *
+ * Represents what can be passed into `createTheme({ components: ... })`.
+ * Overrides are deep-partial: users can provide any subset of tokens, while
+ * still being guided by the schema for valid keys.
+ *
+ * Rules:
+ * - Leaf values become `ComponentTokenValue<TTheme>`.
+ * - Arrays (if present) are mapped element-by-element.
+ * - Objects are recursively mapped and all properties are optional at every level.
+ */
+export type ComponentsOverrideFromSchema<TSchema, TTheme> = TSchema extends Leaf ? ComponentTokenValue<TTheme> : TSchema extends readonly (infer U)[] ? readonly ComponentsOverrideFromSchema<U, TTheme>[] : TSchema extends object ? {
+    [K in keyof TSchema]?: ComponentsOverrideFromSchema<TSchema[K], TTheme>;
+} : ComponentTokenValue<TTheme>;
+/**
+ * Derives the flattened component vars type from `componentsSchema`.
+ *
+ * Each top-level component entry is mapped to its `vars` section.
+ * Leaf values become `string`.
+ *
+ * Example:
+ * {
+ *   price: {
+ *     vars: {
+ *       color: '';
+ *     }
+ *   }
+ * }
+ *
+ * becomes:
+ * {
+ *   price: {
+ *     color: string;
+ *   }
+ * }
+ */
+export type ComponentVarsFromSchema<TSchema> = {
+    [K in keyof TSchema]: TSchema[K] extends {
+        vars: infer TVars;
+    } ? ComponentsFromSchema<TVars> : never;
+};
+/**
+ * Schema that defines the shape of the components object.
+ *
+ * Every mapping added to the components of createTheme should be added here to get proper typings
+ * for the theme components.
+ */
+export declare const componentsSchema: {
+    readonly price: {
+        readonly vars: {
+            readonly color: "";
+        };
+    };
+    readonly button: {
+        readonly vars: {
+            readonly borderRadius: "";
+            readonly color: "";
+            readonly textColor: "";
+        };
+    };
+};
+/**
+ * Default component tokens.
+ * Users can override any subset via `createTheme({ components: ... })`.
+ *
+ * `satisfies` ensures:
+ * - you cover every schema entry
+ * - functions get proper `Theme` typing
+ */
+export declare const componentsDefaults: {
+    price: {
+        vars: {
+            color: (t: Theme) => string;
+        };
+    };
+};
+/** Internal defaults type (must cover full schema). */
+export type ComponentsDefaults = ComponentsOverrideFromSchema<typeof componentsSchema, Theme>;
+export type ComponentsOptions = ComponentsOverrideFromSchema<typeof componentsSchema, Theme>;
+export type Components = ComponentsFromSchema<typeof componentsSchema>;
+export type ComponentVars = ComponentVarsFromSchema<typeof componentsSchema>;
+export {};
+//# sourceMappingURL=createComponents.types.d.ts.map

package/styles/theme/createTheme/createComponents.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createComponents.types.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/createComponents.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,KAAK,KAAK,GAAG,IAAI,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;AAE3C;;;GAGG;AACH,KAAK,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC;AAEzD;;;;;;;;;;GAUG;AACH,MAAM,MAAM,mBAAmB,CAAC,MAAM,IAClC,MAAM,GACN,MAAM,GACN,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAAC,CAAC;AAEzC;;;;;;;;;;GAUG;AACH,MAAM,MAAM,oBAAoB,CAAC,OAAO,IACtC,OAAO,SAAS,IAAI,GAAG,MAAM,GAC3B,OAAO,SAAS,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE,GAAG,SAAS,oBAAoB,CAAC,CAAC,CAAC,EAAE,GACzE,OAAO,SAAS,MAAM,GAAG;KAAG,CAAC,IAAI,MAAM,OAAO,GAAG,oBAAoB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;CAAE,GACnF,MAAM,CAAC;AAEX;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,4BAA4B,CAAC,OAAO,EAAE,MAAM,IACtD,OAAO,SAAS,IAAI,GAAG,mBAAmB,CAAC,MAAM,CAAC,GAChD,OAAO,SAAS,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE,GAAG,SAAS,4BAA4B,CAAC,CAAC,EAAE,MAAM,CAAC,EAAE,GACzF,OAAO,SAAS,MAAM,GACpB;KAAG,CAAC,IAAI,MAAM,OAAO,GAAG,4BAA4B,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC;CAAE,GAC1E,mBAAmB,CAAC,MAAM,CAAC,CAAC;AAElC;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,4BAA4B,CAAC,OAAO,EAAE,MAAM,IACtD,OAAO,SAAS,IAAI,GAAG,mBAAmB,CAAC,MAAM,CAAC,GAChD,OAAO,SAAS,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE,GAAG,SAAS,4BAA4B,CAAC,CAAC,EAAE,MAAM,CAAC,EAAE,GACzF,OAAO,SAAS,MAAM,GACpB;KAAG,CAAC,IAAI,MAAM,OAAO,CAAC,CAAC,EAAE,4BAA4B,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC;CAAE,GAC3E,mBAAmB,CAAC,MAAM,CAAC,CAAC;AAElC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,MAAM,uBAAuB,CAAC,OAAO,IAAI;KAC5C,CAAC,IAAI,MAAM,OAAO,GACjB,OAAO,CAAC,CAAC,CAAC,SAAS;QAAE,IAAI,EAAE,MAAM,KAAK,CAAA;KAAE,GACpC,oBAAoB,CAAC,KAAK,CAAC,GAC3B,KAAK;CACZ,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;CAanB,CAAC;AAEX;;;;;;;GAOG;AACH,eAAO,MAAM,kBAAkB;;;;;;CAMD,CAAC;AAE/B,uDAAuD;AACvD,MAAM,MAAM,kBAAkB,GAC5B,4BAA4B,CAAC,OAAO,gBAAgB,EAAE,KAAK,CAAC,CAAC;AAG/D,MAAM,MAAM,iBAAiB,GAC3B,4BAA4B,CAAC,OAAO,gBAAgB,EAAE,KAAK,CAAC,CAAC;AAG/D,MAAM,MAAM,UAAU,GAAG,oBAAoB,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAEvE,MAAM,MAAM,aAAa,GAAG,uBAAuB,CAAC,OAAO,gBAAgB,CAAC,CAAC"}

package/styles/theme/createTheme/createComponents.types.js

@@ -0,0 +1,120 @@
+/**
+ * Leaf placeholders used in schemas.
+ * (Schema values are placeholders; only keys matter.)
+ */
+
+/**
+ * Represents a component token value used during theme creation.
+ *
+ * A token can be provided as:
+ * - a `string` (direct value), or
+ * - a function that derives the value from theme tokens (e.g. palette).
+ *
+ * This enables component defaults / overrides like:
+ * - `{ color: '#111' }`
+ * - `{ color: (theme) => theme.palette.text.primary }`
+ */
+
+/**
+ * Derives the **resolved** components type from `componentsSchema`.
+ *
+ * Represents the components object on the final theme (e.g. via `useTheme()`),
+ * where all token values are plain strings.
+ *
+ * Rules:
+ * - Leaf values become `string`.
+ * - Arrays (if present) are mapped element-by-element.
+ * - Objects are recursively mapped and all keys are required.
+ */
+
+/**
+ * Derives the **defaults** components type from `componentsSchema`.
+ *
+ * Represents the internal default token set shipped with the design system.
+ * Defaults must cover the full schema (no missing keys), but each leaf can be
+ * either a string or a theme-derived function.
+ *
+ * Rules:
+ * - Leaf values become `ComponentTokenValue<TTheme>`.
+ * - Arrays (if present) are mapped element-by-element.
+ * - Objects are recursively mapped and all keys are required.
+ */
+
+/**
+ * Derives the **override** components type from `componentsSchema`.
+ *
+ * Represents what can be passed into `createTheme({ components: ... })`.
+ * Overrides are deep-partial: users can provide any subset of tokens, while
+ * still being guided by the schema for valid keys.
+ *
+ * Rules:
+ * - Leaf values become `ComponentTokenValue<TTheme>`.
+ * - Arrays (if present) are mapped element-by-element.
+ * - Objects are recursively mapped and all properties are optional at every level.
+ */
+
+/**
+ * Derives the flattened component vars type from `componentsSchema`.
+ *
+ * Each top-level component entry is mapped to its `vars` section.
+ * Leaf values become `string`.
+ *
+ * Example:
+ * {
+ *   price: {
+ *     vars: {
+ *       color: '';
+ *     }
+ *   }
+ * }
+ *
+ * becomes:
+ * {
+ *   price: {
+ *     color: string;
+ *   }
+ * }
+ */
+
+/**
+ * Schema that defines the shape of the components object.
+ *
+ * Every mapping added to the components of createTheme should be added here to get proper typings
+ * for the theme components.
+ */
+export const componentsSchema = {
+  price: {
+    vars: {
+      color: ''
+    }
+  },
+  button: {
+    vars: {
+      borderRadius: '',
+      color: '',
+      textColor: ''
+    }
+  }
+};
+
+/**
+ * Default component tokens.
+ * Users can override any subset via `createTheme({ components: ... })`.
+ *
+ * `satisfies` ensures:
+ * - you cover every schema entry
+ * - functions get proper `Theme` typing
+ */
+export const componentsDefaults = {
+  price: {
+    vars: {
+      color: t => t.palette.primary.main
+    }
+  }
+};
+
+/** Internal defaults type (must cover full schema). */
+
+// The components options type represents the components input that can be provided to createTheme
+
+// The components type represents the components after theme creation

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

@@ -0,0 +1,31 @@
+import type { CSSInterpolation } from 'tss-react';
+import type { GetColorSchemeSelector } from './helpers';
+import type { ColorSchemeThemes, BaseTheme, ThemeOptions } from './types';
+type CreateCssVarsForColorSchemeThemesOptions = {
+    getColorSchemeSelector: GetColorSchemeSelector;
+} & Pick<ThemeOptions, 'cssVarPrefix'>;
+export type CreateCssVarsForColorSchemeThemesReturnValue = {
+    /**
+     * A theme object that has the shape of the color schemes, but references CSS variables instead
+     * of actual color values.
+     */
+    cssVarsTheme: BaseTheme & {
+        vars: BaseTheme;
+    };
+    /**
+     * Generates the style sheets for the color schemes of the theme.
+     * @returns An array of style sheet objects. Contains one entry per color scheme plus
+     * global styles.
+     */
+    generateStyleSheets: () => CSSInterpolation;
+};
+/**
+ * Generates CSS variables for each color scheme theme, to be used in the CSS of the application.
+ * This allows for dynamic theming based on the active color scheme.
+ * @param colorSchemes The default themes by each color scheme.
+ * @param options Options for generating CSS variables, such as prefix and skip function.
+ * @returns The generated CSS variables theme and a function to generate the corresponding style sheets.
+ */
+export default function createCssVarsForColorSchemeThemes(colorSchemes: ColorSchemeThemes, options: CreateCssVarsForColorSchemeThemesOptions): CreateCssVarsForColorSchemeThemesReturnValue;
+export {};
+//# sourceMappingURL=createCssVarsForColorSchemeThemes.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"createCssVarsForColorSchemeThemes.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/createCssVarsForColorSchemeThemes.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAElD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAC;AAExD,OAAO,KAAK,EACV,iBAAiB,EAAE,SAAS,EAAmB,YAAY,EAC5D,MAAM,SAAS,CAAC;AAEjB,KAAK,wCAAwC,GAAG;IAC9C,sBAAsB,EAAE,sBAAsB,CAAC;CAChD,GAAG,IAAI,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;AAEvC,MAAM,MAAM,4CAA4C,GAAG;IACzD;;;OAGG;IACH,YAAY,EAAE,SAAS,GAAG;QAAE,IAAI,EAAE,SAAS,CAAA;KAAE,CAAC;IAC9C;;;;OAIG;IACH,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;CAC7C,CAAA;AAED;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,iCAAiC,CACvD,YAAY,EAAE,iBAAiB,EAC/B,OAAO,EAAE,wCAAwC,GAChD,4CAA4C,CA8E9C"}

package/styles/theme/createTheme/createCssVarsForColorSchemeThemes.js

@@ -0,0 +1,73 @@
+import merge from 'lodash/merge';
+import { cssVarsParser, cssVarsColorAugmentation } from "./helpers";
+import { resolveComponentsValues, flattenComponentVars } from "./createComponents";
+/**
+ * Generates CSS variables for each color scheme theme, to be used in the CSS of the application.
+ * This allows for dynamic theming based on the active color scheme.
+ * @param colorSchemes The default themes by each color scheme.
+ * @param options Options for generating CSS variables, such as prefix and skip function.
+ * @returns The generated CSS variables theme and a function to generate the corresponding style sheets.
+ */
+export default function createCssVarsForColorSchemeThemes(colorSchemes, options) {
+  const {
+    getColorSchemeSelector,
+    cssVarPrefix
+  } = options || {};
+  const colorSchemeMap = {};
+  const styleSheets = [];
+
+  // Create CSS variables for each color scheme and generate corresponding style sheets
+  // @ts-expect-error - Sure about the type here
+  Object.keys(colorSchemes).forEach(schemeName => {
+    const {
+      components: componentsInput,
+      ...rest
+    } = colorSchemes[schemeName];
+
+    // Create CSS variables for the theme - skip components since they contain mappings
+    // to the generated CSS variables.
+    // Also convert colors with a "main" property to have light and dark variants via css color-mix
+    const {
+      css,
+      vars,
+      varsWithDefaults,
+      varNames
+    } = cssVarsColorAugmentation(cssVarsParser(rest, {
+      prefix: cssVarPrefix
+      // @ts-expect-error - We are sure about the type here
+    }), rest);
+
+    // Resolve component token values to actual CSS variable references
+    const resolvedComponents = flattenComponentVars(resolveComponentsValues(componentsInput, vars));
+    const {
+      css: componentsCss,
+      vars: componentsVars,
+      varsWithDefaults: componentsVarsWithDefaults,
+      varNames: componentsVarNames
+    } = cssVarsParser({
+      components: resolvedComponents
+    }, {
+      prefix: cssVarPrefix
+    });
+    colorSchemeMap[schemeName] = {
+      css: merge({}, css, componentsCss),
+      vars: merge({}, vars, componentsVars),
+      varsWithDefaults: merge({}, varsWithDefaults, componentsVarsWithDefaults),
+      varNames: merge({}, varNames, componentsVarNames)
+    };
+    if (Array.isArray(styleSheets)) {
+      // Create a style sheet selector for the color scheme with the generated CSS variables
+      styleSheets.push({
+        [`${schemeName === 'light' ? ':root, ' : ''}${getColorSchemeSelector(schemeName)}`]: {
+          ...colorSchemeMap[schemeName].css
+        }
+      });
+    }
+  });
+  return {
+    cssVarsTheme: merge({}, colorSchemes.light, colorSchemeMap.light.vars, {
+      vars: colorSchemeMap.light.varNames
+    }),
+    generateStyleSheets: () => styleSheets
+  };
+}

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

@@ -1,36 +1,33 @@
-type ColorPartialKeys =
-  | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
-  | 'A100' | 'A200' | 'A400' | 'A700';
-
-type ColorPartial = Record<ColorPartialKeys, string>;
-
-
-interface TypeText {
-  primary: string;
-  secondary: string;
-  tertiary: string;
-}
-
-interface BasePaletteColor {
-  main: string;
-}
-
-interface PaletteColorWithContrast extends PaletteColor {
-  contrast: string;
-}
-
-type PaletteColor<WithContrast extends boolean = false> =
-  BasePaletteColor & (WithContrast extends true ? { contrast: string } : {});
-
-export interface Palette {
-  primary: PaletteColor<true>;
-  secondary: PaletteColor<true>;
-  error: PaletteColor;
-  warning: PaletteColor;
-  success: PaletteColor;
-  cta: PaletteColor<true>;
-  text: TypeText;
-  grey: ColorPartial;
-}
-
-export default function createPalette(): Palette;
+import type { Palette } from './createPalette.types';
+import type { ThemeOptions } from '.';
+type PaletteOptions = ThemeOptions['palette'];
+export type { Palette, PaletteOptions, PaletteColorsWithMain } from './createPalette.types';
+type ExtendPaletteOptions = {
+    /**
+     * The palette to extend.
+     */
+    palette: PaletteOptions;
+    /**
+     * The tonal offset to use when calculating light and dark variants if they are not provided.
+     */
+    tonalOffset: number;
+    /**
+     * The contrast threshold to use when calculating the contrast text color if it is not provided.
+     */
+    contrastThreshold: number;
+};
+/**
+ * Unifies color values in the palette to HSL and adds light/dark variants and contrast text
+ * where missing.
+ * @param options The options for extending the palette.
+ * @returns The extended palette.
+ */
+export declare const extendPalette: (options: ExtendPaletteOptions) => PaletteOptions;
+/**
+ * Creates a palette object for the theme.
+ * @param inputPalette The input palette options.
+ * @returns The palette object.
+ */
+declare const createPalette: (inputPalette: PaletteOptions) => Palette;
+export default createPalette;
+//# sourceMappingURL=createPalette.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"createPalette.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/createPalette.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAyB,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAE5E,OAAO,KAAK,EAAmB,YAAY,EAAE,MAAM,GAAG,CAAC;AAEvD,KAAK,cAAc,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;AAE9C,YAAY,EAAE,OAAO,EAAE,cAAc,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAuM5F,KAAK,oBAAoB,GAAG;IAC1B;;OAEG;IACH,OAAO,EAAE,cAAc,CAAC;IACxB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,iBAAiB,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,aAAa,GAAI,SAAS,oBAAoB,KAAG,cA4B7D,CAAC;AAEF;;;;GAIG;AACH,QAAA,MAAM,aAAa,GAAI,cAAc,cAAc,KAAG,OAcrD,CAAC;AAEF,eAAe,aAAa,CAAC"}