@dxos/ui-theme 0.8.4-main.6fa680abb7 → 0.8.4-main.765dc60934

package/dist/plugin/node-cjs/{theme.css → main.css}

@@ -1,29 +1,43 @@
 @layer properties, theme, dx-tokens, user-tokens, base, tw-base, dx-base, components, tw-components, dx-components, utilities;
-@import "tailwindcss";
+@import "tailwindcss" source(none);
 @import "@fontsource-variable/jetbrains-mono/wght-italic.css";
 @import "@fontsource-variable/jetbrains-mono/wght.css";
 @import "@fontsource/poiret-one";
 
 /* src/css/theme/animation.css */
 @theme { --ease-in-out-symmetric: cubic-bezier(0.5, 0, 0.5, 1); @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } --animate-fade-in: fade-in 200ms ease-out; --animate-fade-out: fade-out 400ms ease-out; @keyframes slide-down-and-fade { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(16px); } } @keyframes slide-left-and-fade { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } } @keyframes slide-up-and-fade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes slide-right-and-fade { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } } --animate-slide-down-and-fade: slide-down-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1); --animate-slide-left-and-fade: slide-left-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1); --animate-slide-up-and-fade: slide-up-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1); --animate-slide-right-and-fade: slide-right-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1); @keyframes toast-hide { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes toast-slide-in-right { 0% { transform: translateX(calc(100% + 1rem)); } 100% { transform: translateX(0); } } @keyframes toast-slide-in-bottom { 0% { transform: translateY(calc(100% + 1rem)); } 100% { transform: translateY(0); } } @keyframes toast-swipe-out { 0% { transform: translateX(var(--radix-toast-swipe-end-x)); } 100% { transform: translateX(calc(100% + 1rem)); } } --animate-toast-hide: toast-hide 100ms ease-in forwards; --animate-toast-slide-in-right: toast-slide-in-right 150ms cubic-bezier(0.16, 1, 0.3, 1); --animate-toast-slide-in-bottom: toast-slide-in-bottom 150ms cubic-bezier(0.16, 1, 0.3, 1); --animate-toast-swipe-out: toast-swipe-out 100ms ease-out forwards; @keyframes slide-down { from { height: 0px; } to { height: var(--radix-accordion-content-height); } } @keyframes slide-up { from { height: var(--radix-accordion-content-height); } to { height: 0px; } } --animate-slide-down: slide-down 300ms cubic-bezier(0.87, 0, 0.13, 1); --animate-slide-up: slide-up 300ms cubic-bezier(0.87, 0, 0.13, 1); @keyframes shimmer-loop { 100% { transform: translateX(100%); } } --animate-shimmer: shimmer-loop 2s infinite; @keyframes halo-pulse { 0% { opacity: 0.3; } 5% { opacity: 1; } 100% { opacity: 0.3; } } --animate-halo-pulse: halo-pulse 2s ease-out infinite; @keyframes progress-indeterminate { 0% { left: 0; width: 0%; } 25% { left: 25%; width: 50%; } 75% { left: 50%; width: 100%; } 100% { left: 100%; width: 0%; } } --animate-progress-indeterminate: progress-indeterminate 2s ease-out infinite; @keyframes trail { to { offset-distance: 100%; } } @keyframes trail-offset { 0% { offset-distance: 50%; } 100% { offset-distance: 150%; } } --animate-trail: trail 6s linear infinite; --animate-trail-offset: trail-offset 6s linear infinite; --animate-spin-slow: spin 3s linear infinite; @keyframes blink { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } --animate-blink: blink 1s step-start infinite; }
+@keyframes shimmer-text {
+  from {
+    mask-position-x: 100%;
+    -webkit-mask-position-x: 100%;
+  }
+  to {
+    mask-position-x: -100%;
+    -webkit-mask-position-x: -100%;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .animate-halo-pulse,
+  .animate-spin-slow,
+  .animate-trail,
+  .animate-trail-offset,
+  .animate-shimmer {
+    animation: none;
+  }
+}
 
 /* src/css/theme/border.css */
 @theme { --ring-offset-width-focus-offset: var(--dx-focus-offset); --ring-width-focus-line: var(--dx-focus-line); --ring-width-hair-line: var(--dx-hair-line); --ring-width-thick-line: var(--dx-thick-line); --ring-width-no-line: var(--dx-no-line); --border-width-landmark-line: var(--dx-landmark-line); --radius-none: 0; --radius-sm: 0.25rem; --radius: 0.5rem; --radius-md: 0.75rem; --radius-lg: 1rem; --shadow-slider: 0 0 0 5px rgba(0, 0, 0, 0.3); }
 
 /* src/css/theme/palette.css */
-@theme { --color-neutral-75: color-mix(in oklch, var(--color-neutral-50) 50%, var(--color-neutral-100) 50%); --color-neutral-250: color-mix(in oklch, var(--color-neutral-200) 50%, var(--color-neutral-300) 50%); --color-neutral-750: color-mix(in oklch, var(--color-neutral-700) 50%, var(--color-neutral-800) 50%); --color-neutral-925: color-mix(in oklch, var(--color-neutral-900) 50%, var(--color-neutral-950) 50%); --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); }
+@theme { --color-neutral-75: color-mix(in oklch, var(--color-neutral-50) 50%, var(--color-neutral-100) 50%); --color-neutral-150: color-mix(in oklch, var(--color-neutral-100) 50%, var(--color-neutral-200) 50%); --color-neutral-250: color-mix(in oklch, var(--color-neutral-200) 50%, var(--color-neutral-300) 50%); --color-neutral-750: color-mix(in oklch, var(--color-neutral-700) 50%, var(--color-neutral-800) 50%); --color-neutral-850: color-mix(in oklch, var(--color-neutral-800) 50%, var(--color-neutral-900) 50%); --color-neutral-925: color-mix(in oklch, var(--color-neutral-900) 50%, var(--color-neutral-950) 50%); --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 { --color-base-surface: light-dark(var(--color-neutral-50), var(--color-neutral-950)); --color-base-surface-text: light-dark(var(--color-neutral-950), var(--color-neutral-50)); --color-inverse-surface: light-dark(var(--color-neutral-800), var(--color-neutral-200)); --color-inverse-surface-text: light-dark(var(--color-neutral-50), var(--color-neutral-950)); --color-input-surface: light-dark(var(--color-neutral-200), var(--color-neutral-800)); --color-input-surface-text: light-dark(var(--color-neutral-950), var(--color-neutral-50)); --color-deck-surface: light-dark(var(--color-neutral-50), var(--color-neutral-950)); --color-scrim-surface: light-dark( oklch(from var(--color-neutral-50) l c h / 0.5), oklch(from var(--color-neutral-950) l c h / 0.25) ); --color-toolbar-surface: light-dark(var(--color-neutral-75), var(--color-neutral-925)); --color-group-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900)); --color-modal-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900)); --color-card-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900)); --color-sidebar-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900)); --color-header-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900)); --color-current-surface: light-dark(var(--color-neutral-200), var(--color-neutral-800)); --color-active-surface: light-dark(var(--color-neutral-200), var(--color-neutral-800)); --color-active-text: light-dark(var(--color-neutral-950), var(--color-neutral-50)); --color-hover-overlay: light-dark(var(--color-neutral-250), var(--color-neutral-750)); --color-hover-surface: light-dark(var(--color-neutral-250), var(--color-neutral-750)); --color-hover-surface-text: light-dark(var(--color-neutral-950), var(--color-neutral-50)); --color-attention-surface: var(--color-focus-surface); --color-attention-contains: oklch(from var(--color-accent-surface) l c h / 0.3); --color-focus-surface: light-dark(var(--color-neutral-50), var(--color-neutral-950)); --color-neutral-focus-indicator: light-dark(var(--color-neutral-400), var(--color-neutral-600)); --color-accent-surface: light-dark(var(--color-blue-600), var(--color-blue-600)); --color-accent-surface-hover: light-dark(var(--color-blue-800), var(--color-blue-800)); --color-accent-surface-text: var(--color-blue-100); --color-accent-text: light-dark(var(--color-blue-600), var(--color-blue-600)); --color-accent-text-hover: light-dark(var(--color-blue-500), var(--color-blue-500)); --color-accent-focus-indicator: light-dark(var(--color-blue-600), var(--color-blue-600)); --color-un-accent: var(--color-neutral-400); --color-un-accent-hover: var(--color-neutral-500); --color-separator: light-dark(var(--color-neutral-200), var(--color-neutral-800)); --color-primary-separator: light-dark(var(--color-neutral-400), var(--color-neutral-800)); --color-subdued-separator: light-dark(var(--color-neutral-300), var(--color-neutral-900)); --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-700)); --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-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-axis-surface: light-dark(var(--color-neutral-50), var(--color-neutral-800)); --color-axis-text: light-dark(var(--color-neutral-800), var(--color-neutral-200)); --color-grid-surface: light-dark(var(--color-neutral-50), var(--color-neutral-950)); --color-grid-highlight: oklch(from var(--color-emerald-500) l c h / 0.5); --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) ); --color-grid-hover-overlay: oklch(from var(--color-neutral-500) l c h / 0.1); --color-grid-selection-overlay: var(--color-blue-500); --color-grid-line: light-dark(var(--color-neutral-200), var(--color-neutral-800)); --color-grid-focus-indicator: light-dark(var(--color-primary-600), var(--color-primary-600)); --color-placeholder: light-dark(var(--color-neutral-400), var(--color-neutral-600)); --color-subdued: light-dark(var(--color-neutral-500), var(--color-neutral-500)); --color-description: light-dark(var(--color-neutral-600), var(--color-neutral-400)); }
+@theme { --color-base-surface: light-dark(var(--color-neutral-50), var(--color-neutral-950)); --color-base-foreground: light-dark(var(--color-neutral-950), var(--color-neutral-50)); --color-inverse-surface: light-dark(var(--color-neutral-800), var(--color-neutral-200)); --color-inverse-foreground: light-dark(var(--color-neutral-50), var(--color-neutral-950)); --color-focus-surface: light-dark(var(--color-neutral-50), var(--color-neutral-950)); --color-deck-surface: light-dark(var(--color-neutral-50), var(--color-neutral-950)); --color-scrim-surface: light-dark( oklch(from var(--color-neutral-50) l c h / 0.5), oklch(from var(--color-neutral-950) l c h / 0.25) ); --color-toolbar-surface: light-dark(var(--color-neutral-75), var(--color-neutral-925)); --color-card-surface: light-dark(var(--color-neutral-75), var(--color-neutral-925)); --color-group-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900)); --color-modal-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900)); --color-sidebar-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900)); --color-header-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900)); --color-input-surface: light-dark(var(--color-neutral-200), var(--color-neutral-800)); --color-input-foreground: light-dark(var(--color-neutral-950), var(--color-neutral-50)); --color-current-surface: light-dark(var(--color-neutral-200), var(--color-neutral-800)); --color-current-surface-hover: light-dark(var(--color-neutral-300), var(--color-neutral-700)); --color-current-foreground: light-dark(var(--color-neutral-950), var(--color-neutral-50)); --color-selected-surface: light-dark(var(--color-neutral-150), var(--color-neutral-850)); --color-selected-surface-hover: light-dark(var(--color-neutral-250), var(--color-neutral-750)); --color-selected-foreground: light-dark(var(--color-neutral-950), var(--color-neutral-50)); --color-hover-surface: light-dark(var(--color-neutral-250), var(--color-neutral-750)); --color-hover-foreground: light-dark(var(--color-neutral-950), var(--color-neutral-50)); --color-attention-surface: var(--color-focus-surface); --color-attention-contains: oklch(from var(--color-accent-surface) l c h / 0.3); --color-accent-surface: light-dark(var(--color-blue-500), var(--color-blue-700)); --color-accent-surface-hover: light-dark(var(--color-blue-800), var(--color-blue-800)); --color-accent-foreground: 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-focus-ring: light-dark(var(--color-blue-600), var(--color-blue-600)); --color-focus-ring-subtle: light-dark(var(--color-neutral-400), var(--color-neutral-600)); --color-separator: light-dark(var(--color-neutral-200), var(--color-neutral-800)); --color-subdued-separator: light-dark(var(--color-neutral-150), var(--color-neutral-850)); --color-primary-separator: light-dark(var(--color-neutral-500), var(--color-neutral-700)); --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-700)); --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-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-axis-surface: light-dark(var(--color-neutral-50), var(--color-neutral-800)); --color-axis-text: light-dark(var(--color-neutral-800), var(--color-neutral-200)); --color-grid-surface: light-dark(var(--color-neutral-50), var(--color-neutral-950)); --color-grid-foreground: 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-foreground: 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) ); --color-placeholder: light-dark(var(--color-neutral-400), var(--color-neutral-600)); --color-subdued: light-dark(var(--color-neutral-500), var(--color-neutral-500)); --color-description: light-dark(var(--color-neutral-600), var(--color-neutral-400)); }
 
 /* src/css/theme/spacing.css */
-@theme { --spacing-screen-border: 1rem; --spacing-article-max-width: 50rem; --spacing-prose-max-width: 50rem; --spacing-popover-min-width: 12rem; --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-trim-xs: 0.375rem; --spacing-trim-sm: 0.5rem; --spacing-trim-md: 0.75rem; --spacing-trim-lg: 1.5rem; --spacing-tag-padding-block: 0.125rem; --spacing-text-content: calc(50rem - env(safe-area-inset-left) - env(safe-area-inset-right)); --spacing-form-chrome: var(--spacing-trim-xs); --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: 1.5rem; --spacing-form-chrome: var(--spacing-trim-xs); --spacing-form-gap: var(--spacing-trim-sm); --spacing-form-section-gap: var(--spacing-trim-lg); --spacing-form-padding: var(--spacing-trim-sm); --spacing-icon-button-padding: var(--spacing-trim-xs); --spacing-scroll-padding: 4px; }
 @layer dx-tokens {
-  .dx-density-coarse {
-    --spacing-form-padding: var(--spacing-trim-md);
-    --spacing-icon-button-padding: var(--spacing-trim-sm);
-    --spacing-scroll-padding: 8px;
-  }
 }
 @layer dx-tokens {
   :root {
@@ -34,10 +48,10 @@
     --dx-lacuna-3: 0.375rem;
     --dx-lacuna-4: 0.5rem;
     --dx-lacuna-6: 0.75rem;
-    --dx-gutter-xs: 0.125rem;
-    --dx-gutter-sm: 0.5rem;
-    --dx-gutter-md: 1rem;
-    --dx-gutter-lg: 2rem;
+    --dx-gutter-xs: 0.25rem;
+    --dx-gutter-sm: 1rem;
+    --dx-gutter-md: 2rem;
+    --dx-gutter-lg: 2.5rem;
   }
   :root {
     --dx-hair-line: 1px;
@@ -55,6 +69,7 @@
     --dx-grid-focus-indicator-width: var(--dx-hair-line);
     --dx-input-fine: var(--dx-lacuna-3);
     --dx-input-coarse: var(--dx-lacuna-4);
+    --dx-default-icons-size: 1rem;
   }
   [data-grid-focus-indicator-variant=stack] {
     --dx-grid-focus-indicator-width: var(--dx-thick-line);
@@ -63,18 +78,18 @@
     --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 + 1px);
+    --dx-rail-action: calc(var(--dx-rail-content) - 0.5rem);
     --dx-topbar-size: var(--dx-rail-size);
-    --dx-toolbar-size: var(--dx-rail-content);
-    --dx-statusbar-size: var(--dx-rail-content);
-    --dx-nav-sidebar-size: 23rem;
+    --dx-toolbar-size: var(--dx-rail-action);
+    --dx-statusbar-size: var(--dx-rail-item);
+    --dx-nav-sidebar-size: 350px;
     --dx-complementary-sidebar-size: 25rem;
     --dx-drawer-size: 50dvh;
-    --dx-l0-size: 74px;
+    --dx-l0-size: 72px;
     --dx-l0-avatar-size: 3rem;
     --dx-l1-size: calc(var(--dx-nav-sidebar-size) - var(--dx-l0-size));
     --dx-r0-size: var(--dx-rail-size);
-    --dx-r1-size: calc(var(--dx-complementary-sidebar-size) - var(--dx-r0-size));
+    --dx-r1-size: calc(var(--dx-complementary-sidebar-size) - var(--dx-r0-size) - 1px);
   }
   :root {
     --dx-calc-auto: auto;
@@ -95,7 +110,7 @@
 }
 
 /* src/css/theme/styles.css */
-@theme { --color-info-fill: var(--color-cyan-fill); --color-info-surface: var(--color-cyan-surface); --color-info-surface-text: var(--color-cyan-surface-text); --color-info-text: var(--color-cyan-text); --color-info-border: var(--color-cyan-border); --color-success-fill: var(--color-emerald-fill); --color-success-surface: var(--color-emerald-surface); --color-success-surface-text: var(--color-emerald-surface-text); --color-success-text: var(--color-emerald-text); --color-success-border: var(--color-emerald-border); --color-warning-fill: var(--color-amber-fill); --color-warning-surface: var(--color-amber-surface); --color-warning-surface-text: var(--color-amber-surface-text); --color-warning-text: var(--color-amber-text); --color-warning-border: var(--color-amber-border); --color-error-fill: var(--color-rose-fill); --color-error-surface: var(--color-rose-surface); --color-error-surface-text: var(--color-rose-surface-text); --color-error-text: var(--color-rose-text); --color-error-border: var(--color-rose-border); --color-neutral-fill: light-dark(var(--color-neutral-300), var(--color-neutral-700)); --color-neutral-surface: light-dark(var(--color-neutral-200), var(--color-neutral-800)); --color-neutral-surface-text: light-dark(var(--color-neutral-800), var(--color-neutral-200)); --color-neutral-text: light-dark(var(--color-neutral-700), var(--color-neutral-300)); --color-neutral-border: light-dark(var(--color-neutral-400), var(--color-neutral-600)); --color-red-fill: light-dark(var(--color-red-300), var(--color-red-700)); --color-red-surface: light-dark(var(--color-red-200), var(--color-red-800)); --color-red-surface-text: light-dark(var(--color-red-800), var(--color-red-200)); --color-red-text: light-dark(var(--color-red-700), var(--color-red-300)); --color-red-border: light-dark(var(--color-red-400), var(--color-red-600)); --color-orange-fill: light-dark(var(--color-orange-300), var(--color-orange-700)); --color-orange-surface: light-dark(var(--color-orange-200), var(--color-orange-800)); --color-orange-surface-text: light-dark(var(--color-orange-800), var(--color-orange-200)); --color-orange-text: light-dark(var(--color-orange-700), var(--color-orange-300)); --color-orange-border: light-dark(var(--color-orange-400), var(--color-orange-600)); --color-amber-fill: light-dark(var(--color-amber-300), var(--color-amber-700)); --color-amber-surface: light-dark(var(--color-amber-200), var(--color-amber-800)); --color-amber-surface-text: light-dark(var(--color-amber-800), var(--color-amber-200)); --color-amber-text: light-dark(var(--color-amber-700), var(--color-amber-300)); --color-amber-border: light-dark(var(--color-amber-400), var(--color-amber-600)); --color-yellow-fill: light-dark(var(--color-yellow-300), var(--color-yellow-700)); --color-yellow-surface: light-dark(var(--color-yellow-200), var(--color-yellow-800)); --color-yellow-surface-text: light-dark(var(--color-yellow-800), var(--color-yellow-200)); --color-yellow-text: light-dark(var(--color-yellow-700), var(--color-yellow-300)); --color-yellow-border: light-dark(var(--color-yellow-400), var(--color-yellow-600)); --color-lime-fill: light-dark(var(--color-lime-300), var(--color-lime-700)); --color-lime-surface: light-dark(var(--color-lime-200), var(--color-lime-800)); --color-lime-surface-text: light-dark(var(--color-lime-800), var(--color-lime-200)); --color-lime-text: light-dark(var(--color-lime-700), var(--color-lime-300)); --color-lime-border: light-dark(var(--color-lime-400), var(--color-lime-600)); --color-green-fill: light-dark(var(--color-green-300), var(--color-green-700)); --color-green-surface: light-dark(var(--color-green-200), var(--color-green-800)); --color-green-surface-text: light-dark(var(--color-green-800), var(--color-green-200)); --color-green-text: light-dark(var(--color-green-700), var(--color-green-300)); --color-green-border: light-dark(var(--color-green-400), var(--color-green-600)); --color-emerald-fill: light-dark(var(--color-emerald-300), var(--color-emerald-700)); --color-emerald-surface: light-dark(var(--color-emerald-200), var(--color-emerald-800)); --color-emerald-surface-text: light-dark(var(--color-emerald-800), var(--color-emerald-200)); --color-emerald-text: light-dark(var(--color-emerald-700), var(--color-emerald-300)); --color-emerald-border: light-dark(var(--color-emerald-400), var(--color-emerald-600)); --color-teal-fill: light-dark(var(--color-teal-300), var(--color-teal-700)); --color-teal-surface: light-dark(var(--color-teal-200), var(--color-teal-800)); --color-teal-surface-text: light-dark(var(--color-teal-800), var(--color-teal-200)); --color-teal-text: light-dark(var(--color-teal-700), var(--color-teal-300)); --color-teal-border: light-dark(var(--color-teal-400), var(--color-teal-600)); --color-cyan-fill: light-dark(var(--color-cyan-300), var(--color-cyan-700)); --color-cyan-surface: light-dark(var(--color-cyan-200), var(--color-cyan-800)); --color-cyan-surface-text: light-dark(var(--color-cyan-800), var(--color-cyan-200)); --color-cyan-text: light-dark(var(--color-cyan-700), var(--color-cyan-300)); --color-cyan-border: light-dark(var(--color-cyan-400), var(--color-cyan-600)); --color-sky-fill: light-dark(var(--color-sky-300), var(--color-sky-700)); --color-sky-surface: light-dark(var(--color-sky-200), var(--color-sky-800)); --color-sky-surface-text: light-dark(var(--color-sky-800), var(--color-sky-200)); --color-sky-text: light-dark(var(--color-sky-700), var(--color-sky-300)); --color-sky-border: light-dark(var(--color-sky-400), var(--color-sky-600)); --color-blue-fill: light-dark(var(--color-blue-300), var(--color-blue-700)); --color-blue-surface: light-dark(var(--color-blue-200), var(--color-blue-800)); --color-blue-surface-text: light-dark(var(--color-blue-800), var(--color-blue-200)); --color-blue-text: light-dark(var(--color-blue-700), var(--color-blue-300)); --color-blue-border: light-dark(var(--color-blue-400), var(--color-blue-600)); --color-indigo-fill: light-dark(var(--color-indigo-300), var(--color-indigo-700)); --color-indigo-surface: light-dark(var(--color-indigo-200), var(--color-indigo-800)); --color-indigo-surface-text: light-dark(var(--color-indigo-800), var(--color-indigo-200)); --color-indigo-text: light-dark(var(--color-indigo-700), var(--color-indigo-300)); --color-indigo-border: light-dark(var(--color-indigo-400), var(--color-indigo-600)); --color-violet-fill: light-dark(var(--color-violet-300), var(--color-violet-700)); --color-violet-surface: light-dark(var(--color-violet-200), var(--color-violet-800)); --color-violet-surface-text: light-dark(var(--color-violet-800), var(--color-violet-200)); --color-violet-text: light-dark(var(--color-violet-700), var(--color-violet-300)); --color-violet-border: light-dark(var(--color-violet-400), var(--color-violet-600)); --color-purple-fill: light-dark(var(--color-purple-300), var(--color-purple-700)); --color-purple-surface: light-dark(var(--color-purple-200), var(--color-purple-800)); --color-purple-surface-text: light-dark(var(--color-purple-800), var(--color-purple-200)); --color-purple-text: light-dark(var(--color-purple-700), var(--color-purple-300)); --color-purple-border: light-dark(var(--color-purple-400), var(--color-purple-600)); --color-fuchsia-fill: light-dark(var(--color-fuchsia-300), var(--color-fuchsia-700)); --color-fuchsia-surface: light-dark(var(--color-fuchsia-200), var(--color-fuchsia-800)); --color-fuchsia-surface-text: light-dark(var(--color-fuchsia-800), var(--color-fuchsia-200)); --color-fuchsia-text: light-dark(var(--color-fuchsia-700), var(--color-fuchsia-300)); --color-fuchsia-border: light-dark(var(--color-fuchsia-400), var(--color-fuchsia-600)); --color-pink-fill: light-dark(var(--color-pink-300), var(--color-pink-700)); --color-pink-surface: light-dark(var(--color-pink-200), var(--color-pink-800)); --color-pink-surface-text: light-dark(var(--color-pink-800), var(--color-pink-200)); --color-pink-text: light-dark(var(--color-pink-700), var(--color-pink-300)); --color-pink-border: light-dark(var(--color-pink-400), var(--color-pink-600)); --color-rose-fill: light-dark(var(--color-rose-300), var(--color-rose-700)); --color-rose-surface: light-dark(var(--color-rose-200), var(--color-rose-800)); --color-rose-surface-text: light-dark(var(--color-rose-800), var(--color-rose-200)); --color-rose-text: light-dark(var(--color-rose-700), var(--color-rose-300)); --color-rose-border: light-dark(var(--color-rose-400), var(--color-rose-600)); }
+@theme { --color-info-fill: var(--color-cyan-fill); --color-info-surface: var(--color-cyan-surface); --color-info-foreground: var(--color-cyan-foreground); --color-info-text: var(--color-cyan-text); --color-info-border: var(--color-cyan-border); --color-success-fill: var(--color-emerald-fill); --color-success-surface: var(--color-emerald-surface); --color-success-foreground: var(--color-emerald-foreground); --color-success-text: var(--color-emerald-text); --color-success-border: var(--color-emerald-border); --color-warning-fill: var(--color-amber-fill); --color-warning-surface: var(--color-amber-surface); --color-warning-foreground: var(--color-amber-foreground); --color-warning-text: var(--color-amber-text); --color-warning-border: var(--color-amber-border); --color-error-fill: var(--color-rose-fill); --color-error-surface: var(--color-rose-surface); --color-error-foreground: var(--color-rose-foreground); --color-error-text: var(--color-rose-text); --color-error-border: var(--color-rose-border); --color-neutral-fill: light-dark(var(--color-neutral-300), var(--color-neutral-700)); --color-neutral-surface: light-dark(var(--color-neutral-200), var(--color-neutral-800)); --color-neutral-foreground: light-dark(var(--color-neutral-800), var(--color-neutral-200)); --color-neutral-text: light-dark(var(--color-neutral-700), var(--color-neutral-300)); --color-neutral-border: light-dark(var(--color-neutral-400), var(--color-neutral-600)); --color-red-fill: light-dark(var(--color-red-300), var(--color-red-700)); --color-red-surface: light-dark(var(--color-red-200), var(--color-red-800)); --color-red-foreground: light-dark(var(--color-red-800), var(--color-red-200)); --color-red-text: light-dark(var(--color-red-700), var(--color-red-300)); --color-red-border: light-dark(var(--color-red-400), var(--color-red-600)); --color-orange-fill: light-dark(var(--color-orange-300), var(--color-orange-700)); --color-orange-surface: light-dark(var(--color-orange-200), var(--color-orange-800)); --color-orange-foreground: light-dark(var(--color-orange-800), var(--color-orange-200)); --color-orange-text: light-dark(var(--color-orange-700), var(--color-orange-300)); --color-orange-border: light-dark(var(--color-orange-400), var(--color-orange-600)); --color-amber-fill: light-dark(var(--color-amber-300), var(--color-amber-700)); --color-amber-surface: light-dark(var(--color-amber-200), var(--color-amber-800)); --color-amber-foreground: light-dark(var(--color-amber-800), var(--color-amber-200)); --color-amber-text: light-dark(var(--color-amber-700), var(--color-amber-300)); --color-amber-border: light-dark(var(--color-amber-400), var(--color-amber-600)); --color-yellow-fill: light-dark(var(--color-yellow-300), var(--color-yellow-700)); --color-yellow-surface: light-dark(var(--color-yellow-200), var(--color-yellow-800)); --color-yellow-foreground: light-dark(var(--color-yellow-800), var(--color-yellow-200)); --color-yellow-text: light-dark(var(--color-yellow-700), var(--color-yellow-300)); --color-yellow-border: light-dark(var(--color-yellow-400), var(--color-yellow-600)); --color-lime-fill: light-dark(var(--color-lime-300), var(--color-lime-700)); --color-lime-surface: light-dark(var(--color-lime-200), var(--color-lime-800)); --color-lime-foreground: light-dark(var(--color-lime-800), var(--color-lime-200)); --color-lime-text: light-dark(var(--color-lime-700), var(--color-lime-300)); --color-lime-border: light-dark(var(--color-lime-400), var(--color-lime-600)); --color-green-fill: light-dark(var(--color-green-300), var(--color-green-700)); --color-green-surface: light-dark(var(--color-green-200), var(--color-green-800)); --color-green-foreground: light-dark(var(--color-green-800), var(--color-green-200)); --color-green-text: light-dark(var(--color-green-700), var(--color-green-300)); --color-green-border: light-dark(var(--color-green-400), var(--color-green-600)); --color-emerald-fill: light-dark(var(--color-emerald-300), var(--color-emerald-700)); --color-emerald-surface: light-dark(var(--color-emerald-200), var(--color-emerald-800)); --color-emerald-foreground: light-dark(var(--color-emerald-800), var(--color-emerald-200)); --color-emerald-text: light-dark(var(--color-emerald-700), var(--color-emerald-300)); --color-emerald-border: light-dark(var(--color-emerald-400), var(--color-emerald-600)); --color-teal-fill: light-dark(var(--color-teal-300), var(--color-teal-700)); --color-teal-surface: light-dark(var(--color-teal-200), var(--color-teal-800)); --color-teal-foreground: light-dark(var(--color-teal-800), var(--color-teal-200)); --color-teal-text: light-dark(var(--color-teal-700), var(--color-teal-300)); --color-teal-border: light-dark(var(--color-teal-400), var(--color-teal-600)); --color-cyan-fill: light-dark(var(--color-cyan-300), var(--color-cyan-700)); --color-cyan-surface: light-dark(var(--color-cyan-200), var(--color-cyan-800)); --color-cyan-foreground: light-dark(var(--color-cyan-800), var(--color-cyan-200)); --color-cyan-text: light-dark(var(--color-cyan-700), var(--color-cyan-300)); --color-cyan-border: light-dark(var(--color-cyan-400), var(--color-cyan-600)); --color-sky-fill: light-dark(var(--color-sky-300), var(--color-sky-700)); --color-sky-surface: light-dark(var(--color-sky-200), var(--color-sky-800)); --color-sky-foreground: light-dark(var(--color-sky-800), var(--color-sky-200)); --color-sky-text: light-dark(var(--color-sky-700), var(--color-sky-300)); --color-sky-border: light-dark(var(--color-sky-400), var(--color-sky-600)); --color-blue-fill: light-dark(var(--color-blue-300), var(--color-blue-700)); --color-blue-surface: light-dark(var(--color-blue-200), var(--color-blue-800)); --color-blue-foreground: light-dark(var(--color-blue-800), var(--color-blue-200)); --color-blue-text: light-dark(var(--color-blue-700), var(--color-blue-300)); --color-blue-border: light-dark(var(--color-blue-400), var(--color-blue-600)); --color-indigo-fill: light-dark(var(--color-indigo-300), var(--color-indigo-700)); --color-indigo-surface: light-dark(var(--color-indigo-200), var(--color-indigo-800)); --color-indigo-foreground: light-dark(var(--color-indigo-800), var(--color-indigo-200)); --color-indigo-text: light-dark(var(--color-indigo-700), var(--color-indigo-300)); --color-indigo-border: light-dark(var(--color-indigo-400), var(--color-indigo-600)); --color-violet-fill: light-dark(var(--color-violet-300), var(--color-violet-700)); --color-violet-surface: light-dark(var(--color-violet-200), var(--color-violet-800)); --color-violet-foreground: light-dark(var(--color-violet-800), var(--color-violet-200)); --color-violet-text: light-dark(var(--color-violet-700), var(--color-violet-300)); --color-violet-border: light-dark(var(--color-violet-400), var(--color-violet-600)); --color-purple-fill: light-dark(var(--color-purple-300), var(--color-purple-700)); --color-purple-surface: light-dark(var(--color-purple-200), var(--color-purple-800)); --color-purple-foreground: light-dark(var(--color-purple-800), var(--color-purple-200)); --color-purple-text: light-dark(var(--color-purple-700), var(--color-purple-300)); --color-purple-border: light-dark(var(--color-purple-400), var(--color-purple-600)); --color-fuchsia-fill: light-dark(var(--color-fuchsia-300), var(--color-fuchsia-700)); --color-fuchsia-surface: light-dark(var(--color-fuchsia-200), var(--color-fuchsia-800)); --color-fuchsia-foreground: light-dark(var(--color-fuchsia-800), var(--color-fuchsia-200)); --color-fuchsia-text: light-dark(var(--color-fuchsia-700), var(--color-fuchsia-300)); --color-fuchsia-border: light-dark(var(--color-fuchsia-400), var(--color-fuchsia-600)); --color-pink-fill: light-dark(var(--color-pink-300), var(--color-pink-700)); --color-pink-surface: light-dark(var(--color-pink-200), var(--color-pink-800)); --color-pink-foreground: light-dark(var(--color-pink-800), var(--color-pink-200)); --color-pink-text: light-dark(var(--color-pink-700), var(--color-pink-300)); --color-pink-border: light-dark(var(--color-pink-400), var(--color-pink-600)); --color-rose-fill: light-dark(var(--color-rose-300), var(--color-rose-700)); --color-rose-surface: light-dark(var(--color-rose-200), var(--color-rose-800)); --color-rose-foreground: light-dark(var(--color-rose-800), var(--color-rose-200)); --color-rose-text: light-dark(var(--color-rose-700), var(--color-rose-300)); --color-rose-border: light-dark(var(--color-rose-400), var(--color-rose-600)); }
 
 /* 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; }
@@ -128,9 +143,9 @@
   html .dark,
   .sb-show-main {
     background-color: var(--color-base-surface);
-    color: var(--color-base-surface-text);
+    color: var(--color-base-foreground);
     --surface-bg: var(--color-base-surface);
-    --surface-text: var(--color-base-surface-text);
+    --foreground: var(--color-base-foreground);
     --description-text: var(--color-description);
   }
 }
@@ -247,7 +262,8 @@
 /* src/css/components/button.css */
 @layer dx-components {
   .dx-button {
-    @apply font-medium shrink-0 inline-flex select-none items-center justify-center overflow-hidden transition-colors duration-100 ease-linear bg-input-surface min-h-[2.5rem] px-3;
+    @apply shrink-0 inline-flex select-none items-center justify-center overflow-hidden min-h-[2.5rem] px-3;
+    @apply font-medium transition-colors duration-100 ease-linear bg-input-surface;
     &[aria-pressed=true],
     &[aria-checked=true] {
       @apply text-accent-text bg-attention-surface;
@@ -280,7 +296,7 @@
         @apply bg-hover-surface;
       }
       &[data-variant=primary] {
-        @apply text-accent-surface-text bg-accent-surface;
+        @apply text-accent-foreground bg-accent-surface;
         &:hover,
         &[aria-pressed=true],
         &[aria-checked=true] &[data-state=open] {
@@ -288,7 +304,7 @@
         }
       }
       &[data-variant=destructive] {
-        @apply text-accent-surface-text bg-rose-fill;
+        @apply text-accent-foreground bg-rose-fill;
         &:hover,
         &[aria-pressed=true],
         &[aria-checked=true] &[data-state=open] {
@@ -333,7 +349,7 @@
     }
   }
   .dx-checkbox {
-    @apply w-4 h-4 overflow-hidden shadow-inner transition-colors bg-un-accent accent-un-accent text-accent-surface-text shrink-0 inline-grid place-items-center rounded-xs;
+    @apply w-4 h-4 overflow-hidden shadow-inner transition-colors bg-un-accent accent-un-accent text-accent-foreground shrink-0 inline-grid place-items-center rounded-xs;
   }
   .dx-checkbox--switch {
     @apply inline-block appearance-none relative shrink-0 h-5 w-8;
@@ -416,7 +432,7 @@
   }
 }
 
-/* src/css/components/focus-ring.css */
+/* src/css/components/focus.css */
 @layer dx-components {
   .dx-focus-ring,
   .dx-focus-ring-inset {
@@ -426,9 +442,9 @@
         @apply outline-hidden;
       }
       &:focus-visible {
-        @apply ring-focus-line ring-offset-focus-offset z-[1] ring-[var(--color-neutral-focus-indicator)];
+        @apply ring-focus-line ring-offset-focus-offset z-[1] ring-[var(--color-focus-ring-subtle)];
         &[data-variant=primary] {
-          @apply ring-[var(--color-accent-focus-indicator)];
+          @apply ring-[var(--color-focus-ring)];
         }
         &:hover {
           @apply outline-hidden;
@@ -439,6 +455,12 @@
       }
     }
   }
+  .dx-focus-ring-none {
+    &:focus,
+    &:focus-visible {
+      @apply outline-hidden! ring-0!;
+    }
+  }
   .dx-focus-ring-always,
   .dx-focus-ring-inset-always {
     &:not([disabled]),
@@ -447,9 +469,9 @@
         @apply outline-hidden;
       }
       &:focus {
-        @apply ring-focus-line ring-offset-focus-offset z-[1] ring-[var(--color-neutral-focus-indicator)];
+        @apply ring-focus-line ring-offset-focus-offset z-[1] ring-[var(--color-focus-ring-subtle)];
         &[data-variant=primary] {
-          @apply ring-[var(--color-accent-focus-indicator)];
+          @apply ring-[var(--color-focus-ring)];
         }
         &:hover {
           @apply outline-hidden;
@@ -476,9 +498,9 @@
   .dx-focus-ring-group:focus-visible .dx-focus-ring-group-indicator,
   .dx-focus-ring-group-x:focus-visible .dx-focus-ring-group-x-indicator,
   .dx-focus-ring-group-y:focus-visible .dx-focus-ring-group-y-indicator {
-    @apply ring-focus-line ring-offset-focus-offset ring-[var(--color-neutral-focus-indicator)];
+    @apply ring-focus-line ring-offset-focus-offset ring-[var(--color-focus-ring-subtle)];
     &[data-variant=primary] {
-      @apply ring-[var(--color-accent-focus-indicator)];
+      @apply ring-[var(--color-focus-ring)];
     }
     &:hover {
       @apply outline-hidden;
@@ -490,9 +512,9 @@
   .dx-focus-ring-group-always:focus .dx-focus-ring-group-indicator,
   .dx-focus-ring-group-x-always:focus .dx-focus-ring-group-x-indicator,
   .dx-focus-ring-group-y-always:focus .dx-focus-ring-group-y-indicator {
-    @apply ring-focus-line ring-offset-focus-offset ring-[var(--color-neutral-focus-indicator)];
+    @apply ring-focus-line ring-offset-focus-offset ring-[var(--color-focus-ring-subtle)];
     &[data-variant=primary] {
-      @apply ring-[var(--color-accent-focus-indicator)];
+      @apply ring-[var(--color-focus-ring)];
     }
     &:hover {
       @apply outline-hidden;
@@ -530,10 +552,10 @@
       }
       &:focus-visible {
         &::after {
-          @apply ring-focus-line ring-offset-focus-offset ring-inset z-[1] ring-[var(--color-neutral-focus-indicator)];
+          @apply ring-focus-line ring-offset-focus-offset ring-inset z-[1] ring-[var(--color-focus-ring-subtle)];
         }
         &[data-variant=primary]::after {
-          @apply ring-[var(--color-accent-focus-indicator)];
+          @apply ring-[var(--color-focus-ring)];
         }
         &:hover {
           @apply outline-hidden;
@@ -557,10 +579,10 @@
       }
       &:focus {
         &::after {
-          @apply ring-focus-line ring-offset-focus-offset ring-inset z-[1] ring-[var(--color-neutral-focus-indicator)];
+          @apply ring-focus-line ring-offset-focus-offset ring-inset z-[1] ring-[var(--color-focus-ring-subtle)];
         }
         &[data-variant=primary]::after {
-          @apply ring-[var(--color-accent-focus-indicator)];
+          @apply ring-[var(--color-focus-ring)];
         }
         &:hover {
           @apply outline-hidden;
@@ -603,97 +625,110 @@
       }
     }
   }
+  .dx-focus-subdued {
+    @apply focus:outline-hidden focus-visible:outline-hidden focus:ring-0 ring-0 focus:border-0 border-0;
+  }
+  .dx-focus-static {
+    @apply ring-2 ring-offset-0 ring-primary-300 ring-offset-white dark:ring-primary-400 dark:ring-offset-black;
+  }
+}
+
+/* src/css/components/icon.css */
+@layer dx-components {
+  .dx-icon-inline {
+    @apply inline-block align-[-0.125em];
+  }
 }
 
 /* src/css/components/panel.css */
 @layer dx-components {
-  .dx-panel[data-hue=neutral],
+  [data-hue=neutral] .dx-panel,
   .dx-panel--neutral {
-    @apply bg-neutral-surface text-neutral-surface-text border-neutral-border;
+    @apply bg-neutral-surface text-neutral-foreground border-neutral-border;
   }
-  .dx-panel[data-hue=red],
+  [data-hue=red] .dx-panel,
   .dx-panel--red {
-    @apply bg-red-surface text-red-surface-text border-red-border;
+    @apply bg-red-surface text-red-foreground border-red-border;
   }
-  .dx-panel[data-hue=orange],
+  [data-hue=orange] .dx-panel,
   .dx-panel--orange {
-    @apply bg-orange-surface text-orange-surface-text border-orange-border;
+    @apply bg-orange-surface text-orange-foreground border-orange-border;
   }
-  .dx-panel[data-hue=amber],
+  [data-hue=amber] .dx-panel,
   .dx-panel--amber {
-    @apply bg-amber-surface text-amber-surface-text border-amber-border;
+    @apply bg-amber-surface text-amber-foreground border-amber-border;
   }
-  .dx-panel[data-hue=yellow],
+  [data-hue=yellow] .dx-panel,
   .dx-panel--yellow {
-    @apply bg-yellow-surface text-yellow-surface-text border-yellow-border;
+    @apply bg-yellow-surface text-yellow-foreground border-yellow-border;
   }
-  .dx-panel[data-hue=lime],
+  [data-hue=lime] .dx-panel,
   .dx-panel--lime {
-    @apply bg-lime-surface text-lime-surface-text border-lime-border;
+    @apply bg-lime-surface text-lime-foreground border-lime-border;
   }
-  .dx-panel[data-hue=green],
+  [data-hue=green] .dx-panel,
   .dx-panel--green {
-    @apply bg-green-surface text-green-surface-text border-green-border;
+    @apply bg-green-surface text-green-foreground border-green-border;
   }
-  .dx-panel[data-hue=emerald],
+  [data-hue=emerald] .dx-panel,
   .dx-panel--emerald {
-    @apply bg-emerald-surface text-emerald-surface-text border-emerald-border;
+    @apply bg-emerald-surface text-emerald-foreground border-emerald-border;
   }
-  .dx-panel[data-hue=teal],
+  [data-hue=teal] .dx-panel,
   .dx-panel--teal {
-    @apply bg-teal-surface text-teal-surface-text border-teal-border;
+    @apply bg-teal-surface text-teal-foreground border-teal-border;
   }
-  .dx-panel[data-hue=cyan],
+  [data-hue=cyan] .dx-panel,
   .dx-panel--cyan {
-    @apply bg-cyan-surface text-cyan-surface-text border-cyan-border;
+    @apply bg-cyan-surface text-cyan-foreground border-cyan-border;
   }
-  .dx-panel[data-hue=sky],
+  [data-hue=sky] .dx-panel,
   .dx-panel--sky {
-    @apply bg-sky-surface text-sky-surface-text border-sky-border;
+    @apply bg-sky-surface text-sky-foreground border-sky-border;
   }
-  .dx-panel[data-hue=blue],
+  [data-hue=blue] .dx-panel,
   .dx-panel--blue {
-    @apply bg-blue-surface text-blue-surface-text border-blue-border;
+    @apply bg-blue-surface text-blue-foreground border-blue-border;
   }
-  .dx-panel[data-hue=indigo],
+  [data-hue=indigo] .dx-panel,
   .dx-panel--indigo {
-    @apply bg-indigo-surface text-indigo-surface-text border-indigo-border;
+    @apply bg-indigo-surface text-indigo-foreground border-indigo-border;
   }
-  .dx-panel[data-hue=violet],
+  [data-hue=violet] .dx-panel,
   .dx-panel--violet {
-    @apply bg-violet-surface text-violet-surface-text border-violet-border;
+    @apply bg-violet-surface text-violet-foreground border-violet-border;
   }
-  .dx-panel[data-hue=purple],
+  [data-hue=purple] .dx-panel,
   .dx-panel--purple {
-    @apply bg-purple-surface text-purple-surface-text border-purple-border;
+    @apply bg-purple-surface text-purple-foreground border-purple-border;
   }
-  .dx-panel[data-hue=fuchsia],
+  [data-hue=fuchsia] .dx-panel,
   .dx-panel--fuchsia {
-    @apply bg-fuchsia-surface text-fuchsia-surface-text border-fuchsia-border;
+    @apply bg-fuchsia-surface text-fuchsia-foreground border-fuchsia-border;
   }
-  .dx-panel[data-hue=pink],
+  [data-hue=pink] .dx-panel,
   .dx-panel--pink {
-    @apply bg-pink-surface text-pink-surface-text border-pink-border;
+    @apply bg-pink-surface text-pink-foreground border-pink-border;
   }
-  .dx-panel[data-hue=rose],
+  [data-hue=rose] .dx-panel,
   .dx-panel--rose {
-    @apply bg-rose-surface text-rose-surface-text border-rose-border;
+    @apply bg-rose-surface text-rose-foreground border-rose-border;
   }
-  .dx-panel[data-hue=info],
+  [data-hue=info] .dx-panel,
   .dx-panel--info {
-    @apply bg-info-surface text-info-surface-text border-info-border;
+    @apply bg-info-surface text-info-foreground border-info-border;
   }
-  .dx-panel[data-hue=success],
+  [data-hue=success] .dx-panel,
   .dx-panel--success {
-    @apply bg-success-surface text-success-surface-text border-success-border;
+    @apply bg-success-surface text-success-foreground border-success-border;
   }
-  .dx-panel[data-hue=warning],
+  [data-hue=warning] .dx-panel,
   .dx-panel--warning {
-    @apply bg-warning-surface text-warning-surface-text border-warning-border;
+    @apply bg-warning-surface text-warning-foreground border-warning-border;
   }
-  .dx-panel[data-hue=error],
+  [data-hue=error] .dx-panel,
   .dx-panel--error {
-    @apply bg-error-surface text-error-surface-text border-error-border;
+    @apply bg-error-surface text-error-foreground border-error-border;
   }
 }
 
@@ -724,22 +759,44 @@
   }
 }
 
+/* src/css/components/selected.css */
+@layer dx-components {
+  .dx-hover {
+    @apply cursor-pointer hover:bg-hover-surface! hover:text-hover-foreground! hover:aria-selected:bg-selected-surface-hover! hover:aria-selected:text-selected-foreground! hover:aria-[current=true]:bg-current-surface-hover! hover:aria-[current=true]:text-current-foreground!;
+  }
+  .dx-hover-row {
+    @apply group-hover/row:bg-hover-surface! group-hover/row:text-hover-foreground! group-hover/row:group-aria-selected/row:bg-selected-surface-hover! group-hover/row:group-aria-selected/row:text-selected-foreground! group-hover/row:group-aria-[current=true]/row:bg-current-surface-hover! group-hover/row:group-aria-[current=true]/row:text-current-foreground!;
+  }
+  .dx-selected {
+    @apply aria-selected:bg-selected-surface! aria-selected:text-selected-foreground! 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-foreground! 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-foreground!;
+  }
+  .dx-highlighted {
+    @apply data-[highlighted]:bg-current-surface data-[highlighted]:text-current-foreground hover:data-[highlighted]:bg-current-surface-hover;
+  }
+}
+
 /* src/css/components/surface.css */
 @layer dx-components {
   .dx-base-surface {
-    @apply bg-base-surface text-base-surface-text;
+    @apply bg-base-surface text-base-foreground;
     --surface-bg: var(--color-base-surface);
   }
   .dx-sidebar-surface {
-    @apply bg-sidebar-surface text-base-surface-text;
+    @apply bg-sidebar-surface text-base-foreground;
     --surface-bg: var(--color-sidebar-surface);
   }
   .dx-modal-surface {
-    @apply bg-modal-surface text-base-surface-text backdrop-blur-md;
+    @apply bg-modal-surface text-base-foreground backdrop-blur-md;
     --surface-bg: var(--color-modal-surface);
   }
   .dx-attention-surface {
-    @apply bg-attention-surface text-base-surface-text;
+    @apply bg-attention-surface text-base-foreground;
     --surface-bg: var(--color-attention-surface);
   }
 }
@@ -752,98 +809,99 @@
     user-select: none;
   }
   .dx-tag--anchor {
-    @apply inline cursor-pointer -mx-[4px] px-[3px] py-0.5 border border-separator rounded-xs bg-group-surface transition-colors;
+    @apply inline cursor-pointer -mx-[3px] px-[2px] py-0.5 border rounded-xs transition-colors;
+    @apply bg-group-surface text-sky-foreground border-sky-border;
     &:hover {
       @apply bg-hover-surface;
     }
   }
   .dx-tag[data-hue=neutral],
   .dx-tag--neutral {
-    @apply bg-neutral-surface text-neutral-surface-text;
+    @apply bg-neutral-surface text-neutral-foreground;
   }
   .dx-tag[data-hue=red],
   .dx-tag--red {
-    @apply bg-red-surface text-red-surface-text;
+    @apply bg-red-surface text-red-foreground;
   }
   .dx-tag[data-hue=orange],
   .dx-tag--orange {
-    @apply bg-orange-surface text-orange-surface-text;
+    @apply bg-orange-surface text-orange-foreground;
   }
   .dx-tag[data-hue=amber],
   .dx-tag--amber {
-    @apply bg-amber-surface text-amber-surface-text;
+    @apply bg-amber-surface text-amber-foreground;
   }
   .dx-tag[data-hue=yellow],
   .dx-tag--yellow {
-    @apply bg-yellow-surface text-yellow-surface-text;
+    @apply bg-yellow-surface text-yellow-foreground;
   }
   .dx-tag[data-hue=lime],
   .dx-tag--lime {
-    @apply bg-lime-surface text-lime-surface-text;
+    @apply bg-lime-surface text-lime-foreground;
   }
   .dx-tag[data-hue=green],
   .dx-tag--green {
-    @apply bg-green-surface text-green-surface-text;
+    @apply bg-green-surface text-green-foreground;
   }
   .dx-tag[data-hue=emerald],
   .dx-tag--emerald {
-    @apply bg-emerald-surface text-emerald-surface-text;
+    @apply bg-emerald-surface text-emerald-foreground;
   }
   .dx-tag[data-hue=teal],
   .dx-tag--teal {
-    @apply bg-teal-surface text-teal-surface-text;
+    @apply bg-teal-surface text-teal-foreground;
   }
   .dx-tag[data-hue=cyan],
   .dx-tag--cyan {
-    @apply bg-cyan-surface text-cyan-surface-text;
+    @apply bg-cyan-surface text-cyan-foreground;
   }
   .dx-tag[data-hue=sky],
   .dx-tag--sky {
-    @apply bg-sky-surface text-sky-surface-text;
+    @apply bg-sky-surface text-sky-foreground;
   }
   .dx-tag[data-hue=blue],
   .dx-tag--blue {
-    @apply bg-blue-surface text-blue-surface-text;
+    @apply bg-blue-surface text-blue-foreground;
   }
   .dx-tag[data-hue=indigo],
   .dx-tag--indigo {
-    @apply bg-indigo-surface text-indigo-surface-text;
+    @apply bg-indigo-surface text-indigo-foreground;
   }
   .dx-tag[data-hue=violet],
   .dx-tag--violet {
-    @apply bg-violet-surface text-violet-surface-text;
+    @apply bg-violet-surface text-violet-foreground;
   }
   .dx-tag[data-hue=purple],
   .dx-tag--purple {
-    @apply bg-purple-surface text-purple-surface-text;
+    @apply bg-purple-surface text-purple-foreground;
   }
   .dx-tag[data-hue=fuchsia],
   .dx-tag--fuchsia {
-    @apply bg-fuchsia-surface text-fuchsia-surface-text;
+    @apply bg-fuchsia-surface text-fuchsia-foreground;
   }
   .dx-tag[data-hue=pink],
   .dx-tag--pink {
-    @apply bg-pink-surface text-pink-surface-text;
+    @apply bg-pink-surface text-pink-foreground;
   }
   .dx-tag[data-hue=rose],
   .dx-tag--rose {
-    @apply bg-rose-surface text-rose-surface-text;
+    @apply bg-rose-surface text-rose-foreground;
   }
   .dx-tag[data-hue=info],
   .dx-tag--info {
-    @apply bg-cyan-surface text-cyan-surface-text;
+    @apply bg-cyan-surface text-cyan-foreground;
   }
   .dx-tag[data-hue=success],
   .dx-tag--success {
-    @apply bg-emerald-surface text-emerald-surface-text;
+    @apply bg-emerald-surface text-emerald-foreground;
   }
   .dx-tag[data-hue=warning],
   .dx-tag--warning {
-    @apply bg-amber-surface text-amber-surface-text;
+    @apply bg-amber-surface text-amber-foreground;
   }
   .dx-tag[data-hue=error],
   .dx-tag--error {
-    @apply bg-rose-surface text-rose-surface-text;
+    @apply bg-rose-surface text-rose-foreground;
   }
 }
 
@@ -956,9 +1014,6 @@
     inset-block-end: 0;
     z-index: 0;
   }
-  .dx-main-mobile-layout {
-    @apply absolute inset-0 overflow-hidden flex flex-col;
-  }
   .dx-main-content-padding-transitions {
     transition-duration: 200ms;
     transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
@@ -1153,11 +1208,14 @@
   .dx-size-container {
     container-type: size;
   }
-  .dx-container {
-    @apply flex-1 min-h-0 min-w-0 h-full w-full;
+  .dx-inline-size-container {
+    container-type: inline-size;
   }
-  .dx-article {
-    @apply mx-auto w-full max-w-article-max-width;
+  .dx-document {
+    @apply mx-auto w-full max-w-document-max-width;
+  }
+  .dx-card {
+    @apply flex flex-col w-full;
   }
   .dx-card-square {
     inline-size: min(min(var(--radix-popper-available-width), var(--spacing-card-max-width)), min(var(--radix-popper-available-height), 100dvh));
@@ -1462,10 +1520,24 @@
 }
 
 /* src/css/utilities.css */
-@utility dx-icon-inline { @apply inline-block align-[-0.125em]; }
+@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-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) {
+  .shimmer-text {
+    animation: none;
+    mask-image: none;
+    -webkit-mask-image: none;
+    opacity: 0.6;
+  }
+}
 
 /* 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), var(--color-blue-600)); --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-50), var(--color-neutral-950)); --color-cm-comment-surface: light-dark(var(--color-amber-800), var(--color-amber-200)); --color-cm-code: light-dark(var(--color-neutral-700), var(--color-neutral-300)); --color-cm-code-mark: var(--color-blue-500); --color-cm-mark-opacity: 0.5; --color-cm-heading: light-dark(var(--color-neutral-900), var(--color-neutral-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), var(--color-blue-600)); --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-50), var(--color-neutral-950)); --color-cm-comment-surface: light-dark(var(--color-amber-800), var(--color-amber-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)); }
 
 /* src/css/integrations/tldraw.css */
 .tl-background {
@@ -1478,17 +1550,21 @@
   --color-panel-contrast: var(--color-separator);
 }
 
-/* src/theme.css */
+/* src/main.css */
+@source "../../../**/*.{ts,tsx,html}";
+@source "../../../../tools/**/*.{ts,tsx,html}";
 @source inline("bg-{neutral,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-{50,100,200,300,400,500,600,700,800,900,950}");
-@source inline("bg-{neutral,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-{fill,surface,surface-text,text,border}");
+@source inline("bg-{neutral,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-{fill,surface,foreground,text,border}");
 @source inline("border-{neutral,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-border");
-@source inline("bg-{info,success,warning,error}-{fill,surface,surface-text,text,border}");
+@source inline("bg-{info,success,warning,error}-{fill,surface,foreground,text,border}");
 @source inline("border-{info,success,warning,error}-border");
+@source inline("bg-grid-{surface,foreground,line,highlight,comment,comment-active,selection-surface,selection-foreground}");
 @plugin "@tailwindcss/forms";
 @plugin "tailwind-scrollbar";
 @plugin "tailwindcss-radix";
 @variant dark (&:where(.dark, .dark *));
-@custom-variant is-current (&[aria-current]:not([aria-current="false"]));
-@custom-variant hover-hover (@media (hover: hover));
+@custom-variant pointer-coarse (@media (pointer: coarse));
 @custom-variant pointer-fine (@media (pointer: fine));
-/*# sourceMappingURL=theme.css.map */
+@custom-variant hover-hover (@media (hover: hover));
+@custom-variant is-current (&[aria-current]:not([aria-current="false"]));
+/*# sourceMappingURL=main.css.map */