@dxos/ui-theme 0.10.0 → 0.11.0

package/dist/plugin/node-esm/main.css

@@ -32,26 +32,30 @@
 /* src/css/theme/palette.css */
 @theme { --dx-neutral-hue: 190; --dx-neutral-chroma: 0.001; --color-neutral-50: oklch(0.985 var(--dx-neutral-chroma) var(--dx-neutral-hue)); --color-neutral-75: color-mix(in oklch, var(--color-neutral-50) 50%, var(--color-neutral-100) 50%); --color-neutral-100: oklch(0.935 var(--dx-neutral-chroma) var(--dx-neutral-hue)); --color-neutral-125: color-mix(in oklch, var(--color-neutral-100) 75%, var(--color-neutral-200) 25%); --color-neutral-150: color-mix(in oklch, var(--color-neutral-100) 50%, var(--color-neutral-200) 50%); --color-neutral-175: color-mix(in oklch, var(--color-neutral-150) 50%, var(--color-neutral-200) 50%); --color-neutral-200: oklch(0.875 var(--dx-neutral-chroma) var(--dx-neutral-hue)); --color-neutral-250: color-mix(in oklch, var(--color-neutral-200) 50%, var(--color-neutral-300) 50%); --color-neutral-300: oklch(0.8 var(--dx-neutral-chroma) var(--dx-neutral-hue)); --color-neutral-400: oklch(0.708 var(--dx-neutral-chroma) var(--dx-neutral-hue)); --color-neutral-500: oklch(0.556 var(--dx-neutral-chroma) var(--dx-neutral-hue)); --color-neutral-600: oklch(0.439 var(--dx-neutral-chroma) var(--dx-neutral-hue)); --color-neutral-700: oklch(0.371 var(--dx-neutral-chroma) var(--dx-neutral-hue)); --color-neutral-750: color-mix(in oklch, var(--color-neutral-700) 50%, var(--color-neutral-800) 50%); --color-neutral-775: color-mix(in oklch, var(--color-neutral-750) 50%, var(--color-neutral-800) 50%); --color-neutral-800: oklch(0.269 var(--dx-neutral-chroma) var(--dx-neutral-hue)); --color-neutral-825: color-mix(in oklch, var(--color-neutral-800) 75%, var(--color-neutral-900) 25%); --color-neutral-850: color-mix(in oklch, var(--color-neutral-800) 50%, var(--color-neutral-900) 50%); --color-neutral-875: color-mix(in oklch, var(--color-neutral-800) 25%, var(--color-neutral-900) 75%); --color-neutral-900: oklch(0.205 var(--dx-neutral-chroma) var(--dx-neutral-hue)); --color-neutral-925: color-mix(in oklch, var(--color-neutral-900) 50%, var(--color-neutral-950) 50%); --color-neutral-950: oklch(0.145 var(--dx-neutral-chroma) var(--dx-neutral-hue)); --color-primary-50: var(--color-blue-50); --color-primary-100: var(--color-blue-100); --color-primary-200: var(--color-blue-200); --color-primary-300: var(--color-blue-300); --color-primary-400: var(--color-blue-400); --color-primary-500: var(--color-blue-500); --color-primary-600: var(--color-blue-600); --color-primary-700: var(--color-blue-700); --color-primary-800: var(--color-blue-800); --color-primary-900: var(--color-blue-900); --color-primary-950: var(--color-blue-950); --color-composer-100: rgb(5 40 61); --color-composer-200: rgb(10 75 105); --color-composer-300: rgb(1 122 183); --color-composer-400: rgb(6 197 253); }
 
-/* src/css/theme/semantic.css */
-@theme { --dx-elevation-0: light-dark(var(--color-neutral-300), var(--color-neutral-950)); --dx-elevation-1: light-dark(var(--color-neutral-300), var(--color-neutral-925)); --dx-elevation-2: light-dark(var(--color-neutral-200), var(--color-neutral-900)); --dx-elevation-3: light-dark(var(--color-neutral-125), var(--color-neutral-875)); --dx-elevation-4: light-dark(var(--color-neutral-125), var(--color-neutral-850)); --dx-elevation-5: light-dark(var(--color-neutral-100), var(--color-neutral-825)); --dx-elevation-6: light-dark(var(--color-neutral-75), var(--color-neutral-800)); --dx-elevation-7: light-dark(var(--color-neutral-50), var(--color-neutral-775)); --dx-elevation-8: light-dark(white, var(--color-neutral-750)); --color-deck-surface: var(--dx-elevation-0); --color-scrim-surface: light-dark( oklch(from var(--dx-elevation-0) l c h / 0.5), oklch(from var(--dx-elevation-0) l c h / 0.25) ); --color-card-surface: var(--dx-elevation-1); --color-base-surface: var(--dx-elevation-2); --color-base-fg: light-dark(var(--color-neutral-950), var(--color-neutral-150)); --color-attention-surface: var(--dx-elevation-2); --color-attention-contains: oklch(from var(--color-accent-bg) l c h / 0.3); --color-header-surface: var(--dx-elevation-3); --color-sidebar-surface: var(--dx-elevation-3); --color-sidebar-fg: light-dark(var(--color-neutral-700), var(--color-neutral-250)); --color-sidebar-current-fg: light-dark(var(--color-neutral-950), var(--color-neutral-75)); --color-l0-surface: var(--dx-elevation-2); --color-l1-surface: var(--dx-elevation-3); --color-r0-surface: var(--dx-elevation-3); --color-r1-surface: var(--dx-elevation-3); --color-toolbar-surface: var(--dx-elevation-4); --color-focus-surface: var(--dx-elevation-5); --color-focus-ring: light-dark(var(--color-blue-400), var(--color-blue-600)); --color-focus-ring-subtle: light-dark(var(--color-neutral-300), var(--color-neutral-600)); --color-group-surface: var(--dx-elevation-5); --color-group-alt-surface: light-dark( oklch(from var(--dx-elevation-5) calc(l - 0.03) c h), oklch(from var(--dx-elevation-5) calc(l + 0.03) c h) ); --color-input-surface: var(--dx-elevation-5); --color-modal-surface: var(--dx-elevation-6); --color-popover-surface: var(--dx-elevation-7); --color-inverse-surface: light-dark(var(--color-neutral-800), var(--color-neutral-200)); --color-inverse-fg: light-dark(var(--color-neutral-50), var(--color-neutral-950)); --color-description: light-dark(var(--color-neutral-600), var(--color-neutral-400)); --color-subdued: light-dark(var(--color-neutral-500), var(--color-neutral-600)); --color-placeholder: light-dark(var(--color-neutral-400), var(--color-neutral-600)); --color-input-bg: light-dark(var(--color-neutral-250), var(--color-neutral-700)); --color-input-fg: var(--color-base-fg); --color-hover-surface: light-dark( oklch(from var(--surface-bg, var(--color-base-surface)) calc(l - 0.08) c h), oklch(from var(--surface-bg, var(--color-base-surface)) calc(l + 0.08) c h) ); --color-hover-fg: light-dark(var(--color-neutral-950), var(--color-neutral-150)); --color-hover-surface-subtle: light-dark( oklch(from var(--surface-bg, var(--color-base-surface)) calc(l - 0.02) c h), oklch(from var(--surface-bg, var(--color-base-surface)) calc(l + 0.02) c h) ); --color-current-surface: light-dark( oklch(from var(--surface-bg, var(--color-base-surface)) calc(l - 0.1) c h), oklch(from var(--surface-bg, var(--color-base-surface)) calc(l + 0.1) c h) ); --color-current-surface-hover: light-dark( oklch(from var(--surface-bg, var(--color-base-surface)) calc(l - 0.12) c h), oklch(from var(--surface-bg, var(--color-base-surface)) calc(l + 0.12) c h) ); --color-current-fg: light-dark(var(--color-neutral-950), var(--color-neutral-50)); --color-selected-surface: var(--color-current-surface); --color-selected-surface-hover: var(--color-current-surface-hover); --color-selected-fg: var(--color-current-fg); --color-accent-bg: light-dark(var(--color-blue-600), var(--color-blue-700)); --color-accent-bg-hover: light-dark(var(--color-blue-700), var(--color-blue-800)); --color-accent-fg: var(--color-blue-100); --color-accent-text: light-dark(var(--color-blue-600), var(--color-blue-400)); --color-accent-text-hover: light-dark(var(--color-blue-500), var(--color-blue-500)); --color-un-accent: var(--color-neutral-400); --color-un-accent-hover: var(--color-neutral-500); --color-primary-separator: light-dark(var(--color-neutral-200), var(--color-neutral-800)); --color-separator: light-dark(var(--color-neutral-200), var(--color-neutral-700)); --color-input-separator: light-dark(var(--color-neutral-250), var(--color-neutral-750)); --color-subdued-separator: light-dark(var(--color-neutral-250), var(--color-neutral-775)); --color-active-separator: light-dark(var(--color-blue-500), var(--color-blue-500)); --color-scrollbar-track: light-dark(var(--color-neutral-50), var(--color-neutral-950)); --color-scrollbar-thumb: light-dark(var(--color-neutral-200), var(--color-neutral-600)); --color-scrollbar-thumb-active: light-dark(var(--color-neutral-200), var(--color-neutral-600)); --color-scrollbar-thumb-hover: light-dark(var(--color-neutral-200), var(--color-neutral-600)); --color-axis-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900)); --color-axis-text: light-dark(var(--color-neutral-700), var(--color-neutral-300)); --color-axis-selected-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900)); --color-axis-selected-text: light-dark(var(--color-neutral-100), var(--color-neutral-900)); --color-grid-surface: light-dark(var(--color-neutral-50), var(--color-neutral-950)); --color-grid-fg: light-dark(var(--color-neutral-950), var(--color-neutral-50)); --color-grid-line: light-dark(var(--color-neutral-200), var(--color-neutral-800)); --color-grid-highlight: oklch(from var(--color-emerald-500) l c h / 0.5); --color-grid-selection-surface: light-dark(var(--color-blue-500), var(--color-blue-400)); --color-grid-selection-fg: light-dark(var(--color-neutral-50), var(--color-neutral-950)); --color-grid-comment: light-dark(var(--color-green-400), var(--color-green-600)); --color-grid-comment-active: light-dark( oklch(from var(--color-green-400) l c h / 0.5), oklch(from var(--color-green-600) l c h / 0.5) ); }
+/* src/css/theme/roles.css */
+@theme { --color-description: light-dark(var(--color-neutral-600), var(--color-neutral-400)); --color-subdued: light-dark(var(--color-neutral-500), var(--color-neutral-600)); --color-input-bg: light-dark(oklch(0.87 0.001 190), var(--color-neutral-700)); --color-input-bg-hover: oklch( from var(--color-input-bg) calc(l + var(--dx-lift) * var(--dx-attenuate-state) * 0.08) c h ); --color-input-fg: var(--color-base-fg); --color-focus-ring: light-dark(var(--color-blue-400), var(--color-blue-600)); --color-focus-ring-subtle: light-dark(var(--color-neutral-300), var(--color-neutral-600)); --color-accent-bg: light-dark(var(--color-blue-600), var(--color-blue-700)); --color-accent-bg-hover: light-dark(var(--color-blue-700), var(--color-blue-800)); --color-accent-fg: var(--color-blue-100); --color-accent-text: light-dark(var(--color-blue-600), var(--color-blue-400)); --color-accent-text-hover: light-dark(var(--color-blue-500), var(--color-blue-500)); --color-un-accent: var(--color-neutral-400); --color-un-accent-hover: var(--color-neutral-500); --color-active-separator: light-dark(var(--color-blue-500), var(--color-blue-500)); --color-scrollbar-track: light-dark(var(--color-neutral-50), var(--color-neutral-950)); --color-axis-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900)); --color-axis-text: light-dark(var(--color-neutral-700), var(--color-neutral-300)); --color-axis-selected-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900)); --color-axis-selected-text: light-dark(var(--color-neutral-100), var(--color-neutral-900)); --color-grid-surface: light-dark(var(--color-neutral-50), var(--color-neutral-950)); --color-grid-fg: light-dark(var(--color-neutral-950), var(--color-neutral-50)); --color-grid-line: light-dark(var(--color-neutral-200), var(--color-neutral-800)); --color-grid-highlight: oklch(from var(--color-emerald-500) l c h / 0.5); --color-grid-selection-surface: light-dark(var(--color-blue-500), var(--color-blue-400)); --color-grid-selection-fg: light-dark(var(--color-neutral-50), var(--color-neutral-950)); --color-grid-comment: light-dark(var(--color-green-400), var(--color-green-600)); --color-grid-comment-active: light-dark( oklch(from var(--color-green-400) l c h / 0.5), oklch(from var(--color-green-600) l c h / 0.5) ); }
 
 /* src/css/theme/spacing.css */
-@theme { --spacing-screen-border: 2rem; --spacing-popover-default-width: 20rem; --spacing-popover-min-width: 16rem; --spacing-document-max-width: 50rem; --spacing-document-width: calc(50rem - env(safe-area-inset-left) - env(safe-area-inset-right)); --spacing-card-default-width: 20rem; --spacing-card-min-width: 18rem; --spacing-card-max-width: 22rem; --spacing-card-min-height: 18rem; --spacing-card-max-height: 30rem; --spacing-tag-padding-block: 0.125rem; --spacing-trim-xs: 0.25rem; --spacing-trim-sm: 0.5rem; --spacing-trim-md: 0.75rem; --spacing-trim-lg: 1.5rem; --spacing-form-chrome: var(--spacing-trim-xs); --spacing-form-gap: var(--spacing-trim-sm); --spacing-form-section-gap: var(--spacing-trim-md); --spacing-form-padding: var(--spacing-trim-sm); --spacing-icon-button-padding: var(--spacing-trim-xs); --spacing-scroll-padding: 4px; }
+@theme { --spacing-screen-border: 2rem; --spacing-popover-default-width: 20rem; --spacing-popover-min-width: 16rem; --spacing-document-max-width: 50rem; --spacing-document-width: calc(50rem - env(safe-area-inset-left) - env(safe-area-inset-right)); --spacing-card-default-width: 20rem; --spacing-card-min-width: 18rem; --spacing-card-max-width: 22rem; --spacing-card-min-height: 18rem; --spacing-card-max-height: 30rem; --spacing-tag-padding-block: 0.125rem; --spacing-trim-xs: 0.25rem; --spacing-trim-sm: 0.5rem; --spacing-trim-md: 0.75rem; --spacing-trim-lg: 1rem; --spacing-trim-xl: 1.5rem; --spacing-trim-2xl: 2rem; --spacing-form-chrome: var(--spacing-trim-xs); --spacing-form-gap: var(--spacing-trim-sm); --spacing-form-section-gap: var(--spacing-trim-md); --dx-control-sm: 1.5rem; --dx-control-md: 2rem; --dx-control-lg: 2.5rem; --dx-control: var(--dx-control-md); --dx-control-pad: var(--spacing-trim-sm); --dx-control-leading: normal; --spacing-form-padding: var(--spacing-trim-sm); }
 @layer dx-tokens {
-  .dx-density-lg {
+  .dx-density-lg,
+  [data-density=lg] {
+    --dx-control: var(--dx-control-lg);
+    --dx-control-pad: var(--spacing-trim-md);
     --spacing-form-padding: var(--spacing-trim-md);
-    --spacing-icon-button-padding: var(--spacing-trim-sm);
-    --spacing-scroll-padding: 8px;
   }
-  .dx-density-sm {
+  .dx-density-md,
+  [data-density=md] {
+    --dx-control: var(--dx-control-md);
+    --dx-control-pad: var(--spacing-trim-sm);
+    --spacing-form-padding: var(--spacing-trim-sm);
+  }
+  .dx-density-sm,
+  [data-density=sm] {
+    --dx-control: var(--dx-control-sm);
+    --dx-control-pad: var(--spacing-trim-xs);
+    --dx-control-leading: 22px;
     --spacing-form-padding: var(--spacing-trim-xs);
-    --spacing-icon-button-padding: var(--spacing-trim-xs);
-    --spacing-scroll-padding: 2px;
-  }
-  .dx-density-xs {
-    --spacing-form-padding: var(--spacing-trim-xs);
-    --spacing-icon-button-padding: var(--spacing-trim-xs);
-    --spacing-scroll-padding: 2px;
   }
 }
 @layer dx-tokens {
@@ -59,31 +63,19 @@
     --dx-line-0: 0px;
     --dx-line-1: 1px;
     --dx-line-2: 2px;
-    --dx-lacuna-12: 1.5rem;
-    --dx-lacuna-3: 0.375rem;
-    --dx-lacuna-4: 0.5rem;
-    --dx-lacuna-6: 0.75rem;
-    --dx-gutter-sm: 0.5rem;
-    --dx-gutter-md: 1rem;
-    --dx-gutter-lg: 2rem;
+    --dx-gutter-sm: var(--spacing-trim-sm);
+    --dx-gutter-md: var(--spacing-trim-lg);
+    --dx-gutter-lg: var(--spacing-trim-2xl);
   }
   :root {
-    --dx-hair-line: 1px;
-    --dx-landmark-line: 1px;
-    --dx-modal-line: 1px;
-    --dx-no-line: 0px;
-    --dx-thick-line: 2px;
-    --dx-focus-line: 2px;
     --dx-no-line: var(--dx-line-0);
     --dx-hair-line: var(--dx-line-1);
     --dx-thick-line: var(--dx-line-2);
+    --dx-landmark-line: var(--dx-hair-line);
     --dx-focus-offset: var(--dx-no-line);
     --dx-focus-line: var(--dx-thick-line);
     --dx-modal-line: var(--dx-hair-line);
     --dx-grid-focus-indicator-width: var(--dx-hair-line);
-    --dx-input-md: var(--dx-lacuna-3);
-    --dx-input-lg: var(--dx-lacuna-4);
-    --dx-input-sm: var(--dx-lacuna-3);
     --dx-default-icons-size: 1rem;
   }
   [data-grid-focus-indicator-variant=stack] {
@@ -91,12 +83,12 @@
   }
   :root {
     --dx-rail-content: 3rem;
-    --dx-rail-size: calc(var(--dx-rail-content) + 1px);
-    --dx-rail-item: calc(var(--dx-rail-content) - 1rem);
-    --dx-rail-action: calc(var(--dx-rail-content) - 0.5rem);
+    --dx-rail-size: var(--dx-rail-content);
+    --dx-rail-item: var(--dx-control-md);
+    --dx-rail-action: var(--dx-control-lg);
     --dx-topbar-size: var(--dx-rail-size);
-    --dx-toolbar-size: var(--dx-rail-action);
-    --dx-statusbar-size: var(--dx-rail-item);
+    --dx-toolbar-size: var(--dx-control-lg);
+    --dx-statusbar-size: var(--dx-control-md);
     --dx-nav-sidebar-size: 350px;
     --dx-complementary-sidebar-size: 25rem;
     --dx-drawer-size: 50dvh;
@@ -127,13 +119,26 @@
 /* src/css/theme/styles.css */
 @theme { --color-primary-bg: var(--color-blue-bg); --color-primary-bg-hover: var(--color-blue-bg-hover); --color-primary-fg: var(--color-blue-fg); --color-primary-surface: var(--color-blue-surface); --color-primary-text: var(--color-blue-text); --color-primary-border: var(--color-blue-border); --color-secondary-bg: var(--color-green-bg); --color-secondary-bg-hover: var(--color-green-bg-hover); --color-secondary-fg: var(--color-green-fg); --color-secondary-surface: var(--color-green-surface); --color-secondary-text: var(--color-green-text); --color-secondary-border: var(--color-green-border); --color-info-bg: var(--color-cyan-bg); --color-info-bg-hover: var(--color-cyan-bg-hover); --color-info-fg: var(--color-cyan-fg); --color-info-surface: var(--color-cyan-surface); --color-info-text: var(--color-cyan-text); --color-info-border: var(--color-cyan-border); --color-success-bg: var(--color-emerald-bg); --color-success-bg-hover: var(--color-emerald-bg-hover); --color-success-fg: var(--color-emerald-fg); --color-success-surface: var(--color-emerald-surface); --color-success-text: var(--color-emerald-text); --color-success-border: var(--color-emerald-border); --color-warning-bg: var(--color-amber-bg); --color-warning-bg-hover: var(--color-amber-bg-hover); --color-warning-fg: var(--color-amber-fg); --color-warning-surface: var(--color-amber-surface); --color-warning-text: var(--color-amber-text); --color-warning-border: var(--color-amber-border); --color-error-bg: var(--color-rose-bg); --color-error-bg-hover: var(--color-rose-bg-hover); --color-error-fg: var(--color-rose-fg); --color-error-surface: var(--color-rose-surface); --color-error-text: var(--color-rose-text); --color-error-border: var(--color-rose-border); --color-neutral-bg: var(--color-neutral-600); --color-neutral-bg-hover: var(--color-neutral-700); --color-neutral-fg: var(--color-neutral-900); --color-neutral-surface: var(--color-neutral-400); --color-neutral-text: light-dark(var(--color-neutral-800), var(--color-neutral-500)); --color-neutral-border: var(--color-neutral-600); --color-red-bg: var(--color-red-600); --color-red-bg-hover: var(--color-red-700); --color-red-fg: var(--color-red-900); --color-red-surface: var(--color-red-400); --color-red-text: light-dark(var(--color-red-800), var(--color-red-500)); --color-red-border: var(--color-red-600); --color-orange-bg: var(--color-orange-600); --color-orange-bg-hover: var(--color-orange-700); --color-orange-fg: var(--color-orange-900); --color-orange-surface: var(--color-orange-400); --color-orange-text: light-dark(var(--color-orange-800), var(--color-orange-500)); --color-orange-border: var(--color-orange-600); --color-amber-bg: var(--color-amber-600); --color-amber-bg-hover: var(--color-amber-700); --color-amber-fg: var(--color-amber-900); --color-amber-surface: var(--color-amber-400); --color-amber-text: light-dark(var(--color-amber-800), var(--color-amber-500)); --color-amber-border: var(--color-amber-600); --color-yellow-bg: var(--color-yellow-600); --color-yellow-bg-hover: var(--color-yellow-700); --color-yellow-fg: var(--color-yellow-900); --color-yellow-surface: var(--color-yellow-400); --color-yellow-text: light-dark(var(--color-yellow-800), var(--color-yellow-500)); --color-yellow-border: var(--color-yellow-600); --color-lime-bg: var(--color-lime-600); --color-lime-bg-hover: var(--color-lime-700); --color-lime-fg: var(--color-lime-900); --color-lime-surface: var(--color-lime-400); --color-lime-text: light-dark(var(--color-lime-800), var(--color-lime-500)); --color-lime-border: var(--color-lime-600); --color-green-bg: var(--color-green-600); --color-green-bg-hover: var(--color-green-700); --color-green-fg: var(--color-green-900); --color-green-surface: var(--color-green-400); --color-green-text: light-dark(var(--color-green-800), var(--color-green-500)); --color-green-border: var(--color-green-600); --color-emerald-bg: var(--color-emerald-600); --color-emerald-bg-hover: var(--color-emerald-700); --color-emerald-fg: var(--color-emerald-900); --color-emerald-surface: var(--color-emerald-400); --color-emerald-text: light-dark(var(--color-emerald-800), var(--color-emerald-500)); --color-emerald-border: var(--color-emerald-600); --color-teal-bg: var(--color-teal-600); --color-teal-bg-hover: var(--color-teal-700); --color-teal-fg: var(--color-teal-900); --color-teal-surface: var(--color-teal-400); --color-teal-text: light-dark(var(--color-teal-800), var(--color-teal-500)); --color-teal-border: var(--color-teal-600); --color-cyan-bg: var(--color-cyan-600); --color-cyan-bg-hover: var(--color-cyan-700); --color-cyan-fg: var(--color-cyan-900); --color-cyan-surface: var(--color-cyan-400); --color-cyan-text: light-dark(var(--color-cyan-800), var(--color-cyan-500)); --color-cyan-border: var(--color-cyan-600); --color-sky-bg: var(--color-sky-600); --color-sky-bg-hover: var(--color-sky-700); --color-sky-fg: var(--color-sky-900); --color-sky-surface: var(--color-sky-400); --color-sky-text: light-dark(var(--color-sky-800), var(--color-sky-500)); --color-sky-border: var(--color-sky-600); --color-blue-bg: var(--color-blue-600); --color-blue-bg-hover: var(--color-blue-700); --color-blue-fg: var(--color-blue-900); --color-blue-surface: var(--color-blue-400); --color-blue-text: light-dark(var(--color-blue-800), var(--color-blue-500)); --color-blue-border: var(--color-blue-600); --color-indigo-bg: var(--color-indigo-600); --color-indigo-bg-hover: var(--color-indigo-700); --color-indigo-fg: var(--color-indigo-900); --color-indigo-surface: var(--color-indigo-400); --color-indigo-text: light-dark(var(--color-indigo-800), var(--color-indigo-500)); --color-indigo-border: var(--color-indigo-600); --color-violet-bg: var(--color-violet-600); --color-violet-bg-hover: var(--color-violet-700); --color-violet-fg: var(--color-violet-900); --color-violet-surface: var(--color-violet-400); --color-violet-text: light-dark(var(--color-violet-800), var(--color-violet-500)); --color-violet-border: var(--color-violet-600); --color-purple-bg: var(--color-purple-600); --color-purple-bg-hover: var(--color-purple-700); --color-purple-fg: var(--color-purple-900); --color-purple-surface: var(--color-purple-400); --color-purple-text: light-dark(var(--color-purple-800), var(--color-purple-500)); --color-purple-border: var(--color-purple-600); --color-fuchsia-bg: var(--color-fuchsia-600); --color-fuchsia-bg-hover: var(--color-fuchsia-700); --color-fuchsia-fg: var(--color-fuchsia-900); --color-fuchsia-surface: var(--color-fuchsia-400); --color-fuchsia-text: light-dark(var(--color-fuchsia-800), var(--color-fuchsia-500)); --color-fuchsia-border: var(--color-fuchsia-600); --color-pink-bg: var(--color-pink-600); --color-pink-bg-hover: var(--color-pink-700); --color-pink-fg: var(--color-pink-900); --color-pink-surface: var(--color-pink-400); --color-pink-text: light-dark(var(--color-pink-800), var(--color-pink-500)); --color-pink-border: var(--color-pink-600); --color-rose-bg: var(--color-rose-600); --color-rose-bg-hover: var(--color-rose-700); --color-rose-fg: var(--color-rose-900); --color-rose-surface: var(--color-rose-400); --color-rose-text: light-dark(var(--color-rose-800), var(--color-rose-500)); --color-rose-border: var(--color-rose-600); }
 
+/* src/css/theme/surfaces.css */
+@theme { --dx-surface-sunken: light-dark(var(--color-neutral-150), var(--color-neutral-950)); --dx-surface-chrome: light-dark(var(--color-neutral-100), var(--color-neutral-925)); --dx-surface-base: light-dark(oklch(0.98 0.001 190), var(--color-neutral-900)); --dx-surface-raised: light-dark(oklch(0.99 0.001 190), var(--color-neutral-850)); --dx-surface-overlay: light-dark(oklch(0.995 0.001 190), var(--color-neutral-800)); --dx-surface-popup: light-dark(oklch(1 0 0), var(--color-neutral-775)); --color-deck-surface: var(--dx-surface-sunken); --color-l0-surface: light-dark(oklch(0.935 0.001 190), var(--dx-surface-sunken)); --color-r0-surface: light-dark(oklch(0.935 0.001 190), var(--dx-surface-sunken)); --color-scrim-surface: light-dark( oklch(from var(--dx-surface-sunken) l c h / 0.5), oklch(from var(--dx-surface-sunken) l c h / 0.25) ); --color-sidebar-surface: var(--dx-surface-chrome); --color-header-surface: var(--dx-surface-chrome); --color-l1-surface: light-dark(oklch(0.955 0.001 190), var(--dx-surface-chrome)); --color-r1-surface: light-dark(oklch(0.955 0.001 190), var(--dx-surface-chrome)); --color-sidebar-fg: light-dark(var(--color-neutral-700), var(--color-neutral-250)); --color-sidebar-current-fg: light-dark(var(--color-neutral-950), var(--color-neutral-75)); --color-base-surface: var(--dx-surface-base); --color-base-fg: light-dark(var(--color-neutral-950), var(--color-neutral-150)); --color-attention-surface: var(--dx-surface-base); --color-attention-contains: oklch(from var(--color-accent-bg) l c h / 0.3); --color-card-surface: var(--dx-surface-raised); --color-modal-surface: var(--dx-surface-overlay); --color-popover-surface: var(--dx-surface-popup); --color-toolbar-surface: oklch( from var(--surface-bg, var(--color-base-surface)) calc(l + var(--dx-lift) * var(--dx-attenuate-bar) * 0.025) c h ); --color-group-surface: oklch( from var(--surface-bg, var(--color-base-surface)) calc(l + var(--dx-lift) * var(--dx-attenuate-well) * 0.05) c h ); --color-input-surface: var(--color-group-surface); --color-focus-surface: var(--color-group-surface); --color-group-alt-surface: oklch( from var(--surface-bg, var(--color-base-surface)) calc(l + var(--dx-lift) * 0.08) c h ); --color-placeholder: oklch( from var(--surface-bg, var(--color-base-surface)) calc(l + var(--dx-lift) * var(--dx-attenuate-placeholder) * 0.3) c h ); --color-scrollbar-thumb: oklch( from var(--surface-bg, var(--color-base-surface)) calc(l + var(--dx-lift) * var(--dx-attenuate-scrollbar) * 0.23) c h ); --color-scrollbar-thumb-hover: oklch( from var(--surface-bg, var(--color-base-surface)) calc(l + var(--dx-lift) * var(--dx-attenuate-scrollbar) * 0.3) c h ); --color-scrollbar-thumb-active: oklch( from var(--surface-bg, var(--color-base-surface)) calc(l + var(--dx-lift) * var(--dx-attenuate-scrollbar) * 0.34) c h ); --color-separator: oklch( from var(--surface-bg, var(--color-base-surface)) calc(l + var(--dx-lift) * var(--dx-attenuate-separator-line) * 0.166) c h ); --color-input-separator: oklch( from var(--surface-bg, var(--color-base-surface)) calc(l + var(--dx-lift) * var(--dx-attenuate-separator) * 0.115) c h ); --color-subdued-separator: oklch( from var(--surface-bg, var(--color-base-surface)) calc(l + var(--dx-lift) * var(--dx-attenuate-separator) * 0.089) c h ); --color-primary-separator: oklch( from var(--surface-bg, var(--color-base-surface)) calc(l + var(--dx-lift) * var(--dx-attenuate-separator) * 0.064) c h ); --color-hover-surface: oklch( from var(--surface-bg, var(--color-base-surface)) calc(l + var(--dx-lift) * var(--dx-attenuate-state) * 0.08) c h ); --color-hover-fg: light-dark(var(--color-neutral-950), var(--color-neutral-150)); --color-hover-surface-subtle: oklch( from var(--surface-bg, var(--color-base-surface)) calc(l + var(--dx-lift) * var(--dx-attenuate-state) * 0.02) c h ); --color-current-surface: oklch( from var(--surface-bg, var(--color-base-surface)) calc(l + var(--dx-lift) * var(--dx-attenuate-state) * 0.1) c h ); --color-current-surface-hover: oklch( from var(--surface-bg, var(--color-base-surface)) calc(l + var(--dx-lift) * var(--dx-attenuate-state) * 0.12) c h ); --color-current-fg: light-dark(var(--color-neutral-950), var(--color-neutral-50)); --color-selected-surface: var(--color-current-surface); --color-selected-surface-hover: var(--color-current-surface-hover); --color-selected-fg: var(--color-current-fg); --color-inverse-surface: light-dark(var(--color-neutral-800), var(--color-neutral-200)); --color-inverse-fg: light-dark(var(--color-neutral-50), var(--color-neutral-950)); --color-inverse-text: light-dark(var(--color-neutral-50), var(--color-neutral-950)); }
+
 /* src/css/theme/text.css */
-@theme { --font-body: "Inter Variable", ui-sans-serif, system-ui, sans-serif; --font-mono: "JetBrains Mono Variable", ui-monospace, "Cascadia Code", "Source Code Pro", monospace; --text-xs: 0.75rem; --text-xs--line-height: 1rem; --text-sm: 0.875rem; --text-sm--line-height: 1.25rem; --text-base: 1rem; --text-base--line-height: 1.5rem; --text-lg: 1.125rem; --text-lg--line-height: 1.75rem; --text-xl: 1.25rem; --text-xl--line-height: 1.75rem; --text-2xl: 1.5rem; --text-2xl--line-height: 2rem; --text-3xl: 1.875rem; --text-3xl--line-height: 2.25rem; --text-4xl: 2.25rem; --text-4xl--line-height: 2.5rem; --text-5xl: 3rem; --text-5xl--line-height: 1; --text-6xl: 3.75rem; --text-6xl--line-height: 1; --text-7xl: 4.5rem; --text-7xl--line-height: 1; --text-8xl: 6rem; --text-8xl--line-height: 1; --text-9xl: 8rem; --text-9xl--line-height: 1; }
+@theme { --font-body: "Nunito Variable", "Inter Variable", ui-sans-serif, system-ui, sans-serif; --font-mono: "JetBrains Mono Variable", ui-monospace, "Cascadia Code", "Source Code Pro", monospace; --text-xs: 0.75rem; --text-xs--line-height: 1rem; --text-sm: 0.875rem; --text-sm--line-height: 1.25rem; --text-base: 1rem; --text-base--line-height: 1.5rem; --text-lg: 1.125rem; --text-lg--line-height: 1.75rem; --text-xl: 1.25rem; --text-xl--line-height: 1.75rem; --text-2xl: 1.5rem; --text-2xl--line-height: 2rem; --text-3xl: 1.875rem; --text-3xl--line-height: 2.25rem; --text-4xl: 2.25rem; --text-4xl--line-height: 2.5rem; --text-5xl: 3rem; --text-5xl--line-height: 1; --text-6xl: 3.75rem; --text-6xl--line-height: 1; --text-7xl: 4.5rem; --text-7xl--line-height: 1; --text-8xl: 6rem; --text-8xl--line-height: 1; --text-9xl: 8rem; --text-9xl--line-height: 1; }
+
+/* src/tokens.css */
 
 /* src/css/base/base.css */
 @layer dx-base {
   :root {
     color-scheme: light;
+    --dx-lift: -1;
+    --dx-attenuate-state: 0.5;
+    --dx-attenuate-well: 0.5;
+    --dx-attenuate-separator: 0.75;
+    --dx-attenuate-separator-line: 0.45;
+    --dx-attenuate-bar: 1;
+    --dx-attenuate-placeholder: 1;
+    --dx-attenuate-scrollbar: 1;
     touch-action: pan-x pan-y;
     font-synthesis: none;
     font-variation-settings: "wght" 400, "slnt" 0;
@@ -143,6 +148,14 @@
   }
   .dark {
     color-scheme: dark;
+    --dx-lift: 1;
+    --dx-attenuate-state: 1;
+    --dx-attenuate-well: 1;
+    --dx-attenuate-separator: 1;
+    --dx-attenuate-separator-line: 1;
+    --dx-attenuate-bar: 1;
+    --dx-attenuate-placeholder: 1;
+    --dx-attenuate-scrollbar: 1;
   }
   button {
     @apply cursor-pointer;
@@ -277,10 +290,11 @@
 /* src/css/components/button.css */
 @layer dx-components {
   .dx-button {
-    @apply shrink-0 inline-flex select-none items-center justify-center overflow-hidden min-h-[2rem] px-3;
+    @apply shrink-0 inline-flex select-none items-center justify-center overflow-hidden;
+    min-block-size: var(--dx-control);
+    padding-inline: var(--dx-control-pad);
     @apply font-medium transition-colors duration-100 ease-linear bg-input-bg;
     &[data-variant=default] {
-      color: var(--dx-valence-text, inherit);
       background: var(--dx-valence-bg, var(--color-input-bg));
     }
     &[aria-pressed=true],
@@ -320,6 +334,9 @@
       }
       &[data-variant=default]:hover {
         color: var(--dx-valence-text);
+        background-color: var(--dx-valence-bg-hover, var(--color-input-bg-hover));
+      }
+      .dark &[data-variant=default]:hover {
         background-color: var(--dx-valence-bg-hover, var(--color-hover-surface));
       }
       &[data-variant=ghost]:hover {
@@ -362,22 +379,12 @@
   .dx-button:not([data-props~=wrap]) {
     @apply truncate;
   }
-  .dx-button[data-density=lg] {
-    @apply min-h-[2.5rem] px-3;
-  }
   .dx-button[data-density=sm] {
-    @apply min-h-[1.75rem] px-2;
+    @apply text-xs;
   }
-  .dx-button[data-density=xs] {
-    @apply min-h-[1.5rem] px-1 text-xs;
-  }
-  .dx-button[data-density=xs].aspect-square {
-    @apply size-6 px-0;
-  }
-  @media (pointer: fine) {
-    .dx-button[data-density=md] {
-      @apply min-h-[2rem] px-2.5;
-    }
+  .dx-button.aspect-square {
+    padding-inline: 0;
+    inline-size: var(--dx-control);
   }
 }
 
@@ -702,95 +709,136 @@
   }
 }
 
-/* src/css/components/panel.css */
+/* src/css/components/input.css */
 @layer dx-components {
-  [data-hue=neutral] .dx-panel,
-  .dx-panel--neutral {
-    @apply bg-neutral-surface text-neutral-fg border-neutral-border;
-  }
-  [data-hue=red] .dx-panel,
-  .dx-panel--red {
-    @apply bg-red-surface text-red-fg border-red-border;
-  }
-  [data-hue=orange] .dx-panel,
-  .dx-panel--orange {
-    @apply bg-orange-surface text-orange-fg border-orange-border;
-  }
-  [data-hue=amber] .dx-panel,
-  .dx-panel--amber {
-    @apply bg-amber-surface text-amber-fg border-amber-border;
-  }
-  [data-hue=yellow] .dx-panel,
-  .dx-panel--yellow {
-    @apply bg-yellow-surface text-yellow-fg border-yellow-border;
-  }
-  [data-hue=lime] .dx-panel,
-  .dx-panel--lime {
-    @apply bg-lime-surface text-lime-fg border-lime-border;
-  }
-  [data-hue=green] .dx-panel,
-  .dx-panel--green {
-    @apply bg-green-surface text-green-fg border-green-border;
-  }
-  [data-hue=emerald] .dx-panel,
-  .dx-panel--emerald {
-    @apply bg-emerald-surface text-emerald-fg border-emerald-border;
-  }
-  [data-hue=teal] .dx-panel,
-  .dx-panel--teal {
-    @apply bg-teal-surface text-teal-fg border-teal-border;
-  }
-  [data-hue=cyan] .dx-panel,
-  .dx-panel--cyan {
-    @apply bg-cyan-surface text-cyan-fg border-cyan-border;
-  }
-  [data-hue=sky] .dx-panel,
-  .dx-panel--sky {
-    @apply bg-sky-surface text-sky-fg border-sky-border;
-  }
-  [data-hue=blue] .dx-panel,
-  .dx-panel--blue {
-    @apply bg-blue-surface text-blue-fg border-blue-border;
-  }
-  [data-hue=indigo] .dx-panel,
-  .dx-panel--indigo {
-    @apply bg-indigo-surface text-indigo-fg border-indigo-border;
-  }
-  [data-hue=violet] .dx-panel,
-  .dx-panel--violet {
-    @apply bg-violet-surface text-violet-fg border-violet-border;
-  }
-  [data-hue=purple] .dx-panel,
-  .dx-panel--purple {
-    @apply bg-purple-surface text-purple-fg border-purple-border;
-  }
-  [data-hue=fuchsia] .dx-panel,
-  .dx-panel--fuchsia {
-    @apply bg-fuchsia-surface text-fuchsia-fg border-fuchsia-border;
-  }
-  [data-hue=pink] .dx-panel,
-  .dx-panel--pink {
-    @apply bg-pink-surface text-pink-fg border-pink-border;
-  }
-  [data-hue=rose] .dx-panel,
-  .dx-panel--rose {
-    @apply bg-rose-surface text-rose-fg border-rose-border;
-  }
-  [data-hue=info] .dx-panel,
-  .dx-panel--info {
-    @apply bg-info-surface text-info-fg border-info-border;
-  }
-  [data-hue=success] .dx-panel,
-  .dx-panel--success {
-    @apply bg-success-surface text-success-fg border-success-border;
-  }
-  [data-hue=warning] .dx-panel,
-  .dx-panel--warning {
-    @apply bg-warning-surface text-warning-fg border-warning-border;
+  .dx-input {
+    @apply transition-colors border border-input-separator rounded-xs p-1 px-2;
+    --surface-bg: var(--color-input-surface);
+    background-color: var(--surface-bg);
+    &:focus {
+      @apply outline-hidden;
+    }
+    &:focus-within {
+      @apply bg-focus-surface border-separator;
+    }
+    &:not([disabled]):focus-visible,
+    &:not([disabled]):has(:focus-visible) {
+      @apply ring-focus-line ring-offset-focus-offset z-[1] ring-[var(--color-focus-ring-subtle)] border-[color:var(--color-focus-ring-subtle)];
+    }
   }
-  [data-hue=error] .dx-panel,
-  .dx-panel--error {
-    @apply bg-error-surface text-error-fg border-error-border;
+}
+
+/* src/css/components/callout.css */
+@layer dx-components {
+  .dx-callout[data-hue=neutral],
+  :where([data-hue=neutral]) .dx-callout,
+  .dx-callout--neutral {
+    @apply bg-neutral-surface border-neutral-border text-neutral-fg;
+  }
+  .dx-callout[data-hue=red],
+  :where([data-hue=red]) .dx-callout,
+  .dx-callout--red {
+    @apply bg-red-surface border-red-border text-red-fg;
+  }
+  .dx-callout[data-hue=orange],
+  :where([data-hue=orange]) .dx-callout,
+  .dx-callout--orange {
+    @apply bg-orange-surface border-orange-border text-orange-fg;
+  }
+  .dx-callout[data-hue=amber],
+  :where([data-hue=amber]) .dx-callout,
+  .dx-callout--amber {
+    @apply bg-amber-surface border-amber-border text-amber-fg;
+  }
+  .dx-callout[data-hue=yellow],
+  :where([data-hue=yellow]) .dx-callout,
+  .dx-callout--yellow {
+    @apply bg-yellow-surface border-yellow-border text-yellow-fg;
+  }
+  .dx-callout[data-hue=lime],
+  :where([data-hue=lime]) .dx-callout,
+  .dx-callout--lime {
+    @apply bg-lime-surface border-lime-border text-lime-fg;
+  }
+  .dx-callout[data-hue=green],
+  :where([data-hue=green]) .dx-callout,
+  .dx-callout--green {
+    @apply bg-green-surface border-green-border text-green-fg;
+  }
+  .dx-callout[data-hue=emerald],
+  :where([data-hue=emerald]) .dx-callout,
+  .dx-callout--emerald {
+    @apply bg-emerald-surface border-emerald-border text-emerald-fg;
+  }
+  .dx-callout[data-hue=teal],
+  :where([data-hue=teal]) .dx-callout,
+  .dx-callout--teal {
+    @apply bg-teal-surface border-teal-border text-teal-fg;
+  }
+  .dx-callout[data-hue=cyan],
+  :where([data-hue=cyan]) .dx-callout,
+  .dx-callout--cyan {
+    @apply bg-cyan-surface border-cyan-border text-cyan-fg;
+  }
+  .dx-callout[data-hue=sky],
+  :where([data-hue=sky]) .dx-callout,
+  .dx-callout--sky {
+    @apply bg-sky-surface border-sky-border text-sky-fg;
+  }
+  .dx-callout[data-hue=blue],
+  :where([data-hue=blue]) .dx-callout,
+  .dx-callout--blue {
+    @apply bg-blue-surface border-blue-border text-blue-fg;
+  }
+  .dx-callout[data-hue=indigo],
+  :where([data-hue=indigo]) .dx-callout,
+  .dx-callout--indigo {
+    @apply bg-indigo-surface border-indigo-border text-indigo-fg;
+  }
+  .dx-callout[data-hue=violet],
+  :where([data-hue=violet]) .dx-callout,
+  .dx-callout--violet {
+    @apply bg-violet-surface border-violet-border text-violet-fg;
+  }
+  .dx-callout[data-hue=purple],
+  :where([data-hue=purple]) .dx-callout,
+  .dx-callout--purple {
+    @apply bg-purple-surface border-purple-border text-purple-fg;
+  }
+  .dx-callout[data-hue=fuchsia],
+  :where([data-hue=fuchsia]) .dx-callout,
+  .dx-callout--fuchsia {
+    @apply bg-fuchsia-surface border-fuchsia-border text-fuchsia-fg;
+  }
+  .dx-callout[data-hue=pink],
+  :where([data-hue=pink]) .dx-callout,
+  .dx-callout--pink {
+    @apply bg-pink-surface border-pink-border text-pink-fg;
+  }
+  .dx-callout[data-hue=rose],
+  :where([data-hue=rose]) .dx-callout,
+  .dx-callout--rose {
+    @apply bg-rose-surface border-rose-border text-rose-fg;
+  }
+  .dx-callout[data-hue=info],
+  :where([data-hue=info]) .dx-callout,
+  .dx-callout--info {
+    @apply bg-info-surface border-info-border text-info-fg;
+  }
+  .dx-callout[data-hue=success],
+  :where([data-hue=success]) .dx-callout,
+  .dx-callout--success {
+    @apply bg-success-surface border-success-border text-success-fg;
+  }
+  .dx-callout[data-hue=warning],
+  :where([data-hue=warning]) .dx-callout,
+  .dx-callout--warning {
+    @apply bg-warning-surface border-warning-border text-warning-fg;
+  }
+  .dx-callout[data-hue=error],
+  :where([data-hue=error]) .dx-callout,
+  .dx-callout--error {
+    @apply bg-error-surface border-error-border text-error-fg;
   }
 }
 
@@ -829,18 +877,12 @@
   .dx-hover {
     @apply cursor-pointer hover:bg-hover-surface-subtle! hover:text-hover-fg! hover:aria-selected:bg-selected-surface-hover hover:aria-selected:text-selected-fg hover:aria-[current=true]:bg-current-surface-hover hover:aria-[current=true]:text-current-fg;
   }
-  .dx-hover-row {
-    @apply group-hover/row:bg-hover-surface-subtle! group-hover/row:text-hover-fg! group-hover/row:group-aria-selected/row:bg-selected-surface-hover! group-hover/row:group-aria-selected/row:text-selected-fg! group-hover/row:group-aria-[current=true]/row:bg-current-surface-hover! group-hover/row:group-aria-[current=true]/row:text-current-fg!;
-  }
   .dx-selected {
     @apply aria-selected:bg-selected-surface! aria-selected:text-selected-fg! aria-selected:font-semibold aria-selected:tracking-normal transition-[color, font-variation-settings, letter-spacing];
   }
   .dx-current {
     @apply dx-ring-pseudo aria-[current=true]:bg-current-surface! aria-[current=true]:text-current-fg! aria-[current=true]:after:ring-focus-ring-subtle!;
   }
-  .dx-current-row {
-    @apply group-aria-[current=true]/row:bg-current-surface! group-aria-[current=true]/row:text-current-fg!;
-  }
   .dx-highlighted {
     @apply data-[highlighted]:bg-current-surface data-[highlighted]:text-current-fg hover:data-[highlighted]:bg-current-surface-hover;
   }
@@ -848,68 +890,133 @@
 
 /* src/css/components/surface.css */
 @layer dx-components {
-  .dx-base-surface {
-    @apply bg-base-surface text-base-fg;
-    --surface-bg: var(--color-base-surface);
-  }
+  [data-surface=sunken],
   .dx-deck-surface {
-    @apply bg-deck-surface text-base-fg;
-    --surface-bg: var(--color-deck-surface);
-  }
-  .dx-sidebar-surface {
-    @apply bg-sidebar-surface text-base-fg;
-    --surface-bg: var(--color-sidebar-surface);
+    --surface-bg: var(--dx-surface-sunken);
   }
+  [data-surface=chrome],
+  .dx-sidebar-surface,
   .dx-header-surface {
-    @apply bg-header-surface text-base-fg;
-    --surface-bg: var(--color-header-surface);
+    --surface-bg: var(--dx-surface-chrome);
+  }
+  .dx-l0-surface,
+  .dx-r0-surface {
+    --surface-bg: var(--color-l0-surface);
+  }
+  .dx-l1-surface,
+  .dx-r1-surface {
+    --surface-bg: var(--color-l1-surface);
+  }
+  [data-surface=base],
+  .dx-base-surface,
+  .dx-attention-surface {
+    --surface-bg: var(--dx-surface-base);
   }
+  [data-surface=raised],
   .dx-card-surface {
-    @apply bg-card-surface text-base-fg;
-    --surface-bg: var(--color-card-surface);
+    --surface-bg: var(--dx-surface-raised);
   }
-  .dx-group-surface {
-    @apply bg-group-surface text-base-fg;
-    --surface-bg: var(--color-group-surface);
+  [data-surface=overlay],
+  .dx-modal-surface {
+    --surface-bg: var(--dx-surface-overlay);
   }
-  .dx-input-surface {
-    @apply bg-input-surface text-base-fg;
-    --surface-bg: var(--color-input-surface);
+  [data-surface=popup],
+  .dx-popover-surface {
+    --surface-bg: var(--dx-surface-popup);
   }
+  [data-surface=bar],
   .dx-toolbar-surface {
-    @apply bg-toolbar-surface text-base-fg;
     --surface-bg: var(--color-toolbar-surface);
   }
-  .dx-modal-surface {
-    @apply bg-modal-surface text-base-fg backdrop-blur-md;
-    --surface-bg: var(--color-modal-surface);
+  [data-surface=well],
+  .dx-group-surface,
+  .dx-input-surface {
+    --surface-bg: var(--color-group-surface);
   }
-  .dx-popover-surface {
-    @apply bg-popover-surface text-base-fg backdrop-blur-md;
-    --surface-bg: var(--color-popover-surface);
+  [data-surface],
+  .dx-deck-surface,
+  .dx-sidebar-surface,
+  .dx-header-surface,
+  .dx-l0-surface,
+  .dx-l1-surface,
+  .dx-r0-surface,
+  .dx-r1-surface,
+  .dx-base-surface,
+  .dx-attention-surface,
+  .dx-card-surface,
+  .dx-modal-surface,
+  .dx-popover-surface,
+  .dx-toolbar-surface,
+  .dx-group-surface,
+  .dx-input-surface {
+    background-color: var(--surface-bg);
+    @apply text-base-fg;
   }
-  .dx-attention-surface {
-    @apply bg-attention-surface text-base-fg;
-    --surface-bg: var(--color-attention-surface);
+  [data-surface=overlay],
+  [data-surface=popup],
+  .dx-modal-surface,
+  .dx-popover-surface {
+    @apply backdrop-blur-md;
   }
 }
 @layer dx-tokens {
-  .dx-base-surface,
+  [data-surface],
   .dx-deck-surface,
   .dx-sidebar-surface,
   .dx-header-surface,
+  .dx-l0-surface,
+  .dx-l1-surface,
+  .dx-r0-surface,
+  .dx-r1-surface,
+  .dx-base-surface,
+  .dx-attention-surface,
   .dx-card-surface,
+  .dx-modal-surface,
+  .dx-popover-surface,
+  .dx-toolbar-surface,
   .dx-group-surface,
   .dx-input-surface,
-  .dx-toolbar-surface,
+  .dx-input,
+  .dx-main-sidebar {
+    --color-hover-surface: oklch( from var(--surface-bg) calc(l + var(--dx-lift) * var(--dx-attenuate-state) * 0.08) c h );
+    --color-hover-surface-subtle: oklch( from var(--surface-bg) calc(l + var(--dx-lift) * var(--dx-attenuate-state) * 0.02) c h );
+    --color-current-surface: oklch( from var(--surface-bg) calc(l + var(--dx-lift) * var(--dx-attenuate-state) * 0.1) c h );
+    --color-current-surface-hover: oklch( from var(--surface-bg) calc(l + var(--dx-lift) * var(--dx-attenuate-state) * 0.12) c h );
+    --color-placeholder: oklch( from var(--surface-bg) calc(l + var(--dx-lift) * var(--dx-attenuate-placeholder) * 0.3) c h );
+    --color-scrollbar-thumb: oklch( from var(--surface-bg) calc(l + var(--dx-lift) * var(--dx-attenuate-scrollbar) * 0.23) c h );
+    --color-scrollbar-thumb-hover: oklch( from var(--surface-bg) calc(l + var(--dx-lift) * var(--dx-attenuate-scrollbar) * 0.3) c h );
+    --color-scrollbar-thumb-active: oklch( from var(--surface-bg) calc(l + var(--dx-lift) * var(--dx-attenuate-scrollbar) * 0.34) c h );
+    --color-separator: oklch( from var(--surface-bg) calc(l + var(--dx-lift) * var(--dx-attenuate-separator-line) * 0.166) c h );
+    --color-input-separator: oklch( from var(--surface-bg) calc(l + var(--dx-lift) * var(--dx-attenuate-separator) * 0.115) c h );
+    --color-subdued-separator: oklch( from var(--surface-bg) calc(l + var(--dx-lift) * var(--dx-attenuate-separator) * 0.089) c h );
+    --color-primary-separator: oklch( from var(--surface-bg) calc(l + var(--dx-lift) * var(--dx-attenuate-separator) * 0.064) c h );
+    --color-selected-surface: var(--color-current-surface);
+    --color-selected-surface-hover: var(--color-current-surface-hover);
+  }
+  [data-surface=sunken],
+  [data-surface=chrome],
+  [data-surface=base],
+  [data-surface=raised],
+  [data-surface=overlay],
+  [data-surface=popup],
+  .dx-deck-surface,
+  .dx-sidebar-surface,
+  .dx-header-surface,
+  .dx-l0-surface,
+  .dx-l1-surface,
+  .dx-r0-surface,
+  .dx-r1-surface,
+  .dx-base-surface,
+  .dx-attention-surface,
+  .dx-card-surface,
   .dx-modal-surface,
   .dx-popover-surface,
-  .dx-attention-surface,
   .dx-main-sidebar {
-    --color-hover-surface: light-dark( oklch(from var(--surface-bg) calc(l - 0.08) c h), oklch(from var(--surface-bg) calc(l + 0.08) c h) );
-    --color-hover-surface-subtle: light-dark( oklch(from var(--surface-bg) calc(l - 0.02) c h), oklch(from var(--surface-bg) calc(l + 0.02) c h) );
-    --color-current-surface: light-dark( oklch(from var(--surface-bg) calc(l - 0.1) c h), oklch(from var(--surface-bg) calc(l + 0.1) c h) );
-    --color-current-surface-hover: light-dark( oklch(from var(--surface-bg) calc(l - 0.12) c h), oklch(from var(--surface-bg) calc(l + 0.12) c h) );
+    --color-toolbar-surface: oklch( from var(--surface-bg) calc(l + var(--dx-lift) * var(--dx-attenuate-bar) * 0.025) c h );
+    --color-group-surface: oklch(from var(--surface-bg) calc(l + var(--dx-lift) * var(--dx-attenuate-well) * 0.05) c h);
+    --color-group-alt-surface: oklch(from var(--surface-bg) calc(l + var(--dx-lift) * 0.08) c h);
+    --color-input-surface: var(--color-group-surface);
+    --color-focus-surface: var(--color-group-surface);
   }
 }
 
@@ -921,7 +1028,10 @@
     user-select: none;
   }
   .dx-tag--anchor {
-    @apply inline-block cursor-pointer px-[4px] py-0.5;
+    @apply inline-block cursor-pointer px-[8px];
+    padding-block: 2px;
+    margin-block: -2px;
+    text-indent: 0;
     @apply bg-input-surface ring-inset ring ring-neutral-border rounded-sm;
     &:hover {
       @apply bg-hover-surface;
@@ -1181,9 +1291,21 @@
     .dark & {
       @apply backdrop-blur-lg;
     }
-    background-color: var(--color-sidebar-surface);
+    --surface-bg: var(--dx-surface-chrome);
+    background-color: var(--surface-bg);
+    &[data-side=is] {
+      --surface-bg: var(--color-l1-surface);
+      &[data-state=collapsed] {
+        --surface-bg: var(--color-l0-surface);
+      }
+    }
+    &[data-side=ie] {
+      --surface-bg: var(--color-r1-surface);
+      &[data-state=collapsed] {
+        --surface-bg: var(--color-r0-surface);
+      }
+    }
     color: var(--color-sidebar-fg);
-    --surface-bg: var(--color-sidebar-surface);
     & :is([aria-current]:not([aria-current=false]), [aria-selected=true]) {
       color: var(--color-sidebar-current-fg);
     }
@@ -1293,6 +1415,7 @@
 /* src/css/layout/native.css */
 @layer dx-components {
   .dx-app-drag {
+    user-select: none;
     -webkit-user-select: none;
     -webkit-app-region: drag;
     --app-region: drag;
@@ -1638,9 +1761,8 @@
 /* src/css/utilities.css */
 @utility dx-expander { @apply flex-1 min-h-0 min-w-0 h-full w-full; }
 @utility dx-container { @apply dx-expander overflow-hidden; }
-@utility dx-column { @apply flex-1 min-w-0 w-full; }
 @utility dx-fullscreen { @apply absolute inset-0; }
-@utility dx-slot-warning { @apply border border-rose-500 border-dashed; }
+@utility dx-slot-warning { display: contents; & > * { outline: 2px dashed var(--color-rose-500); outline-offset: -2px; } }
 @utility dx-ring-pseudo { @apply relative after:content-[""] after:absolute after:inset-0 after:rounded-[inherit] after:pointer-events-none after:ring after:ring-inset after:ring-transparent; }
 @utility shimmer-text { mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 30%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0.4) 70%, rgba(0, 0, 0, 0.4) 100%); -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 30%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0.4) 70%, rgba(0, 0, 0, 0.4) 100%); mask-size: 200% 100%; -webkit-mask-size: 200% 100%; mask-repeat: repeat-x; -webkit-mask-repeat: repeat-x; animation: shimmer-text 2s linear infinite; }
 @media (prefers-reduced-motion: reduce) {
@@ -1653,7 +1775,7 @@
 }
 
 /* src/css/integrations/codemirror.css */
-@theme { --color-cm-codeblock: oklch(from var(--color-neutral-500) l c h / 0.1); --color-cm-active-line: light-dark( oklch(from var(--color-neutral-200) l c h / 0.5), oklch(from var(--color-neutral-800) l c h / 0.5) ); --color-cm-separator: var(--color-blue-500); --color-cm-cursor: light-dark(var(--color-neutral-900), var(--color-neutral-100)); --color-cm-selection: light-dark( oklch(from var(--color-blue-400) l c h / 0.5), oklch(from var(--color-blue-600) l c h / 0.5) ); --color-cm-focused-selection: light-dark(var(--color-blue-400), oklch(0.445 0.057 256)); --color-cm-highlight: light-dark(var(--color-neutral-950), var(--color-neutral-50)); --color-cm-highlight-surface: light-dark(var(--color-sky-200), var(--color-cyan-800)); --color-cm-comment-text: light-dark(var(--color-neutral-950), var(--color-neutral-950)); --color-cm-comment-surface: light-dark(var(--color-teal-200), var(--color-teal-200)); --color-cm-comment-current-surface: light-dark(var(--color-orange-200), var(--color-orange-200)); --color-cm-code: light-dark(var(--color-stone-600), var(--color-stone-400)); --color-cm-code-inline: light-dark(var(--color-green-500), var(--color-green-500)); --color-cm-code-mark: var(--color-blue-500); --color-cm-heading: light-dark(var(--color-blue-700), var(--color-blue-300)); --color-cm-heading-number: light-dark(var(--color-blue-600), var(--color-blue-400)); }
+@theme { --color-cm-codeblock: oklch(from var(--color-neutral-500) l c h / 0.1); --color-cm-active-line: light-dark( oklch(from var(--color-neutral-200) l c h / 0.5), oklch(from var(--color-neutral-800) l c h / 0.5) ); --color-cm-separator: var(--color-blue-500); --color-cm-cursor: light-dark(var(--color-neutral-900), var(--color-neutral-100)); --color-cm-selection: light-dark( oklch(from var(--color-blue-400) l c h / 0.5), oklch(from var(--color-blue-600) l c h / 0.5) ); --color-cm-focused-selection: light-dark(var(--color-blue-400), oklch(0.445 0.057 256)); --color-cm-highlight: light-dark(var(--color-neutral-950), var(--color-neutral-50)); --color-cm-highlight-surface: light-dark(var(--color-sky-200), var(--color-cyan-800)); --color-cm-comment-text: light-dark(var(--color-neutral-950), var(--color-neutral-950)); --color-cm-comment-surface: light-dark(var(--color-teal-200), var(--color-teal-200)); --color-cm-comment-current-surface: light-dark(var(--color-orange-200), var(--color-orange-200)); --color-cm-diff-add-surface: light-dark( oklch(from var(--color-green-500) l c h / 0.18), oklch(from var(--color-green-400) l c h / 0.22) ); --color-cm-diff-remove-surface: light-dark( oklch(from var(--color-red-500) l c h / 0.16), oklch(from var(--color-red-400) l c h / 0.22) ); --color-cm-diff-add-gutter: light-dark(var(--color-green-600), var(--color-green-400)); --color-cm-diff-remove-gutter: light-dark(var(--color-red-500), var(--color-red-400)); --color-cm-code: light-dark(var(--color-stone-600), var(--color-stone-400)); --color-cm-code-inline: light-dark(var(--color-green-500), var(--color-green-500)); --color-cm-code-mark: var(--color-blue-500); --color-cm-heading: light-dark(var(--color-blue-700), var(--color-blue-300)); --color-cm-heading-number: light-dark(var(--color-blue-600), var(--color-blue-400)); }
 
 /* src/css/integrations/tldraw.css */
 .tl-background {
@@ -1683,7 +1805,7 @@
 @plugin "@tailwindcss/forms";
 @plugin "tailwind-scrollbar";
 @plugin "tailwindcss-radix";
-@variant dark (&:where(.dark, .dark *));
+@custom-variant dark (&:where(.dark, .dark *));
 @custom-variant pointer-coarse (@media (pointer: coarse));
 @custom-variant pointer-fine (@media (pointer: fine));
 @custom-variant hover-hover (@media (hover: hover));