@beehexa/design-rules 0.0.0-stage → 2611.3.3

package/dist/docs/src/components/ColorDemo.astro

@@ -0,0 +1,794 @@
+---
+// Live examples for the Color page. Everything reads tokens/color.json, so the page shows the
+// values the products get. Swatches use the CSS variables, so they follow the page theme;
+// tables list both themes, with contrast computed from the same values.
+import '../styles/color.css';
+import { tokens } from '../lib/tokens';
+import { contrast, ratio } from '../lib/contrast';
+import { pairs } from '../../scripts/color-pairs.mjs';
+import { exceptions } from '../../scripts/contrast-exceptions.mjs';
+import ColorExample from './ColorExample.astro';
+import Info from '@lucide/astro/icons/info';
+import CircleCheck from '@lucide/astro/icons/circle-check';
+import TriangleAlert from '@lucide/astro/icons/triangle-alert';
+import CircleX from '@lucide/astro/icons/circle-x';
+import Circle from '@lucide/astro/icons/circle';
+import { langOf } from '../lib/i18n';
+
+interface Props {
+  kind: 'brand' | 'scales' | 'roles' | 'status' | 'labels' | 'actions' | 'tokens' | 'pairing' | 'dodont' | 'example'
+    | 'balance' | 'anatomy' | 'surfaces' | 'states' | 'banners' | 'steps' | 'themes' | 'contrast'
+    | 'palette' | 'ramps' | 'emphasis';
+  group?: 'text' | 'icon' | 'surface' | 'background' | 'border';
+  /** For kind="dodont": which pair to show. */
+  item?: 'yellow' | 'meaning' | 'alone' | 'tokens' | 'primary' | 'pairing' | 'warning';
+}
+const { kind, group, item } = Astro.props;
+const vi = langOf(Astro.url.pathname) === 'vi';
+const L = (en: string, viText: string) => (vi ? viText : en);
+
+// Vietnamese text of the token descriptions shown on the page. The English text is the
+// description in tokens/color.json; a token missing here shows its English description.
+const descVi: Record<string, string> = {
+  'color.brand.yellow': 'Vàng thương hiệu. Logo, vạch chỉ trang hiện tại, phần tô nổi bật. Không bao giờ dùng cho chữ hay icon trên nền sáng (1.85:1 trên nền trắng).',
+  'color.brand.graphite': 'Xám ghi thương hiệu. Chữ và nút chính.',
+  'color.brand.white': 'Trắng thương hiệu.',
+  'color.static.white': 'Trắng ở cả hai giao diện: chữ trên nền đặc của trạng thái.',
+  'color.static.black': 'Đen ở cả hai giao diện.',
+  'color.text': 'Chữ mặc định.',
+  'color.text.subtle': 'Chữ phụ: mô tả, cột phụ trong bảng, điều hướng.',
+  'color.text.subtlest': 'Chữ mức ba: metadata, mốc thời gian, placeholder, chữ hướng dẫn, breadcrumb.',
+  'color.text.disabled': 'Chữ của control bị vô hiệu. Được miễn yêu cầu tương phản (WCAG 1.4.3).',
+  'color.text.inverse': 'Chữ trên background.neutral.bold và surface.inverse.',
+  'color.text.on-bold': 'Chữ trên các nền đặc của trạng thái (background.*.bold): trắng ở giao diện sáng, graphite 1 ở giao diện tối.',
+  'color.text.on-brand': 'Chữ trên màu vàng thương hiệu (7.76:1).',
+  'color.icon': 'Màu icon mặc định.',
+  'color.icon.subtle': 'Icon phụ, đặt cạnh text.subtle hoặc text.subtlest.',
+  'color.icon.disabled': 'Icon của control bị vô hiệu.',
+  'color.icon.inverse': 'Icon trên background.neutral.bold và surface.inverse.',
+  'color.icon.on-bold': 'Icon trên các nền đặc của trạng thái.',
+  'color.link': 'Chữ của link.',
+  'color.link.hover': 'Link khi hover.',
+  'color.background.neutral': 'Nền trung tính ở trạng thái nghỉ: nút mặc định, tag, ô nhập trên bề mặt nhạt.',
+  'color.background.neutral.hover': 'Nền trung tính khi hover.',
+  'color.background.neutral.pressed': 'Nền trung tính khi nhấn.',
+  'color.background.neutral.subtle': 'Trong suốt ở trạng thái nghỉ: dòng trong bảng, mục menu, nút ghost.',
+  'color.background.neutral.subtle.hover': 'Dòng, mục menu hoặc nút ghost khi hover. Nhạt hơn trạng thái được chọn, nên dòng đang hover không bao giờ trông như đang được chọn.',
+  'color.background.neutral.subtle.pressed': 'Dòng, mục menu hoặc nút ghost khi nhấn.',
+  'color.background.neutral.bold': 'Nút chính. Xám ghi ở giao diện sáng; chuyển sang màu sáng ở giao diện tối, để vẫn là thành phần nổi nhất.',
+  'color.background.neutral.bold.hover': 'Nút chính khi hover: lùi một bậc khỏi graphite 12, vì đó là bậc cuối.',
+  'color.background.neutral.bold.pressed': 'Nút chính khi nhấn: lùi hai bậc khỏi graphite 12.',
+  'color.background.selected': 'Dòng hoặc mục được chọn. Luôn thêm một dấu hiệu thứ hai: vạch chỉ báo màu vàng, dấu tích hoặc chữ đậm.',
+  'color.background.selected.hover': 'Dòng hoặc mục được chọn khi hover.',
+  'color.background.disabled': 'Nền của control bị vô hiệu.',
+  'color.background.brand.subtle': 'Bề mặt và ghi chú thương hiệu.',
+  'color.background.brand.bold': 'Nền vàng thương hiệu. Chữ xám ghi bên trên (text.on-brand). Không có nút màu vàng.',
+  'color.surface': 'Card, panel, dialog. Sáng hơn nền trang một bậc ở giao diện tối.',
+  'color.surface.page': 'Nền trang.',
+  'color.surface.subtle': 'Sidebar, header của bảng, vùng nền nhạt.',
+  'color.surface.inverse': 'Bề mặt đảo màu: tooltip, toast. Chữ bên trên: text.inverse.',
+  'color.surface.scrim': 'Lớp phủ sau dialog và drawer.',
+  'color.border': 'Viền mặc định: đường phân cách, card, bảng.',
+  'color.border.bold': 'Viền của ô nhập, checkbox và select. 3:1 (WCAG 1.4.11) trên mọi bề mặt và nền trung tính, kể cả dòng được chọn.',
+  'color.border.disabled': 'Viền của control bị vô hiệu.',
+  'color.border.focus': 'Viền focus: dày 2 px, cách control 2 px. 3:1 trên mọi bề mặt và dòng được chọn.',
+  'color.border.selected': 'Vạch chỉ báo trang hoặc tab hiện tại. Luôn đi kèm một dấu hiệu thứ hai.',
+  'color.border.brand': 'Viền thương hiệu, như nhãn early access.',
+  'color.border.brand.subtle': 'Viền của bề mặt và ghi chú thương hiệu.',
+};
+const desc = (t: { name: string; description: string }) => (vi ? descVi[t.name] ?? t.description : t.description);
+
+const byName = new Map(tokens.map((t) => [t.name, t]));
+const tok = (name: string) => {
+  const t = byName.get(`color.${name}`);
+  if (!t) throw new Error(`ColorDemo: no token color.${name}`);
+  return { name: t.name, cssVar: t.cssVar, light: t.resolved, dark: t.darkResolved ?? t.resolved, description: t.description };
+};
+const up = (hex: string) => (hex.startsWith('#') ? hex.toUpperCase() : hex);
+const bgLight = tok('surface.page').light;
+const bgDark = tok('surface.page').dark;
+
+// Brand
+const brand = [
+  { id: 'yellow', name: L('Yellow', 'Vàng'), rgb: '252 176 23', use: L('Fills, indicators and highlights, always with graphite text on top. Never text or icons on a light background.', 'Nền, vạch chỉ báo và phần tô nổi bật, luôn có chữ xám ghi bên trên. Không bao giờ dùng cho chữ hay icon trên nền sáng.') },
+  { id: 'graphite', name: L('Graphite', 'Xám ghi'), rgb: '43 42 40', use: L('Text, the primary button and dark brand surfaces. Step 12 of the graphite scale.', 'Chữ, nút chính và bề mặt thương hiệu màu tối. Bậc 12 của thang graphite.') },
+  { id: 'white', name: L('White', 'Trắng'), rgb: '255 255 255', use: L('Page and card background in the light theme; text on dark fills.', 'Nền trang và card ở giao diện sáng; chữ trên nền tối.') },
+];
+
+// Scales: twelve steps, each with one job. Every step has a dark value under the same name.
+const stepJobs = [
+  { steps: '1–2', job: L('Backgrounds; graphite 2 is also the hover of a row or menu item in light', 'Nền; graphite 2 cũng là màu hover của dòng hoặc mục menu ở giao diện sáng') },
+  { steps: '3–5', job: L('Component backgrounds: rest, hover, pressed or selected', 'Nền component: nghỉ, hover, nhấn hoặc được chọn') },
+  { steps: '6–8', job: L('Borders and dividers', 'Viền và đường phân cách') },
+  { steps: '9–10', job: L('Solid fills and their hover; in graphite, 9 is the control border and 10 the tertiary text', 'Nền đặc và màu hover của chúng; ở graphite, 9 là viền control và 10 là chữ mức ba') },
+  { steps: '11–12', job: L('Text: 11 subtle, 12 default', 'Chữ: 11 là chữ phụ, 12 là chữ mặc định') },
+];
+const scaleNames: Record<string, string> = {
+  graphite: 'Graphite', yellow: 'Yellow', blue: 'Blue', green: 'Green', orange: 'Orange', red: 'Red',
+};
+const scales = Object.entries(scaleNames).map(([id, name]) => ({
+  id,
+  name,
+  steps: Array.from({ length: 12 }, (_, i) => tok(`${id}.${i + 1}`)),
+}));
+
+// Roles
+const roleGroups: Record<string, string[]> = {
+  text: ['text', 'text.subtle', 'text.subtlest', 'text.disabled', 'text.inverse', 'text.on-bold', 'text.on-brand', 'link', 'link.hover'],
+  icon: ['icon', 'icon.subtle', 'icon.disabled', 'icon.inverse', 'icon.on-bold'],
+  surface: ['surface.page', 'surface', 'surface.subtle', 'surface.inverse', 'surface.scrim'],
+  background: [
+    'background.neutral', 'background.neutral.hover', 'background.neutral.pressed',
+    'background.neutral.subtle', 'background.neutral.subtle.hover', 'background.neutral.subtle.pressed',
+    'background.neutral.bold', 'background.neutral.bold.hover', 'background.neutral.bold.pressed',
+    'background.selected', 'background.selected.hover', 'background.disabled',
+    'background.brand.subtle', 'background.brand.bold',
+  ],
+  border: ['border', 'border.bold', 'border.disabled', 'border.focus', 'border.selected', 'border.brand', 'border.brand.subtle'],
+};
+// What each role is checked against (its hardest background), and the minimum.
+const checks: Record<string, { on: string; min: number } | undefined> = {
+  text: { on: 'background.selected.hover', min: 4.5 },
+  'text.subtle': { on: 'background.selected.hover', min: 4.5 },
+  'text.subtlest': { on: 'background.selected.hover', min: 4.5 },
+  'text.inverse': { on: 'background.neutral.bold', min: 4.5 },
+  'text.on-bold': { on: 'background.danger.bold', min: 4.5 },
+  'text.on-brand': { on: 'background.brand.bold', min: 4.5 },
+  link: { on: 'background.selected.hover', min: 4.5 },
+  'link.hover': { on: 'background.selected.hover', min: 4.5 },
+  icon: { on: 'background.selected', min: 3 },
+  'icon.subtle': { on: 'background.neutral', min: 3 },
+  'icon.inverse': { on: 'background.neutral.bold', min: 3 },
+  'icon.on-bold': { on: 'background.danger.bold', min: 3 },
+  'border.bold': { on: 'background.neutral', min: 3 },
+  'border.focus': { on: 'background.selected', min: 3 },
+};
+const roles = group
+  ? roleGroups[group].map((n) => {
+      const t = tok(n);
+      const c = checks[n];
+      const on = c ? tok(c.on) : undefined;
+      return {
+        ...t,
+        check: c && on ? { on: c.on, min: c.min, light: contrast(t.light, on.light, bgLight), dark: contrast(t.dark, on.dark, bgDark) } : undefined,
+      };
+    })
+  : [];
+
+// Status roles. Each has text, a subtle and a bold background, and borders, from its own scale.
+const statusRoles = [
+  { id: 'info', name: L('Info', 'Thông tin'), scale: 'blue', meaning: L('Running and in-progress work, neutral information', 'Việc đang chạy, đang xử lý; thông tin trung lập'), example: L('Syncing', 'Đang đồng bộ') },
+  { id: 'success', name: L('Success', 'Thành công'), scale: 'green', meaning: L('Synced, connected, completed, healthy', 'Đã đồng bộ, đã kết nối, đã xong, hoạt động tốt'), example: L('Synced', 'Đã đồng bộ') },
+  { id: 'warning', name: L('Warning', 'Cảnh báo'), scale: 'orange', meaning: L('Needs attention soon: partial sync, expiring token, rate limit', 'Sắp cần xử lý: đồng bộ một phần, token sắp hết hạn, bị giới hạn tần suất'), example: L('Partial', 'Một phần') },
+  { id: 'danger', name: L('Danger', 'Nguy hiểm'), scale: 'red', meaning: L('Failed, error, blocked; destructive actions', 'Thất bại, lỗi, bị chặn; hành động xoá hoặc huỷ'), example: L('Failed', 'Lỗi') },
+  { id: 'neutral', name: L('Neutral', 'Trung tính'), scale: 'graphite', meaning: L('Idle, paused, draft, skipped, archived', 'Chờ, tạm dừng, nháp, bỏ qua, lưu trữ'), example: L('Paused', 'Tạm dừng') },
+].map((s) => {
+  const neutral = s.id === 'neutral';
+  const fg = tok(neutral ? 'text.subtle' : `text.${s.id}`);
+  const bg = tok(neutral ? 'background.neutral' : `background.${s.id}.subtle`);
+  const border = tok(neutral ? 'border' : `border.${s.id}.subtle`);
+  const em = tok(neutral ? 'background.neutral.bold' : `background.${s.id}.bold`);
+  const on = tok(neutral ? 'text.inverse' : 'text.on-bold');
+  return {
+    ...s,
+    fg, bg, border, em,
+    tokens: neutral
+      ? ['text.subtle', 'background.neutral', 'background.neutral.bold']
+      : [`text.${s.id}`, `background.${s.id}.subtle`, `background.${s.id}.bold`],
+    c: {
+      fgLight: contrast(fg.light, bgLight), fgDark: contrast(fg.dark, bgDark, bgDark),
+      onBgLight: contrast(fg.light, bg.light, bgLight), onBgDark: contrast(fg.dark, bg.dark, bgDark),
+      emLight: contrast(on.light, em.light), emDark: contrast(on.dark, em.dark),
+    },
+  };
+});
+
+// Token reference: every role and component token split into the four parts of its name,
+// color.{property}.{role}.{emphasis}.{state}. A part that is left out takes its default.
+const PROPS = ['text', 'icon', 'link', 'surface', 'background', 'border', 'skeleton', 'code'];
+const ROLES = ['neutral', 'brand', 'danger', 'warning', 'success', 'info', 'inverse', 'disabled', 'page', 'scrim', 'on-bold', 'on-brand', 'background', 'text'];
+const EMPHASIS = ['subtle', 'subtlest', 'bold'];
+const STATES = ['hover', 'pressed', 'selected', 'focus'];
+const SCALE_NAMES = Object.keys(scaleNames);
+const parts = (name: string) => {
+  const [, property, ...rest] = name.split('.');
+  const out = { property, role: [] as string[], emphasis: [] as string[], state: [] as string[] };
+  for (const seg of rest) {
+    if (EMPHASIS.includes(seg)) out.emphasis.push(seg);
+    else if (STATES.includes(seg)) out.state.push(seg);
+    else if (ROLES.includes(seg)) out.role.push(seg);
+    else throw new Error(`ColorDemo: unknown name part "${seg}" in ${name}`);
+  }
+  return out;
+};
+const refTokens = tokens
+  .filter((t) => t.name.startsWith('color.') && t.type === 'color')
+  .filter((t) => PROPS.includes(t.name.split('.')[1]))
+  .map((t) => ({ ...tok(t.name.replace('color.', '')), parts: parts(t.name), component: t.name.startsWith('color.code.') }));
+const baseTokens = tokens
+  .filter((t) => t.name.startsWith('color.brand.') || t.name.startsWith('color.static.'))
+  .map((t) => tok(t.name.replace('color.', '')));
+
+// Pairing: which text, icon and border tokens may sit on each background. Built from
+// scripts/color-pairs.mjs, the same list the contrast check reads, so the page and the check agree.
+const onBg = new Map<string, { text: string[]; other: string[] }>();
+for (const { fg, on, min } of pairs) {
+  for (const bg of on) {
+    const entry = onBg.get(bg) ?? { text: [], other: [] };
+    (min >= 4.5 ? entry.text : entry.other).push(fg);
+    onBg.set(bg, entry);
+  }
+}
+const pairingRows: { bgs: string[]; text: string[]; other: string[] }[] = [];
+for (const [bg, { text, other }] of onBg) {
+  const key = JSON.stringify([text, other]);
+  const row = pairingRows.find((r) => JSON.stringify([r.text, r.other]) === key);
+  if (row) row.bgs.push(bg);
+  else pairingRows.push({ bgs: [bg], text, other });
+}
+
+// Known exceptions: a token is flagged on a pairing card when it is below WCAG on any of the card's backgrounds.
+const below = (fg: string, bgs: string[]) => exceptions.some((e) => e.fg === fg && bgs.includes(e.bg));
+
+// Theme preview: every colour token pinned to its light or dark value, so one card can be
+// drawn in both themes side by side, whatever theme the page is in.
+const colorTokens = tokens.filter((t) => t.name.startsWith('color.') && t.type === 'color');
+const themeStyle = (mode: 'light' | 'dark') =>
+  colorTokens.map((t) => `${t.cssVar}: ${mode === 'dark' ? (t.darkResolved ?? t.resolved) : t.resolved}`).join('; ');
+
+// Contrast samples: pairs that pass and pairs that fail, with their real ratios.
+const contrastSamples = [
+  { fg: 'text', bg: 'surface.page', text: L('Graphite on white', 'Xám ghi trên nền trắng'), min: 4.5 },
+  { fg: 'text.subtle', bg: 'background.selected.hover', text: L('Subtle text on a selected row', 'Chữ phụ trên dòng được chọn'), min: 4.5 },
+  { fg: 'text.on-brand', bg: 'background.brand.bold', text: L('Graphite on yellow', 'Xám ghi trên nền vàng'), min: 4.5 },
+  { fg: 'brand.yellow', bg: 'surface.page', text: L('Yellow on white', 'Vàng trên nền trắng'), min: 4.5 },
+  { fg: 'static.white', bg: 'brand.yellow', text: L('White on yellow', 'Trắng trên nền vàng'), min: 4.5 },
+  { fg: 'border.bold', bg: 'background.neutral', text: L('Control edge on a grey fill', 'Viền control trên nền xám'), min: 3 },
+].map((c) => {
+  const fg = tok(c.fg); const bg = tok(c.bg);
+  const r = contrast(fg.light, bg.light);
+  return { ...c, fgVal: fg.light, bgVal: bg.light, r, pass: r >= c.min };
+});
+
+// Step jobs, drawn: what each step of a scale looks like in use.
+const stepUse = (s: string) => Array.from({ length: 12 }, (_, i) => ({ step: i + 1, v: `var(--bh-color-${s}-${i + 1})` }));
+
+// Icons for the solid state labels (Lucide, 16 px, currentColor).
+const icon: Record<string, typeof Info> = {
+  info: Info,
+  success: CircleCheck,
+  warning: TriangleAlert,
+  danger: CircleX,
+  neutral: Circle,
+};
+const SuccessIcon = icon.success;
+const DangerIcon = icon.danger;
+
+// Palette: the ink that reads best on each swatch, and where the brand colours sit.
+const INK_DARK = '#2b2a28';
+const INK_LIGHT = '#ffffff';
+const ink = (bg: string) => (contrast(INK_LIGHT, bg) >= contrast(INK_DARK, bg) ? INK_LIGHT : INK_DARK);
+const brandStep: Record<'light' | 'dark', Record<string, number>> = { light: { yellow: 7, graphite: 12 }, dark: { yellow: 11 } };
+
+// Role specimens: each role token drawn as what it paints, on the background it is checked on.
+const pageOf = (mode: 'light' | 'dark') => (mode === 'light' ? bgLight : bgDark);
+const specimen = (r: (typeof roles)[number], mode: 'light' | 'dark') => {
+  const v = r[mode];
+  const on = r.check ? tok(r.check.on)[mode] : pageOf(mode);
+  const edge = tok('border')[mode];
+  if (group === 'text') return { style: `background: ${on}; color: ${v}`, body: 'Aa' };
+  if (group === 'icon') return { style: `background: ${on}; color: ${v}`, body: 'icon' };
+  if (group === 'border') return { style: `background: ${pageOf(mode)}; box-shadow: inset 0 0 0 2px ${v}`, body: '' };
+  return { style: `background: ${pageOf(mode)}; --fill: ${v}; --edge: ${edge}`, body: 'fill' };
+};
+
+// Emphasis: subtle, default and bold fills of each role, with the text that goes on them.
+const emphasisRows = [
+  { name: L('Neutral', 'Trung tính'), fills: [['background.neutral.subtle', 'text'], ['background.neutral', 'text'], ['background.neutral.bold', 'text.inverse']] },
+  { name: L('Brand', 'Thương hiệu'), fills: [['background.brand.subtle', 'text'], null, ['background.brand.bold', 'text.on-brand']] },
+  ...['info', 'success', 'warning', 'danger'].map((r) => ({
+    name: vi ? ({ info: 'Thông tin', success: 'Thành công', warning: 'Cảnh báo', danger: 'Nguy hiểm' } as Record<string, string>)[r] : r[0].toUpperCase() + r.slice(1),
+    fills: [[`background.${r}.subtle`, `text.${r}`], null, [`background.${r}.bold`, 'text.on-bold']],
+  })),
+].map((row) => ({ ...row, fills: row.fills.map((f) => (f ? { bg: tok(f[0]), fg: tok(f[1]) } : null)) }));
+
+// Actions
+const actions = [
+  { id: 'primary', label: L('Save changes', 'Lưu thay đổi'), tokens: 'background.neutral.bold · text.inverse', bg: tok('background.neutral.bold'), text: tok('text.inverse'), use: L('One per view: the main action. Graphite; it turns light in dark.', 'Mỗi màn hình một nút: hành động chính. Xám ghi; chuyển sang màu sáng ở giao diện tối.') },
+  { id: 'danger', label: L('Delete', 'Xoá'), tokens: 'background.danger.bold · text.on-bold', bg: tok('background.danger.bold'), text: tok('text.on-bold'), use: L('Destructive actions, after a confirmation.', 'Hành động xoá hoặc huỷ, sau bước xác nhận.') },
+].map((a) => ({ ...a, cLight: contrast(a.text.light, a.bg.light), cDark: contrast(a.text.dark, a.bg.dark) }));
+---
+
+{kind === 'brand' && (
+  <div class="c-brand">
+    {brand.map((b) => {
+      const t = tok(`brand.${b.id}`);
+      return (
+        <figure class={`c-brand-card is-${b.id}`}>
+          <div class="c-brand-chip" style={`background: var(${t.cssVar})`}>
+            <span>{b.name}</span>
+          </div>
+          <figcaption>
+            <code>color.brand.{b.id}</code>
+            <span class="c-num">{up(t.light)} · RGB {b.rgb}</span>
+            <span>{b.use}</span>
+          </figcaption>
+        </figure>
+      );
+    })}
+  </div>
+)}
+
+{kind === 'scales' && (
+  <div class="c-scales">
+    {scales.map((s) => (
+      <figure class="c-scale">
+        <figcaption><b>{s.name}</b> <code>color.{s.id}.1–12</code> · {L('the dark theme uses the same names', 'giao diện tối dùng cùng tên')}</figcaption>
+        <div class="table-wrap">
+          <table class="c-scale-table">
+            <thead><tr><th scope="col"><span class="sr-only">{L('Theme', 'Giao diện')}</span></th>{s.steps.map((_, i) => <th scope="col">{i + 1}</th>)}</tr></thead>
+            <tbody>
+              {(['light', 'dark'] as const).map((mode) => (
+                <tr>
+                  <th scope="row">{mode === 'light' ? L('Light', 'Sáng') : L('Dark', 'Tối')}</th>
+                  {s.steps.map((t) => (
+                    <td>
+                      <span class="c-chip" style={`background: ${t[mode]}`} />
+                      <span class="c-num">{up(t[mode]).slice(1)}</span>
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </figure>
+    ))}
+    <ul class="c-steps">
+      {stepJobs.map((j) => <li><b>{j.steps}</b> {j.job}</li>)}
+    </ul>
+  </div>
+)}
+
+{kind === 'roles' && (
+  <div class="table-wrap">
+    <table class="c-roles stackable">
+      <colgroup><col class="c-col-token" /><col class="c-col-mode" /><col class="c-col-mode" /><col class="c-col-use" /></colgroup>
+      <thead><tr><th scope="col">Token</th><th scope="col">{L('Light', 'Sáng')}</th><th scope="col">{L('Dark', 'Tối')}</th><th scope="col">{L('Use', 'Dùng cho')}</th></tr></thead>
+      <tbody>
+        {roles.map((r) => (
+          <tr>
+            <td data-label="Token"><code set:html={r.name.replace('color.', '').split('.').join('.<wbr>')} /></td>
+            {(['light', 'dark'] as const).map((mode) => {
+              const sp = specimen(r, mode);
+              return (
+                <td data-label={mode === 'light' ? L('Light', 'Sáng') : L('Dark', 'Tối')}>
+                  <span class={`c-spec is-${group}`} style={sp.style} aria-hidden="true">
+                    {group === 'icon' ? <SuccessIcon size={20} /> : sp.body === 'fill' ? <span class="c-spec-fill" /> : sp.body}
+                  </span>
+                  <span class="c-num">{up(r[mode])}</span>
+                </td>
+              );
+            })}
+            <td data-label={L('Use', 'Dùng cho')}>
+              {desc(r)}
+              {r.check && <span class="c-check">{L('Contrast', 'Tương phản')} {ratio(r.check.light)} / {ratio(r.check.dark)} {L('on', 'trên')} {r.check.on}</span>}
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  </div>
+)}
+
+{kind === 'actions' && (
+  <div class="c-actions">
+    {actions.map((a) => (
+      <figure class="c-action">
+        <div class="c-action-stage">
+          <span class={`c-button is-${a.id}`}>{a.label}</span>
+        </div>
+        <figcaption>
+          <code>{a.tokens}</code>
+          <span class="c-num">{L('Light', 'Sáng')} {up(a.bg.light)}, {L('text', 'chữ')} {ratio(a.cLight)} · {L('Dark', 'Tối')} {up(a.bg.dark)}, {L('text', 'chữ')} {ratio(a.cDark)}</span>
+          <span>{a.use}</span>
+        </figcaption>
+      </figure>
+    ))}
+  </div>
+)}
+
+{kind === 'status' && (
+  <div class="table-wrap">
+    <table class="c-status">
+      <thead>
+        <tr><th scope="col">{L('Role', 'Vai trò')}</th><th scope="col">{L('Means', 'Ý nghĩa')}</th><th scope="col">{L('Text', 'Chữ')}</th><th scope="col">{L('Subtle', 'Nhạt')}</th><th scope="col">{L('Bold', 'Đậm')}</th><th scope="col">{L('Contrast (light / dark)', 'Tương phản của chữ (sáng / tối)')}</th></tr>
+      </thead>
+      <tbody>
+        {statusRoles.map((s) => (
+          <tr>
+            <td><b>{s.name}</b><br /><span class="c-from">{vi ? `thang ${s.scale}` : `${s.scale} scale`}</span></td>
+            <td>{s.meaning}</td>
+            <td><span class="c-cell"><span class="c-dot" style={`background: var(${s.fg.cssVar})`} /><span class="c-num v-light">{up(s.fg.light)}</span><span class="c-num v-dark">{up(s.fg.dark)}</span></span></td>
+            <td><span class="c-cell"><span class="c-dot" style={`background: var(${s.bg.cssVar}); box-shadow: inset 0 0 0 1px var(${s.border.cssVar})`} /><span class="c-num v-light">{up(s.bg.light)}</span><span class="c-num v-dark">{up(s.bg.dark)}</span></span></td>
+            <td><span class="c-cell"><span class="c-dot" style={`background: var(${s.em.cssVar})`} /><span class="c-num v-light">{up(s.em.light)}</span><span class="c-num v-dark">{up(s.em.dark)}</span></span></td>
+            <td class="c-num">
+              {L('text on page', 'nền trang')} {ratio(s.c.fgLight)} / {ratio(s.c.fgDark)}<br />
+              {L('text on subtle', 'nền nhạt')} {ratio(s.c.onBgLight)} / {ratio(s.c.onBgDark)}<br />
+              {L('text on bold', 'nền đậm')} {ratio(s.c.emLight)} / {ratio(s.c.emDark)}
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  </div>
+)}
+
+{kind === 'labels' && (
+  <div class="c-labels">
+    <figure class="c-label-set">
+      <figcaption><b>{L('Label', 'Nhãn')}</b> · {L('outlined, for tags and statuses inside tables, lists and cards', 'có viền, cho tag và trạng thái trong bảng, danh sách và card')}</figcaption>
+      <div class="c-label-row">
+        <span class="bh-label">{L('Default', 'Mặc định')}</span>
+        <span class="bh-label is-brand">Early access</span>
+        {statusRoles.map((s) => <span class={`bh-label is-${s.id}`}>{s.example}</span>)}
+      </div>
+      <div class="c-label-row">
+        <span class="bh-label is-large">{L('Large', 'Cỡ lớn')}</span>
+        <span class="bh-label is-large is-brand">Early access</span>
+        {statusRoles.map((s) => <span class={`bh-label is-large is-${s.id}`}>{s.example}</span>)}
+      </div>
+    </figure>
+    <figure class="c-label-set">
+      <figcaption><b>{L('State label', 'Nhãn trạng thái')}</b> · {L('solid, for the one status that a page or record is about', 'nền đặc, cho trạng thái chính của một trang hoặc bản ghi')}</figcaption>
+      <div class="c-label-row">
+        {statusRoles.map((s) => { const StateIcon = icon[s.id]; return <span class={`bh-state is-${s.id}`}><StateIcon size={16} />{s.example}</span>; })}
+      </div>
+    </figure>
+  </div>
+)}
+
+{kind === 'tokens' && (
+  <div class="c-tokens">
+    {vi
+      ? <p class="c-from">Role token. Dấu gạch nghĩa là phần đó được bỏ đi và lấy giá trị mặc định: neutral cho role, mức nhấn mặc định, trạng thái nghỉ. <code>on-bold</code> và <code>on-brand</code> gọi tên nền nằm dưới chữ thay vì một role. Component token có ghi chú riêng.</p>
+      : <p class="c-from">Role tokens. A dash means the part is left out and takes its default: neutral for the role, the default emphasis, the resting state. <code>on-bold</code> and <code>on-brand</code> name the fill the text sits on rather than a role. Component tokens are marked.</p>}
+    <div class="table-wrap">
+      <table class="c-token-ref">
+        <thead><tr><th scope="col">Token</th><th scope="col">{L('Property', 'Thứ được tô')}</th><th scope="col">{L('Role', 'Vai trò')}</th><th scope="col">{L('Emphasis', 'Mức nhấn')}</th><th scope="col">{L('State', 'Trạng thái')}</th><th scope="col">{L('Light / dark', 'Sáng / tối')}</th></tr></thead>
+        <tbody>
+          {refTokens.map((t) => (
+            <tr>
+              <td><code set:html={t.name.split('.').join('.<wbr>')} />{t.component && <span class="c-from"> {L('component', 'component token')}</span>}<span class="c-var" set:html={t.cssVar.split('-').join('-<wbr>')} /></td>
+              <td>{t.parts.property}</td>
+              <td>{t.parts.role.join(' ') || '–'}</td>
+              <td>{t.parts.emphasis.join(' ') || '–'}</td>
+              <td>{t.parts.state.join(' ') || '–'}</td>
+              <td>
+                <span class="c-cell"><span class="c-dot" style={`background: ${t.light}`} /><span class="c-num">{up(t.light)}</span></span>
+                <span class="c-cell"><span class="c-dot" style={`background: ${t.dark}`} /><span class="c-num">{up(t.dark)}</span></span>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+    {vi
+      ? <p class="c-from">Token thang màu: <code>color.{'{'}scale{'}'}.{'{'}1–12{'}'}</code> cho {SCALE_NAMES.join(', ')}, ví dụ <code>color.graphite.12</code> (<code>--bh-color-graphite-12</code>). Giá trị của chúng có ở trang Bảng màu. Component không dùng trực tiếp các token này.</p>
+      : <p class="c-from">Scale tokens: <code>color.{'{'}scale{'}'}.{'{'}1–12{'}'}</code> for {SCALE_NAMES.join(', ')}, for example <code>color.graphite.12</code> (<code>--bh-color-graphite-12</code>). Their values are on the Palette page. Components don't use them directly.</p>}
+    <div class="table-wrap">
+      <table class="c-token-ref">
+        <thead><tr><th scope="col">Token</th><th scope="col">{L('Value', 'Giá trị')}</th><th scope="col">{L('Use', 'Dùng cho')}</th></tr></thead>
+        <tbody>
+          {baseTokens.map((t) => (
+            <tr>
+              <td><code>{t.name}</code><span class="c-var">{t.cssVar}</span></td>
+              <td><span class="c-cell"><span class="c-dot" style={`background: ${t.light}`} /><span class="c-num">{up(t.light)}</span></span></td>
+              <td>{desc(t)}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  </div>
+)}
+
+{kind === 'pairing' && (
+  <div class="c-pairs">
+    {pairingRows.map((r) => {
+      const bg = tok(r.bgs[0]);
+      return (
+        <figure class="c-pair">
+          <div class="c-pair-stage" style={`background: var(${bg.cssVar})`}>
+            {r.text.map((t) => <span class="c-pair-text" style={`color: var(${tok(t).cssVar})`}>{t}{below(t, r.bgs) && <span class="c-pair-warn" title={L('Below WCAG 2.2 on some of these backgrounds', 'Dưới mức WCAG 2.2 trên một số nền này')}>⚠</span>}</span>)}
+            {r.other.length > 0 && (
+              <span class="c-pair-marks">
+                {r.other.map((t) => <span class="c-pair-mark" title={t} style={t.startsWith('border') ? `box-shadow: inset 0 0 0 2px var(${tok(t).cssVar})` : `color: var(${tok(t).cssVar})`}>{t.startsWith('border') ? '' : <SuccessIcon size={16} />}</span>)}
+              </span>
+            )}
+          </div>
+          <figcaption>
+            <b>{L('On', 'Trên')}</b> {r.bgs.map((b) => <code class="c-pair-token">{b}</code>)}
+            {r.other.length > 0 && <span class="c-from">{L('Icons and borders', 'Icon và viền')}: {r.other.map((t) => (below(t, r.bgs) ? `${t} ⚠` : t)).join(', ')}</span>}
+          </figcaption>
+        </figure>
+      );
+    })}
+  </div>
+)}
+
+{kind === 'dodont' && (
+  <div class="c-dd">
+    <figure class="c-dd-panel is-do">
+      <figcaption><span aria-hidden="true">✓</span> {L('Do', 'Nên')}</figcaption>
+      <div class="c-dd-stage">
+        {item === 'yellow' && (
+          <div class="c-dd-tabs"><span class="c-dd-tab is-current">{L('Connections', 'Kết nối')}</span><span class="c-dd-tab">{L('Jobs', 'Tác vụ')}</span><span class="c-dd-tab">{L('Logs', 'Nhật ký')}</span></div>
+        )}
+        {item === 'meaning' && (<span class="bh-label is-danger">{L('Failed', 'Lỗi')}</span>)}
+        {item === 'alone' && (<span class="bh-state is-danger"><DangerIcon size={16} />{L('Failed', 'Lỗi')}</span>)}
+        {item === 'tokens' && (<code class="c-dd-code">color: var(--bh-color-text-subtle);</code>)}
+        {item === 'primary' && (<span class="c-dd-row"><span class="bh-button bh-button-primary">{L('Save changes', 'Lưu thay đổi')}</span><span class="bh-button">{L('Cancel', 'Huỷ')}</span></span>)}
+        {item === 'pairing' && (<span class="c-dd-fill">{L('Sync failed', 'Đồng bộ lỗi')}<small>{L('3 orders skipped', 'Bỏ qua 3 đơn hàng')}</small></span>)}
+        {item === 'warning' && (<span class="bh-label is-warning">{L('Partial', 'Một phần')}</span>)}
+      </div>
+      <p>
+        {item === 'yellow' && L('Graphite text; yellow only for the current-page bar.', 'Chữ xám ghi; màu vàng chỉ cho vạch chỉ trang hiện tại.')}
+        {item === 'meaning' && L('Red for something that failed.', 'Màu đỏ cho việc bị lỗi.')}
+        {item === 'alone' && L('Say the status in words, with an icon.', 'Ghi trạng thái bằng chữ, kèm icon.')}
+        {item === 'tokens' && L('Use the role token for what you are painting.', 'Dùng role token cho thứ bạn đang tô.')}
+        {item === 'primary' && L('One graphite primary button per view.', 'Mỗi màn hình một nút chính màu xám ghi.')}
+        {item === 'pairing' && L('text.on-bold on a solid fill: white in light, dark in dark.', 'text.on-bold trên nền đặc: trắng ở giao diện sáng, tối ở giao diện tối.')}
+        {item === 'warning' && L('Warnings are orange.', 'Cảnh báo dùng màu cam.')}
+      </p>
+    </figure>
+    <figure class="c-dd-panel is-dont">
+      <figcaption><span aria-hidden="true">✕</span> {L('Don’t', 'Không nên')}</figcaption>
+      <div class="c-dd-stage">
+        {item === 'yellow' && (<span class="c-dd-yellow-text">{L('Sync now', 'Đồng bộ ngay')}</span>)}
+        {item === 'meaning' && (<span class="bh-label is-danger">{L('New', 'Mới')}</span>)}
+        {item === 'alone' && (<span class="c-dd-dot" aria-label={L('Red dot only', 'Chỉ có chấm đỏ')} />)}
+        {item === 'tokens' && (<code class="c-dd-code">color: #5f5e5c;<br />color: var(--bh-color-graphite-11);</code>)}
+        {item === 'primary' && (<span class="c-dd-row"><span class="bh-button bh-button-primary">{L('Save', 'Lưu')}</span><span class="bh-button bh-button-primary">{L('Publish', 'Xuất bản')}</span><span class="c-dd-yellow-button">{L('Export', 'Xuất file')}</span></span>)}
+        {item === 'pairing' && (<span class="c-dd-fill is-wrong">{L('Sync failed', 'Đồng bộ lỗi')}<small>{L('3 orders skipped', 'Bỏ qua 3 đơn hàng')}</small></span>)}
+        {item === 'warning' && (<span class="c-dd-yellow-label">{L('Partial', 'Một phần')}</span>)}
+      </div>
+      <p>
+        {item === 'yellow' && L('Yellow text or links: 1.85:1 on white, unreadable.', 'Chữ hoặc link màu vàng: 1.85:1 trên nền trắng, không đọc được.')}
+        {item === 'meaning' && L('A status colour used for decoration or emphasis.', 'Dùng màu trạng thái để trang trí hoặc nhấn mạnh.')}
+        {item === 'alone' && L('A coloured dot with no words.', 'Một chấm màu, không có chữ.')}
+        {item === 'tokens' && L('A hex value or a scale step in product code.', 'Mã hex hoặc một bậc của thang màu trong code sản phẩm.')}
+        {item === 'primary' && L('Several primary buttons, or a yellow button.', 'Nhiều nút chính, hoặc một nút màu vàng.')}
+        {item === 'pairing' && L('Subtle or coloured text on a solid fill.', 'Chữ phụ hoặc chữ màu trên nền đặc.')}
+        {item === 'warning' && L('A yellow warning: it reads as the brand.', 'Cảnh báo màu vàng: trông như màu thương hiệu.')}
+      </p>
+    </figure>
+  </div>
+)}
+
+{kind === 'example' && (
+  <figure class="c-ex">
+    <ColorExample markers />
+    <figcaption>
+      <ol class="c-ex-legend">
+        <li>Card: <code>surface</code>, {L('edge', 'viền')} <code>border</code>; {L('title', 'tiêu đề')} <code>text</code></li>
+        <li>{L('Primary button', 'Nút chính')}: <code>background.neutral.bold</code>, <code>text.inverse</code></li>
+        <li>{L('Secondary text', 'Chữ phụ')}: <code>text.subtle</code></li>
+        <li>{L('Status label', 'Nhãn trạng thái')}: <code>border.success</code>, <code>text.success</code></li>
+        <li>{vi ? <>Dòng được chọn: <code>background.selected</code> và vạch <code>border.selected</code></> : <>Selected row: <code>background.selected</code> and the <code>border.selected</code> bar</>}</li>
+        <li>Link: <code>link</code></li>
+      </ol>
+    </figcaption>
+  </figure>
+)}
+
+{kind === 'balance' && (
+  <figure class="c-balance">
+    <div class="c-balance-bar" aria-hidden="true">
+      <span style="flex: 55; background: var(--bh-color-surface-page)" />
+      <span style="flex: 18; background: var(--bh-color-surface-subtle)" />
+      <span style="flex: 15; background: var(--bh-color-background-neutral-bold)" />
+      <span style="flex: 5; background: var(--bh-color-border)" />
+      <span style="flex: 3; background: var(--bh-color-background-brand-bold)" />
+      <span style="flex: 1; background: var(--bh-color-background-info-bold)" />
+      <span style="flex: 1; background: var(--bh-color-background-success-bold)" />
+      <span style="flex: 1; background: var(--bh-color-background-warning-bold)" />
+      <span style="flex: 1; background: var(--bh-color-background-danger-bold)" />
+    </div>
+    <figcaption>{L('A typical screen, roughly: mostly white and light grey, graphite for text and the primary button, a touch of yellow for the brand, and status colours only where there is a status.', 'Tỉ lệ màu ước chừng trên một màn hình thường gặp: phần lớn là trắng và xám nhạt, xám ghi cho chữ và nút chính, một chút vàng cho thương hiệu, và màu trạng thái chỉ ở nơi có trạng thái.')}</figcaption>
+  </figure>
+)}
+
+{kind === 'anatomy' && (
+  <figure class="c-anat">
+    <div class="c-anat-row">
+      <span class="c-anat-part"><code>color</code><small>{L('Foundation', 'Nền tảng')}</small></span><span class="c-anat-dot">.</span>
+      <span class="c-anat-part is-prop"><code>background</code><small>{L('Property', 'Thứ được tô')}</small></span><span class="c-anat-dot">.</span>
+      <span class="c-anat-part is-role"><code>danger</code><small>{L('Role', 'Vai trò')}</small></span><span class="c-anat-dot">.</span>
+      <span class="c-anat-part is-emph"><code>bold</code><small>{L('Emphasis', 'Mức nhấn')}</small></span><span class="c-anat-dot">.</span>
+      <span class="c-anat-part is-state"><code>hover</code><small>{L('State', 'Trạng thái')}</small></span>
+    </div>
+    <div class="c-anat-row">
+      <span class="c-anat-part"><code>color</code><small>{L('Foundation', 'Nền tảng')}</small></span><span class="c-anat-dot">.</span>
+      <span class="c-anat-part is-prop"><code>text</code><small>{L('Property', 'Thứ được tô')}</small></span><span class="c-anat-dot">.</span>
+      <span class="c-anat-part is-skip"><code>neutral</code><small>{L('left out', 'bỏ đi')}</small></span>
+      <span class="c-anat-part is-emph"><code>subtle</code><small>{L('Emphasis', 'Mức nhấn')}</small></span>
+    </div>
+    <figcaption>{L('The solid danger fill on hover, and secondary text. A part that is the default is left out.', 'Nền đặc màu nguy hiểm khi hover, và chữ phụ. Phần nào là mặc định thì bỏ đi.')}</figcaption>
+  </figure>
+)}
+
+{kind === 'surfaces' && (
+  <div class="c-surf">
+    <figure>
+      <div class="c-surf-page">
+        <span class="c-tag">surface.page</span>
+        <div class="c-surf-side"><span class="c-tag">surface.subtle</span></div>
+        <div class="c-surf-card"><span class="c-tag">surface</span><span class="c-tag">border</span>
+          <span class="c-surf-tip">surface.inverse</span>
+        </div>
+      </div>
+      <figcaption>{L('Page, sidebar, card and a tooltip.', 'Trang, sidebar, card và một tooltip.')}</figcaption>
+    </figure>
+    <figure>
+      <div class="c-surf-page is-dimmed">
+        <div class="c-surf-scrim"><span class="c-tag is-on-dark">surface.scrim</span></div>
+        <div class="c-surf-dialog"><b>{L('Disconnect this connection?', 'Ngắt kết nối này?')}</b><span>{L('Syncing stops until you connect again.', 'Việc đồng bộ dừng lại cho tới khi bạn kết nối lại.')}</span><span class="c-dd-row"><span class="bh-button">{L('Cancel', 'Huỷ')}</span><span class="bh-button bh-button-danger">{L('Disconnect', 'Ngắt kết nối')}</span></span></div>
+      </div>
+      <figcaption>{L('A dialog on the scrim: one layer, behind dialogs and drawers only.', 'Dialog trên lớp phủ scrim: một lớp, chỉ nằm sau dialog và drawer.')}</figcaption>
+    </figure>
+  </div>
+)}
+
+{kind === 'states' && (
+  <div class="table-wrap">
+    <table class="c-states">
+      <thead><tr><th scope="col"></th><th scope="col">{L('Rest', 'Nghỉ')}</th><th scope="col">Hover</th><th scope="col">{L('Pressed', 'Nhấn')}</th><th scope="col">Focus</th><th scope="col">{L('Disabled', 'Vô hiệu')}</th></tr></thead>
+      <tbody>
+        <tr>
+          <th scope="row">{L('Primary', 'Nút chính')}</th>
+          <td><span class="bh-button bh-button-primary">{L('Save', 'Lưu')}</span></td>
+          <td><span class="bh-button bh-button-primary" style="background: var(--bh-color-background-neutral-bold-hover); border-color: var(--bh-color-background-neutral-bold-hover)">{L('Save', 'Lưu')}</span></td>
+          <td><span class="bh-button bh-button-primary" style="background: var(--bh-color-background-neutral-bold-pressed); border-color: var(--bh-color-background-neutral-bold-pressed)">{L('Save', 'Lưu')}</span></td>
+          <td><span class="bh-button bh-button-primary c-focus">{L('Save', 'Lưu')}</span></td>
+          <td><span class="bh-button c-disabled">{L('Save', 'Lưu')}</span></td>
+        </tr>
+        <tr>
+          <th scope="row">{L('Default', 'Nút mặc định')}</th>
+          <td><span class="bh-button">{L('Cancel', 'Huỷ')}</span></td>
+          <td><span class="bh-button" style="background: var(--bh-color-background-neutral-subtle-hover)">{L('Cancel', 'Huỷ')}</span></td>
+          <td><span class="bh-button" style="background: var(--bh-color-background-neutral-subtle-pressed)">{L('Cancel', 'Huỷ')}</span></td>
+          <td><span class="bh-button c-focus">{L('Cancel', 'Huỷ')}</span></td>
+          <td><span class="bh-button c-disabled">{L('Cancel', 'Huỷ')}</span></td>
+        </tr>
+        <tr>
+          <th scope="row">{L('Row', 'Dòng')}</th>
+          <td><span class="c-state-row">{L('Store', 'Cửa hàng')}</span></td>
+          <td><span class="c-state-row" style="background: var(--bh-color-background-neutral-subtle-hover)">{L('Store', 'Cửa hàng')}</span></td>
+          <td><span class="c-state-row" style="background: var(--bh-color-background-neutral-subtle-pressed)">{L('Store', 'Cửa hàng')}</span></td>
+          <td><span class="c-state-row c-focus">{L('Store', 'Cửa hàng')}</span></td>
+          <td><span class="c-state-row is-selected">{L('Selected', 'Được chọn')}</span></td>
+        </tr>
+      </tbody>
+    </table>
+    <ul class="c-state-key">
+      <li><b>{L('Primary', 'Nút chính')}</b> <code>background.neutral.bold</code> → <code>.hover</code> → <code>.pressed</code></li>
+      <li><b>{L('Default, row', 'Nút mặc định, dòng')}</b> <code>surface</code> → <code>background.neutral.subtle.hover</code> → <code>.pressed</code></li>
+      {vi
+        ? <li><b>Focus</b> <code>border.focus</code>, dày 2 px, cách 2 px · <b>Vô hiệu</b> <code>background.disabled</code>, <code>text.disabled</code> · <b>Được chọn</b> <code>background.selected</code>, vạch <code>border.selected</code></li>
+        : <li><b>Focus</b> <code>border.focus</code>, 2 px, 2 px away · <b>Disabled</b> <code>background.disabled</code>, <code>text.disabled</code> · <b>Selected</b> <code>background.selected</code>, <code>border.selected</code> bar</li>}
+    </ul>
+  </div>
+)}
+
+{kind === 'banners' && (
+  <div class="c-banners">
+    {(vi
+      ? [['info', 'Đang đồng bộ 1.240 đơn hàng từ cửa hàng online.'], ['success', 'Đã đồng bộ mọi đơn hàng.'], ['warning', 'Token ERP hết hạn sau 3 ngày. Hãy kết nối lại để tiếp tục đồng bộ.'], ['danger', 'Đồng bộ lỗi: ứng dụng kế toán từ chối thông tin đăng nhập.']]
+      : [['info', 'Syncing 1,240 orders from the online store.'], ['success', 'All orders synced.'], ['warning', 'The ERP token expires in 3 days. Reconnect to keep syncing.'], ['danger', 'Sync failed: the accounting app rejected the credentials.']]).map(([r, msg]) => { const BannerIcon = icon[r]; return (
+      <div class={`c-banner is-${r}`}><span class="c-banner-icon"><BannerIcon size={16} /></span><span>{msg}</span></div>
+    ); })}
+    <p class="c-from">Banner: <code>background.{'{'}role{'}'}.subtle</code>, {L('edge', 'viền')} <code>border.{'{'}role{'}'}.subtle</code>, icon <code>icon.{'{'}role{'}'}</code>, {L('text', 'chữ')} <code>text</code>.</p>
+  </div>
+)}
+
+{kind === 'steps' && (
+  <figure class="c-steps-ill">
+    {['graphite', 'blue'].map((sc) => (
+      <div class="c-steps-row">
+        <b>{sc === 'graphite' ? 'Graphite' : 'Blue'}</b>
+        {stepUse(sc).map(({ step, v }) => (
+          <div class="c-step-cell">
+            {step <= 2 && <span class="c-step-bg" style={`background: ${v}`} />}
+            {step >= 3 && step <= 5 && <span class="c-step-pill" style={`background: ${v}`}>Tag</span>}
+            {step >= 6 && step <= 8 && <span class="c-step-line" style={`border-color: ${v}`} />}
+            {step >= 9 && step <= 10 && <span class="c-step-fill" style={`background: ${v}`}>{L('Go', 'Đi')}</span>}
+            {step >= 11 && <span class="c-step-text" style={`color: ${v}`}>Aa</span>}
+            <small>{step}</small>
+          </div>
+        ))}
+      </div>
+    ))}
+    <figcaption>{L('1–2 backgrounds · 3–5 component fills at rest, hover, pressed · 6–8 borders · 9–10 solid fills · 11–12 text.', '1–2 nền · 3–5 nền component khi nghỉ, hover, nhấn · 6–8 viền · 9–10 nền đặc · 11–12 chữ.')}</figcaption>
+  </figure>
+)}
+
+{kind === 'themes' && (
+  <div class="c-themes">
+    <figure><div class="c-theme-stage" style={`${themeStyle('light')}; background: ${tok('surface.page').light}`}><ColorExample style={themeStyle('light')} /></div><figcaption>{L('Light', 'Sáng')}</figcaption></figure>
+    <figure><div class="c-theme-stage" style={`${themeStyle('dark')}; background: ${tok('surface.page').dark}`}><ColorExample style={themeStyle('dark')} /></div><figcaption>{L('Dark: the same tokens, no extra code', 'Tối: cùng token, không thêm code')}</figcaption></figure>
+  </div>
+)}
+
+{kind === 'contrast' && (
+  <div class="c-contrast">
+    {contrastSamples.map((c) => (
+      <figure class={c.pass ? 'is-pass' : 'is-fail'}>
+        <div class="c-contrast-chip" style={c.min === 3 ? `background: ${c.bgVal}` : `background: ${c.bgVal}; color: ${c.fgVal}`}>
+          {c.min === 3 ? <span class="c-contrast-box" style={`border-color: ${c.fgVal}`} /> : L('Synced 2 min ago', 'Đồng bộ 2 phút trước')}
+        </div>
+        <figcaption><b>{c.pass ? L('Pass', 'Đạt') : L('Fail', 'Không đạt')} {ratio(c.r)}</b> {c.text} ({L('needs', 'cần')} {c.min}:1)</figcaption>
+      </figure>
+    ))}
+  </div>
+)}
+
+{kind === 'palette' && (
+  <div class="c-pal-set">
+    {(['light', 'dark'] as const).map((mode) => (
+      <figure class={`c-pal is-${mode}`} style={`background: ${pageOf(mode)}; color: ${mode === 'light' ? INK_DARK : '#eeeeed'}`}>
+        <figcaption>{mode === 'light' ? L('Light theme', 'Giao diện sáng') : L('Dark theme', 'Giao diện tối')}</figcaption>
+        <div class="c-pal-grid">
+          {scales.map((sc) => (
+            <div class="c-pal-col">
+              <b>{sc.name}</b>
+              {sc.steps.map((t, i) => {
+                const v = t[mode];
+                return (
+                  <div class="c-pal-sw" style={`background: ${v}; color: ${ink(v)}`} title={`color.${sc.id}.${i + 1}`}>
+                    <span>{i + 1}{brandStep[mode][sc.id] === i + 1 && <em>{L('brand', 'thương hiệu')}</em>}</span>
+                    <span class="c-num">{up(v).slice(1)}</span>
+                  </div>
+                );
+              })}
+            </div>
+          ))}
+        </div>
+      </figure>
+    ))}
+  </div>
+)}
+
+{kind === 'ramps' && (
+  <div class="c-ramps">
+    {(['light', 'dark'] as const).map((mode) => (
+      <figure class="c-ramp-card" style={`background: ${pageOf(mode)}`}>
+        {scales.map((sc) => (
+          <div class="c-ramp" title={sc.name}>
+            {sc.steps.map((t) => <span style={`background: ${t[mode]}`} />)}
+          </div>
+        ))}
+        <figcaption style={`color: ${mode === 'light' ? INK_DARK : '#eeeeed'}`}>{mode === 'light' ? L('Light', 'Sáng') : L('Dark', 'Tối')}: {L('graphite, yellow, blue, green, orange, red', 'xám ghi, vàng, xanh dương, xanh lá, cam, đỏ')}</figcaption>
+      </figure>
+    ))}
+  </div>
+)}
+
+{kind === 'emphasis' && (
+  <figure class="c-emph">
+    <div class="c-emph-grid">
+      <span /><b>{L('Subtle', 'Nhạt')}</b><b>{L('Default', 'Mặc định')}</b><b>{L('Bold', 'Đậm')}</b>
+      {emphasisRows.map((row) => (
+        <>
+          <b>{row.name}</b>
+          {row.fills.map((f) => f
+            ? <span class="c-emph-fill" style={`background: var(${f.bg.cssVar}); color: var(${f.fg.cssVar})`} title={f.bg.name.replace('color.', '')}>{f.bg.name.replace('color.background.', '')}</span>
+            : <span class="c-emph-none">–</span>)}
+        </>
+      ))}
+    </div>
+    {vi
+      ? <figcaption>Nhạt cho vùng lớn và dòng, đậm cho một thứ nhỏ cần nổi bật. Chữ trên mỗi nền là cặp của nền đó: chữ theo vai trò trên nền nhạt, <code>text.on-bold</code> trên nền đậm.</figcaption>
+      : <figcaption>Subtle for large areas and rows, bold for one small thing that must stand out. Text on each fill is its pair: role text on subtle, <code>text.on-bold</code> on bold.</figcaption>}
+  </figure>
+)}