@dxos/ui-theme 0.10.0 → 0.11.0

package/src/css/theme/surfaces.css

@@ -0,0 +1,215 @@
+/**
+ * Surfaces — the elevation ladder and the aspects derived from it.
+ *
+ * Two kinds of token live here, and the distinction is the whole design:
+ *  - **Levels** are fixed stops on the neutral ramp. A named surface aliases exactly one level.
+ *  - **Aspects** are NOT levels. They are computed from whichever surface hosts them
+ *    (`--surface-bg`), so the same role reads correctly at any elevation.
+ *
+ * Everything else (text emphasis, accent, separators, scrollbar, grid paper) is in `roles.css`.
+ *
+ * Naming convention: --color-{name}-{part}[-{state}] — see DESIGN_SYSTEM.md.
+ */
+
+@theme {
+  /*
+   * Elevation ladder — six named levels, strictly monotonic, z-order low → high.
+   * Dark: lighter = higher. Light: inverted (lighter = higher, toward white).
+   *
+   * Chrome sits BELOW the document canvas and content surfaces sit ABOVE it, so the app reads as
+   * paper on a desk rather than paper in a well (see AUDIT.md D1/D2).
+   *
+   * Level      Dark   Light  Roles
+   *   sunken   n-950  0.905  deck gaps, wells, scrim base, L0/R0 outer rails
+   *   chrome   n-925  0.935  sidebars, topbar, statusbar, L1/R1 sidebars
+   *   base     n-900  0.980  document canvas, attention zone
+   *   raised   n-850  0.990  cards, side panels
+   *   overlay  n-800  0.995  dialogs, sheets, drawers
+   *   popup    n-775  1.000  popover, menu, toast, tooltip
+   *
+   * Toolbars, groups and inputs are deliberately NOT levels: they are aspects derived from
+   * whichever surface hosts them (see "Aspects" below), so a toolbar in a card and a toolbar on the
+   * canvas each read as a bar on their own host instead of jumping to a fixed global tone.
+   *
+   * These are private (--dx-*) knobs — use named surface tokens in components, not these directly.
+   */
+  --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));
+
+  /**
+   * Level: sunken
+   */
+
+  --color-deck-surface: var(--dx-surface-sunken);
+
+  /*
+   * Outer rails frame the panels rather than belonging to them, so they read one step behind the
+   * L1/R1 sidebars they flank. They carry their own light-dark pair rather than aliasing a level:
+   * dark keeps the deck's depth, while light sits higher, because near white the same ladder step
+   * reads much heavier than it does near black.
+   */
+  --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));
+
+  /* Translucent dimming layer; tracks the lowest level rather than a raw neutral. */
+  --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)
+  );
+
+  /**
+   * Level: chrome
+   */
+
+  --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));
+
+  /* Sidebar body text. Default sits one ramp stop below the current/selected emphasis. */
+  --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));
+
+  /**
+   * Level: base
+   */
+
+  --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);
+
+  /**
+   * Level: raised
+   */
+
+  --color-card-surface: var(--dx-surface-raised);
+
+  /**
+   * Level: overlay
+   */
+
+  --color-modal-surface: var(--dx-surface-overlay);
+
+  /**
+   * Level: popup
+   */
+
+  --color-popover-surface: var(--dx-surface-popup);
+
+  /*
+   * Aspects — surfaces and states derived from the HOST surface (`--surface-bg`) rather than pinned
+   * to a level, via relative oklch stepped by `--dx-lift` (+1 dark, -1 light; see base.css), so each
+   * stays visible at any elevation in either theme. The values here resolve against the root
+   * `--surface-bg` (= base-surface, set in base.css), which is the correct default for content
+   * outside any surface zone; every zone re-derives them for its own subtree in
+   * components/surface.css.
+   *
+   * Offsets (lightness): bar 0.025, well 0.05, hover-subtle 0.02, hover 0.08, current 0.10,
+   * current-hover 0.12. Keep these in sync with the re-derivation blocks in surface.css.
+   */
+
+  /* Bar: a sticky strip on its host (toolbar, statusbar). */
+  --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
+  );
+
+  /* Well: an inset region on its host (group, input, focus). */
+  --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);
+
+  /* Subtle alternate of group-surface for zebra striping (e.g. calendar months). */
+  --color-group-alt-surface: oklch(
+    from var(--surface-bg, var(--color-base-surface)) calc(l + var(--dx-lift) * 0.08) c h
+  );
+
+  /* Placeholder ink is an aspect too: a fixed neutral reads correctly on one surface only, so it
+   * lifts away from the host like the state surfaces do (offset 0.30). */
+  --color-placeholder: oklch(
+    from var(--surface-bg, var(--color-base-surface)) calc(l + var(--dx-lift) * var(--dx-attenuate-placeholder) * 0.3) c
+      h
+  );
+
+  /*
+   * Scrollbar thumb. Fixed neutrals collided with the surface they scrolled over: in light mode the
+   * thumb was neutral-200, the same value as the base canvas, so it was invisible. Deriving it from
+   * the host keeps the same contrast on any surface, in either theme (offsets 0.23 / 0.30 / 0.34).
+   */
+  --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
+  );
+
+  /*
+   * Separators. Fixed neutrals collided with the surfaces they divide once the ladder inverted:
+   * in light mode `separator` was neutral-200, the same value as the base canvas, and
+   * `subdued-separator` matched the sidebar exactly — both invisible. The offsets below reproduce
+   * the dark-mode appearance they had (0.166 / 0.115 / 0.089 / 0.064 above the base surface) and
+   * mirror it in light.
+   */
+  --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
+  );
+
+  /* State aspects — same host-derived mechanism; see the offsets above. */
+  --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));
+
+  /*
+   * Subtle region hover for large highlight targets (list rows, tiles) where the full
+   * control-strength hover reads as too heavy. Consumed by `.dx-hover`;
+   * controls (buttons) keep --color-hover-surface.
+   */
+  --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
+  );
+
+  /* current (aria-current) */
+  --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));
+
+  /* selected (aria-selected) tracks current */
+  --color-selected-surface: var(--color-current-surface);
+  --color-selected-surface-hover: var(--color-current-surface-hover);
+  --color-selected-fg: var(--color-current-fg);
+
+  /* Inverted surface (tooltips, snackbars) — a deliberate flip, not a level. */
+  --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));
+}

package/src/css/theme/text.css

@@ -3,8 +3,12 @@
  */
 
 @theme {
-  /* Font families */
-  --font-body: 'Inter Variable', ui-sans-serif, system-ui, sans-serif;
+  /* 
+   * Font families 
+   * https://fonts.google.com/?preview.layout=grid&categoryFilters=Technology:%2FTechnology%2FVariable;Sans+Serif:%2FSans%2F*
+   * Nunito
+   */
+  --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;
 
   /* Font size scale (Tailwind v4 defaults — clean rem/px values) */

package/src/css/utilities.css

@@ -37,13 +37,6 @@
   @apply dx-expander overflow-hidden;
 }
 
-/**
- * Column that fills the available space (extends dx-expander with overflow clipping).
- */
-@utility dx-column {
-  @apply flex-1 min-w-0 w-full;
-}
-
 /**
  * Fullscreen
  */
@@ -52,10 +45,21 @@
 }
 
 /**
- * Visual warning to indicate incorrect usage of `slottable`.
+ * Visual warning to indicate incorrect usage of `slottable` — an `asChild` whose child is not
+ * composable, so Radix `Slot` silently drops the injected className and ref.
+ *
+ * An outline rather than a border: it is applied to the part's own element (not a wrapper), so it
+ * must not consume layout space or fight a border the part already has. Dev builds only.
  */
 @utility dx-slot-warning {
-  @apply border border-rose-500 border-dashed;
+  /* No layout box of its own: these parts live in grids and subgrids, where an extra element
+     re-flows the layout — the diagnostic must not corrupt the thing it is diagnosing. */
+  display: contents;
+
+  & > * {
+    outline: 2px dashed var(--color-rose-500);
+    outline-offset: -2px;
+  }
 }
 
 /**

package/src/defs.ts

@@ -2,36 +2,11 @@
 // Copyright 2022 DXOS.org
 //
 
-import { type ChromaticPalette } from '@dxos/ui-types';
-
 /**
  * Translation namespace for OS-level translations.
  */
 export const osTranslations = 'org.dxos.i18n.os';
 
-/**
- * Available color hues for UI components.
- */
-export const hues: ChromaticPalette[] = [
-  'red',
-  'orange',
-  'amber',
-  'yellow',
-  'lime',
-  'green',
-  'emerald',
-  'teal',
-  'cyan',
-  'sky',
-  'blue',
-  'indigo',
-  'violet',
-  'purple',
-  'fuchsia',
-  'pink',
-  'rose',
-] as const;
-
 export const hueShades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950] as const;
 
 // NOTE: These are the JS-side style-API role keys (see ColorStyles in util/hash-styles.ts), kept

package/src/fragments/hover.ts

@@ -2,9 +2,6 @@
 // Copyright 2022 DXOS.org
 //
 
-export const ghostHover = 'hover:bg-hover-surface';
-export const ghostFocusWithin = 'focus-within:bg-hover-surface';
-
 export const hoverableControls =
   '[--controls-opacity:1] hover-hover:[--controls-opacity:0] hover-hover:hover:[--controls-opacity:1]';
 

package/src/fragments/index.ts

@@ -4,7 +4,6 @@
 
 // TODO(burdon): Remove export of fragments.
 
-export * from './density';
 export * from './disabled';
 export * from './hover';
 export * from './text';

package/src/main.css

@@ -23,14 +23,8 @@
  */
 @import 'tailwindcss' source(none);
 
-/* @theme extensions */
-@import './css/theme/animation.css';
-@import './css/theme/border.css';
-@import './css/theme/palette.css';
-@import './css/theme/semantic.css';
-@import './css/theme/spacing.css';
-@import './css/theme/styles.css';
-@import './css/theme/text.css';
+/* Theme extensions; also exported as tokens.css for stylesheets built outside this repo. */
+@import './tokens.css';
 
 /* @layer dx-base, dx-tokens */
 @import './css/base/base.css';
@@ -43,7 +37,8 @@
 @import './css/components/dialog.css';
 @import './css/components/focus.css';
 @import './css/components/icon.css';
-@import './css/components/panel.css';
+@import './css/components/input.css';
+@import './css/components/callout.css';
 @import './css/components/link.css';
 @import './css/components/scrollbar.css';
 @import './css/components/state.css';
@@ -134,13 +129,16 @@
  * Class-based dark mode.
  * The `.dark` class on an ancestor toggles `dark:` utilities.
  */
-@variant dark (&:where(.dark, .dark *));
+@custom-variant dark (&:where(.dark, .dark *));
 
 /** Mobile */
 @custom-variant pointer-coarse (@media (pointer: coarse));
+
 /** Web */
 @custom-variant pointer-fine (@media (pointer: fine));
+
 /** Supports mouse/trackpad (Web) */
 @custom-variant hover-hover (@media (hover: hover));
+
 /** Active navigation */
 @custom-variant is-current (&[aria-current]:not([aria-current='false']));

package/src/plugins/ThemePlugin.ts

@@ -68,51 +68,61 @@ export const ThemePlugin = (options: ThemePluginOptions): Plugin[] => {
   // Trailing-edge debounce handle for theme CSS reloads (see `handleHotUpdate`).
   let themeReloadTimer: ReturnType<typeof setTimeout> | undefined;
 
+  // Under Vitest there is no HMR, and a live watcher leaks per-file `fs_event` handles: Tailwind's
+  // `@source` scan registers every scanned source file as a Vite watch dependency, and those handles
+  // are never released on close, hanging single-pass `vitest run` teardown. A non-null `server.watch`
+  // here also overrides the `watch: null` set by the test configs, so gate it: disable the watcher
+  // entirely under Vitest (`VITEST` is exported to the whole process tree), keep the HMR-ignore
+  // patterns for interactive `storybook dev` / `vite dev` (where `VITEST` is unset).
+  const isVitest = process.env.VITEST === 'true';
+
   const themePlugin: Plugin = {
     name: 'vite-plugin-dxos-ui-theme',
     config: (): UserConfig => {
       return {
         server: {
-          watch: {
-            // Stop build outputs from driving HMR — they are the root of the
-            // `main.css` HMR storm.
-            //
-            // Tailwind's `@source` scanning (see `src/main.css`) registers its
-            // scanned source files as Vite watch dependencies of the compiled
-            // theme CSS. Tailwind's own scanner respects `.gitignore` (and the
-            // `@source not` directives), so it never *scans* `dist/`. BUT the
-            // scanner hands Vite a coarse `dir-dependency` glob — e.g.
-            // `{**/*.html,**/*.ts,**/*.tsx}` — and Vite re-expands that glob
-            // itself, ignoring only `node_modules` (not `.gitignore`, not the
-            // `@source not` negations). The re-expansion therefore sweeps in
-            // every `packages/*/dist/**/*.d.ts` (`.d.ts` matches `**/*.ts`),
-            // making each emitted declaration file a watch-dependency of
-            // `main.css`. A single package rebuild emits dozens of `.d.ts` in a
-            // tight burst, and each write re-invalidates the theme — 40+ HMR
-            // pings for `main.css` in one second, repeating on every rebuild.
-            //
-            // Ignoring build outputs in the watcher is also semantically
-            // correct: in dev the workspace resolves `@dxos/*` via the `source`
-            // export condition (see `vite-plugin-import-source`), so `dist/`
-            // is never consumed at runtime and its churn should never trigger
-            // HMR. Vite concatenates these patterns with its built-in ignores
-            // (`**/node_modules/**`, `**/.git/**`, …), so this is purely
-            // additive.
-            //
-            // `<root>/.claude/**` covers agent worktrees checked out under the
-            // repo root (`.claude/worktrees/<name>/packages/**`): they are full
-            // source copies, so the glob re-expansion above sweeps them in and
-            // every agent-side edit burst or checkout invalidates the theme in
-            // the user's dev server. The pattern is anchored at the resolved
-            // repo root (not `**/.claude/**`) because chokidar matches against
-            // absolute paths — a bare pattern would match *everything* when the
-            // dev server itself runs from inside a worktree whose path contains
-            // a `.claude` segment. `*.log` covers runtime log sinks (e.g.
-            // vite-plugin-log's `app.log` in the app root), which are appended
-            // continuously at runtime and must never feed back into the
-            // watcher.
-            ignored: ['**/dist/**', '**/out/**', '**/*.log', `${resolve(import.meta.dirname, ROOT, '.claude')}/**`],
-          },
+          watch: isVitest
+            ? null
+            : {
+                // Stop build outputs from driving HMR — they are the root of the
+                // `main.css` HMR storm.
+                //
+                // Tailwind's `@source` scanning (see `src/main.css`) registers its
+                // scanned source files as Vite watch dependencies of the compiled
+                // theme CSS. Tailwind's own scanner respects `.gitignore` (and the
+                // `@source not` directives), so it never *scans* `dist/`. BUT the
+                // scanner hands Vite a coarse `dir-dependency` glob — e.g.
+                // `{**/*.html,**/*.ts,**/*.tsx}` — and Vite re-expands that glob
+                // itself, ignoring only `node_modules` (not `.gitignore`, not the
+                // `@source not` negations). The re-expansion therefore sweeps in
+                // every `packages/*/dist/**/*.d.ts` (`.d.ts` matches `**/*.ts`),
+                // making each emitted declaration file a watch-dependency of
+                // `main.css`. A single package rebuild emits dozens of `.d.ts` in a
+                // tight burst, and each write re-invalidates the theme — 40+ HMR
+                // pings for `main.css` in one second, repeating on every rebuild.
+                //
+                // Ignoring build outputs in the watcher is also semantically
+                // correct: in dev the workspace resolves `@dxos/*` via the `source`
+                // export condition (see `vite-plugin-import-source`), so `dist/`
+                // is never consumed at runtime and its churn should never trigger
+                // HMR. Vite concatenates these patterns with its built-in ignores
+                // (`**/node_modules/**`, `**/.git/**`, …), so this is purely
+                // additive.
+                //
+                // `<root>/.claude/**` covers agent worktrees checked out under the
+                // repo root (`.claude/worktrees/<name>/packages/**`): they are full
+                // source copies, so the glob re-expansion above sweeps them in and
+                // every agent-side edit burst or checkout invalidates the theme in
+                // the user's dev server. The pattern is anchored at the resolved
+                // repo root (not `**/.claude/**`) because chokidar matches against
+                // absolute paths — a bare pattern would match *everything* when the
+                // dev server itself runs from inside a worktree whose path contains
+                // a `.claude` segment. `*.log` covers runtime log sinks (e.g.
+                // vite-plugin-log's `app.log` in the app root), which are appended
+                // continuously at runtime and must never feed back into the
+                // watcher.
+                ignored: ['**/dist/**', '**/out/**', '**/*.log', `${resolve(import.meta.dirname, ROOT, '.claude')}/**`],
+              },
         },
         css: {
           postcss: {

package/src/plugins/main.css

@@ -24,7 +24,7 @@ body {
 }
 
 /* Pre-CSS color fallbacks so text is readable before and during Vite HMR. */
-/* Values are intentionally kept in sync with @theme tokens in semantic.css:
+/* Values are intentionally kept in sync with @theme tokens in theme/surfaces.css:
  *   color            ← --color-base-fg      = light-dark(neutral-950, neutral-150)
  *   background-color ← --color-base-surface = elevation-3 = light-dark(neutral-125, neutral-850)
  * The literals carry the ramp tint (chroma 0.001, hue 190) so first paint matches the loaded theme. */

package/src/tokens.css

@@ -0,0 +1,22 @@
+/**
+ * Design tokens, for stylesheets compiled outside this repo.
+ *
+ * A plugin loaded from the registry is not scanned by the host's Tailwind build, so it compiles its
+ * own stylesheet and must be able to generate every utility it uses — including token-backed ones
+ * like `bg-base-surface`. Importing this registers the token names with Tailwind so those utilities
+ * resolve; the values themselves still come from the host at runtime, which is what keeps a plugin
+ * following the active theme.
+ *
+ * Tokens only — no base, component, or layout rules, which the host already applies.
+ *
+ * `main.css` imports this too, so the host and external plugins compile against one token set.
+ */
+
+@import './css/theme/animation.css';
+@import './css/theme/border.css';
+@import './css/theme/palette.css';
+@import './css/theme/roles.css';
+@import './css/theme/spacing.css';
+@import './css/theme/styles.css';
+@import './css/theme/surfaces.css';
+@import './css/theme/text.css';

package/dist/types/src/fragments/density.d.ts

@@ -1,4 +0,0 @@
-import { type Density } from '@dxos/ui-types';
-export declare const densityDimensions: (density?: Density) => "min-h-[1.5rem] px-1" | "min-h-[1.75rem] px-1.5" | "min-h-[2.5rem] pointer-fine:min-h-[2rem] px-2" | "min-h-[2.5rem] px-3";
-export declare const densityBlockSize: (density?: Density) => "min-h-[1.5rem]" | "min-h-[1.75rem]" | "min-h-[2.5rem]" | "min-h-[2.5rem] pointer-fine:min-h-[2rem]";
-//# sourceMappingURL=density.d.ts.map

package/dist/types/src/fragments/density.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"density.d.ts","sourceRoot":"","sources":["../../../../src/fragments/density.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAY9C,eAAO,MAAM,iBAAiB,aAAa,OAAO,+HAYjD,CAAC;AAEF,eAAO,MAAM,gBAAgB,aAAa,OAAO,yGAYhD,CAAC"}

package/src/css/components/panel.css

@@ -1,117 +0,0 @@
-/**
- * Panel — applies bg-{hue}-surface / text-{hue}-fg / border-{hue}-border tokens via data-hue attribute or BEM modifier.
- * Example: <div className='dx-panel' data-hue='blue'>...</div>
- * Example: <div className='dx-panel dx-panel--blue'>...</div>
- */
-
-@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;
-  }
-
-  [data-hue='error'] .dx-panel,
-  .dx-panel--error {
-    @apply bg-error-surface text-error-fg border-error-border;
-  }
-}