@eifi1/ui-kit 0.9.0 → 0.10.0

package/src/index.ts

@@ -96,6 +96,8 @@ export * from "./components/danger-confirm";
 export * from "./components/confirm-dialog";
 // A non-modal corner panel and its round trigger (keksdose's assistant launcher).
 export * from "./components/floating-panel";
+// The count / clear / actions bar a selection brings up (keksdose's three copies).
+export * from "./components/bulk-action-bar";
 export * from "./components/swatch-picker";
 export * from "./components/icon-picker";
 export * from "./components/choice-card";
@@ -151,6 +153,30 @@ export * from "./components/separator";
 // Named: scroll-area.tsx also holds the overflow hook and scrollbar class Table shares.
 export { ScrollArea } from "./components/scroll-area";
 export type { ScrollAreaProps } from "./components/scroll-area";
+// 0.10.0 rows, menu rows, text primitives and page chrome the apps drew by hand.
+export * from "./components/list";
+export * from "./components/menu-item";
+export * from "./components/text";
+export * from "./components/status-dot";
+export * from "./components/page-header";
+export * from "./components/breadcrumbs";
+// The toast layer over sonner (an OPTIONAL peer, loaded lazily): `toast` mirrors sonner's
+// API so apps migrate by swapping the import; `<Toaster>` carries the placement, theme,
+// tones and z-index both apps had wired by hand.
+export { toast, Toaster, DEFAULT_TOAST_LABELS, TOAST_ACTION_DURATION } from "./components/toast";
+export type {
+  ToastId,
+  ToastAction,
+  ToastOptions,
+  ToastPromiseOptions,
+  ToastUndoOptions,
+  ToastRedoOptions,
+  ToastLabels,
+  ToastPosition,
+  ToastSwipeDirection,
+  ToasterOffset,
+  ToasterProps,
+} from "./components/toast";
 
 // ── data-table suite ─────────────────────────────────────────────────────────
 export * from "./components/data-table-labels";

package/src/lib/clipping.ts

@@ -0,0 +1,16 @@
+/** Internal (not exported from the package): the Tooltip's auto-portal check. */
+
+/** Whether anything between `el` and `<body>` clips or scrolls its content — the
+ *  containers an absolutely positioned bubble would be cut off by, or would widen.
+ *  `<body>` and `<html>` are not counted: their `overflow` belongs to the viewport (a
+ *  dialog's scroll lock sets it), and the viewport clips a portalled bubble just the
+ *  same. */
+export function hasClippingAncestor(el: Element | null): boolean {
+  if (typeof window === "undefined" || !el) return false;
+  for (let node = el.parentElement; node; node = node.parentElement) {
+    if (node === document.body || node === document.documentElement) return false;
+    const style = window.getComputedStyle(node);
+    if (style.overflowX !== "visible" || style.overflowY !== "visible") return true;
+  }
+  return false;
+}

package/src/search/command-palette.tsx

@@ -100,6 +100,18 @@ export const DEFAULT_COMMAND_PALETTE_LABELS: CommandPaletteLabels = {
   close: "Close",
 };
 
+/**
+ * How tall the palette's rows are. `"compact"` (the default) is the desktop list the
+ * palette always drew, 36px a row; `"comfortable"` gives every row the kit's 44px touch
+ * target (`min-h-11`) and body-size text — keksdose's phone search, where a 36px row
+ * under a thumb picks its neighbour.
+ */
+export type CommandPaletteDensity = "compact" | "comfortable";
+
+/** A provider's answer is a promise — the only case with anything to wait for. */
+const isThenable = (value: unknown): value is PromiseLike<unknown> =>
+  typeof (value as PromiseLike<unknown> | null)?.then === "function";
+
 /** The defaults minus `dialog`, so a resolved `dialog` means someone SUPPLIED one —
  *  see the dialog's `aria-label` for why that distinction matters. */
 const { dialog: DEFAULT_DIALOG_NAME, ...DEFAULTS_WITHOUT_DIALOG } = DEFAULT_COMMAND_PALETTE_LABELS;
@@ -112,6 +124,14 @@ interface CommandPaletteProps {
    * query is allowed — return defaults like pages/recent). Sync or async; stale
    * async responses are ignored.
    *
+   * A SYNCHRONOUS provider (one returning an array, not a promise) never shows the
+   * "Searching…" hint: its answer is there the moment it is asked, and the hint only
+   * flashed through the debounce before results that were never late — keksdose's
+   * transaction search filters a list already in memory. The palette tells the two
+   * apart by what the provider RETURNS, call by call, so there is no prop to keep in
+   * step with the implementation: an async provider shows the hint from the first
+   * promise on (and during the debounce of every later query), a sync one never.
+   *
    * Its IDENTITY is not a re-run signal — it is read through a ref, so the palette
    * never re-searches merely because the caller rebuilt the callback. That is
    * deliberate: a provider closing over a list rendered from a query allocates a new
@@ -175,6 +195,8 @@ interface CommandPaletteProps {
    * up. `false` keeps the card on every viewport.
    */
   fullScreenOnPhone?: boolean;
+  /** Row height — see {@link CommandPaletteDensity}. Default `"compact"`. */
+  density?: CommandPaletteDensity;
   labels?: Partial<CommandPaletteLabels>;
 }
 
@@ -208,6 +230,7 @@ export function CommandPalette({
   searchOn = "input",
   redactLabels = false,
   fullScreenOnPhone = true,
+  density = "compact",
   labels,
 }: CommandPaletteProps) {
   const l = useKitLabels("commandPalette", DEFAULTS_WITHOUT_DIALOG, labels);
@@ -259,6 +282,10 @@ export function CommandPalette({
   const searchRef = useRef(search);
   searchRef.current = search;
   const reqId = useRef(0);
+  /** What the provider's last answer was: a promise (`false`), an array (`true`), or
+   *  not known yet. Only a provider known to be async shows "Searching…" while the
+   *  debounce runs — see `search`. */
+  const syncRef = useRef<boolean | undefined>(undefined);
   /** The query the results on screen answer, and the row highlighted in them — so a
    *  re-run for the SAME query (a `revision` change: a source streaming in) keeps the
    *  highlight on its row instead of throwing it back to the top mid-arrow. */
@@ -295,10 +322,13 @@ export function CommandPalette({
   useEffect(() => {
     if (!open) return;
     const id = ++reqId.current;
-    setLoading(true);
+    if (syncRef.current === false) setLoading(true);
     const run = async () => {
       try {
-        const r = await Promise.resolve(searchRef.current(query));
+        const answer = searchRef.current(query);
+        syncRef.current = !isThenable(answer);
+        if (!syncRef.current) setLoading(true);
+        const r = await answer;
         if (reqId.current === id) {
           const keep = shownQuery.current === query ? activeIdRef.current : undefined;
           const at = keep === undefined ? -1 : groupItems(r).flat.findIndex((item) => item.id === keep);
@@ -366,11 +396,14 @@ export function CommandPalette({
   // Keep the active row scrolled into view.
   useEffect(() => {
     const el = listRef.current?.querySelector<HTMLElement>(`[data-index="${active}"]`);
-    el?.scrollIntoView({ block: "nearest" });
+    // Optional-called, as in combobox-core: jsdom has no scrollIntoView, and every
+    // consumer's tests crashed on the first highlighted row (kastlan stubbed it).
+    el?.scrollIntoView?.({ block: "nearest" });
   }, [active]);
 
   if (!open) return null;
 
+  const comfortable = density === "comfortable";
   let flatIndex = -1;
   return createPortal(
     <div
@@ -503,7 +536,10 @@ export function CommandPalette({
                       <li
                         key={item.id}
                         role="presentation"
-                        className="flex items-center gap-2.5 px-3 py-2 text-xs text-[var(--text-placeholder)]"
+                        className={cn(
+                          "flex items-center gap-2.5 px-3 text-xs text-[var(--text-placeholder)]",
+                          comfortable ? "min-h-11 py-2.5" : "py-2",
+                        )}
                       >
                         {item.icon && <span className="flex size-4 shrink-0 items-center justify-center">{item.icon}</span>}
                         <span className="min-w-0 flex-1 truncate">{item.label}</span>
@@ -525,7 +561,8 @@ export function CommandPalette({
                     "data-index": idx,
                     onMouseMove: () => setActive(idx),
                     className: cn(
-                      "flex w-full items-center gap-2.5 px-3 py-2 text-start text-sm",
+                      "flex w-full items-center gap-2.5 px-3 text-start",
+                      comfortable ? "min-h-11 py-2.5 text-base" : "py-2 text-sm",
                       isActive
                         ? "bg-[var(--bg-active)] text-[var(--text-primary)]"
                         : "text-[var(--text-secondary)]",

package/src/search/global-search.tsx

@@ -7,7 +7,7 @@ import { TOPBAR_TRIGGER_CLASS } from "../shell/topbar-controls";
 import { cn } from "../lib/cn";
 import { useKitLabels } from "../i18n/kit-labels";
 import { CommandPalette, DEFAULT_COMMAND_PALETTE_LABELS, useCommandKey } from "./command-palette";
-import type { CommandItem, CommandPaletteLabels } from "./command-palette";
+import type { CommandItem, CommandPaletteDensity, CommandPaletteLabels } from "./command-palette";
 import { createSearchIndex } from "./search-index";
 import type { SearchEntry, SearchIndexOptions } from "./search-index";
 
@@ -94,6 +94,14 @@ export interface GlobalSearchProps {
   sources?: readonly GlobalSearchSource[];
   /** What the empty query shows, under the `suggestions` heading. */
   suggestions?: readonly GlobalSearchSuggestion[];
+  /**
+   * Show each suggested ENTRY under its own `group` instead of all of them under the
+   * one `suggestions` heading — keksdose's empty palette listed "Pages" and "Actions"
+   * apart, and one "Try" heading over both lost the difference. An entry with no
+   * `group` and a query suggestion (`{ query }`) stay under `suggestions`. `groupOrder`
+   * orders these groups as it orders the results'. Off by default.
+   */
+  suggestionsKeepGroups?: boolean;
   /** Groups listed here come first, in this order; the rest follow in ranking order. */
   groupOrder?: readonly string[];
   /** Ranking and capping — `groupLimit` (default 8) applies to every group. */
@@ -130,6 +138,23 @@ export interface GlobalSearchProps {
   hideTriggerOnPhone?: boolean;
   /** Class for the default trigger button, merged over `TOPBAR_TRIGGER_CLASS`. */
   triggerClassName?: string;
+  /**
+   * The default trigger's magnifier, in px. Default 16 (`size-4`), as it always was;
+   * 20 matches the kit's other top-bar triggers (`TopbarIconButton` draws `size-5`) and
+   * keksdose's top bar, which reached into the button with `[&_svg]:size-5` for it.
+   */
+  triggerIconSize?: number;
+  /**
+   * Whether the trigger's accessible name includes the shortcut: `"plain"` (default)
+   * names it "Search"; `"withShortcut"` names it by `labels.shortcut(keys)` —
+   * "Search (⌘K)" on Apple platforms, "Search (Ctrl K)" elsewhere — the same text its
+   * tooltip shows, so a speech-control user ("click Search") and a sighted keyboard user
+   * meet the shortcut in the name itself (keksdose C25). `aria-keyshortcuts` is set
+   * either way. Also reaches a custom trigger as `triggerProps.label`.
+   */
+  triggerName?: "plain" | "withShortcut";
+  /** The palette's row height — `CommandPalette`'s `density`. Default `"compact"`. */
+  density?: CommandPaletteDensity;
   labels?: Partial<GlobalSearchLabels>;
   /** Passed through to the palette (`empty`, `loading`, `error`, `hint`, …). */
   paletteLabels?: Partial<CommandPaletteLabels>;
@@ -211,6 +236,7 @@ function GlobalSearchImpl({
   entries,
   sources,
   suggestions,
+  suggestionsKeepGroups = false,
   groupOrder,
   indexOptions,
   navigate,
@@ -226,6 +252,9 @@ function GlobalSearchImpl({
   trigger = "button",
   hideTriggerOnPhone = false,
   triggerClassName,
+  triggerIconSize,
+  triggerName = "plain",
+  density,
   labels,
   paletteLabels,
 }: GlobalSearchProps & { navigate: (href: string) => void; hrefFor: (href: string) => string }) {
@@ -360,12 +389,27 @@ function GlobalSearchImpl({
   // which the compiler lint cannot tell from a read during render.
   /* eslint-disable react-hooks/refs */
   const items = useMemo((): CommandItem[] => {
+    const ordered = (out: CommandItem[]) => {
+      if (!order.length) return out;
+      const rank = (group: string) => {
+        const i = order.indexOf(group);
+        return i === -1 ? order.length : i;
+      };
+      // Stable: within a rank, groups keep the order their best hit gave them.
+      return out
+        .map((item, i) => ({ item, i }))
+        .sort((a, b) => rank(a.item.group) - rank(b.item.group) || a.i - b.i)
+        .map(({ item }) => item);
+    };
+
     if (!q) {
       const out: CommandItem[] = [];
+      const groupOf = (entry: SearchEntry) =>
+        suggestionsKeepGroups ? (entry.group ?? l.suggestions) : l.suggestions;
       suggestionList.forEach((s, i) => {
         if (typeof s === "string") {
           const entry = byId.get(s);
-          if (entry) out.push(toItem("try:", entry, l.suggestions));
+          if (entry) out.push(toItem("try:", entry, groupOf(entry)));
         } else if ("query" in s) {
           out.push({
             id: `try:q${i}`,
@@ -380,9 +424,10 @@ function GlobalSearchImpl({
               refocusField();
             },
           });
-        } else out.push(toItem("try:", s, l.suggestions));
+        } else out.push(toItem("try:", s, groupOf(s)));
       });
-      return out;
+      // One heading has nothing to order; kept groups are ordered like results.
+      return suggestionsKeepGroups ? ordered(out) : out;
     }
 
     const out = index.search(q).map((hit) => toItem("s:", hit.entry, hit.entry.group ?? l.results));
@@ -410,17 +455,8 @@ function GlobalSearchImpl({
       }
     }
 
-    if (!order.length) return out;
-    const rank = (group: string) => {
-      const i = order.indexOf(group);
-      return i === -1 ? order.length : i;
-    };
-    // Stable: within a rank, groups keep the order their best hit gave them.
-    return out
-      .map((item, i) => ({ item, i }))
-      .sort((a, b) => rank(a.item.group) - rank(b.item.group) || a.i - b.i)
-      .map(({ item }) => item);
-  }, [q, suggestionList, byId, index, sourceList, sourceResults, order, groupLimit, toItem, l.suggestions, l.results, pl.loading, pl.error, setOpen, setQuery, noop, redactLabels]);
+    return ordered(out);
+  }, [q, suggestionList, suggestionsKeepGroups, byId, index, sourceList, sourceResults, order, groupLimit, toItem, l.suggestions, l.results, pl.loading, pl.error, setOpen, setQuery, noop, redactLabels]);
   /* eslint-enable react-hooks/refs */
 
   // The palette re-runs its provider on a `revision` change, never on the provider's
@@ -434,9 +470,10 @@ function GlobalSearchImpl({
 
   const apple = useMemo(() => isApplePlatform(), []);
   const keys = apple ? "⌘K" : "Ctrl K";
+  const triggerLabel = triggerName === "withShortcut" ? l.shortcut(keys) : l.trigger;
   const triggerProps: GlobalSearchTriggerProps = {
     open: openSearch,
-    label: l.trigger,
+    label: triggerLabel,
     tooltip: l.shortcut(keys),
     keys,
     ariaKeyShortcuts: "Meta+K Control+K",
@@ -456,12 +493,15 @@ function GlobalSearchImpl({
               <button
                 type="button"
                 onClick={openSearch}
-                aria-label={l.trigger}
+                aria-label={triggerLabel}
                 aria-keyshortcuts={triggerProps.ariaKeyShortcuts}
                 aria-haspopup="dialog"
                 className={cn(TOPBAR_TRIGGER_CLASS, triggerClassName)}
               >
-                <Search className="size-4" />
+                <Search
+                  className={triggerIconSize === undefined ? "size-4" : undefined}
+                  style={triggerIconSize === undefined ? undefined : { width: triggerIconSize, height: triggerIconSize }}
+                />
               </button>
             </Tooltip>
           )}
@@ -475,6 +515,7 @@ function GlobalSearchImpl({
         searchOn={searchOn}
         redactLabels={redactLabels}
         fullScreenOnPhone={fullScreenOnPhone}
+        density={density}
         labels={resolvedPaletteLabels}
       />
     </>

package/src/wizard/stepper-nav.tsx

@@ -107,7 +107,8 @@ export function StepperNav<TData extends Record<string, unknown>>({
   const pending = wizard.isValidating;
   const stepNextLabel = wizard.currentStep.nextLabel;
 
-  let forwardButton: ReactNode = null;
+  // Every branch below assigns it; no initial value to overwrite.
+  let forwardButton: ReactNode;
   if (wizard.isCommitStep) {
     const finishButton = (
       <Button

package/src/wizard/types.ts

@@ -109,8 +109,8 @@ export interface UseWizardOptions<TData extends Record<string, unknown>> {
    */
   missingRequiredMessage?: string;
   /**
-   * How to surface {@link missingRequiredMessage}. Defaults to a `sonner` toast
-   * (an optional peer, imported only when this actually fires). Pass your own to
+   * How to surface {@link missingRequiredMessage}. Defaults to the kit's `toast.error`
+   * (sonner, an optional peer, is loaded only when a toast is shown). Pass your own to
    * route it somewhere else, or to a no-op to silence it.
    */
   onValidationFailed?: (message: string) => void;

package/src/wizard/use-wizard.ts

@@ -18,6 +18,7 @@ import { useCallback, useEffect, useReducer, useRef, useState } from "react";
 import { useSearchParams } from "react-router";
 import { useKitLabels } from "../i18n/kit-labels";
 import { DEFAULT_WIZARD_LABELS } from "./types";
+import { toast } from "../components/toast";
 import type {
   FieldErrors,
   StepStatus,
@@ -312,9 +313,8 @@ export function useWizard<TData extends Record<string, unknown>>(
         if (onValidationFailed) {
           onValidationFailed(message);
         } else {
-          // sonner is an optional peer: imported here, on the failure path only,
-          // so an app that never trips this never has to install it.
-          const { toast } = await import("sonner");
+          // The kit's `toast` loads sonner (an optional peer) lazily, so an app
+          // that never trips this never has to install it.
           toast.error(message);
         }
       }

package/src/wizard/wizard-summary.tsx

@@ -1,5 +1,6 @@
 import { Pencil } from "lucide-react";
 import { Card, CardAction, CardContent, CardHeader, CardTitle, IconButton } from "../components/ui";
+import { Tooltip } from "../components/tooltip";
 import type { SummarySection, WizardLabels } from "./types";
 import { DEFAULT_WIZARD_LABELS } from "./types";
 import { useKitLabels } from "../i18n/kit-labels";
@@ -44,16 +45,19 @@ export function WizardSummary({
             <CardTitle className="text-base">{section.label}</CardTitle>
             {section.stepIndex !== undefined && onEditStep && (
               <CardAction>
-                <IconButton
-                  size="sm"
-                  variant="ghost"
-                  aria-label={l.edit}
-                  title={l.edit}
-                  disabled={disabled}
-                  onClick={() => onEditStep(section.stepIndex as number)}
-                >
-                  <Pencil />
-                </IconButton>
+                {/* The kit Tooltip, not a native `title`: it shows on keyboard focus too,
+                    and an app with a one-tooltip rule (keksdose dev#523) sees one. */}
+                <Tooltip label={l.edit}>
+                  <IconButton
+                    size="sm"
+                    variant="ghost"
+                    aria-label={l.edit}
+                    disabled={disabled}
+                    onClick={() => onEditStep(section.stepIndex as number)}
+                  >
+                    <Pencil />
+                  </IconButton>
+                </Tooltip>
               </CardAction>
             )}
           </CardHeader>

package/tokens.css

@@ -233,6 +233,103 @@
   --success-bg: rgba(6, 78, 59, 0.25);
 }
 
+/* ── Toasts ─────────────────────────────────────────────────────────────────
+   The kit `<Toaster>` (components/toast.tsx) paints sonner with the AlertBanner
+   tones. These are ALIASES, not new colours, and they exist for one reason: sonner
+   declares its own `--success-bg` / `--success-border` (and info, warning) on the
+   toaster element, so that element cannot read the kit's value under the same name
+   — `--success-bg: var(--success-bg)` is a cycle. Declared here, they are computed
+   on `<html>` and inherited down under a name sonner does not touch.
+
+   The background is the tone's wash layered on the surface, as AlertBanner's
+   `elevated` frame does: the dark washes are translucent, and a toast floats over
+   content. `--z-toast` is above every kit overlay (modal and sheets z-50, tour
+   z-60/61, command palette z-70) and above whatever an app stacks on top of those —
+   a toast confirming a dialog's action must not land under the dialog. */
+:root,
+.dark {
+  --z-toast: 2147483647;
+  --toast-success-bg: linear-gradient(var(--success-bg), var(--success-bg)) var(--bg-surface);
+  --toast-success-border: var(--success-border);
+  --toast-info-bg: linear-gradient(var(--info-bg), var(--info-bg)) var(--bg-surface);
+  --toast-info-border: var(--info-border);
+  --toast-warning-bg: linear-gradient(var(--warning-bg), var(--warning-bg)) var(--bg-surface);
+  --toast-warning-border: var(--warning-border);
+  --toast-danger-bg: linear-gradient(var(--danger-bg), var(--danger-bg)) var(--bg-surface);
+  --toast-danger-border: var(--danger-border);
+}
+
+/* The description of an untoned toast in the secondary text colour (sonner hard-codes
+   #3f3f3f, unreadable in the dark theme); a toned toast's inherits its tone. */
+.kit-toaster [data-sonner-toast][data-styled="true"]:not([data-type="success"], [data-type="info"], [data-type="warning"], [data-type="error"]) [data-description] {
+  color: var(--text-secondary);
+}
+/* The action button in the tone's own colour rather than sonner's black pill. */
+.kit-toaster [data-sonner-toast][data-styled="true"] [data-button]:not([data-cancel]) {
+  background: var(--toast-action-bg, var(--text-primary));
+  color: var(--bg-surface);
+}
+.kit-toaster [data-sonner-toast][data-type="success"] { --toast-action-bg: var(--success); }
+.kit-toaster [data-sonner-toast][data-type="info"] { --toast-action-bg: var(--info); }
+.kit-toaster [data-sonner-toast][data-type="warning"] { --toast-action-bg: var(--warning); }
+.kit-toaster [data-sonner-toast][data-type="error"] { --toast-action-bg: var(--danger); }
+/* The kit's focus ring on the toast's buttons — sonner's is a black shadow that
+   vanishes on the dark theme. */
+.kit-toaster [data-sonner-toast][data-styled="true"] :is([data-button], [data-close-button]):focus-visible {
+  outline: 2px solid var(--brand);
+  outline-offset: 2px;
+}
+
+/* ── Categorical hues ───────────────────────────────────────────────────────
+   Colours that MEAN nothing but "this is a different value": kastlan's status
+   enums (status-badge.tsx over enum-meta.ts), where ~15 enums map to 9 Tailwind
+   hues. Four of those are semantic and already have tokens — green = --success,
+   yellow = --warning, red = --danger, gray = the neutral chip — so only the five
+   below are new: blue (open / sent / rented), purple (assigned / accepted),
+   orange (terminated / high urgency), teal (invoiced) and indigo (a meeting
+   stage). The smallest set that covers every enum; deliberately not a ramp.
+
+   Same triple and same shades as the status family (700 text / 300 border /
+   100 surface in light, 300 text / translucent 700 border / 900 wash in dark),
+   so a categorical chip sits beside a semantic one at the same weight. Not in
+   `TokenSet`: like `--danger`, a hue is a specific colour, not a tint of the
+   palette preset, so it lives here and nowhere else. */
+:root {
+  --hue-blue: #1d4ed8;            /* blue-700 */
+  --hue-blue-border: #93c5fd;     /* blue-300 */
+  --hue-blue-bg: #dbeafe;         /* blue-100 */
+  --hue-indigo: #4338ca;          /* indigo-700 */
+  --hue-indigo-border: #a5b4fc;   /* indigo-300 */
+  --hue-indigo-bg: #e0e7ff;       /* indigo-100 */
+  --hue-purple: #7e22ce;          /* purple-700 */
+  --hue-purple-border: #d8b4fe;   /* purple-300 */
+  --hue-purple-bg: #f3e8ff;       /* purple-100 */
+  --hue-teal: #0f766e;            /* teal-700 */
+  --hue-teal-border: #5eead4;     /* teal-300 */
+  --hue-teal-bg: #ccfbf1;         /* teal-100 */
+  --hue-orange: #c2410c;          /* orange-700 */
+  --hue-orange-border: #fdba74;   /* orange-300 */
+  --hue-orange-bg: #ffedd5;       /* orange-100 */
+}
+
+.dark {
+  --hue-blue: #93c5fd;            /* blue-300 */
+  --hue-blue-border: rgba(29, 78, 216, 0.6);
+  --hue-blue-bg: rgba(30, 58, 138, 0.25);
+  --hue-indigo: #a5b4fc;          /* indigo-300 */
+  --hue-indigo-border: rgba(67, 56, 202, 0.6);
+  --hue-indigo-bg: rgba(49, 46, 129, 0.25);
+  --hue-purple: #d8b4fe;          /* purple-300 */
+  --hue-purple-border: rgba(126, 34, 206, 0.6);
+  --hue-purple-bg: rgba(88, 28, 135, 0.25);
+  --hue-teal: #5eead4;            /* teal-300 */
+  --hue-teal-border: rgba(15, 118, 110, 0.6);
+  --hue-teal-bg: rgba(19, 78, 74, 0.25);
+  --hue-orange: #fdba74;          /* orange-300 */
+  --hue-orange-border: rgba(194, 65, 12, 0.6);
+  --hue-orange-bg: rgba(124, 45, 18, 0.25);
+}
+
 /* Semantic colour utilities backed by the tokens above. Unlayered so they win
    over Tailwind's layered colour utilities, and theme-aware for free (the var
    flips under .dark) — no dark: variant needed at the call site. */