@happyvertical/smrt-ui 0.55.17 → 0.55.19

package/dist/themes/styles/smrt.css

@@ -36,6 +36,10 @@
   --smrt-color-on-tertiary: #ffffff;
   --smrt-color-tertiary-container: #e7e0ff;
   --smrt-color-on-tertiary-container: #3a2b8c;
+  --smrt-color-info: #2c6a96;
+  --smrt-color-on-info: #ffffff;
+  --smrt-color-info-container: #dcebf5;
+  --smrt-color-on-info-container: #0f3149;
   --smrt-color-error: #c0362c;
   --smrt-color-on-error: #ffffff;
   --smrt-color-error-container: #fbe0dd;
@@ -142,22 +146,22 @@
   --smrt-typography-body-small-font: 400 0.8125rem/1.55 var(--smrt-font-family);
   --smrt-typography-label-large-size: 0.8125rem;
   --smrt-typography-label-large-line-height: 1.4;
-  --smrt-typography-label-large-weight: 600;
-  --smrt-typography-label-large-tracking: 0.04em;
+  --smrt-typography-label-large-weight: 500;
+  --smrt-typography-label-large-tracking: 0.01em;
   --smrt-typography-label-large-font-family: var(--smrt-font-family);
-  --smrt-typography-label-large-font: 600 0.8125rem/1.4 var(--smrt-font-family);
+  --smrt-typography-label-large-font: 500 0.8125rem/1.4 var(--smrt-font-family);
   --smrt-typography-label-medium-size: 0.6875rem;
   --smrt-typography-label-medium-line-height: 1.4;
-  --smrt-typography-label-medium-weight: 600;
-  --smrt-typography-label-medium-tracking: 0.08em;
+  --smrt-typography-label-medium-weight: 500;
+  --smrt-typography-label-medium-tracking: 0.03em;
   --smrt-typography-label-medium-font-family: var(--smrt-font-family);
-  --smrt-typography-label-medium-font: 600 0.6875rem/1.4 var(--smrt-font-family);
+  --smrt-typography-label-medium-font: 500 0.6875rem/1.4 var(--smrt-font-family);
   --smrt-typography-label-small-size: 0.625rem;
   --smrt-typography-label-small-line-height: 1.4;
-  --smrt-typography-label-small-weight: 600;
-  --smrt-typography-label-small-tracking: 0.1em;
+  --smrt-typography-label-small-weight: 500;
+  --smrt-typography-label-small-tracking: 0.05em;
   --smrt-typography-label-small-font-family: var(--smrt-font-family);
-  --smrt-typography-label-small-font: 600 0.625rem/1.4 var(--smrt-font-family);
+  --smrt-typography-label-small-font: 500 0.625rem/1.4 var(--smrt-font-family);
   --smrt-spacing-0: 0;
   --smrt-spacing-1: 0.25rem;
   --smrt-spacing-2: 0.5rem;
@@ -199,12 +203,12 @@
   --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(20, 26, 36, 0.08);
-  --smrt-elevation-2: 0 18px 44px -28px rgba(20, 26, 36, 0.18);
-  --smrt-elevation-3: 0 24px 56px -34px rgba(20, 26, 36, 0.22);
-  --smrt-elevation-4: 0 30px 70px -40px rgba(20, 26, 36, 0.28);
-  --smrt-elevation-5: 0 40px 90px -50px rgba(20, 26, 36, 0.3);
+  --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) 10%, transparent), 0 4px 10px -4px color-mix(in srgb, var(--smrt-shadow-color) 10%, transparent);
+  --smrt-elevation-3: 0 1px 3px 0 color-mix(in srgb, var(--smrt-shadow-color) 12%, transparent), 0 8px 18px -6px color-mix(in srgb, var(--smrt-shadow-color) 14%, transparent);
+  --smrt-elevation-4: 0 2px 4px 0 color-mix(in srgb, var(--smrt-shadow-color) 14%, transparent), 0 14px 28px -8px color-mix(in srgb, var(--smrt-shadow-color) 16%, transparent);
+  --smrt-elevation-5: 0 2px 6px 0 color-mix(in srgb, var(--smrt-shadow-color) 16%, transparent), 0 24px 48px -12px color-mix(in srgb, var(--smrt-shadow-color) 20%, transparent);
   --smrt-duration-instant: 0ms;
   --smrt-duration-fast: 100ms;
   --smrt-duration-normal: 200ms;
@@ -242,6 +246,48 @@
   --smrt-z-index-toast: 1500;
   --smrt-z-index-tooltip: 1600;
   --smrt-z-index-loading: 1700;
+  --smrt-surface-ground: #edeff2;
+  --smrt-surface-panel: #ffffff;
+  --smrt-surface-control: #f5f6f8;
+  --smrt-surface-raised: #ffffff;
+  --smrt-surface-sunken: #e7eaee;
+  --smrt-surface-overlay: rgba(0, 0, 0, 0.5);
+  --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) 30%, 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.16;
+  --smrt-state-selected: 0.14;
+  --smrt-state-focus: 0.16;
+  --smrt-state-dragged: 0.20;
+  --smrt-state-disabled: 0.38;
+  --smrt-shadow-color: rgb(20 26 36);
+  --smrt-control-radius: var(--smrt-radius-sm);
+  --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: "tnum" 1, "cv11" 1;
 }
 
 [data-theme="smrt"][data-color-scheme="dark"] {
@@ -263,6 +309,10 @@
   --smrt-color-on-tertiary: #241a4d;
   --smrt-color-tertiary-container: #2a2350;
   --smrt-color-on-tertiary-container: #ddd4ff;
+  --smrt-color-info: #6fa8d6;
+  --smrt-color-on-info: #08202f;
+  --smrt-color-info-container: #162a39;
+  --smrt-color-on-info-container: #b5d6ee;
   --smrt-color-error: #ff6b6b;
   --smrt-color-on-error: #2a0a0a;
   --smrt-color-error-container: #3a1414;
@@ -369,22 +419,22 @@
   --smrt-typography-body-small-font: 400 0.8125rem/1.55 var(--smrt-font-family);
   --smrt-typography-label-large-size: 0.8125rem;
   --smrt-typography-label-large-line-height: 1.4;
-  --smrt-typography-label-large-weight: 600;
-  --smrt-typography-label-large-tracking: 0.04em;
+  --smrt-typography-label-large-weight: 500;
+  --smrt-typography-label-large-tracking: 0.01em;
   --smrt-typography-label-large-font-family: var(--smrt-font-family);
-  --smrt-typography-label-large-font: 600 0.8125rem/1.4 var(--smrt-font-family);
+  --smrt-typography-label-large-font: 500 0.8125rem/1.4 var(--smrt-font-family);
   --smrt-typography-label-medium-size: 0.6875rem;
   --smrt-typography-label-medium-line-height: 1.4;
-  --smrt-typography-label-medium-weight: 600;
-  --smrt-typography-label-medium-tracking: 0.08em;
+  --smrt-typography-label-medium-weight: 500;
+  --smrt-typography-label-medium-tracking: 0.03em;
   --smrt-typography-label-medium-font-family: var(--smrt-font-family);
-  --smrt-typography-label-medium-font: 600 0.6875rem/1.4 var(--smrt-font-family);
+  --smrt-typography-label-medium-font: 500 0.6875rem/1.4 var(--smrt-font-family);
   --smrt-typography-label-small-size: 0.625rem;
   --smrt-typography-label-small-line-height: 1.4;
-  --smrt-typography-label-small-weight: 600;
-  --smrt-typography-label-small-tracking: 0.1em;
+  --smrt-typography-label-small-weight: 500;
+  --smrt-typography-label-small-tracking: 0.05em;
   --smrt-typography-label-small-font-family: var(--smrt-font-family);
-  --smrt-typography-label-small-font: 600 0.625rem/1.4 var(--smrt-font-family);
+  --smrt-typography-label-small-font: 500 0.625rem/1.4 var(--smrt-font-family);
   --smrt-spacing-0: 0;
   --smrt-spacing-1: 0.25rem;
   --smrt-spacing-2: 0.5rem;
@@ -426,12 +476,12 @@
   --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.06);
-  --smrt-elevation-2: 0 18px 44px -28px rgba(0, 0, 0, 0.6);
-  --smrt-elevation-3: 0 24px 56px -34px rgba(0, 0, 0, 0.72);
-  --smrt-elevation-4: 0 30px 66px -40px rgba(0, 0, 0, 0.82);
-  --smrt-elevation-5: 0 40px 90px -50px rgba(0, 0, 0, 0.88);
+  --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) 36%, transparent), 0 4px 10px -4px color-mix(in srgb, var(--smrt-shadow-color) 28%, transparent);
+  --smrt-elevation-3: var(--smrt-inset-highlight), 0 1px 3px 0 color-mix(in srgb, var(--smrt-shadow-color) 40%, transparent), 0 8px 18px -6px color-mix(in srgb, var(--smrt-shadow-color) 36%, transparent);
+  --smrt-elevation-4: var(--smrt-inset-highlight), 0 2px 4px 0 color-mix(in srgb, var(--smrt-shadow-color) 44%, transparent), 0 14px 28px -8px color-mix(in srgb, var(--smrt-shadow-color) 42%, transparent);
+  --smrt-elevation-5: var(--smrt-inset-highlight), 0 2px 6px 0 color-mix(in srgb, var(--smrt-shadow-color) 48%, transparent), 0 24px 48px -12px color-mix(in srgb, var(--smrt-shadow-color) 50%, transparent);
   --smrt-duration-instant: 0ms;
   --smrt-duration-fast: 100ms;
   --smrt-duration-normal: 200ms;
@@ -469,6 +519,48 @@
   --smrt-z-index-toast: 1500;
   --smrt-z-index-tooltip: 1600;
   --smrt-z-index-loading: 1700;
+  --smrt-surface-ground: #0b0c0e;
+  --smrt-surface-panel: #121417;
+  --smrt-surface-control: #181b1f;
+  --smrt-surface-raised: #1d2126;
+  --smrt-surface-sunken: #08090b;
+  --smrt-surface-overlay: rgba(0, 0, 0, 0.7);
+  --smrt-hairline-color: color-mix(in srgb, var(--smrt-color-on-surface) 9%, transparent);
+  --smrt-hairline-strong-color: color-mix(in srgb, var(--smrt-color-on-surface) 24%, 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.05);
+  --smrt-state-hover: 0.10;
+  --smrt-state-pressed: 0.16;
+  --smrt-state-selected: 0.14;
+  --smrt-state-focus: 0.16;
+  --smrt-state-dragged: 0.20;
+  --smrt-state-disabled: 0.38;
+  --smrt-shadow-color: rgb(0 0 0);
+  --smrt-control-radius: var(--smrt-radius-sm);
+  --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: "tnum" 1, "cv11" 1;
 }
 
 /* ============================================================================

package/dist/themes/styles/studio.css

@@ -27,6 +27,10 @@
   --smrt-color-on-tertiary: #ffffff;
   --smrt-color-tertiary-container: #f3e8fd;
   --smrt-color-on-tertiary-container: #6b12b8;
+  --smrt-color-info: #9334e6;
+  --smrt-color-on-info: #ffffff;
+  --smrt-color-info-container: #f3e8fd;
+  --smrt-color-on-info-container: #6b12b8;
   --smrt-color-error: #d93025;
   --smrt-color-on-error: #ffffff;
   --smrt-color-error-container: #fce8e6;
@@ -62,31 +66,31 @@
   --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-tracking: -0.02em;
   --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-tracking: -0.015em;
   --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-tracking: -0.01em;
   --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-tracking: -0.01em;
   --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-tracking: -0.005em;
   --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;
@@ -134,13 +138,13 @@
   --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-tracking: 0.01em;
   --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-tracking: 0.02em;
   --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;
@@ -190,12 +194,12 @@
   --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);
+  --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) 10%, transparent), 0 2px 4px -2px 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) 12%, transparent), 0 4px 8px -3px color-mix(in srgb, var(--smrt-shadow-color) 10%, transparent);
+  --smrt-elevation-4: 0 2px 3px 0 color-mix(in srgb, var(--smrt-shadow-color) 12%, transparent), 0 8px 16px -4px 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) 14%, transparent), 0 16px 32px -8px color-mix(in srgb, var(--smrt-shadow-color) 16%, transparent);
   --smrt-duration-instant: 0ms;
   --smrt-duration-fast: 100ms;
   --smrt-duration-normal: 200ms;
@@ -233,6 +237,48 @@
   --smrt-z-index-toast: 1500;
   --smrt-z-index-tooltip: 1600;
   --smrt-z-index-loading: 1700;
+  --smrt-surface-ground: #ffffff;
+  --smrt-surface-panel: #ffffff;
+  --smrt-surface-control: #f6f7f8;
+  --smrt-surface-raised: #ffffff;
+  --smrt-surface-sunken: #f1f3f4;
+  --smrt-surface-overlay: rgba(0, 0, 0, 0.5);
+  --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) 32%, 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.06;
+  --smrt-state-pressed: 0.10;
+  --smrt-state-selected: 0.10;
+  --smrt-state-focus: 0.10;
+  --smrt-state-dragged: 0.14;
+  --smrt-state-disabled: 0.38;
+  --smrt-shadow-color: rgb(60 64 67);
+  --smrt-control-radius: 0.375rem;
+  --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="studio"][data-color-scheme="dark"] {
@@ -254,6 +300,10 @@
   --smrt-color-on-tertiary: #3e1385;
   --smrt-color-tertiary-container: #6b12b8;
   --smrt-color-on-tertiary-container: #f3e8fd;
+  --smrt-color-info: #c58af9;
+  --smrt-color-on-info: #3e1385;
+  --smrt-color-info-container: #6b12b8;
+  --smrt-color-on-info-container: #f3e8fd;
   --smrt-color-error: #f28b82;
   --smrt-color-on-error: #5c150c;
   --smrt-color-error-container: #a50e0e;
@@ -266,18 +316,18 @@
   --smrt-color-on-success: #0d3b1f;
   --smrt-color-success-container: #137333;
   --smrt-color-on-success-container: #e6f4ea;
-  --smrt-color-surface: #0e0e0e;
+  --smrt-color-surface: #131416;
   --smrt-color-on-surface: #e8eaed;
-  --smrt-color-surface-variant: #1f1f1f;
+  --smrt-color-surface-variant: #1c1d20;
   --smrt-color-on-surface-variant: #9aa0a6;
-  --smrt-color-surface-container: #1f1f1f;
-  --smrt-color-surface-container-low: #141414;
-  --smrt-color-surface-container-high: #2d2d2d;
-  --smrt-color-surface-container-highest: #3c4043;
-  --smrt-color-surface-container-lowest: #0a0a0a;
-  --smrt-color-surface-dim: #141414;
-  --smrt-color-surface-bright: #2d2d2d;
-  --smrt-color-background: #0e0e0e;
+  --smrt-color-surface-container: #1a1b1e;
+  --smrt-color-surface-container-low: #16171a;
+  --smrt-color-surface-container-high: #202124;
+  --smrt-color-surface-container-highest: #292a2d;
+  --smrt-color-surface-container-lowest: #0e0f10;
+  --smrt-color-surface-dim: #0e0f10;
+  --smrt-color-surface-bright: #2b2c2f;
+  --smrt-color-background: #131416;
   --smrt-color-on-background: #e8eaed;
   --smrt-color-outline: #8c8e92;
   --smrt-color-outline-variant: #3c4043;
@@ -289,31 +339,31 @@
   --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-tracking: -0.02em;
   --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-tracking: -0.015em;
   --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-tracking: -0.01em;
   --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-tracking: -0.01em;
   --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-tracking: -0.005em;
   --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;
@@ -361,13 +411,13 @@
   --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-tracking: 0.01em;
   --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-tracking: 0.02em;
   --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;
@@ -417,12 +467,12 @@
   --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);
+  --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) 28%, transparent), 0 2px 4px -2px color-mix(in srgb, var(--smrt-shadow-color) 20%, transparent);
+  --smrt-elevation-3: var(--smrt-inset-highlight), 0 1px 2px 0 color-mix(in srgb, var(--smrt-shadow-color) 30%, transparent), 0 4px 8px -3px color-mix(in srgb, var(--smrt-shadow-color) 24%, transparent);
+  --smrt-elevation-4: var(--smrt-inset-highlight), 0 2px 3px 0 color-mix(in srgb, var(--smrt-shadow-color) 32%, transparent), 0 8px 16px -4px color-mix(in srgb, var(--smrt-shadow-color) 28%, transparent);
+  --smrt-elevation-5: var(--smrt-inset-highlight), 0 2px 4px 0 color-mix(in srgb, var(--smrt-shadow-color) 34%, transparent), 0 16px 32px -8px color-mix(in srgb, var(--smrt-shadow-color) 32%, transparent);
   --smrt-duration-instant: 0ms;
   --smrt-duration-fast: 100ms;
   --smrt-duration-normal: 200ms;
@@ -460,6 +510,48 @@
   --smrt-z-index-toast: 1500;
   --smrt-z-index-tooltip: 1600;
   --smrt-z-index-loading: 1700;
+  --smrt-surface-ground: #131416;
+  --smrt-surface-panel: #131416;
+  --smrt-surface-control: #1c1d20;
+  --smrt-surface-raised: #292a2d;
+  --smrt-surface-sunken: #0e0f10;
+  --smrt-surface-overlay: rgba(0, 0, 0, 0.7);
+  --smrt-hairline-color: color-mix(in srgb, var(--smrt-color-on-surface) 14%, transparent);
+  --smrt-hairline-strong-color: color-mix(in srgb, var(--smrt-color-on-surface) 32%, 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.05);
+  --smrt-state-hover: 0.06;
+  --smrt-state-pressed: 0.10;
+  --smrt-state-selected: 0.10;
+  --smrt-state-focus: 0.10;
+  --smrt-state-dragged: 0.14;
+  --smrt-state-disabled: 0.38;
+  --smrt-shadow-color: rgb(0 0 0);
+  --smrt-control-radius: 0.375rem;
+  --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;
 }
 
 /* Studio utility classes for flat design */

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

@@ -42,7 +42,9 @@ 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>. Variable values are
+ * the `dark` class, and `color-scheme` style on <html>, plus `data-contrast`
+ * (`standard|more|forced`, from the persisted preference and
+ * `prefers-contrast`/`forced-colors`) and `data-density` (persisted only). 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.

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}
+{"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;;;;;;;;;;GAUG;AACH,wBAAgB,WAAW,CAAC,OAAO,GAAE,kBAAuB,GAAG,MAAM,CAuBpE"}

package/dist/themes/theme-script.js

@@ -39,7 +39,9 @@ function inlineJSON(value) {
  * 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>. Variable values are
+ * the `dark` class, and `color-scheme` style on <html>, plus `data-contrast`
+ * (`standard|more|forced`, from the persisted preference and
+ * `prefers-contrast`/`forced-colors`) and `data-density` (persisted only). 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.
@@ -59,5 +61,8 @@ export function themeScript(options = {}) {
     // 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 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(_){}})();`;
+    const read = persist
+        ? `try{var raw=localStorage.getItem(${inlineJSON(storageKey)});if(raw){var d=JSON.parse(raw);if(d&&typeof d==='object'){var s=d.colorScheme;if(s==='light'||s==='dark'||s==='system')scheme=s;if(typeof d.preset==='string'&&presets.indexOf(d.preset)!==-1)preset=d.preset;if(d.density==='comfortable'||d.density==='touch')den=d.density;if(d.contrast==='standard'||d.contrast==='more')con=d.contrast;}}}catch(_){}`
+        : '';
+    return `(function(){try{var presets=${inlineJSON(presetNames)},scheme=${inlineJSON(fallback)},preset=${inlineJSON(preset)},den,con,m=function(q){return window.matchMedia(q).matches};${read}if(scheme==='system')scheme=m('(prefers-color-scheme: dark)')?'dark':'light';var forced=m('(forced-colors: active)'),el=document.documentElement;el.setAttribute('data-theme',preset);el.setAttribute('data-color-scheme',scheme);el.setAttribute('data-contrast',forced?'forced':con==='more'||(con!=='standard'&&m('(prefers-contrast: more)'))?'more':'standard');if(forced)el.setAttribute('data-forced-colors','');if(den)el.setAttribute('data-density',den);el.classList.toggle('dark',scheme==='dark');el.style.colorScheme=scheme;}catch(_){}})();`;
 }