@happyvertical/smrt-ui 0.55.16 → 0.55.18

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

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;