@happyvertical/smrt-ui 0.55.17 → 0.55.18

package/dist/themes/styles/glass.css

@@ -27,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);
@@ -147,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;
@@ -192,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;
@@ -235,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"] {
@@ -260,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);
@@ -272,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;
@@ -283,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);
@@ -292,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;
@@ -380,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;
@@ -425,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;
@@ -468,10 +514,48 @@
   --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 */

package/dist/themes/styles/happyvertical.css

@@ -40,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;
@@ -203,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;
@@ -246,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"] {
@@ -267,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;
@@ -430,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;
@@ -473,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;
 }
 
 /* ============================================================================

package/dist/themes/styles/material.css

@@ -85,6 +85,10 @@
   --smrt-color-on-tertiary: #ffffff;
   --smrt-color-tertiary-container: #e8ddff;
   --smrt-color-on-tertiary-container: #1e005f;
+  --smrt-color-info: #7c4dff;
+  --smrt-color-on-info: #ffffff;
+  --smrt-color-info-container: #e8ddff;
+  --smrt-color-on-info-container: #1e005f;
   --smrt-color-error: #b3261e;
   --smrt-color-on-error: #ffffff;
   --smrt-color-error-container: #f9dedc;
@@ -108,7 +112,7 @@
   --smrt-color-surface-container-lowest: #ffffff;
   --smrt-color-surface-dim: #dadce0;
   --smrt-color-surface-bright: #f8f9fa;
-  --smrt-color-background: #ffffff;
+  --smrt-color-background: #f6f8fc;
   --smrt-color-on-background: #1f1f1f;
   --smrt-color-outline: #747775;
   --smrt-color-outline-variant: #c4c7c5;
@@ -126,25 +130,25 @@
   --smrt-typography-display-medium-size: 2.75rem;
   --smrt-typography-display-medium-line-height: 1.15;
   --smrt-typography-display-medium-weight: 400;
-  --smrt-typography-display-medium-tracking: -0.01em;
+  --smrt-typography-display-medium-tracking: -0.015em;
   --smrt-typography-display-medium-font-family: var(--smrt-font-family);
   --smrt-typography-display-medium-font: 400 2.75rem/1.15 var(--smrt-font-family);
   --smrt-typography-display-small-size: 2.25rem;
   --smrt-typography-display-small-line-height: 1.2;
   --smrt-typography-display-small-weight: 400;
-  --smrt-typography-display-small-tracking: 0;
+  --smrt-typography-display-small-tracking: -0.01em;
   --smrt-typography-display-small-font-family: var(--smrt-font-family);
   --smrt-typography-display-small-font: 400 2.25rem/1.2 var(--smrt-font-family);
   --smrt-typography-headline-large-size: 2rem;
   --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 2rem/1.25 var(--smrt-font-family);
   --smrt-typography-headline-medium-size: 1.75rem;
   --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.75rem/1.3 var(--smrt-font-family);
   --smrt-typography-headline-small-size: 1.5rem;
@@ -198,13 +202,13 @@
   --smrt-typography-label-medium-size: 0.75rem;
   --smrt-typography-label-medium-line-height: 1.4;
   --smrt-typography-label-medium-weight: 500;
-  --smrt-typography-label-medium-tracking: 0.05em;
+  --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.4 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.05em;
+  --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;
@@ -248,12 +252,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 2px 0 rgb(0 0 0 / 0.05), 0 1px 3px 0 rgb(0 0 0 / 0.02);
-  --smrt-elevation-2: 0 1px 2px 0 rgb(0 0 0 / 0.06), 0 2px 4px 0 rgb(0 0 0 / 0.04);
-  --smrt-elevation-3: 0 2px 4px 0 rgb(0 0 0 / 0.06), 0 4px 8px 0 rgb(0 0 0 / 0.04);
-  --smrt-elevation-4: 0 4px 8px 0 rgb(0 0 0 / 0.08), 0 8px 16px 0 rgb(0 0 0 / 0.04);
-  --smrt-elevation-5: 0 8px 16px 0 rgb(0 0 0 / 0.1), 0 16px 32px 0 rgb(0 0 0 / 0.04);
+  --smrt-elevation-0: 0 0 0 0 transparent;
+  --smrt-elevation-1: 0 1px 2px 0 color-mix(in srgb, var(--smrt-shadow-color) 8%, transparent), 0 2px 4px -1px color-mix(in srgb, var(--smrt-shadow-color) 6%, transparent);
+  --smrt-elevation-2: 0 1px 2px 0 color-mix(in srgb, var(--smrt-shadow-color) 10%, transparent), 0 4px 8px -2px 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 16px -4px color-mix(in srgb, var(--smrt-shadow-color) 12%, transparent);
+  --smrt-elevation-4: 0 2px 4px 0 color-mix(in srgb, var(--smrt-shadow-color) 12%, transparent), 0 12px 24px -6px color-mix(in srgb, var(--smrt-shadow-color) 14%, transparent);
+  --smrt-elevation-5: 0 2px 6px 0 color-mix(in srgb, var(--smrt-shadow-color) 14%, transparent), 0 20px 40px -10px color-mix(in srgb, var(--smrt-shadow-color) 18%, transparent);
   --smrt-duration-instant: 0ms;
   --smrt-duration-fast: 100ms;
   --smrt-duration-normal: 200ms;
@@ -291,6 +295,48 @@
   --smrt-z-index-toast: 1500;
   --smrt-z-index-tooltip: 1600;
   --smrt-z-index-loading: 1700;
+  --smrt-surface-ground: #f6f8fc;
+  --smrt-surface-panel: #ffffff;
+  --smrt-surface-control: #e8eaed;
+  --smrt-surface-raised: #ffffff;
+  --smrt-surface-sunken: #eef1f6;
+  --smrt-surface-overlay: rgba(0, 0, 0, 0.5);
+  --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) 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.08;
+  --smrt-state-pressed: 0.12;
+  --smrt-state-selected: 0.12;
+  --smrt-state-focus: 0.12;
+  --smrt-state-dragged: 0.16;
+  --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.75rem;
+  --smrt-control-height-small: 2.25rem;
+  --smrt-control-weight: 500;
+  --smrt-control-border: 1px solid transparent;
+  --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="material"][data-color-scheme="dark"] {
@@ -312,6 +358,10 @@
   --smrt-color-on-tertiary: #3e1e96;
   --smrt-color-tertiary-container: #5e3fc0;
   --smrt-color-on-tertiary-container: #e8ddff;
+  --smrt-color-info: #cbb7ff;
+  --smrt-color-on-info: #3e1e96;
+  --smrt-color-info-container: #5e3fc0;
+  --smrt-color-on-info-container: #e8ddff;
   --smrt-color-error: #f2b8b5;
   --smrt-color-on-error: #601410;
   --smrt-color-error-container: #8c1d18;
@@ -324,18 +374,18 @@
   --smrt-color-on-success: #0d522d;
   --smrt-color-success-container: #1e4620;
   --smrt-color-on-success-container: #e6f4ea;
-  --smrt-color-surface: #0e0e0e;
+  --smrt-color-surface: #1b1c20;
   --smrt-color-on-surface: #e3e3e3;
-  --smrt-color-surface-variant: #1f1f1f;
+  --smrt-color-surface-variant: #26282c;
   --smrt-color-on-surface-variant: #c4c7c5;
-  --smrt-color-surface-container: #1f1f1f;
-  --smrt-color-surface-container-low: #141414;
-  --smrt-color-surface-container-high: #2d2d2d;
-  --smrt-color-surface-container-highest: #363636;
-  --smrt-color-surface-container-lowest: #0a0a0a;
-  --smrt-color-surface-dim: #141414;
-  --smrt-color-surface-bright: #2d2d2d;
-  --smrt-color-background: #0e0e0e;
+  --smrt-color-surface-container: #1f2024;
+  --smrt-color-surface-container-low: #17181c;
+  --smrt-color-surface-container-high: #26282c;
+  --smrt-color-surface-container-highest: #34363a;
+  --smrt-color-surface-container-lowest: #0d0e11;
+  --smrt-color-surface-dim: #121316;
+  --smrt-color-surface-bright: #393b3f;
+  --smrt-color-background: #121316;
   --smrt-color-on-background: #e3e3e3;
   --smrt-color-outline: #8e918f;
   --smrt-color-outline-variant: #444746;
@@ -353,25 +403,25 @@
   --smrt-typography-display-medium-size: 2.75rem;
   --smrt-typography-display-medium-line-height: 1.15;
   --smrt-typography-display-medium-weight: 400;
-  --smrt-typography-display-medium-tracking: -0.01em;
+  --smrt-typography-display-medium-tracking: -0.015em;
   --smrt-typography-display-medium-font-family: var(--smrt-font-family);
   --smrt-typography-display-medium-font: 400 2.75rem/1.15 var(--smrt-font-family);
   --smrt-typography-display-small-size: 2.25rem;
   --smrt-typography-display-small-line-height: 1.2;
   --smrt-typography-display-small-weight: 400;
-  --smrt-typography-display-small-tracking: 0;
+  --smrt-typography-display-small-tracking: -0.01em;
   --smrt-typography-display-small-font-family: var(--smrt-font-family);
   --smrt-typography-display-small-font: 400 2.25rem/1.2 var(--smrt-font-family);
   --smrt-typography-headline-large-size: 2rem;
   --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 2rem/1.25 var(--smrt-font-family);
   --smrt-typography-headline-medium-size: 1.75rem;
   --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.75rem/1.3 var(--smrt-font-family);
   --smrt-typography-headline-small-size: 1.5rem;
@@ -425,13 +475,13 @@
   --smrt-typography-label-medium-size: 0.75rem;
   --smrt-typography-label-medium-line-height: 1.4;
   --smrt-typography-label-medium-weight: 500;
-  --smrt-typography-label-medium-tracking: 0.05em;
+  --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.4 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.05em;
+  --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;
@@ -475,12 +525,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 2px 0 rgb(0 0 0 / 0.05), 0 1px 3px 0 rgb(0 0 0 / 0.02);
-  --smrt-elevation-2: 0 1px 2px 0 rgb(0 0 0 / 0.06), 0 2px 4px 0 rgb(0 0 0 / 0.04);
-  --smrt-elevation-3: 0 2px 4px 0 rgb(0 0 0 / 0.06), 0 4px 8px 0 rgb(0 0 0 / 0.04);
-  --smrt-elevation-4: 0 4px 8px 0 rgb(0 0 0 / 0.08), 0 8px 16px 0 rgb(0 0 0 / 0.04);
-  --smrt-elevation-5: 0 8px 16px 0 rgb(0 0 0 / 0.1), 0 16px 32px 0 rgb(0 0 0 / 0.04);
+  --smrt-elevation-0: 0 0 0 0 transparent;
+  --smrt-elevation-1: 0 1px 2px 0 color-mix(in srgb, var(--smrt-shadow-color) 24%, transparent), 0 1px 3px -1px color-mix(in srgb, var(--smrt-shadow-color) 16%, transparent);
+  --smrt-elevation-2: var(--smrt-inset-highlight), 0 1px 2px 0 color-mix(in srgb, var(--smrt-shadow-color) 28%, transparent), 0 3px 6px -2px color-mix(in srgb, var(--smrt-shadow-color) 20%, transparent);
+  --smrt-elevation-3: var(--smrt-inset-highlight), 0 1px 3px 0 color-mix(in srgb, var(--smrt-shadow-color) 30%, transparent), 0 6px 12px -3px color-mix(in srgb, var(--smrt-shadow-color) 24%, transparent);
+  --smrt-elevation-4: var(--smrt-inset-highlight), 0 2px 4px 0 color-mix(in srgb, var(--smrt-shadow-color) 32%, transparent), 0 10px 20px -5px color-mix(in srgb, var(--smrt-shadow-color) 28%, transparent);
+  --smrt-elevation-5: var(--smrt-inset-highlight), 0 2px 6px 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;
@@ -518,6 +568,48 @@
   --smrt-z-index-toast: 1500;
   --smrt-z-index-tooltip: 1600;
   --smrt-z-index-loading: 1700;
+  --smrt-surface-ground: #121316;
+  --smrt-surface-panel: #1b1c20;
+  --smrt-surface-control: #26282c;
+  --smrt-surface-raised: #34363a;
+  --smrt-surface-sunken: #0d0e11;
+  --smrt-surface-overlay: rgba(0, 0, 0, 0.7);
+  --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) 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 rgb(255 255 255 / 0.05);
+  --smrt-state-hover: 0.08;
+  --smrt-state-pressed: 0.12;
+  --smrt-state-selected: 0.12;
+  --smrt-state-focus: 0.12;
+  --smrt-state-dragged: 0.16;
+  --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.75rem;
+  --smrt-control-height-small: 2.25rem;
+  --smrt-control-weight: 500;
+  --smrt-control-border: 1px solid transparent;
+  --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;
 }
 
 /*