@happyvertical/smrt-ui 0.40.67 → 0.40.69

package/dist/themes/styles/studio.css

@@ -8,43 +8,34 @@
  */
 
 [data-theme="studio"][data-color-scheme="light"] {
-  /* Primary - Google Blue */
+  --smrt-theme-id: studio;
+  --smrt-theme-name: Studio;
+  --smrt-color-scheme: light;
+  --smrt-font-family: "Google Sans Text", "Roboto", "Segoe UI", system-ui, sans-serif;
   --smrt-color-primary: #1a73e8;
   --smrt-color-on-primary: #ffffff;
   --smrt-color-primary-container: #e8f0fe;
   --smrt-color-on-primary-container: #174ea6;
-
-  /* Secondary - Neutral gray */
   --smrt-color-secondary: #5f6368;
   --smrt-color-on-secondary: #ffffff;
   --smrt-color-secondary-container: #f1f3f4;
   --smrt-color-on-secondary-container: #3c4043;
-
-  /* Tertiary - Purple accent */
   --smrt-color-tertiary: #9334e6;
   --smrt-color-on-tertiary: #ffffff;
   --smrt-color-tertiary-container: #f3e8fd;
   --smrt-color-on-tertiary-container: #6b12b8;
-
-  /* Error - Google red */
   --smrt-color-error: #d93025;
   --smrt-color-on-error: #ffffff;
   --smrt-color-error-container: #fce8e6;
   --smrt-color-on-error-container: #a50e0e;
-
-  /* Warning - Amber */
   --smrt-color-warning: #f9ab00;
   --smrt-color-on-warning: #000000;
   --smrt-color-warning-container: #fef3c7;
   --smrt-color-on-warning-container: #92400e;
-
-  /* Success - Teal/green */
   --smrt-color-success: #188038;
   --smrt-color-on-success: #ffffff;
   --smrt-color-success-container: #e6f4ea;
   --smrt-color-on-success-container: #137333;
-
-  /* Surface - Pure white, flat */
   --smrt-color-surface: #ffffff;
   --smrt-color-on-surface: #202124;
   --smrt-color-surface-variant: #f8f9fa;
@@ -56,31 +47,133 @@
   --smrt-color-surface-container-lowest: #ffffff;
   --smrt-color-surface-dim: #e8eaed;
   --smrt-color-surface-bright: #ffffff;
-
-  /* Background */
   --smrt-color-background: #ffffff;
   --smrt-color-on-background: #202124;
-
-  /* Outline - Light gray borders */
-  --smrt-color-outline: #dadce0;
+  --smrt-color-outline: #78797b;
   --smrt-color-outline-variant: #e8eaed;
-
-  /* Inverse */
   --smrt-color-inverse-surface: #3c4043;
   --smrt-color-inverse-on-surface: #f1f3f4;
   --smrt-color-inverse-primary: #8ab4f8;
-
-  /* Effects - Minimal shadows */
   --smrt-color-shadow: rgba(60, 64, 67, 0.1);
   --smrt-color-scrim: rgba(0, 0, 0, 0.5);
-
-  /* Theme metadata */
-  --smrt-theme-id: studio;
-  --smrt-theme-name: Studio;
-  --smrt-color-scheme: light;
-  --smrt-font-family: "Google Sans Text", "Roboto", "Segoe UI", system-ui, sans-serif;
-
-  /* Border Radius */
+  --smrt-typography-display-large-size: 3rem;
+  --smrt-typography-display-large-line-height: 1.1;
+  --smrt-typography-display-large-weight: 400;
+  --smrt-typography-display-large-tracking: -0.01em;
+  --smrt-typography-display-large-font-family: var(--smrt-font-family);
+  --smrt-typography-display-large-font: 400 3rem/1.1 var(--smrt-font-family);
+  --smrt-typography-display-medium-size: 2.5rem;
+  --smrt-typography-display-medium-line-height: 1.15;
+  --smrt-typography-display-medium-weight: 400;
+  --smrt-typography-display-medium-tracking: -0.008em;
+  --smrt-typography-display-medium-font-family: var(--smrt-font-family);
+  --smrt-typography-display-medium-font: 400 2.5rem/1.15 var(--smrt-font-family);
+  --smrt-typography-display-small-size: 2rem;
+  --smrt-typography-display-small-line-height: 1.2;
+  --smrt-typography-display-small-weight: 400;
+  --smrt-typography-display-small-tracking: -0.005em;
+  --smrt-typography-display-small-font-family: var(--smrt-font-family);
+  --smrt-typography-display-small-font: 400 2rem/1.2 var(--smrt-font-family);
+  --smrt-typography-headline-large-size: 1.75rem;
+  --smrt-typography-headline-large-line-height: 1.25;
+  --smrt-typography-headline-large-weight: 400;
+  --smrt-typography-headline-large-tracking: 0;
+  --smrt-typography-headline-large-font-family: var(--smrt-font-family);
+  --smrt-typography-headline-large-font: 400 1.75rem/1.25 var(--smrt-font-family);
+  --smrt-typography-headline-medium-size: 1.5rem;
+  --smrt-typography-headline-medium-line-height: 1.3;
+  --smrt-typography-headline-medium-weight: 400;
+  --smrt-typography-headline-medium-tracking: 0;
+  --smrt-typography-headline-medium-font-family: var(--smrt-font-family);
+  --smrt-typography-headline-medium-font: 400 1.5rem/1.3 var(--smrt-font-family);
+  --smrt-typography-headline-small-size: 1.25rem;
+  --smrt-typography-headline-small-line-height: 1.35;
+  --smrt-typography-headline-small-weight: 500;
+  --smrt-typography-headline-small-tracking: 0;
+  --smrt-typography-headline-small-font-family: var(--smrt-font-family);
+  --smrt-typography-headline-small-font: 500 1.25rem/1.35 var(--smrt-font-family);
+  --smrt-typography-title-large-size: 1.125rem;
+  --smrt-typography-title-large-line-height: 1.4;
+  --smrt-typography-title-large-weight: 500;
+  --smrt-typography-title-large-tracking: 0;
+  --smrt-typography-title-large-font-family: var(--smrt-font-family);
+  --smrt-typography-title-large-font: 500 1.125rem/1.4 var(--smrt-font-family);
+  --smrt-typography-title-medium-size: 1rem;
+  --smrt-typography-title-medium-line-height: 1.5;
+  --smrt-typography-title-medium-weight: 500;
+  --smrt-typography-title-medium-tracking: 0.01em;
+  --smrt-typography-title-medium-font-family: var(--smrt-font-family);
+  --smrt-typography-title-medium-font: 500 1rem/1.5 var(--smrt-font-family);
+  --smrt-typography-title-small-size: 0.875rem;
+  --smrt-typography-title-small-line-height: 1.5;
+  --smrt-typography-title-small-weight: 500;
+  --smrt-typography-title-small-tracking: 0.01em;
+  --smrt-typography-title-small-font-family: var(--smrt-font-family);
+  --smrt-typography-title-small-font: 500 0.875rem/1.5 var(--smrt-font-family);
+  --smrt-typography-body-large-size: 1rem;
+  --smrt-typography-body-large-line-height: 1.6;
+  --smrt-typography-body-large-weight: 400;
+  --smrt-typography-body-large-tracking: 0;
+  --smrt-typography-body-large-font-family: var(--smrt-font-family);
+  --smrt-typography-body-large-font: 400 1rem/1.6 var(--smrt-font-family);
+  --smrt-typography-body-medium-size: 0.875rem;
+  --smrt-typography-body-medium-line-height: 1.6;
+  --smrt-typography-body-medium-weight: 400;
+  --smrt-typography-body-medium-tracking: 0;
+  --smrt-typography-body-medium-font-family: var(--smrt-font-family);
+  --smrt-typography-body-medium-font: 400 0.875rem/1.6 var(--smrt-font-family);
+  --smrt-typography-body-small-size: 0.75rem;
+  --smrt-typography-body-small-line-height: 1.5;
+  --smrt-typography-body-small-weight: 400;
+  --smrt-typography-body-small-tracking: 0.01em;
+  --smrt-typography-body-small-font-family: var(--smrt-font-family);
+  --smrt-typography-body-small-font: 400 0.75rem/1.5 var(--smrt-font-family);
+  --smrt-typography-label-large-size: 0.875rem;
+  --smrt-typography-label-large-line-height: 1.5;
+  --smrt-typography-label-large-weight: 500;
+  --smrt-typography-label-large-tracking: 0.02em;
+  --smrt-typography-label-large-font-family: var(--smrt-font-family);
+  --smrt-typography-label-large-font: 500 0.875rem/1.5 var(--smrt-font-family);
+  --smrt-typography-label-medium-size: 0.75rem;
+  --smrt-typography-label-medium-line-height: 1.5;
+  --smrt-typography-label-medium-weight: 500;
+  --smrt-typography-label-medium-tracking: 0.025em;
+  --smrt-typography-label-medium-font-family: var(--smrt-font-family);
+  --smrt-typography-label-medium-font: 500 0.75rem/1.5 var(--smrt-font-family);
+  --smrt-typography-label-small-size: 0.6875rem;
+  --smrt-typography-label-small-line-height: 1.4;
+  --smrt-typography-label-small-weight: 500;
+  --smrt-typography-label-small-tracking: 0.03em;
+  --smrt-typography-label-small-font-family: var(--smrt-font-family);
+  --smrt-typography-label-small-font: 500 0.6875rem/1.4 var(--smrt-font-family);
+  --smrt-spacing-0: 0;
+  --smrt-spacing-1: 0.25rem;
+  --smrt-spacing-2: 0.5rem;
+  --smrt-spacing-3: 0.75rem;
+  --smrt-spacing-4: 1rem;
+  --smrt-spacing-5: 1.25rem;
+  --smrt-spacing-6: 1.5rem;
+  --smrt-spacing-7: 1.75rem;
+  --smrt-spacing-8: 2rem;
+  --smrt-spacing-9: 2.25rem;
+  --smrt-spacing-10: 2.5rem;
+  --smrt-spacing-11: 2.75rem;
+  --smrt-spacing-12: 3rem;
+  --smrt-spacing-14: 3.5rem;
+  --smrt-spacing-16: 4rem;
+  --smrt-spacing-20: 5rem;
+  --smrt-spacing-24: 6rem;
+  --smrt-spacing-0_5: 0.125rem;
+  --smrt-spacing-1_5: 0.375rem;
+  --smrt-spacing-2_5: 0.625rem;
+  --smrt-spacing-3_5: 0.875rem;
+  --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;
   --smrt-radius-none: 0;
   --smrt-radius-sm: 0.25rem;
   --smrt-radius-md: 0.5rem;
@@ -89,69 +182,85 @@
   --smrt-radius-2xl: 1.5rem;
   --smrt-radius-3xl: 2rem;
   --smrt-radius-full: 9999px;
-
-  /* Elevation - Minimal, subtle shadows */
+  --smrt-radius-extra-small: 0.25rem;
+  --smrt-radius-small: 0.25rem;
+  --smrt-radius-medium: 0.5rem;
+  --smrt-radius-large: 0.75rem;
+  --smrt-radius-extra-large: 1rem;
   --smrt-elevation-0: none;
   --smrt-elevation-1: inset 0 0 0 1px rgba(60, 64, 67, 0.08);
   --smrt-elevation-2: 0 1px 2px 0 rgba(60, 64, 67, 0.08), 0 1px 3px 0 rgba(60, 64, 67, 0.04);
   --smrt-elevation-3: 0 2px 4px 0 rgba(60, 64, 67, 0.1), 0 1px 2px 0 rgba(60, 64, 67, 0.06);
   --smrt-elevation-4: 0 4px 8px 0 rgba(60, 64, 67, 0.1), 0 2px 4px 0 rgba(60, 64, 67, 0.06);
   --smrt-elevation-5: 0 8px 16px 0 rgba(60, 64, 67, 0.12), 0 4px 8px 0 rgba(60, 64, 67, 0.06);
-
-  /* Duration */
   --smrt-duration-instant: 0ms;
   --smrt-duration-fast: 100ms;
   --smrt-duration-normal: 200ms;
   --smrt-duration-slow: 300ms;
   --smrt-duration-slower: 500ms;
-
-  /* Easing - Snappy studio style */
+  --smrt-duration-short1: 50ms;
+  --smrt-duration-short2: 100ms;
+  --smrt-duration-short3: 150ms;
+  --smrt-duration-short4: 200ms;
+  --smrt-duration-medium1: 250ms;
+  --smrt-duration-medium2: 300ms;
+  --smrt-duration-medium3: 350ms;
+  --smrt-duration-medium4: 400ms;
+  --smrt-duration-long1: 450ms;
+  --smrt-duration-long2: 500ms;
+  --smrt-duration-long3: 550ms;
+  --smrt-duration-long4: 600ms;
   --smrt-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
   --smrt-easing-standard-decelerate: cubic-bezier(0, 0, 0.2, 1);
   --smrt-easing-standard-accelerate: cubic-bezier(0.4, 0, 1, 1);
   --smrt-easing-emphasized: cubic-bezier(0.25, 0.1, 0.25, 1);
   --smrt-easing-emphasized-decelerate: cubic-bezier(0.0, 0, 0.2, 1);
   --smrt-easing-emphasized-accelerate: cubic-bezier(0.4, 0, 1, 1);
+  --smrt-font-family-mono: ui-monospace, "SF Mono", "Monaco", "Cascadia Code", "Consolas", monospace;
+  --smrt-typography-weight-normal: 400;
+  --smrt-typography-weight-medium: 500;
+  --smrt-typography-weight-semibold: 600;
+  --smrt-typography-weight-bold: 700;
+  --smrt-z-index-dropdown: 1000;
+  --smrt-z-index-sticky: 1100;
+  --smrt-z-index-overlay: 1200;
+  --smrt-z-index-modal: 1300;
+  --smrt-z-index-dialog: 1300;
+  --smrt-z-index-popover: 1400;
+  --smrt-z-index-toast: 1500;
+  --smrt-z-index-tooltip: 1600;
+  --smrt-z-index-loading: 1700;
 }
 
 [data-theme="studio"][data-color-scheme="dark"] {
-  /* Primary - Lighter blue */
+  --smrt-theme-id: studio;
+  --smrt-theme-name: Studio;
+  --smrt-color-scheme: dark;
+  --smrt-font-family: "Google Sans Text", "Roboto", "Segoe UI", system-ui, sans-serif;
   --smrt-color-primary: #8ab4f8;
   --smrt-color-on-primary: #062e6f;
   --smrt-color-primary-container: #174ea6;
   --smrt-color-on-primary-container: #d2e3fc;
-
-  /* Secondary */
   --smrt-color-secondary: #9aa0a6;
   --smrt-color-on-secondary: #202124;
   --smrt-color-secondary-container: #3c4043;
   --smrt-color-on-secondary-container: #e8eaed;
-
-  /* Tertiary */
   --smrt-color-tertiary: #c58af9;
   --smrt-color-on-tertiary: #3e1385;
   --smrt-color-tertiary-container: #6b12b8;
   --smrt-color-on-tertiary-container: #f3e8fd;
-
-  /* Error */
   --smrt-color-error: #f28b82;
   --smrt-color-on-error: #5c150c;
   --smrt-color-error-container: #a50e0e;
   --smrt-color-on-error-container: #fce8e6;
-
-  /* Warning */
   --smrt-color-warning: #fdd663;
   --smrt-color-on-warning: #5c3d00;
   --smrt-color-warning-container: #92400e;
   --smrt-color-on-warning-container: #fef3c7;
-
-  /* Success */
   --smrt-color-success: #81c995;
   --smrt-color-on-success: #0d3b1f;
   --smrt-color-success-container: #137333;
   --smrt-color-on-success-container: #e6f4ea;
-
-  /* Surface - Near black */
   --smrt-color-surface: #0e0e0e;
   --smrt-color-on-surface: #e8eaed;
   --smrt-color-surface-variant: #1f1f1f;
@@ -163,31 +272,133 @@
   --smrt-color-surface-container-lowest: #0a0a0a;
   --smrt-color-surface-dim: #141414;
   --smrt-color-surface-bright: #2d2d2d;
-
-  /* Background */
   --smrt-color-background: #0e0e0e;
   --smrt-color-on-background: #e8eaed;
-
-  /* Outline */
-  --smrt-color-outline: #5f6368;
+  --smrt-color-outline: #8c8e92;
   --smrt-color-outline-variant: #3c4043;
-
-  /* Inverse */
   --smrt-color-inverse-surface: #e8eaed;
   --smrt-color-inverse-on-surface: #202124;
   --smrt-color-inverse-primary: #1a73e8;
-
-  /* Effects */
   --smrt-color-shadow: rgba(0, 0, 0, 0.3);
   --smrt-color-scrim: rgba(0, 0, 0, 0.7);
-
-  /* Theme metadata */
-  --smrt-theme-id: studio;
-  --smrt-theme-name: Studio;
-  --smrt-color-scheme: dark;
-  --smrt-font-family: "Google Sans Text", "Roboto", "Segoe UI", system-ui, sans-serif;
-
-  /* Border Radius (same as light) */
+  --smrt-typography-display-large-size: 3rem;
+  --smrt-typography-display-large-line-height: 1.1;
+  --smrt-typography-display-large-weight: 400;
+  --smrt-typography-display-large-tracking: -0.01em;
+  --smrt-typography-display-large-font-family: var(--smrt-font-family);
+  --smrt-typography-display-large-font: 400 3rem/1.1 var(--smrt-font-family);
+  --smrt-typography-display-medium-size: 2.5rem;
+  --smrt-typography-display-medium-line-height: 1.15;
+  --smrt-typography-display-medium-weight: 400;
+  --smrt-typography-display-medium-tracking: -0.008em;
+  --smrt-typography-display-medium-font-family: var(--smrt-font-family);
+  --smrt-typography-display-medium-font: 400 2.5rem/1.15 var(--smrt-font-family);
+  --smrt-typography-display-small-size: 2rem;
+  --smrt-typography-display-small-line-height: 1.2;
+  --smrt-typography-display-small-weight: 400;
+  --smrt-typography-display-small-tracking: -0.005em;
+  --smrt-typography-display-small-font-family: var(--smrt-font-family);
+  --smrt-typography-display-small-font: 400 2rem/1.2 var(--smrt-font-family);
+  --smrt-typography-headline-large-size: 1.75rem;
+  --smrt-typography-headline-large-line-height: 1.25;
+  --smrt-typography-headline-large-weight: 400;
+  --smrt-typography-headline-large-tracking: 0;
+  --smrt-typography-headline-large-font-family: var(--smrt-font-family);
+  --smrt-typography-headline-large-font: 400 1.75rem/1.25 var(--smrt-font-family);
+  --smrt-typography-headline-medium-size: 1.5rem;
+  --smrt-typography-headline-medium-line-height: 1.3;
+  --smrt-typography-headline-medium-weight: 400;
+  --smrt-typography-headline-medium-tracking: 0;
+  --smrt-typography-headline-medium-font-family: var(--smrt-font-family);
+  --smrt-typography-headline-medium-font: 400 1.5rem/1.3 var(--smrt-font-family);
+  --smrt-typography-headline-small-size: 1.25rem;
+  --smrt-typography-headline-small-line-height: 1.35;
+  --smrt-typography-headline-small-weight: 500;
+  --smrt-typography-headline-small-tracking: 0;
+  --smrt-typography-headline-small-font-family: var(--smrt-font-family);
+  --smrt-typography-headline-small-font: 500 1.25rem/1.35 var(--smrt-font-family);
+  --smrt-typography-title-large-size: 1.125rem;
+  --smrt-typography-title-large-line-height: 1.4;
+  --smrt-typography-title-large-weight: 500;
+  --smrt-typography-title-large-tracking: 0;
+  --smrt-typography-title-large-font-family: var(--smrt-font-family);
+  --smrt-typography-title-large-font: 500 1.125rem/1.4 var(--smrt-font-family);
+  --smrt-typography-title-medium-size: 1rem;
+  --smrt-typography-title-medium-line-height: 1.5;
+  --smrt-typography-title-medium-weight: 500;
+  --smrt-typography-title-medium-tracking: 0.01em;
+  --smrt-typography-title-medium-font-family: var(--smrt-font-family);
+  --smrt-typography-title-medium-font: 500 1rem/1.5 var(--smrt-font-family);
+  --smrt-typography-title-small-size: 0.875rem;
+  --smrt-typography-title-small-line-height: 1.5;
+  --smrt-typography-title-small-weight: 500;
+  --smrt-typography-title-small-tracking: 0.01em;
+  --smrt-typography-title-small-font-family: var(--smrt-font-family);
+  --smrt-typography-title-small-font: 500 0.875rem/1.5 var(--smrt-font-family);
+  --smrt-typography-body-large-size: 1rem;
+  --smrt-typography-body-large-line-height: 1.6;
+  --smrt-typography-body-large-weight: 400;
+  --smrt-typography-body-large-tracking: 0;
+  --smrt-typography-body-large-font-family: var(--smrt-font-family);
+  --smrt-typography-body-large-font: 400 1rem/1.6 var(--smrt-font-family);
+  --smrt-typography-body-medium-size: 0.875rem;
+  --smrt-typography-body-medium-line-height: 1.6;
+  --smrt-typography-body-medium-weight: 400;
+  --smrt-typography-body-medium-tracking: 0;
+  --smrt-typography-body-medium-font-family: var(--smrt-font-family);
+  --smrt-typography-body-medium-font: 400 0.875rem/1.6 var(--smrt-font-family);
+  --smrt-typography-body-small-size: 0.75rem;
+  --smrt-typography-body-small-line-height: 1.5;
+  --smrt-typography-body-small-weight: 400;
+  --smrt-typography-body-small-tracking: 0.01em;
+  --smrt-typography-body-small-font-family: var(--smrt-font-family);
+  --smrt-typography-body-small-font: 400 0.75rem/1.5 var(--smrt-font-family);
+  --smrt-typography-label-large-size: 0.875rem;
+  --smrt-typography-label-large-line-height: 1.5;
+  --smrt-typography-label-large-weight: 500;
+  --smrt-typography-label-large-tracking: 0.02em;
+  --smrt-typography-label-large-font-family: var(--smrt-font-family);
+  --smrt-typography-label-large-font: 500 0.875rem/1.5 var(--smrt-font-family);
+  --smrt-typography-label-medium-size: 0.75rem;
+  --smrt-typography-label-medium-line-height: 1.5;
+  --smrt-typography-label-medium-weight: 500;
+  --smrt-typography-label-medium-tracking: 0.025em;
+  --smrt-typography-label-medium-font-family: var(--smrt-font-family);
+  --smrt-typography-label-medium-font: 500 0.75rem/1.5 var(--smrt-font-family);
+  --smrt-typography-label-small-size: 0.6875rem;
+  --smrt-typography-label-small-line-height: 1.4;
+  --smrt-typography-label-small-weight: 500;
+  --smrt-typography-label-small-tracking: 0.03em;
+  --smrt-typography-label-small-font-family: var(--smrt-font-family);
+  --smrt-typography-label-small-font: 500 0.6875rem/1.4 var(--smrt-font-family);
+  --smrt-spacing-0: 0;
+  --smrt-spacing-1: 0.25rem;
+  --smrt-spacing-2: 0.5rem;
+  --smrt-spacing-3: 0.75rem;
+  --smrt-spacing-4: 1rem;
+  --smrt-spacing-5: 1.25rem;
+  --smrt-spacing-6: 1.5rem;
+  --smrt-spacing-7: 1.75rem;
+  --smrt-spacing-8: 2rem;
+  --smrt-spacing-9: 2.25rem;
+  --smrt-spacing-10: 2.5rem;
+  --smrt-spacing-11: 2.75rem;
+  --smrt-spacing-12: 3rem;
+  --smrt-spacing-14: 3.5rem;
+  --smrt-spacing-16: 4rem;
+  --smrt-spacing-20: 5rem;
+  --smrt-spacing-24: 6rem;
+  --smrt-spacing-0_5: 0.125rem;
+  --smrt-spacing-1_5: 0.375rem;
+  --smrt-spacing-2_5: 0.625rem;
+  --smrt-spacing-3_5: 0.875rem;
+  --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;
   --smrt-radius-none: 0;
   --smrt-radius-sm: 0.25rem;
   --smrt-radius-md: 0.5rem;
@@ -196,29 +407,54 @@
   --smrt-radius-2xl: 1.5rem;
   --smrt-radius-3xl: 2rem;
   --smrt-radius-full: 9999px;
-
-  /* Elevation (same as light) */
+  --smrt-radius-extra-small: 0.25rem;
+  --smrt-radius-small: 0.25rem;
+  --smrt-radius-medium: 0.5rem;
+  --smrt-radius-large: 0.75rem;
+  --smrt-radius-extra-large: 1rem;
   --smrt-elevation-0: none;
   --smrt-elevation-1: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
   --smrt-elevation-2: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
   --smrt-elevation-3: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.1);
   --smrt-elevation-4: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
   --smrt-elevation-5: 0 8px 16px 0 rgba(0, 0, 0, 0.25), 0 4px 8px 0 rgba(0, 0, 0, 0.1);
-
-  /* Duration (same as light) */
   --smrt-duration-instant: 0ms;
   --smrt-duration-fast: 100ms;
   --smrt-duration-normal: 200ms;
   --smrt-duration-slow: 300ms;
   --smrt-duration-slower: 500ms;
-
-  /* Easing (same as light) */
+  --smrt-duration-short1: 50ms;
+  --smrt-duration-short2: 100ms;
+  --smrt-duration-short3: 150ms;
+  --smrt-duration-short4: 200ms;
+  --smrt-duration-medium1: 250ms;
+  --smrt-duration-medium2: 300ms;
+  --smrt-duration-medium3: 350ms;
+  --smrt-duration-medium4: 400ms;
+  --smrt-duration-long1: 450ms;
+  --smrt-duration-long2: 500ms;
+  --smrt-duration-long3: 550ms;
+  --smrt-duration-long4: 600ms;
   --smrt-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
   --smrt-easing-standard-decelerate: cubic-bezier(0, 0, 0.2, 1);
   --smrt-easing-standard-accelerate: cubic-bezier(0.4, 0, 1, 1);
   --smrt-easing-emphasized: cubic-bezier(0.25, 0.1, 0.25, 1);
   --smrt-easing-emphasized-decelerate: cubic-bezier(0.0, 0, 0.2, 1);
   --smrt-easing-emphasized-accelerate: cubic-bezier(0.4, 0, 1, 1);
+  --smrt-font-family-mono: ui-monospace, "SF Mono", "Monaco", "Cascadia Code", "Consolas", monospace;
+  --smrt-typography-weight-normal: 400;
+  --smrt-typography-weight-medium: 500;
+  --smrt-typography-weight-semibold: 600;
+  --smrt-typography-weight-bold: 700;
+  --smrt-z-index-dropdown: 1000;
+  --smrt-z-index-sticky: 1100;
+  --smrt-z-index-overlay: 1200;
+  --smrt-z-index-modal: 1300;
+  --smrt-z-index-dialog: 1300;
+  --smrt-z-index-popover: 1400;
+  --smrt-z-index-toast: 1500;
+  --smrt-z-index-tooltip: 1600;
+  --smrt-z-index-loading: 1700;
 }
 
 /* Studio utility classes for flat design */

package/dist/themes/theme-script.d.ts

@@ -6,12 +6,20 @@
  * to hand-duplicate the provider's storage logic in `app.html`; this helper
  * generates that script from the same config so the two never drift.
  *
+ * The script only stamps attributes (`data-theme`, `data-color-scheme`, the
+ * `dark` class, `color-scheme` style) — the actual variable values come from
+ * the static per-preset stylesheets (`themes/styles/<preset>.css`), which are
+ * keyed on exactly those attributes and apply before first paint. This keeps
+ * the inline bootstrap ~400 bytes instead of shipping a full preset×scheme
+ * variable matrix in every HTML response.
+ *
  * Usage (root layout — SSR renders `svelte:head` into the initial HTML, so the
  * script runs before first paint):
  *
  * ```svelte
  * <script lang="ts">
  *   import { themeScript } from '@happyvertical/smrt-ui/themes';
+ *   import '@happyvertical/smrt-ui/themes/styles/all.css';
  * </script>
  *
  * <svelte:head>
@@ -34,10 +42,10 @@ export interface ThemeScriptOptions {
  * Returns the JS body (no `<script>` tags) of a pre-paint bootstrap that
  * mirrors ThemeProvider's persistence: reads the stored config, resolves
  * 'system' via matchMedia, then stamps `data-theme`, `data-color-scheme`,
- * the `dark` class, and `color-scheme` style on <html>. It also sets temporary
- * bootstrap variables consumed by ThemeProvider's SSR inline fallbacks, so the
- * persisted preset/scheme wins before hydration rather than only changing
- * attributes around an already-painted default wrapper.
+ * the `dark` class, and `color-scheme` style on <html>. Variable values are
+ * delivered by the static stylesheets selected by those attributes, so the
+ * persisted preset/scheme paints correctly before hydration with no inline
+ * variable payload.
  */
 export declare function themeScript(options?: ThemeScriptOptions): string;
 //# sourceMappingURL=theme-script.d.ts.map

package/dist/themes/theme-script.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-script.d.ts","sourceRoot":"","sources":["../../src/themes/theme-script.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAIH,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAG3D,MAAM,WAAW,kBAAkB;IACjC,iEAAiE;IACjE,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,6EAA6E;IAC7E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kEAAkE;IAClE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sEAAsE;IACtE,kBAAkB,CAAC,EAAE,WAAW,CAAC;CAClC;AAaD;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,OAAO,GAAE,kBAAuB,GAAG,MAAM,CAoCpE"}
+{"version":3,"file":"theme-script.d.ts","sourceRoot":"","sources":["../../src/themes/theme-script.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAGH,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAG3D,MAAM,WAAW,kBAAkB;IACjC,iEAAiE;IACjE,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,6EAA6E;IAC7E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kEAAkE;IAClE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sEAAsE;IACtE,kBAAkB,CAAC,EAAE,WAAW,CAAC;CAClC;AASD;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,OAAO,GAAE,kBAAuB,GAAG,MAAM,CAoBpE"}

package/dist/themes/theme-script.js

@@ -6,12 +6,20 @@
  * to hand-duplicate the provider's storage logic in `app.html`; this helper
  * generates that script from the same config so the two never drift.
  *
+ * The script only stamps attributes (`data-theme`, `data-color-scheme`, the
+ * `dark` class, `color-scheme` style) — the actual variable values come from
+ * the static per-preset stylesheets (`themes/styles/<preset>.css`), which are
+ * keyed on exactly those attributes and apply before first paint. This keeps
+ * the inline bootstrap ~400 bytes instead of shipping a full preset×scheme
+ * variable matrix in every HTML response.
+ *
  * Usage (root layout — SSR renders `svelte:head` into the initial HTML, so the
  * script runs before first paint):
  *
  * ```svelte
  * <script lang="ts">
  *   import { themeScript } from '@happyvertical/smrt-ui/themes';
+ *   import '@happyvertical/smrt-ui/themes/styles/all.css';
  * </script>
  *
  * <svelte:head>
@@ -19,8 +27,7 @@
  * </svelte:head>
  * ```
  */
-import { generateThemeVariables } from './css-generator.js';
-import { getTheme, getThemeOptions } from './registry.js';
+import { getThemeOptions } from './registry.js';
 import { defaultThemeConfig } from './types.js';
 function inlineJSON(value) {
     return JSON.stringify(value)
@@ -28,17 +35,14 @@ function inlineJSON(value) {
         .replace(/\u2028/g, '\\u2028')
         .replace(/\u2029/g, '\\u2029');
 }
-function bootstrapVariableName(variable) {
-    return variable.replace(/^--smrt-/, '--smrt-bootstrap-');
-}
 /**
  * Returns the JS body (no `<script>` tags) of a pre-paint bootstrap that
  * mirrors ThemeProvider's persistence: reads the stored config, resolves
  * 'system' via matchMedia, then stamps `data-theme`, `data-color-scheme`,
- * the `dark` class, and `color-scheme` style on <html>. It also sets temporary
- * bootstrap variables consumed by ThemeProvider's SSR inline fallbacks, so the
- * persisted preset/scheme wins before hydration rather than only changing
- * attributes around an already-painted default wrapper.
+ * the `dark` class, and `color-scheme` style on <html>. Variable values are
+ * delivered by the static stylesheets selected by those attributes, so the
+ * persisted preset/scheme paints correctly before hydration with no inline
+ * variable payload.
  */
 export function themeScript(options = {}) {
     const presetNames = getThemeOptions().map(({ value }) => value);
@@ -52,17 +56,8 @@ export function themeScript(options = {}) {
     const fallback = ['light', 'dark', 'system'].includes(requestedFallback)
         ? requestedFallback
         : defaultThemeConfig.colorScheme;
-    const variableNames = Array.from(new Set(presetNames.flatMap((name) => [
-        ...Object.keys(generateThemeVariables(getTheme(name), false)),
-        ...Object.keys(generateThemeVariables(getTheme(name), true)),
-    ])));
-    const bootstrapNames = variableNames.map(bootstrapVariableName);
-    const variableRows = presetNames.flatMap((name) => [false, true].map((dark) => {
-        const variables = generateThemeVariables(getTheme(name), dark);
-        return variableNames.map((variable) => variables[variable] ?? '');
-    }));
     // Keep this dependency-free and ES5-ish: it runs inline in every browser
     // before any framework code. Must stay in sync with
     // ThemeProvider.svelte's loadPersistedConfig()/resolvedScheme.
-    return `(function(){try{var presets=${inlineJSON(presetNames)};var names=${inlineJSON(bootstrapNames)};var rows=${inlineJSON(variableRows)};var scheme=${inlineJSON(fallback)};var preset=${inlineJSON(preset)};${persist ? `try{var raw=localStorage.getItem(${inlineJSON(storageKey)});if(raw){var data=JSON.parse(raw);if(data&&typeof data==='object'){if(data.colorScheme==='light'||data.colorScheme==='dark'||data.colorScheme==='system')scheme=data.colorScheme;if(typeof data.preset==='string'&&presets.indexOf(data.preset)!==-1)preset=data.preset;}}}catch(_){}` : ''}if(scheme==='system'){scheme=window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light';}var el=document.documentElement;el.setAttribute('data-theme',preset);el.setAttribute('data-color-scheme',scheme);el.setAttribute('data-smrt-theme-bootstrap','');el.classList.toggle('dark',scheme==='dark');el.style.colorScheme=scheme;var row=rows[presets.indexOf(preset)*2+(scheme==='dark'?1:0)];for(var i=0;i<names.length;i++){if(row[i])el.style.setProperty(names[i],row[i]);}}catch(_){}})();`;
+    return `(function(){try{var presets=${inlineJSON(presetNames)};var scheme=${inlineJSON(fallback)};var preset=${inlineJSON(preset)};${persist ? `try{var raw=localStorage.getItem(${inlineJSON(storageKey)});if(raw){var data=JSON.parse(raw);if(data&&typeof data==='object'){if(data.colorScheme==='light'||data.colorScheme==='dark'||data.colorScheme==='system')scheme=data.colorScheme;if(typeof data.preset==='string'&&presets.indexOf(data.preset)!==-1)preset=data.preset;}}}catch(_){}` : ''}if(scheme==='system'){scheme=window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light';}var el=document.documentElement;el.setAttribute('data-theme',preset);el.setAttribute('data-color-scheme',scheme);el.classList.toggle('dark',scheme==='dark');el.style.colorScheme=scheme;}catch(_){}})();`;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@happyvertical/smrt-ui",
-  "version": "0.40.67",
+  "version": "0.40.69",
   "description": "Domain-agnostic Svelte 5 UI runtime for SMRT: primitives, i18n client, theme system, and module UI registry",
   "type": "module",
   "main": "./dist/index.js",
@@ -124,7 +124,7 @@
   },
   "dependencies": {
     "esm-env": "^1.2.2",
-    "@happyvertical/smrt-types": "0.40.67"
+    "@happyvertical/smrt-types": "0.40.69"
   },
   "peerDependencies": {
     "svelte": "^5.56.4"
@@ -152,6 +152,7 @@
     "build": "svelte-package -i src --tsconfig tsconfig.svelte.json",
     "dev": "svelte-package -i src --watch",
     "check": "pnpm exec svelte-check --tsconfig ./tsconfig.svelte.json",
+    "generate:themes": "tsx scripts/generate-theme-styles.ts",
     "test": "vitest run",
     "typecheck": "tsc --noEmit && node ../../scripts/svelte-check-a11y.mjs --tsconfig ./tsconfig.svelte.json",
     "verify:pack": "node ../../scripts/verify-package-types-exports.js ."