@godxjp/ui 28.13.0 → 30.0.0

package/docs/themes/neubrutalism.css

@@ -0,0 +1,475 @@
+/**
+ * neubrutalism theme — the FOURTH theme, and the one chosen to break the token model rather than
+ * to flatter it.
+ *
+ * Reference: https://neubrutalism.com/. The style is defined by four moves, and they were picked
+ * for this lab because three of them are things no theme here had asked the API for before:
+ *
+ *   1. square corners            — `flat.css` already proved this one, at 68 declarations
+ *   2. THICK BLACK BORDERS       — new axis: nothing had tried to change a stroke WIDTH
+ *   3. HARD OFFSET SHADOWS       — new: a shadow with no blur and full alpha, used as structure
+ *   4. SATURATED OPAQUE FILLS    — the exact opposite of `glassmorphism.css`
+ *
+ * SAME CONSTRAINT AS `flat.css` AND `glassmorphism.css`, no exceptions: every line below is a
+ * `--custom-property` declaration under `[data-theme-style="neubrutalism"]`. No `border:`, no
+ * `box-shadow:`, no `border-radius:`, no selector into a `.ui-*` class. Where the look cannot be
+ * expressed that way the RESULT is the finding — `measure-glass.mjs` says which, not this comment.
+ *
+ * ── FINDING A · the `:root` freeze is not a radius quirk, it runs on the STROKE axis too ──────
+ * `flat.css` FINDING 1 records that squaring the corners costs 68 declarations because `--radius`,
+ * its six derived steps and 61 component mirrors are all `:root`-bound. Thickening the borders is
+ * the same shape on a different scale, and finding it a second time is what makes it a PROPERTY of
+ * the token model rather than an accident of one family:
+ *
+ *   `--stroke-hairline … --stroke-2xl` is a real six-step foundation scale (foundation.css:814-819)
+ *   and 44 component knobs read it as `--x: var(--stroke-y)`. Every one of those 44 is declared at
+ *   `:root`, so it substitutes against the ROOT's `--stroke-hairline` and inherits the frozen 1px
+ *   into this scope no matter what the scale says here.
+ *
+ * So the scale is restated AND the mirrors are restated, exactly as the radius family needs both.
+ *
+ * ── FINDING B · and under the mirrors, 107 border widths that are not tokens at all ───────────
+ * The 44 stroke mirrors are the reachable part. Counted across `src/styles/*.css` and
+ * `src/tokens/components/*.css`:
+ *
+ *   107  literal border widths  —  `border: 1px solid hsl(var(--border))` and friends
+ *
+ * The COLOUR in those rules is a token; the WIDTH beside it is a literal. That asymmetry is the
+ * finding: a theme can recolour every border in the library and cannot thicken most of them, so
+ * the single most defining property of this style is the one the API reaches least. Nothing is
+ * worked around here — the thick borders below land where a token exists and nowhere else, and
+ * the measurement is what shows which those are.
+ *
+ * ── FINDING C · shadows came through, and gh#880 is why ───────────────────────────────────────
+ * This theme needs a shadow that is pure structure — no blur, full alpha, hard offset — which is
+ * the furthest thing from what the six foundation steps ship. It works, in one restatement each,
+ * because gh#880 turned `--card-shadow` / `--sheet-shadow` / `--popover-shadow` / `--tooltip-shadow`
+ * / `--segmented-item-selected-shadow` into `initial` knobs that read the foundation step at the
+ * CALL site instead of freezing it at `:root`. Five mirrors are still frozen `var(--shadow-*)`
+ * bindings and take one line each, and they are listed as such.
+ *
+ * That contrast is the useful part: the shadow family was fixed and the stroke family was not, so
+ * this file shows the same model succeeding and failing on two axes at once. The fix shape is
+ * known and it is `initial`.
+ *
+ * ── FINDING D · this theme does not need gh#887's ink walk, and that is a result, not luck ────
+ * `flat.css` FINDING 1b records that seed-derived navigation ink fails AA at both ends of the seed
+ * range on a light canvas. Neubrutalism sidesteps it by construction: the seed paints FILLS, never
+ * ink. Every string on this theme is near-black on a light fill or near-white on a dark one, so
+ * the brand colour never has to carry a contrast contract. It is worth writing down because it is
+ * the cheapest known answer to gh#887 — not "derive safer ink", but "do not use the seed as ink" —
+ * and it costs the theme nothing it wanted.
+ *
+ * ── FINDING E · no translucency, so no fallback is owed ───────────────────────────────────────
+ * docs/TOKEN-RESOLUTION.md §5 puts `prefers-reduced-transparency` and `@supports not
+ * (backdrop-filter)` on the theme that made a surface translucent. Every alpha below is 100% and
+ * no blur knob is turned on. The absence is the proof, same as `flat.css` FINDING 4.
+ */
+[data-theme-style="neubrutalism"] {
+  /* ── Corners. Same 68 declarations `flat.css` FINDING 1 costs, for the same reason:
+   *    `--radius` and its six steps are `:root`-bound and so are 61 component mirrors, so
+   *    one design decision is 68 lines in every theme that makes it. List generated, not
+   *    hand-kept — see the docblock. ───────────────────────────────────────────────────── */
+  --radius: 0;
+  --radius-xs: 0;
+  --radius-sm: 0;
+  --radius-md: 0;
+  --radius-lg: 0;
+  --radius-xl: 0;
+  --radius-2xl: 0;
+
+  --actions-radius: 0;
+  --app-launcher-launchpad-mark-radius: 0;
+  --app-launcher-launchpad-tile-radius: 0;
+  --app-launcher-mark-radius: 0;
+  --app-launcher-tile-radius: 0;
+  --attachments-card-radius: 0;
+  --avatar-square-radius: 0;
+  --badge-radius: 0;
+  --button-radius: 0;
+  --calendar-day-radius: 0;
+  --calendar-weekday-radius: 0;
+  --card-radius: 0;
+  --card-service-launcher-icon-radius: 0;
+  --cascader-result-radius: 0;
+  --chart-trend-bar-radius: 0;
+  --chat-bubble-radius: 0;
+  --code-block-radius: 0;
+  --control-affix-action-radius: 0;
+  --control-radius: 0;
+  --conversations-item-radius: 0;
+  --descriptions-border-radius: 0;
+  --draggable-panel-radius: 0;
+  --float-button-group-radius: 0;
+  --legal-document-toc-item-radius: 0;
+  --logo-radius: 0;
+  --mega-menu-link-radius: 0;
+  --mega-menu-panel-radius: 0;
+  --mega-menu-trigger-radius: 0;
+  --menu-item-radius: 0;
+  --popover-radius: 0;
+  --progress-breakdown-radius: 0;
+  --prose-code-radius: 0;
+  --prose-image-radius: 0;
+  --radius: 0;
+  --radius-2xl: 0;
+  --radius-lg: 0;
+  --radius-md: 0;
+  --radius-sm: 0;
+  --radius-xl: 0;
+  --radius-xs: 0;
+  --segmented-item-radius: 0;
+  --segmented-track-radius: 0;
+  --skeleton-element-radius: 0;
+  --skeleton-radius: 0;
+  --slider-tooltip-radius: 0;
+  --stat-card-icon-radius: 0;
+  --steps-nav-radius: 0;
+  --table-skeleton-radius: 0;
+  --tabs-add-radius: 0;
+  --tabs-card-radius: 0;
+  --tabs-overflow-radius: 0;
+  --tabs-tab-remove-radius: 0;
+  --thought-chain-item-radius: 0;
+  --thumbnail-radius: 0;
+  --time-picker-option-radius: 0;
+  --timeline-grid-event-radius: 0;
+  --tooltip-radius: 0;
+  --transfer-pane-radius: 0;
+  --transfer-row-radius: 0;
+  --tree-node-radius: 0;
+  --tree-select-row-radius: 0;
+  --upload-draft-radius: 0;
+  --upload-dropzone-radius: 0;
+  --upload-picture-badge-radius: 0;
+  --upload-picture-radius: 0;
+  --upload-row-radius: 0;
+  --upload-tile-radius: 0;
+  --welcome-radius: 0;
+
+  /* ── THE STROKE SCALE, and the second axis the `:root` freeze runs on. ─────────────────────
+   *    `--stroke-hairline … --stroke-2xl` is a real foundation scale (foundation.css:814-819) and
+   *    44 component knobs read it. Restating the scale here reaches only the rules that read
+   *    `var(--stroke-*)` DIRECTLY; the 44 knobs are `--x: var(--stroke-y)` declared at `:root`, so
+   *    they froze against the root's values exactly as the radius family does. Both halves are
+   *    below, and `measure-glass.mjs` is what says which of them moved. */
+  --stroke-hairline: 3px;
+  --stroke-sm: 3px;
+  --stroke-md: 4px;
+  --stroke-lg: 5px;
+  --stroke-xl: 6px;
+  --stroke-2xl: 8px;
+
+  /* The 22 frozen EDGE mirrors this theme used to restate are GONE (gh#906): they are `initial`
+   * knobs now and read the stroke scale above at their call sites, so the six lines above are the
+   * whole of it. Deleting them and measuring 563/563 unchanged is the acceptance test that issue
+   * asked for. The other 21 stroke mirrors are a caret, a bar size, a progress ring or a tone rail
+   * — reachable now too, and deliberately left at their own steps, because thickening those would
+   * change what they MEAN (`flat.css` FINDING 2, on this axis). */
+
+  /* ── SHADOWS AS STRUCTURE. No blur, full alpha, hard offset — the move that makes the style
+   *    read as "pasted paper". The six foundation steps are restated; five frozen mirrors follow
+   *    (FINDING C). `--shadow-color` is already `0 0 0`, so `rgb(var(--shadow-color))` at no alpha
+   *    is the pure black this needs. ─────────────────────────────────────────────────────────── */
+  --shadow-xs: 2px 2px 0 rgb(var(--shadow-color));
+  --shadow-sm: 3px 3px 0 rgb(var(--shadow-color));
+  --shadow-md: 4px 4px 0 rgb(var(--shadow-color));
+  --shadow-lg: 6px 6px 0 rgb(var(--shadow-color));
+  --shadow-xl: 8px 8px 0 rgb(var(--shadow-color));
+  --shadow-2xl: 12px 12px 0 rgb(var(--shadow-color));
+
+  --app-launcher-launchpad-mark-shadow: 4px 4px 0 rgb(var(--shadow-color));
+  --card-hover-shadow: 8px 8px 0 rgb(var(--shadow-color));
+  --control-shadow: 3px 3px 0 rgb(var(--shadow-color));
+  --draggable-panel-shadow: 6px 6px 0 rgb(var(--shadow-color));
+  --float-button-shadow: 6px 6px 0 rgb(var(--shadow-color));
+  --mega-menu-panel-shadow: 6px 6px 0 rgb(var(--shadow-color));
+
+  /* ── SURFACES. Opaque paper, pure-black edges. The border is doing the work a shadow does in
+   *    the default theme and a blur does in glass, so it is pure black rather than a hairline
+   *    grey — at anything lighter the style stops reading. ─────────────────────────────────── */
+  --card-background: 0 0% 100%;
+  --card: 0 0% 100%;
+  --popover: 0 0% 100%;
+  --border: 0 0% 0%;
+  --input: 0 0% 0%;
+
+  /* ── INK. Near-black throughout. Solved against `--accent`, the DARKEST fill this theme
+   *    declares (the worst case for a dark ink), using the same sRGB relative-luminance formula
+   *    `measure-glass.mjs` uses. Worst case is the seed-tinted `--accent` at L 88%, whose darkest
+   *    realisation across the five SEEDS is a blue hue at luminance 0.572:
+   *      --foreground        0%   → 15.9:1    --muted-foreground  18%  → 8.06:1
+   *      --text-tertiary     26%  →  5.95:1   brand ink           16%  → 5.91:1
+   *    All clear the 4.5:1 text floor; on `--card` (white) every one is higher. ─────────────── */
+  --foreground: 0 0% 0%;
+  --card-foreground: 0 0% 0%;
+  --popover-foreground: 0 0% 0%;
+  --muted-foreground: 0 0% 18%;
+  --text-tertiary: 0 0% 26%;
+
+  /* ── FILLS. Literal fallbacks; the `@supports` block below re-derives all four from the seed.
+   *    Saturated and LIGHT, because FINDING D depends on it: black ink on a light fill needs no
+   *    contrast contract, so the seed can be as loud as the style wants. ───────────────────── */
+  --background: 48 100% 95%;
+  --muted: 48 60% 90%;
+  --accent: 48 90% 88%;
+  --secondary: 48 80% 90%;
+  --app-shell-main-background: hsl(48 100% 95%);
+
+  /* ── BRAND INK. Hue from the seed, lightness clamped (FINDING D): these roles exist, so they
+   *    are set rather than left to the seed walk, but nothing in this theme relies on them
+   *    carrying the brand at a readable ratio. Same two value FORMS as `flat.css` — a token read
+   *    inside `hsl()` takes a bare triplet, one read as a complete value takes a whole `hsl(...)`,
+   *    and getting it backwards fails silently. ──────────────────────────────────────────────── */
+  --text-link: 48 90% 16%;
+  --text-brand: 48 90% 16%;
+  --text-primary: 48 90% 14%;
+  --anchor-ink-color: 48 90% 16%;
+  --auth-shell-divider-label-color: 0 0% 18%;
+  --org-switcher-meta-foreground: 0 0% 18%;
+  --separator-label-color: 0 0% 18%;
+  --sidebar-item-active-foreground: hsl(48 90% 14%);
+  --sidebar-nav-icon-active-foreground: hsl(48 90% 14%);
+  --mega-menu-trigger-current-foreground: hsl(48 90% 14%);
+  --mega-menu-trigger-open-foreground: hsl(48 90% 14%);
+  --mega-menu-link-current-foreground: hsl(48 90% 14%);
+  --timeline-grid-event-muted-color: hsl(0 0% 18%);
+
+  /* ── FOCUS. Pure black and THICK — the one place this style and WCAG 2.2 SC 2.4.11 want the
+   *    same thing. Pinned off the brand for the reason `flat.css` gives: a ring that follows the
+   *    seed is invisible for a `#FFD400` tenant. ───────────────────────────────────────────── */
+  --focus-ring-color: 0 0% 0%;
+  --focus-outline-color: 0 0% 0%;
+  --focus-ring-glow-color: 0 0% 0%;
+  --control-outline: 0 0% 0%;
+  --focus-ring-width: calc(3px * var(--focus-outline));
+  --region-focus-ring-color: hsl(0 0% 0%);
+
+  /* ── INTERACTION STATES. The canonical neubrutalism hover is the element pressing INTO its
+   *    shadow — a transform, which no token expresses and which is therefore not attempted here.
+   *    What is left is the fill, so a hover is a firmly DARKER step of the same seed rather than a
+   *    wash: at this saturation a 4% step is invisible. The ink never drops its ratio to signal a
+   *    state (docs/GLASSMORPHISM-STANDARD.md §3). ──────────────────────────────────────────── */
+  --topbar-item-hover-background: 48 90% 80%;
+  --topbar-item-hover-color: 0 0% 0%;
+  --segmented-item-hover-background: 48 90% 80%;
+  --segmented-item-hover-color: 0 0% 0%;
+  --segmented-item-active-background: 48 90% 72%;
+  --app-launcher-tile-hover-background: 48 90% 80%;
+  --app-launcher-tile-hover-color: 0 0% 0%;
+  --control-variant-filled-hover-background: 48 90% 80%;
+  --choice-button-selected-color: 0 0% 0%;
+  --choice-button-selected-border-color: 0 0% 0%;
+  --secondary-hover: 48 80% 80%;
+  --secondary-active: 48 80% 72%;
+
+  --menu-item-hover-background: hsl(48 90% 82%);
+  --menu-item-hover-foreground: hsl(0 0% 0%);
+  --table-row-hover-background: hsl(48 90% 86%);
+  --table-row-selected-background: hsl(48 90% 78%);
+  --tree-node-hover-background: hsl(48 90% 86%);
+  --tree-node-selected-background: hsl(48 90% 78%);
+  --tree-node-selected-foreground: hsl(0 0% 0%);
+  --mega-menu-trigger-hover-background: hsl(48 90% 82%);
+  --mega-menu-trigger-hover-foreground: hsl(0 0% 0%);
+  --mega-menu-link-hover-background: hsl(48 90% 82%);
+  --mega-menu-link-hover-foreground: hsl(0 0% 0%);
+  --sidebar-nav-item-hover-foreground: hsl(0 0% 0%);
+  --sidebar-nav-icon-hover-foreground: hsl(0 0% 0%);
+  --conversations-item-active-background: hsl(48 90% 78%);
+  --conversations-item-active-color: hsl(0 0% 0%);
+  --tabs-count-active-background: hsl(48 90% 74%);
+  --tabs-count-active-color: hsl(0 0% 0%);
+  --toggle-soft-hover-background: hsl(48 90% 84%);
+  --toggle-pressed-count-background: hsl(48 90% 74%);
+  --toggle-pressed-count-color: hsl(0 0% 0%);
+  --toggle-pressed-border-color: hsl(0 0% 0%);
+  --switch-unchecked-background: hsl(0 0% 72%);
+  --switch-content-unchecked-foreground: hsl(0 0% 12%);
+
+  --text-action-color: hsl(0 0% 0%);
+  --text-action-color-hover: hsl(0 0% 18%);
+}
+
+/* Seed-derived fills. The literals above stand where relative colour is unsupported. Only the
+ * HUE follows the seed — every lightness is pinned, because lightness is not luminance and one
+ * clamp cannot serve the hue circle (the number `flat.css` had to move twice). Solved with the
+ * sRGB formula against all five `SEEDS` from `docs/themes/index.ts`: worst case is the violet
+ * seed's `--accent`, where `--text-tertiary` reads 6.35:1. */
+@supports (color: hsl(from red h s l)) {
+  [data-theme-style="neubrutalism"] {
+    --background: from hsl(var(--primary)) h 100% 95%;
+    --muted: from hsl(var(--primary)) h 60% 90%;
+    --accent: from hsl(var(--primary)) h 90% 88%;
+    --secondary: from hsl(var(--primary)) h 80% 90%;
+    --app-shell-main-background: hsl(from hsl(var(--primary)) h 100% 95%);
+
+    --text-link: from hsl(var(--primary)) h 90% 16%;
+    --text-brand: from hsl(var(--primary)) h 90% 16%;
+    --text-primary: from hsl(var(--primary)) h 90% 14%;
+    --anchor-ink-color: from hsl(var(--primary)) h 90% 16%;
+    --sidebar-item-active-foreground: hsl(from hsl(var(--primary)) h 90% 14%);
+    --sidebar-nav-icon-active-foreground: hsl(from hsl(var(--primary)) h 90% 14%);
+    --mega-menu-trigger-current-foreground: hsl(from hsl(var(--primary)) h 90% 14%);
+    --mega-menu-trigger-open-foreground: hsl(from hsl(var(--primary)) h 90% 14%);
+    --mega-menu-link-current-foreground: hsl(from hsl(var(--primary)) h 90% 14%);
+
+    --topbar-item-hover-background: from hsl(var(--primary)) h 90% 80%;
+    --segmented-item-hover-background: from hsl(var(--primary)) h 90% 80%;
+    --segmented-item-active-background: from hsl(var(--primary)) h 90% 72%;
+    --app-launcher-tile-hover-background: from hsl(var(--primary)) h 90% 80%;
+    --control-variant-filled-hover-background: from hsl(var(--primary)) h 90% 80%;
+    --secondary-hover: from hsl(var(--primary)) h 80% 80%;
+    --secondary-active: from hsl(var(--primary)) h 80% 72%;
+
+    --menu-item-hover-background: hsl(from hsl(var(--primary)) h 90% 82%);
+    --table-row-hover-background: hsl(from hsl(var(--primary)) h 90% 86%);
+    --table-row-selected-background: hsl(from hsl(var(--primary)) h 90% 78%);
+    --tree-node-hover-background: hsl(from hsl(var(--primary)) h 90% 86%);
+    --tree-node-selected-background: hsl(from hsl(var(--primary)) h 90% 78%);
+    --mega-menu-trigger-hover-background: hsl(from hsl(var(--primary)) h 90% 82%);
+    --mega-menu-link-hover-background: hsl(from hsl(var(--primary)) h 90% 82%);
+    --conversations-item-active-background: hsl(from hsl(var(--primary)) h 90% 78%);
+    --tabs-count-active-background: hsl(from hsl(var(--primary)) h 90% 74%);
+    --toggle-soft-hover-background: hsl(from hsl(var(--primary)) h 90% 84%);
+    --toggle-pressed-count-background: hsl(from hsl(var(--primary)) h 90% 74%);
+  }
+}
+
+/**
+ * The dark polarity. Same gh#896 shape as `flat.css` FINDING 5 and the same fix: the selector
+ * pair mirrors the library's own `.dark, :root[data-theme="dark"]` so this is the SAME div matched
+ * at (0,2,0), beating the base rule's (0,1,0) on every property it restates — and leaving the 68
+ * radius lines, the 22 stroke lines and the shadow geometry flowing from the base rule untouched,
+ * because the cascade resolves per PROPERTY, not per rule.
+ *
+ * `--shadow-color` inverts to white. A hard black shadow on a black canvas is not a subtle shadow,
+ * it is no shadow — the offset is the whole device here, so it has to be the thing the canvas is
+ * not. This is the one token in the file whose DARK value is not a lightness step of its light
+ * value, and it is why the shadow family being themeable (FINDING C) mattered twice over.
+ *
+ * Ink solved against `--accent` again — in dark it is the LIGHTEST fill and so the worst case for
+ * a light ink, the inverse of the light block. Across all five seeds the worst is the citron
+ * seed: `--text-tertiary` 4.84:1, `--muted-foreground` 5.90:1, `--foreground` 7.77:1.
+ */
+.dark [data-theme-style="neubrutalism"],
+[data-theme="dark"] [data-theme-style="neubrutalism"] {
+  --shadow-color: 255 255 255;
+
+  --card-background: 0 0% 14%;
+  --card: 0 0% 14%;
+  --popover: 0 0% 14%;
+  --border: 0 0% 100%;
+  --input: 0 0% 100%;
+
+  --foreground: 0 0% 100%;
+  --card-foreground: 0 0% 100%;
+  --popover-foreground: 0 0% 100%;
+  --muted-foreground: 0 0% 88%;
+  --text-tertiary: 0 0% 80%;
+
+  --background: 0 0% 8%;
+  --muted: 48 60% 16%;
+  --accent: 48 90% 20%;
+  --secondary: 48 80% 18%;
+  --app-shell-main-background: hsl(0 0% 8%);
+
+  --text-link: 48 90% 86%;
+  --text-brand: 48 90% 86%;
+  --text-primary: 48 90% 90%;
+  --anchor-ink-color: 48 90% 86%;
+  --auth-shell-divider-label-color: 0 0% 88%;
+  --org-switcher-meta-foreground: 0 0% 88%;
+  --separator-label-color: 0 0% 88%;
+  --sidebar-item-active-foreground: hsl(48 90% 90%);
+  --sidebar-nav-icon-active-foreground: hsl(48 90% 90%);
+  --mega-menu-trigger-current-foreground: hsl(48 90% 90%);
+  --mega-menu-trigger-open-foreground: hsl(48 90% 90%);
+  --mega-menu-link-current-foreground: hsl(48 90% 90%);
+  --timeline-grid-event-muted-color: hsl(0 0% 88%);
+
+  --focus-ring-color: 0 0% 100%;
+  --focus-outline-color: 0 0% 100%;
+  --focus-ring-glow-color: 0 0% 100%;
+  --control-outline: 0 0% 100%;
+  --region-focus-ring-color: hsl(0 0% 100%);
+
+  --topbar-item-hover-background: 48 90% 22%;
+  --topbar-item-hover-color: 0 0% 100%;
+  --segmented-item-hover-background: 48 90% 22%;
+  --segmented-item-hover-color: 0 0% 100%;
+  --segmented-item-active-background: 48 90% 26%;
+  --app-launcher-tile-hover-background: 48 90% 22%;
+  --app-launcher-tile-hover-color: 0 0% 100%;
+  --control-variant-filled-hover-background: 48 90% 22%;
+  --choice-button-selected-color: 0 0% 100%;
+  --choice-button-selected-border-color: 0 0% 100%;
+  --secondary-hover: 48 80% 22%;
+  --secondary-active: 48 80% 26%;
+
+  --menu-item-hover-background: hsl(48 90% 26%);
+  --menu-item-hover-foreground: hsl(0 0% 100%);
+  --table-row-hover-background: hsl(48 90% 22%);
+  --table-row-selected-background: hsl(48 90% 26%);
+  --tree-node-hover-background: hsl(48 90% 22%);
+  --tree-node-selected-background: hsl(48 90% 26%);
+  --tree-node-selected-foreground: hsl(0 0% 100%);
+  --mega-menu-trigger-hover-background: hsl(48 90% 26%);
+  --mega-menu-trigger-hover-foreground: hsl(0 0% 100%);
+  --mega-menu-link-hover-background: hsl(48 90% 26%);
+  --mega-menu-link-hover-foreground: hsl(0 0% 100%);
+  --sidebar-nav-item-hover-foreground: hsl(0 0% 100%);
+  --sidebar-nav-icon-hover-foreground: hsl(0 0% 100%);
+  --conversations-item-active-background: hsl(48 90% 26%);
+  --conversations-item-active-color: hsl(0 0% 100%);
+  --tabs-count-active-background: hsl(48 90% 26%);
+  --tabs-count-active-color: hsl(0 0% 100%);
+  --toggle-soft-hover-background: hsl(48 90% 24%);
+  --toggle-pressed-count-background: hsl(48 90% 26%);
+  --toggle-pressed-count-color: hsl(0 0% 100%);
+  --toggle-pressed-border-color: hsl(0 0% 100%);
+  --switch-unchecked-background: hsl(0 0% 40%);
+  --switch-content-unchecked-foreground: hsl(0 0% 96%);
+
+  --text-action-color: hsl(0 0% 100%);
+  --text-action-color-hover: hsl(0 0% 88%);
+}
+
+@supports (color: hsl(from red h s l)) {
+  .dark [data-theme-style="neubrutalism"],
+  [data-theme="dark"] [data-theme-style="neubrutalism"] {
+    --muted: from hsl(var(--primary)) h 60% 16%;
+    --accent: from hsl(var(--primary)) h 90% 20%;
+    --secondary: from hsl(var(--primary)) h 80% 18%;
+
+    --text-link: from hsl(var(--primary)) h 90% 86%;
+    --text-brand: from hsl(var(--primary)) h 90% 86%;
+    --text-primary: from hsl(var(--primary)) h 90% 90%;
+    --anchor-ink-color: from hsl(var(--primary)) h 90% 86%;
+    --sidebar-item-active-foreground: hsl(from hsl(var(--primary)) h 90% 90%);
+    --sidebar-nav-icon-active-foreground: hsl(from hsl(var(--primary)) h 90% 90%);
+    --mega-menu-trigger-current-foreground: hsl(from hsl(var(--primary)) h 90% 90%);
+    --mega-menu-trigger-open-foreground: hsl(from hsl(var(--primary)) h 90% 90%);
+    --mega-menu-link-current-foreground: hsl(from hsl(var(--primary)) h 90% 90%);
+
+    --topbar-item-hover-background: from hsl(var(--primary)) h 90% 22%;
+    --segmented-item-hover-background: from hsl(var(--primary)) h 90% 22%;
+    --segmented-item-active-background: from hsl(var(--primary)) h 90% 26%;
+    --app-launcher-tile-hover-background: from hsl(var(--primary)) h 90% 22%;
+    --control-variant-filled-hover-background: from hsl(var(--primary)) h 90% 22%;
+    --secondary-hover: from hsl(var(--primary)) h 80% 22%;
+    --secondary-active: from hsl(var(--primary)) h 80% 26%;
+
+    --menu-item-hover-background: hsl(from hsl(var(--primary)) h 90% 26%);
+    --table-row-hover-background: hsl(from hsl(var(--primary)) h 90% 22%);
+    --table-row-selected-background: hsl(from hsl(var(--primary)) h 90% 26%);
+    --tree-node-hover-background: hsl(from hsl(var(--primary)) h 90% 22%);
+    --tree-node-selected-background: hsl(from hsl(var(--primary)) h 90% 26%);
+    --mega-menu-trigger-hover-background: hsl(from hsl(var(--primary)) h 90% 26%);
+    --mega-menu-link-hover-background: hsl(from hsl(var(--primary)) h 90% 26%);
+    --conversations-item-active-background: hsl(from hsl(var(--primary)) h 90% 26%);
+    --tabs-count-active-background: hsl(from hsl(var(--primary)) h 90% 26%);
+    --toggle-soft-hover-background: hsl(from hsl(var(--primary)) h 90% 24%);
+    --toggle-pressed-count-background: hsl(from hsl(var(--primary)) h 90% 26%);
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "28.13.0",
-  "godxUiMcp": "28.13.0",
+  "version": "30.0.0",
+  "godxUiMcp": "30.0.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -38,6 +38,7 @@
     "scripts/postinstall.mjs",
     "scripts/_agent-setup.mjs",
     "scripts/cli.mjs",
+    "scripts/explain-token.mjs",
     "docs"
   ],
   "main": "./dist/index.js",
@@ -392,7 +393,7 @@
     "lint:fix": "eslint . --fix",
     "postinstall": "node scripts/postinstall.mjs",
     "prepublishOnly": "pnpm run build",
-    "preview": "node preview/scripts/kill-port.mjs && vite --config preview/vite.config.ts --port 6008 --strictPort",
+    "preview": "PORT=$(node preview/scripts/preview-port.mjs) && node preview/scripts/kill-port.mjs $PORT && echo \"preview: http://localhost:$PORT\" && vite --config preview/vite.config.ts --port $PORT --strictPort",
     "preview:build": "vite build --config preview/vite.config.ts && node scripts/gen-registry.mjs && node scripts/copy-agent-catalog.mjs",
     "regen": "node scripts/regen-generated.mjs",
     "release": "node scripts/release.mjs",