@cl-light-ds/ui 0.4.0 → 0.6.0

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", "segmented"] as const;
 export const TOGGLE_SIZES = ["xs", "default", "sm", "lg"] as const;
 
 export type ToggleVariant = (typeof TOGGLE_VARIANTS)[number];
@@ -13,6 +13,14 @@ 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",
+        // C26 — outline, with the pressed item `muted` and in `foreground` text
+        // (a view switcher). Made for ToggleGroup, which also keeps it `muted`
+        // on hover; follows the runtime's `aria-pressed`.
+        segmented:
+          "border-input hover:bg-background-hover border bg-transparent shadow-xs aria-pressed:bg-muted aria-pressed:text-foreground",
       },
       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,35 @@
+# Changelog
+
+All notable changes to the design tokens in `globals.css` will be documented in this file.
+
+## Date 15th Oct 2026
+## Workspace selection handover (C27)
+
+### Type styles
+
+- Three utilities (`@utility`) for page and section headings (D98–D101), so screens don't repeat the size, weight and colour:
+  - `type-page-greeting`: the page title as a greeting ("Good morning, …"), `font-heading` 24/32 (`text-2xl`), semibold, `tracking-tight`, `foreground`.
+  - `type-section-title`: a section heading ("Recents", "All workspaces"), 16/24 (`text-base`) semibold, `foreground`.
+  - `type-section-meta`: the small muted text beside a section heading (a subtext, a count), 14/20 (`text-sm`) regular, `muted-foreground`; resets weight and tracking, so it can sit inside the heading (on its baseline: `flex items-baseline gap-2` on the heading).
+- Named `type-*` rather than `text-*`, so tailwind-merge (`cn()`) doesn't read them as a text colour or size and drop them next to one. Layout (baseline row, gaps) stays with the screen.
+- Replaces the workspace-selection screen's `sectionHeading` / `besideHeading` class strings and the greeting's classes. **Not in Figma yet.**
+- Storybook: a "Type styles" section on Foundations › Fonts.
+
+## 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);
@@ -193,6 +280,28 @@
   --table-row-selected: color-mix(in oklab, var(--primary-500) 20%, var(--background));
 }
 
+/*
+ * Type styles (C27, D98–D101): page and section headings in one class each,
+ * so screens don't repeat the size, weight and colour.
+ * - type-page-greeting: the page title as a greeting, 24/32 heading font, semibold.
+ * - type-section-title: a section heading ("Recents", "All workspaces"), 16/24 semibold.
+ * - type-section-meta: the small muted text beside a section heading (a subtext,
+ *   a count), 14/20 regular; resets weight and tracking when nested in the title.
+ * Named type-* rather than text-*, so tailwind-merge doesn't read them as a
+ * text colour or size and drop them next to one in cn().
+ */
+@utility type-page-greeting {
+  @apply font-heading text-2xl font-semibold tracking-tight text-foreground;
+}
+
+@utility type-section-title {
+  @apply text-base font-semibold text-foreground;
+}
+
+@utility type-section-meta {
+  @apply text-sm font-normal tracking-normal text-muted-foreground;
+}
+
 @layer base {
   * {
     @apply border-border outline-ring/50;