@shopgate/engage 7.31.6 → 7.32.0-beta.10

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,15 +140,22 @@ 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";
+        readonly pressed: "#F2F2F2";
     };
+    /**
+     * Color for the box-shadow.
+     */
+    readonly shadow: "#000000";
 };
 /**
  * Additional settings for the palette

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,10 +113,18 @@ 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'
-  }
+    disabledBackground: '#CCCCCC',
+    pressed: '#F2F2F2'
+  },
+  /**
+   * Color for the box-shadow.
+   */
+  shadow: '#000000'
 };
 
 /**

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

@@ -1,4 +1,7 @@
 export interface Shape {
+    /**
+     * The app wide corner style. Every rounded surface derives from it.
+     */
     borderRadius: number | string;
 }
 export type ShapeOptions = Partial<Shape>;

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

@@ -1 +1 @@
-{"version":3,"file":"createShape.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/createShape.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,KAAK;IACpB,YAAY,EAAE,MAAM,GAAG,MAAM,CAAC;CAC/B;AAED,MAAM,MAAM,YAAY,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;AAM1C;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,OAAO,GAAE,YAAiB,GAAG,KAAK,CAKrE"}
+{"version":3,"file":"createShape.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/createShape.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,KAAK;IACpB;;OAEG;IACH,YAAY,EAAE,MAAM,GAAG,MAAM,CAAC;CAC/B;AAED,MAAM,MAAM,YAAY,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;AAM1C;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,OAAO,GAAE,YAAiB,GAAG,KAAK,CAKrE"}

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,20 @@ 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.
+ * @param cssVarPrefix The theme's css variable prefix. Typography references some of the properties
+ * that are generated from it later, so it has to compose the same names.
  * @returns A theme object for the given color scheme.
  */
-declare const createThemeFromColorScheme: (colorScheme: ColorSchemeOptions) => BaseTheme;
+declare const createThemeFromColorScheme: (colorScheme: ColorSchemeOptions, cssVarPrefix?: string) => 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;;;;;;GAMG;AACH,QAAA,MAAM,0BAA0B,GAC9B,aAAa,kBAAkB,EAC/B,eAAe,MAAM,KACpB,gBA4BF,CAAC;AAEF,eAAe,0BAA0B,CAAC"}

package/styles/theme/createTheme/createThemeFromColorScheme.js

@@ -2,7 +2,7 @@ import createPalette from "./createPalette";
 import createTypography from "./createTypography";
 import createComponents from "./createComponents";
 import createShape from "./createShape";
-import shadows from "./shadows";
+import shadows, { shadowSizes } from "./shadows";
 /**
  * Calculates the percentage value for a given coefficient, which can be a number or a string representing a CSS calculation.
  * @param coefficient The coefficient to convert, either a number or a string.
@@ -39,12 +39,22 @@ 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.
+ * @param cssVarPrefix The theme's css variable prefix. Typography references some of the properties
+ * that are generated from it later, so it has to compose the same names.
  * @returns A theme object for the given color scheme.
  */
-const createThemeFromColorScheme = colorScheme => {
+const createThemeFromColorScheme = (colorScheme, cssVarPrefix) => {
   const {
     palette: paletteInput = {},
     typography: typographyInput = {},
@@ -52,7 +62,7 @@ const createThemeFromColorScheme = colorScheme => {
     shape: shapeInput = {}
   } = colorScheme;
   const palette = createPalette(paletteInput);
-  const typography = createTypography(palette, typographyInput);
+  const typography = createTypography(palette, typographyInput, cssVarPrefix);
   const components = createComponents(componentsInput);
   const shape = createShape(shapeInput);
   const theme = {
@@ -61,9 +71,11 @@ const createThemeFromColorScheme = colorScheme => {
     components,
     shape,
     shadows,
+    shadowSizes,
     alpha,
     lighten,
-    darken
+    darken,
+    contrastColor
   };
   return theme;
 };

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

@@ -51,5 +51,6 @@ export interface TypographyOptions
 
 export default function createTypography(
   palette: Palette,
-  typography: TypographyOptions | ((palette: Palette) => TypographyOptions)
+  typography: TypographyOptions | ((palette: Palette) => TypographyOptions),
+  cssVarPrefix?: string
 ): Typography;

package/styles/theme/createTheme/createTypography.js

@@ -1,19 +1,41 @@
 import _merge from "lodash/merge";
-import { isDev } from '@shopgate/engage/core/helpers';
+// Imported from the defining modules rather than a barrel: this module runs at import time in
+// every spec that touches the theme, and specs that replace a barrel with a partial mock would
+// leave these undefined.
+import { isDev } from '@shopgate/pwa-common/helpers/environment';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const {
+  fontWeight: buttonFontWeight = 600,
+  textTransform: buttonTextTransform
+} = themeConfig?.variables?.buttonBase ?? {};
 const caseAllCaps = {
   textTransform: 'uppercase'
 };
+const caseButton = {
+  textTransform: buttonTextTransform === 'uppercase' ? 'uppercase' : 'none'
+};
 const defaultFontFamily = '"Roboto", "Helvetica", "Arial", sans-serif';
 
+/**
+ * Builds the prefix of the custom properties that cssVarsParser derives from the `typography` keys.
+ * Mirrors how the parser composes a name, so a theme configured with a different `cssVarPrefix`
+ * references the properties it actually emits.
+ * @param {string} cssVarPrefix The theme's css variable prefix.
+ * @returns {string} The prefix, e.g. `--sg-typography`.
+ */
+const typographyVarPrefix = cssVarPrefix => `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}typography`;
+
 /**
  * Creates the typography object for the theme.
  * @param {Object} palette The theme palette.
  * @param {Object|Function} typography The typography options or a function that returns them.
+ * @param {string} [cssVarPrefix] The theme's css variable prefix, matching the one cssVarsParser
+ * generates the properties with. Defaults to the `sg` default of createTheme.
  * @returns {Object} The typography object.
  * @see @link{https://material.io/design/typography/the-type-system.html}
  * @see @link{https://material.io/design/typography/understanding-typography.html}
  */
-export default function createTypography(palette, typography) {
+export default function createTypography(palette, typography, cssVarPrefix = 'sg') {
   const {
     fontFamily = defaultFontFamily,
     // The default font size of the Material Specification.
@@ -32,10 +54,28 @@ export default function createTypography(palette, typography) {
   } = typeof typography === 'function' ? typography(palette) : typography;
   if (isDev) {
     if (typeof fontSize !== 'number') {
+      // eslint-disable-next-line no-console
       console.error('Shopgate Theme: `fontSize` is required to be a number.');
     }
   }
   const coef = fontSize / 14;
+  const fontWeights = {
+    fontWeightLight,
+    fontWeightRegular,
+    fontWeightMedium,
+    fontWeightBold
+  };
+
+  /**
+   * Builds a reference to one of the shared font weight custom properties. The property itself is
+   * emitted by cssVarsParser from `typography.fontWeight*`, so overriding it on `:root` (admin css,
+   * live preview, an extension) cascades into every variant that uses that token. The resolved
+   * weight stays as the fallback, so the variant still renders when the property is absent.
+   * @param {string} token One of `fontWeightLight`, `fontWeightRegular`, `fontWeightMedium`,
+   * `fontWeightBold`.
+   * @returns {string} The css var reference.
+   */
+  const fontWeightVar = token => `var(${typographyVarPrefix(cssVarPrefix)}-${token}, ${fontWeights[token]})`;
 
   /**
    * Calculates a rem value for a passed pixel value.
@@ -46,34 +86,35 @@ export default function createTypography(palette, typography) {
 
   /**
    * Creates a typography variant object.
-   * @param {number} fontWeight The font weight to use for the variant.
+   * @param {string} fontWeightToken The name of the shared font weight token to use, e.g.
+   * `fontWeightBold`. The variant references it as a custom property instead of inlining its value.
    * @param {number} size Font size in pixels.
    * @param {number} lineHeight Line height as a unitless number.
    * @param {Object} casing Casing styles to apply, e.g. textTransform.
    * @returns {Object} The typography variant object.
    */
-  const buildVariant = (fontWeight, size, lineHeight, casing) => ({
+  const buildVariant = (fontWeightToken, size, lineHeight, casing) => ({
     fontFamily,
-    fontWeight,
+    fontWeight: fontWeightVar(fontWeightToken),
     fontSize: pxToRem(size),
     lineHeight,
     ...casing,
     ...allVariants
   });
   const variants = {
-    h1: buildVariant(fontWeightBold, 34, 1.15),
-    h2: buildVariant(fontWeightBold, 22, 1.3),
-    h3: buildVariant(fontWeightMedium, 20, 1.35),
-    h4: buildVariant(fontWeightMedium, 18, 1.4),
-    h5: buildVariant(fontWeightMedium, 16, 1.5),
-    h6: buildVariant(fontWeightMedium, 14, 1.5),
-    subtitle1: buildVariant(fontWeightRegular, 16, 1.75),
-    subtitle2: buildVariant(fontWeightMedium, 14, 1.57),
-    body1: buildVariant(fontWeightRegular, 16, 1.5),
-    body2: buildVariant(fontWeightRegular, 14, 1.43),
-    button: buildVariant(fontWeightMedium, 14, 1.75, caseAllCaps),
-    caption: buildVariant(fontWeightRegular, 12, 1.66),
-    overline: buildVariant(fontWeightRegular, 12, 2.66, caseAllCaps)
+    h1: buildVariant('fontWeightBold', 34, 1.15),
+    h2: buildVariant('fontWeightBold', 22, 1.3),
+    h3: buildVariant('fontWeightMedium', 20, 1.35),
+    h4: buildVariant('fontWeightMedium', 18, 1.4),
+    h5: buildVariant('fontWeightMedium', 16, 1.5),
+    h6: buildVariant('fontWeightMedium', 14, 1.5),
+    subtitle1: buildVariant('fontWeightRegular', 16, 1.75),
+    subtitle2: buildVariant('fontWeightMedium', 14, 1.57),
+    body1: buildVariant('fontWeightRegular', 16, 1.5),
+    body2: buildVariant('fontWeightRegular', 14, 1.43),
+    button: buildVariant(buttonFontWeight > fontWeightMedium ? 'fontWeightBold' : 'fontWeightMedium', 16, 1.75, caseButton),
+    caption: buildVariant('fontWeightRegular', 12, 1.66),
+    overline: buildVariant('fontWeightRegular', 12, 2.66, caseAllCaps)
   };
   return _merge({
     pxToRem,

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"}

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

@@ -1,3 +1,74 @@
+import "core-js/modules/es.array.reduce.js";
+import cssVarsParser from "./cssVarsParser";
+
+/**
+ * Builds lookup keys for CSS variables that are injected by addAugmentationToVars.
+ *
+ * For each augmentable palette entry this returns keys for `dark`, `light`, and
+ * `contrastText`, e.g. `--sg-palette-primary-dark`.
+ * @param vars Theme vars object to inspect.
+ * @param cssVarsPrefix Optional CSS variable prefix.
+ * @returns Flat list of CSS variable lookup keys.
+ */
+function getAugmentedPaletteLookupKeys(vars, cssVarsPrefix = 'sg') {
+  if (!vars.palette) return [];
+  const prefix = cssVarsPrefix ? `${cssVarsPrefix}-` : '';
+  const keys = [];
+  Object.keys(vars.palette).forEach(key => {
+    // @ts-expect-error - We are sure about the type here
+    const paletteEntry = vars.palette[key];
+    if (paletteEntry && typeof paletteEntry === 'object' && paletteEntry.main) {
+      const base = `--${prefix}palette-${key}`;
+      keys.push(`${base}-dark`, `${base}-light`, `${base}-contrastText`);
+    }
+  });
+  return keys;
+}
+
+/**
+ * Merges refreshed augmented palette CSS variables into the original CSS map.
+ *
+ * The original `cssInput` was generated before palette augmentation, so `dark`,
+ * `light`, and `contrastText` entries derived from augmented vars must be
+ * regenerated and merged back in.
+ * @param cssInput Original CSS variables map from the parser result.
+ * @param varsInput Original vars object, used to determine which palette keys are augmentable.
+ * @param vars Augmented vars object containing the updated palette values.
+ * @param cssVarsPrefix Prefix used to build CSS variable names.
+ * @returns CSS map with augmented palette keys overwritten by fresh values.
+ */
+function addAugmentationToCss(cssInput, varsInput, vars, cssVarsPrefix) {
+  // Re-parse the augmented vars so we can derive up-to-date css variable values.
+  const {
+    css: augmentedCss
+  } = cssVarsParser(vars, {
+    prefix: cssVarsPrefix
+  });
+
+  // Only copy keys that are introduced/overwritten by color augmentation.
+  // This keeps all non-augmented entries from the original parser result untouched.
+  const augmentedPaletteLookupKeys = getAugmentedPaletteLookupKeys(varsInput, cssVarsPrefix);
+  const augmentedPaletteCss = augmentedPaletteLookupKeys.reduce((acc, key) => {
+    if (key in augmentedCss) {
+      acc[key] = augmentedCss[key];
+    }
+    return acc;
+  }, {});
+  return {
+    ...cssInput,
+    ...augmentedPaletteCss
+  };
+}
+
+/**
+ * Extends palette entries that provide a `main` color with derived variants.
+ *
+ * For each matching palette entry, this injects `light`, `dark`, and
+ * `contrastText` so downstream theme consumers can rely on a complete color set.
+ * @param vars Theme vars object to augment.
+ * @param theme Base theme utilities used to derive color variants.
+ * @returns A new vars object with augmented palette entries.
+ */
 function addAugmentationToVars(vars, theme) {
   if (!vars.palette) return vars;
   const augmentedPalette = {
@@ -12,7 +83,9 @@ function addAugmentationToVars(vars, theme) {
         ...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)
+        dark: theme.darken(paletteEntry.main),
+        // Inject contrast text color based on the main color
+        contrastText: theme.contrastColor(paletteEntry.main)
       };
     }
   });
@@ -26,19 +99,24 @@ function addAugmentationToVars(vars, theme) {
  * 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, theme) {
+export default function cssVarsColorAugmentation(cssParserReturn, theme, cssVarsPrefix) {
   const {
     vars: varsInput,
-    varsWithDefaults: varsWithDefaultsInput,
+    css: cssInput,
     ...rest
   } = cssParserReturn;
+
+  // vars and varsWithDefaults need augmentation because both are consumed by the theme layer.
   const vars = addAugmentationToVars(varsInput, theme);
-  const varsWithDefaults = addAugmentationToVars(varsWithDefaultsInput, theme);
+
+  // cssInput was produced before augmentation, so merge refreshed augmented keys back in.
+  const css = addAugmentationToCss(cssInput, varsInput, vars, cssVarsPrefix);
   return {
     ...rest,
-    vars,
-    varsWithDefaults
+    css,
+    vars: varsInput
   };
 }

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

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

@@ -85,11 +85,18 @@ const walkObjectDeep = (obj, callback, shouldSkipPaths) => {
  */
 const getCssValue = (keys, value) => {
   if (typeof value === 'number') {
-    if (['lineHeight', 'fontWeight', 'opacity', 'zIndex'].some(prop => keys.includes(prop))) {
-      // CSS property that are unitless
+    const lastKey = keys[keys.length - 1];
+    if (['lineHeight', 'fontWeight', 'opacity', 'zIndex', 'fontWeightLight', 'fontWeightRegular', 'fontWeightMedium', 'fontWeightBold'].some(prop => lastKey === prop)) {
+      // CSS properties that are unitless
+      return value;
+    }
+
+    // `typography.fontSize` is MUI's base font-size coefficient and stays unitless, but variant
+    // font sizes (e.g. `typography.body2.fontSize`) are lengths and need a `px` unit - otherwise a
+    // numeric override would produce an invalid `font-size: 12` custom property.
+    if (lastKey === 'fontSize' && keys[keys.length - 2] === 'typography') {
       return value;
     }
-    const lastKey = keys[keys.length - 1];
     if (lastKey.toLowerCase().includes('opacity')) {
       // opacity values are unitless
       return value;

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

@@ -1,5 +1,6 @@
 import { type ThemeOptions, type ThemeInternal } from './types';
-export type { Theme, BaseTheme, ThemeInternal, ThemeOptions, Breakpoint, ColorSchemeName, ColorSchemeSelectorType, PaletteColorsWithMain, } from './types';
+export type { Theme, BaseTheme, ThemeInternal, ThemeOptions, Breakpoint, ColorSchemeName, ColorSchemeMode, ColorSchemeSelectorType, PaletteColorsWithMain, } from './types';
+export { COLOR_SCHEME_NAMES, COLOR_SCHEME_SYSTEM } from './types';
 /**
  * Creates a theme object for the ThemeProvider.
  * @param options The theme options.

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

@@ -1 +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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/index.ts"],"names":[],"mappings":"AAUA,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,eAAe,EACf,uBAAuB,EACvB,qBAAqB,GACtB,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAElE;;;;GAIG;AACH,eAAO,MAAM,WAAW,GAAI,UAAS,YAAiB,KAAG,aAkExD,CAAC"}

package/styles/theme/createTheme/index.js

@@ -4,10 +4,13 @@ import createBreakpoints from "./createBreakpoints";
 import createSpacing from "./createSpacing";
 import transitions from "./transitions";
 import zIndex from "./zIndex";
+import layout from "./layout";
 import createThemeFromColorScheme from "./createThemeFromColorScheme";
 import createCssVarsForColorSchemeThemes from "./createCssVarsForColorSchemeThemes";
 import applyStyles from "./applyStyles";
 import { createGetColorSchemeSelector, createSetActiveColorScheme } from "./helpers";
+export { COLOR_SCHEME_NAMES, COLOR_SCHEME_SYSTEM } from "./types";
+
 /**
  * Creates a theme object for the ThemeProvider.
  * @param options The theme options.
@@ -35,7 +38,7 @@ export const createTheme = (options = {}) => {
       palette: {
         mode: type
       }
-    }, defaultScheme, scheme));
+    }, defaultScheme, scheme), cssVarPrefix);
     return acc;
   }, {});
   const getColorSchemeSelector = createGetColorSchemeSelector(colorSchemeSelector);
@@ -50,8 +53,6 @@ export const createTheme = (options = {}) => {
   const currentTheme = colorSchemes[defaultColorScheme] ?? colorSchemes.light;
   const breakpoints = createBreakpoints();
   const spacing = createSpacing();
-
-  // @ts-expect-error applyStyles is added to the theme object after its creation
   const theme = {
     ...currentTheme,
     ...cssVarsTheme,
@@ -60,6 +61,7 @@ export const createTheme = (options = {}) => {
     spacing,
     transitions,
     zIndex,
+    layout,
     colorSchemes,
     getColorSchemeSelector,
     setActiveColorScheme,

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

@@ -0,0 +1,23 @@
+/**
+ * Runtime layout dimensions exposed as global CSS variables.
+ *
+ * These are NOT design tokens and are not generated by the theme's CSS-variable pipeline.
+ * The `--safe-area-inset-*` variables are set at runtime by `updatePageInsets` based on the
+ * device page insets.
+ *
+ * This node only maps theme properties to those existing variables (`var(--...)`), so consumers
+ * can read `theme.layout.*` instead of hardcoding the variable names.
+ */
+export interface SafeArea {
+    top: string;
+    bottom: string;
+    left: string;
+    right: string;
+}
+export interface Layout {
+    /** Device safe-area insets (`--safe-area-inset-*`). */
+    safeArea: SafeArea;
+}
+declare const layout: Layout;
+export default layout;
+//# sourceMappingURL=layout.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/layout.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,MAAM,WAAW,QAAQ;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,MAAM;IACrB,uDAAuD;IACvD,QAAQ,EAAE,QAAQ,CAAC;CACpB;AAED,QAAA,MAAM,MAAM,EAAE,MAOb,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/styles/theme/createTheme/layout.js

@@ -0,0 +1,20 @@
+/**
+ * Runtime layout dimensions exposed as global CSS variables.
+ *
+ * These are NOT design tokens and are not generated by the theme's CSS-variable pipeline.
+ * The `--safe-area-inset-*` variables are set at runtime by `updatePageInsets` based on the
+ * device page insets.
+ *
+ * This node only maps theme properties to those existing variables (`var(--...)`), so consumers
+ * can read `theme.layout.*` instead of hardcoding the variable names.
+ */
+
+const layout = {
+  safeArea: {
+    top: 'var(--safe-area-inset-top)',
+    bottom: 'var(--safe-area-inset-bottom)',
+    left: 'var(--safe-area-inset-left)',
+    right: 'var(--safe-area-inset-right)'
+  }
+};
+export default layout;