@cosxai/ui 0.25.0 → 1.0.0-alpha.1

package/src/components/overlays.test.tsx

@@ -0,0 +1,245 @@
+import { act, render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useState } from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import { a11y } from '../../test/a11y';
+import { Button } from './Button';
+import { Dialog, DialogClose, DialogContent, DialogTrigger } from './Dialog';
+import { Table, type TableSort } from './Table';
+import { TabPanel, Tabs } from './Tabs';
+import { Toaster, toast } from './Toast';
+import { Tooltip } from './Tooltip';
+
+
+describe('Tabs', () => {
+  const items = [
+    { value: 'overview', label: 'Overview' },
+    { value: 'documents', label: 'Documents', count: 3 },
+    { value: 'parties', label: 'Parties', count: 0 },
+  ];
+
+  it('arrow keys move and aria-selected follows; onChange reports the value', async () => {
+    const onChange = vi.fn();
+    render(
+      <Tabs items={items} defaultValue="overview" onChange={onChange} label="Project">
+        <TabPanel value="overview">Overview panel</TabPanel>
+        <TabPanel value="documents">Documents panel</TabPanel>
+        <TabPanel value="parties">Parties panel</TabPanel>
+      </Tabs>,
+    );
+    const tabs = screen.getAllByRole('tab');
+    expect(tabs[0]).toHaveAttribute('aria-selected', 'true');
+    await userEvent.click(tabs[0]!);
+    await userEvent.keyboard('{ArrowRight}');
+    expect(tabs[1]).toHaveAttribute('aria-selected', 'true');
+    expect(onChange).toHaveBeenLastCalledWith('documents');
+    expect(screen.getByRole('tabpanel')).toHaveTextContent('Documents panel');
+    await userEvent.keyboard('{End}');
+    expect(tabs[2]).toHaveAttribute('aria-selected', 'true');
+  });
+
+  it('count shows as a badge, hidden at zero', () => {
+    render(<Tabs items={items} defaultValue="overview" label="Project" />);
+    expect(screen.getByRole('tab', { name: 'Documents 3' })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: 'Parties' })).toBeInTheDocument();
+  });
+
+  it('passes axe (both variants)', async () => {
+    const { container } = render(
+      <div>
+        <Tabs items={items} defaultValue="overview" label="Underline">
+          <TabPanel value="overview">a</TabPanel>
+        </Tabs>
+        <Tabs variant="pills" items={items} defaultValue="documents" label="Pills">
+          <TabPanel value="documents">b</TabPanel>
+        </Tabs>
+      </div>,
+    );
+    expect(await a11y(container)).toHaveNoViolations();
+  });
+});
+
+describe('Dialog', () => {
+  function Revoke() {
+    return (
+      <Dialog>
+        <DialogTrigger asChild>
+          <Button variant="secondary">Revoke share</Button>
+        </DialogTrigger>
+        <DialogContent
+          size="sm"
+          title="Revoke this share?"
+          description="Anna loses access now."
+          footer={
+            <>
+              <DialogClose asChild>
+                <Button variant="secondary">Cancel</Button>
+              </DialogClose>
+              <Button variant="danger">Revoke share</Button>
+            </>
+          }
+        />
+      </Dialog>
+    );
+  }
+
+  it('is labelled by its title and described by its consequence', async () => {
+    render(<Revoke />);
+    await userEvent.click(screen.getByRole('button', { name: 'Revoke share' }));
+    const dialog = screen.getByRole('dialog', { name: 'Revoke this share?' });
+    expect(dialog).toHaveAccessibleDescription('Anna loses access now.');
+  });
+
+  it('traps focus, closes on Esc and returns focus to the trigger', async () => {
+    render(<Revoke />);
+    const trigger = screen.getByRole('button', { name: 'Revoke share' });
+    await userEvent.click(trigger);
+    const dialog = screen.getByRole('dialog');
+    expect(dialog.contains(document.activeElement)).toBe(true);
+    for (let i = 0; i < 6; i++) {
+      await userEvent.tab();
+      expect(dialog.contains(document.activeElement)).toBe(true);
+    }
+    await userEvent.keyboard('{Escape}');
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    expect(trigger).toHaveFocus();
+  });
+
+  it('passes axe while open', async () => {
+    render(<Revoke />);
+    await userEvent.click(screen.getByRole('button', { name: 'Revoke share' }));
+    expect(await a11y(document.body)).toHaveNoViolations();
+  });
+});
+
+describe('Toast', () => {
+  afterEach(() => {
+    act(() => toast.reset());
+    vi.useRealTimers();
+  });
+
+  it('is announced in a live region and leaves after 4s (8s with an action)', () => {
+    vi.useFakeTimers();
+    render(<Toaster />);
+    act(() => {
+      toast({ title: 'Link copied.' });
+      toast({ title: '3 files moved to Archive.', status: 'complete', action: { label: 'Undo', onClick: () => {} } });
+    });
+    // Radix announces toasts through a status live region.
+    expect(document.querySelector('[role="status"][aria-live]')).not.toBeNull();
+    expect(screen.getByText('Link copied.')).toBeInTheDocument();
+    act(() => vi.advanceTimersByTime(4100));
+    expect(screen.queryByText('Link copied.')).not.toBeInTheDocument();
+    expect(screen.getByText('3 files moved to Archive.')).toBeInTheDocument();
+    act(() => vi.advanceTimersByTime(4000));
+    expect(screen.queryByText('3 files moved to Archive.')).not.toBeInTheDocument();
+  });
+
+  it('shows the same error once per 30 seconds and at most three at once', () => {
+    render(<Toaster />);
+    act(() => {
+      expect(toast({ title: "Couldn't rename the folder.", status: 'error' })).not.toBeNull();
+      expect(toast({ title: "Couldn't rename the folder.", status: 'error' })).toBeNull();
+      toast({ title: 'One.' });
+      toast({ title: 'Two.' });
+      toast({ title: 'Three.' });
+    });
+    expect(screen.queryByText("Couldn't rename the folder.")).not.toBeInTheDocument();
+    expect(screen.getByText('Three.')).toBeInTheDocument();
+  });
+
+  it('never takes focus', () => {
+    render(
+      <>
+        <button>Work</button>
+        <Toaster />
+      </>,
+    );
+    screen.getByRole('button', { name: 'Work' }).focus();
+    act(() => void toast({ title: 'Link copied.' }));
+    expect(screen.getByRole('button', { name: 'Work' })).toHaveFocus();
+  });
+});
+
+describe('Tooltip', () => {
+  it('opens on keyboard focus as well as hover', async () => {
+    render(
+      <Tooltip content="Downloads are off for this share">
+        <button>Share</button>
+      </Tooltip>,
+    );
+    await userEvent.tab();
+    expect(screen.getByRole('button', { name: 'Share' })).toHaveFocus();
+    expect(await screen.findByRole('tooltip')).toHaveTextContent('Downloads are off for this share');
+  });
+
+  it('opens on hover', async () => {
+    render(
+      <Tooltip content="Star" delay={0}>
+        <button>☆</button>
+      </Tooltip>,
+    );
+    await userEvent.hover(screen.getByRole('button'));
+    expect(await screen.findByRole('tooltip')).toHaveTextContent('Star');
+  });
+});
+
+describe('Table', () => {
+  type Row = { id: string; status?: 'attention' | 'error'; task: string; docs: number };
+  const rows: Row[] = [
+    { id: 'T-119', task: 'Translate the term sheet', docs: 1 },
+    { id: 'T-122', status: 'error', task: 'Prepare the data room index', docs: 20 },
+    { id: 'T-131', status: 'attention', task: 'Sign the engagement letter', docs: 2 },
+  ];
+  const columns = [
+    { key: 'task', label: 'Task', sortable: true },
+    { key: 'docs', label: 'Docs', align: 'right' as const, sortable: true },
+  ];
+
+  function Sorted({ onRowClick }: { onRowClick: (r: Row) => void }) {
+    const [sort, setSort] = useState<TableSort>({ key: 'task', direction: 'asc' });
+    return <Table caption="Review queue" columns={columns} rows={rows} sort={sort} onSortChange={setSort} onRowClick={onRowClick} />;
+  }
+
+  it('sorting sets aria-sort on the header', async () => {
+    render(<Sorted onRowClick={() => {}} />);
+    const [task, docs] = screen.getAllByRole('columnheader');
+    expect(task).toHaveAttribute('aria-sort', 'ascending');
+    expect(docs).toHaveAttribute('aria-sort', 'none');
+    await userEvent.click(within(docs!).getByRole('button', { name: 'Docs' }));
+    expect(docs).toHaveAttribute('aria-sort', 'ascending');
+    await userEvent.click(within(docs!).getByRole('button', { name: 'Docs' }));
+    expect(docs).toHaveAttribute('aria-sort', 'descending');
+  });
+
+  it('rows open on click and on Enter from the keyboard', async () => {
+    const onRowClick = vi.fn();
+    render(<Sorted onRowClick={onRowClick} />);
+    const row = screen.getByRole('row', { name: /Prepare the data room index/ });
+    await userEvent.click(row);
+    expect(onRowClick).toHaveBeenLastCalledWith(rows[1]);
+    row.focus();
+    await userEvent.keyboard('{Enter}');
+    expect(onRowClick).toHaveBeenCalledTimes(2);
+  });
+
+  it('rows needing a person take a wash; the title can be a real link', () => {
+    render(<Table columns={columns} rows={rows} rowHref={(r) => `/tasks/${r.id}`} />);
+    expect(screen.getByRole('row', { name: /data room/ }).className).toMatch(/bg-error-wash/);
+    expect(screen.getByRole('row', { name: /engagement letter/ }).className).toMatch(/bg-attention-wash/);
+    expect(screen.getByRole('link', { name: 'Sign the engagement letter' })).toHaveAttribute('href', '/tasks/T-131');
+  });
+
+  it('empty and loading', () => {
+    const { rerender } = render(<Table columns={columns} rows={[]} empty="No tasks yet." />);
+    expect(screen.getByText('No tasks yet.')).toBeInTheDocument();
+    rerender(<Table columns={columns} rows={[]} loading />);
+    expect(screen.getAllByRole('columnheader')).toHaveLength(2);
+  });
+
+  it('passes axe', async () => {
+    const { container } = render(<Sorted onRowClick={() => {}} />);
+    expect(await a11y(container)).toHaveNoViolations();
+  });
+});

package/src/components/useButtonAction.ts

@@ -0,0 +1,57 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import type { ButtonState } from './Button';
+
+export type ButtonAction<A extends unknown[]> = {
+  /** Pass to <Button state>. */
+  state: ButtonState;
+  /** The last failure, to explain beside the button (with a Retry). Cleared on the next run. */
+  error: unknown;
+  /** Run the action: busy → done for `doneFor` ms → idle; on failure → idle with `error` set. */
+  run: (...args: A) => Promise<void>;
+};
+
+/**
+ * useButtonAction — the async button of the spec: busy while the action
+ * runs, the result confirmed in place for 1.6s, a failure kept for the
+ * caller to explain in place. Repeat runs while busy are ignored.
+ */
+export function useButtonAction<A extends unknown[]>(action: (...args: A) => Promise<unknown>, { doneFor = 1600 }: { doneFor?: number } = {}): ButtonAction<A> {
+  const [state, setState] = useState<ButtonState>('idle');
+  const [error, setError] = useState<unknown>(null);
+  const busy = useRef(false);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const alive = useRef(true);
+
+  useEffect(
+    () => () => {
+      alive.current = false;
+      if (timer.current) clearTimeout(timer.current);
+    },
+    [],
+  );
+
+  const run = useCallback(
+    async (...args: A) => {
+      if (busy.current) return;
+      busy.current = true;
+      setError(null);
+      setState('busy');
+      try {
+        await action(...args);
+        if (!alive.current) return;
+        setState('done');
+        timer.current = setTimeout(() => alive.current && setState('idle'), doneFor);
+      } catch (e) {
+        if (!alive.current) return;
+        setError(e);
+        setState('idle');
+      } finally {
+        busy.current = false;
+      }
+    },
+    [action, doneFor],
+  );
+
+  return { state, error, run };
+}

package/src/fonts.css

@@ -0,0 +1,20 @@
+/* @cosxai/ui — self-hosted fonts.
+ *
+ * The 3.0 tokens load Geist and Noto Sans SC from Google Fonts
+ * (tokens/fonts.css in the design system, not shipped here). The kit
+ * serves them from the consumer's own bundle instead: Fontsource
+ * variable builds, OFL-1.1, split by unicode range so a page downloads
+ * only the glyphs it shows.
+ *
+ * Fontsource names the families "… Variable"; the stacks below put those
+ * first and keep the design system's own names after them. Loaded after
+ * the tokens (styles.css), so these stacks are the ones in effect.
+ */
+@import "@fontsource-variable/geist";
+@import "@fontsource-variable/noto-sans-sc";
+
+:root {
+  --font-sans: "Geist Variable", "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --font-cjk: "Noto Sans SC Variable", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
+  --font-sans-cjk: "Geist Variable", "Geist", "Noto Sans SC Variable", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
+}

package/src/index.ts

@@ -1,25 +1,35 @@
-// Entry point — re-exports everything consumers need.
-// Components, hooks, theme, and helpers are organised under
-// /primitives, /layout, /actionbar, /command, /dialogs, /hooks,
-// /theme, /pwa, /lib. As the kit grows, each phase adds exports
-// here. Consumers pull individual modules (`import { Button }
-// from "@cosxai/ui"`) or copy source files directly per the
-// shadcn-style distribution model.
+/**
+ * @cosxai/ui 1.x — the COSX Design System 3.0 in React.
+ *
+ * Foundations: import "@cosxai/ui/styles.css" (tokens + fonts) and, in a
+ * Tailwind v4 app, "@cosxai/ui/theme.css". Plan and status:
+ * docs/workdocs/2026-09-29_feature-ui-1.0.
+ */
+export { cn } from './lib/cn';
 
-export * from "./primitives";
-export * from "./lib/cn";
-export * from "./lib/time-utils";
-export * from "./theme";
-export * from "./hooks";
-export * from "./layout";
-export * from "./dialogs";
-export * from "./actionbar";
-export * from "./command";
-export * from "./pwa";
-export * from "./editorial";
-export * from "./neobrutalism";
-export * from "./ambient";
-export * from "./terminal";
-export * from "./bento";
-export * from "./riso";
-export * from "./sketch";
+export { Badge, type BadgeAppearance, type BadgeProps, type BadgeStatus } from './components/Badge';
+export { Button, formatCount, type ButtonGround, type ButtonProps, type ButtonState, type ButtonVariant } from './components/Button';
+export { Card, type CardProps } from './components/Card';
+export { Figure, type FigureProps } from './components/Figure';
+export { Icon, type IconProps } from './components/Icon';
+export { IconButton, type IconButtonProps } from './components/IconButton';
+export { Logo, type LogoProps } from './components/Logo';
+export { Marker, type MarkerProps } from './components/Marker';
+export { MetaLabel, type MetaLabelProps } from './components/MetaLabel';
+export { Spinner, type SpinnerProps } from './components/Spinner';
+export { Tag, type TagProps } from './components/Tag';
+export { ThemeProvider, useTheme, type ThemeMode, type ThemeProviderProps } from './components/ThemeProvider';
+export { useButtonAction, type ButtonAction } from './components/useButtonAction';
+
+export { Checkbox, type CheckboxProps } from './components/Checkbox';
+export { Dialog, DialogClose, DialogContent, DialogTrigger, type DialogContentProps } from './components/Dialog';
+export { Field, useField, type FieldContextValue, type FieldProps } from './components/Field';
+export { Input, type InputProps } from './components/Input';
+export { RadioGroup, type RadioGroupProps, type RadioOption } from './components/Radio';
+export { Select, type SelectOption, type SelectProps } from './components/Select';
+export { Switch, type SwitchProps } from './components/Switch';
+export { Table, type TableColumn, type TableProps, type TableRowBase, type TableSort, type TableSortDirection } from './components/Table';
+export { Tab, TabList, TabPanel, Tabs, type TabItem, type TabListProps, type TabPanelProps, type TabProps, type TabsProps, type TabsVariant } from './components/Tabs';
+export { Textarea, type TextareaProps } from './components/Textarea';
+export { Toaster, toast, type ToasterProps, type ToastLabels, type ToastOptions, type ToastStatus } from './components/Toast';
+export { Tooltip, TooltipProvider, type TooltipProps } from './components/Tooltip';

package/src/lib/cn.ts

@@ -1,7 +1,24 @@
-// Lightweight className merge. Filters falsy values and joins with a
-// single space. Sufficient for component composition; if a consumer
-// needs tailwind-merge / clsx semantics they can swap implementations
-// without touching call sites.
-export function cn(...inputs: Array<string | false | null | undefined>): string {
-  return inputs.filter(Boolean).join(" ");
+import { clsx, type ClassValue } from 'clsx';
+import { extendTailwindMerge } from 'tailwind-merge';
+
+/**
+ * cn — join class names and let the later Tailwind class win on conflict
+ * (`cn('p-2', cond && 'p-4')` → `p-4`).
+ *
+ * tailwind-merge only knows Tailwind's default scales; the kit's theme
+ * (theme.css) replaces font sizes with its own names, taught here so
+ * `text-ui` and `text-fg` are not mistaken for each other (one is a
+ * size, one a colour).
+ */
+const merge = extendTailwindMerge({
+  extend: {
+    theme: {
+      text: ['meta', 'small', 'ui', 'body', 'h3', 'lede', 'title', 'figure', 'h2', 'h1', 'display'],
+      radius: ['xs', 'sm', 'md', 'lg', 'xl', 'pill'],
+    },
+  },
+});
+
+export function cn(...inputs: ClassValue[]): string {
+  return merge(clsx(inputs));
 }

package/src/modes.css

@@ -0,0 +1,10 @@
+/* @cosxai/ui — ink mode, completed.
+ *
+ * 3.0 switches its colours on either data-mode="ink" (root) or .ink-mode
+ * (subtree) — colors.css — but its marker rules (typography.css,
+ * typography-cjk.css) only know .ink-mode. Same rules for data-mode, so a
+ * page in ink mode gets the ink marker: no band, the finding in accent
+ * yellow. Reported to the design system; drop this when 3.0 covers it.
+ */
+[data-mode="ink"] .marker { color: var(--yellow-accent); background: none; padding: 0; margin: 0; border-radius: 0; }
+[data-mode="ink"] :lang(zh) .marker, :lang(zh)[data-mode="ink"] .marker { background: none; }

package/src/styles.css

@@ -0,0 +1,19 @@
+/* @cosxai/ui — the COSX Design System 3.0 foundations.
+ *
+ * tokens/ are the design system's own files, copied unchanged from the
+ * "COSX Design System 3.0" project. Edit them there and copy again; the
+ * kit's additions live in fonts.css and theme.css.
+ *
+ * Ink (dark) mode: set data-mode="ink" on <html>, or put .ink-mode on a
+ * subtree (colors.css).
+ */
+@import "./tokens/colors.css";
+@import "./tokens/typography.css";
+@import "./tokens/typography-cjk.css";
+@import "./tokens/spacing.css";
+@import "./tokens/elevation.css";
+@import "./tokens/motion.css";
+@import "./tokens/compat.css";
+@import "./brand.css";
+@import "./modes.css";
+@import "./fonts.css";

package/src/theme.css

@@ -0,0 +1,143 @@
+/* @cosxai/ui — Tailwind v4 theme for the COSX Design System 3.0.
+ *
+ *   @import "tailwindcss";
+ *   @import "@cosxai/ui/theme.css";
+ *   @import "@cosxai/ui/styles.css";
+ *   @source "../node_modules/@cosxai/ui/src";   (so the kit's classes are generated)
+ *
+ * Utilities point at the 3.0 variables ("inline"), so ink mode —
+ * data-mode="ink" / .ink-mode — switches them with no dark: variants.
+ *
+ * Tailwind's own palette, radii, shadows, fonts and easings are cleared:
+ * only what the design system defines exists (no bg-blue-500, no
+ * shadow-lg — 3.0 has no shadows).
+ *
+ * Names never collide with a 3.0 variable unless the value is the same
+ * (theme.test.ts). In particular font sizes avoid --text-primary /
+ * --text-secondary / --text-label, which are colours in 3.0.
+ */
+/* ink: — styles for ink mode (data-mode="ink" on <html>, or inside
+   .ink-mode). The semantic colours switch by themselves; this is for the
+   rules that flip on ink (the primary becomes the yellow). */
+@custom-variant ink (&:where([data-mode="ink"], [data-mode="ink"] *, .ink-mode, .ink-mode *));
+
+@theme inline {
+  --color-*: initial;
+  --radius-*: initial;
+  --shadow-*: initial;
+  --inset-shadow-*: initial;
+  --drop-shadow-*: initial;
+  --font-*: initial;
+  --ease-*: initial;
+  --text-*: initial;
+  --font-weight-*: initial;
+  --tracking-*: initial;
+
+  /* Materials — fixed, do not switch with ink mode */
+  --color-paper: var(--paper);
+  --color-linen: var(--linen);
+  --color-sunk-2: var(--sunk-2);
+  --color-sunk-3: var(--sunk-3);
+  --color-ink: var(--ink);
+  --color-ink-raised: var(--ink-raised);
+  --color-grey: var(--grey);
+  --color-grey-inverse: var(--grey-inverse);
+
+  /* The yellow — one hue, by area */
+  --color-yellow: var(--yellow);
+  --color-yellow-accent: var(--yellow-accent);
+  --color-yellow-accent-hover: var(--yellow-accent-hover);
+  --color-yellow-light: var(--yellow-light);
+  --color-yellow-hover: var(--yellow-hover);
+  --color-yellow-1: var(--yellow-1);
+  --color-yellow-2: var(--yellow-2);
+  --color-yellow-3: var(--yellow-3);
+  --color-yellow-4: var(--yellow-4);
+  --color-yellow-5: var(--yellow-5);
+  --color-yellow-wash-12: var(--yellow-12);
+  --color-yellow-wash-20: var(--yellow-20);
+  --color-yellow-wash-32: var(--yellow-32);
+  --color-yellow-wash-50: var(--yellow-50);
+  --color-marker: var(--marker);
+
+  /* Semantic — switch with ink mode. Product code uses these. */
+  --color-page: var(--bg-page);
+  --color-sunk: var(--bg-sunk);
+  --color-well: var(--bg-well);
+  --color-chrome: var(--bg-chrome);
+  --color-field: var(--bg-field);
+  --color-fg: var(--text-primary);
+  --color-fg-secondary: var(--text-secondary);
+  --color-fg-label: var(--text-label);
+  --color-fg-on-yellow-secondary: var(--text-on-yellow-secondary);
+  --color-rule: var(--rule);
+  --color-rule-soft: var(--rule-soft);
+  --color-hover: var(--hover);
+  --color-scrim: var(--scrim);
+
+  /* Workspace brand (brand.css): the COSX yellow unless a customer's
+     colour is injected. Selection and grounds use field; dots and
+     progress use mark. Never for text. */
+  --color-brand-field: var(--brand-field);
+  --color-brand-mark: var(--brand-mark);
+
+  /* On an ink surface inside a paper page */
+  --color-inv: var(--inv-bg);
+  --color-inv-raised: var(--inv-bg-raised);
+  --color-inv-fg: var(--inv-text);
+  --color-inv-fg-secondary: var(--inv-text-secondary);
+  --color-inv-rule: var(--inv-rule);
+
+  /* Product status: yellow, ink and one red. Progress is an ink outline and
+     complete a grey dot — they take no colour of their own. */
+  --color-attention: var(--status-attention);
+  --color-attention-wash: var(--status-attention-wash);
+  --color-error: var(--status-error);
+  --color-error-text: var(--status-error-text);
+  --color-error-wash: var(--status-error-wash);
+
+  --color-transparent: transparent;
+  --color-current: currentColor;
+  --color-white: #fff;
+
+  /* Radius ladder — same names and values as 3.0 spacing.css */
+  --radius-xs: 4px;
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 16px;
+  --radius-xl: 24px;
+  --radius-pill: 999px;
+
+  /* One family. Same stacks as fonts.css (the ones in effect): font-sans
+     for Latin, font-sans-cjk for Chinese pages (Geist for Latin and
+     figures, Noto Sans SC for hanzi). */
+  --font-sans: "Geist Variable", "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --font-sans-cjk: "Geist Variable", "Geist", "Noto Sans SC Variable", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
+
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* Type scale (typography.css). Product UI body is 14px, content 15px. */
+  --text-meta: 12px;
+  --text-small: 13.5px;
+  --text-ui: 14px;
+  --text-body: 15px;
+  --text-h3: 18px;
+  --text-lede: 20px;
+  --text-title: 22px;
+  --text-figure: 32px;
+  --text-h2: var(--size-h2);
+  --text-h1: var(--size-h1);
+  --text-display: var(--size-display);
+
+  --tracking-display: -0.025em;
+  --tracking-heading: -0.015em;
+  --tracking-figure: -0.03em;
+
+  /* Motion — flat for state, ease-out for entry; nothing bounces */
+  --ease-standard: cubic-bezier(.2,0,.2,1);
+  --ease-out: cubic-bezier(.16,1,.3,1);
+  --ease-in: cubic-bezier(.4,0,1,1);
+}