@happyvertical/smrt-ui 0.55.17 → 0.55.18

package/dist/themes/happyvertical/index.js

@@ -59,7 +59,8 @@
  * lifting the top of the ramp past the bezel, which drops `on-surface-variant`
  * below AA on those surfaces — the wrong trade.
  */
-import { spacingScale } from '../shared.js';
+import { baselineTokens, opaqueGlass } from '../derive.js';
+import { hairlineInset, noInsetHighlight, noShadow, shadow, spacingScale, } from '../shared.js';
 /** Display family (headings, titles) — falls back when the fonts are absent. */
 const DISPLAY_FONT = '"Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif';
 /** Body/UI family. */
@@ -89,6 +90,11 @@ const lightColors = {
     onTertiary: '#ffffff',
     tertiaryContainer: '#d7e4ea',
     onTertiaryContainer: '#1b333e',
+    // Info - Shares the tertiary hue (no distinct info hue in this preset)
+    info: '#3c5a68',
+    onInfo: '#ffffff',
+    infoContainer: '#d7e4ea',
+    onInfoContainer: '#1b333e',
     // Error - Muted enamel-compatible red
     error: '#9b3b32',
     onError: '#ffffff',
@@ -154,6 +160,11 @@ const darkColors = {
     onTertiary: '#10262e',
     tertiaryContainer: '#1e313a',
     onTertiaryContainer: '#c6dee8',
+    // Info - Shares the tertiary hue (no distinct info hue in this preset)
+    info: '#9cbecc',
+    onInfo: '#10262e',
+    infoContainer: '#1e313a',
+    onInfoContainer: '#c6dee8',
     // Error
     error: '#e89b92',
     onError: '#3b120d',
@@ -313,31 +324,49 @@ const typography = {
 /**
  * Day Shift elevation (light) — flat with hairline bezels.
  *
- * Level 1 is the hairline itself; levels 2+ add the minimum soft shadow that
- * still separates an overlay from the panel underneath. Closer to studio than
- * to material — a raised faceplate, not a floating card.
+ * Level 1 is the bezel hairline itself; levels 2+ add the minimum two-layer
+ * shadow that still separates an overlay from the panel underneath. Closer to
+ * studio than to material — a raised faceplate, not a floating card.
  */
 const elevation = {
-    0: 'none',
-    1: 'inset 0 0 0 1px rgba(32, 39, 43, 0.1)',
-    2: '0 1px 2px 0 rgba(32, 39, 43, 0.06)',
-    3: '0 2px 6px -2px rgba(32, 39, 43, 0.1)',
-    4: '0 6px 16px -6px rgba(32, 39, 43, 0.14)',
-    5: '0 12px 28px -12px rgba(32, 39, 43, 0.18)',
+    0: noShadow,
+    1: hairlineInset,
+    2: shadow([[1, 2, 0, 8]]),
+    3: shadow([
+        [1, 2, 0, 8],
+        [2, 6, -2, 8],
+    ]),
+    4: shadow([
+        [1, 3, 0, 10],
+        [6, 16, -6, 12],
+    ]),
+    5: shadow([
+        [2, 4, 0, 10],
+        [12, 28, -12, 16],
+    ]),
 };
 /**
- * Day Shift elevation (dark) — a white inset hairline over black drop shadows.
- *
- * Defined here (not only in `styles/happyvertical.css`) so the JS ThemeProvider
- * output and the static dark CSS stay in lockstep (#1586).
+ * Day Shift elevation (dark) — the bezel hairline at level 1; above it the
+ * inset top highlight over black two-layer shadows. Defined here (not only in
+ * `styles/happyvertical.css`) so the JS ThemeProvider output and the static dark
+ * CSS stay in lockstep (#1586).
  */
 const darkElevation = {
-    0: 'none',
-    1: 'inset 0 0 0 1px rgba(228, 233, 231, 0.08)',
-    2: '0 1px 2px 0 rgba(0, 0, 0, 0.4)',
-    3: '0 2px 6px -2px rgba(0, 0, 0, 0.5)',
-    4: '0 6px 16px -6px rgba(0, 0, 0, 0.6)',
-    5: '0 12px 28px -12px rgba(0, 0, 0, 0.7)',
+    0: noShadow,
+    1: hairlineInset,
+    2: shadow([[1, 2, 0, 40]], 'var(--smrt-inset-highlight)'),
+    3: shadow([
+        [1, 2, 0, 40],
+        [2, 6, -2, 36],
+    ], 'var(--smrt-inset-highlight)'),
+    4: shadow([
+        [1, 3, 0, 44],
+        [6, 16, -6, 44],
+    ], 'var(--smrt-inset-highlight)'),
+    5: shadow([
+        [2, 4, 0, 46],
+        [12, 28, -12, 52],
+    ], 'var(--smrt-inset-highlight)'),
 };
 /**
  * Day Shift radii — the mock's restrained geometry: 6px controls, 8px panels.
@@ -396,6 +425,58 @@ export const happyverticalTheme = {
     borderRadius,
     duration,
     easing: calmEasing,
+    glass: { ...opaqueGlass },
+    ...baselineTokens(lightColors, darkColors),
+    // Day Shift roles: enamel ground, faceplate panels, bezel hairlines. The
+    // strong edge is the a11y `outline` (3:1), never the decorative bezel.
+    surfaces: {
+        light: {
+            ground: lightColors.background, // enamel
+            panel: lightColors.surface, // faceplate
+            control: lightColors.surfaceContainerLowest,
+            raised: lightColors.surface, // faceplate; the bezel hairline lifts it
+            sunken: lightColors.surfaceDim,
+            overlay: lightColors.scrim,
+        },
+        dark: {
+            ground: darkColors.background,
+            panel: darkColors.surface,
+            control: darkColors.surfaceContainerHigh,
+            raised: darkColors.surface,
+            sunken: darkColors.surfaceContainerLowest,
+            overlay: darkColors.scrim,
+        },
+    },
+    hairlines: {
+        light: {
+            color: 'var(--smrt-color-outline-variant)', // bezel
+            strongColor: 'var(--smrt-color-outline)',
+            insetHighlight: noInsetHighlight,
+        },
+        dark: {
+            color: 'var(--smrt-color-outline-variant)',
+            strongColor: 'var(--smrt-color-outline)',
+            insetHighlight: 'inset 0 1px 0 rgb(255 255 255 / 0.04)',
+        },
+    },
+    shadowColor: { light: 'rgb(32 39 43)', dark: 'rgb(0 0 0)' },
+    // Minimal state layers: calm is less to process.
+    states: {
+        hover: '0.06',
+        pressed: '0.10',
+        selected: '0.10',
+        focus: '0.10',
+        dragged: '0.12',
+        disabled: '0.38',
+    },
+    // The mock's 6px controls (radius md); small controls take the 4px step.
+    controls: {
+        radius: 'var(--smrt-radius-md)',
+        radiusSmall: 'var(--smrt-radius-sm)',
+        height: '2.5rem',
+        heightSmall: '2rem',
+        weight: '500',
+    },
     fontFamily: BODY_FONT,
     fontFamilyMono: MONO_FONT,
 };

package/dist/themes/index.d.ts

@@ -19,12 +19,12 @@
 export { ColorSchemeToggle, ThemeSwitcher } from './components/index.js';
 export { getThemeContext, hasThemeContext, setThemeContext, tryGetThemeContext, } from './context.svelte.js';
 export type { CreateThemeOptions } from './create-theme.js';
-export { createTheme, createThemeFromColor, getRegisteredTheme, isThemeRegistered, preloadThemeRegistry, registerTheme, } from './create-theme.js';
+export { createTheme, createThemeFromColor, derivePrimaryOverrides, getRegisteredTheme, isThemeRegistered, preloadThemeRegistry, registerTheme, } from './create-theme.js';
 export { generateAllThemesCSS, generateThemeCSS, generateThemeVariables, variablesToStyleString, } from './css-generator.js';
 export { availablePresets, getAllThemes, getTheme, getThemeName, getThemeOptions, glassTheme, happyverticalTheme, isValidPreset, materialTheme, smrtTheme, studioTheme, type ThemePresetSummary, themePresets, themes, } from './presets.js';
 export { appleEasing, borderRadiusScale, durationScale, materialEasing, spacingScale, studioEasing, } from './shared.js';
 export { default as ThemeProvider } from './ThemeProvider.svelte';
 export { type ThemeScriptOptions, themeScript } from './theme-script.js';
-export type { BorderRadius, BorderRadiusScale, ColorPalette, ColorScheme, CSSVariableOptions, DurationScale, EasingScale, ElevationScale, GlassEffects, ResolvedScheme, SpacingScale, Theme, ThemeConfig, ThemeContext, ThemePreset, ThemeState, TypographyScale, TypographyToken, } from './types.js';
+export type { BorderRadius, BorderRadiusScale, ColorPalette, ColorScheme, ContrastPreference, CSSVariableOptions, DurationScale, EasingScale, ElevationScale, GlassEffects, ResolvedContrast, ResolvedScheme, SpacingScale, Theme, ThemeConfig, ThemeContext, ThemeDensity, ThemePreset, ThemeState, TypographyScale, TypographyToken, } from './types.js';
 export { defaultThemeConfig } from './types.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/themes/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAGH,OAAO,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEzE,OAAO,EACL,eAAe,EACf,eAAe,EACf,eAAe,EACf,kBAAkB,GACnB,MAAM,qBAAqB,CAAC;AAC7B,YAAY,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EACL,WAAW,EACX,oBAAoB,EACpB,kBAAkB,EAClB,iBAAiB,EACjB,oBAAoB,EACpB,aAAa,GACd,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EACL,oBAAoB,EACpB,gBAAgB,EAChB,sBAAsB,EACtB,sBAAsB,GACvB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EACL,gBAAgB,EAChB,YAAY,EACZ,QAAQ,EACR,YAAY,EACZ,eAAe,EACf,UAAU,EACV,kBAAkB,EAClB,aAAa,EACb,aAAa,EACb,SAAS,EACT,WAAW,EACX,KAAK,kBAAkB,EACvB,YAAY,EACZ,MAAM,GACP,MAAM,cAAc,CAAC;AAEtB,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,aAAa,EACb,cAAc,EACd,YAAY,EACZ,YAAY,GACb,MAAM,aAAa,CAAC;AAErB,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAElE,OAAO,EAAE,KAAK,kBAAkB,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEzE,YAAY,EACV,YAAY,EACZ,iBAAiB,EACjB,YAAY,EACZ,WAAW,EACX,kBAAkB,EAClB,aAAa,EACb,WAAW,EACX,cAAc,EACd,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,KAAK,EACL,WAAW,EACX,YAAY,EACZ,WAAW,EACX,UAAU,EACV,eAAe,EACf,eAAe,GAChB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/themes/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAGH,OAAO,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEzE,OAAO,EACL,eAAe,EACf,eAAe,EACf,eAAe,EACf,kBAAkB,GACnB,MAAM,qBAAqB,CAAC;AAC7B,YAAY,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EACL,WAAW,EACX,oBAAoB,EACpB,sBAAsB,EACtB,kBAAkB,EAClB,iBAAiB,EACjB,oBAAoB,EACpB,aAAa,GACd,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EACL,oBAAoB,EACpB,gBAAgB,EAChB,sBAAsB,EACtB,sBAAsB,GACvB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EACL,gBAAgB,EAChB,YAAY,EACZ,QAAQ,EACR,YAAY,EACZ,eAAe,EACf,UAAU,EACV,kBAAkB,EAClB,aAAa,EACb,aAAa,EACb,SAAS,EACT,WAAW,EACX,KAAK,kBAAkB,EACvB,YAAY,EACZ,MAAM,GACP,MAAM,cAAc,CAAC;AAEtB,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,aAAa,EACb,cAAc,EACd,YAAY,EACZ,YAAY,GACb,MAAM,aAAa,CAAC;AAErB,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAElE,OAAO,EAAE,KAAK,kBAAkB,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEzE,YAAY,EACV,YAAY,EACZ,iBAAiB,EACjB,YAAY,EACZ,WAAW,EACX,kBAAkB,EAClB,kBAAkB,EAClB,aAAa,EACb,WAAW,EACX,cAAc,EACd,YAAY,EACZ,gBAAgB,EAChB,cAAc,EACd,YAAY,EACZ,KAAK,EACL,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,UAAU,EACV,eAAe,EACf,eAAe,GAChB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC"}

package/dist/themes/index.js

@@ -21,7 +21,7 @@ export { ColorSchemeToggle, ThemeSwitcher } from './components/index.js';
 // Context
 export { getThemeContext, hasThemeContext, setThemeContext, tryGetThemeContext, } from './context.svelte.js';
 // Custom theme creation
-export { createTheme, createThemeFromColor, getRegisteredTheme, isThemeRegistered, preloadThemeRegistry, registerTheme, } from './create-theme.js';
+export { createTheme, createThemeFromColor, derivePrimaryOverrides, getRegisteredTheme, isThemeRegistered, preloadThemeRegistry, registerTheme, } from './create-theme.js';
 // CSS generation
 export { generateAllThemesCSS, generateThemeCSS, generateThemeVariables, variablesToStyleString, } from './css-generator.js';
 // Preset data and registry (single source: ./presets.ts, Node-safe)

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/themes/material/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAQH,OAAO,KAAK,EAGV,KAAK,EAEN,MAAM,aAAa,CAAC;AA+QrB;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,KAY3B,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/themes/material/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAcH,OAAO,KAAK,EAGV,KAAK,EAEN,MAAM,aAAa,CAAC;AAoVrB;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,KA0D3B,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/themes/material/index.js

@@ -4,7 +4,8 @@
  * Improved Material Design 3 theme with modern Google product aesthetics.
  * Features refined colors, updated typography, and polished elevation.
  */
-import { borderRadiusScale, durationScale, materialEasing, spacingScale, } from '../shared.js';
+import { baselineTokens, opaqueGlass } from '../derive.js';
+import { borderRadiusScale, darkInsetHighlight, durationScale, hairlineMix, materialEasing, noInsetHighlight, noShadow, shadow, spacingScale, } from '../shared.js';
 /**
  * Material light color palette
  * Refined M3 colors with slightly more vibrant accents
@@ -25,6 +26,11 @@ const lightColors = {
     onTertiary: '#ffffff',
     tertiaryContainer: '#e8ddff',
     onTertiaryContainer: '#1e005f',
+    // Info - Shares the tertiary hue (no distinct info hue in this preset)
+    info: '#7c4dff',
+    onInfo: '#ffffff',
+    infoContainer: '#e8ddff',
+    onInfoContainer: '#1e005f',
     // Error - Google red
     error: '#b3261e',
     onError: '#ffffff',
@@ -53,7 +59,7 @@ const lightColors = {
     surfaceDim: '#dadce0',
     surfaceBright: '#f8f9fa',
     // Background
-    background: '#ffffff',
+    background: '#f6f8fc',
     onBackground: '#1f1f1f',
     // Outline
     outline: '#747775',
@@ -68,7 +74,7 @@ const lightColors = {
 };
 /**
  * Material dark color palette
- * True dark mode with OLED-friendly blacks
+ * M3 tonal dark mode: a #121316 ground with stepped container tiers
  */
 const darkColors = {
     // Primary - Lighter blue for dark mode
@@ -86,6 +92,11 @@ const darkColors = {
     onTertiary: '#3e1e96',
     tertiaryContainer: '#5e3fc0',
     onTertiaryContainer: '#e8ddff',
+    // Info - Shares the tertiary hue (no distinct info hue in this preset)
+    info: '#cbb7ff',
+    onInfo: '#3e1e96',
+    infoContainer: '#5e3fc0',
+    onInfoContainer: '#e8ddff',
     // Error
     error: '#f2b8b5',
     onError: '#601410',
@@ -101,20 +112,21 @@ const darkColors = {
     onSuccess: '#0d522d',
     successContainer: '#1e4620',
     onSuccessContainer: '#e6f4ea',
-    // Surface - True dark OLED black base
-    surface: '#0e0e0e',
+    // Surface - M3 tonal ladder (ground < panel < control < raised), each tier a
+    // visible step so depth reads from lightness and needs no borders
+    surface: '#1b1c20',
     onSurface: '#e3e3e3',
-    surfaceVariant: '#1f1f1f',
+    surfaceVariant: '#26282c',
     onSurfaceVariant: '#c4c7c5',
-    surfaceContainer: '#1f1f1f',
-    surfaceContainerLow: '#141414',
-    surfaceContainerHigh: '#2d2d2d',
-    surfaceContainerHighest: '#363636',
-    surfaceContainerLowest: '#0a0a0a',
-    surfaceDim: '#141414',
-    surfaceBright: '#2d2d2d',
+    surfaceContainer: '#1f2024',
+    surfaceContainerLow: '#17181c',
+    surfaceContainerHigh: '#26282c',
+    surfaceContainerHighest: '#34363a',
+    surfaceContainerLowest: '#0d0e11',
+    surfaceDim: '#121316',
+    surfaceBright: '#393b3f',
     // Background
-    background: '#0e0e0e',
+    background: '#121316',
     onBackground: '#e3e3e3',
     // Outline
     outline: '#8e918f',
@@ -143,28 +155,28 @@ const typography = {
         size: '2.75rem',
         lineHeight: '1.15',
         weight: '400',
-        tracking: '-0.01em',
+        tracking: '-0.015em',
         fontFamily: 'var(--smrt-font-family)',
     },
     displaySmall: {
         size: '2.25rem',
         lineHeight: '1.2',
         weight: '400',
-        tracking: '0',
+        tracking: '-0.01em',
         fontFamily: 'var(--smrt-font-family)',
     },
     headlineLarge: {
         size: '2rem',
         lineHeight: '1.25',
         weight: '400',
-        tracking: '0',
+        tracking: '-0.01em',
         fontFamily: 'var(--smrt-font-family)',
     },
     headlineMedium: {
         size: '1.75rem',
         lineHeight: '1.3',
         weight: '400',
-        tracking: '0',
+        tracking: '-0.005em',
         fontFamily: 'var(--smrt-font-family)',
     },
     headlineSmall: {
@@ -227,28 +239,71 @@ const typography = {
         size: '0.75rem',
         lineHeight: '1.4',
         weight: '500',
-        tracking: '0.05em',
+        tracking: '0.02em',
         fontFamily: 'var(--smrt-font-family)',
     },
     labelSmall: {
         size: '0.6875rem',
         lineHeight: '1.4',
         weight: '500',
-        tracking: '0.05em',
+        tracking: '0.03em',
         fontFamily: 'var(--smrt-font-family)',
     },
 };
 /**
- * Material elevation shadows
- * More refined shadows with better diffusion
+ * Material elevation (light) — two layers per level: a contact shadow plus an
+ * ambient shadow with negative spread, tinted by `--smrt-shadow-color`.
  */
 const elevation = {
-    0: 'none',
-    1: '0 1px 2px 0 rgb(0 0 0 / 0.05), 0 1px 3px 0 rgb(0 0 0 / 0.02)',
-    2: '0 1px 2px 0 rgb(0 0 0 / 0.06), 0 2px 4px 0 rgb(0 0 0 / 0.04)',
-    3: '0 2px 4px 0 rgb(0 0 0 / 0.06), 0 4px 8px 0 rgb(0 0 0 / 0.04)',
-    4: '0 4px 8px 0 rgb(0 0 0 / 0.08), 0 8px 16px 0 rgb(0 0 0 / 0.04)',
-    5: '0 8px 16px 0 rgb(0 0 0 / 0.1), 0 16px 32px 0 rgb(0 0 0 / 0.04)',
+    0: noShadow,
+    1: shadow([
+        [1, 2, 0, 8],
+        [2, 4, -1, 6],
+    ]),
+    2: shadow([
+        [1, 2, 0, 10],
+        [4, 8, -2, 10],
+    ]),
+    3: shadow([
+        [1, 3, 0, 12],
+        [8, 16, -4, 12],
+    ]),
+    4: shadow([
+        [2, 4, 0, 12],
+        [12, 24, -6, 14],
+    ]),
+    5: shadow([
+        [2, 6, 0, 14],
+        [20, 40, -10, 18],
+    ]),
+};
+/**
+ * Material elevation (dark) — altitude is carried by the tonal ladder, so the
+ * shadows are tighter and lower in reach and every level adds the inset top
+ * highlight.
+ */
+const darkElevation = {
+    0: noShadow,
+    1: shadow([
+        [1, 2, 0, 24],
+        [1, 3, -1, 16],
+    ]),
+    2: shadow([
+        [1, 2, 0, 28],
+        [3, 6, -2, 20],
+    ], 'var(--smrt-inset-highlight)'),
+    3: shadow([
+        [1, 3, 0, 30],
+        [6, 12, -3, 24],
+    ], 'var(--smrt-inset-highlight)'),
+    4: shadow([
+        [2, 4, 0, 32],
+        [10, 20, -5, 28],
+    ], 'var(--smrt-inset-highlight)'),
+    5: shadow([
+        [2, 6, 0, 34],
+        [16, 32, -8, 32],
+    ], 'var(--smrt-inset-highlight)'),
 };
 /**
  * Material theme definition
@@ -260,10 +315,56 @@ export const materialTheme = {
     dark: darkColors,
     typography,
     elevation,
+    darkElevation,
     spacing: spacingScale,
     borderRadius: borderRadiusScale,
     duration: durationScale,
     easing: materialEasing,
+    glass: { ...opaqueGlass },
+    ...baselineTokens(lightColors, darkColors),
+    shadowColor: { light: 'rgb(0 0 0)', dark: 'rgb(0 0 0)' },
+    // Tonal ladder: ground < panel < control < raised in dark. Light recesses the
+    // filled control into the white panel (M3 filled field) and lifts overlays.
+    surfaces: {
+        light: {
+            ground: lightColors.background,
+            panel: lightColors.surface,
+            control: lightColors.surfaceContainerHigh,
+            raised: lightColors.surfaceContainerLowest,
+            sunken: '#eef1f6',
+            overlay: lightColors.scrim,
+        },
+        dark: {
+            ground: darkColors.background,
+            panel: darkColors.surface,
+            control: darkColors.surfaceContainerHigh,
+            raised: darkColors.surfaceContainerHighest,
+            sunken: darkColors.surfaceContainerLowest,
+            overlay: darkColors.scrim,
+        },
+    },
+    hairlines: {
+        light: hairlineMix(10, 30, noInsetHighlight),
+        dark: hairlineMix(10, 30, darkInsetHighlight(0.05)),
+    },
+    // M3 state layers.
+    states: {
+        hover: '0.08',
+        pressed: '0.12',
+        selected: '0.12',
+        focus: '0.12',
+        dragged: '0.16',
+        disabled: '0.38',
+    },
+    // Filled controls separate by tier, not by an edge.
+    controls: {
+        radius: 'var(--smrt-radius-md)',
+        radiusSmall: 'var(--smrt-radius-sm)',
+        height: '2.75rem',
+        heightSmall: '2.25rem',
+        weight: '500',
+        border: '1px solid transparent',
+    },
     fontFamily: '"Google Sans", "Roboto", system-ui, -apple-system, sans-serif',
 };
 export default materialTheme;

package/dist/themes/required-tokens.generated.json

@@ -41,6 +41,10 @@
     "--smrt-color-tertiary-container",
     "--smrt-color-warning",
     "--smrt-color-warning-container",
+    "--smrt-control-height",
+    "--smrt-control-height-small",
+    "--smrt-control-radius",
+    "--smrt-control-radius-small",
     "--smrt-duration-fast",
     "--smrt-duration-medium1",
     "--smrt-duration-normal",
@@ -55,8 +59,20 @@
     "--smrt-elevation-3",
     "--smrt-elevation-4",
     "--smrt-elevation-5",
+    "--smrt-focus-ring-color",
+    "--smrt-focus-ring-offset",
+    "--smrt-focus-ring-width",
     "--smrt-font-family",
     "--smrt-font-family-mono",
+    "--smrt-glass-blur",
+    "--smrt-glass-saturation",
+    "--smrt-glass-surface",
+    "--smrt-glass-surface-strong",
+    "--smrt-hairline",
+    "--smrt-hairline-color",
+    "--smrt-hairline-strong",
+    "--smrt-hairline-strong-color",
+    "--smrt-inset-highlight",
     "--smrt-radius-2xl",
     "--smrt-radius-extra-large",
     "--smrt-radius-extra-small",
@@ -68,6 +84,8 @@
     "--smrt-radius-sm",
     "--smrt-radius-small",
     "--smrt-radius-xl",
+    "--smrt-scrollbar-thumb",
+    "--smrt-scrollbar-track",
     "--smrt-spacing-0_5",
     "--smrt-spacing-1",
     "--smrt-spacing-10",
@@ -87,6 +105,17 @@
     "--smrt-spacing-sm",
     "--smrt-spacing-xl",
     "--smrt-spacing-xs",
+    "--smrt-state-disabled",
+    "--smrt-state-dragged",
+    "--smrt-state-hover",
+    "--smrt-state-pressed",
+    "--smrt-state-selected",
+    "--smrt-surface-control",
+    "--smrt-surface-ground",
+    "--smrt-surface-overlay",
+    "--smrt-surface-panel",
+    "--smrt-surface-raised",
+    "--smrt-surface-sunken",
     "--smrt-touch-target-min",
     "--smrt-typography-body-large-font",
     "--smrt-typography-body-large-line-height",

package/dist/themes/shared.d.ts

@@ -75,4 +75,39 @@ export declare const appleEasing: EasingScale;
  * Studio-style easings (for Studio theme - snappier)
  */
 export declare const studioEasing: EasingScale;
+/**
+ * One shadow layer: `[offset-y, blur, spread, alpha%]`, tinted by the scheme's
+ * `--smrt-shadow-color` (the theme's own token, so the tint follows the preset).
+ */
+export type ShadowLayer = readonly [
+    y: number,
+    blur: number,
+    spread: number,
+    alphaPercent: number
+];
+/**
+ * Compose a box-shadow from layers. Elevation levels are two-layer: a contact
+ * shadow (`0 1px 2px`) that anchors the edge, and an ambient shadow (`0 Npx Mpx`
+ * with negative spread) that lifts it. `prefix` lists extra leading layers, e.g.
+ * `var(--smrt-inset-highlight)` on dark schemes.
+ */
+export declare function shadow(layers: readonly ShadowLayer[], prefix?: string): string;
+/** Quiet hairline inset used as elevation 1 by the flat presets. */
+export declare const hairlineInset = "inset 0 0 0 1px var(--smrt-hairline-color)";
+/** Text-colour mixes used for hairlines: quiet edge and strong control edge. */
+export declare function hairlineMix(quietPercent: number, strongPercent: number, insetHighlight: string): {
+    color: string;
+    strongColor: string;
+    insetHighlight: string;
+};
+/**
+ * Neutral values that are still valid box-shadow layers. Components combine
+ * `var(--smrt-inset-highlight)` with an elevation (`box-shadow: a, b`); the
+ * keyword `none` is invalid inside a list and drops the whole declaration, so
+ * the "no highlight" and "no elevation" values are transparent shadows.
+ */
+export declare const noInsetHighlight = "inset 0 1px 0 transparent";
+export declare const noShadow = "0 0 0 0 transparent";
+/** Top inner light line for dark surfaces (`--smrt-inset-highlight`). */
+export declare const darkInsetHighlight: (alpha: number) => string;
 //# sourceMappingURL=shared.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../src/themes/shared.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EACV,iBAAiB,EACjB,aAAa,EACb,WAAW,EACX,YAAY,EACb,MAAM,YAAY,CAAC;AAEpB;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,YAsB1B,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,YAAY,CAQ7D,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,iBAS/B,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,iBAAiB,CAMvE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,aAM3B,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAalD,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAEpD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAKnD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAW/C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,WAO5B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,WAOzB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,WAO1B,CAAC"}
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../src/themes/shared.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EACV,iBAAiB,EACjB,aAAa,EACb,WAAW,EACX,YAAY,EACb,MAAM,YAAY,CAAC;AAEpB;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,YAsB1B,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,YAAY,CAQ7D,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,iBAS/B,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,iBAAiB,CAMvE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,aAM3B,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAalD,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAEpD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAKnD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAW/C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,WAO5B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,WAOzB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,WAO1B,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,SAAS;IACjC,CAAC,EAAE,MAAM;IACT,IAAI,EAAE,MAAM;IACZ,MAAM,EAAE,MAAM;IACd,YAAY,EAAE,MAAM;CACrB,CAAC;AAKF;;;;;GAKG;AACH,wBAAgB,MAAM,CACpB,MAAM,EAAE,SAAS,WAAW,EAAE,EAC9B,MAAM,CAAC,EAAE,MAAM,GACd,MAAM,CAMR;AAED,oEAAoE;AACpE,eAAO,MAAM,aAAa,+CAA+C,CAAC;AAE1E,gFAAgF;AAChF,wBAAgB,WAAW,CACzB,YAAY,EAAE,MAAM,EACpB,aAAa,EAAE,MAAM,EACrB,cAAc,EAAE,MAAM,GACrB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAC;IAAC,cAAc,EAAE,MAAM,CAAA;CAAE,CAMhE;AAED;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,8BAA8B,CAAC;AAC5D,eAAO,MAAM,QAAQ,wBAAwB,CAAC;AAE9C,yEAAyE;AACzE,eAAO,MAAM,kBAAkB,GAAI,OAAO,MAAM,KAAG,MACN,CAAC"}

package/dist/themes/shared.js

@@ -177,3 +177,35 @@ export const studioEasing = {
     emphasizedDecelerate: 'cubic-bezier(0.0, 0, 0.2, 1)',
     emphasizedAccelerate: 'cubic-bezier(0.4, 0, 1, 1)',
 };
+/** `px` length, `0` without a unit so the value stays valid and short. */
+const px = (n) => (n === 0 ? '0' : `${n}px`);
+/**
+ * Compose a box-shadow from layers. Elevation levels are two-layer: a contact
+ * shadow (`0 1px 2px`) that anchors the edge, and an ambient shadow (`0 Npx Mpx`
+ * with negative spread) that lifts it. `prefix` lists extra leading layers, e.g.
+ * `var(--smrt-inset-highlight)` on dark schemes.
+ */
+export function shadow(layers, prefix) {
+    const parts = layers.map(([y, blur, spread, alpha]) => `0 ${px(y)} ${px(blur)} ${px(spread)} color-mix(in srgb, var(--smrt-shadow-color) ${alpha}%, transparent)`);
+    return prefix ? [prefix, ...parts].join(', ') : parts.join(', ');
+}
+/** Quiet hairline inset used as elevation 1 by the flat presets. */
+export const hairlineInset = 'inset 0 0 0 1px var(--smrt-hairline-color)';
+/** Text-colour mixes used for hairlines: quiet edge and strong control edge. */
+export function hairlineMix(quietPercent, strongPercent, insetHighlight) {
+    return {
+        color: `color-mix(in srgb, var(--smrt-color-on-surface) ${quietPercent}%, transparent)`,
+        strongColor: `color-mix(in srgb, var(--smrt-color-on-surface) ${strongPercent}%, transparent)`,
+        insetHighlight,
+    };
+}
+/**
+ * Neutral values that are still valid box-shadow layers. Components combine
+ * `var(--smrt-inset-highlight)` with an elevation (`box-shadow: a, b`); the
+ * keyword `none` is invalid inside a list and drops the whole declaration, so
+ * the "no highlight" and "no elevation" values are transparent shadows.
+ */
+export const noInsetHighlight = 'inset 0 1px 0 transparent';
+export const noShadow = '0 0 0 0 transparent';
+/** Top inner light line for dark surfaces (`--smrt-inset-highlight`). */
+export const darkInsetHighlight = (alpha) => `inset 0 1px 0 rgb(255 255 255 / ${alpha})`;

package/dist/themes/smrt/index.d.ts

@@ -6,6 +6,9 @@
  * accent (`#ff7a1a`), hairline outlines, deep low shadows, and a
  * Space Grotesk / Inter / JetBrains Mono type stack.
  *
+ * Depth is calm: two-layer shadows (contact + short ambient) and graphite surface
+ * lightness, never far-spread or glowing shadows.
+ *
  * The token palette restyles every existing smrt-ui component; the signature
  * motifs (engineering-grid background, glow, oscilloscope hairline, instrument
  * readouts, monospace technical labels) ship as opt-in utility classes in

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/themes/smrt/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAGH,OAAO,KAAK,EAIV,KAAK,EAEN,MAAM,aAAa,CAAC;AA4TrB;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAavB,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/themes/smrt/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAcH,OAAO,KAAK,EAIV,KAAK,EAEN,MAAM,aAAa,CAAC;AA4WrB;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAyDvB,CAAC;AAEF,eAAe,SAAS,CAAC"}