@happyvertical/smrt-ui 0.55.16 → 0.55.18

package/dist/themes/styles/glass.css

@@ -1,4 +1,5 @@
-/**
+
+@layer smrt.reset, smrt.structure, smrt.theme;/**
  * Glass Theme CSS
  *
  * Static CSS file for Glass theme.
@@ -26,6 +27,10 @@
   --smrt-color-on-tertiary: #ffffff;
   --smrt-color-tertiary-container: rgba(88, 86, 214, 0.15);
   --smrt-color-on-tertiary-container: #2a2866;
+  --smrt-color-info: #5856d6;
+  --smrt-color-on-info: #ffffff;
+  --smrt-color-info-container: rgba(88, 86, 214, 0.15);
+  --smrt-color-on-info-container: #2a2866;
   --smrt-color-error: #ff3b30;
   --smrt-color-on-error: #ffffff;
   --smrt-color-error-container: rgba(255, 59, 48, 0.15);
@@ -146,10 +151,10 @@
   --smrt-typography-label-medium-font: 500 0.8125rem/1.4 var(--smrt-font-family);
   --smrt-typography-label-small-size: 0.6875rem;
   --smrt-typography-label-small-line-height: 1.3;
-  --smrt-typography-label-small-weight: 600;
+  --smrt-typography-label-small-weight: 500;
   --smrt-typography-label-small-tracking: -0.004em;
   --smrt-typography-label-small-font-family: var(--smrt-font-family);
-  --smrt-typography-label-small-font: 600 0.6875rem/1.3 var(--smrt-font-family);
+  --smrt-typography-label-small-font: 500 0.6875rem/1.3 var(--smrt-font-family);
   --smrt-spacing-0: 0;
   --smrt-spacing-1: 0.25rem;
   --smrt-spacing-2: 0.5rem;
@@ -191,12 +196,12 @@
   --smrt-radius-medium: 0.5rem;
   --smrt-radius-large: 0.75rem;
   --smrt-radius-extra-large: 1rem;
-  --smrt-elevation-0: none;
-  --smrt-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
-  --smrt-elevation-2: 0 3px 6px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.03);
-  --smrt-elevation-3: 0 6px 12px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
-  --smrt-elevation-4: 0 12px 24px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.05);
-  --smrt-elevation-5: 0 24px 48px rgba(0, 0, 0, 0.12), 0 16px 32px rgba(0, 0, 0, 0.06);
+  --smrt-elevation-0: 0 0 0 0 transparent;
+  --smrt-elevation-1: 0 1px 2px 0 color-mix(in srgb, var(--smrt-shadow-color) 5%, transparent), 0 2px 6px -2px color-mix(in srgb, var(--smrt-shadow-color) 5%, transparent);
+  --smrt-elevation-2: 0 1px 3px 0 color-mix(in srgb, var(--smrt-shadow-color) 6%, transparent), 0 6px 14px -4px color-mix(in srgb, var(--smrt-shadow-color) 8%, transparent);
+  --smrt-elevation-3: 0 2px 4px 0 color-mix(in srgb, var(--smrt-shadow-color) 7%, transparent), 0 12px 24px -8px color-mix(in srgb, var(--smrt-shadow-color) 10%, transparent);
+  --smrt-elevation-4: 0 2px 6px 0 color-mix(in srgb, var(--smrt-shadow-color) 8%, transparent), 0 20px 40px -12px color-mix(in srgb, var(--smrt-shadow-color) 12%, transparent);
+  --smrt-elevation-5: 0 4px 8px 0 color-mix(in srgb, var(--smrt-shadow-color) 8%, transparent), 0 32px 64px -16px color-mix(in srgb, var(--smrt-shadow-color) 16%, transparent);
   --smrt-duration-instant: 0ms;
   --smrt-duration-fast: 100ms;
   --smrt-duration-normal: 200ms;
@@ -234,10 +239,48 @@
   --smrt-z-index-toast: 1500;
   --smrt-z-index-tooltip: 1600;
   --smrt-z-index-loading: 1700;
+  --smrt-surface-ground: #f2f2f7;
+  --smrt-surface-panel: color-mix(in srgb, #ffffff 72%, transparent);
+  --smrt-surface-control: color-mix(in srgb, #767680 12%, transparent);
+  --smrt-surface-raised: color-mix(in srgb, #ffffff 88%, transparent);
+  --smrt-surface-sunken: color-mix(in srgb, #767680 8%, transparent);
+  --smrt-surface-overlay: rgba(0, 0, 0, 0.4);
+  --smrt-hairline-color: color-mix(in srgb, var(--smrt-color-on-surface) 10%, transparent);
+  --smrt-hairline-strong-color: color-mix(in srgb, var(--smrt-color-on-surface) 26%, transparent);
+  --smrt-hairline: 1px solid var(--smrt-hairline-color);
+  --smrt-hairline-strong: 1px solid var(--smrt-hairline-strong-color);
+  --smrt-inset-highlight: inset 0 1px 0 transparent;
+  --smrt-state-hover: 0.10;
+  --smrt-state-pressed: 0.14;
+  --smrt-state-selected: 0.14;
+  --smrt-state-focus: 0.14;
+  --smrt-state-dragged: 0.18;
+  --smrt-state-disabled: 0.38;
+  --smrt-shadow-color: rgb(0 0 0);
+  --smrt-control-radius: var(--smrt-radius-lg);
+  --smrt-control-radius-small: var(--smrt-radius-md);
+  --smrt-control-height: 2.75rem;
+  --smrt-control-height-small: 2.25rem;
+  --smrt-control-weight: 500;
+  --smrt-control-border: var(--smrt-hairline-strong);
+  --smrt-focus-ring-color: var(--smrt-color-primary);
+  --smrt-focus-ring-width: 2px;
+  --smrt-focus-ring-offset: 2px;
+  --smrt-accent-color: var(--smrt-color-primary);
+  --smrt-selection-background: var(--smrt-color-primary-container);
+  --smrt-selection-color: var(--smrt-color-on-primary-container);
+  --smrt-caret-color: var(--smrt-color-primary);
+  --smrt-scrollbar-thumb: var(--smrt-hairline-strong-color);
+  --smrt-scrollbar-track: transparent;
   --smrt-glass-blur: 20px;
   --smrt-glass-saturation: 180%;
+  --smrt-glass-surface: color-mix(in srgb, #ffffff 72%, transparent);
+  --smrt-glass-surface-strong: color-mix(in srgb, #ffffff 88%, transparent);
+  --smrt-glass-border: var(--smrt-hairline-color);
   --smrt-glass-border-opacity: 0.3;
   --smrt-glass-background-opacity: 0.72;
+  --smrt-duration-scheme: var(--smrt-duration-medium1);
+  --smrt-font-feature-settings: normal;
 }
 
 [data-theme="glass"][data-color-scheme="dark"] {
@@ -259,6 +302,10 @@
   --smrt-color-on-tertiary: #ffffff;
   --smrt-color-tertiary-container: rgba(94, 92, 230, 0.25);
   --smrt-color-on-tertiary-container: #d4d3ff;
+  --smrt-color-info: #5e5ce6;
+  --smrt-color-on-info: #ffffff;
+  --smrt-color-info-container: rgba(94, 92, 230, 0.25);
+  --smrt-color-on-info-container: #d4d3ff;
   --smrt-color-error: #ff453a;
   --smrt-color-on-error: #000000;
   --smrt-color-error-container: rgba(255, 69, 58, 0.25);
@@ -271,7 +318,7 @@
   --smrt-color-on-success: #000000;
   --smrt-color-success-container: rgba(48, 209, 88, 0.25);
   --smrt-color-on-success-container: #b8f5c9;
-  --smrt-color-surface: rgba(30, 30, 30, 0.72);
+  --smrt-color-surface: rgba(29, 29, 38, 0.72);
   --smrt-color-on-surface: #ffffff;
   --smrt-color-surface-variant: rgba(44, 44, 46, 0.65);
   --smrt-color-on-surface-variant: #8e8e93;
@@ -282,7 +329,7 @@
   --smrt-color-surface-container-lowest: rgba(28, 28, 30, 0.55);
   --smrt-color-surface-dim: rgba(0, 0, 0, 0.3);
   --smrt-color-surface-bright: rgba(58, 58, 60, 0.9);
-  --smrt-color-background: #000000;
+  --smrt-color-background: #0b0b0f;
   --smrt-color-on-background: #ffffff;
   --smrt-color-outline: rgba(160, 160, 166, 0.8);
   --smrt-color-outline-variant: rgba(84, 84, 88, 0.35);
@@ -291,7 +338,7 @@
   --smrt-color-inverse-primary: #007aff;
   --smrt-color-shadow: rgba(0, 0, 0, 0.4);
   --smrt-color-scrim: rgba(0, 0, 0, 0.6);
-  --smrt-color-glass-backdrop: rgba(30, 30, 30, 0.72);
+  --smrt-color-glass-backdrop: rgba(29, 29, 38, 0.72);
   --smrt-color-glass-border: rgba(255, 255, 255, 0.1);
   --smrt-typography-display-large-size: 3rem;
   --smrt-typography-display-large-line-height: 1.1;
@@ -379,10 +426,10 @@
   --smrt-typography-label-medium-font: 500 0.8125rem/1.4 var(--smrt-font-family);
   --smrt-typography-label-small-size: 0.6875rem;
   --smrt-typography-label-small-line-height: 1.3;
-  --smrt-typography-label-small-weight: 600;
+  --smrt-typography-label-small-weight: 500;
   --smrt-typography-label-small-tracking: -0.004em;
   --smrt-typography-label-small-font-family: var(--smrt-font-family);
-  --smrt-typography-label-small-font: 600 0.6875rem/1.3 var(--smrt-font-family);
+  --smrt-typography-label-small-font: 500 0.6875rem/1.3 var(--smrt-font-family);
   --smrt-spacing-0: 0;
   --smrt-spacing-1: 0.25rem;
   --smrt-spacing-2: 0.5rem;
@@ -424,12 +471,12 @@
   --smrt-radius-medium: 0.5rem;
   --smrt-radius-large: 0.75rem;
   --smrt-radius-extra-large: 1rem;
-  --smrt-elevation-0: none;
-  --smrt-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
-  --smrt-elevation-2: 0 3px 6px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.03);
-  --smrt-elevation-3: 0 6px 12px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
-  --smrt-elevation-4: 0 12px 24px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.05);
-  --smrt-elevation-5: 0 24px 48px rgba(0, 0, 0, 0.12), 0 16px 32px rgba(0, 0, 0, 0.06);
+  --smrt-elevation-0: 0 0 0 0 transparent;
+  --smrt-elevation-1: 0 1px 2px 0 color-mix(in srgb, var(--smrt-shadow-color) 20%, transparent), 0 2px 6px -2px color-mix(in srgb, var(--smrt-shadow-color) 14%, transparent);
+  --smrt-elevation-2: var(--smrt-inset-highlight), 0 1px 3px 0 color-mix(in srgb, var(--smrt-shadow-color) 24%, transparent), 0 6px 14px -4px color-mix(in srgb, var(--smrt-shadow-color) 18%, transparent);
+  --smrt-elevation-3: var(--smrt-inset-highlight), 0 2px 4px 0 color-mix(in srgb, var(--smrt-shadow-color) 26%, transparent), 0 12px 24px -8px color-mix(in srgb, var(--smrt-shadow-color) 22%, transparent);
+  --smrt-elevation-4: var(--smrt-inset-highlight), 0 2px 6px 0 color-mix(in srgb, var(--smrt-shadow-color) 28%, transparent), 0 20px 40px -12px color-mix(in srgb, var(--smrt-shadow-color) 26%, transparent);
+  --smrt-elevation-5: var(--smrt-inset-highlight), 0 4px 8px 0 color-mix(in srgb, var(--smrt-shadow-color) 30%, transparent), 0 32px 64px -16px color-mix(in srgb, var(--smrt-shadow-color) 30%, transparent);
   --smrt-duration-instant: 0ms;
   --smrt-duration-fast: 100ms;
   --smrt-duration-normal: 200ms;
@@ -467,13 +514,52 @@
   --smrt-z-index-toast: 1500;
   --smrt-z-index-tooltip: 1600;
   --smrt-z-index-loading: 1700;
+  --smrt-surface-ground: #0b0b0f;
+  --smrt-surface-panel: color-mix(in srgb, #1d1d26 72%, transparent);
+  --smrt-surface-control: color-mix(in srgb, #000000 28%, transparent);
+  --smrt-surface-raised: color-mix(in srgb, #2a2a34 88%, transparent);
+  --smrt-surface-sunken: color-mix(in srgb, #000000 38%, transparent);
+  --smrt-surface-overlay: rgba(0, 0, 0, 0.6);
+  --smrt-hairline-color: color-mix(in srgb, var(--smrt-color-on-surface) 12%, transparent);
+  --smrt-hairline-strong-color: color-mix(in srgb, var(--smrt-color-on-surface) 28%, transparent);
+  --smrt-hairline: 1px solid var(--smrt-hairline-color);
+  --smrt-hairline-strong: 1px solid var(--smrt-hairline-strong-color);
+  --smrt-inset-highlight: inset 0 1px 0 rgb(255 255 255 / 0.1);
+  --smrt-state-hover: 0.10;
+  --smrt-state-pressed: 0.14;
+  --smrt-state-selected: 0.14;
+  --smrt-state-focus: 0.14;
+  --smrt-state-dragged: 0.18;
+  --smrt-state-disabled: 0.38;
+  --smrt-shadow-color: rgb(0 0 0);
+  --smrt-control-radius: var(--smrt-radius-lg);
+  --smrt-control-radius-small: var(--smrt-radius-md);
+  --smrt-control-height: 2.75rem;
+  --smrt-control-height-small: 2.25rem;
+  --smrt-control-weight: 500;
+  --smrt-control-border: var(--smrt-hairline-strong);
+  --smrt-focus-ring-color: var(--smrt-color-primary);
+  --smrt-focus-ring-width: 2px;
+  --smrt-focus-ring-offset: 2px;
+  --smrt-accent-color: var(--smrt-color-primary);
+  --smrt-selection-background: var(--smrt-color-primary-container);
+  --smrt-selection-color: var(--smrt-color-on-primary-container);
+  --smrt-caret-color: var(--smrt-color-primary);
+  --smrt-scrollbar-thumb: var(--smrt-hairline-strong-color);
+  --smrt-scrollbar-track: transparent;
   --smrt-glass-blur: 20px;
   --smrt-glass-saturation: 180%;
+  --smrt-glass-surface: color-mix(in srgb, #1d1d26 72%, transparent);
+  --smrt-glass-surface-strong: color-mix(in srgb, #1d1d26 88%, transparent);
+  --smrt-glass-border: color-mix(in srgb, #ffffff 10%, transparent);
   --smrt-glass-border-opacity: 0.3;
   --smrt-glass-background-opacity: 0.72;
+  --smrt-duration-scheme: var(--smrt-duration-medium1);
+  --smrt-font-feature-settings: normal;
 }
 
 /* Glass utility classes */
+@layer smrt.theme {
 .smrt-glass {
   background: var(--smrt-color-surface);
   backdrop-filter: blur(var(--smrt-glass-blur)) saturate(var(--smrt-glass-saturation));
@@ -494,6 +580,7 @@
   -webkit-backdrop-filter: blur(calc(var(--smrt-glass-blur) * 0.5)) saturate(var(--smrt-glass-saturation));
   border: 1px solid var(--smrt-color-glass-border);
 }
+}
 
 /*
  * Material-3 vocabulary aliases + helper tokens (issue #1431).

package/dist/themes/styles/happyvertical.css

@@ -1,4 +1,5 @@
-/**
+
+@layer smrt.reset, smrt.structure, smrt.theme;/**
  * HappyVertical Theme CSS — "Day Shift"
  *
  * Static CSS for the HappyVertical brand theme (happyvertical/smrt#2318): a
@@ -39,6 +40,10 @@
   --smrt-color-on-tertiary: #ffffff;
   --smrt-color-tertiary-container: #d7e4ea;
   --smrt-color-on-tertiary-container: #1b333e;
+  --smrt-color-info: #3c5a68;
+  --smrt-color-on-info: #ffffff;
+  --smrt-color-info-container: #d7e4ea;
+  --smrt-color-on-info-container: #1b333e;
   --smrt-color-error: #9b3b32;
   --smrt-color-on-error: #ffffff;
   --smrt-color-error-container: #f6dfdc;
@@ -202,12 +207,12 @@
   --smrt-radius-medium: 0.375rem;
   --smrt-radius-large: 0.5rem;
   --smrt-radius-extra-large: 0.75rem;
-  --smrt-elevation-0: none;
-  --smrt-elevation-1: inset 0 0 0 1px rgba(32, 39, 43, 0.1);
-  --smrt-elevation-2: 0 1px 2px 0 rgba(32, 39, 43, 0.06);
-  --smrt-elevation-3: 0 2px 6px -2px rgba(32, 39, 43, 0.1);
-  --smrt-elevation-4: 0 6px 16px -6px rgba(32, 39, 43, 0.14);
-  --smrt-elevation-5: 0 12px 28px -12px rgba(32, 39, 43, 0.18);
+  --smrt-elevation-0: 0 0 0 0 transparent;
+  --smrt-elevation-1: inset 0 0 0 1px var(--smrt-hairline-color);
+  --smrt-elevation-2: 0 1px 2px 0 color-mix(in srgb, var(--smrt-shadow-color) 8%, transparent);
+  --smrt-elevation-3: 0 1px 2px 0 color-mix(in srgb, var(--smrt-shadow-color) 8%, transparent), 0 2px 6px -2px color-mix(in srgb, var(--smrt-shadow-color) 8%, transparent);
+  --smrt-elevation-4: 0 1px 3px 0 color-mix(in srgb, var(--smrt-shadow-color) 10%, transparent), 0 6px 16px -6px color-mix(in srgb, var(--smrt-shadow-color) 12%, transparent);
+  --smrt-elevation-5: 0 2px 4px 0 color-mix(in srgb, var(--smrt-shadow-color) 10%, transparent), 0 12px 28px -12px color-mix(in srgb, var(--smrt-shadow-color) 16%, transparent);
   --smrt-duration-instant: 0ms;
   --smrt-duration-fast: 90ms;
   --smrt-duration-normal: 120ms;
@@ -245,6 +250,48 @@
   --smrt-z-index-toast: 1500;
   --smrt-z-index-tooltip: 1600;
   --smrt-z-index-loading: 1700;
+  --smrt-surface-ground: #e8ebe9;
+  --smrt-surface-panel: #f4f6f5;
+  --smrt-surface-control: #fbfcfb;
+  --smrt-surface-raised: #f4f6f5;
+  --smrt-surface-sunken: #e1e6e3;
+  --smrt-surface-overlay: rgba(20, 24, 27, 0.45);
+  --smrt-hairline-color: var(--smrt-color-outline-variant);
+  --smrt-hairline-strong-color: var(--smrt-color-outline);
+  --smrt-hairline: 1px solid var(--smrt-hairline-color);
+  --smrt-hairline-strong: 1px solid var(--smrt-hairline-strong-color);
+  --smrt-inset-highlight: inset 0 1px 0 transparent;
+  --smrt-state-hover: 0.06;
+  --smrt-state-pressed: 0.10;
+  --smrt-state-selected: 0.10;
+  --smrt-state-focus: 0.10;
+  --smrt-state-dragged: 0.12;
+  --smrt-state-disabled: 0.38;
+  --smrt-shadow-color: rgb(32 39 43);
+  --smrt-control-radius: var(--smrt-radius-md);
+  --smrt-control-radius-small: var(--smrt-radius-sm);
+  --smrt-control-height: 2.5rem;
+  --smrt-control-height-small: 2rem;
+  --smrt-control-weight: 500;
+  --smrt-control-border: var(--smrt-hairline-strong);
+  --smrt-focus-ring-color: var(--smrt-color-primary);
+  --smrt-focus-ring-width: 2px;
+  --smrt-focus-ring-offset: 2px;
+  --smrt-accent-color: var(--smrt-color-primary);
+  --smrt-selection-background: var(--smrt-color-primary-container);
+  --smrt-selection-color: var(--smrt-color-on-primary-container);
+  --smrt-caret-color: var(--smrt-color-primary);
+  --smrt-scrollbar-thumb: var(--smrt-hairline-strong-color);
+  --smrt-scrollbar-track: transparent;
+  --smrt-glass-blur: 0px;
+  --smrt-glass-saturation: 100%;
+  --smrt-glass-surface: var(--smrt-surface-panel);
+  --smrt-glass-surface-strong: var(--smrt-surface-raised);
+  --smrt-glass-border: var(--smrt-hairline-color);
+  --smrt-glass-border-opacity: 1;
+  --smrt-glass-background-opacity: 1;
+  --smrt-duration-scheme: var(--smrt-duration-medium1);
+  --smrt-font-feature-settings: normal;
 }
 
 [data-theme="happyvertical"][data-color-scheme="dark"] {
@@ -266,6 +313,10 @@
   --smrt-color-on-tertiary: #10262e;
   --smrt-color-tertiary-container: #1e313a;
   --smrt-color-on-tertiary-container: #c6dee8;
+  --smrt-color-info: #9cbecc;
+  --smrt-color-on-info: #10262e;
+  --smrt-color-info-container: #1e313a;
+  --smrt-color-on-info-container: #c6dee8;
   --smrt-color-error: #e89b92;
   --smrt-color-on-error: #3b120d;
   --smrt-color-error-container: #402019;
@@ -429,12 +480,12 @@
   --smrt-radius-medium: 0.375rem;
   --smrt-radius-large: 0.5rem;
   --smrt-radius-extra-large: 0.75rem;
-  --smrt-elevation-0: none;
-  --smrt-elevation-1: inset 0 0 0 1px rgba(228, 233, 231, 0.08);
-  --smrt-elevation-2: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
-  --smrt-elevation-3: 0 2px 6px -2px rgba(0, 0, 0, 0.5);
-  --smrt-elevation-4: 0 6px 16px -6px rgba(0, 0, 0, 0.6);
-  --smrt-elevation-5: 0 12px 28px -12px rgba(0, 0, 0, 0.7);
+  --smrt-elevation-0: 0 0 0 0 transparent;
+  --smrt-elevation-1: inset 0 0 0 1px var(--smrt-hairline-color);
+  --smrt-elevation-2: var(--smrt-inset-highlight), 0 1px 2px 0 color-mix(in srgb, var(--smrt-shadow-color) 40%, transparent);
+  --smrt-elevation-3: var(--smrt-inset-highlight), 0 1px 2px 0 color-mix(in srgb, var(--smrt-shadow-color) 40%, transparent), 0 2px 6px -2px color-mix(in srgb, var(--smrt-shadow-color) 36%, transparent);
+  --smrt-elevation-4: var(--smrt-inset-highlight), 0 1px 3px 0 color-mix(in srgb, var(--smrt-shadow-color) 44%, transparent), 0 6px 16px -6px color-mix(in srgb, var(--smrt-shadow-color) 44%, transparent);
+  --smrt-elevation-5: var(--smrt-inset-highlight), 0 2px 4px 0 color-mix(in srgb, var(--smrt-shadow-color) 46%, transparent), 0 12px 28px -12px color-mix(in srgb, var(--smrt-shadow-color) 52%, transparent);
   --smrt-duration-instant: 0ms;
   --smrt-duration-fast: 90ms;
   --smrt-duration-normal: 120ms;
@@ -472,6 +523,48 @@
   --smrt-z-index-toast: 1500;
   --smrt-z-index-tooltip: 1600;
   --smrt-z-index-loading: 1700;
+  --smrt-surface-ground: #14181b;
+  --smrt-surface-panel: #1c2226;
+  --smrt-surface-control: #212930;
+  --smrt-surface-raised: #1c2226;
+  --smrt-surface-sunken: #0f1315;
+  --smrt-surface-overlay: rgba(0, 0, 0, 0.6);
+  --smrt-hairline-color: var(--smrt-color-outline-variant);
+  --smrt-hairline-strong-color: var(--smrt-color-outline);
+  --smrt-hairline: 1px solid var(--smrt-hairline-color);
+  --smrt-hairline-strong: 1px solid var(--smrt-hairline-strong-color);
+  --smrt-inset-highlight: inset 0 1px 0 rgb(255 255 255 / 0.04);
+  --smrt-state-hover: 0.06;
+  --smrt-state-pressed: 0.10;
+  --smrt-state-selected: 0.10;
+  --smrt-state-focus: 0.10;
+  --smrt-state-dragged: 0.12;
+  --smrt-state-disabled: 0.38;
+  --smrt-shadow-color: rgb(0 0 0);
+  --smrt-control-radius: var(--smrt-radius-md);
+  --smrt-control-radius-small: var(--smrt-radius-sm);
+  --smrt-control-height: 2.5rem;
+  --smrt-control-height-small: 2rem;
+  --smrt-control-weight: 500;
+  --smrt-control-border: var(--smrt-hairline-strong);
+  --smrt-focus-ring-color: var(--smrt-color-primary);
+  --smrt-focus-ring-width: 2px;
+  --smrt-focus-ring-offset: 2px;
+  --smrt-accent-color: var(--smrt-color-primary);
+  --smrt-selection-background: var(--smrt-color-primary-container);
+  --smrt-selection-color: var(--smrt-color-on-primary-container);
+  --smrt-caret-color: var(--smrt-color-primary);
+  --smrt-scrollbar-thumb: var(--smrt-hairline-strong-color);
+  --smrt-scrollbar-track: transparent;
+  --smrt-glass-blur: 0px;
+  --smrt-glass-saturation: 100%;
+  --smrt-glass-surface: var(--smrt-surface-panel);
+  --smrt-glass-surface-strong: var(--smrt-surface-raised);
+  --smrt-glass-border: var(--smrt-hairline-color);
+  --smrt-glass-border-opacity: 1;
+  --smrt-glass-background-opacity: 1;
+  --smrt-duration-scheme: var(--smrt-duration-medium1);
+  --smrt-font-feature-settings: normal;
 }
 
 /* ============================================================================
@@ -479,10 +572,12 @@
  *
  * A 2px amber outline, offset off the control. Defined by the preset so every
  * focusable element — including plain markup a consumer app renders itself —
- * carries the brand focus indicator. Component-scoped `:focus-visible` rules
- * are more specific and still win where a primitive tunes its own offset.
+ * carries the brand focus indicator. This rule and component-scoped
+ * `:focus-visible` rules both sit in `smrt.theme`, so specificity still decides:
+ * a primitive that tunes its own offset wins over this default.
  * ========================================================================== */
 
+@layer smrt.theme {
 [data-theme="happyvertical"] :focus-visible {
   outline: 2px solid var(--smrt-color-primary);
   outline-offset: 2px;
@@ -563,3 +658,4 @@
     transition: none;
   }
 }
+}