@cl-light-ds/ui 0.4.0 → 0.5.0

package/src/lib/loading-overlay.ts

@@ -0,0 +1,174 @@
+/**
+ * Controller for the `LoadingOverlay` component
+ * (`@cl-light-ds/ui/components/loading-overlay`). Works on the overlay's markup
+ * directly, so it can be called from any script, before or after the
+ * component's own script has run.
+ *
+ * ```ts
+ * import { showLoadingOverlay, revealLoadingOverlay, hideLoadingOverlay } from "@cl-light-ds/ui/lib/loading-overlay";
+ *
+ * showLoadingOverlay({ title: "Opening workspace…", lines: ["Loading your recordings…", "Fetching guides and assets…"] });
+ * await work();
+ * await revealLoadingOverlay(); // fade the dimming away to what is behind it
+ * ```
+ *
+ * The same is available as events on the overlay element:
+ * `loading-overlay:show` (detail: the show options), `loading-overlay:hide`,
+ * `loading-overlay:reveal` (detail: `{ duration }`), `loading-overlay:behind`
+ * (detail: `{ show }`). It fires `loading-overlay:change` (`{ open }`).
+ */
+
+export interface LoadingOverlayShowOptions {
+  /** Big title, e.g. "Opening workspace…". Defaults to the component's `title`. */
+  title?: string;
+  /** Status lines shown in turn under the title. Defaults to the component's `lines`. */
+  lines?: string[];
+  /** ms between status lines. Defaults to the component's `interval` (900). */
+  interval?: number;
+  /** Start again after the last line instead of staying on it. */
+  loop?: boolean;
+  /**
+   * Fade in the `behind` slot's content under the dimming: `true` at once, a
+   * number of ms to wait first, `false` not at all (default).
+   */
+  behind?: boolean | number;
+  /** Which overlay: its id or element. Defaults to the first on the page. */
+  overlay?: string | HTMLElement;
+}
+
+type Target = string | HTMLElement | undefined;
+
+interface RunState {
+  lineTimer?: number;
+  behindTimer?: number;
+  hideTimer?: number;
+  returnFocus?: HTMLElement | null;
+}
+
+const ROOT = '[data-slot="loading-overlay"]';
+const runs = new WeakMap<HTMLElement, RunState>();
+
+const findOverlay = (overlay: Target): HTMLElement | null => {
+  if (typeof document === "undefined") return null;
+  if (overlay instanceof HTMLElement) return overlay;
+  if (typeof overlay === "string") return document.getElementById(overlay);
+  return document.querySelector<HTMLElement>(ROOT);
+};
+
+const part = (root: HTMLElement, name: string) =>
+  root.querySelector<HTMLElement>(`[data-slot="loading-overlay-${name}"]`);
+
+const readLines = (root: HTMLElement): string[] => {
+  try {
+    const lines = JSON.parse(root.dataset.lines ?? "[]");
+    return Array.isArray(lines) ? lines.map(String) : [];
+  } catch {
+    return [];
+  }
+};
+
+const stop = (root: HTMLElement) => {
+  const run = runs.get(root);
+  if (!run) return run;
+  window.clearInterval(run.lineTimer);
+  window.clearTimeout(run.behindTimer);
+  window.clearTimeout(run.hideTimer);
+  return run;
+};
+
+const emit = (root: HTMLElement, open: boolean) =>
+  root.dispatchEvent(new CustomEvent("loading-overlay:change", { detail: { open } }));
+
+/** Show the overlay (or restart it with new text). */
+export function showLoadingOverlay(options: LoadingOverlayShowOptions = {}) {
+  const root = findOverlay(options.overlay);
+  if (!root) return;
+  const wasOpen = !root.hidden;
+  const previous = stop(root);
+  const run: RunState = {
+    returnFocus: wasOpen
+      ? previous?.returnFocus
+      : (document.activeElement as HTMLElement | null),
+  };
+  runs.set(root, run);
+
+  const title = part(root, "title");
+  const status = part(root, "status");
+  if (title && options.title !== undefined) title.textContent = options.title;
+  const lines = options.lines ?? readLines(root);
+  const interval = options.interval ?? (Number(root.dataset.interval) || 900);
+  const loop = options.loop ?? root.dataset.loop === "true";
+  let at = 0;
+  if (status) {
+    status.textContent = lines[0] ?? "";
+    status.hidden = lines.length === 0;
+  }
+  if (lines.length > 1) {
+    run.lineTimer = window.setInterval(() => {
+      at = loop ? (at + 1) % lines.length : Math.min(at + 1, lines.length - 1);
+      if (status) status.textContent = lines[at];
+    }, interval);
+  }
+
+  root.dataset.reveal = "off";
+  root.dataset.behind = "off";
+  const behind = options.behind ?? false;
+  if (behind !== false) {
+    run.behindTimer = window.setTimeout(
+      () => setLoadingOverlayBehind(true, root),
+      behind === true ? 0 : behind,
+    );
+  }
+
+  root.hidden = false;
+  root.setAttribute("aria-busy", "true");
+  // Keyboard focus moves off whatever is now covered.
+  root.focus({ preventScroll: true });
+  if (!wasOpen) emit(root, true);
+}
+
+/** Fade the `behind` slot's content in (or out) under the dimming. */
+export function setLoadingOverlayBehind(show: boolean, overlay?: Target) {
+  const root = findOverlay(overlay);
+  if (root && !root.hidden) root.dataset.behind = show ? "on" : "off";
+}
+
+/** Hide the overlay at once. */
+export function hideLoadingOverlay(overlay?: Target) {
+  const root = findOverlay(overlay);
+  if (!root || root.hidden) return;
+  const run = stop(root);
+  runs.delete(root);
+  root.hidden = true;
+  root.removeAttribute("aria-busy");
+  root.dataset.reveal = "off";
+  root.dataset.behind = "off";
+  if (root.contains(document.activeElement) && run?.returnFocus?.isConnected)
+    run.returnFocus.focus({ preventScroll: true });
+  emit(root, false);
+}
+
+/**
+ * Fade the dimming, spinner and text away, revealing what is behind (the
+ * page, or the `behind` slot), then hide. Resolves once hidden.
+ */
+export function revealLoadingOverlay(
+  options: { duration?: number; overlay?: Target } = {},
+): Promise<void> {
+  const root = findOverlay(options.overlay);
+  if (!root || root.hidden) return Promise.resolve();
+  const run = runs.get(root) ?? {};
+  window.clearInterval(run.lineTimer);
+  window.clearTimeout(run.hideTimer);
+  runs.set(root, run);
+  const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  const duration = reduced ? 0 : (options.duration ?? 700);
+  root.dataset.reveal = "on";
+  root.removeAttribute("aria-busy");
+  return new Promise((resolve) => {
+    run.hideTimer = window.setTimeout(() => {
+      hideLoadingOverlay(root);
+      resolve();
+    }, duration);
+  });
+}

package/src/lib/toast.ts

@@ -0,0 +1,127 @@
+/**
+ * Imperative API for the `Toaster` component (`@cl-light-ds/ui/components/toast`).
+ *
+ * `Toaster` binds `@data-slot/toast` to its root; this module talks to that
+ * root through the runtime's inbound events (`toast:show`, `toast:update`,
+ * `toast:dismiss`, `toast:clear`), so it never needs the controller itself and
+ * works from any bundled script on the page.
+ *
+ * ```ts
+ * import { toast } from "@cl-light-ds/ui/lib/toast";
+ *
+ * const id = toast({ kind: "success", title: "Export ready", description: "Acme.zip", action: { label: "Download", href: "/acme.zip", download: true } });
+ * toast.dismiss(id);
+ * ```
+ *
+ * Calls made before the Toaster's script has run are queued and replayed once
+ * it is ready (`toaster:ready`).
+ */
+
+export type ToastKind = "info" | "success" | "error";
+
+export interface ToastActionOptions {
+  /** The action button's label, e.g. "Download". */
+  label: string;
+  /** Runs on click. Call `event.preventDefault()` to keep the toast open. */
+  onClick?: (event: { readonly defaultPrevented: boolean; preventDefault(): void }) => void;
+  /** Sent with the root's `toast:action` event. */
+  value?: string;
+  /** Opens (or downloads) this URL on click. */
+  href?: string;
+  /** With `href`: download the file; a string names the saved file. */
+  download?: boolean | string;
+}
+
+export interface ToastShowOptions {
+  /** Reuse an id to replace a toast in place. Generated when left out. */
+  id?: string;
+  /** `info` (blue icon, default), `success` (green), `error` (red tint, shakes). */
+  kind?: ToastKind;
+  title: string;
+  description?: string;
+  /** ms before it closes by itself; `0` = stays until closed. Defaults to the Toaster's `duration`. */
+  duration?: number;
+  action?: ToastActionOptions;
+  /** `false` hides nothing but disables swipe-to-dismiss. */
+  dismissible?: boolean;
+  /** Accessible name of the ✕ (default "Close"). */
+  closeLabel?: string;
+  /** Which Toaster: its id or element. Defaults to the first on the page. */
+  toaster?: string | HTMLElement;
+}
+
+export type ToastUpdateOptions = Partial<Omit<ToastShowOptions, "id" | "toaster">> & {
+  toaster?: string | HTMLElement;
+};
+
+const ROOT = '[data-slot="toast"]';
+const KINDS: readonly ToastKind[] = ["info", "success", "error"];
+let counter = 0;
+
+const findRoot = (toaster?: string | HTMLElement): HTMLElement | null => {
+  if (typeof document === "undefined") return null;
+  if (toaster instanceof HTMLElement) return toaster;
+  if (typeof toaster === "string") return document.getElementById(toaster);
+  return document.querySelector<HTMLElement>(ROOT);
+};
+
+/** Send an inbound event, waiting for the Toaster to be bound if needed. */
+const send = (root: HTMLElement | null, name: string, detail?: unknown) => {
+  if (!root) {
+    console.warn(`[toast] No <Toaster /> found on the page for "${name}".`);
+    return;
+  }
+  const fire = () => root.dispatchEvent(new CustomEvent(name, { detail }));
+  if (root.dataset.toasterReady === "true") fire();
+  else root.addEventListener("toaster:ready", fire, { once: true });
+};
+
+const toRuntimeAction = (action: ToastActionOptions) => ({
+  label: action.label,
+  value: action.value,
+  onClick: (event: { readonly defaultPrevented: boolean; preventDefault(): void }) => {
+    if (action.href) {
+      const link = document.createElement("a");
+      link.href = action.href;
+      if (action.download)
+        link.download = typeof action.download === "string" ? action.download : "";
+      link.rel = "noopener";
+      link.click();
+    }
+    action.onClick?.(event);
+  },
+});
+
+const toRuntime = (options: Partial<ToastShowOptions>) => {
+  const detail: Record<string, unknown> = {};
+  if (options.title !== undefined) detail.title = options.title;
+  if (options.description !== undefined) detail.description = options.description;
+  if (options.kind !== undefined)
+    detail.type = KINDS.includes(options.kind) ? options.kind : "info";
+  if (options.duration !== undefined) detail.duration = options.duration;
+  if (options.dismissible !== undefined) detail.dismissible = options.dismissible;
+  if (options.closeLabel !== undefined) detail.closeButtonAriaLabel = options.closeLabel;
+  if (options.action !== undefined) detail.action = toRuntimeAction(options.action);
+  return detail;
+};
+
+/** Show a toast; returns its id. */
+export function toast(options: ToastShowOptions): string {
+  const id = options.id ?? `toast-${Date.now().toString(36)}-${(counter += 1)}`;
+  send(findRoot(options.toaster), "toast:show", {
+    ...toRuntime({ kind: "info", ...options }),
+    id,
+  });
+  return id;
+}
+
+/** Change a toast that is still showing. */
+toast.update = (id: string, patch: ToastUpdateOptions) =>
+  send(findRoot(patch.toaster), "toast:update", { ...toRuntime(patch), id });
+
+/** Close one toast. */
+toast.dismiss = (id: string, toaster?: string | HTMLElement) =>
+  send(findRoot(toaster), "toast:dismiss", { id });
+
+/** Close every toast (what "Clear all" does). */
+toast.clear = (toaster?: string | HTMLElement) => send(findRoot(toaster), "toast:clear");

package/src/lib/toggle-shared.ts

@@ -1,6 +1,6 @@
 import { cva, type VariantProps } from "class-variance-authority";
 
-export const TOGGLE_VARIANTS = ["default", "outline"] as const;
+export const TOGGLE_VARIANTS = ["default", "outline", "ghost"] as const;
 export const TOGGLE_SIZES = ["xs", "default", "sm", "lg"] as const;
 
 export type ToggleVariant = (typeof TOGGLE_VARIANTS)[number];
@@ -13,6 +13,9 @@ export const toggleVariants = cva(
       variant: {
         default: "bg-transparent",
         outline: "border-input hover:bg-background-hover border bg-transparent shadow-xs",
+        // Pressed shows in the content only (e.g. a filled star): no pressed
+        // background, the normal hover background on hover.
+        ghost: "bg-transparent aria-pressed:bg-transparent aria-pressed:hover:bg-background-hover",
       },
       size: {
         xs: "h-7 min-w-7 px-1",

package/src/lib/workspace-palette.ts

@@ -0,0 +1,119 @@
+/**
+ * Workspace palette: the 12 decorative hues a workspace can be given, mapped to
+ * the Tailwind classes each coloured part uses. Backed by the `--workspace-*`
+ * tokens in globals.css.
+ *
+ * Literal class strings, so Tailwind generates them.
+ *
+ * - `solid`    avatar background (white icon on it)
+ * - `text`     the icon colour on a white or tinted avatar
+ * - `tint`     the soft avatar background
+ * - `gradient` the large recent card: the hue at 50% to its deep shade at 50%,
+ *              over a neutral grey, so it reads washed out rather than vivid.
+ *              Add a direction yourself, e.g. `bg-linear-to-br`.
+ */
+
+export const WORKSPACE_COLORS = [
+  "purple",
+  "red",
+  "blue",
+  "emerald",
+  "orange",
+  "teal",
+  "indigo",
+  "amber",
+  "pink",
+  "sky",
+  "lime",
+  "slate",
+] as const;
+
+export type WorkspaceColor = (typeof WORKSPACE_COLORS)[number];
+
+/** The colour a new workspace starts with. */
+export const DEFAULT_WORKSPACE_COLOR: WorkspaceColor = "blue";
+
+export interface WorkspaceSwatch {
+  solid: string;
+  text: string;
+  tint: string;
+  gradient: string;
+}
+
+export const workspacePalette: Record<WorkspaceColor, WorkspaceSwatch> = {
+  purple: {
+    solid: "bg-workspace-purple",
+    text: "text-workspace-purple",
+    tint: "bg-workspace-purple-tint",
+    gradient: "bg-workspace-gradient-base from-workspace-purple/50 to-workspace-purple-deep/50",
+  },
+  red: {
+    solid: "bg-workspace-red",
+    text: "text-workspace-red",
+    tint: "bg-workspace-red-tint",
+    gradient: "bg-workspace-gradient-base from-workspace-red/50 to-workspace-red-deep/50",
+  },
+  blue: {
+    solid: "bg-workspace-blue",
+    text: "text-workspace-blue",
+    tint: "bg-workspace-blue-tint",
+    gradient: "bg-workspace-gradient-base from-workspace-blue/50 to-workspace-blue-deep/50",
+  },
+  emerald: {
+    solid: "bg-workspace-emerald",
+    text: "text-workspace-emerald",
+    tint: "bg-workspace-emerald-tint",
+    gradient: "bg-workspace-gradient-base from-workspace-emerald/50 to-workspace-emerald-deep/50",
+  },
+  orange: {
+    solid: "bg-workspace-orange",
+    text: "text-workspace-orange",
+    tint: "bg-workspace-orange-tint",
+    gradient: "bg-workspace-gradient-base from-workspace-orange/50 to-workspace-orange-deep/50",
+  },
+  teal: {
+    solid: "bg-workspace-teal",
+    text: "text-workspace-teal",
+    tint: "bg-workspace-teal-tint",
+    gradient: "bg-workspace-gradient-base from-workspace-teal/50 to-workspace-teal-deep/50",
+  },
+  indigo: {
+    solid: "bg-workspace-indigo",
+    text: "text-workspace-indigo",
+    tint: "bg-workspace-indigo-tint",
+    gradient: "bg-workspace-gradient-base from-workspace-indigo/50 to-workspace-indigo-deep/50",
+  },
+  amber: {
+    solid: "bg-workspace-amber",
+    text: "text-workspace-amber",
+    tint: "bg-workspace-amber-tint",
+    gradient: "bg-workspace-gradient-base from-workspace-amber/50 to-workspace-amber-deep/50",
+  },
+  pink: {
+    solid: "bg-workspace-pink",
+    text: "text-workspace-pink",
+    tint: "bg-workspace-pink-tint",
+    gradient: "bg-workspace-gradient-base from-workspace-pink/50 to-workspace-pink-deep/50",
+  },
+  sky: {
+    solid: "bg-workspace-sky",
+    text: "text-workspace-sky",
+    tint: "bg-workspace-sky-tint",
+    gradient: "bg-workspace-gradient-base from-workspace-sky/50 to-workspace-sky-deep/50",
+  },
+  lime: {
+    solid: "bg-workspace-lime",
+    text: "text-workspace-lime",
+    tint: "bg-workspace-lime-tint",
+    gradient: "bg-workspace-gradient-base from-workspace-lime/50 to-workspace-lime-deep/50",
+  },
+  slate: {
+    solid: "bg-workspace-slate",
+    text: "text-workspace-slate",
+    tint: "bg-workspace-slate-tint",
+    gradient: "bg-workspace-gradient-base from-workspace-slate/50 to-workspace-slate-deep/50",
+  },
+};
+
+/** The brand gradient (primary to its deep blue), for brand-toned surfaces. Add a direction yourself. */
+export const brandGradient = "from-primary to-chart-4";

package/src/styles/CHANGELOG.md

@@ -0,0 +1,22 @@
+# Changelog
+
+All notable changes to the design tokens in `globals.css` will be documented in this file.
+
+## Date 15th Oct 2026
+## Workspace selection handover (N1, N8, N19, C17)
+
+### Feedback colours (gaps G7, G13)
+
+- Uses the existing `--warning`, `--warning-foreground` and `--callout-background-*` tokens (utilities `*-warning`, `*-callout-info/-warning/-error`).
+- Added `--callout-foreground-warning` (Yellow/800) and `--callout-foreground-error` (Red/700); Yellow/300 and Red/300 in dark mode: darker text that reads on the callout backgrounds. **Not in Figma yet.**
+
+### Favourite (gap G3)
+
+- `--favorite` (Yellow/500, utility `*-favorite`): the starred colour. Separate from `badge-warning` and `warning`, which were being borrowed for it. **Not in Figma yet.**
+
+### Workspace palette (gap G4)
+
+- 12 decorative hues for workspace avatars and cards: purple, red, blue, emerald, orange, teal, indigo, amber, pink, sky, lime, slate. Each has `--workspace-{hue}` (600: solid background and icon colour), `--workspace-{hue}-tint` (100: soft background) and `--workspace-{hue}-deep` (800: gradient end). `--workspace-gradient-base` (Zinc/600) sits under the large card's gradient. **Not in Figma yet.**
+- `lib/workspace-palette.ts` maps each hue to its class strings (`solid`, `text`, `tint`, `gradient`), plus `WORKSPACE_COLORS`, `DEFAULT_WORKSPACE_COLOR` (`blue`) and `brandGradient` (`from-primary to-chart-4`). It's a drop-in replacement for the screen's `palette.ts`.
+- No dark-mode values for the palette yet.
+- Storybook: a "Workspace palette" section on Foundations › Colors.

package/src/styles/globals.css

@@ -42,6 +42,46 @@
   --color-callout-info: var(--callout-background-info);
   --color-callout-warning: var(--callout-background-warning);
   --color-callout-error: var(--callout-background-error);
+  --color-callout-foreground-warning: var(--callout-foreground-warning);
+  --color-callout-foreground-error: var(--callout-foreground-error);
+  --color-favorite: var(--favorite);
+  --color-workspace-gradient-base: var(--workspace-gradient-base);
+  --color-workspace-purple: var(--workspace-purple);
+  --color-workspace-purple-tint: var(--workspace-purple-tint);
+  --color-workspace-purple-deep: var(--workspace-purple-deep);
+  --color-workspace-red: var(--workspace-red);
+  --color-workspace-red-tint: var(--workspace-red-tint);
+  --color-workspace-red-deep: var(--workspace-red-deep);
+  --color-workspace-blue: var(--workspace-blue);
+  --color-workspace-blue-tint: var(--workspace-blue-tint);
+  --color-workspace-blue-deep: var(--workspace-blue-deep);
+  --color-workspace-emerald: var(--workspace-emerald);
+  --color-workspace-emerald-tint: var(--workspace-emerald-tint);
+  --color-workspace-emerald-deep: var(--workspace-emerald-deep);
+  --color-workspace-orange: var(--workspace-orange);
+  --color-workspace-orange-tint: var(--workspace-orange-tint);
+  --color-workspace-orange-deep: var(--workspace-orange-deep);
+  --color-workspace-teal: var(--workspace-teal);
+  --color-workspace-teal-tint: var(--workspace-teal-tint);
+  --color-workspace-teal-deep: var(--workspace-teal-deep);
+  --color-workspace-indigo: var(--workspace-indigo);
+  --color-workspace-indigo-tint: var(--workspace-indigo-tint);
+  --color-workspace-indigo-deep: var(--workspace-indigo-deep);
+  --color-workspace-amber: var(--workspace-amber);
+  --color-workspace-amber-tint: var(--workspace-amber-tint);
+  --color-workspace-amber-deep: var(--workspace-amber-deep);
+  --color-workspace-pink: var(--workspace-pink);
+  --color-workspace-pink-tint: var(--workspace-pink-tint);
+  --color-workspace-pink-deep: var(--workspace-pink-deep);
+  --color-workspace-sky: var(--workspace-sky);
+  --color-workspace-sky-tint: var(--workspace-sky-tint);
+  --color-workspace-sky-deep: var(--workspace-sky-deep);
+  --color-workspace-lime: var(--workspace-lime);
+  --color-workspace-lime-tint: var(--workspace-lime-tint);
+  --color-workspace-lime-deep: var(--workspace-lime-deep);
+  --color-workspace-slate: var(--workspace-slate);
+  --color-workspace-slate-tint: var(--workspace-slate-tint);
+  --color-workspace-slate-deep: var(--workspace-slate-deep);
   --color-badge-success: var(--badge-success);
   --color-badge-success-foreground: var(--badge-success-foreground);
   --color-badge-warning: var(--badge-warning);
@@ -114,6 +154,51 @@
   --callout-background-info: var(--primary-50);
   --callout-background-warning: #fefce8;
   --callout-background-error: #fef2f2;
+  /* Darker text that reads on the callout backgrounds. */
+  --callout-foreground-warning: var(--color-yellow-800);
+  --callout-foreground-error: var(--color-red-700);
+  /* Favourite / starred state. Separate from the badge and warning yellows so they can change independently. */
+  --favorite: var(--color-yellow-500);
+  /* Workspace palette: 12 decorative hues for workspace avatars and cards.
+     {hue} = solid background / icon colour, {hue}-tint = soft background, {hue}-deep = gradient end.
+     The large card gradient is `{hue}/50 -> {hue}-deep/50` over `workspace-gradient-base`. */
+  --workspace-gradient-base: var(--color-zinc-600);
+  --workspace-purple: var(--color-purple-600);
+  --workspace-purple-tint: var(--color-purple-100);
+  --workspace-purple-deep: var(--color-purple-800);
+  --workspace-red: var(--color-red-600);
+  --workspace-red-tint: var(--color-red-100);
+  --workspace-red-deep: var(--color-red-800);
+  --workspace-blue: var(--color-blue-600);
+  --workspace-blue-tint: var(--color-blue-100);
+  --workspace-blue-deep: var(--color-blue-800);
+  --workspace-emerald: var(--color-emerald-600);
+  --workspace-emerald-tint: var(--color-emerald-100);
+  --workspace-emerald-deep: var(--color-emerald-800);
+  --workspace-orange: var(--color-orange-600);
+  --workspace-orange-tint: var(--color-orange-100);
+  --workspace-orange-deep: var(--color-orange-800);
+  --workspace-teal: var(--color-teal-600);
+  --workspace-teal-tint: var(--color-teal-100);
+  --workspace-teal-deep: var(--color-teal-800);
+  --workspace-indigo: var(--color-indigo-600);
+  --workspace-indigo-tint: var(--color-indigo-100);
+  --workspace-indigo-deep: var(--color-indigo-800);
+  --workspace-amber: var(--color-amber-600);
+  --workspace-amber-tint: var(--color-amber-100);
+  --workspace-amber-deep: var(--color-amber-800);
+  --workspace-pink: var(--color-pink-600);
+  --workspace-pink-tint: var(--color-pink-100);
+  --workspace-pink-deep: var(--color-pink-800);
+  --workspace-sky: var(--color-sky-600);
+  --workspace-sky-tint: var(--color-sky-100);
+  --workspace-sky-deep: var(--color-sky-800);
+  --workspace-lime: var(--color-lime-600);
+  --workspace-lime-tint: var(--color-lime-100);
+  --workspace-lime-deep: var(--color-lime-800);
+  --workspace-slate: var(--color-slate-600);
+  --workspace-slate-tint: var(--color-slate-100);
+  --workspace-slate-deep: var(--color-slate-800);
   --badge-success: var(--color-green-700);
   --badge-success-foreground: var(--color-white);
   --badge-warning: var(--color-yellow-500);
@@ -173,6 +258,8 @@
   --callout-background-info: color-mix(in oklab, var(--primary-500) 15%, var(--background));
   --callout-background-warning: color-mix(in oklab, #eab308 12%, var(--background));
   --callout-background-error: color-mix(in oklab, var(--color-red-600) 15%, var(--background));
+  --callout-foreground-warning: var(--color-yellow-300);
+  --callout-foreground-error: var(--color-red-300);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
   --ring: oklch(0.556 0 0);