@happyvertical/smrt-ui 0.55.16 → 0.55.18

package/dist/themes/ThemeProvider.svelte

@@ -1,11 +1,15 @@
 <script lang="ts">
 import type { Snippet } from 'svelte';
 import { onMount, untrack } from 'svelte';
+import { SMRT_CASCADE_LAYERS_CSS } from '../styles/layers.js';
 import { setThemeContext, type ThemeContext } from './context.svelte.js';
+import { derivePrimaryOverrides } from './create-theme.js';
 import { generateThemeVariables } from './css-generator.js';
 import { availablePresets, getTheme, isValidPreset } from './registry.js';
 import type {
   ColorScheme,
+  ContrastPreference,
+  ResolvedContrast,
   Theme,
   ThemeConfig,
   ThemePreset,
@@ -15,7 +19,12 @@ import { defaultThemeConfig } from './types.js';
 
 interface Props {
   /** Default control target density for descendants; individual controls may override. */
-  density?: 'comfortable' | 'touch';
+  density?: ThemeConfig['density'];
+  /**
+   * Contrast preference. `auto` (default) follows `prefers-contrast: more`;
+   * `forced-colors: active` always wins. Persisted when set explicitly.
+   */
+  contrast?: ContrastPreference;
   /** Theme preset to use */
   preset?: ThemePreset;
   /** Color scheme preference */
@@ -62,6 +71,7 @@ let {
   inlineVariables,
   children,
   density,
+  contrast = 'auto',
 }: Props = $props();
 
 // Internal state — seed from the props (which already default to
@@ -77,6 +87,8 @@ let config = $state<ThemeConfig>(
     colorScheme,
     primaryColor,
     borderRadius,
+    density,
+    contrast,
     overrides,
     persist,
     storageKey,
@@ -84,8 +96,33 @@ let config = $state<ThemeConfig>(
 );
 
 let systemPrefersDark = $state(false);
+let systemContrastMore = $state(false);
+let systemForcedColors = $state(false);
+let isChangingScheme = $state(false);
 let mounted = $state(false);
 
+/** Control radius per `borderRadius` choice: [control, small]. `md` is the preset default. */
+const CONTROL_RADIUS: Record<
+  NonNullable<ThemeConfig['borderRadius']>,
+  [string, string]
+> = {
+  none: ['var(--smrt-radius-none)', 'var(--smrt-radius-none)'],
+  sm: ['var(--smrt-radius-sm)', 'var(--smrt-radius-sm)'],
+  md: ['var(--smrt-radius-md)', 'var(--smrt-radius-sm)'],
+  lg: ['var(--smrt-radius-lg)', 'var(--smrt-radius-md)'],
+  xl: ['var(--smrt-radius-xl)', 'var(--smrt-radius-lg)'],
+  full: ['var(--smrt-radius-full)', 'var(--smrt-radius-full)'],
+};
+
+const resolvedContrast = $derived<ResolvedContrast>(
+  systemForcedColors
+    ? 'forced'
+    : config.contrast === 'more' ||
+        (config.contrast !== 'standard' && systemContrastMore)
+      ? 'more'
+      : 'standard',
+);
+
 // Derived state
 const currentTheme = $derived<Theme>(getTheme(config.preset));
 
@@ -122,15 +159,34 @@ const styleString = $derived.by(() => {
     }
   }
 
-  // Apply primary color override
+  // Border radius: only a non-default choice is emitted, so `md` keeps the
+  // preset's own control radius from the static stylesheet.
+  if (config.borderRadius && config.borderRadius !== 'md') {
+    const [control, small] = CONTROL_RADIUS[config.borderRadius];
+    declarations.push(
+      `--smrt-control-radius: ${control}`,
+      `--smrt-control-radius-small: ${small}`,
+    );
+  }
+
+  // Primary colour override: the whole derived set for the resolved scheme so
+  // on-primary / container / focus / accent never stay mismatched.
   if (config.primaryColor) {
-    declarations.push(`--smrt-color-primary: ${config.primaryColor}`);
-    // Recalculate dependent colors would go here in a full implementation
+    try {
+      for (const [key, value] of Object.entries(
+        derivePrimaryOverrides(config.primaryColor, resolvedScheme),
+      )) {
+        declarations.push(`${key}: ${value}`);
+      }
+    } catch {
+      // Unparseable colour (e.g. a named colour): keep the single variable.
+      declarations.push(`--smrt-color-primary: ${config.primaryColor}`);
+    }
   }
 
-  if (density !== undefined) {
+  if (config.density !== undefined) {
     declarations.push(
-      `--smrt-control-target-min: ${density === 'touch' ? 'var(--smrt-touch-target-min, 48px)' : '0px'}`,
+      `--smrt-control-target-min: ${config.density === 'touch' ? 'var(--smrt-touch-target-min)' : '0px'}`,
     );
   }
 
@@ -148,6 +204,8 @@ const themeState = $derived<ThemeStateType>({
   colorScheme: config.colorScheme,
   resolvedScheme,
   isDark,
+  contrast: resolvedContrast,
+  isChangingScheme,
   config,
   theme: currentTheme,
 });
@@ -182,6 +240,10 @@ function persistConfig(): void {
       preset: config.preset,
       colorScheme: config.colorScheme,
       borderRadius: config.borderRadius,
+      ...(config.density ? { density: config.density } : {}),
+      ...(config.contrast && config.contrast !== 'auto'
+        ? { contrast: config.contrast }
+        : {}),
     });
     localStorage.setItem(config.storageKey!, data);
   } catch {
@@ -221,6 +283,15 @@ function loadPersistedConfig(): void {
       ) {
         config.borderRadius = persisted.borderRadius;
       }
+      if (
+        persisted.density === 'comfortable' ||
+        persisted.density === 'touch'
+      ) {
+        config.density = persisted.density;
+      }
+      if (persisted.contrast === 'standard' || persisted.contrast === 'more') {
+        config.contrast = persisted.contrast;
+      }
     }
   } catch {
     // Ignore storage errors (e.g., corrupted data, JSON parse errors)
@@ -252,6 +323,20 @@ onMount(() => {
     };
     mediaQuery.addEventListener('change', handler);
 
+    // Contrast preferences (guarded: matchMedia stubs may omit these queries)
+    const moreQuery = window.matchMedia('(prefers-contrast: more)');
+    const forcedQuery = window.matchMedia('(forced-colors: active)');
+    systemContrastMore = !!moreQuery?.matches;
+    systemForcedColors = !!forcedQuery?.matches;
+    const moreHandler = (e: MediaQueryListEvent) => {
+      systemContrastMore = e.matches;
+    };
+    const forcedHandler = (e: MediaQueryListEvent) => {
+      systemForcedColors = e.matches;
+    };
+    moreQuery?.addEventListener?.('change', moreHandler);
+    forcedQuery?.addEventListener?.('change', forcedHandler);
+
     // Load persisted preferences
     loadPersistedConfig();
 
@@ -259,6 +344,9 @@ onMount(() => {
 
     return () => {
       mediaQuery.removeEventListener('change', handler);
+      moreQuery?.removeEventListener?.('change', moreHandler);
+      forcedQuery?.removeEventListener?.('change', forcedHandler);
+      if (schemeTimer) clearTimeout(schemeTimer);
     };
   }
 });
@@ -277,9 +365,61 @@ $effect(() => {
 
     // Color scheme for browser UI
     html.style.colorScheme = resolvedScheme;
+
+    // Contrast / density contract (themeScript stamps the same pre-paint)
+    html.setAttribute('data-contrast', resolvedContrast);
+    html.toggleAttribute('data-forced-colors', resolvedContrast === 'forced');
+    if (config.density) html.setAttribute('data-density', config.density);
+    else html.removeAttribute('data-density');
   }
 });
 
+// Scheme crossfade: flag the root for one --smrt-duration-scheme after the
+// resolved scheme CHANGES post-mount (never on first paint, never under
+// prefers-reduced-motion) so base.css/components can transition colours.
+const FALLBACK_SCHEME_MS = 250;
+let schemeTimer: ReturnType<typeof setTimeout> | undefined;
+let lastScheme: 'light' | 'dark' | undefined;
+
+function parseDurationMs(value: string): number | undefined {
+  const m = /^\s*(\d*\.?\d+)(ms|s)\s*$/.exec(value);
+  if (!m) return undefined;
+  return Number(m[1]) * (m[2] === 's' ? 1000 : 1);
+}
+
+function schemeDurationMs(): number {
+  const style = getComputedStyle(rootEl ?? document.documentElement);
+  return (
+    parseDurationMs(style.getPropertyValue('--smrt-duration-scheme')) ??
+    parseDurationMs(style.getPropertyValue('--smrt-duration-medium1')) ??
+    FALLBACK_SCHEME_MS
+  );
+}
+
+$effect(() => {
+  const scheme = resolvedScheme;
+  if (!mounted || typeof document === 'undefined') return;
+  const previous = lastScheme;
+  lastScheme = scheme;
+  if (previous === undefined || previous === scheme) return;
+  if (window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches) return;
+  const ms = untrack(schemeDurationMs);
+  isChangingScheme = true;
+  if (schemeTimer) clearTimeout(schemeTimer);
+  schemeTimer = setTimeout(() => {
+    isChangingScheme = false;
+    schemeTimer = undefined;
+  }, ms);
+});
+
+$effect(() => {
+  if (typeof document === 'undefined' || !mounted) return;
+  document.documentElement.toggleAttribute(
+    'data-smrt-theme-changing',
+    isChangingScheme,
+  );
+});
+
 // Sync props to state — but only on actual prop changes. config is seeded
 // from the initial props above and onMount applies persisted preferences, so
 // re-asserting the initial prop values here would clobber the persisted
@@ -288,6 +428,9 @@ let prevPreset = untrack(() => preset);
 let prevColorScheme = untrack(() => colorScheme);
 let prevPrimaryColor = untrack(() => primaryColor);
 let prevBorderRadius = untrack(() => borderRadius);
+let prevDensity = untrack(() => density);
+let prevContrast = untrack(() => contrast);
+let rootEl = $state<HTMLElement | undefined>();
 
 $effect(() => {
   if (preset !== prevPreset) {
@@ -327,6 +470,24 @@ $effect(() => {
   }
 });
 
+$effect(() => {
+  if (density !== prevDensity) {
+    prevDensity = density;
+    untrack(() => {
+      config.density = density;
+    });
+  }
+});
+
+$effect(() => {
+  if (contrast !== prevContrast) {
+    prevContrast = contrast;
+    untrack(() => {
+      config.contrast = contrast;
+    });
+  }
+});
+
 // Sync overrides prop to state
 $effect(() => {
   config.overrides = overrides;
@@ -341,7 +502,13 @@ $effect(() => {
 });
 </script>
 
+<svelte:head>
+  <!-- Declares the smrt cascade layer order before any layered component rule (#3823). -->
+  <svelte:element this={'style'} id="smrt-cascade-layers">{SMRT_CASCADE_LAYERS_CSS}</svelte:element>
+</svelte:head>
+
 <div
+  bind:this={rootEl}
   class="smrt-theme-root"
   class:dark={isDark}
   class:no-paint={!paintSurface}
@@ -349,11 +516,18 @@ $effect(() => {
   style={styleString || undefined}
   data-theme={config.preset}
   data-color-scheme={resolvedScheme}
+  data-contrast={resolvedContrast}
+  data-forced-colors={resolvedContrast === 'forced' ? '' : undefined}
+  data-density={config.density}
+  data-smrt-theme-changing={isChangingScheme ? '' : undefined}
+  data-smrt-component="ThemeProvider"
 >
   {@render children()}
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-theme-root {
     /* Ensure theme variables cascade properly */
     /* Note: Using block display instead of contents so styles apply correctly */
@@ -369,12 +543,6 @@ $effect(() => {
     font-family: inherit;
   }
 
-  /* Glass theme specific base styles */
-  :global(.smrt-theme-glass) {
-    --smrt-glass-surface: var(--smrt-color-surface);
-    --smrt-glass-border: var(--smrt-color-outline);
-  }
-
   /* HappyVertical ("Day Shift") focus indicator (#2318).
    * The brand focus ring is part of the preset, so it has to travel on BOTH
    * delivery paths: this mirrors the identical rule in
@@ -385,4 +553,5 @@ $effect(() => {
     outline: 2px solid var(--smrt-color-primary);
     outline-offset: 2px;
   }
+}
 </style>

package/dist/themes/ThemeProvider.svelte.d.ts

@@ -1,8 +1,13 @@
 import type { Snippet } from 'svelte';
-import type { ColorScheme, ThemeConfig, ThemePreset } from './types.js';
+import type { ColorScheme, ContrastPreference, ThemeConfig, ThemePreset } from './types.js';
 interface Props {
     /** Default control target density for descendants; individual controls may override. */
-    density?: 'comfortable' | 'touch';
+    density?: ThemeConfig['density'];
+    /**
+     * Contrast preference. `auto` (default) follows `prefers-contrast: more`;
+     * `forced-colors: active` always wins. Persisted when set explicitly.
+     */
+    contrast?: ContrastPreference;
     /** Theme preset to use */
     preset?: ThemePreset;
     /** Color scheme preference */

package/dist/themes/ThemeProvider.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.svelte.d.ts","sourceRoot":"","sources":["../../src/themes/ThemeProvider.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKtC,OAAO,KAAK,EACV,WAAW,EAEX,WAAW,EACX,WAAW,EAEZ,MAAM,YAAY,CAAC;AAIpB,UAAU,KAAK;IACb,wFAAwF;IACxF,OAAO,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC;IAClC,0BAA0B;IAC1B,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,8BAA8B;IAC9B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,oCAAoC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+BAA+B;IAC/B,YAAY,CAAC,EAAE,WAAW,CAAC,cAAc,CAAC,CAAC;IAC3C,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kCAAkC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;;;OAQG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc;IACd,QAAQ,EAAE,OAAO,CAAC;CACnB;AAsTD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ThemeProvider.svelte.d.ts","sourceRoot":"","sources":["../../src/themes/ThemeProvider.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAOtC,OAAO,KAAK,EACV,WAAW,EACX,kBAAkB,EAGlB,WAAW,EACX,WAAW,EAEZ,MAAM,YAAY,CAAC;AAIpB,UAAU,KAAK;IACb,wFAAwF;IACxF,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,0BAA0B;IAC1B,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,8BAA8B;IAC9B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,oCAAoC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+BAA+B;IAC/B,YAAY,CAAC,EAAE,WAAW,CAAC,cAAc,CAAC,CAAC;IAC3C,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kCAAkC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;;;OAQG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc;IACd,QAAQ,EAAE,OAAO,CAAC;CACnB;AAqdD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/themes/components/ColorSchemeToggle.svelte

@@ -44,7 +44,7 @@ const labels = {
 };
 </script>
 
-<div class="smrt-color-scheme-toggle {variant} {className}">
+<div class="smrt-color-scheme-toggle {variant} {className}" data-smrt-component="ColorSchemeToggle">
   {#if variant === 'switch'}
     <button
       class="smrt-color-scheme-toggle__switch"
@@ -110,6 +110,8 @@ const labels = {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-color-scheme-toggle {
     display: inline-flex;
     align-items: center;
@@ -120,9 +122,9 @@ const labels = {
     align-items: center;
     gap: var(--smrt-spacing-2, 0.5rem);
     padding: var(--smrt-spacing-2, 0.5rem) var(--smrt-spacing-3, 0.75rem);
-    border: 1px solid var(--smrt-color-outline, #ccc);
-    border-radius: var(--smrt-radius-full, 9999px);
-    background: var(--smrt-color-surface-container-low, #f5f5f5);
+    border: 1px solid var(--smrt-color-outline);
+    border-radius: var(--smrt-radius-full);
+    background: var(--smrt-color-surface-container-low);
     color: var(--smrt-color-on-surface, inherit);
     font-size: var(--smrt-typography-body-medium-size, 0.875rem);
     cursor: pointer;
@@ -130,7 +132,7 @@ const labels = {
   }
 
   .smrt-color-scheme-toggle__switch:hover {
-    background: var(--smrt-color-surface-container, #eee);
+    background: var(--smrt-color-surface-container);
   }
 
   .smrt-color-scheme-toggle__buttons {
@@ -143,9 +145,9 @@ const labels = {
     align-items: center;
     gap: var(--smrt-spacing-1, 0.25rem);
     padding: var(--smrt-spacing-1_5, 0.375rem) var(--smrt-spacing-3, 0.75rem);
-    border: 1px solid var(--smrt-color-outline, #ccc);
+    border: 1px solid var(--smrt-color-outline);
     border-radius: var(--smrt-radius-md, 0.5rem);
-    background: var(--smrt-color-surface-container-low, #f5f5f5);
+    background: var(--smrt-color-surface-container-low);
     color: var(--smrt-color-on-surface, inherit);
     font-size: var(--smrt-typography-body-medium-size, 0.875rem);
     cursor: pointer;
@@ -153,19 +155,19 @@ const labels = {
   }
 
   .smrt-color-scheme-toggle__button:hover {
-    background: var(--smrt-color-surface-container, #eee);
+    background: var(--smrt-color-surface-container);
   }
 
   .smrt-color-scheme-toggle__button.active {
-    background: var(--smrt-color-primary-container, #e3f2fd);
-    color: var(--smrt-color-on-primary-container, #1565c0);
-    border-color: var(--smrt-color-primary, #2196f3);
+    background: var(--smrt-color-primary-container);
+    color: var(--smrt-color-on-primary-container);
+    border-color: var(--smrt-color-primary);
   }
 
   .smrt-color-scheme-toggle__segmented {
     display: inline-flex;
-    background: var(--smrt-color-surface-container-lowest, #fafafa);
-    border: 1px solid var(--smrt-color-outline, #ccc);
+    background: var(--smrt-color-surface-container-lowest);
+    border: 1px solid var(--smrt-color-outline);
     border-radius: var(--smrt-radius-lg, 0.75rem);
     padding: var(--smrt-spacing-0_5, 0.125rem);
   }
@@ -178,7 +180,7 @@ const labels = {
     border: none;
     border-radius: var(--smrt-radius-md, 0.5rem);
     background: transparent;
-    color: var(--smrt-color-on-surface-variant, #666);
+    color: var(--smrt-color-on-surface-variant);
     font-size: var(--smrt-typography-body-medium-size, 0.875rem);
     cursor: pointer;
     transition: all 200ms ease;
@@ -202,4 +204,5 @@ const labels = {
   .smrt-color-scheme-toggle__label {
     font-size: inherit;
   }
+}
 </style>

package/dist/themes/components/ThemeSwitcher.svelte

@@ -43,7 +43,7 @@ const themeIcons: Record<ThemePreset, string> = {
 };
 </script>
 
-<div class="smrt-theme-switcher {variant} {className}">
+<div class="smrt-theme-switcher {variant} {className}" data-smrt-component="ThemeSwitcher">
   {#if label}
     <span class="smrt-theme-switcher__label">{label}</span>
   {/if}
@@ -101,6 +101,8 @@ const themeIcons: Record<ThemePreset, string> = {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-theme-switcher {
     display: flex;
     align-items: center;
@@ -116,7 +118,7 @@ const themeIcons: Record<ThemePreset, string> = {
   .smrt-theme-switcher__select {
     padding: var(--smrt-spacing-1_5, 0.375rem) var(--smrt-spacing-3, 0.75rem);
     border-radius: var(--smrt-radius-md, 0.5rem);
-    border: 1px solid var(--smrt-color-outline, #ccc);
+    border: 1px solid var(--smrt-color-outline);
     background: var(--smrt-color-surface, white);
     color: var(--smrt-color-on-surface, inherit);
     font-size: var(--smrt-typography-body-medium-size, 0.875rem);
@@ -133,9 +135,9 @@ const themeIcons: Record<ThemePreset, string> = {
     align-items: center;
     gap: var(--smrt-spacing-1, 0.25rem);
     padding: var(--smrt-spacing-1_5, 0.375rem) var(--smrt-spacing-3, 0.75rem);
-    border: 1px solid var(--smrt-color-outline, #ccc);
+    border: 1px solid var(--smrt-color-outline);
     border-radius: var(--smrt-radius-md, 0.5rem);
-    background: var(--smrt-color-surface-container-low, #f5f5f5);
+    background: var(--smrt-color-surface-container-low);
     color: var(--smrt-color-on-surface, inherit);
     font-size: var(--smrt-typography-body-medium-size, 0.875rem);
     cursor: pointer;
@@ -143,19 +145,19 @@ const themeIcons: Record<ThemePreset, string> = {
   }
 
   .smrt-theme-switcher__button:hover {
-    background: var(--smrt-color-surface-container, #eee);
+    background: var(--smrt-color-surface-container);
   }
 
   .smrt-theme-switcher__button.active {
-    background: var(--smrt-color-primary-container, #e3f2fd);
-    color: var(--smrt-color-on-primary-container, #1565c0);
-    border-color: var(--smrt-color-primary, #2196f3);
+    background: var(--smrt-color-primary-container);
+    color: var(--smrt-color-on-primary-container);
+    border-color: var(--smrt-color-primary);
   }
 
   .smrt-theme-switcher__segmented {
     display: inline-flex;
-    background: var(--smrt-color-surface-container-lowest, #fafafa);
-    border: 1px solid var(--smrt-color-outline, #ccc);
+    background: var(--smrt-color-surface-container-lowest);
+    border: 1px solid var(--smrt-color-outline);
     border-radius: var(--smrt-radius-lg, 0.75rem);
     padding: var(--smrt-spacing-0_5, 0.125rem);
   }
@@ -168,7 +170,7 @@ const themeIcons: Record<ThemePreset, string> = {
     border: none;
     border-radius: var(--smrt-radius-md, 0.5rem);
     background: transparent;
-    color: var(--smrt-color-on-surface-variant, #666);
+    color: var(--smrt-color-on-surface-variant);
     font-size: var(--smrt-typography-body-medium-size, 0.875rem);
     cursor: pointer;
     transition: all 200ms ease;
@@ -187,4 +189,5 @@ const themeIcons: Record<ThemePreset, string> = {
   .smrt-theme-switcher__icon {
     font-size: var(--smrt-typography-body-large-size, 1rem);
   }
+}
 </style>

package/dist/themes/create-theme.d.ts

@@ -22,8 +22,18 @@ export interface CreateThemeOptions {
     elevation?: Partial<ElevationScale>;
     /** Custom easing curves (optional) */
     easing?: Partial<EasingScale>;
-    /** Glass effects (optional) */
+    /** Glass effects (optional; defaults to opaque) */
     glass?: GlassEffects;
+    /** Optional overrides for the premium-baseline token families */
+    surfaces?: Theme['surfaces'];
+    hairlines?: Theme['hairlines'];
+    states?: Theme['states'];
+    shadowColor?: Theme['shadowColor'];
+    controls?: Theme['controls'];
+    focus?: Theme['focus'];
+    native?: Theme['native'];
+    schemeDuration?: string;
+    fontFeatureSettings?: string;
     /** Font family */
     fontFamily?: string;
     /** Base theme to extend (copies all tokens as starting point) */
@@ -96,4 +106,15 @@ export declare function isThemeRegistered(id: string): Promise<boolean>;
  * ```
  */
 export declare function createThemeFromColor(primaryColor: string, id: string, name: string, options?: Omit<CreateThemeOptions, 'id' | 'name' | 'light'>): Theme;
+/**
+ * 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 declare function derivePrimaryOverrides(color: string, scheme: 'light' | 'dark'): Record<string, string>;
 //# sourceMappingURL=create-theme.d.ts.map

package/dist/themes/create-theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"create-theme.d.ts","sourceRoot":"","sources":["../../src/themes/create-theme.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAcH,OAAO,KAAK,EACV,YAAY,EACZ,WAAW,EACX,cAAc,EACd,YAAY,EACZ,KAAK,EACL,WAAW,EACX,eAAe,EAChB,MAAM,YAAY,CAAC;AAEpB;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,wCAAwC;IACxC,EAAE,EAAE,MAAM,CAAC;IACX,mBAAmB;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,+BAA+B;IAC/B,KAAK,EAAE,OAAO,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,EAAE,SAAS,GAAG,YAAY,CAAC,CAAC;IAC5E,iFAAiF;IACjF,IAAI,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC7B,wDAAwD;IACxD,UAAU,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;IACtC,mCAAmC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IACpC,sCAAsC;IACtC,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAC9B,+BAA+B;IAC/B,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,kBAAkB;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iEAAiE;IACjE,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAyPD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,kBAAkB,GAAG,KAAK,CAsD9D;AAkBD;;;GAGG;AACH,wBAAsB,oBAAoB,IAAI,OAAO,CAAC,IAAI,CAAC,CAG1D;AAgBD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAEhD;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,MAAM,GAAG,KAAK,GAAG,SAAS,CAIjE;AAED;;;GAGG;AACH,wBAAsB,iBAAiB,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,CAEpE;AAED;;;;;;;;;GASG;AACH,wBAAgB,oBAAoB,CAClC,YAAY,EAAE,MAAM,EACpB,EAAE,EAAE,MAAM,EACV,IAAI,EAAE,MAAM,EACZ,OAAO,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,IAAI,GAAG,MAAM,GAAG,OAAO,CAAC,GAC1D,KAAK,CAWP"}
+{"version":3,"file":"create-theme.d.ts","sourceRoot":"","sources":["../../src/themes/create-theme.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAoBH,OAAO,KAAK,EACV,YAAY,EACZ,WAAW,EACX,cAAc,EACd,YAAY,EACZ,KAAK,EACL,WAAW,EACX,eAAe,EAChB,MAAM,YAAY,CAAC;AAEpB;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,wCAAwC;IACxC,EAAE,EAAE,MAAM,CAAC;IACX,mBAAmB;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,+BAA+B;IAC/B,KAAK,EAAE,OAAO,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,EAAE,SAAS,GAAG,YAAY,CAAC,CAAC;IAC5E,iFAAiF;IACjF,IAAI,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC7B,wDAAwD;IACxD,UAAU,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;IACtC,mCAAmC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IACpC,sCAAsC;IACtC,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAC9B,mDAAmD;IACnD,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IAC7B,SAAS,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;IAC/B,MAAM,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;IACzB,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC;IACnC,QAAQ,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IACvB,MAAM,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,kBAAkB;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iEAAiE;IACjE,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAkRD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,kBAAkB,GAAG,KAAK,CA8E9D;AAkBD;;;GAGG;AACH,wBAAsB,oBAAoB,IAAI,OAAO,CAAC,IAAI,CAAC,CAG1D;AAgBD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAEhD;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,MAAM,GAAG,KAAK,GAAG,SAAS,CAIjE;AAED;;;GAGG;AACH,wBAAsB,iBAAiB,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,CAEpE;AAED;;;;;;;;;GASG;AACH,wBAAgB,oBAAoB,CAClC,YAAY,EAAE,MAAM,EACpB,EAAE,EAAE,MAAM,EACV,IAAI,EAAE,MAAM,EACZ,OAAO,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,IAAI,GAAG,MAAM,GAAG,OAAO,CAAC,GAC1D,KAAK,CAWP;AAID;;;;;;;;;GASG;AACH,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,OAAO,GAAG,MAAM,GACvB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAkCxB"}