@vireo-ai/trellis-ui 0.1.0 → 0.1.2

package/src/theme.css

@@ -7,7 +7,7 @@
 @source not "../docs/static/**";
 @source not "../trellis_ui/static/**";
 
-@custom-variant dark (&:where(.dark, .dark *));
+@custom-variant dark (&:where(.dark, .dark *):not(:where(.light, .light *)));
 @custom-variant ui-interactive (&:is([data-ui-interactive]));
 @custom-variant ui-interactive-surface (&:is([data-ui-interactive="surface"]));
 @custom-variant ui-active (&:is(:active, :focus-visible, [data-active], [data-highlighted]));
@@ -62,7 +62,9 @@
   --spacing-4: 1rem;
   --spacing-5: 1.25rem;
   --spacing-6: 1.5rem;
+  --spacing-7: 1.75rem;
   --spacing-8: 2rem;
+  --spacing-9: 2.25rem;
   --spacing-10: 2.5rem;
   --spacing-12: 3rem;
   --spacing-popover: var(--ui-popover-padding);
@@ -93,13 +95,25 @@
   --spacing-control-lg: 2rem;
   --spacing-control-xlg: 2.25rem;
 
+  --color-black-a1: rgb(0 0 0 / 0.04);
+  --color-black-a2: rgb(0 0 0 / 0.08);
+  --color-black-a3: rgb(0 0 0 / 0.12);
+  --color-black-a4: rgb(0 0 0 / 0.18);
+  --color-black-a5: rgb(0 0 0 / 0.28);
+  --color-black-a6: rgb(0 0 0 / 0.40);
+
   --shadow-border: var(--ui-shadow-border);
   --shadow-border-hover: var(--ui-shadow-border-hover);
-  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.04);
-  --shadow-2: 0 1px 2px rgb(0 0 0 / 0.05), 0 8px 24px rgb(0 0 0 / 0.08);
-  --shadow-3: 0 2px 4px rgb(0 0 0 / 0.05), 0 16px 48px rgb(0 0 0 / 0.14);
+  --shadow-1: var(--ui-shadow-1);
+  --shadow-2: var(--ui-shadow-2);
+  --shadow-3: var(--ui-shadow-3);
+  --shadow-4: var(--ui-shadow-4);
+  --shadow-5: var(--ui-shadow-5);
+  --shadow-6: var(--ui-shadow-6);
   --shadow-popover: var(--ui-popover-shadow);
   --shadow-panel: var(--ui-panel-shadow);
+  --shadow-dialog: var(--ui-dialog-shadow);
+  --shadow-modal: var(--ui-modal-shadow);
   --shadow-inset: inset 0 1px 1px rgb(0 0 0 / 0.04);
   --shadow-control: var(--ui-control-shadow);
   --shadow-focus: 0 0 0 3px var(--color-focus-a4);
@@ -249,13 +263,22 @@
 @theme {
   /* Semantic aliases that produce Tailwind utilities. */
   --color-app: var(--color-base-1);
-  --color-app-subtle: var(--color-base-2);
-  --color-surface: #ffffff;
-  --color-surface-muted: var(--color-base-2);
-  --color-surface-raised: #ffffff;
+  --color-chrome: var(--color-base-2);
+  --color-chrome-alpha: color-mix(in srgb, var(--color-chrome) 86%, transparent);
+  --color-surface-subtle: var(--color-base-2);
+  --color-surface-panel: var(--color-base-1);
+  --color-surface-panel-alpha: color-mix(in srgb, var(--color-surface-panel) 88%, transparent);
+  --color-surface-raised: var(--color-base-1);
+  --color-surface-overlay: var(--color-base-1);
+  --color-surface-overlay-alpha: color-mix(in srgb, var(--color-surface-overlay) 92%, transparent);
+  --color-surface-accent: var(--color-accent-9);
+  --color-surface-accent-hover: var(--color-accent-10);
+  --color-surface-accent-fg: var(--color-accent-contrast);
+  --color-surface-inverse: var(--color-base-12);
+  --color-surface-inverse-fg: var(--color-base-1);
   --color-foreground: var(--color-base-12);
   --color-foreground-muted: var(--color-base-11);
-  --color-foreground-subtle: var(--color-base-10);
+  --color-foreground-subtle: var(--color-base-11);
   --color-border: var(--color-base-a5);
   --color-border-interactive: var(--color-base-a6);
   --color-border-strong: var(--color-base-a7);
@@ -274,8 +297,8 @@
   --color-accent-solid: var(--color-accent-11);
   --color-accent-solid-hover: var(--color-accent-12);
   --color-accent-contrast: white;
-  --color-accent-surface: color-mix(in srgb, var(--color-accent-9) var(--ui-accent-strength), var(--color-surface));
-  --color-accent-surface-hover: color-mix(in srgb, var(--color-accent-9) var(--ui-accent-hover-strength), var(--color-surface));
+  --color-accent-surface: color-mix(in srgb, var(--color-accent-9) var(--ui-accent-strength), var(--color-surface-panel));
+  --color-accent-surface-hover: color-mix(in srgb, var(--color-accent-9) var(--ui-accent-hover-strength), var(--color-surface-panel));
   --color-accent-border: color-mix(in srgb, var(--color-accent-9) var(--ui-accent-border-strength), var(--color-border));
   --color-accent-text: var(--color-accent-11);
   --color-danger-solid: var(--color-danger-11);
@@ -320,14 +343,16 @@
   --color-scrollbar-thumb-hover: var(--ui-scrollbar-thumb-bg-hover);
   --shadow-interactive-hover: var(--ui-interactive-shadow-hover);
   --shadow-interactive-selected: var(--ui-interactive-shadow-selected);
-  --shadow-interactive-focus: var(--shadow-focus), var(--shadow-border-hover);
+  --shadow-interactive-focus: var(--ui-interactive-shadow-focus);
 }
 
-:root {
+:root,
+.light,
+.dark {
   color-scheme: light;
 
   --ui-bg: var(--color-app);
-  --ui-bg-subtle: var(--color-app-subtle);
+  --ui-bg-subtle: var(--color-surface-subtle);
   --ui-fg: var(--color-foreground);
   --ui-fg-muted: var(--color-foreground-muted);
   --ui-fg-subtle: var(--color-foreground-subtle);
@@ -339,17 +364,50 @@
   --ui-interactive-bg-selected-hover: var(--color-accent-surface-hover);
   --ui-interactive-shadow-hover: var(--shadow-border-hover);
   --ui-interactive-shadow-selected: 0 0 0 1px var(--color-accent-border);
+  --ui-interactive-shadow-focus: var(--shadow-focus), var(--shadow-border-hover);
   --ui-focus: var(--color-focus);
   --ui-focus-ring: var(--shadow-focus);
   --ui-overlay: var(--color-overlay);
+  --color-black-a1: rgb(0 0 0 / 0.04);
+  --color-black-a2: rgb(0 0 0 / 0.08);
+  --color-black-a3: rgb(0 0 0 / 0.12);
+  --color-black-a4: rgb(0 0 0 / 0.18);
+  --color-black-a5: rgb(0 0 0 / 0.28);
+  --color-black-a6: rgb(0 0 0 / 0.40);
+  --shadow-ring-weak: var(--color-base-a3);
+  --shadow-ring: var(--color-base-a5);
+  --shadow-ring-strong: var(--color-base-a6);
   --ui-shadow-border:
-    0px 0px 0px 1px rgb(0 0 0 / 0.06),
-    0px 1px 2px -1px rgb(0 0 0 / 0.06),
-    0px 2px 4px 0px rgb(0 0 0 / 0.04);
+    0 0 0 1px var(--shadow-ring),
+    0 1px 2px -1px var(--color-black-a1),
+    0 2px 4px 0 var(--color-black-a1);
   --ui-shadow-border-hover:
-    0px 0px 0px 1px rgb(0 0 0 / 0.08),
-    0px 1px 2px -1px rgb(0 0 0 / 0.08),
-    0px 2px 4px 0px rgb(0 0 0 / 0.06);
+    0 0 0 1px var(--shadow-ring-strong),
+    0 1px 2px -1px var(--color-black-a2),
+    0 2px 4px 0 var(--color-black-a2);
+  --ui-shadow-1: var(--shadow-border);
+  --ui-shadow-2:
+    0 0 0 1px var(--shadow-ring),
+    0 1px 1px var(--color-base-a2),
+    0 2px 4px -2px var(--color-black-a2),
+    0 4px 8px -4px var(--color-black-a1);
+  --ui-shadow-3:
+    0 0 0 1px var(--shadow-ring),
+    0 2px 4px -2px var(--color-base-a3),
+    0 6px 16px -6px var(--color-black-a2),
+    0 8px 24px -12px var(--color-black-a2);
+  --ui-shadow-4:
+    0 0 0 1px var(--shadow-ring),
+    0 8px 24px -8px var(--color-black-a2),
+    0 12px 32px -16px var(--color-black-a3);
+  --ui-shadow-5:
+    0 0 0 1px var(--shadow-ring),
+    0 12px 40px -12px var(--color-black-a3),
+    0 20px 64px -24px var(--color-black-a4);
+  --ui-shadow-6:
+    0 0 0 1px var(--shadow-ring),
+    0 16px 48px -12px var(--color-black-a4),
+    0 24px 80px -24px var(--color-black-a5);
   --ui-accent-strength: 12%;
   --ui-accent-hover-strength: 16%;
   --ui-accent-border-strength: 38%;
@@ -371,34 +429,38 @@
   --ui-control-padding-x: 0.75rem;
   --ui-control-gap: 0.5rem;
   --ui-control-radius: var(--radius-3);
-  --ui-control-bg: var(--color-surface);
+  --ui-control-bg: var(--color-surface-panel);
   --ui-control-bg-hover: var(--color-base-a2);
   --ui-control-bg-active: var(--color-base-a3);
   --ui-control-fg: var(--color-foreground);
   --ui-control-placeholder: var(--color-foreground-subtle);
   --ui-control-border: var(--color-border);
-  --ui-control-border-hover: color-mix(in srgb, var(--ui-control-border) 88%, var(--ui-fg) 12%);
+  --ui-control-border-hover: color-mix(in srgb, var(--ui-control-border) 90%, var(--ui-fg) 10%);
   --ui-control-border-focus: var(--color-accent-9);
   --ui-control-border-invalid: var(--color-danger-border);
   --ui-control-border-invalid-hover: color-mix(in srgb, var(--ui-control-border-invalid) 84%, var(--color-danger-text) 16%);
   --ui-control-border-invalid-focus: var(--color-danger-9);
-  --ui-control-shadow: var(--shadow-inset);
-  --ui-panel-shadow:
-    var(--ui-shadow-border),
-    0px 2px 4px rgb(0 0 0 / 0.05),
-    0px 16px 48px rgb(0 0 0 / 0.14);
-
-  --ui-popover-bg: var(--color-surface-raised);
+  --ui-control-shadow: var(--ui-shadow-border);
+  --ui-control-shadow-hover: 0 0 0 1px var(--ui-control-border-hover);
+  --ui-control-shadow-focus: 0 0 0 1px var(--ui-control-border-focus);
+  --ui-control-shadow-invalid: 0 0 0 1px var(--ui-control-border-invalid);
+  --ui-control-shadow-invalid-hover: 0 0 0 1px var(--ui-control-border-invalid-hover);
+  --ui-control-shadow-invalid-focus: 0 0 0 1px var(--ui-control-border-invalid-focus);
+  --ui-panel-shadow: var(--shadow-2);
+
+  --ui-popover-bg: var(--color-surface-overlay);
   --ui-popover-fg: var(--color-foreground);
   --ui-popover-border: var(--color-border);
   --ui-popover-radius: var(--radius-4);
   --ui-popover-shadow:
-    var(--ui-shadow-border),
-    0px 1px 2px rgb(0 0 0 / 0.05),
-    0px 8px 24px rgb(0 0 0 / 0.08);
+    var(--shadow-border),
+    0 8px 24px -8px var(--color-black-a2),
+    0 12px 32px -16px var(--color-black-a3);
+  --ui-dialog-shadow: var(--shadow-5);
+  --ui-modal-shadow: var(--shadow-6);
   --ui-popover-padding: 0.375rem;
   --ui-popover-z: var(--z-index-popover);
-  --ui-toast-bg: var(--color-surface-raised);
+  --ui-toast-bg: var(--color-surface-overlay);
   --ui-toast-stack-peek: 8px;
 
   --ui-combobox-listbox-max-height: 16rem;
@@ -425,6 +487,166 @@
   --ui-scrollbar-thumb-bg-hover: var(--color-base-a7);
   --ui-scrollbar-thumb-radius: var(--radius-full);
 
+  --color-control: var(--ui-control-bg);
+  --color-control-hover: var(--ui-control-bg-hover);
+  --color-control-active: var(--ui-control-bg-active);
+  --color-control-fg: var(--ui-control-fg);
+  --color-control-placeholder: var(--ui-control-placeholder);
+  --color-control-border: var(--ui-control-border);
+  --color-control-border-focus: var(--ui-control-border-focus);
+  --color-control-border-invalid: var(--ui-control-border-invalid);
+  --color-control-border-invalid-focus: var(--ui-control-border-invalid-focus);
+  --color-focus: var(--color-accent-8);
+  --color-focus-a4: color-mix(in srgb, var(--color-focus) var(--ui-focus-strength), transparent);
+  --color-accent-solid: var(--color-accent-11);
+  --color-accent-solid-hover: var(--color-accent-12);
+  --color-accent-surface: color-mix(in srgb, var(--color-accent-9) var(--ui-accent-strength), var(--color-surface-panel));
+  --color-accent-surface-hover: color-mix(in srgb, var(--color-accent-9) var(--ui-accent-hover-strength), var(--color-surface-panel));
+  --color-accent-border: color-mix(in srgb, var(--color-accent-9) var(--ui-accent-border-strength), var(--color-border));
+  --color-danger-solid: var(--color-danger-11);
+  --color-danger-solid-hover: var(--color-danger-12);
+  --color-danger-contrast: white;
+  --color-success-solid: var(--color-success-9);
+  --color-success-solid-hover: var(--color-success-10);
+  --color-success-contrast: white;
+  --color-success-surface: var(--color-success-3);
+  --color-success-surface-hover: var(--color-success-4);
+  --color-success-border: var(--color-success-7);
+  --color-warning-solid: var(--color-warning-9);
+  --color-warning-solid-hover: var(--color-warning-10);
+  --color-warning-contrast: var(--color-warning-12);
+  --color-warning-surface: var(--color-warning-3);
+  --color-warning-surface-hover: var(--color-warning-4);
+  --color-warning-border: var(--color-warning-7);
+  --color-popover: var(--ui-popover-bg);
+  --color-popover-fg: var(--ui-popover-fg);
+  --color-popover-border: var(--ui-popover-border);
+  --color-toast: var(--ui-toast-bg);
+  --color-menu-item-hover: var(--ui-menu-item-bg-hover);
+  --color-menu-item-active: var(--ui-menu-item-bg-active);
+  --color-menu-item-fg: var(--ui-menu-item-fg);
+  --color-menu-item-muted: var(--ui-menu-item-fg-muted);
+  --color-menu-item-danger-hover: var(--ui-menu-item-danger-bg-hover);
+  --color-menu-item-danger-fg: var(--ui-menu-item-danger-fg);
+  --color-menu-separator: var(--ui-menu-separator);
+  --color-menu-heading-fg: var(--ui-menu-heading-fg);
+  --color-interactive-hover: var(--ui-interactive-bg-hover);
+  --color-interactive-active: var(--ui-interactive-bg-active);
+  --color-interactive-selected: var(--ui-interactive-bg-selected);
+  --color-interactive-selected-hover: var(--ui-interactive-bg-selected-hover);
+  --color-icon: var(--ui-icon-fg);
+  --color-scrollbar-thumb: var(--ui-scrollbar-thumb-bg);
+  --color-scrollbar-thumb-hover: var(--ui-scrollbar-thumb-bg-hover);
+  --shadow-interactive-hover: var(--ui-interactive-shadow-hover);
+  --shadow-interactive-selected: var(--ui-interactive-shadow-selected);
+  --shadow-interactive-focus: var(--ui-interactive-shadow-focus);
+}
+
+.light {
+  --color-base-1: #fcfcfd;
+  --color-base-2: #f9f9fb;
+  --color-base-3: #f0f0f3;
+  --color-base-4: #e8e8ec;
+  --color-base-5: #e0e1e6;
+  --color-base-6: #d9d9e0;
+  --color-base-7: #cdced6;
+  --color-base-8: #b9bbc6;
+  --color-base-9: #8b8d98;
+  --color-base-10: #80838d;
+  --color-base-11: #60646c;
+  --color-base-12: #1c2024;
+
+  --color-base-a1: #00005503;
+  --color-base-a2: #00005506;
+  --color-base-a3: #0000330f;
+  --color-base-a4: #00002d17;
+  --color-base-a5: #0009321f;
+  --color-base-a6: #00002f26;
+  --color-base-a7: #00062e32;
+  --color-base-a8: #00083046;
+  --color-base-a9: #00051d74;
+  --color-base-a10: #00071b7f;
+  --color-base-a11: #0007149f;
+  --color-base-a12: #000509e3;
+
+  --color-app: var(--color-base-1);
+  --color-chrome: var(--color-base-2);
+  --color-chrome-alpha: color-mix(in srgb, var(--color-chrome) 86%, transparent);
+  --color-surface-subtle: var(--color-base-2);
+  --color-surface-panel: var(--color-base-1);
+  --color-surface-panel-alpha: color-mix(in srgb, var(--color-surface-panel) 88%, transparent);
+  --color-surface-raised: var(--color-base-1);
+  --color-surface-overlay: var(--color-base-1);
+  --color-surface-overlay-alpha: color-mix(in srgb, var(--color-surface-overlay) 92%, transparent);
+  --color-surface-inverse: var(--color-base-12);
+  --color-surface-inverse-fg: var(--color-base-1);
+  --color-foreground: var(--color-base-12);
+  --color-foreground-muted: var(--color-base-11);
+  --color-foreground-subtle: var(--color-base-11);
+  --color-border: var(--color-base-a5);
+  --color-border-interactive: var(--color-base-a6);
+  --color-border-strong: var(--color-base-a7);
+  --color-overlay: rgb(0 0 0 / 0.35);
+  --ui-accent-strength: 12%;
+  --ui-accent-hover-strength: 16%;
+  --ui-accent-border-strength: 38%;
+  --ui-focus-strength: 24%;
+  --color-accent-contrast: white;
+  --color-accent-text: var(--color-accent-11);
+  --color-danger-surface: var(--color-danger-3);
+  --color-danger-surface-hover: var(--color-danger-4);
+  --color-danger-border: var(--color-danger-7);
+  --color-danger-text: var(--color-danger-11);
+  --color-success-text: var(--color-success-11);
+  --color-warning-text: var(--color-warning-11);
+  --color-black-a1: rgb(0 0 0 / 0.04);
+  --color-black-a2: rgb(0 0 0 / 0.08);
+  --color-black-a3: rgb(0 0 0 / 0.12);
+  --color-black-a4: rgb(0 0 0 / 0.18);
+  --color-black-a5: rgb(0 0 0 / 0.28);
+  --color-black-a6: rgb(0 0 0 / 0.40);
+  --shadow-ring-weak: var(--color-base-a3);
+  --shadow-ring: var(--color-base-a5);
+  --shadow-ring-strong: var(--color-base-a6);
+  --ui-shadow-border:
+    0 0 0 1px var(--shadow-ring),
+    0 1px 2px -1px var(--color-black-a1),
+    0 2px 4px 0 var(--color-black-a1);
+  --ui-shadow-border-hover:
+    0 0 0 1px var(--shadow-ring-strong),
+    0 1px 2px -1px var(--color-black-a2),
+    0 2px 4px 0 var(--color-black-a2);
+  --ui-shadow-1: var(--shadow-border);
+  --ui-shadow-2:
+    0 0 0 1px var(--shadow-ring),
+    0 1px 1px var(--color-base-a2),
+    0 2px 4px -2px var(--color-black-a2),
+    0 4px 8px -4px var(--color-black-a1);
+  --ui-shadow-3:
+    0 0 0 1px var(--shadow-ring),
+    0 2px 4px -2px var(--color-base-a3),
+    0 6px 16px -6px var(--color-black-a2),
+    0 8px 24px -12px var(--color-black-a2);
+  --ui-shadow-4:
+    0 0 0 1px var(--shadow-ring),
+    0 8px 24px -8px var(--color-black-a2),
+    0 12px 32px -16px var(--color-black-a3);
+  --ui-shadow-5:
+    0 0 0 1px var(--shadow-ring),
+    0 12px 40px -12px var(--color-black-a3),
+    0 20px 64px -24px var(--color-black-a4);
+  --ui-shadow-6:
+    0 0 0 1px var(--shadow-ring),
+    0 16px 48px -12px var(--color-black-a4),
+    0 24px 80px -24px var(--color-black-a5);
+  --ui-panel-shadow: var(--shadow-2);
+  --ui-popover-shadow:
+    var(--shadow-border),
+    0 8px 24px -8px var(--color-black-a2),
+    0 12px 32px -16px var(--color-black-a3);
+  --ui-dialog-shadow: var(--shadow-5);
+  --ui-modal-shadow: var(--shadow-6);
+  --ui-toast-bg: var(--color-surface-overlay);
 }
 
 @utility max-h-xs {
@@ -453,22 +675,26 @@
 
 @layer components {
   [data-ui-control]:where([data-variant="outline"], [data-variant="enhanced"]):is(:hover, :active):not(:focus-within):not([data-state="open"]):not([data-disabled]):not([data-invalid]) {
-    border-color: var(--ui-control-border-hover);
+    --ui-control-shadow: var(--ui-control-shadow-hover);
   }
 
   [data-ui-control]:where([data-variant="outline"], [data-variant="enhanced"]):focus-within:not([data-invalid]),
   [data-ui-control]:where([data-variant="outline"], [data-variant="enhanced"])[data-state="open"]:not([data-invalid]) {
-    border-color: var(--ui-control-border-focus);
+    --ui-control-shadow: var(--ui-control-shadow-focus);
+  }
+
+  [data-ui-control]:where([data-variant="outline"], [data-variant="enhanced"])[data-invalid] {
+    --ui-control-shadow: var(--ui-control-shadow-invalid);
   }
 
   [data-ui-control]:where([data-variant="outline"], [data-variant="enhanced"])[data-invalid]:is(:hover, :active):not(:focus-within):not([data-state="open"]):not([data-disabled]) {
-    border-color: var(--ui-control-border-invalid-hover);
+    --ui-control-shadow: var(--ui-control-shadow-invalid-hover);
   }
 
   [data-ui-control]:where([data-variant="outline"], [data-variant="enhanced"])[data-invalid]:focus-within:not([data-disabled]),
   [data-ui-control]:where([data-variant="outline"], [data-variant="enhanced"])[data-invalid][data-state="open"]:not([data-disabled]) {
-    border-color: var(--ui-control-border-invalid-focus);
-    box-shadow: var(--shadow-control), 0 0 0 3px var(--color-danger-a4);
+    --ui-control-shadow: var(--ui-control-shadow-invalid-focus);
+    box-shadow: var(--shadow-danger-focus);
   }
 
   [data-ui-control]:where([data-variant="outline"], [data-variant="enhanced"]):has(:focus-visible):not([data-invalid]) {
@@ -505,11 +731,17 @@
   --color-base-a12: #ffffffed;
 
   --color-app: var(--color-base-2);
-  --color-app-subtle: var(--color-base-1);
-  --color-surface: var(--color-base-2);
-  --color-surface-muted: var(--color-base-1);
+  --color-chrome: var(--color-base-1);
+  --color-chrome-alpha: color-mix(in srgb, var(--color-chrome) 86%, transparent);
+  --color-surface-subtle: var(--color-base-1);
+  --color-surface-panel: var(--color-base-2);
+  --color-surface-panel-alpha: color-mix(in srgb, var(--color-surface-panel) 88%, transparent);
   --color-surface-raised: var(--color-base-3);
-  --ui-toast-bg: var(--color-base-4);
+  --color-surface-overlay: var(--color-base-4);
+  --color-surface-overlay-alpha: color-mix(in srgb, var(--color-surface-overlay) 92%, transparent);
+  --color-surface-inverse: var(--color-base-12);
+  --color-surface-inverse-fg: var(--color-base-1);
+  --ui-toast-bg: var(--color-surface-overlay);
   --color-foreground: var(--color-base-12);
   --color-foreground-muted: var(--color-base-11);
   --color-foreground-subtle: var(--color-base-10);
@@ -529,8 +761,62 @@
   --color-danger-text: var(--color-danger-8);
   --color-success-text: var(--color-success-8);
   --color-warning-text: var(--color-warning-8);
-  --ui-shadow-border: 0 0 0 1px rgb(255 255 255 / 0.07);
-  --ui-shadow-border-hover: 0 0 0 1px rgb(255 255 255 / 0.11);
-  --ui-popover-shadow: var(--ui-shadow-border);
-  --ui-panel-shadow: var(--ui-shadow-border);
+  --color-black-a1: rgb(0 0 0 / 0.20);
+  --color-black-a2: rgb(0 0 0 / 0.32);
+  --color-black-a3: rgb(0 0 0 / 0.44);
+  --color-black-a4: rgb(0 0 0 / 0.56);
+  --color-black-a5: rgb(0 0 0 / 0.68);
+  --color-black-a6: rgb(0 0 0 / 0.76);
+  --shadow-ring-weak: var(--color-base-a3);
+  --shadow-ring: var(--color-base-a4);
+  --shadow-ring-strong: var(--color-base-a5);
+  --ui-shadow-border: 0 0 0 1px var(--shadow-ring-weak);
+  --ui-shadow-border-hover: 0 0 0 1px var(--shadow-ring);
+  --ui-control-shadow-hover: 0 0 0 1px var(--color-base-a7);
+  --ui-shadow-1: var(--shadow-border);
+  --ui-shadow-2:
+    0 0 0 1px var(--shadow-ring-weak),
+    0 1px 1px var(--color-black-a2),
+    0 2px 4px -2px var(--color-black-a2),
+    0 4px 8px -4px var(--color-black-a2);
+  --ui-shadow-3:
+    0 0 0 1px var(--shadow-ring),
+    0 2px 4px -2px var(--color-black-a2),
+    0 6px 16px -6px var(--color-black-a3),
+    0 8px 24px -12px var(--color-black-a3);
+  --ui-shadow-4:
+    0 0 0 1px var(--shadow-ring),
+    0 8px 24px -8px var(--color-black-a3),
+    0 12px 32px -16px var(--color-black-a4);
+  --ui-shadow-5:
+    0 0 0 1px var(--shadow-ring-strong),
+    0 12px 40px -12px var(--color-black-a4),
+    0 20px 64px -24px var(--color-black-a5);
+  --ui-shadow-6:
+    0 0 0 1px var(--shadow-ring-strong),
+    0 16px 48px -12px var(--color-black-a5),
+    0 24px 80px -24px var(--color-black-a6);
+  --ui-panel-shadow: var(--shadow-2);
+  --ui-popover-shadow: var(--shadow-border);
+  --ui-dialog-shadow: var(--shadow-5);
+  --ui-modal-shadow: var(--shadow-6);
+}
+
+@supports (color: color-mix(in oklab, white, black)) {
+  :root,
+  .light {
+    --shadow-ring-weak: color-mix(in oklab, var(--color-base-a3), var(--color-base-3) 25%);
+    --shadow-ring: color-mix(in oklab, var(--color-base-a5), var(--color-base-5) 20%);
+    --shadow-ring-strong: color-mix(in oklab, var(--color-base-a6), var(--color-base-6) 20%);
+  }
+
+  .dark {
+    --shadow-ring-weak: var(--color-base-a3);
+    --shadow-ring: var(--color-base-a4);
+    --shadow-ring-strong: var(--color-base-a5);
+  }
+}
+
+html, body {
+  overscroll-behavior-y: none;
 }