@heyramzi/ui 6.1.0 → 8.0.0

package/src/effects/reveal/observe.ts

@@ -1,4 +1,5 @@
-import type { RevealViewOptions } from "./types.js";
+import type { Action } from "svelte/action";
+import type { InViewActionOptions, RevealViewOptions } from "./types.js";
 
 /**
  * Runs `onChange` when `el` enters or leaves the viewport. Returns the teardown.
@@ -31,3 +32,34 @@ export function observeInView(
   observer.observe(el);
   return () => observer.disconnect();
 }
+
+/**
+ * Svelte action that calls back when the node enters or leaves the viewport.
+ * Options are read at call time, so a `use:onInView={...}` update swaps the callbacks.
+ *
+ * @example
+ * <section use:onInView={{ amount: 0.2, onEnter: () => (visible = true) }}>
+ */
+export const onInView: Action<HTMLElement, InViewActionOptions | undefined> = (node, initial) => {
+  let options = initial ?? {};
+  let entered = false;
+
+  const { amount = 0.1, margin, once } = options;
+
+  const stop = observeInView(node, { amount, margin, once }, (inView) => {
+    if (inView && !entered) {
+      entered = true;
+      options.onEnter?.();
+    } else if (!inView && entered) {
+      entered = false;
+      options.onLeave?.();
+    }
+  });
+
+  return {
+    update(next) {
+      options = next ?? {};
+    },
+    destroy: stop,
+  };
+};

package/src/effects/reveal/types.ts

@@ -23,3 +23,10 @@ export type RevealViewOptions = {
   /** `rootMargin` for the observer, e.g. `"0px 0px -15% 0px"`. */
   margin?: string;
 };
+
+export type InViewActionOptions = RevealViewOptions & {
+  /** Called when the node enters the viewport. */
+  onEnter?: () => void;
+  /** Called when the node leaves the viewport. Only fires when `once` is false. */
+  onLeave?: () => void;
+};

package/src/effects/theme-toggle/ThemeToggle.css

@@ -1,9 +1,3 @@
-::view-transition-old(root),
-::view-transition-new(root) {
-  animation: none;
-  mix-blend-mode: normal;
-}
-
 .theme-toggle:active {
   transform: scale(0.97);
 }
@@ -19,3 +13,202 @@
   background: color-mix(in oklch, var(--color-background) 12%, transparent);
   color: var(--color-background);
 }
+
+/* The slide variant: a pill track with a thumb that moves to the active side.
+   A caller sets brand colours with custom properties on the class:
+   --theme-toggle-thumb-light, --theme-toggle-thumb-dark, --theme-toggle-track,
+   --theme-toggle-track-hover, --theme-toggle-sun, --theme-toggle-moon,
+   --theme-toggle-thumb-icon and --theme-toggle-glow. */
+.theme-toggle-slide {
+  --tt-thumb: 1.5rem;
+  --tt-pad: 0.25rem;
+  position: relative;
+  display: flex;
+  align-items: center;
+  box-sizing: content-box;
+  width: calc(var(--tt-thumb) * 2);
+  height: var(--tt-thumb);
+  padding: var(--tt-pad);
+  border: 0;
+  border-radius: 9999px;
+  cursor: pointer;
+  background: var(
+    --theme-toggle-track,
+    color-mix(in oklch, var(--color-foreground) 10%, transparent)
+  );
+  transition:
+    background-color 300ms,
+    box-shadow 300ms,
+    transform 300ms;
+}
+
+.theme-toggle-slide--lg {
+  --tt-thumb: 2rem;
+}
+
+.theme-toggle-slide:hover {
+  background: var(
+    --theme-toggle-track-hover,
+    color-mix(in oklch, var(--color-foreground) 20%, transparent)
+  );
+  box-shadow: 0 0 15px color-mix(in oklch, var(--theme-toggle-glow, transparent) 30%, transparent);
+}
+
+.theme-toggle-slide:active {
+  transform: scale(0.97);
+}
+
+.theme-toggle-slide:focus-visible {
+  outline: 2px solid var(--color-ring, var(--color-primary));
+  outline-offset: 2px;
+}
+
+.theme-toggle-slide__glow {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  opacity: 0;
+  background: radial-gradient(
+    circle at var(--tt-glow-x, 25%) 50%,
+    color-mix(in oklch, var(--theme-toggle-glow, transparent) 20%, transparent),
+    transparent 70%
+  );
+  transition: opacity 500ms;
+}
+
+.theme-toggle-slide:hover .theme-toggle-slide__glow {
+  opacity: 1;
+}
+
+.theme-toggle-slide[data-state="dark"] {
+  --tt-glow-x: 75%;
+}
+
+.theme-toggle-slide__icon {
+  position: absolute;
+  display: flex;
+  opacity: 0.3;
+  transform: scale(0.75);
+  transition:
+    opacity 300ms,
+    transform 300ms;
+}
+
+.theme-toggle-slide__icon--sun {
+  left: calc(var(--tt-pad) + (var(--tt-thumb) - 14px) / 2);
+  color: var(--theme-toggle-sun, var(--color-muted-foreground));
+}
+
+.theme-toggle-slide__icon--moon {
+  right: calc(var(--tt-pad) + (var(--tt-thumb) - 14px) / 2);
+  color: var(--theme-toggle-moon, var(--color-muted-foreground));
+}
+
+.theme-toggle-slide[data-state="light"] .theme-toggle-slide__icon--sun,
+.theme-toggle-slide[data-state="dark"] .theme-toggle-slide__icon--moon {
+  opacity: 0.7;
+  transform: scale(1);
+}
+
+.theme-toggle-slide[data-state="light"] .theme-toggle-slide__icon--sun {
+  animation: theme-toggle-spin 8s linear infinite;
+}
+
+.theme-toggle-slide[data-state="dark"] .theme-toggle-slide__icon--moon {
+  animation: theme-toggle-wiggle 2s ease-in-out infinite;
+}
+
+.theme-toggle-slide__thumb {
+  --tt-thumb-color: var(--theme-toggle-thumb-light, var(--color-primary));
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--tt-thumb);
+  height: var(--tt-thumb);
+  border-radius: 9999px;
+  background: var(--tt-thumb-color);
+  color: var(--theme-toggle-thumb-icon, var(--color-primary-foreground));
+  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  transition:
+    transform 500ms cubic-bezier(0.165, 0.84, 0.44, 1),
+    background-color 500ms;
+}
+
+.theme-toggle-slide[data-state="dark"] .theme-toggle-slide__thumb {
+  --tt-thumb-color: var(--theme-toggle-thumb-dark, var(--color-primary));
+  transform: translateX(var(--tt-thumb));
+}
+
+.theme-toggle-slide__ring {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: color-mix(in oklch, var(--tt-thumb-color) 50%, transparent);
+  animation: theme-toggle-pulse 2s ease-in-out infinite;
+  pointer-events: none;
+}
+
+.theme-toggle-slide__mark {
+  position: absolute;
+  transition:
+    opacity 300ms,
+    transform 300ms;
+}
+
+.theme-toggle-slide__mark--sun {
+  opacity: 1;
+  transform: scale(1) rotate(0);
+}
+
+.theme-toggle-slide__mark--moon {
+  opacity: 0;
+  transform: scale(0) rotate(-90deg);
+}
+
+.theme-toggle-slide[data-state="dark"] .theme-toggle-slide__mark--sun {
+  opacity: 0;
+  transform: scale(0) rotate(90deg);
+}
+
+.theme-toggle-slide[data-state="dark"] .theme-toggle-slide__mark--moon {
+  opacity: 1;
+  transform: scale(1) rotate(0);
+}
+
+@keyframes theme-toggle-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes theme-toggle-wiggle {
+  0%,
+  100% {
+    transform: rotate(-5deg);
+  }
+  50% {
+    transform: rotate(5deg);
+  }
+}
+
+@keyframes theme-toggle-pulse {
+  0%,
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1.5);
+    opacity: 0.4;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .theme-toggle-slide,
+  .theme-toggle-slide * {
+    animation: none !important;
+    transition: none !important;
+  }
+}

package/src/effects/theme-toggle/ThemeToggle.svelte

@@ -4,9 +4,7 @@
 	// =========================
 	import "./ThemeToggle.css";
 	import { cn } from "@heyramzi/utils";
-	import MonitorIcon from "@lucide/svelte/icons/monitor";
-	import MoonIcon from "@lucide/svelte/icons/moon";
-	import SunIcon from "@lucide/svelte/icons/sun";
+	import { Monitor, Moon, Sun } from "phosphor-svelte";
 	import { revealTheme } from "../../lib/theme-transition.js";
 
 	// =========================
@@ -15,13 +13,15 @@
 	interface Props {
 		/** Used when `mode` is absent. */
 		isDark?: boolean;
-		/** The icon follows the mode: Sun, Moon or Monitor. */
+		/** The icon follows the mode: Sun, Moon or Monitor. The slide variant has no third state, so `system` reads as light. */
 		mode?: "light" | "dark" | "system";
 		/** Fires after the wipe has started. The caller flips the theme here. */
 		onToggle: (event: MouseEvent) => void;
-		variant?: "outline" | "ghost" | "inverted";
+		/** `slide` is a pill track with a thumb that moves between a sun and a moon. */
+		variant?: "outline" | "ghost" | "inverted" | "slide";
 		/** Alias for `variant="inverted"`. */
 		inverted?: boolean;
+		/** `sm` is 32px tall, `default` is 40px, in every variant. */
 		size?: "default" | "sm";
 		/** Overrides the aria-label and the screen-reader text. */
 		label?: string;
@@ -78,24 +78,49 @@
 <!-- =========================== -->
 <!-- MARKUP -->
 <!-- =========================== -->
-<button
-	onclick={handleClick}
-	aria-label={text}
-	{title}
-	class={cn(
-		"theme-toggle relative flex cursor-pointer items-center justify-center rounded-lg transition-all duration-300",
-		size === "sm" ? "size-8" : "size-10",
-		style === "inverted" && "theme-toggle--inverted",
-		style === "ghost" && "text-muted-foreground hover:bg-muted/40 hover:text-foreground",
-		style === "outline" &&
-			"border border-border/60 bg-muted/30 text-muted-foreground hover:border-border hover:text-foreground",
-		className,
-	)}
->
-	<SunIcon class={iconClass(active === "light", "rotate-90")} />
-	<MoonIcon class={iconClass(active === "dark", "-rotate-90")} />
-	{#if mode}
-		<MonitorIcon class={iconClass(active === "system", "rotate-90")} />
-	{/if}
-	<span class="sr-only">{text}</span>
-</button>
+{#if style === "slide"}
+	<button
+		type="button"
+		onclick={handleClick}
+		aria-label={text}
+		{title}
+		data-state={active === "dark" ? "dark" : "light"}
+		class={cn("theme-toggle-slide", size === "default" && "theme-toggle-slide--lg", className)}
+	>
+		<span class="theme-toggle-slide__glow" aria-hidden="true"></span>
+		<span class="theme-toggle-slide__icon theme-toggle-slide__icon--sun" aria-hidden="true">
+			<Sun size={14} weight="fill" />
+		</span>
+		<span class="theme-toggle-slide__icon theme-toggle-slide__icon--moon" aria-hidden="true">
+			<Moon size={14} weight="fill" />
+		</span>
+		<span class="theme-toggle-slide__thumb" aria-hidden="true">
+			<span class="theme-toggle-slide__ring"></span>
+			<Sun size={14} weight="fill" class="theme-toggle-slide__mark theme-toggle-slide__mark--sun" />
+			<Moon size={14} weight="fill" class="theme-toggle-slide__mark theme-toggle-slide__mark--moon" />
+		</span>
+		<span class="sr-only">{text}</span>
+	</button>
+{:else}
+	<button
+		onclick={handleClick}
+		aria-label={text}
+		{title}
+		class={cn(
+			"theme-toggle relative flex cursor-pointer items-center justify-center rounded-lg transition-all duration-300",
+			size === "sm" ? "size-8" : "size-10",
+			style === "inverted" && "theme-toggle--inverted",
+			style === "ghost" && "text-muted-foreground hover:bg-muted/40 hover:text-foreground",
+			style === "outline" &&
+				"border border-border/60 bg-muted/30 text-muted-foreground hover:border-border hover:text-foreground",
+			className,
+		)}
+	>
+		<Sun class={iconClass(active === "light", "rotate-90")} />
+		<Moon class={iconClass(active === "dark", "-rotate-90")} />
+		{#if mode}
+			<Monitor class={iconClass(active === "system", "rotate-90")} />
+		{/if}
+		<span class="sr-only">{text}</span>
+	</button>
+{/if}

package/src/gallery.test.ts

@@ -0,0 +1,52 @@
+/*
+ * The gallery lives on the site, one copy of every demo, and it has to hold everything this package ships.
+ */
+
+/*
+ * These read the site's files off disk, so an animation without a stage or a synced primitive without a demo fails here and not in front of a reader.
+ */
+
+import { existsSync, readdirSync, readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { describe, expect, it } from "vite-plus/test";
+
+/** The runner's cwd is the workspace root or the package; find the package. */
+function packageRoot(): string {
+  let dir = process.cwd();
+  for (;;) {
+    if (existsSync(join(dir, ".upstream", "shadcn.lock.json"))) return dir;
+    const candidate = join(dir, "packages", "ui");
+    if (existsSync(join(candidate, ".upstream", "shadcn.lock.json"))) return candidate;
+    const parent = dirname(dir);
+    if (parent === dir) throw new Error("packages/ui not found");
+    dir = parent;
+  }
+}
+
+const PKG = packageRoot();
+const SITE = join(PKG, "..", "..", "site", "src", "lib");
+
+describe("site gallery coverage", () => {
+  it("gives every animation a stage", () => {
+    const section = readFileSync(join(SITE, "demos", "motion.svelte"), "utf8");
+    const missing = readdirSync(join(PKG, "src", "animations"))
+      .filter((file) => file.endsWith(".css") && file !== "index.css")
+      .filter((file) => !section.includes(`animations/${file.replace(".css", "")}`));
+    expect(missing).toEqual([]);
+  });
+
+  it("lists every synced shadcn demo", () => {
+    const manifest = readFileSync(join(SITE, "shadcn-demos", "index.ts"), "utf8");
+    const vendored = readdirSync(join(PKG, ".upstream", "shadcn-demos"))
+      .filter((file) => file.endsWith(".svelte"))
+      .map((file) => file.replace(".svelte", ""));
+    expect(vendored.filter((name) => !manifest.includes(`name: "${name}"`))).toEqual([]);
+  });
+
+  it("keeps a demo file behind every listed primitive", () => {
+    const manifest = readFileSync(join(SITE, "shadcn-demos", "index.ts"), "utf8");
+    const listed = [...manifest.matchAll(/name: "([a-z-]+)"/g)].map((m) => m[1]);
+    expect(listed.length).toBeGreaterThan(0);
+    expect(listed.filter((name) => !existsSync(join(SITE, "shadcn-demos", `${name}.svelte`)))).toEqual([]);
+  });
+});

package/src/index.ts

@@ -16,6 +16,8 @@ export type { AnimatedBeamProps, AnchorPosition } from "./effects/animated-beam/
 
 export { default as Spotlight } from "./effects/spotlight/Spotlight.svelte";
 
+export { default as MagicCard } from "./effects/magic-card/MagicCard.svelte";
+
 export { default as Marquee } from "./effects/marquee/Marquee.svelte";
 
 export { default as ImageReveal } from "./effects/image-reveal/ImageReveal.svelte";
@@ -40,10 +42,12 @@ export type {
 
 export { default as ProgressiveBlur } from "./effects/progressive-blur/ProgressiveBlur.svelte";
 
+export { default as InteractiveHoverButton } from "./effects/interactive-hover-button/InteractiveHoverButton.svelte";
+
 export { default as ImageComparison } from "./effects/image-comparison/ImageComparison.svelte";
 
 export { magnetic } from "./effects/magnetic/magnetic.js";
 export type { MagneticOptions } from "./effects/magnetic/magnetic.js";
 
 export { revealTheme } from "./lib/theme-transition.js";
-export type { RevealThemeOptions } from "./lib/theme-transition.js";
+export type { RevealOrigin, RevealThemeOptions } from "./lib/theme-transition.js";

package/src/lib/panel.ts

@@ -4,7 +4,7 @@
 // different props, and their edges drifted because the classes were typed twice.
 
 // Dashboards used `Card`, so /ads had a ring and a shadow where /social had a
-// hairline. Flat, one hairline, `rounded-xl`, per DESIGN.md.
+// hairline. Flat, one hairline, `rounded-xl`.
 export const panelShellClass = "overflow-hidden rounded-xl border border-border bg-card";
 
 /**
@@ -13,3 +13,9 @@ export const panelShellClass = "overflow-hidden rounded-xl border border-border
  */
 export const panelHeaderClass =
   "flex min-h-11 flex-wrap items-center justify-between gap-x-3 gap-y-1 border-b border-border px-4 py-2";
+
+/**
+ * The inset well for a control block inside a panel. A visible step at the
+ * same depth, for filter rows and grouped controls.
+ */
+export const insetWellClass = "rounded-lg border border-border bg-muted/40 p-2";

package/src/lib/sliding-pill.ts

@@ -0,0 +1,68 @@
+import type { Attachment } from "svelte/attachments";
+
+/** The travelling highlight behind the active tab. Attach it to a span inside the list. */
+
+// WHY attach to the pill, not the list: the pill finds its list via
+// `parentElement`, so any strip that renders one span gets the motion.
+
+// WHY measure: the active item's width is its label. The selector covers the
+// three ways a strip marks it: a tab, a nav link, a toggle.
+
+// Per transitions.dev `tabs-sliding`: first paint and resizes write the
+// position with the transition off, so the pill snaps in instead of flying.
+const ACTIVE = '[data-state="active"],[aria-current="page"],[aria-pressed="true"]';
+
+export const slidingPill: Attachment<HTMLElement> = (pill) => {
+  const list = pill.parentElement;
+  if (!list) return;
+
+  let settled = false;
+
+  function move(animate: boolean) {
+    const active = list!.querySelector<HTMLElement>(ACTIVE);
+    if (!active) {
+      pill.style.opacity = "0";
+      return;
+    }
+    pill.style.opacity = "1";
+    if (animate) {
+      pill.style.transform = `translateX(${active.offsetLeft}px)`;
+      pill.style.width = `${active.offsetWidth}px`;
+      return;
+    }
+    // Suspend, write, reflow, restore. Without the reflow the browser
+    // coalesces the two writes and the snap animates anyway.
+    pill.style.transition = "none";
+    pill.style.transform = `translateX(${active.offsetLeft}px)`;
+    pill.style.width = `${active.offsetWidth}px`;
+    void pill.offsetWidth;
+    pill.style.transition = "";
+  }
+
+  // Position first, THEN hand the highlight over. Swapped, one frame draws both
+  // the trigger's own background and a zero-width pill: a flicker on hydration.
+  move(false);
+  list.dataset.pill = "on";
+  settled = true;
+
+  // The selection lives in an attribute bits-ui owns, and a badge arriving
+  // changes a trigger's width without any attribute changing.
+  const attributes = new MutationObserver(() => move(settled));
+  attributes.observe(list, {
+    subtree: true,
+    childList: true,
+    attributes: true,
+    attributeFilter: ["data-state", "aria-current", "aria-pressed"],
+  });
+
+  // A list that reflows (a rail collapsing, a font landing) re-measures
+  // without motion: nothing was chosen, so nothing should travel.
+  const resize = new ResizeObserver(() => move(false));
+  resize.observe(list);
+
+  return () => {
+    attributes.disconnect();
+    resize.disconnect();
+    delete list.dataset.pill;
+  };
+};

package/src/lib/theme-transition.ts

@@ -3,41 +3,45 @@ export interface RevealThemeOptions {
   skip?: boolean;
   /** Wipe length in ms. */
   duration?: number;
+  /** Wipe easing, any CSS easing value. */
+  easing?: string;
 }
 
+/** Where the wipe grows from: a click, an element, or a point in the viewport. */
+export type RevealOrigin = MouseEvent | Element | { x: number; y: number };
+
 const DEFAULT_DURATION = 400;
+const STYLE_ID = "heyramzi-reveal-theme";
 
 /**
  * Run `apply` inside a circular wipe that grows from the centre of the clicked
- * element. Falls back to a plain `apply()` when the browser has no view
- * transitions, the user prefers reduced motion, or `skip` is set.
- *
- * The page also needs `::view-transition-old(root)` and `::view-transition-new(root)`
- * set to `animation: none`. `ThemeToggle` ships that CSS; a bare caller adds its own.
+ * element, the element, or a point. Falls back to a plain `apply()` when the
+ * browser has no view transitions, the user prefers reduced motion, or `skip`
+ * is set. It adds the `::view-transition-*(root)` reset itself.
  */
 export function revealTheme(
-  event: MouseEvent,
+  origin: RevealOrigin,
   apply: () => void,
   options: RevealThemeOptions = {},
 ): void {
-  const { skip = false, duration = DEFAULT_DURATION } = options;
-  const origin = event.currentTarget;
+  const { skip = false, duration = DEFAULT_DURATION, easing = "ease-in-out" } = options;
+  const point = resolveOrigin(origin);
 
   const prefersReduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 
-  if (skip || prefersReduced || !document.startViewTransition || !(origin instanceof Element)) {
+  if (skip || prefersReduced || !document.startViewTransition || !point) {
     apply();
     return;
   }
 
-  const rect = origin.getBoundingClientRect();
-  const x = rect.left + rect.width / 2;
-  const y = rect.top + rect.height / 2;
+  const { x, y } = point;
   const endRadius = Math.hypot(
     Math.max(x, window.innerWidth - x),
     Math.max(y, window.innerHeight - y),
   );
 
+  ensureStyles();
+
   const transition = document.startViewTransition(() => {
     apply();
   });
@@ -45,7 +49,31 @@ export function revealTheme(
   transition.ready.then(() => {
     document.documentElement.animate(
       { clipPath: [`circle(0px at ${x}px ${y}px)`, `circle(${endRadius}px at ${x}px ${y}px)`] },
-      { duration, easing: "ease-in-out", pseudoElement: "::view-transition-new(root)" },
+      { duration, easing, pseudoElement: "::view-transition-new(root)" },
     );
   });
 }
+
+function centreOf(element: Element): { x: number; y: number } {
+  const rect = element.getBoundingClientRect();
+  return { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
+}
+
+// A click on a child still wipes from the control that owns the handler.
+function resolveOrigin(origin: RevealOrigin): { x: number; y: number } | null {
+  if (origin instanceof Element) return centreOf(origin);
+  if (origin instanceof MouseEvent) {
+    return origin.currentTarget instanceof Element
+      ? centreOf(origin.currentTarget)
+      : { x: origin.clientX, y: origin.clientY };
+  }
+  return origin;
+}
+
+function ensureStyles(): void {
+  if (document.getElementById(STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = `::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal;}`;
+  document.head.appendChild(style);
+}

package/src/lib/tone.ts

@@ -0,0 +1,48 @@
+export type Tone = "neutral" | "accent" | "info" | "success" | "warning" | "destructive";
+
+/**
+ * The severity scale, as Tailwind classes for a chip and as CSS colors for the
+ * dot. Tokens are plain CSS variables, so a host app can retheme them. The
+ * accent tone reads `--tone-accent` and falls back to `--color-primary`, for a
+ * host whose primary is a neutral and whose accent is a brand color.
+ */
+
+export const TONE_CLASS: Record<Tone, string> = {
+  neutral: "border-border bg-muted/40 text-muted-foreground",
+  accent:
+    "border-[color-mix(in_oklab,var(--tone-accent,var(--color-primary))_30%,transparent)] bg-[color-mix(in_oklab,var(--tone-accent,var(--color-primary))_10%,transparent)] text-[color:var(--tone-accent,var(--color-primary))]",
+  info: "border-info/30 bg-info/10 text-info-800 dark:text-info-400",
+  success: "border-success/30 bg-success/10 text-success-800 dark:text-success-400",
+  warning: "border-warning/30 bg-warning/10 text-warning-800 dark:text-warning-400",
+  destructive: "border-destructive/30 bg-destructive/10 text-destructive",
+};
+
+/** The same scale as text, for a verdict inside a line of muted facts. */
+export const TONE_TEXT: Record<Tone, string> = {
+  neutral: "text-muted-foreground",
+  accent: "text-[color:var(--tone-accent,var(--color-primary))]",
+  info: "text-info-800 dark:text-info-400",
+  success: "text-success-800 dark:text-success-400",
+  warning: "text-warning-800 dark:text-warning-400",
+  destructive: "text-destructive",
+};
+
+/** The same scale as icon color. */
+export const TONE_ICON: Record<Tone, string> = {
+  neutral: "text-muted-foreground",
+  accent: "text-[color:var(--tone-accent,var(--color-primary))]",
+  info: "text-info",
+  success: "text-success",
+  warning: "text-warning",
+  destructive: "text-destructive",
+};
+
+/** The scale as CSS colors, for the SVG dot. */
+export const TONE_COLOR: Record<Tone, string> = {
+  neutral: "var(--color-muted-foreground)",
+  accent: "var(--tone-accent,var(--color-primary))",
+  info: "var(--color-info)",
+  success: "var(--color-success)",
+  warning: "var(--color-warning)",
+  destructive: "var(--color-destructive)",
+};