@misoto22/design 0.3.1

package/dist/tokens/brand.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Brand colour mirrors for surfaces that cannot read CSS custom properties —
+ * OpenGraph/Satori cards, build-time scripts, `theme-color` in a web manifest,
+ * a canvas.
+ *
+ * The RUNTIME theme lives in `styles/tokens.css` (`:root` + `[data-mode="dark"]`)
+ * and that is the single place to recolour the system. These literals mirror
+ * specific tokens; `brand.test.ts` parses the CSS and fails if the two drift,
+ * so this file cannot quietly fall behind the thing it mirrors.
+ */
+declare const BRAND: {
+    /** = light --paper. The page ground. */
+    readonly paper: "#ffffff";
+    /** = dark --paper. The dark viewport's `theme-color`. */
+    readonly paperDark: "#0d0d0d";
+    /** = light --paper-2. One step off the ground. */
+    readonly paperElevated: "#f7f7f5";
+    /** = light --ink. The mark. */
+    readonly ink: "#101010";
+    /** = dark --ink. */
+    readonly inkDark: "#f4f4f2";
+    /** = light --ink-2. Body copy that is not the mark. */
+    readonly body: "#4a4a4a";
+    /** = light --ink-3-aa. The lightest text step that still clears AA on paper. */
+    readonly muted: "#5c5c5c";
+    /** = light --stone. The fill under a skeleton, a bar, a quiet plate. */
+    readonly stone: "#f2f1ee";
+    /** = light --rule. Hairline. */
+    readonly rule: "#edebe6";
+    /** = light --rule-2. Edge. */
+    readonly ruleStrong: "#dbdbd6";
+    /** = --feature-surface. The one reversed plate. */
+    readonly feature: "#262626";
+    /** = --on-dark. Type over a photograph — a dark ground in BOTH themes. */
+    readonly onDark: "#fbfbfa";
+    /** Byline weight over a photograph. */
+    readonly onDarkMuted: "rgba(251,251,250,0.82)";
+    /** = --photo-scrim, as an "r, g, b" tuple for a gradient. */
+    readonly scrimRgb: "16, 16, 16";
+    /** = light --ok / --warn / --danger. The only chroma in the system. */
+    readonly success: "#3d6b34";
+    readonly warning: "#8a5a00";
+    readonly danger: "#a83214";
+};
+type BrandColor = keyof typeof BRAND;
+
+export { BRAND, type BrandColor };

package/dist/tokens/brand.js

@@ -0,0 +1,38 @@
+const BRAND = {
+  /** = light --paper. The page ground. */
+  paper: "#ffffff",
+  /** = dark --paper. The dark viewport's `theme-color`. */
+  paperDark: "#0d0d0d",
+  /** = light --paper-2. One step off the ground. */
+  paperElevated: "#f7f7f5",
+  /** = light --ink. The mark. */
+  ink: "#101010",
+  /** = dark --ink. */
+  inkDark: "#f4f4f2",
+  /** = light --ink-2. Body copy that is not the mark. */
+  body: "#4a4a4a",
+  /** = light --ink-3-aa. The lightest text step that still clears AA on paper. */
+  muted: "#5c5c5c",
+  /** = light --stone. The fill under a skeleton, a bar, a quiet plate. */
+  stone: "#f2f1ee",
+  /** = light --rule. Hairline. */
+  rule: "#edebe6",
+  /** = light --rule-2. Edge. */
+  ruleStrong: "#dbdbd6",
+  /** = --feature-surface. The one reversed plate. */
+  feature: "#262626",
+  /** = --on-dark. Type over a photograph — a dark ground in BOTH themes. */
+  onDark: "#fbfbfa",
+  /** Byline weight over a photograph. */
+  onDarkMuted: "rgba(251,251,250,0.82)",
+  /** = --photo-scrim, as an "r, g, b" tuple for a gradient. */
+  scrimRgb: "16, 16, 16",
+  /** = light --ok / --warn / --danger. The only chroma in the system. */
+  success: "#3d6b34",
+  warning: "#8a5a00",
+  danger: "#a83214"
+};
+export {
+  BRAND
+};
+//# sourceMappingURL=brand.js.map

package/dist/tokens/brand.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/tokens/brand.ts"],"sourcesContent":["/**\n * Brand colour mirrors for surfaces that cannot read CSS custom properties —\n * OpenGraph/Satori cards, build-time scripts, `theme-color` in a web manifest,\n * a canvas.\n *\n * The RUNTIME theme lives in `styles/tokens.css` (`:root` + `[data-mode=\"dark\"]`)\n * and that is the single place to recolour the system. These literals mirror\n * specific tokens; `brand.test.ts` parses the CSS and fails if the two drift,\n * so this file cannot quietly fall behind the thing it mirrors.\n */\nexport const BRAND = {\n  /** = light --paper. The page ground. */\n  paper: '#ffffff',\n  /** = dark --paper. The dark viewport's `theme-color`. */\n  paperDark: '#0d0d0d',\n  /** = light --paper-2. One step off the ground. */\n  paperElevated: '#f7f7f5',\n  /** = light --ink. The mark. */\n  ink: '#101010',\n  /** = dark --ink. */\n  inkDark: '#f4f4f2',\n  /** = light --ink-2. Body copy that is not the mark. */\n  body: '#4a4a4a',\n  /** = light --ink-3-aa. The lightest text step that still clears AA on paper. */\n  muted: '#5c5c5c',\n  /** = light --stone. The fill under a skeleton, a bar, a quiet plate. */\n  stone: '#f2f1ee',\n  /** = light --rule. Hairline. */\n  rule: '#edebe6',\n  /** = light --rule-2. Edge. */\n  ruleStrong: '#dbdbd6',\n  /** = --feature-surface. The one reversed plate. */\n  feature: '#262626',\n  /** = --on-dark. Type over a photograph — a dark ground in BOTH themes. */\n  onDark: '#fbfbfa',\n  /** Byline weight over a photograph. */\n  onDarkMuted: 'rgba(251,251,250,0.82)',\n  /** = --photo-scrim, as an \"r, g, b\" tuple for a gradient. */\n  scrimRgb: '16, 16, 16',\n  /** = light --ok / --warn / --danger. The only chroma in the system. */\n  success: '#3d6b34',\n  warning: '#8a5a00',\n  danger: '#a83214',\n} as const\n\nexport type BrandColor = keyof typeof BRAND\n"],"mappings":"AAUO,MAAM,QAAQ;AAAA;AAAA,EAEnB,OAAO;AAAA;AAAA,EAEP,WAAW;AAAA;AAAA,EAEX,eAAe;AAAA;AAAA,EAEf,KAAK;AAAA;AAAA,EAEL,SAAS;AAAA;AAAA,EAET,MAAM;AAAA;AAAA,EAEN,OAAO;AAAA;AAAA,EAEP,OAAO;AAAA;AAAA,EAEP,MAAM;AAAA;AAAA,EAEN,YAAY;AAAA;AAAA,EAEZ,SAAS;AAAA;AAAA,EAET,QAAQ;AAAA;AAAA,EAER,aAAa;AAAA;AAAA,EAEb,UAAU;AAAA;AAAA,EAEV,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AACV;","names":[]}

package/dist/tokens.css

@@ -0,0 +1,323 @@
+/* ==========================================================================
+   WHITE RESET — design tokens
+   --------------------------------------------------------------------------
+   The portable layer of @misoto22/design: plain CSS custom properties, no
+   Tailwind dependency. Import this alone and any consumer — a Tailwind app, a
+   plain-CSS app, a preview sandbox — gets the same look.
+
+   A pure-white monochrome system for software, writing, and photography. The
+   ground is paper-white, the mark is near-black, and the only chroma left in
+   the file is status, which is bound to state and never to brand.
+
+   Two blocks, and only two: the primitives below, and the semantic aliases in
+   `semantic.css` that name what a primitive is FOR. A component never reads a
+   primitive directly — it reads the alias — so recolouring the system is one
+   edit here rather than a sweep through every component.
+
+   Hex mirrors for surfaces that cannot read CSS custom properties (OpenGraph
+   cards, build scripts, `theme-color`) live in `tokens/brand.ts`, and a test
+   holds the two in sync.
+   ========================================================================== */
+
+:root,
+[data-mode='light'] {
+  --paper: #ffffff;
+  --paper-2: #f7f7f5;
+  --bar: var(--stone);
+  --bar-2: var(--stone);
+
+  /* Two text steps and nothing lighter. --ink-3-aa is the floor — it clears
+     AA on white at 6.7:1, and every step above it is darker. --ink-3 is the
+     same weight expressed as alpha, for rules and washes that must sit over a
+     photograph as well as over paper. */
+  --ink: #101010;
+  --ink-2: #4a4a4a;
+  --ink-3: rgba(16, 16, 16, 0.55);
+  --ink-3-aa: #5c5c5c;
+
+  /* The second editorial voice is not a hue — it is one more neutral step,
+     sitting between --ink and --ink-2, so a byline separates from body copy
+     without introducing colour. */
+  --forest: #3a3a3a;
+  --mist: var(--stone);
+  --stone: #f2f1ee;
+
+  /* Monochrome collapses the pointer onto the mark: the accent IS ink. What
+     used to be carried by hue is now carried by weight, rule and reversal —
+     an ink pill, an ink underline, an ink-filled plate. */
+  --clay: var(--ink);
+  --clay-ink: var(--clay);
+
+  /* The one reversed plate, and the one place the ramp needs a tenth step.
+     Set to var(--ink) it was the page's darkest possible mark used as a field,
+     which on a white page reads as a hole punched through it rather than as a
+     panel. Two steps lighter keeps the reversal — 15.1:1 for paper-white type
+     on it — and matches the dark side. */
+  --feature-surface: #262626;
+  --on-feature: var(--paper);
+  --focus-on-feature: var(--on-feature);
+  --on-photo: var(--paper);
+  --photo-caption-surface: var(--ink);
+  --photo-shadow: 0 1px 6px rgb(0 0 0 / 0.72);
+
+  /* Three rule weights, because a monochrome page has no colour left to
+     separate one band from the next: hairline, edge, and hard. */
+  --rule: #edebe6;
+  --rule-2: #dbdbd6;
+  --rule-hard: var(--ink);
+
+  /* Historic role names, kept so a consumer written against the previous
+     palette keeps resolving. Their hue is now ink; the role remains "the
+     single editorial pointer". */
+  --red: var(--clay);
+  --red-ink: var(--clay);
+  --red-soft: rgba(16, 16, 16, 0.07);
+  --on-red: var(--paper);
+
+  --shadow-offset: var(--clay);
+
+  color-scheme: light;
+}
+
+[data-mode='dark'] {
+  --paper: #0d0d0d;
+  --paper-2: #161616;
+  --bar: var(--stone);
+  --bar-2: var(--stone);
+
+  --ink: #f4f4f2;
+  --ink-2: #b4b4b0;
+  --ink-3: rgba(244, 244, 242, 0.55);
+  --ink-3-aa: #9a9a96;
+
+  --forest: #c9c9c5;
+  --mist: var(--stone);
+  --stone: #1f1f1f;
+  --clay: var(--ink);
+  --clay-ink: var(--clay);
+  --feature-surface: #1a1a1a;
+  --on-feature: var(--ink);
+  --focus-on-feature: var(--on-feature);
+
+  /* A photograph is a dark ground in both themes, so this one does not swap
+     with --paper. It sits a shade off pure white because the light side has
+     already spent pure white on the page ground, and one hex serves one role. */
+  --on-photo: #fbfbfa;
+  --photo-caption-surface: var(--paper);
+  --photo-shadow: 0 1px 6px rgb(0 0 0 / 0.72);
+
+  --rule: rgba(244, 244, 242, 0.14);
+  --rule-2: rgba(244, 244, 242, 0.26);
+  --rule-hard: var(--ink);
+
+  --red: var(--clay);
+  --red-ink: var(--clay);
+  --red-soft: rgba(244, 244, 242, 0.12);
+  --on-red: var(--paper);
+
+  --shadow-offset: var(--clay);
+
+  color-scheme: dark;
+}
+
+:root {
+  /* ─── Type ───────────────────────────────────────────────────────────────
+     Three faces and their CJK companions.
+
+     EVERY `var()` here carries a fallback, and that is load-bearing rather than
+     tidy. A `var(--font-hanken)` with no fallback, in a host that does not
+     define `--font-hanken`, is invalid at computed-value time — and IACVT does
+     not skip the one term, it discards the WHOLE declaration. So the entire
+     stack collapsed to nothing and every surface rendered in the platform's
+     system font. It worked inside the site, where next/font defines those
+     names, and failed everywhere else: for a package whose whole purpose is to
+     render the same on both sides, that is the worst possible bug.
+
+     With the fallback, a host that loads the faces itself (next/font, a CDN)
+     sets `--font-*` and wins; a host that does not falls through to the literal
+     family name, which is exactly the name `fonts.css` declares its vendored
+     @font-face rules under.
+
+     The CJK stacks deliberately end WITHOUT a generic family. They are spliced
+     into the middle of the three stacks above, and a generic in the middle
+     terminates a font stack — everything listed after it is unreachable. */
+  --sans: var(--font-hanken, 'Hanken Grotesk'), var(--cjk-sans), 'Helvetica Neue', Arial, sans-serif;
+  --serif: var(--font-newsreader, 'Newsreader'), var(--cjk-serif), Georgia, serif;
+  --mono: var(--font-plex-mono, 'IBM Plex Mono'), var(--cjk-sans), ui-monospace, SFMono-Regular, Menlo,
+    monospace;
+
+  --cjk-serif: var(--font-noto-serif-sc, 'Noto Serif SC'), 'Source Han Serif SC', 'Songti SC', STSong,
+    SimSun;
+  --cjk-sans: var(--font-noto-sans-sc, 'Noto Sans SC'), 'PingFang SC', 'Hiragino Sans GB',
+    'Microsoft YaHei';
+
+  --lh-cjk: 1.8;
+  --ls-cjk: 0;
+
+  /* Heading scale — the single ladder every surface climbs. Five steps, each
+     fluid between a phone and the 1288px page, and nothing sits above
+     --fs-title: a page has exactly one thing larger than its own records.
+
+     Steps sit close together by design — the ladder separates records of the
+     same kind, not a heading from its own sub-heading. Two headings that nest
+     must skip a step: --fs-lead over --fs-sub reads as a hierarchy (1.33),
+     --fs-lead over --fs-heading does not (1.14). */
+  /* ─── The fluid base ──────────────────────────────────────────────────────
+     Every fluid step below is one percent of THIS, not of the viewport.
+
+     The default is `1vw`, which is what a page wants. A bounded frame — a
+     device preview, a documentation canvas, an embedded console — overrides it
+     to `1cqi` and declares itself a `container`, and the whole ramp re-bases
+     onto the frame's width. Without the seam a 390px preview inside a 1440px
+     window renders 54px headings and 64px gutters, which is not what a 390px
+     screen looks like and is exactly the bug this replaces.
+
+     The ramp itself is declared once, below, for BOTH `:root` and a frame —
+     rather than composed here and inherited. A custom property substitutes
+     `var()` where it is DECLARED, so a ramp written only on `:root` bakes in
+     `1vw` and a deeper `--fluid` never reaches it. */
+  --fluid: 1vw;
+
+  --maxw: 1288px;
+  --col: 8.3333%;
+  --row: 52px;
+
+}
+
+/* The fluid ramp, computed wherever `--fluid` is set.
+   `[data-fluid-frame]` must sit INSIDE the element carrying `container-type`:
+   a container query unit resolves against an ANCESTOR container, never against
+   the element that declares the container itself. */
+:root,
+[data-fluid-frame] {
+  --fs-title: clamp(2.5rem, calc(4.6 * var(--fluid)), 3.375rem); /* page h1        40 → 54px */
+  --fs-lead: clamp(1.875rem, calc(3 * var(--fluid)), 2.625rem); /* band heading   30 → 42px */
+  --fs-heading: clamp(1.5rem, calc(2.1 * var(--fluid)), 1.8125rem); /* record title   24 → 29px */
+  --fs-sub: clamp(1.3125rem, calc(1.7 * var(--fluid)), 1.5625rem); /* card sub-head  21 → 25px */
+  --fs-item: clamp(1.125rem, calc(1.35 * var(--fluid)), 1.25rem); /* in-card title  18 → 20px */
+
+  --pad: clamp(18px, calc(4.4 * var(--fluid)), 64px);
+  --sec: clamp(54px, calc(7 * var(--fluid)), 96px);
+  --sec-tight: clamp(40px, calc(5 * var(--fluid)), 68px);
+}
+
+:root {
+  /* ─── Radius ─────────────────────────────────────────────────────────────
+     Four steps, and there is no fifth. The old law was "0 everywhere"; the
+     White Reset replaces that with a scale small enough to stay quiet on a
+     white page. A 50% circle is geometry rather than a corner and is not a
+     step here. */
+  --radius-sm: 6px; /* images, thumbnails, media frames */
+  --radius: 8px; /* inputs, buttons, small plates */
+  --radius-lg: 14px; /* feature panels, dark plates */
+  --radius-pill: 999px; /* tabs, chips, counters, circular controls */
+
+  /* ─── Density ────────────────────────────────────────────────────────────
+     The second theming axis, and the only other one. Light/dark swaps colour;
+     density swaps the size of anything a finger or a pointer has to hit.
+
+     `comfortable` is the default, and 44px is not an arbitrary number: it is
+     the pointer-target size WCAG 2.5.5 (AAA) asks for.
+
+     `compact` is for a dense desktop tool driven by a mouse — a data grid, an
+     admin console — and it is a real trade, stated rather than hidden. At 36px
+     it still clears WCAG 2.5.8 (AA, 24px) with room to spare, and no longer
+     meets 2.5.5. Do not put it on a page a phone will open.
+
+     Set it on any container: `<div data-density="compact">`. Controls read
+     these tokens, so the whole subtree changes together and nothing has to be
+     told twice. */
+  --control-h-sm: 2.25rem; /* 36px */
+  --control-h-md: 2.75rem; /* 44px — WCAG 2.5.5 */
+  --control-h-lg: 3rem; /* 48px */
+  --control-px-sm: 1rem;
+  --control-px-md: 1.5rem;
+  --control-px-lg: 1.75rem;
+  /* The vertical padding is part of the axis too, and has to be: a control
+     whose padding alone exceeds the compact height never shrinks, because
+     `min-height` is a floor and not a ceiling. */
+  --control-py-sm: 0.5rem;
+  --control-py-md: 0.75rem;
+  --control-py-lg: 0.75rem;
+  --control-gap: 0.625rem;
+  /* Text inputs are measured separately: they are read as much as they are
+     hit, so their padding tracks the type rather than the target. */
+  --field-px: 0.875rem;
+  --field-py: 0.625rem;
+
+  /* A table's own row padding. Separate from the control scale because a table
+     row is neither a control nor a field — it is a line of text with a rule
+     under it, and it tightens on its own axis. */
+  --table-pad-y: 0.875rem;
+  /* `0px`, not `0`. The cell rule adds to this inside a calc, and a unitless
+     zero makes `calc(0 + 1.5rem)` invalid at computed-value time — the whole
+     declaration is dropped and every column loses its gutter in silence. */
+  --table-pad-x: 0px;
+
+  /* ─── Motion ─── */
+  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
+  --fast: 0.13s;
+  --mid: 0.22s;
+  --slow: 0.34s;
+
+  /* ─── Stacking ─── seven ranks, named for what sits at each. */
+  --z-rule: 1;
+  --z-sticky: 10;
+  --z-drawer: 100;
+  --z-scrim: 200;
+  --z-modal: 210;
+  --z-palette: 220;
+  --z-toast: 300;
+
+  /* ─── Focus ─── */
+  --focus: var(--red);
+  --focus-w: 2px;
+  --focus-off: 3px;
+
+  /* ─── Icons ─── one stroke weight, three sizes. */
+  --ico-s: 14px;
+  --ico-m: 16px;
+  --ico-l: 20px;
+  --ico-stroke: 1.5;
+
+  /* ─── Status ─── the only chroma in the system, and it is bound to state. */
+  --ok: #3d6b34;
+  --ok-soft: rgba(61, 107, 52, 0.13);
+  --warn: #8a5a00;
+  --warn-soft: rgba(138, 90, 0, 0.13);
+  --danger: #a83214;
+  --danger-soft: rgba(168, 50, 20, 0.14);
+  --scrim: color-mix(in srgb, var(--ink) 62%, transparent);
+}
+
+[data-mode='dark'] {
+  --ok: #84b47b;
+  --ok-soft: rgba(132, 180, 123, 0.16);
+  --warn: #d9a55d;
+  --warn-soft: rgba(217, 165, 93, 0.16);
+  --danger: #ee8b68;
+  --danger-soft: rgba(238, 139, 104, 0.16);
+  --scrim: color-mix(in srgb, #000 72%, transparent);
+}
+
+[data-density='compact'] {
+  --control-h-sm: 1.875rem; /* 30px */
+  --control-h-md: 2.25rem; /* 36px — clears WCAG 2.5.8, not 2.5.5 */
+  --control-h-lg: 2.5rem; /* 40px */
+  --control-px-sm: 0.75rem;
+  --control-px-md: 1rem;
+  --control-px-lg: 1.25rem;
+  --control-py-sm: 0.25rem;
+  --control-py-md: 0.375rem;
+  --control-py-lg: 0.5rem;
+  --control-gap: 0.5rem;
+  --field-px: 0.625rem;
+  --field-py: 0.375rem;
+  --table-pad-y: 0.5rem;
+}
+
+/* A table can be tightened on its own, without the whole subtree going
+   compact — a dashboard often wants a dense grid inside comfortable chrome. */
+[data-table-density='compact'] {
+  --table-pad-y: 0.5rem;
+}

package/dist/tokens.d.ts

@@ -0,0 +1,153 @@
+/* GENERATED by scripts/emit-tokens.mjs — do not edit. */
+export interface TokenRecord {
+  /** Which CSS layer declared it: a primitive, or the role that names it. */
+  layer: 'tokens' | 'semantic'
+  /** Foundations grouping — colour, type, space, radius, motion, density… */
+  category: string
+  light: string
+  /** Present only when the token swaps; absent means it holds in both themes. */
+  dark?: string
+  /** The comment above the declaration, which is usually the only place the reason is written. */
+  comment?: string
+}
+
+export type TokenName =
+  | 'accent'
+  | 'accent-foreground'
+  | 'accent-hover'
+  | 'accent-muted'
+  | 'accent-on-dark'
+  | 'accent-on-muted'
+  | 'accent-wash'
+  | 'background'
+  | 'background-elevated'
+  | 'bar'
+  | 'bar-2'
+  | 'border-color'
+  | 'border-subtle'
+  | 'brand-plate'
+  | 'card-background'
+  | 'cjk-sans'
+  | 'cjk-serif'
+  | 'clay'
+  | 'clay-ink'
+  | 'code-background'
+  | 'col'
+  | 'control-gap'
+  | 'control-h-lg'
+  | 'control-h-md'
+  | 'control-h-sm'
+  | 'control-px-lg'
+  | 'control-px-md'
+  | 'control-px-sm'
+  | 'control-py-lg'
+  | 'control-py-md'
+  | 'control-py-sm'
+  | 'danger'
+  | 'danger-soft'
+  | 'danger-wash'
+  | 'disabled-opacity'
+  | 'duration-base'
+  | 'duration-fast'
+  | 'duration-slow'
+  | 'ease'
+  | 'ease-out-expo'
+  | 'fast'
+  | 'feature-surface'
+  | 'field-px'
+  | 'field-py'
+  | 'fluid'
+  | 'focus'
+  | 'focus-off'
+  | 'focus-on-feature'
+  | 'focus-w'
+  | 'foreground'
+  | 'foreground-muted'
+  | 'forest'
+  | 'fs-heading'
+  | 'fs-item'
+  | 'fs-lead'
+  | 'fs-sub'
+  | 'fs-title'
+  | 'ico-l'
+  | 'ico-m'
+  | 'ico-s'
+  | 'ico-stroke'
+  | 'info'
+  | 'info-wash'
+  | 'ink'
+  | 'ink-2'
+  | 'ink-3'
+  | 'ink-3-aa'
+  | 'lh-cjk'
+  | 'lift'
+  | 'lift-sm'
+  | 'ls-cjk'
+  | 'maxw'
+  | 'measure-record'
+  | 'mid'
+  | 'mist'
+  | 'mono'
+  | 'nav-background'
+  | 'ok'
+  | 'ok-soft'
+  | 'on-dark'
+  | 'on-feature'
+  | 'on-photo'
+  | 'on-red'
+  | 'overlay'
+  | 'pad'
+  | 'page-pad'
+  | 'paper'
+  | 'paper-2'
+  | 'photo-caption-surface'
+  | 'photo-scrim'
+  | 'photo-shadow'
+  | 'radius'
+  | 'radius-lg'
+  | 'radius-pill'
+  | 'radius-sm'
+  | 'red'
+  | 'red-ink'
+  | 'red-soft'
+  | 'ring'
+  | 'ring-offset'
+  | 'row'
+  | 'rule'
+  | 'rule-2'
+  | 'rule-hard'
+  | 'sans'
+  | 'scrim'
+  | 'scroll-offset'
+  | 'sec'
+  | 'sec-tight'
+  | 'secondary-text'
+  | 'serif'
+  | 'shadow'
+  | 'shadow-color'
+  | 'shadow-lg'
+  | 'shadow-offset'
+  | 'shadow-sm'
+  | 'slow'
+  | 'stone'
+  | 'success'
+  | 'success-wash'
+  | 'table-pad-x'
+  | 'table-pad-y'
+  | 'w-page'
+  | 'w-reading'
+  | 'warn'
+  | 'warn-soft'
+  | 'warning'
+  | 'warning-wash'
+  | 'z-drawer'
+  | 'z-dropdown'
+  | 'z-modal'
+  | 'z-overlay'
+  | 'z-palette'
+  | 'z-rule'
+  | 'z-scrim'
+  | 'z-sticky'
+  | 'z-toast'
+
+export declare const TOKENS: Record<TokenName, TokenRecord>