@happyvertical/smrt-ui 0.40.65 → 0.40.66

package/AGENTS.md

@@ -55,9 +55,11 @@ components are exempt — they *are* the primitives.
 | `./i18n` | i18n **client**: `useI18n`, `<Trans>`, `defineMessages`, `renderTemplate` (no `smrt-languages` import — the server resolver stays in `smrt-svelte/i18n/server`) |
 | `./registry` | `ModuleUIRegistry` for cross-package component discovery |
 | `./theme` | deprecated compatibility path forwarding to the canonical theme system |
-| `./themes` | canonical `ThemeProvider`, context, preset token system (material/glass/studio/smrt), and CSS generation |
+| `./themes` | canonical `ThemeProvider`, context, preset token system (material/glass/studio/smrt/happyvertical), and CSS generation |
 | `./themes/styles/smrt.css` | static SMRT theme CSS (dark-first amber instrument-panel look) + signature `.smrt-*` flourish utilities |
 | `./themes/styles/fonts.css` | optional self-hosted `@font-face` for the SMRT type stack (Space Grotesk / Inter / JetBrains Mono) |
+| `./themes/styles/happyvertical.css` | static HappyVertical "Day Shift" brand CSS (enamel/faceplate calm instrument panel) + amber focus rule + `.hv-*` utilities |
+| `./themes/styles/happyvertical-fonts.css` | optional self-hosted `@font-face` for the Day Shift type stack (Archivo / B612 / B612 Mono) |
 | `./styles/tokens.css` | base token stylesheet |
 
 Also internal: `actions/` (`ripple`, `permission`), `display/`, `data/`,
@@ -67,9 +69,30 @@ Also internal: `actions/` (`ripple`, `permission`), `display/`, `data/`,
 
 The package publishes `./playground` and keeps its workspace source at
 `src/svelte/playground.ts`. Previews inherit the shared host's active
-Material/Glass/Studio/SMRT preset and light/dark color scheme; preview
-components must consume `--smrt-*` tokens rather than installing their own
-theme provider or static preset stylesheet.
+Material/Glass/Studio/SMRT/HappyVertical preset and light/dark color scheme;
+preview components must consume `--smrt-*` tokens rather than installing their
+own theme provider or static preset stylesheet.
+
+## Theme presets
+
+Adding or editing a preset touches four things that must stay in lockstep:
+`src/themes/<id>/index.ts` (the `Theme`), the `ThemePreset` union in
+`src/themes/types.ts`, the `registry.ts` entry, and the static
+`src/themes/styles/<id>.css`. **The static stylesheet's `[data-theme="<id>"]`
+blocks are `generateThemeCSS()` output verbatim** — regenerate them after any
+token edit, never hand-patch a value. Two guards enforce this: the whole-block
+comparison in `__tests__/happyvertical-theme.test.ts` (per-preset, strictest),
+and the name-surface diff in `__tests__/token-aliases.test.ts` plus
+`scripts/check-svelte-tokens.mjs` (repo-wide). A preset that tunes shadows per
+scheme sets `darkElevation`; one whose type stack names its own monospace face
+sets `fontFamilyMono` (#1586, #1431).
+
+The **happyvertical** preset ("Day Shift", #2318) is the HappyVertical brand
+identity and carries hand-authored light *and* dark palettes — never regenerate
+its dark scheme from the light one. Its brand rules are executable in that test:
+green is a lamp/marker/fill and never a text color, dark keeps a blue-graphite
+cast with both accent hues, focus is a 2px amber outline with offset, and every
+other text pairing clears WCAG AA in both schemes.
 
 ## Rules
 

package/README.md

@@ -105,8 +105,13 @@ separate so the UI can show a proposal before it changes user state.
 ## Themes
 
 `@happyvertical/smrt-ui/themes` is the canonical theme API and includes the
-Material, Glass, Studio, and s-m-r-t presets. The old `/theme` path forwards to the
-same provider and context for compatibility.
+Material, Glass, Studio, s-m-r-t, and HappyVertical ("Day Shift") presets. The
+old `/theme` path forwards to the same provider and context for compatibility.
+
+Day Shift is the HappyVertical brand identity: a calm instrument panel with an
+enamel ground, faceplate panels on hairline bezels, and a single amber accent
+that also serves as the focus ring. Both its light and dark schemes are
+hand-authored, and every text pairing clears WCAG AA.
 
 ```svelte
 <script>

package/dist/themes/README.md

@@ -1,10 +1,10 @@
 # SMRT Svelte Themes
 
-A comprehensive, multi-theme system for SMRT Svelte with support for Material Design, Apple Glass, Google AI Studio, and the SMRT instrument-panel aesthetic. All themes include both light and dark modes.
+A comprehensive, multi-theme system for SMRT Svelte with support for Material Design, Apple Glass, Google AI Studio, the SMRT instrument-panel aesthetic, and the HappyVertical brand identity. All themes include both light and dark modes.
 
 ## Features
 
-- **4 Theme Presets**: Material (improved M3), Glass (Apple-style), Studio (Google AI Studio flat), SMRT (dark-first amber instrument panel)
+- **5 Theme Presets**: Material (improved M3), Glass (Apple-style), Studio (Google AI Studio flat), SMRT (dark-first amber instrument panel), HappyVertical (the "Day Shift" brand identity — calm enamel/faceplate panel, one amber accent)
 - **Light & Dark Modes**: Automatic system detection with manual override
 - **Runtime Theme Switching**: Change themes without page reload
 - **CSS Custom Properties**: Full theming via CSS variables
@@ -277,19 +277,21 @@ Import the theme styles in your app entry point:
 
 ```ts
 // Import all themes (for runtime switching)
-import '@smrt/svelte/themes/styles/all.css';
+import '@happyvertical/smrt-ui/themes/styles/all.css';
 
 // Or import specific theme only
-import '@smrt/svelte/themes/styles/material.css';
-import '@smrt/svelte/themes/styles/glass.css';
-import '@smrt/svelte/themes/styles/studio.css';
+import '@happyvertical/smrt-ui/themes/styles/material.css';
+import '@happyvertical/smrt-ui/themes/styles/glass.css';
+import '@happyvertical/smrt-ui/themes/styles/studio.css';
+import '@happyvertical/smrt-ui/themes/styles/smrt.css';
+import '@happyvertical/smrt-ui/themes/styles/happyvertical.css';
 ```
 
 ## ThemeProvider Props
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `preset` | `'material' \| 'glass' \| 'studio'` | `'material'` | Theme preset |
+| `preset` | `'material' \| 'glass' \| 'studio' \| 'smrt' \| 'happyvertical'` | `'material'` | Theme preset |
 | `colorScheme` | `'light' \| 'dark' \| 'system'` | `'system'` | Color scheme preference |
 | `primaryColor` | `string` | - | Override primary accent color |
 | `borderRadius` | `'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` | `'md'` | Border radius scale |
@@ -303,7 +305,7 @@ Use the context to switch themes programmatically:
 
 ```svelte
 <script>
-  import { getThemeContext, ThemeSwitcher } from '@smrt/svelte/themes';
+  import { getThemeContext, ThemeSwitcher } from '@happyvertical/smrt-ui/themes';
   
   const theme = getThemeContext();
   
@@ -407,6 +409,49 @@ deep low shadows, and a Space Grotesk / Inter / JetBrains Mono type stack.
 <span class="smrt-glow">amber drop glow</span>
 ```
 
+### HappyVertical ("Day Shift")
+
+The HappyVertical brand identity: a calm instrument panel. A warm-grey enamel
+ground (`#E8EBE9` / `#14181B`) carries raised faceplate panels separated by
+hairline bezels, graphite ink, and exactly one budgeted accent — a signal amber
+(`#9C5300` / `#FFB454`) that doubles as the focus ring. The execution rule is
+"calm is less for the brain to process, not theatre": no glow, no gradients,
+and nothing animates unless it represents a state change.
+
+- **Colors**: Enamel/faceplate surfaces, amber primary, instrument-blue
+  tertiary, green reserved for status lamps
+- **Elevation**: Flat with hairline bezels; minimal soft shadows above level 2
+- **Typography**: Archivo 500/600 display over B612 body, B612 Mono for legends
+- **Motion**: ~120ms state transitions on a single calm easing
+- **Use for**: HappyVertical Work and any surface that should read as calm
+  instrumentation rather than a marketing page
+
+Both schemes are hand-authored (the dark scheme is not generated from the light
+one), every text pairing clears WCAG AA, and structure plus the focus ring clear
+3:1 non-text. **Green is never a text color here** — it is a status lamp,
+marker, or container fill.
+
+```svelte
+<script>
+  // Bundled woff2 — Archivo / B612 / B612 Mono (SIL OFL). Omit to fall back to
+  // Helvetica / Verdana / ui-monospace stacks.
+  import '@happyvertical/smrt-ui/themes/styles/happyvertical-fonts.css';
+</script>
+
+<ThemeProvider preset="happyvertical" colorScheme="system">
+  <YourApp />
+</ThemeProvider>
+```
+
+**Day Shift Utility Classes** (opt-in, deliberately few):
+
+```html
+<div class="hv-panel">Faceplate panel on a hairline bezel</div>
+<div class="hv-legend">Channels</div> <!-- mono legend + hairline rule -->
+<span class="hv-lamp"></span> <!-- green status lamp; also -idle / -attention -->
+<a class="hv-quiet-link" href="/notes">Quiet link, amber on hover</a>
+```
+
 ## Project Integration Patterns
 
 ### SvelteKit App
@@ -583,7 +628,7 @@ For SSR or static sites, import CSS directly and set data attributes:
 
 ```svelte
 <script>
-  import { getThemeContext } from '@smrt/svelte/themes';
+  import { getThemeContext } from '@happyvertical/smrt-ui/themes';
   
   const theme = getThemeContext();
   
@@ -600,7 +645,7 @@ For SSR or static sites, import CSS directly and set data attributes:
 
 ```svelte
 <script>
-  import { getThemeContext } from '@smrt/svelte/themes';
+  import { getThemeContext } from '@happyvertical/smrt-ui/themes';
   
   const theme = getThemeContext();
   
@@ -616,17 +661,17 @@ For SSR or static sites, import CSS directly and set data attributes:
 
 ## Migration from Legacy Theme
 
-The legacy theme system (`@smrt/svelte/theme`) is still available but deprecated. To migrate:
+The legacy theme system (`@happyvertical/smrt-ui/theme`) is still available but deprecated. To migrate:
 
-1. Import from `@smrt/svelte/themes` instead
+1. Import from `@happyvertical/smrt-ui/themes` instead
 2. Wrap app with new `<ThemeProvider>` from themes
 3. Import theme CSS files
 4. Update any theme context usage to new API
 
 ```diff
-- import { ThemeProvider } from '@smrt/svelte/theme';
-+ import { ThemeProvider } from '@smrt/svelte/themes';
-+ import '@smrt/svelte/themes/styles/all.css';
+- import { ThemeProvider } from '@happyvertical/smrt-ui/theme';
++ import { ThemeProvider } from '@happyvertical/smrt-ui/themes';
++ import '@happyvertical/smrt-ui/themes/styles/all.css';
 ```
 
 ## Troubleshooting

package/dist/themes/ThemeProvider.svelte

@@ -367,4 +367,15 @@ $effect(() => {
     --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
+   * themes/styles/happyvertical.css so an app using ThemeProvider without
+   * importing the static stylesheet still gets it. Component-scoped
+   * :focus-visible rules are more specific and continue to win. */
+  :global([data-theme='happyvertical'] :focus-visible) {
+    outline: 2px solid var(--smrt-color-primary);
+    outline-offset: 2px;
+  }
 </style>

package/dist/themes/__tests__/happyvertical-theme.test.js

@@ -0,0 +1,231 @@
+/**
+ * HappyVertical "Day Shift" preset contract (#2318).
+ *
+ * The brand identity ships as a preset, so its guarantees have to be executable
+ * rather than described: every text/surface pairing clears WCAG AA in BOTH
+ * hand-authored schemes, structure and the amber focus ring clear 3:1 non-text,
+ * green is never a text color, and the static stylesheet is the generator's
+ * output verbatim (#1586 lockstep — checked on the whole block, not just
+ * elevation).
+ */
+import { readdirSync, readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { describe, expect, it } from 'vitest';
+import { generateThemeCSS, generateThemeVariables } from '../css-generator.js';
+import { happyverticalTheme } from '../happyvertical/index.js';
+// Resolved from process.cwd() (NOT import.meta.url): the smrt-vitest plugin runs
+// each package's suite with cwd === the package root.
+const staticCss = readFileSync(join(process.cwd(), 'src/themes/styles/happyvertical.css'), 'utf8');
+const themeProviderSource = readFileSync(join(process.cwd(), 'src/themes/ThemeProvider.svelte'), 'utf8');
+/** Relative luminance per WCAG 2.1. */
+function luminance(hex) {
+    const value = Number.parseInt(hex.replace('#', ''), 16);
+    const channels = [(value >> 16) & 255, (value >> 8) & 255, value & 255];
+    const [r, g, b] = channels.map((channel) => {
+        const s = channel / 255;
+        return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+    });
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+/** WCAG contrast ratio between two opaque hex colors. */
+function contrast(a, b) {
+    const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+    return (hi + 0.05) / (lo + 0.05);
+}
+/** on<Role> ↔ <Role> pairs that carry normal text. */
+const ON_PAIRS = [
+    ['onPrimary', 'primary'],
+    ['onPrimaryContainer', 'primaryContainer'],
+    ['onSecondary', 'secondary'],
+    ['onSecondaryContainer', 'secondaryContainer'],
+    ['onTertiary', 'tertiary'],
+    ['onTertiaryContainer', 'tertiaryContainer'],
+    ['onError', 'error'],
+    ['onErrorContainer', 'errorContainer'],
+    ['onWarning', 'warning'],
+    ['onWarningContainer', 'warningContainer'],
+    ['onSuccess', 'success'],
+    ['onSuccessContainer', 'successContainer'],
+    ['onSurface', 'surface'],
+    ['onSurfaceVariant', 'surfaceVariant'],
+    ['onBackground', 'background'],
+    ['inverseOnSurface', 'inverseSurface'],
+];
+const SURFACES = [
+    'surface',
+    'surfaceVariant',
+    'surfaceContainer',
+    'surfaceContainerLow',
+    'surfaceContainerHigh',
+    'surfaceContainerHighest',
+    'surfaceContainerLowest',
+    'surfaceDim',
+    'surfaceBright',
+    'background',
+];
+const INK = ['onSurface', 'onSurfaceVariant'];
+/**
+ * Accent roles that may be rendered as text on a surface. `success` is
+ * deliberately absent: the brand rule is that green is a lamp, marker, or fill
+ * and never a text color, so it is only held to the 3:1 marker floor below.
+ */
+const ACCENT_TEXT = [
+    'primary',
+    'error',
+    'warning',
+    'tertiary',
+    'secondary',
+];
+const SCHEMES = [
+    ['light', happyverticalTheme.light],
+    ['dark', happyverticalTheme.dark],
+];
+describe('happyvertical preset — WCAG AA (#2318)', () => {
+    for (const [scheme, palette] of SCHEMES) {
+        it(`${scheme}: every on<Role> pairing clears 4.5:1`, () => {
+            for (const [on, base] of ON_PAIRS) {
+                expect(contrast(palette[on], palette[base]), `${scheme} ${on} on ${base}`).toBeGreaterThanOrEqual(4.5);
+            }
+        });
+        it(`${scheme}: ink clears 4.5:1 on every surface slot`, () => {
+            for (const ink of INK) {
+                for (const surface of SURFACES) {
+                    expect(contrast(palette[ink], palette[surface]), `${scheme} ${ink} on ${surface}`).toBeGreaterThanOrEqual(4.5);
+                }
+            }
+        });
+        it(`${scheme}: accent text clears 4.5:1 on every surface slot`, () => {
+            for (const accent of ACCENT_TEXT) {
+                for (const surface of SURFACES) {
+                    expect(contrast(palette[accent], palette[surface]), `${scheme} ${accent} on ${surface}`).toBeGreaterThanOrEqual(4.5);
+                }
+            }
+        });
+        it(`${scheme}: the bezel is never the same value as a surface it borders`, () => {
+            // outline-variant is a deliberately quiet hairline, but it still has to
+            // exist: authored at #2A3238, it originally collided byte-for-byte with
+            // surfaceContainerHighest and surfaceBright, so a bezel-bordered panel on
+            // either had a 1.00:1 border — no border at all.
+            for (const surface of SURFACES) {
+                expect(palette[surface], `${scheme} ${surface} must differ from outline-variant`).not.toBe(palette.outlineVariant);
+            }
+        });
+        it(`${scheme}: outline, focus ring, and status lamp clear 3:1 non-text`, () => {
+            for (const surface of SURFACES) {
+                for (const structural of ['outline', 'primary', 'success']) {
+                    expect(contrast(palette[structural], palette[surface]), `${scheme} ${structural} on ${surface}`).toBeGreaterThanOrEqual(3);
+                }
+            }
+        });
+    }
+});
+describe('happyvertical preset — brand invariants (#2318)', () => {
+    it('hand-authors both schemes rather than deriving dark from light', () => {
+        // A generated dark scheme mirrors the light hues; Day Shift's night palette
+        // is authored independently and shares no surface value with the day one.
+        for (const surface of SURFACES) {
+            expect(happyverticalTheme.dark[surface]).not.toBe(happyverticalTheme.light[surface]);
+        }
+    });
+    it('keeps the dark scheme blue-graphite rather than neutral near-black', () => {
+        // Blue-graphite means the blue channel leads the red one on every dark
+        // surface; a collapse to neutral/near-black would flatten that difference.
+        for (const surface of SURFACES) {
+            const hex = happyverticalTheme.dark[surface];
+            const value = Number.parseInt(hex.replace('#', ''), 16);
+            const red = (value >> 16) & 255;
+            const blue = value & 255;
+            expect(blue, `dark ${surface} (${hex}) should keep a blue cast`).toBeGreaterThan(red);
+        }
+    });
+    it('carries both accent hues into dark — amber and green', () => {
+        expect(happyverticalTheme.dark.primary).toBe('#ffb454');
+        expect(happyverticalTheme.dark.success).toBe('#53c989');
+        expect(happyverticalTheme.dark.primary).not.toBe(happyverticalTheme.dark.success);
+    });
+    it('is not undermined by a component painting text with the success token', () => {
+        // "Green is never text" is only a real guarantee if nothing renders it as
+        // one: light `#1e7a4b` measures 4.44:1 on the enamel ground, just under AA.
+        // Omitting `success` from ACCENT_TEXT above states the rule; this scan
+        // enforces it for the components this package owns.
+        const svelteFiles = [];
+        const walk = (dir) => {
+            for (const entry of readdirSync(dir, { withFileTypes: true })) {
+                const full = join(dir, entry.name);
+                if (entry.isDirectory())
+                    walk(full);
+                else if (entry.name.endsWith('.svelte'))
+                    svelteFiles.push(full);
+            }
+        };
+        walk(join(process.cwd(), 'src'));
+        // Match on the DECLARATION VALUE rather than requiring `var(` to sit
+        // adjacent to `color:`, so wrappers count too — `color-mix(…)`,
+        // `light-dark(…)`, and `var(--x, var(--smrt-color-success))` all paint
+        // text just as directly. `(?![\w-])` keeps `--smrt-color-success-container`
+        // (a fill, with its own ink) from reading as a hit.
+        const declaration = /(?<![-\w])color\s*:\s*([^;{}]*)/g;
+        const successToken = /--smrt-color-success(?![\w-])/;
+        // One level of indirection: `--alert-color: var(--smrt-color-success)` and
+        // then `color: var(--alert-color)` is Alert.svelte's exact shape today, one
+        // edit away from painting text green invisibly.
+        const customProperty = /(--[\w-]+)\s*:\s*([^;{}]*)/g;
+        const offenders = svelteFiles.filter((file) => {
+            const source = readFileSync(file, 'utf8');
+            const greenProperties = new Set();
+            for (const [, name, value] of source.matchAll(customProperty)) {
+                if (successToken.test(value))
+                    greenProperties.add(name);
+            }
+            for (const [, value] of source.matchAll(declaration)) {
+                if (successToken.test(value))
+                    return true;
+                for (const property of greenProperties) {
+                    if (value.includes(`var(${property}`))
+                        return true;
+                }
+            }
+            return false;
+        });
+        expect(offenders.map((file) => file.replace(process.cwd(), '')), 'success is a lamp/marker/fill, never a text color').toEqual([]);
+    });
+    it('uses one calm easing for every motion token', () => {
+        const curves = new Set(Object.values(happyverticalTheme.easing));
+        expect(curves.size).toBe(1);
+    });
+    it('sets ~120ms as the standard state-transition duration', () => {
+        expect(happyverticalTheme.duration.normal).toBe('120ms');
+    });
+    it('names the B612 Mono stack as the preset monospace family', () => {
+        const light = generateThemeVariables(happyverticalTheme, false);
+        const dark = generateThemeVariables(happyverticalTheme, true);
+        expect(light['--smrt-font-family-mono']).toContain('B612 Mono');
+        expect(dark['--smrt-font-family-mono']).toContain('B612 Mono');
+    });
+    it('defines a 2px amber focus outline with offset on BOTH delivery paths', () => {
+        // The preset ships two ways — a static stylesheet import and
+        // <ThemeProvider preset="happyvertical">. A focus rule that exists in only
+        // one of them means half the consumers silently lose the brand indicator.
+        const sources = [
+            [staticCss, /\[data-theme="happyvertical"\] :focus-visible \{([^}]*)\}/],
+            [
+                themeProviderSource,
+                /:global\(\[data-theme='happyvertical'\] :focus-visible\) \{([^}]*)\}/,
+            ],
+        ];
+        for (const [source, pattern] of sources) {
+            const focusBlock = source.match(pattern);
+            expect(focusBlock, 'focus-visible rule should exist').not.toBeNull();
+            expect(focusBlock?.[1]).toContain('outline: 2px solid var(--smrt-color-primary)');
+            expect(focusBlock?.[1]).toMatch(/outline-offset:\s*2px/);
+        }
+    });
+});
+describe('happyvertical static CSS lockstep (#1586)', () => {
+    for (const scheme of ['light', 'dark']) {
+        it(`${scheme} block matches generateThemeCSS output verbatim`, () => {
+            const generated = generateThemeCSS(happyverticalTheme, scheme === 'dark');
+            expect(staticCss).toContain(generated);
+        });
+    }
+});

package/dist/themes/__tests__/token-aliases.test.js

@@ -103,6 +103,7 @@ const STATIC_STYLE_PATHS = {
     glass: join(packageRoot, 'src/themes/styles/glass.css'),
     studio: join(packageRoot, 'src/themes/styles/studio.css'),
     smrt: join(packageRoot, 'src/themes/styles/smrt.css'),
+    happyvertical: join(packageRoot, 'src/themes/styles/happyvertical.css'),
 };
 function collectDefinedTokens(css) {
     return new Set([...css.matchAll(/(--smrt-[a-z0-9_-]+)\s*:/gi)].map((match) => match[1]));

package/dist/themes/components/ThemeSwitcher.svelte

@@ -39,6 +39,7 @@ const themeIcons: Record<ThemePreset, string> = {
   glass: '💎',
   studio: '◻️',
   smrt: '🟠',
+  happyvertical: '🔶',
 };
 </script>
 

package/dist/themes/components/ThemeSwitcher.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeSwitcher.svelte.d.ts","sourceRoot":"","sources":["../../../src/themes/components/ThemeSwitcher.svelte.ts"],"names":[],"mappings":"AAQA,UAAU,KAAK;IACb,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yDAAyD;IACzD,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,WAAW,CAAC;IAC7C,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAgFD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ThemeSwitcher.svelte.d.ts","sourceRoot":"","sources":["../../../src/themes/components/ThemeSwitcher.svelte.ts"],"names":[],"mappings":"AAQA,UAAU,KAAK;IACb,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yDAAyD;IACzD,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,WAAW,CAAC;IAC7C,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAiFD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

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;AA+LD;;;;;;GAMG;AACH,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,EACf,OAAO,GAAE,kBAAuB,GAC/B,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CA0CxB;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;AAWH,OAAO,KAAK,EAQV,KAAK,EAEN,MAAM,YAAY,CAAC;AAEpB;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kDAAkD;IAClD,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAwMD;;;;;;GAMG;AACH,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,EACf,OAAO,GAAE,kBAAuB,GAC/B,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CA0CxB;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

@@ -127,18 +127,25 @@ function generateGlassVariables(glass, prefix) {
     };
 }
 /**
- * Generate theme-independent helper tokens (issue #1431).
+ * Generate helper tokens that do not vary by color scheme (issue #1431).
  *
- * Monospace font family, named font weights, and z-index stacking levels are
- * the same across presets and color schemes. Emitting them as tokens lets
+ * Named font weights and z-index stacking levels are identical across every
+ * preset and scheme. The monospace family defaults to the same shared stack,
+ * but a preset whose type stack names its own mono face overrides it through
+ * `Theme.fontFamilyMono` (#2318) — so this token is per-preset, though still
+ * the same in both of that preset's schemes. Emitting them as tokens lets
  * components stop hardcoding magic values and keeps overlay layering / mono
  * surfaces themeable.
  */
-function generateStaticTokens(prefix) {
+function generateStaticTokens(prefix, fontFamilyMono) {
     const vars = {};
     for (const [alias, value] of Object.entries(fontFamilyAliases)) {
         vars[`${prefix}-font-family-${alias}`] = value;
     }
+    // A preset whose type stack names its own monospace face overrides the
+    // shared stack; every other preset keeps the #1431 default.
+    if (fontFamilyMono)
+        vars[`${prefix}-font-family-mono`] = fontFamilyMono;
     for (const [name, value] of Object.entries(fontWeightTokens)) {
         vars[`${prefix}-typography-weight-${name}`] = value;
     }
@@ -181,7 +188,7 @@ export function generateThemeVariables(theme, isDark, options = {}) {
         // Easing
         ...generateEasingVariables(theme.easing, prefix),
         // Theme-independent helper tokens (mono font, named weights, z-index)
-        ...generateStaticTokens(prefix),
+        ...generateStaticTokens(prefix, theme.fontFamilyMono),
         // Glass effects (if present)
         ...generateGlassVariables(theme.glass, prefix),
     };

package/dist/themes/fonts/LICENSE.md

@@ -2,14 +2,16 @@
 
 The `.woff2` files in this directory are redistributed under the
 **SIL Open Font License, Version 1.1** (<https://openfontlicense.org>). They are
-the latin / latin-ext variable subsets served by Google Fonts, bundled here so
-the SMRT theme can load its type stack without a CDN.
+the latin / latin-ext subsets served by Google Fonts, bundled here so the SMRT
+and HappyVertical themes can load their type stacks without a CDN.
 
 | File(s) | Family | Copyright | Upstream |
 |---------|--------|-----------|----------|
 | `space-grotesk-*.woff2` | Space Grotesk | Copyright © 2020 The Space Grotesk Project Authors | <https://github.com/floriankarsten/space-grotesk> |
 | `inter-*.woff2` | Inter | Copyright © 2016 The Inter Project Authors | <https://github.com/rsms/inter> |
 | `jetbrains-mono-*.woff2` | JetBrains Mono | Copyright © 2020 The JetBrains Mono Project Authors | <https://github.com/JetBrains/JetBrainsMono> |
+| `archivo-*.woff2` | Archivo | Copyright © 2020 The Archivo Project Authors | <https://github.com/Omnibus-Type/Archivo> |
+| `b612-*.woff2` | B612 / B612 Mono | Copyright © 2012 The B612 Project Authors | <https://github.com/polarsys/b612> |
 
 Each family is licensed under the SIL OFL 1.1. The fonts are unmodified subsets;
 no Reserved Font Names are used for any derivative. See each upstream repository

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

@@ -0,0 +1,68 @@
+/**
+ * HappyVertical Theme — "Day Shift"
+ *
+ * The HappyVertical brand identity (happyvertical/smrt#2318), signed off
+ * 2026-08-12. A calm instrument panel: a warm-grey enamel ground, raised
+ * faceplate panels separated by hairline bezels, graphite ink, and exactly one
+ * budgeted accent — a signal amber. The execution rule is the owner's, verbatim:
+ * **"calm is less for the brain to process, not theatre."** No decorative
+ * vocabulary, no glow, nothing animates unless it represents a state change.
+ *
+ * Unlike a generated dark scheme, **both schemes are hand-authored**. The dark
+ * scheme keeps a blue-graphite cast (rather than collapsing to near-black) and
+ * carries both accent hues — amber and green — at dark-surface strengths.
+ *
+ * Named roles (issue vocabulary → token slots):
+ *
+ * | role        | light     | dark      | slots                              |
+ * |-------------|-----------|-----------|------------------------------------|
+ * | enamel      | `#E8EBE9` | `#14181B` | `background`, the ground           |
+ * | faceplate   | `#F4F6F5` | `#1C2226` | `surface`, raised panels           |
+ * | graphite    | `#20272B` | `#E4E9E7` | `on-surface` / `on-background`     |
+ * | etch        | `#5A6660` | `#97A29C` | `on-surface-variant`               |
+ * | bezel       | `#C9CFCC` | `#2A3238` | `outline-variant`, hairlines       |
+ * | amber       | `#9C5300` | `#FFB454` | `primary`, incl. the focus ring    |
+ * | green       | `#1E7A4B` | `#53C989` | `success`                          |
+ *
+ * `background` is the enamel ground and `surface` is the raised faceplate, so a
+ * `Card` (which paints `--smrt-color-surface`) reads as a panel sitting on the
+ * ground exactly as in the sign-off mock. The `surface-container-*` ramp is
+ * anchored on those two — lightest at `lowest` in light, inverted in dark — and
+ * deliberately extends one hand-tuned step past each anchor (`lowest`/`bright`
+ * a shade above faceplate, `highest`/`dim` a shade below enamel). Confining all
+ * seven levels strictly between enamel and faceplate would compress them into a
+ * ~12-value band, and components that stack container levels (DataTable rows
+ * under a header, nested panels) would lose their separation entirely.
+ *
+ * **Green is never text.** It is a status lamp, marker, or container fill only;
+ * light `#1E7A4B` measures 4.44:1 on the enamel ground, just under AA. The
+ * accent-as-text contrast set in `__tests__/happyvertical-theme.test.ts`
+ * excludes `success` and a companion scan enforces that no component in this
+ * package paints text with it. Every other text/surface pairing in both schemes
+ * clears WCAG AA (4.5:1), and `outline` plus the amber focus ring clear 3:1
+ * non-text on every surface slot.
+ *
+ * `outline` and `outline-variant` are deliberately different strengths, and the
+ * distinction is the a11y contract: `outline` is the boundary token and is
+ * tuned to clear 3:1 on every surface, while `outline-variant` is the bezel —
+ * the decorative hairline between panels — which measures 1.25–1.54:1 in light
+ * and 1.03–1.43:1 in dark. That is the look the design signs off on and the
+ * same register every other preset here uses for its dividers. Never "fix" the
+ * bezel by raising its value; a structure that must be perceivable (a control
+ * boundary, a focus ring) should consume `outline` or `primary` instead.
+ *
+ * The dark bezel sits at the top of the surface ramp, so the ramp deliberately
+ * stops below it: `surfaceContainerHighest` and `surfaceBright` were originally
+ * authored AT `#2A3238` and a bezel-bordered panel on either was invisible at
+ * exactly 1.00:1. They are now distinct, and a test pins that no surface may
+ * ever equal `outline-variant` again. Separating them further would mean
+ * lifting the top of the ramp past the bezel, which drops `on-surface-variant`
+ * below AA on those surfaces — the wrong trade.
+ */
+import type { Theme } from '../types.js';
+/**
+ * HappyVertical "Day Shift" theme definition
+ */
+export declare const happyverticalTheme: Theme;
+export default happyverticalTheme;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}