@happyvertical/smrt-ui 0.55.16 → 0.55.17

package/dist/styles/tokens.css

@@ -1,78 +1,36 @@
 /**
- * SMRT Svelte Design Tokens
- * CSS custom properties for consistent theming across components
+ * SMRT design tokens: the baseline for the `--smrt-*` vocabulary (issue #3822).
+ *
+ * Only `--smrt-*` custom properties are defined here, and only the theme-invariant
+ * scales (spacing, radius, duration, touch targets). Colours and typography belong
+ * to the theme (`themes/styles/*.css`, `css-generator.ts`), so this file never
+ * defines a colour that a dark or branded theme would then be overridden by.
+ *
+ * Values match the default `smrt` theme, so importing this file alone does not
+ * change the default look. Component code consumes `--smrt-*` tokens only; see
+ * `scripts/check-smrt-token-vocabulary.mjs` for the lint gate.
  */
 
 :root {
   --smrt-touch-target-min: 48px;
   --smrt-control-target-min: 0px;
-  /* Colors - Primary */
-  --color-primary-main: #1976d2;
-  --color-primary-light: #e3f2fd;
-  --color-primary-dark: #1565c0;
-
-  /* Colors - Neutral */
-  --color-neutral-white: #ffffff;
-  --color-neutral-gray100: #f5f5f5;
-  --color-neutral-gray200: #eeeeee;
-  --color-neutral-gray300: #e0e0e0;
-  --color-neutral-gray400: #9ca3af;
-  --color-neutral-black: #000000;
-
-  /* Colors - Text */
-  --color-text-primary: #212121;
-  --color-text-secondary: #757575;
-  --color-text-inverse: #ffffff;
-
-  /* Colors - Semantic */
-  --color-semantic-error: #f44336;
-  --color-semantic-success: #4caf50;
-  --color-semantic-warning: #ff9800;
-  --color-semantic-info: #2196f3;
 
   /* Spacing */
-  --spacing-xs: 0.25rem;
-  --spacing-sm: 0.5rem;
-  --spacing-md: 1rem;
-  --spacing-lg: 1.5rem;
-  --spacing-xl: 2rem;
-  --spacing-2xl: 3rem;
-  --spacing-3xl: 4rem;
-
-  /* Font Sizes */
-  --font-size-xs: 0.75rem;
-  --font-size-sm: 0.875rem;
-  --font-size-base: 1rem;
-  --font-size-md: 1rem;
-  --font-size-lg: 1.125rem;
-  --font-size-xl: 1.25rem;
-  --font-size-2xl: 1.5rem;
-  --font-size-3xl: 2rem;
-
-  /* Font Weights */
-  --font-weight-normal: 400;
-  --font-weight-medium: 500;
-  --font-weight-semibold: 600;
-  --font-weight-bold: 700;
-
-  /* Border Radius */
-  --radius-sm: 0.25rem;
-  --radius-md: 0.5rem;
-  --radius-lg: 0.75rem;
-  --radius-xl: 1rem;
-  --radius-full: 9999px;
-  --border-radius-sm: 0.25rem;
-  --border-radius-md: 0.5rem;
-  --border-radius-lg: 0.75rem;
-
-  /* Shadows */
-  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
-  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
-  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
-
-  /* Transitions */
-  --transition-base: 150ms cubic-bezier(0.4, 0, 0.2, 1);
-  --transition-fast: 150ms;
-  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  --smrt-spacing-xs: 0.25rem;
+  --smrt-spacing-sm: 0.5rem;
+  --smrt-spacing-md: 1rem;
+  --smrt-spacing-lg: 1.5rem;
+  --smrt-spacing-xl: 2rem;
+  --smrt-spacing-2xl: 3rem;
+  --smrt-spacing-3xl: 4rem;
+
+  /* Radius */
+  --smrt-radius-sm: 0.25rem;
+  --smrt-radius-md: 0.5rem;
+  --smrt-radius-lg: 0.75rem;
+  --smrt-radius-xl: 1rem;
+  --smrt-radius-full: 9999px;
+
+  /* Motion */
+  --smrt-duration-fast: 100ms;
 }

package/dist/styles/unstyled.css

@@ -0,0 +1,65 @@
+/*
+ * Styleless mode for smrt components (#3825).
+ *
+ *   import '@happyvertical/smrt-ui/styles/unstyled.css';
+ *
+ * Components keep their layout (display, flex/grid, gap, padding, position,
+ * sizing) and lose their look (colour, background, border, radius, shadow,
+ * font, outline, filter). Every rule here lives in a smrt layer, so unlayered
+ * consumer CSS still wins, whatever the import order. Restyle with unlayered
+ * CSS, the --smrt-* tokens, or the data-smrt-component / data-smrt-part hooks.
+ *
+ * The reverted property list is explicit on purpose. `all: revert-layer` would
+ * also drop layout declarations, because until per-package structure/theme
+ * sorting lands every component rule sits in smrt.theme. Keep this list in
+ * step with the "Styleless mode" section of agents/styling.md.
+ */
+@layer smrt.reset, smrt.structure, smrt.theme;
+
+/*
+ * Reset: once the look is stripped, text inherits the page typography instead
+ * of the browser's serif default, and form controls drop their UA chrome.
+ */
+@layer smrt.reset {
+  :is([data-smrt-component], [data-smrt-component] *) {
+    font: inherit;
+  }
+
+  :is([data-smrt-component], [data-smrt-component] *):is(
+      button,
+      input,
+      select,
+      textarea
+    ) {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+  }
+}
+
+/*
+ * Revert the look back to smrt.structure (and then the reset). The :not(#\#)
+ * x3 boost gives specificity (3,1,0), which beats Svelte's hashed .svelte-*
+ * class selectors without !important.
+ */
+@layer smrt.theme {
+  :is([data-smrt-component], [data-smrt-component] *):not(#\#):not(#\#):not(#\#) {
+    background: revert-layer;
+    border: revert-layer;
+    border-radius: revert-layer;
+    box-shadow: revert-layer;
+    color: revert-layer;
+    font: revert-layer;
+    letter-spacing: revert-layer;
+    text-decoration: revert-layer;
+    text-transform: revert-layer;
+    text-shadow: revert-layer;
+    outline: revert-layer;
+    filter: revert-layer;
+    backdrop-filter: revert-layer;
+  }
+}

package/dist/svelte/playground/BaseControlsPreview.svelte

@@ -108,6 +108,8 @@ function handleSubmit() {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .workbench {
     display: grid;
     gap: var(--smrt-spacing-6);
@@ -230,4 +232,5 @@ function handleSubmit() {
       text-align: left;
     }
   }
+}
 </style>

package/dist/svelte/playground/CalendarPreview.svelte

@@ -109,6 +109,8 @@ const items: CalendarItem[] = [
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .workbench {
     display: grid;
     gap: var(--smrt-spacing-4, 1rem);
@@ -123,7 +125,7 @@ const items: CalendarItem[] = [
 
   .eyebrow {
     margin: 0;
-    color: var(--smrt-color-on-surface-variant, #44474e);
+    color: var(--smrt-color-on-surface-variant);
     font-size: var(--smrt-typography-label-medium-size, 0.75rem);
     text-transform: uppercase;
   }
@@ -136,6 +138,7 @@ const items: CalendarItem[] = [
   .picked {
     margin: 0;
     min-height: 1.5rem;
-    color: var(--smrt-color-on-surface-variant, #44474e);
+    color: var(--smrt-color-on-surface-variant);
   }
+}
 </style>

package/dist/svelte/playground/CapturePreview.svelte

@@ -46,6 +46,8 @@ function describeSubmission(
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .workbench { display: grid; gap: var(--smrt-spacing-5); color: var(--smrt-color-on-surface); }
   header { display: grid; gap: var(--smrt-spacing-2); }
   h4, p { margin: 0; } h4 { font: var(--smrt-typography-headline-small-font); }
@@ -53,4 +55,5 @@ function describeSubmission(
   .eyebrow { color: var(--smrt-color-primary); font: var(--smrt-typography-label-small-font); letter-spacing: .1em; text-transform: uppercase; }
   form { display: grid; gap: var(--smrt-spacing-6); }
   section { display: grid; gap: var(--smrt-spacing-3); min-width: 0; }
+}
 </style>

package/dist/svelte/playground/CodeSelectorsPreview.svelte

@@ -24,6 +24,9 @@ let submitted = $state('');
   <output aria-label="Submitted codes">{submitted}</output>
 </div>
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
 .selectors { display: grid; gap: 1rem; max-width: 40rem; color: var(--smrt-color-on-surface); }
 output { overflow-wrap: anywhere; }
+}
 </style>

package/dist/svelte/playground/CollectionsPreview.svelte

@@ -52,8 +52,11 @@ const filtered = $derived(
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .workbench { display: grid; gap: var(--smrt-spacing-4); color: var(--smrt-color-on-surface); }
   header { padding-bottom: var(--smrt-spacing-4); border-bottom: 1px solid var(--smrt-color-outline-variant); } h4, p { margin: 0; } h4 { font: var(--smrt-typography-headline-small-font); } header > p:last-child { max-width: 48rem; margin-top: var(--smrt-spacing-1); color: var(--smrt-color-on-surface-variant); }
   .eyebrow { color: var(--smrt-color-primary); font: var(--smrt-typography-label-small-font); letter-spacing: .1em; text-transform: uppercase; }
   .status { padding: var(--smrt-spacing-1) var(--smrt-spacing-2); border-radius: var(--smrt-radius-full); background: var(--smrt-color-secondary-container); color: var(--smrt-color-on-secondary-container); font: var(--smrt-typography-label-small-font); }
+}
 </style>

package/dist/svelte/playground/DataTablePreview.svelte

@@ -494,6 +494,8 @@ function selectAllMatching() {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .workbench {
     display: grid;
     gap: var(--smrt-spacing-5);
@@ -634,4 +636,5 @@ function selectAllMatching() {
       margin-left: 0;
     }
   }
+}
 </style>

package/dist/svelte/playground/FeedbackPreview.svelte

@@ -38,6 +38,8 @@ const menu = [
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .workbench { display: grid; gap: var(--smrt-spacing-6); color: var(--smrt-color-on-surface); }
   header, .actions, .interaction-row { display: flex; align-items: center; gap: var(--smrt-spacing-3); } header { justify-content: space-between; padding-bottom: var(--smrt-spacing-4); border-bottom: 1px solid var(--smrt-color-outline-variant); }
   h4, h5, p { margin: 0; } h4 { font: var(--smrt-typography-headline-small-font); } h5 { margin-bottom: var(--smrt-spacing-3); font: var(--smrt-typography-title-medium-font); }
@@ -48,4 +50,5 @@ const menu = [
   .interaction-row { flex-wrap: wrap; align-items: flex-start; margin-bottom: var(--smrt-spacing-3); }
   .slider { display: grid; max-width: 24rem; gap: var(--smrt-spacing-2); } .slider label { display: flex; justify-content: space-between; } input { accent-color: var(--smrt-color-primary); }
   @media (max-width: 760px) { header { align-items: flex-start; flex-direction: column; } .progress-grid { grid-template-columns: 1fr; } }
+}
 </style>

package/dist/svelte/playground/InteractiveControlsPreview.svelte

@@ -115,6 +115,8 @@ const identity = (controlId: string) => ({
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .workbench { display: grid; gap: var(--smrt-spacing-5); color: var(--smrt-color-on-surface); }
   header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--smrt-spacing-5); padding-bottom: var(--smrt-spacing-4); border-bottom: 1px solid var(--smrt-color-outline-variant); }
   h4, h5, p { margin: 0; } h4 { font: var(--smrt-typography-headline-small-font); } h5 { margin-bottom: var(--smrt-spacing-3); font: var(--smrt-typography-title-medium-font); }
@@ -127,4 +129,5 @@ const identity = (controlId: string) => ({
   .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--smrt-spacing-5); align-items: start; }
   .grid.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
   @media (max-width: 900px) { header { flex-direction: column; } .agent-actions { justify-content: flex-start; } .grid, .grid.compact { grid-template-columns: 1fr; } }
+}
 </style>

package/dist/svelte/playground/StylelessPreview.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+import Alert from '../../components/feedback/Alert.svelte';
+import Input from '../../components/forms/Input.svelte';
+import Select from '../../components/forms/Select.svelte';
+import Tabs from '../../components/nav/Tabs.svelte';
+import Badge from '../../components/ui/Badge.svelte';
+import Button from '../../components/ui/Button.svelte';
+import Card from '../../components/ui/Card.svelte';
+import Chip from '../../components/ui/Chip.svelte';
+import unstyledCss from '../../styles/unstyled.css?inline';
+
+// Native checkbox, outside the catalogue, so the toggle itself is never stripped.
+let styleless = $state(false);
+let active = $state('overview');
+
+// Svelte does not interpolate text inside a style element, so the stylesheet is
+// appended to the document head imperatively while the toggle is on.
+$effect(() => {
+  if (!styleless) return;
+  const style = document.createElement('style');
+  style.setAttribute('data-smrt-styleless', '');
+  style.textContent = unstyledCss;
+  document.head.appendChild(style);
+  return () => style.remove();
+});
+const tabs = [
+  { id: 'overview', label: 'Overview' },
+  { id: 'activity', label: 'Activity' },
+  { id: 'settings', label: 'Settings' },
+];
+</script>
+
+
+
+<div class="workbench">
+  <header>
+    <div>
+      <p class="eyebrow">Styleless mode</p>
+      <h4>Layout kept, look removed</h4>
+    </div>
+    <label class="toggle">
+      <input type="checkbox" bind:checked={styleless} />
+      Apply unstyled.css
+    </label>
+  </header>
+
+  <p class="note">
+    With the toggle on, every component below keeps its layout and loses its
+    themed look. The page chrome is not a smrt component, so it is unaffected.
+  </p>
+
+  <div class="catalogue">
+    <section>
+      <h5>Buttons and badges</h5>
+      <div class="row">
+        <Button>Primary</Button>
+        <Button variant="secondary">Secondary</Button>
+        <Badge>Draft</Badge>
+        <Chip label="Filter" />
+      </div>
+    </section>
+
+    <section>
+      <h5>Card</h5>
+      <Card>
+        {#snippet header()}<strong>Workspace</strong>{/snippet}
+        <p>Card body text keeps its spacing and flow.</p>
+        {#snippet footer()}<Button size="sm">Open</Button>{/snippet}
+      </Card>
+    </section>
+
+    <section>
+      <h5>Alert</h5>
+      <Alert title="Information">The index refreshes in the background.</Alert>
+    </section>
+
+    <section>
+      <h5>Form controls</h5>
+      <div class="row">
+        <Input name="styleless-name" placeholder="Name" />
+        <Select name="styleless-role">
+          <option value="owner">Owner</option>
+          <option value="member">Member</option>
+        </Select>
+      </div>
+    </section>
+
+    <section>
+      <h5>Tabs</h5>
+      <Tabs {tabs} {active} onchange={(id) => (active = id)} />
+    </section>
+  </div>
+</div>
+
+<style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
+  .workbench { display: grid; gap: var(--smrt-spacing-6); color: var(--smrt-color-on-surface); }
+  header { display: flex; align-items: center; justify-content: space-between; gap: var(--smrt-spacing-3); padding-bottom: var(--smrt-spacing-4); border-bottom: 1px solid var(--smrt-color-outline-variant); }
+  h4, h5, p { margin: 0; }
+  h4 { font: var(--smrt-typography-headline-small-font); }
+  h5 { margin-bottom: var(--smrt-spacing-3); font: var(--smrt-typography-title-medium-font); }
+  .eyebrow { color: var(--smrt-color-primary); font: var(--smrt-typography-label-small-font); letter-spacing: .1em; text-transform: uppercase; }
+  .note { color: var(--smrt-color-on-surface-variant); font: var(--smrt-typography-body-medium-font); }
+  .toggle { display: inline-flex; align-items: center; gap: var(--smrt-spacing-2); }
+  .catalogue { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--smrt-spacing-5); }
+  .catalogue > section { display: grid; align-content: start; gap: var(--smrt-spacing-2); }
+  .row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--smrt-spacing-3); }
+}
+</style>

package/dist/svelte/playground/StylelessPreview.svelte.d.ts

@@ -0,0 +1,4 @@
+declare const StylelessPreview: import("svelte").Component<Record<string, never>, {}, "">;
+type StylelessPreview = ReturnType<typeof StylelessPreview>;
+export default StylelessPreview;
+//# sourceMappingURL=StylelessPreview.svelte.d.ts.map

package/dist/svelte/playground/StylelessPreview.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StylelessPreview.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/playground/StylelessPreview.svelte.ts"],"names":[],"mappings":"AA+GA,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/svelte/playground.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"playground.d.ts","sourceRoot":"","sources":["../../src/svelte/playground.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,wBAyGE"}
+{"version":3,"file":"playground.d.ts","sourceRoot":"","sources":["../../src/svelte/playground.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,wBAmHE"}

package/dist/svelte/playground.js

@@ -6,6 +6,7 @@ const loadCollections = () => import('./playground/CollectionsPreview.svelte');
 const loadCalendar = () => import('./playground/CalendarPreview.svelte');
 const loadCapture = () => import('./playground/CapturePreview.svelte');
 const loadPermissionPicker = () => import('./playground/PermissionPickerPreview.svelte');
+const loadStyleless = () => import('./playground/StylelessPreview.svelte');
 export default {
     packageName: '@happyvertical/smrt-ui',
     displayName: 'UI Foundation',
@@ -100,5 +101,14 @@ export default {
             tags: ['forms', 'camera', 'signature', 'files'],
             modes: { mock: { label: 'Interactive' } },
         },
+        {
+            id: 'styleless-mode',
+            title: 'Styleless Mode',
+            description: 'Toggle unstyled.css across the catalogue: components keep layout and drop their themed look, so consumer CSS can restyle them.',
+            loadComponent: loadStyleless,
+            order: 10,
+            tags: ['styling', 'styleless', 'layers', 'restyling'],
+            modes: { mock: { label: 'Interactive' } },
+        },
     ],
 };

package/dist/test-support/setup.js

@@ -40,3 +40,12 @@ if (typeof HTMLDialogElement !== 'undefined') {
         };
     }
 }
+// jsdom has no Web Animations API. Svelte's `animate:` directive (list FLIP)
+// and transitions call `element.getAnimations()`; an empty list is accurate
+// here because jsdom never runs CSS animations.
+if (typeof Element !== 'undefined' &&
+    typeof Element.prototype.getAnimations !== 'function') {
+    Element.prototype.getAnimations = function getAnimations() {
+        return [];
+    };
+}

package/dist/theme/ThemeProvider.svelte

@@ -200,8 +200,11 @@ $effect(() => {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-theme-root {
     /* Ensure theme variables cascade to all children */
     display: contents;
   }
+}
 </style>

package/dist/themes/CUSTOM_THEME_GUIDE.md

@@ -318,6 +318,31 @@ npm install ./packages/my-brand-theme
 <ThemeSwitcher variant="segmented" />
 ```
 
+## Required Tokens
+
+A theme is complete only when it defines every token the components consume. The list below is generated from the `var(--smrt-*)` references in the packages' `.svelte` files; `src/themes/__tests__/required-tokens.test.ts` asserts every preset and `createTheme()` output defines each one.
+
+<!-- smrt-required-tokens:start -->
+
+### Required tokens (generated)
+
+Every theme (presets and `createTheme()` output) must define these names. Generated by
+`scripts/generate-smrt-required-tokens.mjs`; do not edit by hand. Component-private
+`--smrt-<component>-*` knobs are excluded.
+
+- **color** (40): `--smrt-color-background`, `--smrt-color-error`, `--smrt-color-error-container`, `--smrt-color-inverse-on-surface`, `--smrt-color-inverse-surface`, `--smrt-color-on-background`, `--smrt-color-on-error`, `--smrt-color-on-error-container`, `--smrt-color-on-primary`, `--smrt-color-on-primary-container`, `--smrt-color-on-secondary`, `--smrt-color-on-secondary-container`, `--smrt-color-on-success-container`, `--smrt-color-on-surface`, `--smrt-color-on-surface-variant`, `--smrt-color-on-tertiary`, `--smrt-color-on-tertiary-container`, `--smrt-color-on-warning-container`, `--smrt-color-outline`, `--smrt-color-outline-variant`, `--smrt-color-primary`, `--smrt-color-primary-container`, `--smrt-color-scrim`, `--smrt-color-secondary`, `--smrt-color-secondary-container`, `--smrt-color-shadow`, `--smrt-color-success`, `--smrt-color-success-container`, `--smrt-color-surface`, `--smrt-color-surface-container`, `--smrt-color-surface-container-high`, `--smrt-color-surface-container-highest`, `--smrt-color-surface-container-low`, `--smrt-color-surface-container-lowest`, `--smrt-color-surface-dim`, `--smrt-color-surface-variant`, `--smrt-color-tertiary`, `--smrt-color-tertiary-container`, `--smrt-color-warning`, `--smrt-color-warning-container`
+- **duration** (6): `--smrt-duration-fast`, `--smrt-duration-medium1`, `--smrt-duration-normal`, `--smrt-duration-short2`, `--smrt-duration-short3`, `--smrt-duration-short4`
+- **easing** (3): `--smrt-easing-emphasized`, `--smrt-easing-emphasized-decelerate`, `--smrt-easing-standard`
+- **elevation** (5): `--smrt-elevation-1`, `--smrt-elevation-2`, `--smrt-elevation-3`, `--smrt-elevation-4`, `--smrt-elevation-5`
+- **font** (2): `--smrt-font-family`, `--smrt-font-family-mono`
+- **radius** (11): `--smrt-radius-2xl`, `--smrt-radius-extra-large`, `--smrt-radius-extra-small`, `--smrt-radius-full`, `--smrt-radius-large`, `--smrt-radius-lg`, `--smrt-radius-md`, `--smrt-radius-medium`, `--smrt-radius-sm`, `--smrt-radius-small`, `--smrt-radius-xl`
+- **spacing** (19): `--smrt-spacing-0_5`, `--smrt-spacing-1`, `--smrt-spacing-10`, `--smrt-spacing-11`, `--smrt-spacing-12`, `--smrt-spacing-1_5`, `--smrt-spacing-2`, `--smrt-spacing-2xl`, `--smrt-spacing-3`, `--smrt-spacing-3xl`, `--smrt-spacing-4`, `--smrt-spacing-5`, `--smrt-spacing-6`, `--smrt-spacing-8`, `--smrt-spacing-lg`, `--smrt-spacing-md`, `--smrt-spacing-sm`, `--smrt-spacing-xl`, `--smrt-spacing-xs`
+- **touch** (1): `--smrt-touch-target-min`
+- **typography** (56): `--smrt-typography-body-large-font`, `--smrt-typography-body-large-line-height`, `--smrt-typography-body-large-size`, `--smrt-typography-body-large-tracking`, `--smrt-typography-body-medium-font`, `--smrt-typography-body-medium-line-height`, `--smrt-typography-body-medium-size`, `--smrt-typography-body-medium-tracking`, `--smrt-typography-body-medium-weight`, `--smrt-typography-body-small-font`, `--smrt-typography-body-small-line-height`, `--smrt-typography-body-small-size`, `--smrt-typography-body-small-weight`, `--smrt-typography-display-medium-line-height`, `--smrt-typography-display-medium-size`, `--smrt-typography-display-small-size`, `--smrt-typography-headline-large-line-height`, `--smrt-typography-headline-large-size`, `--smrt-typography-headline-large-weight`, `--smrt-typography-headline-medium-line-height`, `--smrt-typography-headline-medium-size`, `--smrt-typography-headline-medium-weight`, `--smrt-typography-headline-small-font`, `--smrt-typography-headline-small-line-height`, `--smrt-typography-headline-small-size`, `--smrt-typography-headline-small-weight`, `--smrt-typography-label-large-font`, `--smrt-typography-label-large-size`, `--smrt-typography-label-large-tracking`, `--smrt-typography-label-large-weight`, `--smrt-typography-label-medium-font`, `--smrt-typography-label-medium-size`, `--smrt-typography-label-medium-tracking`, `--smrt-typography-label-medium-weight`, `--smrt-typography-label-small-font`, `--smrt-typography-label-small-line-height`, `--smrt-typography-label-small-size`, `--smrt-typography-label-small-tracking`, `--smrt-typography-label-small-weight`, `--smrt-typography-title-large-font`, `--smrt-typography-title-large-line-height`, `--smrt-typography-title-large-size`, `--smrt-typography-title-medium-font`, `--smrt-typography-title-medium-font-family`, `--smrt-typography-title-medium-line-height`, `--smrt-typography-title-medium-size`, `--smrt-typography-title-medium-tracking`, `--smrt-typography-title-medium-weight`, `--smrt-typography-title-small-font`, `--smrt-typography-title-small-size`, `--smrt-typography-title-small-tracking`, `--smrt-typography-title-small-weight`, `--smrt-typography-weight-bold`, `--smrt-typography-weight-medium`, `--smrt-typography-weight-normal`, `--smrt-typography-weight-semibold`
+- **z** (7): `--smrt-z-index-dialog`, `--smrt-z-index-dropdown`, `--smrt-z-index-modal`, `--smrt-z-index-overlay`, `--smrt-z-index-sticky`, `--smrt-z-index-toast`, `--smrt-z-index-tooltip`
+
+<!-- smrt-required-tokens:end -->
+
 ## Best Practices
 
 1. **Extend a base theme**: Start with `extend: 'material'` or another base to get sensible defaults

package/dist/themes/README.md

@@ -74,6 +74,9 @@ const autoTheme = createThemeFromColor('#6366f1', 'indigo', 'Indigo Theme');
 registerTheme(autoTheme);
 ```
 
+Generated dark themes use tonal primary colors so primary text and icon
+containers remain readable even when the brand seed is very dark.
+
 ### Full Custom Theme with All Options
 
 ```typescript
@@ -605,6 +608,28 @@ All themes expose CSS custom properties:
 --smrt-easing-standard
 ```
 
+### One vocabulary: `--smrt-*` only
+
+`--smrt-*` is the only token namespace. Component CSS consumes these tokens and
+nothing else; the legacy `--color-*`, `--spacing-*`, `--radius-*`, `--md-sys-*`
+families were removed (issue #3822). Three rules follow:
+
+- **Consume a token, don't invent one.** Use `var(--smrt-color-primary)` etc. Hard
+  colour or spacing literals belong in a theme, not a component.
+- **A component-private variable is `--smrt-<component>-<name>`**, declared on the
+  component root (for example `--smrt-toast-viewport-inset`). A parent or app may set
+  it. It is not a theme token and should not be read from outside the component.
+- **Overrides go through a theme or a documented hook**, never a `:global` rule or
+  `!important`. Unlayered app CSS still wins over the component's own styles.
+
+`packages/smrt-ui/src/styles/tokens.css` defines the theme-invariant baseline only
+(spacing, radius, duration, touch targets). Colour and typography come from a theme.
+
+The lint gate `scripts/check-smrt-token-vocabulary.mjs` runs in `pnpm lint` and fails
+on any custom property outside `--smrt-*` in `packages/*/src`. The one-time rewrite
+was `scripts/codemod-smrt-tokens.mjs`; it is idempotent, so re-run it after a rebase
+instead of hand-merging renamed names.
+
 ## Advanced Usage
 
 ### Build-Time Theming

package/dist/themes/ThemeProvider.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 import type { Snippet } from 'svelte';
 import { onMount, untrack } from 'svelte';
+import { SMRT_CASCADE_LAYERS_CSS } from '../styles/layers.js';
 import { setThemeContext, type ThemeContext } from './context.svelte.js';
 import { generateThemeVariables } from './css-generator.js';
 import { availablePresets, getTheme, isValidPreset } from './registry.js';
@@ -130,7 +131,7 @@ const styleString = $derived.by(() => {
 
   if (density !== undefined) {
     declarations.push(
-      `--smrt-control-target-min: ${density === 'touch' ? 'var(--smrt-touch-target-min, 48px)' : '0px'}`,
+      `--smrt-control-target-min: ${density === 'touch' ? 'var(--smrt-touch-target-min)' : '0px'}`,
     );
   }
 
@@ -341,6 +342,11 @@ $effect(() => {
 });
 </script>
 
+<svelte:head>
+  <!-- Declares the smrt cascade layer order before any layered component rule (#3823). -->
+  <svelte:element this={'style'} id="smrt-cascade-layers">{SMRT_CASCADE_LAYERS_CSS}</svelte:element>
+</svelte:head>
+
 <div
   class="smrt-theme-root"
   class:dark={isDark}
@@ -348,12 +354,14 @@ $effect(() => {
   class:smrt-theme-glass={config.preset === 'glass'}
   style={styleString || undefined}
   data-theme={config.preset}
-  data-color-scheme={resolvedScheme}
+  data-color-scheme={resolvedScheme} data-smrt-component="ThemeProvider"
 >
   {@render children()}
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-theme-root {
     /* Ensure theme variables cascade properly */
     /* Note: Using block display instead of contents so styles apply correctly */
@@ -385,4 +393,5 @@ $effect(() => {
     outline: 2px solid var(--smrt-color-primary);
     outline-offset: 2px;
   }
+}
 </style>

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

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