@happyvertical/smrt-ui 0.55.17 → 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 { generateTheme, 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',
@@ -237,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
  *
@@ -268,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,
@@ -280,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,
@@ -302,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',
     };
 }
@@ -397,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;AAyMD;;;;;;;;;;;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;
@@ -114,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).
  *
@@ -198,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"}

package/dist/themes/glass/index.js

@@ -5,7 +5,8 @@
  * translucency, and layered depth. Features frosted glass surfaces
  * and vibrant material effects.
  */
-import { appleEasing, borderRadiusScale, durationScale, spacingScale, } from '../shared.js';
+import { baselineTokens } from '../derive.js';
+import { appleEasing, borderRadiusScale, darkInsetHighlight, durationScale, hairlineMix, noInsetHighlight, noShadow, shadow, spacingScale, } from '../shared.js';
 /**
  * Glass light color palette
  * Translucent whites with subtle color tints
@@ -26,6 +27,11 @@ const lightColors = {
     onTertiary: '#ffffff',
     tertiaryContainer: 'rgba(88, 86, 214, 0.15)',
     onTertiaryContainer: '#2a2866',
+    // Info - Shares the tertiary hue (no distinct info hue in this preset)
+    info: '#5856d6',
+    onInfo: '#ffffff',
+    infoContainer: 'rgba(88, 86, 214, 0.15)',
+    onInfoContainer: '#2a2866',
     // Error - System red
     error: '#ff3b30',
     onError: '#ffffff',
@@ -96,6 +102,11 @@ const darkColors = {
     onTertiary: '#ffffff',
     tertiaryContainer: 'rgba(94, 92, 230, 0.25)',
     onTertiaryContainer: '#d4d3ff',
+    // Info - Shares the tertiary hue (no distinct info hue in this preset)
+    info: '#5e5ce6',
+    onInfo: '#ffffff',
+    infoContainer: 'rgba(94, 92, 230, 0.25)',
+    onInfoContainer: '#d4d3ff',
     // Error
     error: '#ff453a',
     onError: '#000000',
@@ -112,7 +123,7 @@ const darkColors = {
     successContainer: 'rgba(48, 209, 88, 0.25)',
     onSuccessContainer: '#b8f5c9',
     // Surface - Translucent darks
-    surface: 'rgba(30, 30, 30, 0.72)',
+    surface: 'rgba(29, 29, 38, 0.72)',
     onSurface: '#ffffff',
     surfaceVariant: 'rgba(44, 44, 46, 0.65)',
     onSurfaceVariant: '#8e8e93',
@@ -124,7 +135,7 @@ const darkColors = {
     surfaceDim: 'rgba(0, 0, 0, 0.3)',
     surfaceBright: 'rgba(58, 58, 60, 0.9)',
     // Background - Deep dark with subtle tint
-    background: '#000000',
+    background: '#0b0b0f',
     onBackground: '#ffffff',
     // Outline — see the light-scheme note. Composited over the dark frosted
     // surface the original rgba(84, 84, 88, 0.65) measured 1.70:1; lightening the
@@ -139,7 +150,7 @@ const darkColors = {
     shadow: 'rgba(0, 0, 0, 0.4)',
     scrim: 'rgba(0, 0, 0, 0.6)',
     // Glass-specific
-    glassBackdrop: 'rgba(30, 30, 30, 0.72)',
+    glassBackdrop: 'rgba(29, 29, 38, 0.72)',
     glassBorder: 'rgba(255, 255, 255, 0.1)',
 };
 /**
@@ -248,31 +259,88 @@ const typography = {
     labelSmall: {
         size: '0.6875rem',
         lineHeight: '1.3',
-        weight: '600',
+        weight: '500',
         tracking: '-0.004em',
         fontFamily: 'var(--smrt-font-family)',
     },
 };
 /**
- * Glass elevation
- * Softer, more diffuse shadows with color tint
+ * Glass elevation (light) — soft, diffuse two-layer shadows: a faint contact
+ * line and a wide ambient layer with negative spread so panels float without a
+ * hard edge.
  */
 const elevation = {
-    0: 'none',
-    1: '0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02)',
-    2: '0 3px 6px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.03)',
-    3: '0 6px 12px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04)',
-    4: '0 12px 24px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.05)',
-    5: '0 24px 48px rgba(0, 0, 0, 0.12), 0 16px 32px rgba(0, 0, 0, 0.06)',
+    0: noShadow,
+    1: shadow([
+        [1, 2, 0, 5],
+        [2, 6, -2, 5],
+    ]),
+    2: shadow([
+        [1, 3, 0, 6],
+        [6, 14, -4, 8],
+    ]),
+    3: shadow([
+        [2, 4, 0, 7],
+        [12, 24, -8, 10],
+    ]),
+    4: shadow([
+        [2, 6, 0, 8],
+        [20, 40, -12, 12],
+    ]),
+    5: shadow([
+        [4, 8, 0, 8],
+        [32, 64, -16, 16],
+    ]),
+};
+/**
+ * Glass elevation (dark) — translucency and the inset top highlight carry the
+ * depth; the shadows only support it.
+ */
+const darkElevation = {
+    0: noShadow,
+    1: shadow([
+        [1, 2, 0, 20],
+        [2, 6, -2, 14],
+    ]),
+    2: shadow([
+        [1, 3, 0, 24],
+        [6, 14, -4, 18],
+    ], 'var(--smrt-inset-highlight)'),
+    3: shadow([
+        [2, 4, 0, 26],
+        [12, 24, -8, 22],
+    ], 'var(--smrt-inset-highlight)'),
+    4: shadow([
+        [2, 6, 0, 28],
+        [20, 40, -12, 26],
+    ], 'var(--smrt-inset-highlight)'),
+    5: shadow([
+        [4, 8, 0, 30],
+        [32, 64, -16, 30],
+    ], 'var(--smrt-inset-highlight)'),
 };
 /**
  * Glass effect configuration
  */
 const glassEffects = {
     blur: '20px',
-    saturation: '180%',
+    // Deprecated aliases, still emitted for consumers of the old opacity tokens.
     borderOpacity: '0.3',
     backgroundOpacity: '0.72',
+    saturation: '180%',
+    // Translucent frosted surfaces; the opacity is part of each colour.
+    surfaces: {
+        light: {
+            surface: 'color-mix(in srgb, #ffffff 72%, transparent)',
+            surfaceStrong: 'color-mix(in srgb, #ffffff 88%, transparent)',
+            border: 'var(--smrt-hairline-color)',
+        },
+        dark: {
+            surface: 'color-mix(in srgb, #1d1d26 72%, transparent)',
+            surfaceStrong: 'color-mix(in srgb, #1d1d26 88%, transparent)',
+            border: 'color-mix(in srgb, #ffffff 10%, transparent)',
+        },
+    },
 };
 /**
  * Glass theme definition
@@ -284,10 +352,55 @@ export const glassTheme = {
     dark: darkColors,
     typography,
     elevation,
+    darkElevation,
     spacing: spacingScale,
     borderRadius: borderRadiusScale,
     duration: durationScale,
     easing: appleEasing,
+    ...baselineTokens(lightColors, darkColors),
+    shadowColor: { light: 'rgb(0 0 0)', dark: 'rgb(0 0 0)' },
+    // The ladder is expressed through translucency over the ground. Panels are
+    // frosted glass (72%), inputs are recessed glass (a tinted well that reads as
+    // pressed into the panel), and popovers are thicker glass (88%).
+    surfaces: {
+        light: {
+            ground: lightColors.background,
+            panel: 'color-mix(in srgb, #ffffff 72%, transparent)',
+            control: 'color-mix(in srgb, #767680 12%, transparent)',
+            raised: 'color-mix(in srgb, #ffffff 88%, transparent)',
+            sunken: 'color-mix(in srgb, #767680 8%, transparent)',
+            overlay: lightColors.scrim,
+        },
+        dark: {
+            ground: darkColors.background,
+            panel: 'color-mix(in srgb, #1d1d26 72%, transparent)',
+            control: 'color-mix(in srgb, #000000 28%, transparent)',
+            raised: 'color-mix(in srgb, #2a2a34 88%, transparent)',
+            sunken: 'color-mix(in srgb, #000000 38%, transparent)',
+            overlay: darkColors.scrim,
+        },
+    },
+    hairlines: {
+        light: hairlineMix(10, 26, noInsetHighlight),
+        dark: hairlineMix(12, 28, darkInsetHighlight(0.1)),
+    },
+    // Slightly stronger than Material: translucent fills need a firmer response.
+    states: {
+        hover: '0.10',
+        pressed: '0.14',
+        selected: '0.14',
+        focus: '0.14',
+        dragged: '0.18',
+        disabled: '0.38',
+    },
+    // Pill-ish controls: radius lg.
+    controls: {
+        radius: 'var(--smrt-radius-lg)',
+        radiusSmall: 'var(--smrt-radius-md)',
+        height: '2.75rem',
+        heightSmall: '2.25rem',
+        weight: '500',
+    },
     glass: glassEffects,
     fontFamily: '-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", sans-serif',
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/themes/happyvertical/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;AAGH,OAAO,KAAK,EAMV,KAAK,EAEN,MAAM,aAAa,CAAC;AAoWrB;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAchC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/themes/happyvertical/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;AAUH,OAAO,KAAK,EAMV,KAAK,EAEN,MAAM,aAAa,CAAC;AA2YrB;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAkEhC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}