@happyvertical/smrt-ui 0.36.5 → 0.36.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/AGENTS.md CHANGED
@@ -51,7 +51,9 @@ components are exempt — they *are* the primitives.
51
51
  | `./i18n` | i18n **client**: `useI18n`, `<Trans>`, `defineMessages`, `renderTemplate` (no `smrt-languages` import — the server resolver stays in `smrt-svelte/i18n/server`) |
52
52
  | `./registry` | `ModuleUIRegistry` for cross-package component discovery |
53
53
  | `./theme` | simple `ThemeProvider` + context (`useTheme` consumes this from `smrt-svelte`) |
54
- | `./themes` | canonical preset token system (material/glass/studio), CSS generation |
54
+ | `./themes` | canonical preset token system (material/glass/studio/smrt), CSS generation |
55
+ | `./themes/styles/smrt.css` | static SMRT theme CSS (dark-first amber instrument-panel look) + signature `.smrt-*` flourish utilities |
56
+ | `./themes/styles/fonts.css` | optional self-hosted `@font-face` for the SMRT type stack (Space Grotesk / Inter / JetBrains Mono) |
55
57
  | `./styles/tokens.css` | base token stylesheet |
56
58
 
57
59
  Also internal: `actions/` (`ripple`, `permission`), `display/`, `data/`,
@@ -1,10 +1,10 @@
1
1
  # SMRT Svelte Themes
2
2
 
3
- A comprehensive, multi-theme system for SMRT Svelte with support for Material Design, Apple Glass, and Google AI Studio aesthetics. All themes include both light and dark modes.
3
+ 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.
4
4
 
5
5
  ## Features
6
6
 
7
- - **3 Theme Presets**: Material (improved M3), Glass (Apple-style), Studio (Google AI Studio flat)
7
+ - **4 Theme Presets**: Material (improved M3), Glass (Apple-style), Studio (Google AI Studio flat), SMRT (dark-first amber instrument panel)
8
8
  - **Light & Dark Modes**: Automatic system detection with manual override
9
9
  - **Runtime Theme Switching**: Change themes without page reload
10
10
  - **CSS Custom Properties**: Full theming via CSS variables
@@ -368,6 +368,45 @@ Google AI Studio-inspired flat design with minimal aesthetics.
368
368
  <div class="smrt-flat-subtle">Subtle elevation</div>
369
369
  ```
370
370
 
371
+ ### SMRT
372
+
373
+ Dark-first "engineering instrument panel" theme adapted from happyvertical.com:
374
+ an amber signal accent (`#ff7a1a`) on near-black surfaces, hairline outlines,
375
+ deep low shadows, and a Space Grotesk / Inter / JetBrains Mono type stack.
376
+
377
+ - **Colors**: Near-black engineering surfaces, signal-amber primary, SMRT-violet
378
+ tertiary, cool slate neutrals
379
+ - **Elevation**: Deep, soft, low-spread drop shadows with a hairline inset
380
+ - **Typography**: Space Grotesk display (tight, negative tracking) over Inter body
381
+ - **Use for**: Developer tools, agent dashboards, technical/terminal aesthetics
382
+
383
+ **Fonts (optional, self-hosted):**
384
+
385
+ ```svelte
386
+ <script>
387
+ // Bundled woff2 — Space Grotesk / Inter / JetBrains Mono (SIL OFL). Omit to
388
+ // fall back to system-ui / ui-monospace stacks.
389
+ import '@happyvertical/smrt-ui/themes/styles/fonts.css';
390
+ </script>
391
+
392
+ <ThemeProvider preset="smrt" colorScheme="dark">
393
+ <YourApp />
394
+ </ThemeProvider>
395
+ ```
396
+
397
+ **SMRT Flourish Utility Classes** (opt-in signature motifs):
398
+
399
+ ```html
400
+ <section class="smrt-grid-bg">Faint engineering-grid background</section>
401
+ <div class="smrt-accent-wash">Soft amber radial wash</div>
402
+ <span class="smrt-livedot"></span> <!-- pulsing amber status dot -->
403
+ <span class="smrt-label">// SECTION</span> <!-- mono, uppercase, tracked -->
404
+ <div class="smrt-readout"><div class="smrt-readout-row">…</div></div>
405
+ <div class="smrt-terminal"><pre>$ smrt …</pre></div>
406
+ <div class="smrt-scope"><span class="smrt-scope-fill" style="width:42%"></span></div>
407
+ <span class="smrt-glow">amber drop glow</span>
408
+ ```
409
+
371
410
  ## Project Integration Patterns
372
411
 
373
412
  ### SvelteKit App
@@ -102,6 +102,7 @@ const STATIC_STYLE_PATHS = {
102
102
  material: join(packageRoot, 'src/themes/styles/material.css'),
103
103
  glass: join(packageRoot, 'src/themes/styles/glass.css'),
104
104
  studio: join(packageRoot, 'src/themes/styles/studio.css'),
105
+ smrt: join(packageRoot, 'src/themes/styles/smrt.css'),
105
106
  };
106
107
  function collectDefinedTokens(css) {
107
108
  return new Set([...css.matchAll(/(--smrt-[a-z0-9_-]+)\s*:/gi)].map((match) => match[1]));
@@ -38,6 +38,7 @@ const themeIcons: Record<ThemePreset, string> = {
38
38
  material: '🔷',
39
39
  glass: '💎',
40
40
  studio: '◻️',
41
+ smrt: '🟠',
41
42
  };
42
43
  </script>
43
44
 
@@ -1 +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;AA+ED,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
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"}
@@ -0,0 +1,16 @@
1
+ # Bundled font licenses
2
+
3
+ The `.woff2` files in this directory are redistributed under the
4
+ **SIL Open Font License, Version 1.1** (<https://openfontlicense.org>). They are
5
+ the latin / latin-ext variable subsets served by Google Fonts, bundled here so
6
+ the SMRT theme can load its type stack without a CDN.
7
+
8
+ | File(s) | Family | Copyright | Upstream |
9
+ |---------|--------|-----------|----------|
10
+ | `space-grotesk-*.woff2` | Space Grotesk | Copyright © 2020 The Space Grotesk Project Authors | <https://github.com/floriankarsten/space-grotesk> |
11
+ | `inter-*.woff2` | Inter | Copyright © 2016 The Inter Project Authors | <https://github.com/rsms/inter> |
12
+ | `jetbrains-mono-*.woff2` | JetBrains Mono | Copyright © 2020 The JetBrains Mono Project Authors | <https://github.com/JetBrains/JetBrainsMono> |
13
+
14
+ Each family is licensed under the SIL OFL 1.1. The fonts are unmodified subsets;
15
+ no Reserved Font Names are used for any derivative. See each upstream repository
16
+ for the full `OFL.txt` and copyright notice.
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * SMRT Svelte Themes
3
3
  *
4
- * Unified theme system with Material, Glass, and Studio presets.
4
+ * Unified theme system with Material, Glass, Studio, and SMRT presets.
5
5
  * Supports runtime theme switching, dark/light modes, and CSS custom properties.
6
6
  *
7
7
  * @example
@@ -24,6 +24,7 @@ export { glassTheme } from './glass/index.js';
24
24
  export { materialTheme } from './material/index.js';
25
25
  export { availablePresets, getAllThemes, getTheme, getThemeName, getThemeOptions, isValidPreset, themes, } from './registry.js';
26
26
  export { appleEasing, borderRadiusScale, durationScale, materialEasing, spacingScale, studioEasing, } from './shared.js';
27
+ export { smrtTheme } from './smrt/index.js';
27
28
  export { studioTheme } from './studio/index.js';
28
29
  export { default as ThemeProvider } from './ThemeProvider.svelte';
29
30
  export type { BorderRadius, BorderRadiusScale, ColorPalette, ColorScheme, CSSVariableOptions, DurationScale, EasingScale, ElevationScale, GlassEffects, ResolvedScheme, SpacingScale, Theme, ThemeConfig, ThemeContext, ThemePreset, ThemeState, TypographyScale, TypographyToken, } from './types.js';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/themes/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;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;AAC5B,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAGpD,OAAO,EACL,gBAAgB,EAChB,YAAY,EACZ,QAAQ,EACR,YAAY,EACZ,eAAe,EACf,aAAa,EACb,MAAM,GACP,MAAM,eAAe,CAAC;AAEvB,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,aAAa,EACb,cAAc,EACd,YAAY,EACZ,YAAY,GACb,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAElE,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"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/themes/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;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;AAC5B,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAGpD,OAAO,EACL,gBAAgB,EAChB,YAAY,EACZ,QAAQ,EACR,YAAY,EACZ,eAAe,EACf,aAAa,EACb,MAAM,GACP,MAAM,eAAe,CAAC;AAEvB,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,aAAa,EACb,cAAc,EACd,YAAY,EACZ,YAAY,GACb,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAElE,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"}
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * SMRT Svelte Themes
3
3
  *
4
- * Unified theme system with Material, Glass, and Studio presets.
4
+ * Unified theme system with Material, Glass, Studio, and SMRT presets.
5
5
  * Supports runtime theme switching, dark/light modes, and CSS custom properties.
6
6
  *
7
7
  * @example
@@ -30,6 +30,7 @@ export { materialTheme } from './material/index.js';
30
30
  export { availablePresets, getAllThemes, getTheme, getThemeName, getThemeOptions, isValidPreset, themes, } from './registry.js';
31
31
  // Shared tokens (if needed for custom themes)
32
32
  export { appleEasing, borderRadiusScale, durationScale, materialEasing, spacingScale, studioEasing, } from './shared.js';
33
+ export { smrtTheme } from './smrt/index.js';
33
34
  export { studioTheme } from './studio/index.js';
34
35
  // Main components
35
36
  export { default as ThemeProvider } from './ThemeProvider.svelte';
@@ -1 +1 @@
1
- {"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../src/themes/registry.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAErD;;GAEG;AACH,eAAO,MAAM,MAAM,EAAE,MAAM,CAAC,WAAW,EAAE,KAAK,CAI7C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,WAAW,EAAoC,CAAC;AAE/E;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,MAAM,EAAE,WAAW,GAAG,KAAK,CAiBnD;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,IAAI,WAAW,CAInE;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,CAMxD;AAED;;;GAGG;AACH,wBAAgB,YAAY,IAAI,KAAK,EAAE,CAEtC;AAED;;;GAGG;AACH,wBAAgB,eAAe,IAAI;IAAE,KAAK,EAAE,WAAW,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,EAAE,CASzE;AAOD;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAEtD;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAAE,EAAE,MAAM,GAAG,KAAK,GAAG,SAAS,CAE5D;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAElD"}
1
+ {"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../src/themes/registry.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAErD;;GAEG;AACH,eAAO,MAAM,MAAM,EAAE,MAAM,CAAC,WAAW,EAAE,KAAK,CAK7C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,WAAW,EAKzC,CAAC;AAEF;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,MAAM,EAAE,WAAW,GAAG,KAAK,CAiBnD;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,IAAI,WAAW,CAInE;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,CAMxD;AAED;;;GAGG;AACH,wBAAgB,YAAY,IAAI,KAAK,EAAE,CAEtC;AAED;;;GAGG;AACH,wBAAgB,eAAe,IAAI;IAAE,KAAK,EAAE,WAAW,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,EAAE,CASzE;AAOD;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAEtD;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAAE,EAAE,MAAM,GAAG,KAAK,GAAG,SAAS,CAE5D;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAElD"}
@@ -6,6 +6,7 @@
6
6
  */
7
7
  import { glassTheme } from './glass/index.js';
8
8
  import { materialTheme } from './material/index.js';
9
+ import { smrtTheme } from './smrt/index.js';
9
10
  import { studioTheme } from './studio/index.js';
10
11
  /**
11
12
  * Map of all built-in themes
@@ -14,11 +15,17 @@ export const themes = {
14
15
  material: materialTheme,
15
16
  glass: glassTheme,
16
17
  studio: studioTheme,
18
+ smrt: smrtTheme,
17
19
  };
18
20
  /**
19
21
  * List of available theme presets (built-in only)
20
22
  */
21
- export const availablePresets = ['material', 'glass', 'studio'];
23
+ export const availablePresets = [
24
+ 'material',
25
+ 'glass',
26
+ 'studio',
27
+ 'smrt',
28
+ ];
22
29
  /**
23
30
  * Get a theme by preset name
24
31
  * Checks built-in themes first, then custom registered themes
@@ -0,0 +1,20 @@
1
+ /**
2
+ * SMRT Theme
3
+ *
4
+ * Dark-first "engineering instrument panel" theme adapted from the
5
+ * happyvertical.com workbench look: near-black surfaces, an amber signal
6
+ * accent (`#ff7a1a`), hairline outlines, deep low shadows, and a
7
+ * Space Grotesk / Inter / JetBrains Mono type stack.
8
+ *
9
+ * The token palette restyles every existing smrt-ui component; the signature
10
+ * motifs (engineering-grid background, glow, oscilloscope hairline, instrument
11
+ * readouts, monospace technical labels) ship as opt-in utility classes in
12
+ * `styles/smrt.css`, and the fonts in `styles/fonts.css`.
13
+ */
14
+ import type { Theme } from '../types.js';
15
+ /**
16
+ * SMRT theme definition
17
+ */
18
+ export declare const smrtTheme: Theme;
19
+ export default smrtTheme;
20
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +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;AAsTrB;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAavB,CAAC;AAEF,eAAe,SAAS,CAAC"}
@@ -0,0 +1,313 @@
1
+ /**
2
+ * SMRT Theme
3
+ *
4
+ * Dark-first "engineering instrument panel" theme adapted from the
5
+ * happyvertical.com workbench look: near-black surfaces, an amber signal
6
+ * accent (`#ff7a1a`), hairline outlines, deep low shadows, and a
7
+ * Space Grotesk / Inter / JetBrains Mono type stack.
8
+ *
9
+ * The token palette restyles every existing smrt-ui component; the signature
10
+ * motifs (engineering-grid background, glow, oscilloscope hairline, instrument
11
+ * readouts, monospace technical labels) ship as opt-in utility classes in
12
+ * `styles/smrt.css`, and the fonts in `styles/fonts.css`.
13
+ */
14
+ import { borderRadiusScale, durationScale, spacingScale } from '../shared.js';
15
+ /** Display family (headings) — falls back gracefully when fonts.css is absent. */
16
+ const DISPLAY_FONT = '"Space Grotesk", system-ui, -apple-system, sans-serif';
17
+ /**
18
+ * SMRT light color palette.
19
+ *
20
+ * The instrument aesthetic is dark-first; the light scheme keeps the amber
21
+ * signal (darkened to `#e35d12` for contrast on white) over cool paper greys,
22
+ * mirroring happyvertical.com's `[data-theme='light']` workbench.
23
+ */
24
+ const lightColors = {
25
+ // Primary - Signal amber (darkened for light-surface contrast)
26
+ primary: '#e35d12',
27
+ onPrimary: '#ffffff',
28
+ primaryContainer: '#ffe6d4',
29
+ onPrimaryContainer: '#7a2e00',
30
+ // Secondary - Cool slate
31
+ secondary: '#5b6470',
32
+ onSecondary: '#ffffff',
33
+ secondaryContainer: '#e7eaee',
34
+ onSecondaryContainer: '#2a2f37',
35
+ // Tertiary - SMRT violet (happyvertical's per-product accent for the framework)
36
+ tertiary: '#6b4eff',
37
+ onTertiary: '#ffffff',
38
+ tertiaryContainer: '#e7e0ff',
39
+ onTertiaryContainer: '#3a2b8c',
40
+ // Error
41
+ error: '#c0362c',
42
+ onError: '#ffffff',
43
+ errorContainer: '#fbe0dd',
44
+ onErrorContainer: '#6b1109',
45
+ // Warning
46
+ warning: '#b06a00',
47
+ onWarning: '#ffffff',
48
+ warningContainer: '#ffedd0',
49
+ onWarningContainer: '#6b4200',
50
+ // Success
51
+ success: '#0f7a5f',
52
+ onSuccess: '#ffffff',
53
+ successContainer: '#d7f2e8',
54
+ onSuccessContainer: '#043a2c',
55
+ // Surface - Cool paper greys
56
+ surface: '#ffffff',
57
+ onSurface: '#14171c',
58
+ surfaceVariant: '#f5f6f8',
59
+ onSurfaceVariant: '#5b6470',
60
+ surfaceContainer: '#f5f6f8',
61
+ surfaceContainerLow: '#fafbfc',
62
+ surfaceContainerHigh: '#eef1f4',
63
+ surfaceContainerHighest: '#e7eaee',
64
+ surfaceContainerLowest: '#ffffff',
65
+ surfaceDim: '#e3e6ea',
66
+ surfaceBright: '#ffffff',
67
+ // Background
68
+ background: '#edeff2',
69
+ onBackground: '#14171c',
70
+ // Outline - Hairline / line greys
71
+ outline: '#c6ccd4',
72
+ outlineVariant: '#dfe3e8',
73
+ // Inverse
74
+ inverseSurface: '#14171c',
75
+ inverseOnSurface: '#f4f6f8',
76
+ inversePrimary: '#ff7a1a',
77
+ // Effects
78
+ shadow: 'rgba(20, 26, 36, 0.28)',
79
+ scrim: 'rgba(0, 0, 0, 0.5)',
80
+ };
81
+ /**
82
+ * SMRT dark color palette (default).
83
+ *
84
+ * Near-black engineering surfaces (`#0b0c0e` base, `#121417` panels) with the
85
+ * full-strength amber signal `#ff7a1a` and hairline outlines.
86
+ */
87
+ const darkColors = {
88
+ // Primary - Signal amber
89
+ primary: '#ff7a1a',
90
+ onPrimary: '#1a0e02',
91
+ primaryContainer: '#2a1a0c',
92
+ onPrimaryContainer: '#ffb784',
93
+ // Secondary - Cool slate
94
+ secondary: '#9aa3af',
95
+ onSecondary: '#14171c',
96
+ secondaryContainer: '#23272e',
97
+ onSecondaryContainer: '#e6e9ee',
98
+ // Tertiary - SMRT violet
99
+ tertiary: '#b9a8ff',
100
+ onTertiary: '#241a4d',
101
+ tertiaryContainer: '#2a2350',
102
+ onTertiaryContainer: '#ddd4ff',
103
+ // Error
104
+ error: '#ff6b6b',
105
+ onError: '#2a0a0a',
106
+ errorContainer: '#3a1414',
107
+ onErrorContainer: '#ffc4c4',
108
+ // Warning
109
+ warning: '#ffb020',
110
+ onWarning: '#1a0e02',
111
+ warningContainer: '#3a2a0c',
112
+ onWarningContainer: '#ffd9a3',
113
+ // Success
114
+ success: '#3fb98f',
115
+ onSuccess: '#00261c',
116
+ successContainer: '#103a30',
117
+ onSuccessContainer: '#7fd9be',
118
+ // Surface - Near-black instrument panels
119
+ surface: '#121417',
120
+ onSurface: '#c9cdd3',
121
+ surfaceVariant: '#181b1f',
122
+ onSurfaceVariant: '#9aa3af',
123
+ surfaceContainer: '#121417',
124
+ surfaceContainerLow: '#0e1013',
125
+ surfaceContainerHigh: '#181b1f',
126
+ surfaceContainerHighest: '#1f242b',
127
+ surfaceContainerLowest: '#0a0c10',
128
+ surfaceDim: '#0b0c0e',
129
+ surfaceBright: '#23272e',
130
+ // Background
131
+ background: '#0b0c0e',
132
+ onBackground: '#c9cdd3',
133
+ // Outline - Line / hairline strokes
134
+ outline: '#333842',
135
+ outlineVariant: '#23272e',
136
+ // Inverse
137
+ inverseSurface: '#edeff2',
138
+ inverseOnSurface: '#14171c',
139
+ inversePrimary: '#b34d00',
140
+ // Effects
141
+ shadow: 'rgba(0, 0, 0, 0.8)',
142
+ scrim: 'rgba(0, 0, 0, 0.7)',
143
+ };
144
+ /**
145
+ * SMRT typography scale.
146
+ *
147
+ * Tight, punchy display metrics in Space Grotesk (negative tracking, near-1
148
+ * line-heights) over Inter body text — the workbench's display/body split.
149
+ */
150
+ const typography = {
151
+ displayLarge: {
152
+ size: '3.5rem',
153
+ lineHeight: '0.98',
154
+ weight: '600',
155
+ tracking: '-0.03em',
156
+ fontFamily: DISPLAY_FONT,
157
+ },
158
+ displayMedium: {
159
+ size: '2.75rem',
160
+ lineHeight: '1',
161
+ weight: '600',
162
+ tracking: '-0.03em',
163
+ fontFamily: DISPLAY_FONT,
164
+ },
165
+ displaySmall: {
166
+ size: '2.25rem',
167
+ lineHeight: '1.05',
168
+ weight: '600',
169
+ tracking: '-0.02em',
170
+ fontFamily: DISPLAY_FONT,
171
+ },
172
+ headlineLarge: {
173
+ size: '2rem',
174
+ lineHeight: '1.1',
175
+ weight: '600',
176
+ tracking: '-0.02em',
177
+ fontFamily: DISPLAY_FONT,
178
+ },
179
+ headlineMedium: {
180
+ size: '1.6rem',
181
+ lineHeight: '1.15',
182
+ weight: '600',
183
+ tracking: '-0.02em',
184
+ fontFamily: DISPLAY_FONT,
185
+ },
186
+ headlineSmall: {
187
+ size: '1.3rem',
188
+ lineHeight: '1.2',
189
+ weight: '600',
190
+ tracking: '-0.01em',
191
+ fontFamily: DISPLAY_FONT,
192
+ },
193
+ titleLarge: {
194
+ size: '1.125rem',
195
+ lineHeight: '1.3',
196
+ weight: '600',
197
+ tracking: '-0.01em',
198
+ fontFamily: 'var(--smrt-font-family)',
199
+ },
200
+ titleMedium: {
201
+ size: '1rem',
202
+ lineHeight: '1.4',
203
+ weight: '600',
204
+ tracking: '0',
205
+ fontFamily: 'var(--smrt-font-family)',
206
+ },
207
+ titleSmall: {
208
+ size: '0.875rem',
209
+ lineHeight: '1.4',
210
+ weight: '600',
211
+ tracking: '0',
212
+ fontFamily: 'var(--smrt-font-family)',
213
+ },
214
+ bodyLarge: {
215
+ size: '1.0625rem',
216
+ lineHeight: '1.6',
217
+ weight: '400',
218
+ tracking: '0',
219
+ fontFamily: 'var(--smrt-font-family)',
220
+ },
221
+ bodyMedium: {
222
+ size: '0.9375rem',
223
+ lineHeight: '1.6',
224
+ weight: '400',
225
+ tracking: '0',
226
+ fontFamily: 'var(--smrt-font-family)',
227
+ },
228
+ bodySmall: {
229
+ size: '0.8125rem',
230
+ lineHeight: '1.55',
231
+ weight: '400',
232
+ tracking: '0',
233
+ fontFamily: 'var(--smrt-font-family)',
234
+ },
235
+ labelLarge: {
236
+ size: '0.8125rem',
237
+ lineHeight: '1.4',
238
+ weight: '600',
239
+ tracking: '0.04em',
240
+ fontFamily: 'var(--smrt-font-family)',
241
+ },
242
+ labelMedium: {
243
+ size: '0.6875rem',
244
+ lineHeight: '1.4',
245
+ weight: '600',
246
+ tracking: '0.08em',
247
+ fontFamily: 'var(--smrt-font-family)',
248
+ },
249
+ labelSmall: {
250
+ size: '0.625rem',
251
+ lineHeight: '1.4',
252
+ weight: '600',
253
+ tracking: '0.1em',
254
+ fontFamily: 'var(--smrt-font-family)',
255
+ },
256
+ };
257
+ /**
258
+ * SMRT elevation (light) — deep, soft, low-spread shadows.
259
+ *
260
+ * The workbench panels sit on big diffuse drop shadows with a tight inset
261
+ * hairline at level 1. Light scheme tints the shadow with the cool ink grey.
262
+ */
263
+ const elevation = {
264
+ 0: 'none',
265
+ 1: 'inset 0 0 0 1px rgba(20, 26, 36, 0.08)',
266
+ 2: '0 18px 44px -28px rgba(20, 26, 36, 0.18)',
267
+ 3: '0 24px 56px -34px rgba(20, 26, 36, 0.22)',
268
+ 4: '0 30px 70px -40px rgba(20, 26, 36, 0.28)',
269
+ 5: '0 40px 90px -50px rgba(20, 26, 36, 0.3)',
270
+ };
271
+ /**
272
+ * SMRT elevation (dark) — black drop shadows with a white inset hairline.
273
+ *
274
+ * Defined here (not only in the static `styles/smrt.css`) so the JS
275
+ * ThemeProvider output and the static dark CSS stay in lockstep (#1586).
276
+ */
277
+ const darkElevation = {
278
+ 0: 'none',
279
+ 1: 'inset 0 0 0 1px rgba(255, 255, 255, 0.06)',
280
+ 2: '0 18px 44px -28px rgba(0, 0, 0, 0.6)',
281
+ 3: '0 24px 56px -34px rgba(0, 0, 0, 0.72)',
282
+ 4: '0 30px 66px -40px rgba(0, 0, 0, 0.82)',
283
+ 5: '0 40px 90px -50px rgba(0, 0, 0, 0.88)',
284
+ };
285
+ /**
286
+ * SMRT easings — the workbench reveal curve as the emphasized easing.
287
+ */
288
+ const smrtEasing = {
289
+ standard: 'cubic-bezier(0.4, 0, 0.2, 1)',
290
+ standardDecelerate: 'cubic-bezier(0, 0, 0.2, 1)',
291
+ standardAccelerate: 'cubic-bezier(0.4, 0, 1, 1)',
292
+ emphasized: 'cubic-bezier(0.22, 1, 0.36, 1)',
293
+ emphasizedDecelerate: 'cubic-bezier(0.16, 1, 0.3, 1)',
294
+ emphasizedAccelerate: 'cubic-bezier(0.4, 0, 1, 1)',
295
+ };
296
+ /**
297
+ * SMRT theme definition
298
+ */
299
+ export const smrtTheme = {
300
+ id: 'smrt',
301
+ name: 'SMRT',
302
+ light: lightColors,
303
+ dark: darkColors,
304
+ typography,
305
+ elevation,
306
+ darkElevation,
307
+ spacing: spacingScale,
308
+ borderRadius: borderRadiusScale,
309
+ duration: durationScale,
310
+ easing: smrtEasing,
311
+ fontFamily: '"Inter", system-ui, -apple-system, "Segoe UI", sans-serif',
312
+ };
313
+ export default smrtTheme;
@@ -1,12 +1,16 @@
1
1
  /**
2
2
  * All Themes CSS
3
3
  *
4
- * Combined CSS file with all themes (Material, Glass, Studio).
4
+ * Combined CSS file with all themes (Material, Glass, Studio, SMRT).
5
5
  * Use this if your app supports runtime theme switching.
6
6
  *
7
- * @usage import '@smrt/svelte/themes/styles/all.css';
7
+ * Note: the SMRT theme's fonts are not imported here (they pull in woff2
8
+ * binaries). Import './fonts.css' explicitly if you want the SMRT type stack.
9
+ *
10
+ * @usage import '@happyvertical/smrt-ui/themes/styles/all.css';
8
11
  */
9
12
 
10
13
  @import './material.css';
11
14
  @import './glass.css';
12
15
  @import './studio.css';
16
+ @import './smrt.css';
@@ -0,0 +1,93 @@
1
+ /**
2
+ * SMRT Theme Fonts
3
+ *
4
+ * Self-hosted @font-face declarations for the SMRT theme's type stack:
5
+ * - Space Grotesk — display / headings
6
+ * - Inter — body / UI
7
+ * - JetBrains Mono — code, technical labels, instrument readouts
8
+ *
9
+ * These are the Google Fonts variable woff2 instances (latin + latin-ext
10
+ * subsets), bundled for privacy-first, CDN-free delivery. All three are
11
+ * licensed under the SIL Open Font License 1.1.
12
+ *
13
+ * Import alongside the theme tokens when you want the full workbench look:
14
+ *
15
+ * import '@happyvertical/smrt-ui/themes/styles/fonts.css';
16
+ * import '@happyvertical/smrt-ui/themes/styles/smrt.css';
17
+ *
18
+ * Font files are resolved relative to this stylesheet (../fonts/*.woff2) by
19
+ * your bundler. If you can't bundle the fonts, the theme falls back to
20
+ * system-ui / ui-monospace stacks automatically.
21
+ */
22
+
23
+ /* Space Grotesk — display (variable weight) */
24
+ @font-face {
25
+ font-family: 'Space Grotesk';
26
+ font-style: normal;
27
+ font-weight: 300 700;
28
+ font-display: swap;
29
+ src: url('../fonts/space-grotesk-latin.woff2') format('woff2');
30
+ unicode-range:
31
+ U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
32
+ U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
33
+ U+2215, U+FEFF, U+FFFD;
34
+ }
35
+ @font-face {
36
+ font-family: 'Space Grotesk';
37
+ font-style: normal;
38
+ font-weight: 300 700;
39
+ font-display: swap;
40
+ src: url('../fonts/space-grotesk-latin-ext.woff2') format('woff2');
41
+ unicode-range:
42
+ U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
43
+ U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
44
+ U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
45
+ }
46
+
47
+ /* Inter — body / UI (variable weight) */
48
+ @font-face {
49
+ font-family: 'Inter';
50
+ font-style: normal;
51
+ font-weight: 100 900;
52
+ font-display: swap;
53
+ src: url('../fonts/inter-latin.woff2') format('woff2');
54
+ unicode-range:
55
+ U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
56
+ U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
57
+ U+2215, U+FEFF, U+FFFD;
58
+ }
59
+ @font-face {
60
+ font-family: 'Inter';
61
+ font-style: normal;
62
+ font-weight: 100 900;
63
+ font-display: swap;
64
+ src: url('../fonts/inter-latin-ext.woff2') format('woff2');
65
+ unicode-range:
66
+ U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
67
+ U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
68
+ U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
69
+ }
70
+
71
+ /* JetBrains Mono — code / technical labels (variable weight) */
72
+ @font-face {
73
+ font-family: 'JetBrains Mono';
74
+ font-style: normal;
75
+ font-weight: 100 800;
76
+ font-display: swap;
77
+ src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
78
+ unicode-range:
79
+ U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
80
+ U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
81
+ U+2215, U+FEFF, U+FFFD;
82
+ }
83
+ @font-face {
84
+ font-family: 'JetBrains Mono';
85
+ font-style: normal;
86
+ font-weight: 100 800;
87
+ font-display: swap;
88
+ src: url('../fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
89
+ unicode-range:
90
+ U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
91
+ U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
92
+ U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
93
+ }
@@ -17,6 +17,9 @@ export declare const themeStyles: {
17
17
  readonly material: "./material.css";
18
18
  readonly glass: "./glass.css";
19
19
  readonly studio: "./studio.css";
20
+ readonly smrt: "./smrt.css";
21
+ /** @font-face declarations for the SMRT theme (Space Grotesk / Inter / JetBrains Mono). */
22
+ readonly fonts: "./fonts.css";
20
23
  readonly all: "./all.css";
21
24
  };
22
25
  //# sourceMappingURL=index.d.ts.map