@assure-one/design-system 1.31.0 → 1.33.0

package/dist/css/shadcn.css

@@ -0,0 +1,155 @@
+/* GENERATED FILE — do not edit.
+ * The app-vocabulary bridge (ADR-005): the shadcn-style theme keys consuming
+ * applications write, defined once here instead of copied into every app's
+ * globals.css. Each key reads one `--app-*` input and falls back to a DS token,
+ * so an app changes a meaning by setting that input — and nothing else.
+ * Optional: import it after css/tokens.css, and only if the app uses this
+ * vocabulary. The file declares no custom property of its own.
+ * Source: tokens/src/bridges/shadcn.map.json. Generator:
+ * tokens/build/generate-shadcn-bridge.mjs. Change the map and run
+ * `pnpm tokens:build`; `pnpm tokens:check` fails when this file is out of date.
+ *
+ * The inputs an app may set, and what each falls back to:
+ *   --app-background                var(--ds-color-canvas)
+ *   --app-foreground                var(--ds-color-content)
+ *   --app-card                      var(--ds-color-surface)
+ *   --app-card-foreground           var(--ds-color-content)
+ *   --app-popover                   var(--ds-color-surface)
+ *   --app-popover-foreground        var(--ds-color-content)
+ *   --app-surface-2                 var(--ds-color-surface-sunken)
+ *   --app-surface-3                 var(--ds-color-surface-sunken-strong)
+ *   --app-muted                     var(--ds-color-canvas-sunken)
+ *   --app-muted-foreground          var(--ds-color-content-muted)
+ *   --app-overlay                   var(--ds-color-scrim)
+ *   --app-primary                   var(--ds-color-action-brand-bg)
+ *   --app-primary-foreground        var(--ds-color-action-brand-fg)
+ *   --app-secondary                 var(--ds-color-canvas-sunken)
+ *   --app-secondary-foreground      var(--ds-color-content-secondary)
+ *   --app-accent                    var(--ds-color-action-brand-subtle-bg)
+ *   --app-accent-foreground         var(--ds-compat-color-brand-soft-foreground)
+ *   --app-brand                     var(--ds-color-action-brand-bg)
+ *   --app-brand-foreground          var(--ds-color-action-brand-fg)
+ *   --app-brand-hover               var(--ds-color-action-brand-bg-hover)
+ *   --app-brand-soft                var(--ds-compat-color-brand-soft)
+ *   --app-brand-soft-foreground     var(--ds-compat-color-brand-soft-foreground)
+ *   --app-brand-soft-hover          var(--ds-color-action-brand-subtle-bg-hover)
+ *   --app-brand-ring                var(--ds-color-action-brand-ring)
+ *   --app-destructive               var(--ds-color-feedback-danger-fg)
+ *   --app-destructive-solid         var(--ds-color-feedback-danger-fg)
+ *   --app-success                   var(--ds-color-feedback-success-fg)
+ *   --app-success-solid             var(--ds-color-feedback-success-fg)
+ *   --app-warning                   var(--ds-color-feedback-warning-fg)
+ *   --app-warning-solid             var(--ds-color-feedback-warning-fg)
+ *   --app-info                      var(--ds-color-feedback-info-fg)
+ *   --app-info-solid                var(--ds-color-feedback-info-fg)
+ *   --app-destructive-foreground    var(--ds-compat-color-destructive-foreground)
+ *   --app-success-foreground        var(--ds-compat-color-success-foreground)
+ *   --app-warning-foreground        var(--ds-color-feedback-warning-solid-fg)
+ *   --app-info-foreground           var(--ds-color-feedback-info-solid-fg)
+ *   --app-border                    var(--ds-color-border)
+ *   --app-input                     var(--ds-color-border-strong)
+ *   --app-input-background          var(--ds-color-surface)
+ *   --app-switch-background         var(--ds-color-canvas-sunken-strong)
+ *   --app-ring                      var(--ds-color-border-focus)
+ *   --app-chart-1                   var(--ds-color-chart-1)
+ *   --app-chart-2                   var(--ds-color-chart-2)
+ *   --app-chart-3                   var(--ds-color-chart-3)
+ *   --app-chart-4                   var(--ds-color-chart-4)
+ *   --app-chart-5                   var(--ds-color-chart-4)
+ *   --app-sidebar                   var(--ds-color-surface)
+ *   --app-sidebar-foreground        var(--ds-color-content)
+ *   --app-sidebar-primary           var(--ds-color-action-brand-bg)
+ *   --app-sidebar-primary-foregroundvar(--ds-color-action-brand-fg)
+ *   --app-sidebar-accent            var(--ds-color-canvas-sunken)
+ *   --app-sidebar-accent-foreground var(--ds-color-content)
+ *   --app-sidebar-border            var(--ds-color-border)
+ *   --app-sidebar-ring              var(--ds-color-border-focus)
+ *   --app-radius                    var(--ds-radius-surface)
+ *   --app-radius                    var(--ds-radius-surface)
+ *   --app-radius                    var(--ds-radius-surface)
+ *   --app-radius                    var(--ds-radius-surface)
+ *   --app-radius                    var(--ds-radius-surface)
+ *   --app-radius                    var(--ds-radius-surface)
+ *   --app-radius                    var(--ds-radius-surface)
+ */
+
+@layer theme, base, ds, components, utilities;
+
+@theme inline {
+  /* Surfaces and content. */
+  --color-background: var(--app-background, var(--ds-color-canvas));
+  --color-foreground: var(--app-foreground, var(--ds-color-content));
+  --color-card: var(--app-card, var(--ds-color-surface));
+  --color-card-foreground: var(--app-card-foreground, var(--ds-color-content));
+  --color-popover: var(--app-popover, var(--ds-color-surface));
+  --color-popover-foreground: var(--app-popover-foreground, var(--ds-color-content));
+  --color-surface-2: var(--app-surface-2, var(--ds-color-surface-sunken));
+  --color-surface-3: var(--app-surface-3, var(--ds-color-surface-sunken-strong));
+  --color-muted: var(--app-muted, var(--ds-color-canvas-sunken));
+  --color-muted-foreground: var(--app-muted-foreground, var(--ds-color-content-muted));
+  --color-overlay: var(--app-overlay, var(--ds-color-scrim));
+
+  /* The three contested words — each app owns the meaning (D3a). */
+  --color-primary: var(--app-primary, var(--ds-color-action-brand-bg));
+  --color-primary-foreground: var(--app-primary-foreground, var(--ds-color-action-brand-fg));
+  --color-secondary: var(--app-secondary, var(--ds-color-canvas-sunken));
+  --color-secondary-foreground: var(--app-secondary-foreground, var(--ds-color-content-secondary));
+  --color-accent: var(--app-accent, var(--ds-color-action-brand-subtle-bg));
+  --color-accent-foreground: var(--app-accent-foreground, var(--ds-compat-color-brand-soft-foreground));
+
+  /* Brand. */
+  --color-brand: var(--app-brand, var(--ds-color-action-brand-bg));
+  --color-brand-foreground: var(--app-brand-foreground, var(--ds-color-action-brand-fg));
+  --color-brand-hover: var(--app-brand-hover, var(--ds-color-action-brand-bg-hover));
+  --color-brand-soft: var(--app-brand-soft, var(--ds-compat-color-brand-soft));
+  --color-brand-soft-foreground: var(--app-brand-soft-foreground, var(--ds-compat-color-brand-soft-foreground));
+  --color-brand-soft-hover: var(--app-brand-soft-hover, var(--ds-color-action-brand-subtle-bg-hover));
+  --color-brand-ring: var(--app-brand-ring, var(--ds-color-action-brand-ring));
+
+  /* Feedback. `<name>` is the text-safe tone, `<name>-solid` the fill (D3b). */
+  --color-destructive: var(--app-destructive, var(--ds-color-feedback-danger-fg));
+  --color-destructive-solid: var(--app-destructive-solid, var(--ds-color-feedback-danger-fg));
+  --color-success: var(--app-success, var(--ds-color-feedback-success-fg));
+  --color-success-solid: var(--app-success-solid, var(--ds-color-feedback-success-fg));
+  --color-warning: var(--app-warning, var(--ds-color-feedback-warning-fg));
+  --color-warning-solid: var(--app-warning-solid, var(--ds-color-feedback-warning-fg));
+  --color-info: var(--app-info, var(--ds-color-feedback-info-fg));
+  --color-info-solid: var(--app-info-solid, var(--ds-color-feedback-info-fg));
+  --color-destructive-foreground: var(--app-destructive-foreground, var(--ds-compat-color-destructive-foreground));
+  --color-success-foreground: var(--app-success-foreground, var(--ds-compat-color-success-foreground));
+  --color-warning-foreground: var(--app-warning-foreground, var(--ds-color-feedback-warning-solid-fg));
+  --color-info-foreground: var(--app-info-foreground, var(--ds-color-feedback-info-solid-fg));
+
+  /* Lines, controls and focus. */
+  --color-border: var(--app-border, var(--ds-color-border));
+  --color-input: var(--app-input, var(--ds-color-border-strong));
+  --color-input-background: var(--app-input-background, var(--ds-color-surface));
+  --color-switch-background: var(--app-switch-background, var(--ds-color-canvas-sunken-strong));
+  --color-ring: var(--app-ring, var(--ds-color-border-focus));
+
+  /* Data visualisation. */
+  --color-chart-1: var(--app-chart-1, var(--ds-color-chart-1));
+  --color-chart-2: var(--app-chart-2, var(--ds-color-chart-2));
+  --color-chart-3: var(--app-chart-3, var(--ds-color-chart-3));
+  --color-chart-4: var(--app-chart-4, var(--ds-color-chart-4));
+  --color-chart-5: var(--app-chart-5, var(--ds-color-chart-4));
+
+  /* Shell. */
+  --color-sidebar: var(--app-sidebar, var(--ds-color-surface));
+  --color-sidebar-foreground: var(--app-sidebar-foreground, var(--ds-color-content));
+  --color-sidebar-primary: var(--app-sidebar-primary, var(--ds-color-action-brand-bg));
+  --color-sidebar-primary-foreground: var(--app-sidebar-primary-foreground, var(--ds-color-action-brand-fg));
+  --color-sidebar-accent: var(--app-sidebar-accent, var(--ds-color-canvas-sunken));
+  --color-sidebar-accent-foreground: var(--app-sidebar-accent-foreground, var(--ds-color-content));
+  --color-sidebar-border: var(--app-sidebar-border, var(--ds-color-border));
+  --color-sidebar-ring: var(--app-sidebar-ring, var(--ds-color-border-focus));
+
+  /* The app radius scale, derived from one base (D1). */
+  --radius-sm: calc(var(--app-radius, var(--ds-radius-surface)) - 4px);
+  --radius-md: calc(var(--app-radius, var(--ds-radius-surface)) - 2px);
+  --radius-lg: var(--app-radius, var(--ds-radius-surface));
+  --radius-xl: calc(var(--app-radius, var(--ds-radius-surface)) + 4px);
+  --radius-2xl: calc(var(--app-radius, var(--ds-radius-surface)) + 8px);
+  --radius-3xl: calc(var(--app-radius, var(--ds-radius-surface)) + 12px);
+  --radius-4xl: calc(var(--app-radius, var(--ds-radius-surface)) + 16px);
+}

package/dist/css/tailwind.css

@@ -0,0 +1,296 @@
+/* GENERATED FILE — do not edit.
+ * The Tailwind theme bridge: DS tokens as theme keys in the consumer's own
+ * Tailwind build, so `bg-surface/40`, `hover:text-fg-3`, `bg-brand-audit/10`,
+ * `rounded-control` and `text-content-muted` generate CSS in app scope instead
+ * of silently producing nothing (W1-13, consumer usage audit §12.1).
+ * Import it after css/tokens.css. It declares no custom property of its own and
+ * claims no app-vocabulary key — see css/shadcn.css for those.
+ * Source: tokens/src (DTCG, ADR-003). Generator: tokens/build/generate-tailwind-bridge.mjs.
+ * Change the token files and run `pnpm tokens:build`; `pnpm tokens:check` fails
+ * when this file is out of date. */
+
+@layer theme, base, ds, components, utilities;
+
+@theme inline {
+  /* Today's utility names, so every class a consumer already writes compiles. */
+  --color-bg: var(--ds-color-canvas);
+  --color-bg-2: var(--ds-color-canvas-sunken);
+  --color-bg-3: var(--ds-color-canvas-sunken-strong);
+  --color-surface: var(--ds-color-surface);
+  --color-fg: var(--ds-color-content);
+  --color-fg-2: var(--ds-color-content-secondary);
+  --color-fg-3: var(--ds-color-content-muted);
+  --color-fg-4: var(--ds-color-content-subtle);
+  --color-fg-5: var(--ds-color-content-faint);
+  --color-rule: var(--ds-color-border);
+  --color-rule-soft: var(--ds-color-border-subtle);
+  --color-rule-strong: var(--ds-color-border-strong);
+  --color-accent-2: var(--ds-color-action-accent-bg-strong);
+  --color-accent-tint: var(--ds-color-action-accent-subtle-bg);
+  --color-accent-hover: var(--ds-color-action-accent-bg-hover);
+  --color-accent-active: var(--ds-color-action-accent-bg-active);
+  --color-accent-ring: var(--ds-color-action-accent-ring);
+  --color-suite-action: var(--ds-color-action-suite-bg);
+  --color-suite-action-hover: var(--ds-color-action-suite-bg-hover);
+  --color-suite-action-active: var(--ds-color-action-suite-bg-active);
+  --color-fg-on-suite-action: var(--ds-color-action-suite-fg);
+  --color-pro-bg: var(--ds-ref-brand-pro-bg);
+  --color-pro-bg-hover: var(--ds-ref-brand-pro-bg-hover);
+  --color-pro-bg-active: var(--ds-ref-brand-pro-bg-active);
+  --color-pro-fg: var(--ds-ref-brand-pro-fg);
+  --color-pro-hover: var(--ds-ref-brand-pro-fg-hover);
+  --color-pro-active: var(--ds-ref-brand-pro-fg-active);
+  --color-pro-disabled: var(--ds-ref-brand-pro-fg-disabled);
+  --color-pro-line: var(--ds-ref-brand-pro-border);
+  --color-pro-ring: var(--ds-ref-brand-pro-ring);
+  --color-brand-active: var(--ds-color-action-brand-bg-active);
+  --color-brand-disabled: var(--ds-color-action-brand-bg-disabled);
+  --color-brand-bg: var(--ds-color-action-brand-subtle-bg);
+  --color-brand-bg-hover: var(--ds-color-action-brand-subtle-bg-hover);
+  --color-brand-bg-active: var(--ds-color-action-brand-subtle-bg-active);
+  --color-brand-line: var(--ds-color-action-brand-border);
+  --color-fg-on-brand: var(--ds-color-action-brand-fg);
+  --color-brand-pro: var(--ds-ref-brand-pro-seed);
+  --color-brand-audit: var(--ds-ref-brand-audit-seed);
+  --color-brand-books: var(--ds-ref-brand-books-seed);
+  --color-brand-tax: var(--ds-ref-brand-tax-seed);
+  --color-audit-fg: var(--ds-ref-brand-audit-fg);
+  --color-audit-hover: var(--ds-ref-brand-audit-fg-hover);
+  --color-audit-active: var(--ds-ref-brand-audit-fg-active);
+  --color-audit-disabled: var(--ds-ref-brand-audit-fg-disabled);
+  --color-audit-bg: var(--ds-ref-brand-audit-bg);
+  --color-audit-bg-hover: var(--ds-ref-brand-audit-bg-hover);
+  --color-audit-bg-active: var(--ds-ref-brand-audit-bg-active);
+  --color-audit-line: var(--ds-ref-brand-audit-border);
+  --color-audit-ring: var(--ds-ref-brand-audit-ring);
+  --color-fg-on-audit: var(--ds-ref-brand-audit-on-fg);
+  --color-books-fg: var(--ds-ref-brand-books-fg);
+  --color-books-hover: var(--ds-ref-brand-books-fg-hover);
+  --color-books-active: var(--ds-ref-brand-books-fg-active);
+  --color-books-disabled: var(--ds-ref-brand-books-fg-disabled);
+  --color-books-bg: var(--ds-ref-brand-books-bg);
+  --color-books-bg-hover: var(--ds-ref-brand-books-bg-hover);
+  --color-books-bg-active: var(--ds-ref-brand-books-bg-active);
+  --color-books-line: var(--ds-ref-brand-books-border);
+  --color-books-ring: var(--ds-ref-brand-books-ring);
+  --color-fg-on-books: var(--ds-ref-brand-books-on-fg);
+  --color-tax-fg: var(--ds-ref-brand-tax-fg);
+  --color-tax-hover: var(--ds-ref-brand-tax-fg-hover);
+  --color-tax-active: var(--ds-ref-brand-tax-fg-active);
+  --color-tax-disabled: var(--ds-ref-brand-tax-fg-disabled);
+  --color-tax-bg: var(--ds-ref-brand-tax-bg);
+  --color-tax-bg-hover: var(--ds-ref-brand-tax-bg-hover);
+  --color-tax-bg-active: var(--ds-ref-brand-tax-bg-active);
+  --color-tax-line: var(--ds-ref-brand-tax-border);
+  --color-tax-ring: var(--ds-ref-brand-tax-ring);
+  --color-fg-on-tax: var(--ds-ref-brand-tax-on-fg);
+  --color-fg-on-accent: var(--ds-color-action-accent-fg);
+  --color-fg-on-pro: var(--ds-ref-brand-pro-on-fg);
+  --color-fg-on-danger: var(--ds-color-feedback-danger-solid-fg);
+  --color-fg-on-success: var(--ds-color-feedback-success-solid-fg);
+  --color-fg-on-selection: var(--ds-selection-fg);
+  --color-fg-disabled: var(--ds-color-content-disabled);
+  --color-bg-disabled: var(--ds-color-state-disabled-bg);
+  --color-overlay-hover: var(--ds-color-state-hover);
+  --color-overlay-active: var(--ds-color-state-active);
+  --color-control-bg: var(--ds-control-bg);
+  --color-control-fg: var(--ds-control-fg);
+  --color-control-muted-fg: var(--ds-control-muted-fg);
+  --color-control-hover-bg: var(--ds-control-hover-bg);
+  --color-control-hover-fg: var(--ds-control-hover-fg);
+  --color-control-active-bg: var(--ds-control-active-bg);
+  --color-control-border: var(--ds-control-border);
+  --color-control-border-strong: var(--ds-control-border-strong);
+  --color-control-border-hover: var(--ds-control-border-hover);
+  --color-control-secondary-bg: var(--ds-control-neutral-bg);
+  --color-control-destructive-fg: var(--ds-control-danger-fg);
+  --color-control-destructive-hover-bg: var(--ds-control-danger-hover-bg);
+  --color-menu-bg: var(--ds-menu-bg);
+  --color-menu-fg: var(--ds-menu-fg);
+  --color-menu-border: var(--ds-menu-border);
+  --color-menu-label-fg: var(--ds-menu-label-fg);
+  --color-menu-item-fg: var(--ds-menu-item-fg);
+  --color-menu-item-hover-bg: var(--ds-menu-item-hover-bg);
+  --color-menu-item-hover-fg: var(--ds-menu-item-hover-fg);
+  --color-menu-item-destructive-fg: var(--ds-menu-item-danger-fg);
+  --color-menu-item-destructive-hover-bg: var(--ds-menu-item-danger-hover-bg);
+  --color-menu-item-destructive-hover-fg: var(--ds-menu-item-danger-hover-fg);
+  --color-menu-shortcut-fg: var(--ds-menu-shortcut-fg);
+  --color-selection-floating-bg: var(--ds-selection-floating-bg);
+  --color-selection-floating-fg: var(--ds-selection-floating-fg);
+  --color-selection-floating-muted-fg: var(--ds-selection-floating-muted-fg);
+  --color-selection-floating-hover-bg: var(--ds-selection-floating-hover-bg);
+  --color-selection-floating-active-bg: var(--ds-selection-floating-active-bg);
+  --color-selection-floating-rule: var(--ds-selection-floating-border);
+  --color-success-fg: var(--ds-color-feedback-success-fg);
+  --color-success-fg-hover: var(--ds-color-feedback-success-fg-hover);
+  --color-success-fg-active: var(--ds-color-feedback-success-fg-active);
+  --color-success-bg: var(--ds-color-feedback-success-bg);
+  --color-success-line: var(--ds-color-feedback-success-border);
+  --color-warning-fg: var(--ds-color-feedback-warning-fg);
+  --color-warning-bg: var(--ds-color-feedback-warning-bg);
+  --color-warning-line: var(--ds-color-feedback-warning-border);
+  --color-danger-fg: var(--ds-color-feedback-danger-fg);
+  --color-danger-fg-hover: var(--ds-color-feedback-danger-fg-hover);
+  --color-danger-fg-active: var(--ds-color-feedback-danger-fg-active);
+  --color-danger-bg: var(--ds-color-feedback-danger-bg);
+  --color-danger-line: var(--ds-color-feedback-danger-border);
+  --color-priority-low: var(--ds-color-priority-low);
+  --color-priority-medium: var(--ds-color-priority-medium);
+  --color-priority-high: var(--ds-color-priority-high);
+  --color-priority-urgent: var(--ds-color-priority-urgent);
+  --color-chart-line: var(--ds-color-chart-line);
+  --color-chart-area-from: var(--ds-color-chart-area-from);
+  --color-chart-area-to: var(--ds-color-chart-area-to);
+  --color-service-tax: var(--ds-color-service-tax);
+  --color-service-tax-bg: var(--ds-color-service-tax-bg);
+  --color-service-audit: var(--ds-color-service-audit);
+  --color-service-audit-bg: var(--ds-color-service-audit-bg);
+  --color-service-accounting: var(--ds-color-service-accounting);
+  --color-service-accounting-bg: var(--ds-color-service-accounting-bg);
+  --shadow-focus-ring: var(--ds-shadow-focus-ring);
+  --shadow-quiet: var(--ds-shadow-quiet);
+  --shadow-card: var(--ds-shadow-card);
+  --shadow-pop: var(--ds-shadow-pop);
+  --shadow-xs: var(--ds-ref-shadow-xs);
+  --shadow-sm: var(--ds-ref-shadow-sm);
+  --shadow-md: var(--ds-ref-shadow-md);
+  --shadow-lg: var(--ds-ref-shadow-lg);
+  --shadow-xl: var(--ds-ref-shadow-xl);
+  --shadow-2xl: var(--ds-ref-shadow-2xl);
+  --radius-btn: var(--ds-radius-control);
+  --radius-input: var(--ds-radius-control);
+  --radius-pill: var(--ds-radius-chip);
+  --radius-card: var(--ds-radius-surface);
+  --radius-icon: var(--ds-radius-badge);
+  --radius-full: var(--ds-radius-full);
+  --ease-out-quart: var(--ds-ref-ease-enter);
+  --ease-out: var(--ds-ref-ease-emphasized);
+  --ease-in: var(--ds-ref-ease-exit);
+  --ease-in-out: var(--ds-ref-ease-standard);
+  --animate-accordion-down: var(--ds-animate-accordion-down);
+  --animate-accordion-up: var(--ds-animate-accordion-up);
+  --animate-collapsible-down: var(--ds-animate-collapsible-down);
+  --animate-collapsible-up: var(--ds-animate-collapsible-up);
+  --text-display: var(--ds-text-display);
+  --text-display--line-height: var(--ds-text-display--line-height);
+  --text-display--letter-spacing: var(--ds-text-display--letter-spacing);
+  --text-display--font-weight: var(--ds-text-display--font-weight);
+  --text-title-page: var(--ds-text-title-page);
+  --text-title-page--line-height: var(--ds-text-title-page--line-height);
+  --text-title-page--letter-spacing: var(--ds-text-title-page--letter-spacing);
+  --text-title-page--font-weight: var(--ds-text-title-page--font-weight);
+  --text-title-section: var(--ds-text-title-section);
+  --text-title-section--line-height: var(--ds-text-title-section--line-height);
+  --text-title-section--letter-spacing: var(--ds-text-title-section--letter-spacing);
+  --text-title-section--font-weight: var(--ds-text-title-section--font-weight);
+  --text-title-sub: var(--ds-text-title-sub);
+  --text-title-sub--line-height: var(--ds-text-title-sub--line-height);
+  --text-title-sub--letter-spacing: var(--ds-text-title-sub--letter-spacing);
+  --text-title-sub--font-weight: var(--ds-text-title-sub--font-weight);
+  --text-body: var(--ds-text-body);
+  --text-body--line-height: var(--ds-text-body--line-height);
+  --text-body--letter-spacing: var(--ds-text-body--letter-spacing);
+  --text-body--font-weight: var(--ds-text-body--font-weight);
+  --text-body-sm: var(--ds-text-body-sm);
+  --text-body-sm--line-height: var(--ds-text-body-sm--line-height);
+  --text-body-sm--letter-spacing: var(--ds-text-body-sm--letter-spacing);
+  --text-body-sm--font-weight: var(--ds-text-body-sm--font-weight);
+  --text-label: var(--ds-text-label);
+  --text-label--line-height: var(--ds-text-label--line-height);
+  --text-label--letter-spacing: var(--ds-text-label--letter-spacing);
+  --text-label--font-weight: var(--ds-text-label--font-weight);
+  --text-helper: var(--ds-text-helper);
+  --text-helper--line-height: var(--ds-text-helper--line-height);
+  --text-helper--letter-spacing: var(--ds-text-helper--letter-spacing);
+  --text-helper--font-weight: var(--ds-text-helper--font-weight);
+  --text-caption: var(--ds-text-caption);
+  --text-caption--line-height: var(--ds-text-caption--line-height);
+  --text-caption--letter-spacing: var(--ds-text-caption--letter-spacing);
+  --text-caption--font-weight: var(--ds-text-caption--font-weight);
+  --text-micro: var(--ds-text-micro);
+  --text-micro--line-height: var(--ds-text-micro--line-height);
+  --text-micro--letter-spacing: var(--ds-text-micro--letter-spacing);
+  --text-micro--font-weight: var(--ds-text-micro--font-weight);
+  --text-overline: var(--ds-text-overline);
+  --text-overline--line-height: var(--ds-text-overline--line-height);
+  --text-overline--letter-spacing: var(--ds-text-overline--letter-spacing);
+  --text-overline--font-weight: var(--ds-text-overline--font-weight);
+  --text-code: var(--ds-text-code);
+  --text-code--line-height: var(--ds-text-code--line-height);
+  --text-code--letter-spacing: var(--ds-text-code--letter-spacing);
+  --text-code--font-weight: var(--ds-text-code--font-weight);
+  --radius-ref-xs: var(--ds-ref-radius-xs);
+  --radius-ref-sm: var(--ds-ref-radius-sm);
+  --radius-ref-md: var(--ds-ref-radius-md);
+  --radius-ref-lg: var(--ds-ref-radius-lg);
+  --radius-ref-xl: var(--ds-ref-radius-xl);
+  --radius-control: var(--ds-radius-control);
+  --radius-surface: var(--ds-radius-surface);
+  --radius-surface-sm: var(--ds-radius-surface-sm);
+  --radius-badge: var(--ds-radius-badge);
+  --shadow-flat: var(--ds-elevation-flat);
+  --shadow-raised: var(--ds-elevation-raised);
+  --shadow-floating: var(--ds-elevation-floating);
+  --shadow-overlay: var(--ds-elevation-overlay);
+  --color-fg-on-warning: var(--ds-color-feedback-warning-solid-fg);
+  --color-fg-on-info: var(--ds-color-feedback-info-solid-fg);
+  --shadow-focus-ring-field: var(--ds-shadow-focus-ring-field);
+
+  /* The namespaced role names of target architecture §9. */
+  --color-canvas: var(--ds-color-canvas);
+  --color-canvas-sunken: var(--ds-color-canvas-sunken);
+  --color-canvas-sunken-strong: var(--ds-color-canvas-sunken-strong);
+  --color-surface-sunken: var(--ds-color-surface-sunken);
+  --color-surface-sunken-strong: var(--ds-color-surface-sunken-strong);
+  --color-content: var(--ds-color-content);
+  --color-content-secondary: var(--ds-color-content-secondary);
+  --color-content-muted: var(--ds-color-content-muted);
+  --color-content-subtle: var(--ds-color-content-subtle);
+  --color-content-faint: var(--ds-color-content-faint);
+  --color-border-subtle: var(--ds-color-border-subtle);
+  --color-border-strong: var(--ds-color-border-strong);
+  --color-action-accent-bg: var(--ds-color-action-accent-bg);
+  --color-action-accent-bg-strong: var(--ds-color-action-accent-bg-strong);
+  --color-action-accent-subtle-bg: var(--ds-color-action-accent-subtle-bg);
+  --color-action-accent-bg-hover: var(--ds-color-action-accent-bg-hover);
+  --color-action-accent-bg-active: var(--ds-color-action-accent-bg-active);
+  --color-action-accent-ring: var(--ds-color-action-accent-ring);
+  --color-action-suite-bg: var(--ds-color-action-suite-bg);
+  --color-action-suite-bg-hover: var(--ds-color-action-suite-bg-hover);
+  --color-action-suite-bg-active: var(--ds-color-action-suite-bg-active);
+  --color-action-suite-fg: var(--ds-color-action-suite-fg);
+  --color-action-brand-bg: var(--ds-color-action-brand-bg);
+  --color-action-brand-bg-hover: var(--ds-color-action-brand-bg-hover);
+  --color-action-brand-bg-active: var(--ds-color-action-brand-bg-active);
+  --color-action-brand-bg-disabled: var(--ds-color-action-brand-bg-disabled);
+  --color-action-brand-subtle-bg: var(--ds-color-action-brand-subtle-bg);
+  --color-action-brand-subtle-bg-hover: var(--ds-color-action-brand-subtle-bg-hover);
+  --color-action-brand-subtle-bg-active: var(--ds-color-action-brand-subtle-bg-active);
+  --color-action-brand-border: var(--ds-color-action-brand-border);
+  --color-action-brand-ring: var(--ds-color-action-brand-ring);
+  --color-action-brand-fg: var(--ds-color-action-brand-fg);
+  --color-action-accent-fg: var(--ds-color-action-accent-fg);
+  --color-feedback-danger-solid-fg: var(--ds-color-feedback-danger-solid-fg);
+  --color-feedback-success-solid-fg: var(--ds-color-feedback-success-solid-fg);
+  --color-content-disabled: var(--ds-color-content-disabled);
+  --color-state-disabled-bg: var(--ds-color-state-disabled-bg);
+  --color-state-hover: var(--ds-color-state-hover);
+  --color-state-active: var(--ds-color-state-active);
+  --color-feedback-success-fg: var(--ds-color-feedback-success-fg);
+  --color-feedback-success-fg-hover: var(--ds-color-feedback-success-fg-hover);
+  --color-feedback-success-fg-active: var(--ds-color-feedback-success-fg-active);
+  --color-feedback-success-bg: var(--ds-color-feedback-success-bg);
+  --color-feedback-success-border: var(--ds-color-feedback-success-border);
+  --color-feedback-warning-fg: var(--ds-color-feedback-warning-fg);
+  --color-feedback-warning-bg: var(--ds-color-feedback-warning-bg);
+  --color-feedback-warning-border: var(--ds-color-feedback-warning-border);
+  --color-feedback-danger-fg: var(--ds-color-feedback-danger-fg);
+  --color-feedback-danger-fg-hover: var(--ds-color-feedback-danger-fg-hover);
+  --color-feedback-danger-fg-active: var(--ds-color-feedback-danger-fg-active);
+  --color-feedback-danger-bg: var(--ds-color-feedback-danger-bg);
+  --color-feedback-danger-border: var(--ds-color-feedback-danger-border);
+  --radius-chip: var(--ds-radius-chip);
+  --color-feedback-warning-solid-fg: var(--ds-color-feedback-warning-solid-fg);
+  --color-feedback-info-solid-fg: var(--ds-color-feedback-info-solid-fg);
+}