@happyvertical/smrt-ui 0.55.16 → 0.55.18

package/dist/themes/create-theme.js

@@ -3,7 +3,8 @@
  *
  * Helper functions for creating custom themes that match the SMRT theme system.
  */
-import { hexToRgb, rgbToHex } from '../utils/theme/color.js';
+import { generateTheme, getContrastRatio, hexToRgb, rgbToHex, } from '../utils/theme/color.js';
+import { baselineTokens, opaqueGlass } from './derive.js';
 import { hasCustomTheme, registerCustomTheme, themes as registeredThemes, } from './registry.js';
 import { borderRadiusScale, durationScale, materialEasing, spacingScale, } from './shared.js';
 /**
@@ -22,6 +23,10 @@ const defaultColorStructure = {
     onTertiary: '#ffffff',
     tertiaryContainer: '#ede9fe',
     onTertiaryContainer: '#3b0764',
+    info: '#8b5cf6',
+    onInfo: '#ffffff',
+    infoContainer: '#ede9fe',
+    onInfoContainer: '#3b0764',
     error: '#dc2626',
     onError: '#ffffff',
     errorContainer: '#fee2e2',
@@ -86,12 +91,15 @@ function generateDarkColors(light) {
         }
         return rgbToHex(r * factor, g * factor, b * factor);
     };
+    // Multiplying a very dark brand seed stays dark. Use tonal primary pairs so
+    // icons and labels keep contrast against their containers in dark mode.
+    const primary = generateTheme(light.primary, 'dark');
     return {
         ...light,
-        primary: light.inversePrimary || adjustBrightness(light.primary, 1.2),
-        onPrimary: adjustBrightness(light.onPrimary, 0.8),
-        primaryContainer: adjustBrightness(light.primaryContainer || light.primary, 0.3),
-        onPrimaryContainer: adjustBrightness(light.onPrimaryContainer || light.onPrimary, 1.2),
+        primary: primary.primary,
+        onPrimary: primary.onPrimary,
+        primaryContainer: primary.primaryContainer,
+        onPrimaryContainer: primary.onPrimaryContainer,
         secondary: adjustBrightness(light.secondary, 1.3),
         onSecondary: adjustBrightness(light.onSecondary, 0.8),
         secondaryContainer: adjustBrightness(light.secondaryContainer, 0.3),
@@ -234,6 +242,27 @@ function mergeTypography(custom) {
         labelSmall: { ...defaults.labelSmall, ...custom.labelSmall },
     };
 }
+/**
+ * The info family follows an explicitly supplied tertiary unless the caller
+ * also supplied a distinct info hue; otherwise it keeps the extended preset's
+ * (or the default) info. Presets without a distinct info hue define it as their
+ * tertiary, so a custom tertiary carries the Information status with it.
+ */
+function withInfoFromTertiary(palette, partial) {
+    if (partial?.tertiary === undefined)
+        return palette;
+    return {
+        ...palette,
+        info: partial.info ?? palette.tertiary,
+        onInfo: partial.onInfo ?? palette.onTertiary,
+        infoContainer: partial.infoContainer ?? palette.tertiaryContainer,
+        onInfoContainer: partial.onInfoContainer ?? palette.onTertiaryContainer,
+    };
+}
+/** Drop undefined entries so they cannot clobber derived defaults. */
+function definedOnly(value) {
+    return Object.fromEntries(Object.entries(value).filter(([, v]) => v !== undefined));
+}
 /**
  * Create a custom theme
  *
@@ -265,7 +294,7 @@ export function createTheme(options) {
     // Get base theme if extending (lazy import to avoid circular deps)
     const baseTheme = extend ? getBaseThemeSync(extend) : null;
     // Build light colors
-    const lightColors = {
+    const lightColors = withInfoFromTertiary({
         ...defaultColorStructure,
         ...baseTheme?.light,
         ...lightPartial,
@@ -277,11 +306,12 @@ export function createTheme(options) {
             `${normalizeHex(lightPartial.primary)}20`,
         onPrimaryContainer: lightPartial.onPrimaryContainer || lightPartial.primary,
         inversePrimary: lightPartial.inversePrimary || lightPartial.primary,
-    };
+    }, lightPartial);
     // Build dark colors
     const darkColors = darkPartial
-        ? { ...lightColors, ...darkPartial }
+        ? withInfoFromTertiary({ ...lightColors, ...darkPartial }, darkPartial)
         : generateDarkColors(lightColors);
+    const baseline = baselineTokens(lightColors, darkColors);
     return {
         id: id,
         name,
@@ -299,7 +329,22 @@ export function createTheme(options) {
             ...(baseTheme?.easing || materialEasing),
             ...options.easing,
         },
-        glass: options.glass,
+        glass: options.glass ?? baseTheme?.glass ?? { ...opaqueGlass },
+        ...baseline,
+        ...definedOnly({
+            surfaces: options.surfaces,
+            hairlines: options.hairlines,
+            states: options.states && { ...baseline.states, ...options.states },
+            shadowColor: options.shadowColor,
+            controls: options.controls && {
+                ...baseline.controls,
+                ...options.controls,
+            },
+            focus: options.focus && { ...baseline.focus, ...options.focus },
+            native: options.native,
+            schemeDuration: options.schemeDuration,
+            fontFeatureSettings: options.fontFeatureSettings,
+        }),
         fontFamily: options.fontFamily || baseTheme?.fontFamily || 'system-ui, sans-serif',
     };
 }
@@ -394,3 +439,49 @@ export function createThemeFromColor(primaryColor, id, name, options) {
     });
 }
 // Types are exported from index.ts
+/**
+ * Derive the primary-dependent token overrides for a user-chosen primary colour
+ * in one resolved scheme, using the same derivation as `createThemeFromColor`
+ * (light: the colour itself with a ~12.5% container; dark: the tonal primary
+ * pair from `generateTheme`). `on-primary` is the higher-contrast of white and
+ * black on the final primary so an override never leaves it mismatched. Focus,
+ * accent, caret and selection tokens follow the primary via `var()`.
+ *
+ * Returns `--smrt-*` declarations; throws on an unparseable colour.
+ */
+export function derivePrimaryOverrides(color, scheme) {
+    const seed = normalizeHex(color);
+    let primary = seed;
+    let onPrimary;
+    let container = `${seed}20`;
+    let onContainer = seed;
+    if (scheme === 'dark') {
+        const tonal = generateTheme(seed, 'dark');
+        primary = tonal.primary;
+        onPrimary = tonal.onPrimary;
+        container = tonal.primaryContainer;
+        onContainer = tonal.onPrimaryContainer;
+    }
+    else {
+        onPrimary = '#ffffff';
+    }
+    const bg = hexToRgb(primary);
+    const white = getContrastRatio(hexToRgb('#ffffff'), bg);
+    const black = getContrastRatio(hexToRgb('#000000'), bg);
+    const tonalOn = hexToRgb(onPrimary);
+    if (getContrastRatio(tonalOn, bg) < 4.5) {
+        onPrimary = white >= black ? '#ffffff' : '#000000';
+    }
+    return {
+        '--smrt-color-primary': primary,
+        '--smrt-color-on-primary': onPrimary,
+        '--smrt-color-primary-container': container,
+        '--smrt-color-on-primary-container': onContainer,
+        '--smrt-color-inverse-primary': seed,
+        '--smrt-focus-ring-color': 'var(--smrt-color-primary)',
+        '--smrt-accent-color': 'var(--smrt-color-primary)',
+        '--smrt-caret-color': 'var(--smrt-color-primary)',
+        '--smrt-selection-background': 'var(--smrt-color-primary-container)',
+        '--smrt-selection-color': 'var(--smrt-color-on-primary-container)',
+    };
+}

package/dist/themes/css-generator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"css-generator.d.ts","sourceRoot":"","sources":["../../src/themes/css-generator.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAWH,OAAO,KAAK,EAQV,KAAK,EAEN,MAAM,YAAY,CAAC;AAEpB;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kDAAkD;IAClD,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAwMD;;;;;;;;;;;GAWG;AACH,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,EACf,OAAO,GAAE,kBAAuB,GAC/B,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CA6CxB;AAED;;;;GAIG;AACH,wBAAgB,sBAAsB,CACpC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAChC,MAAM,CAIR;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,EACf,OAAO,GAAE,kBAAuB,GAC/B,MAAM,CAaR;AAED;;;GAGG;AACH,wBAAsB,oBAAoB,IAAI,OAAO,CAAC,MAAM,CAAC,CAS5D"}
+{"version":3,"file":"css-generator.d.ts","sourceRoot":"","sources":["../../src/themes/css-generator.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAYH,OAAO,KAAK,EAOV,KAAK,EAEN,MAAM,YAAY,CAAC;AAEpB;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kDAAkD;IAClD,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAgMD;;;;;;;;;;;GAWG;AACH,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,EACf,OAAO,GAAE,kBAAuB,GAC/B,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CA+CxB;AAED;;;;GAIG;AACH,wBAAgB,sBAAsB,CACpC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAChC,MAAM,CAIR;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,EACf,OAAO,GAAE,kBAAuB,GAC/B,MAAM,CAaR;AAED;;;GAGG;AACH,wBAAsB,oBAAoB,IAAI,OAAO,CAAC,MAAM,CAAC,CAS5D"}

package/dist/themes/css-generator.js

@@ -4,6 +4,7 @@
  * Converts theme definitions into CSS custom properties for runtime theming.
  * Generates CSS variables for colors, typography, spacing, elevation, etc.
  */
+import { generateBaselineVariables } from './derive.js';
 import { themes } from './registry.js';
 import { borderRadiusAliases, durationAliases, fontFamilyAliases, fontWeightTokens, spacingAliases, zIndexTokens, } from './shared.js';
 /**
@@ -11,7 +12,16 @@ import { borderRadiusAliases, durationAliases, fontFamilyAliases, fontWeightToke
  */
 function generateColorVariables(colors, prefix) {
     const vars = {};
-    for (const [key, value] of Object.entries(colors)) {
+    const withInfo = {
+        ...colors,
+        info: colors.info ?? colors.tertiary,
+        onInfo: colors.onInfo ?? colors.onTertiary,
+        infoContainer: colors.infoContainer ?? colors.tertiaryContainer,
+        onInfoContainer: colors.onInfoContainer ?? colors.onTertiaryContainer,
+    };
+    for (const [key, value] of Object.entries(withInfo)) {
+        if (value === undefined)
+            continue;
         // Convert camelCase to kebab-case: primaryContainer -> primary-container
         const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase();
         vars[`${prefix}-color-${cssKey}`] = value;
@@ -29,14 +39,15 @@ function generateTypographyVariables(typography, prefix) {
         vars[`${prefix}-typography-${cssKey}-line-height`] = token.lineHeight;
         vars[`${prefix}-typography-${cssKey}-weight`] = String(token.weight);
         vars[`${prefix}-typography-${cssKey}-tracking`] = token.tracking;
-        if (token.fontFamily) {
-            vars[`${prefix}-typography-${cssKey}-font-family`] = token.fontFamily;
-        }
+        // Always emit the longhand (issue #3826): a token without its own family
+        // inherits the theme body font, so the longhand is defined for every theme
+        // and components never depend on an unset custom property.
+        const family = token.fontFamily ?? `var(${prefix}-font-family)`;
+        vars[`${prefix}-typography-${cssKey}-font-family`] = family;
         // Additive `font` shorthand alias (issue #1431): components use
         // `font: var(--smrt-typography-body-medium-font)`, expecting the CSS
         // `font` shorthand order (style variant size/line-height family). Built
         // from the emitted longhands so it stays in sync.
-        const family = token.fontFamily ?? `var(${prefix}-font-family)`;
         vars[`${prefix}-typography-${cssKey}-font`] =
             `${token.weight} ${token.size}/${token.lineHeight} ${family}`;
     }
@@ -113,19 +124,6 @@ function generateEasingVariables(easing, prefix) {
     }
     return vars;
 }
-/**
- * Generate CSS custom properties for glass effects
- */
-function generateGlassVariables(glass, prefix) {
-    if (!glass)
-        return {};
-    return {
-        [`${prefix}-glass-blur`]: glass.blur,
-        [`${prefix}-glass-saturation`]: glass.saturation,
-        [`${prefix}-glass-border-opacity`]: glass.borderOpacity,
-        [`${prefix}-glass-background-opacity`]: glass.backgroundOpacity,
-    };
-}
 /**
  * Generate helper tokens that do not vary by color scheme (issue #1431).
  *
@@ -197,8 +195,10 @@ export function generateThemeVariables(theme, isDark, options = {}) {
         ...generateEasingVariables(theme.easing, prefix),
         // Theme-independent helper tokens (mono font, named weights, z-index)
         ...generateStaticTokens(prefix, theme.fontFamilyMono),
-        // Glass effects (if present)
-        ...generateGlassVariables(theme.glass, prefix),
+        // Premium baseline: surface ladder, hairlines, state layers, shadow colour,
+        // control geometry, focus ring, native chrome, glass, scheme motion, font
+        // features (#3865)
+        ...generateBaselineVariables(theme, isDark, prefix),
     };
 }
 /**

package/dist/themes/derive.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Premium-baseline token derivation (epic #3864, issue #3865).
+ *
+ * Resolves the surface ladder, hairlines, state layers, shadow colour, control
+ * geometry, focus ring, native chrome, glass and motion/typography tokens for
+ * one theme and scheme. Presets set explicit values on `Theme`; anything a theme
+ * omits (custom themes, `createTheme()`) is derived here from its palette so
+ * every theme always defines every token.
+ */
+import type { ColorPalette, ControlTokens, FocusRingTokens, GlassEffects, GlassSurfaces, HairlineTokens, NativeChromeTokens, StateLayers, SurfaceLadder, Theme } from './types.js';
+export declare const defaultStateLayers: StateLayers;
+export declare const defaultSchemeDuration = "var(--smrt-duration-medium1)";
+export declare const defaultFontFeatureSettings = "normal";
+/** `rgb(r g b)` from any palette colour; black when it cannot be parsed. */
+export declare function toRgbTriplet(color: string): string;
+export declare function deriveSurfaces(colors: ColorPalette, isDark: boolean): SurfaceLadder;
+export declare function deriveHairlines(isDark: boolean, prefix?: string): HairlineTokens;
+export declare function deriveControls(prefix?: string): ControlTokens;
+export declare function deriveFocus(prefix?: string): FocusRingTokens;
+export declare function deriveNative(prefix?: string): NativeChromeTokens;
+export declare function deriveGlassSurfaces(prefix?: string): GlassSurfaces;
+/** Opaque glass default for themes that are not glass. */
+export declare const opaqueGlass: GlassEffects;
+/**
+ * Complete set of baseline sections derived from a palette pair. Presets spread
+ * this and override what they tune; `createTheme()` uses it directly.
+ */
+export declare function baselineTokens(light: ColorPalette, dark: ColorPalette): Pick<Theme, 'surfaces' | 'hairlines' | 'states' | 'shadowColor' | 'controls' | 'focus' | 'native' | 'schemeDuration' | 'fontFeatureSettings'>;
+/** Flat `--prefix-*` map for the premium-baseline families. */
+export declare function generateBaselineVariables(theme: Theme, isDark: boolean, prefix: string): Record<string, string>;
+//# sourceMappingURL=derive.d.ts.map

package/dist/themes/derive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"derive.d.ts","sourceRoot":"","sources":["../../src/themes/derive.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH,OAAO,KAAK,EACV,YAAY,EACZ,aAAa,EACb,eAAe,EACf,YAAY,EACZ,aAAa,EACb,cAAc,EACd,kBAAkB,EAClB,WAAW,EACX,aAAa,EACb,KAAK,EACN,MAAM,YAAY,CAAC;AAEpB,eAAO,MAAM,kBAAkB,EAAE,WAOhC,CAAC;AAEF,eAAO,MAAM,qBAAqB,iCAAiC,CAAC;AACpE,eAAO,MAAM,0BAA0B,WAAW,CAAC;AAEnD,4EAA4E;AAC5E,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAQlD;AAED,wBAAgB,cAAc,CAC5B,MAAM,EAAE,YAAY,EACpB,MAAM,EAAE,OAAO,GACd,aAAa,CAaf;AAED,wBAAgB,eAAe,CAC7B,MAAM,EAAE,OAAO,EACf,MAAM,SAAW,GAChB,cAAc,CAQhB;AAED,wBAAgB,cAAc,CAAC,MAAM,SAAW,GAAG,aAAa,CAS/D;AAED,wBAAgB,WAAW,CAAC,MAAM,SAAW,GAAG,eAAe,CAM9D;AAED,wBAAgB,YAAY,CAAC,MAAM,SAAW,GAAG,kBAAkB,CASlE;AAED,wBAAgB,mBAAmB,CAAC,MAAM,SAAW,GAAG,aAAa,CAMpE;AAED,0DAA0D;AAC1D,eAAO,MAAM,WAAW,EAAE,YAAkD,CAAC;AAE7E;;;GAGG;AACH,wBAAgB,cAAc,CAC5B,KAAK,EAAE,YAAY,EACnB,IAAI,EAAE,YAAY,GACjB,IAAI,CACL,KAAK,EACH,UAAU,GACV,WAAW,GACX,QAAQ,GACR,aAAa,GACb,UAAU,GACV,OAAO,GACP,QAAQ,GACR,gBAAgB,GAChB,qBAAqB,CACxB,CAkBA;AAED,+DAA+D;AAC/D,wBAAgB,yBAAyB,CACvC,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,EACf,MAAM,EAAE,MAAM,GACb,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAuExB"}

package/dist/themes/derive.js

@@ -0,0 +1,183 @@
+/**
+ * Premium-baseline token derivation (epic #3864, issue #3865).
+ *
+ * Resolves the surface ladder, hairlines, state layers, shadow colour, control
+ * geometry, focus ring, native chrome, glass and motion/typography tokens for
+ * one theme and scheme. Presets set explicit values on `Theme`; anything a theme
+ * omits (custom themes, `createTheme()`) is derived here from its palette so
+ * every theme always defines every token.
+ */
+import { hexToRgb } from '../utils/theme/color.js';
+import { noInsetHighlight } from './shared.js';
+export const defaultStateLayers = {
+    hover: '0.08',
+    pressed: '0.12',
+    selected: '0.12',
+    focus: '0.12',
+    dragged: '0.16',
+    disabled: '0.38',
+};
+export const defaultSchemeDuration = 'var(--smrt-duration-medium1)';
+export const defaultFontFeatureSettings = 'normal';
+/** `rgb(r g b)` from any palette colour; black when it cannot be parsed. */
+export function toRgbTriplet(color) {
+    try {
+        const { r, g, b } = hexToRgb(color);
+        if ([r, g, b].some((n) => Number.isNaN(n)))
+            return 'rgb(0 0 0)';
+        return `rgb(${Math.round(r)} ${Math.round(g)} ${Math.round(b)})`;
+    }
+    catch {
+        return 'rgb(0 0 0)';
+    }
+}
+export function deriveSurfaces(colors, isDark) {
+    return {
+        ground: colors.background,
+        panel: colors.surface,
+        control: isDark
+            ? colors.surfaceContainerHigh
+            : colors.surfaceContainerLowest,
+        raised: isDark
+            ? colors.surfaceContainerHigh
+            : colors.surfaceContainerLowest,
+        sunken: isDark ? colors.surfaceContainerLowest : colors.surfaceContainer,
+        overlay: colors.scrim,
+    };
+}
+export function deriveHairlines(isDark, prefix = '--smrt') {
+    return {
+        color: `color-mix(in srgb, var(${prefix}-color-on-surface) 12%, transparent)`,
+        strongColor: `color-mix(in srgb, var(${prefix}-color-on-surface) 20%, transparent)`,
+        insetHighlight: isDark
+            ? 'inset 0 1px 0 rgb(255 255 255 / 0.06)'
+            : noInsetHighlight,
+    };
+}
+export function deriveControls(prefix = '--smrt') {
+    return {
+        radius: `var(${prefix}-radius-md)`,
+        radiusSmall: `var(${prefix}-radius-sm)`,
+        height: '2.75rem',
+        heightSmall: '2.25rem',
+        weight: '500',
+        border: `var(${prefix}-hairline-strong)`,
+    };
+}
+export function deriveFocus(prefix = '--smrt') {
+    return {
+        color: `var(${prefix}-color-primary)`,
+        width: '2px',
+        offset: '2px',
+    };
+}
+export function deriveNative(prefix = '--smrt') {
+    return {
+        accent: `var(${prefix}-color-primary)`,
+        selectionBackground: `var(${prefix}-color-primary-container)`,
+        selectionColor: `var(${prefix}-color-on-primary-container)`,
+        caret: `var(${prefix}-color-primary)`,
+        scrollbarThumb: `var(${prefix}-hairline-strong-color)`,
+        scrollbarTrack: 'transparent',
+    };
+}
+export function deriveGlassSurfaces(prefix = '--smrt') {
+    return {
+        surface: `var(${prefix}-surface-panel)`,
+        surfaceStrong: `var(${prefix}-surface-raised)`,
+        border: `var(${prefix}-hairline-color)`,
+    };
+}
+/** Opaque glass default for themes that are not glass. */
+export const opaqueGlass = { blur: '0px', saturation: '100%' };
+/**
+ * Complete set of baseline sections derived from a palette pair. Presets spread
+ * this and override what they tune; `createTheme()` uses it directly.
+ */
+export function baselineTokens(light, dark) {
+    return {
+        surfaces: {
+            light: deriveSurfaces(light, false),
+            dark: deriveSurfaces(dark, true),
+        },
+        hairlines: { light: deriveHairlines(false), dark: deriveHairlines(true) },
+        states: { ...defaultStateLayers },
+        shadowColor: {
+            light: toRgbTriplet(light.shadow),
+            dark: toRgbTriplet(dark.shadow),
+        },
+        controls: deriveControls(),
+        focus: deriveFocus(),
+        native: { light: deriveNative(), dark: deriveNative() },
+        schemeDuration: defaultSchemeDuration,
+        fontFeatureSettings: defaultFontFeatureSettings,
+    };
+}
+/** Flat `--prefix-*` map for the premium-baseline families. */
+export function generateBaselineVariables(theme, isDark, prefix) {
+    const scheme = isDark ? 'dark' : 'light';
+    const colors = isDark ? theme.dark : theme.light;
+    const surfaces = theme.surfaces?.[scheme] ?? deriveSurfaces(colors, isDark);
+    const hairlines = theme.hairlines?.[scheme] ?? deriveHairlines(isDark, prefix);
+    const states = { ...defaultStateLayers, ...theme.states };
+    const controls = { ...deriveControls(prefix), ...theme.controls };
+    const focus = { ...deriveFocus(prefix), ...theme.focus };
+    const native = theme.native?.[scheme] ?? deriveNative(prefix);
+    const glass = theme.glass ?? opaqueGlass;
+    const glassSurfaces = glass.surfaces?.[scheme] ?? deriveGlassSurfaces(prefix);
+    const shadowColor = theme.shadowColor?.[scheme] ?? toRgbTriplet(colors.shadow);
+    return {
+        // Surface ladder
+        [`${prefix}-surface-ground`]: surfaces.ground,
+        [`${prefix}-surface-panel`]: surfaces.panel,
+        [`${prefix}-surface-control`]: surfaces.control,
+        [`${prefix}-surface-raised`]: surfaces.raised,
+        [`${prefix}-surface-sunken`]: surfaces.sunken,
+        [`${prefix}-surface-overlay`]: surfaces.overlay,
+        // Hairlines
+        [`${prefix}-hairline-color`]: hairlines.color,
+        [`${prefix}-hairline-strong-color`]: hairlines.strongColor,
+        [`${prefix}-hairline`]: `1px solid var(${prefix}-hairline-color)`,
+        [`${prefix}-hairline-strong`]: `1px solid var(${prefix}-hairline-strong-color)`,
+        [`${prefix}-inset-highlight`]: hairlines.insetHighlight,
+        // State layers
+        [`${prefix}-state-hover`]: states.hover,
+        [`${prefix}-state-pressed`]: states.pressed,
+        [`${prefix}-state-selected`]: states.selected,
+        [`${prefix}-state-focus`]: states.focus,
+        [`${prefix}-state-dragged`]: states.dragged,
+        [`${prefix}-state-disabled`]: states.disabled,
+        // Depth
+        [`${prefix}-shadow-color`]: shadowColor,
+        // Controls
+        [`${prefix}-control-radius`]: controls.radius,
+        [`${prefix}-control-radius-small`]: controls.radiusSmall,
+        [`${prefix}-control-height`]: controls.height,
+        [`${prefix}-control-height-small`]: controls.heightSmall,
+        [`${prefix}-control-weight`]: controls.weight,
+        [`${prefix}-control-border`]: controls.border,
+        // Focus ring
+        [`${prefix}-focus-ring-color`]: focus.color,
+        [`${prefix}-focus-ring-width`]: focus.width,
+        [`${prefix}-focus-ring-offset`]: focus.offset,
+        // Native chrome
+        [`${prefix}-accent-color`]: native.accent,
+        [`${prefix}-selection-background`]: native.selectionBackground,
+        [`${prefix}-selection-color`]: native.selectionColor,
+        [`${prefix}-caret-color`]: native.caret,
+        [`${prefix}-scrollbar-thumb`]: native.scrollbarThumb,
+        [`${prefix}-scrollbar-track`]: native.scrollbarTrack,
+        // Glass
+        [`${prefix}-glass-blur`]: glass.blur,
+        [`${prefix}-glass-saturation`]: glass.saturation,
+        [`${prefix}-glass-surface`]: glassSurfaces.surface,
+        [`${prefix}-glass-surface-strong`]: glassSurfaces.surfaceStrong,
+        [`${prefix}-glass-border`]: glassSurfaces.border,
+        // Deprecated aliases kept for one release (see GlassEffects).
+        [`${prefix}-glass-border-opacity`]: glass.borderOpacity ?? '1',
+        [`${prefix}-glass-background-opacity`]: glass.backgroundOpacity ?? '1',
+        // Motion and typography
+        [`${prefix}-duration-scheme`]: theme.schemeDuration ?? defaultSchemeDuration,
+        [`${prefix}-font-feature-settings`]: theme.fontFeatureSettings ?? defaultFontFeatureSettings,
+    };
+}

package/dist/themes/glass/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/themes/glass/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAQH,OAAO,KAAK,EAIV,KAAK,EAEN,MAAM,aAAa,CAAC;AAySrB;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KAcxB,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/themes/glass/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAcH,OAAO,KAAK,EAIV,KAAK,EAEN,MAAM,aAAa,CAAC;AA2XrB;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KA2DxB,CAAC;AAEF,eAAe,UAAU,CAAC"}