@shopgate/engage 7.31.4-beta.1 → 7.32.0-beta.2

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

@@ -95,6 +95,13 @@ export type ComponentVarsFromSchema<TSchema> = {
  * for the theme components.
  */
 export declare const componentsSchema: {
+    readonly border: {
+        readonly vars: {
+            readonly light: "";
+            readonly medium: "";
+            readonly dark: "";
+        };
+    };
     readonly price: {
         readonly vars: {
             readonly color: "";
@@ -107,6 +114,84 @@ export declare const componentsSchema: {
             readonly textColor: "";
         };
     };
+    readonly input: {
+        readonly vars: {
+            readonly background: "";
+            readonly border: "";
+        };
+    };
+    readonly separatorLine: {
+        readonly vars: {
+            readonly borderColor: "";
+        };
+    };
+    readonly ctaButton: {
+        readonly vars: {
+            readonly background: "";
+            readonly color: "";
+        };
+    };
+    readonly discountBadge: {
+        readonly vars: {
+            readonly background: "";
+        };
+    };
+    readonly icon: {
+        readonly vars: {
+            readonly xsmall: "";
+            readonly small: "";
+            readonly medium: "";
+            readonly large: "";
+        };
+    };
+    readonly snackbar: {
+        readonly vars: {
+            readonly background: "";
+            readonly contrastText: "";
+        };
+    };
+    readonly tabBar: {
+        readonly vars: {
+            readonly background: "";
+            readonly minHeight: "";
+            readonly border: "";
+            readonly inactive: "";
+            readonly active: "";
+            readonly floatingBorderRadius: "";
+            readonly floatingBoxShadow: "";
+            readonly floatingMinHeight: "";
+            readonly badgeColor: "";
+            readonly badgeBackground: "";
+            readonly badgeBorderRadius: "";
+            readonly badgeTop: "";
+            readonly badgeLeft: "";
+        };
+    };
+    readonly ratingStars: {
+        readonly vars: {
+            readonly filled: "";
+            readonly empty: "";
+        };
+    };
+    readonly swiper: {
+        readonly vars: {
+            readonly paginationBulletColor: "";
+            readonly paginationBulletActiveColor: "";
+            readonly paginationFractionBackground: "";
+            readonly paginationProgressbarBackground: "";
+            readonly paginationProgressbarActiveColor: "";
+        };
+    };
+    readonly navigator: {
+        readonly vars: {
+            readonly height: "";
+        };
+    };
+    readonly filterBar: {
+        readonly vars: {
+            readonly height: "";
+        };
+    };
 };
 /**
  * Default component tokens.
@@ -117,11 +202,95 @@ export declare const componentsSchema: {
  * - functions get proper `Theme` typing
  */
 export declare const componentsDefaults: {
+    border: {
+        vars: {
+            light: string;
+            medium: string;
+            dark: string;
+        };
+    };
     price: {
         vars: {
             color: (t: Theme) => string;
         };
     };
+    input: {
+        vars: {
+            background: string;
+            border: string;
+        };
+    };
+    separatorLine: {
+        vars: {
+            borderColor: string;
+        };
+    };
+    ctaButton: {
+        vars: {
+            background: (t: Theme) => string;
+            color: (t: Theme) => string;
+        };
+    };
+    discountBadge: {
+        vars: {
+            background: string;
+        };
+    };
+    icon: {
+        vars: {
+            xsmall: string;
+            small: string;
+            medium: string;
+            large: string;
+        };
+    };
+    snackbar: {
+        vars: {
+            background: string;
+        };
+    };
+    tabBar: {
+        vars: {
+            background: string;
+            minHeight: string;
+            border: string;
+            inactive: string;
+            active: (t: Theme) => string;
+            floatingBorderRadius: string;
+            floatingBoxShadow: string;
+            floatingMinHeight: string;
+            badgeColor: string;
+            badgeBackground: (t: Theme) => string;
+            badgeBorderRadius: string;
+            badgeTop: string;
+            badgeLeft: string;
+        };
+    };
+    ratingStars: {
+        vars: {
+            filled: (t: Theme) => string;
+            empty: string;
+        };
+    };
+    swiper: {
+        vars: {
+            paginationBulletColor: (t: Theme) => string;
+            paginationBulletActiveColor: (t: Theme) => string;
+            paginationFractionBackground: (t: Theme) => string;
+            paginationProgressbarBackground: (t: Theme) => string;
+            paginationProgressbarActiveColor: (t: Theme) => string;
+        };
+    };
+    navigator: {
+        vars: {
+            height: number;
+        };
+    };
+    filterBar: {
+        vars: {
+            height: number;
+        };
+    };
 };
 /** Internal defaults type (must cover full schema). */
 export type ComponentsDefaults = ComponentsOverrideFromSchema<typeof componentsSchema, Theme>;

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

@@ -1 +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"}
+{"version":3,"file":"createComponents.types.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/createComponents.types.ts"],"names":[],"mappings":"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"}

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

@@ -83,6 +83,13 @@
  * for the theme components.
  */
 export const componentsSchema = {
+  border: {
+    vars: {
+      light: '',
+      medium: '',
+      dark: ''
+    }
+  },
   price: {
     vars: {
       color: ''
@@ -94,6 +101,84 @@ export const componentsSchema = {
       color: '',
       textColor: ''
     }
+  },
+  input: {
+    vars: {
+      background: '',
+      border: ''
+    }
+  },
+  separatorLine: {
+    vars: {
+      borderColor: ''
+    }
+  },
+  ctaButton: {
+    vars: {
+      background: '',
+      color: ''
+    }
+  },
+  discountBadge: {
+    vars: {
+      background: ''
+    }
+  },
+  icon: {
+    vars: {
+      xsmall: '',
+      small: '',
+      medium: '',
+      large: ''
+    }
+  },
+  snackbar: {
+    vars: {
+      background: '',
+      contrastText: ''
+    }
+  },
+  tabBar: {
+    vars: {
+      background: '',
+      minHeight: '',
+      border: '',
+      inactive: '',
+      active: '',
+      floatingBorderRadius: '',
+      floatingBoxShadow: '',
+      floatingMinHeight: '',
+      badgeColor: '',
+      badgeBackground: '',
+      badgeBorderRadius: '',
+      badgeTop: '',
+      badgeLeft: ''
+    }
+  },
+  ratingStars: {
+    vars: {
+      filled: '',
+      empty: ''
+    }
+  },
+  swiper: {
+    vars: {
+      paginationBulletColor: '',
+      paginationBulletActiveColor: '',
+      paginationFractionBackground: '',
+      paginationProgressbarBackground: '',
+      paginationProgressbarActiveColor: ''
+    }
+  },
+  navigator: {
+    vars: {
+      height: ''
+    }
+  },
+  filterBar: {
+    vars: {
+      height: ''
+    }
   }
 };
 
@@ -106,10 +191,94 @@ export const componentsSchema = {
  * - functions get proper `Theme` typing
  */
 export const componentsDefaults = {
+  border: {
+    vars: {
+      light: '#F2F2F2',
+      medium: '#b5b5b5',
+      dark: '#747474'
+    }
+  },
   price: {
     vars: {
       color: t => t.palette.primary.main
     }
+  },
+  input: {
+    vars: {
+      background: '#F2F2F2',
+      border: '#CCCCCC'
+    }
+  },
+  separatorLine: {
+    vars: {
+      borderColor: '#EBEBEF'
+    }
+  },
+  ctaButton: {
+    vars: {
+      background: t => t.palette.primary.main,
+      color: t => t.palette.primary.contrastText
+    }
+  },
+  discountBadge: {
+    vars: {
+      background: '#857500'
+    }
+  },
+  icon: {
+    vars: {
+      xsmall: '0.75rem',
+      small: '1.25rem',
+      medium: '1.5rem',
+      large: '2rem'
+    }
+  },
+  snackbar: {
+    vars: {
+      background: '#323232'
+    }
+  },
+  tabBar: {
+    vars: {
+      background: '#FFFFFF',
+      minHeight: '0px',
+      border: '#E6E6E6',
+      inactive: '#747474',
+      active: t => t.palette.secondary.main,
+      floatingBorderRadius: '16px',
+      floatingBoxShadow: '0 0 12px rgba(0, 0, 0, 0.24)',
+      floatingMinHeight: '59px',
+      badgeColor: '#FFFFFF',
+      badgeBackground: t => t.palette.secondary.main,
+      badgeBorderRadius: '8px',
+      badgeTop: '-8px',
+      badgeLeft: 'calc(50% + 20px)'
+    }
+  },
+  ratingStars: {
+    vars: {
+      filled: t => t.palette.primary.main,
+      empty: '#CCCCCC'
+    }
+  },
+  swiper: {
+    vars: {
+      paginationBulletColor: t => t.palette.grey.medium,
+      paginationBulletActiveColor: t => t.palette.grey.dark,
+      paginationFractionBackground: t => t.palette.grey.light,
+      paginationProgressbarBackground: t => t.palette.grey.light,
+      paginationProgressbarActiveColor: t => t.palette.common.black
+    }
+  },
+  navigator: {
+    vars: {
+      height: 44
+    }
+  },
+  filterBar: {
+    vars: {
+      height: 48
+    }
   }
 };
 

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

@@ -1 +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"}
+{"version":3,"file":"createCssVarsForColorSchemeThemes.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/createCssVarsForColorSchemeThemes.ts"],"names":[],"mappings":"AAEA,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,CA0G9C"}

package/styles/theme/createTheme/createCssVarsForColorSchemeThemes.js

@@ -1,4 +1,6 @@
+import "core-js/modules/es.array.reduce.js";
 import merge from 'lodash/merge';
+import omit from 'lodash/omit';
 import { cssVarsParser, cssVarsColorAugmentation } from "./helpers";
 import { resolveComponentsValues, flattenComponentVars } from "./createComponents";
 /**
@@ -35,7 +37,7 @@ export default function createCssVarsForColorSchemeThemes(colorSchemes, options)
     } = cssVarsColorAugmentation(cssVarsParser(rest, {
       prefix: cssVarPrefix
       // @ts-expect-error - We are sure about the type here
-    }), rest);
+    }), rest, cssVarPrefix);
 
     // Resolve component token values to actual CSS variable references
     const resolvedComponents = flattenComponentVars(resolveComponentsValues(componentsInput, vars));
@@ -56,6 +58,15 @@ export default function createCssVarsForColorSchemeThemes(colorSchemes, options)
       varNames: merge({}, varNames, componentsVarNames)
     };
     if (Array.isArray(styleSheets)) {
+      styleSheets.push({
+        ':root': {
+          // use double underscore to indicate that these are private variables
+          '--__l-threshold': '0.7',
+          '--__l': 'clamp(0, (l / var(--__l-threshold) - 1) * -infinity, 1)',
+          '--__a': 'clamp(0.87, (l / var(--__l-threshold) - 1) * -infinity, 1)' // 0.87 is the default alpha value for black text.
+        }
+      });
+
       // Create a style sheet selector for the color scheme with the generated CSS variables
       styleSheets.push({
         [`${schemeName === 'light' ? ':root, ' : ''}${getColorSchemeSelector(schemeName)}`]: {
@@ -64,8 +75,23 @@ export default function createCssVarsForColorSchemeThemes(colorSchemes, options)
       });
     }
   });
+
+  // Keep `components`, but remove each nested `vars` object because those raw values
+  // should not leak into the final cssVars theme object.
+  const componentsWithoutVars = Object.entries(colorSchemes.light.components || {}).reduce((acc, [key, value]) => {
+    if (value && typeof value === 'object') {
+      acc[key] = omit(value, ['vars']);
+      return acc;
+    }
+    acc[key] = value;
+    return acc;
+  }, {});
+  const lightSchemeWithoutComponentVars = {
+    ...colorSchemes.light,
+    components: componentsWithoutVars
+  };
   return {
-    cssVarsTheme: merge({}, colorSchemes.light, colorSchemeMap.light.vars, {
+    cssVarsTheme: merge({}, lightSchemeWithoutComponentVars, colorSchemeMap.light.vars, {
       vars: colorSchemeMap.light.varNames
     }),
     generateStyleSheets: () => styleSheets

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

@@ -76,6 +76,10 @@ export type PaletteColorsWithMain = PaletteKeysWithMain<PaletteFromSchema<typeof
  * theme palette.
  */
 export declare const paletteSchema: {
+    readonly common: {
+        readonly black: "#000";
+        readonly white: "#fff";
+    };
     /**
      * Color scheme for primary interface elements
      */
@@ -110,11 +114,13 @@ export declare const paletteSchema: {
      * Colors to be used for the background of various elements
      */
     readonly background: {
-        /**
-         * The color used for the background of the application
-         */
         readonly default: "";
+        readonly surface: "";
+        readonly emphasized: "";
     };
+    /**
+     * Colors to be used for text.
+     */
     readonly text: {
         readonly primary: "";
         readonly secondary: "";
@@ -134,11 +140,13 @@ export declare const paletteSchema: {
         readonly 700: "#616161";
         readonly 800: "#424242";
         readonly 900: "#212121";
-        readonly A100: "#f5f5f5";
-        readonly A200: "#eeeeee";
-        readonly A400: "#bdbdbd";
-        readonly A700: "#616161";
+        readonly light: "#F2F2F2";
+        readonly medium: "#b5b5b5";
+        readonly dark: "#747474";
     };
+    /**
+     * Colors to be used for actions, such as disabled states.
+     */
     readonly action: {
         readonly disabled: "#808080";
         readonly disabledBackground: "#CCCCCC";

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

@@ -1 +1 @@
-{"version":3,"file":"createPalette.types.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/createPalette.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"createPalette.types.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/createPalette.types.ts"],"names":[],"mappings":"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"}

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

@@ -47,10 +47,9 @@ const grey = {
   700: '#616161',
   800: '#424242',
   900: '#212121',
-  A100: '#f5f5f5',
-  A200: '#eeeeee',
-  A400: '#bdbdbd',
-  A700: '#616161'
+  light: '#F2F2F2',
+  medium: '#b5b5b5',
+  dark: '#747474'
 };
 
 /**
@@ -60,6 +59,10 @@ const grey = {
  * theme palette.
  */
 export const paletteSchema = {
+  common: {
+    black: '#000',
+    white: '#fff'
+  },
   /**
    * Color scheme for primary interface elements
    */
@@ -94,11 +97,13 @@ export const paletteSchema = {
    * Colors to be used for the background of various elements
    */
   background: {
-    /**
-     * The color used for the background of the application
-     */
-    default: ''
+    default: '',
+    surface: '',
+    emphasized: ''
   },
+  /**
+   * Colors to be used for text.
+   */
   text: {
     primary: '',
     secondary: ''
@@ -108,6 +113,9 @@ export const paletteSchema = {
    * The numbers represent the lightness of the color,
    */
   grey,
+  /**
+   * Colors to be used for actions, such as disabled states.
+   */
   action: {
     disabled: '#808080',
     disabledBackground: '#CCCCCC'

package/styles/theme/createTheme/createSpacing.js

@@ -1,4 +1,7 @@
-import { isDev } from '@shopgate/engage/core/helpers';
+// Import `isDev` from the leaf environment module rather than the `@shopgate/engage/core/helpers`
+// barrel: the barrel pulls in providers -> toast -> the theme, creating an import cycle back into
+// createTheme (which uses this module) and breaking theme creation during module init.
+import { isDev } from '@shopgate/pwa-common/helpers/environment';
 const spacingUnit = 8;
 
 /**

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

@@ -1,4 +1,4 @@
-import type { ColorSchemeOptions, BaseTheme } from './types';
+import type { ColorSchemeOptions, ColorSchemeTheme } from './types';
 /**
  * Helper function to add an alpha value to a color.
  * @param color The color to modify.
@@ -20,11 +20,18 @@ export declare const lighten: (color: string, coefficient?: number | string) =>
  * @returns A string representing the darkened color.
  */
 export declare const darken: (color: string, coefficient?: number | string) => string;
+/**
+ * Helper function to calculate a contrast color (either black or white) based on the lightness of
+ * the input color.
+ * @param color The color to evaluate.
+ * @returns A string representing the contrast color (either black or white) for the input color.
+ */
+export declare const contrastColor: (color: string) => string;
 /**
  * Creates a theme object for a given color scheme (light or dark).
  * @param colorScheme The color scheme options.
  * @returns A theme object for the given color scheme.
  */
-declare const createThemeFromColorScheme: (colorScheme: ColorSchemeOptions) => BaseTheme;
+declare const createThemeFromColorScheme: (colorScheme: ColorSchemeOptions) => ColorSchemeTheme;
 export default createThemeFromColorScheme;
 //# sourceMappingURL=createThemeFromColorScheme.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"createThemeFromColorScheme.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/createThemeFromColorScheme.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAc7D;;;;;GAKG;AACH,eAAO,MAAM,KAAK,GAChB,OAAO,MAAM,EACb,aAAa,MAAM,GAAG,MAAM,KAC3B,MAAkH,CAAC;AAEtH;;;;;GAKG;AACH,eAAO,MAAM,OAAO,GAClB,OAAO,MAAM,EACb,cAAa,MAAM,GAAG,MAAY,KACjC,MAAuF,CAAC;AAE3F;;;;;GAKG;AACH,eAAO,MAAM,MAAM,GACjB,OAAO,MAAM,EACb,cAAa,MAAM,GAAG,MAAY,KACjC,MAAuF,CAAC;AAE3F;;;;GAIG;AACH,QAAA,MAAM,0BAA0B,GAAI,aAAa,kBAAkB,KAAG,SA0BrE,CAAC;AAEF,eAAe,0BAA0B,CAAC"}
+{"version":3,"file":"createThemeFromColorScheme.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/createThemeFromColorScheme.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAcpE;;;;;GAKG;AACH,eAAO,MAAM,KAAK,GAChB,OAAO,MAAM,EACb,aAAa,MAAM,GAAG,MAAM,KAC3B,MAAkH,CAAC;AAEtH;;;;;GAKG;AACH,eAAO,MAAM,OAAO,GAClB,OAAO,MAAM,EACb,cAAa,MAAM,GAAG,MAAY,KACjC,MAAuF,CAAC;AAE3F;;;;;GAKG;AACH,eAAO,MAAM,MAAM,GACjB,OAAO,MAAM,EACb,cAAa,MAAM,GAAG,MAAY,KACjC,MAAuF,CAAC;AAE3F;;;;;GAKG;AACH,eAAO,MAAM,aAAa,GACxB,OAAO,MAAM,KACZ,MAA4D,CAAC;AAEhE;;;;GAIG;AACH,QAAA,MAAM,0BAA0B,GAAI,aAAa,kBAAkB,KAAG,gBA2BrE,CAAC;AAEF,eAAe,0BAA0B,CAAC"}

package/styles/theme/createTheme/createThemeFromColorScheme.js

@@ -39,6 +39,14 @@ export const lighten = (color, coefficient = 0.2) => `color-mix(in oklch, ${colo
  */
 export const darken = (color, coefficient = 0.2) => `color-mix(in oklch, ${color}, #000 ${coefficientToPercentage(coefficient)})`;
 
+/**
+ * Helper function to calculate a contrast color (either black or white) based on the lightness of
+ * the input color.
+ * @param color The color to evaluate.
+ * @returns A string representing the contrast color (either black or white) for the input color.
+ */
+export const contrastColor = color => `oklch(from ${color} var(--__l) 0 h / var(--__a))`;
+
 /**
  * Creates a theme object for a given color scheme (light or dark).
  * @param colorScheme The color scheme options.
@@ -63,7 +71,8 @@ const createThemeFromColorScheme = colorScheme => {
     shadows,
     alpha,
     lighten,
-    darken
+    darken,
+    contrastColor
   };
   return theme;
 };

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

@@ -4,7 +4,8 @@ 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.
+ * @param cssVarsPrefix Prefix used for CSS variable names.
  * @returns An object containing the augmented CSS variables.
  */
-export default function cssVarsColorAugmentation(cssParserReturn: CssVarsParserReturnValue<BaseTheme>, theme: BaseTheme): CssVarsParserReturnValue<BaseTheme>;
+export default function cssVarsColorAugmentation(cssParserReturn: CssVarsParserReturnValue<BaseTheme>, theme: BaseTheme, cssVarsPrefix: string): CssVarsParserReturnValue<BaseTheme>;
 //# sourceMappingURL=cssVarsColorAugmentation.d.ts.map

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

@@ -1 +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"}
+{"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;AAqHhE;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAC9C,eAAe,EAAE,wBAAwB,CAAC,SAAS,CAAC,EACpD,KAAK,EAAE,SAAS,EAChB,aAAa,EAAE,MAAM,GACpB,wBAAwB,CAAC,SAAS,CAAC,CAkBrC"}