@halftone-ds/tokens 1.2.0 → 1.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@halftone-ds/tokens",
-  "version": "1.2.0",
+  "version": "1.3.1",
   "description": "Design tokens (W3C DTCG) to NativeWind, Tailwind 4 / shadcn, TypeScript, DESIGN.md and Figma, with a WCAG AA contrast gate. The token build behind Halftone.",
   "license": "MIT",
   "type": "module",
@@ -28,6 +28,10 @@
       "types": "./lib/theme/index.d.mts",
       "default": "./lib/theme/index.mjs"
     },
+    "./system": {
+      "types": "./lib/system/index.d.mts",
+      "default": "./lib/system/index.mjs"
+    },
     "./lib/*": "./lib/*.mjs",
     "./targets/*": "./targets/*.mjs",
     "./package.json": "./package.json"

package/targets/design-md.mjs

@@ -3,9 +3,11 @@
  * short, platform-neutral prose an agent can load on its own. The spec has no light/dark modes, so
  * `colors` carries the light value under each name and the dark one under `<name>-dark`.
  * The detailed rules stay in DESIGN_SYSTEM.md; this file points there instead of repeating them.
- *   options: { out: 'DESIGN.md', name?: string, description?: string }
+ *   options: { out: 'DESIGN.md', name?: string, description?: string, platform?: 'mobile' | 'web' }
  */
 import { describeTintLimits, textOnTintLimits } from '../lib/contrast.mjs';
+import { describeComponents } from '../lib/theme/components.mjs';
+import { describeExtras } from '../lib/theme/extras.mjs';
 import { themeFonts } from './fonts.mjs';
 import { themeStatus } from '../lib/theme/index.mjs';
 import { group } from '../lib/resolve.mjs';
@@ -79,8 +81,9 @@ const STYLE_TEXT = {
 
 export default function designMd(ctx, options) {
   const name = options.name ?? 'Halftone';
-  // Which radius buttons use: 'control' (the theme's pill setting, the mobile kit) or a scale step (web: 'md').
-  const buttons = options.buttonRadius ?? 'control';
+  // The component layer: one theme for both kits (Button, Chip, Badge, Input).
+  const { button, input } = ctx.components;
+  const corner = (r) => (r >= 9999 ? '"{rounded.full}"' : px(r));
   const description =
     options.description ?? 'Brand-agnostic prototype kit: shadcn semantics, light and dark, WCAG AA enforced at build time.';
   const colors = ctx.colors
@@ -88,7 +91,7 @@ export default function designMd(ctx, options) {
     .join('\n');
   // The theme's radius: rounded-* are multiples of its base (rounded-lg); control is buttons and chips.
   const rounded = [
-    ...ctx.radius.steps.map((s) => `  ${s.name}: ${px(Math.round(ctx.radius.base * s.scale * 10) / 10)}`),
+    ...ctx.radius.steps.map((s) => `  ${s.name}: ${px(s.px)}`),
     `  control: ${px(Math.min(ctx.shape.control, 9999))}`,
     `  full: ${px(9999)}`,
   ].join('\n');
@@ -103,6 +106,19 @@ export default function designMd(ctx, options) {
   const radius = Object.fromEntries(group(ctx.prim, ['radius']).map((t) => [t.key, t.value]));
   const duration = Object.fromEntries(group(ctx.prim, ['duration']).map((t) => [t.key, t.value]));
 
+  // A system's own tokens: listed, never in the front matter's shared vocabulary.
+  const extras = describeExtras(ctx.extras ?? { color: [], text: [], radius: [], shadow: [], border: [] }, { platform: options.platform ?? 'mobile' });
+  const extrasSection = extras.length
+    ? `
+## Extras (this brand's own)
+
+Tokens this system added beyond the kit's slots. No kit component uses them; use them in screens, as classes like
+any token (never their hex). They are not part of the shared vocabulary above.
+
+${extras.join('\n')}
+`
+    : '';
+
   const contents = `---
 version: alpha
 name: ${q(name)}
@@ -119,13 +135,13 @@ components:
   button-primary:
     backgroundColor: "{colors.primary}"
     textColor: "{colors.primary-foreground}"
-    rounded: "{rounded.${buttons}}"
-    height: 48px
+    rounded: ${corner(button.radius)}
+    height: ${px(button.h.md)}
   button-secondary:
     backgroundColor: "{colors.secondary}"
     textColor: "{colors.secondary-foreground}"
-    rounded: "{rounded.${buttons}}"
-    height: 48px
+    rounded: ${corner(button.radius)}
+    height: ${px(button.h.md)}
   card:
     backgroundColor: "{colors.card}"
     textColor: "{colors.card-foreground}"
@@ -134,8 +150,8 @@ components:
   input:
     backgroundColor: "{colors.background}"
     textColor: "{colors.foreground}"
-    rounded: "{rounded.md}"
-    height: 48px
+    rounded: ${corner(input.radius)}
+    height: ${px(input.h.md)}
 ---
 
 <!-- ${ctx.header} -->
@@ -147,7 +163,7 @@ components:
 A neutral, brand-agnostic base for clickable prototypes on phone and web. Calm surfaces, one brand
 colour reserved for the primary action and focus, generous spacing, and both light and dark themes
 from day one. ${status.applied ? `The applied theme is \`${status.code}\`${status.drift.length ? ' (edited by hand since)' : ''}. ` : ''}Re-branding means applying a
-theme (\`npx halftone-tokens theme apply <code>\`, codes come from the docs theme picker) or editing
+theme (\`npx halftone-tokens theme apply <code|file.halftone.json>\`, both from Studio on the docs site) or editing
 \`tokens/tokens.json\`; everything else follows. The full rules and the component registry are in
 \`DESIGN_SYSTEM.md\` — read it before building UI.
 
@@ -171,7 +187,7 @@ ${describeTintLimits(textOnTintLimits(ctx.colors))}.
 
 On a stronger tint, the text stays \`text-foreground\` and the tint, an icon or a dot carries the
 colour. \`halftone-tokens check\` flags class strings that break this.
-
+${extrasSection}
 ## Typography
 
 Headings (h1–h4, titles) use ${fontName(fonts.heading)}; everything else uses ${fontName(fonts.body)}; code and
@@ -195,13 +211,14 @@ a floating button). Content — inputs included — stays flat.
 
 ## Shapes
 
-Buttons are pills. Inputs ${radius.md}px, cards ${radius.lg}px, larger surfaces ${radius.xl}px, sheet tops
+Buttons ${button.radius >= 9999 ? 'are pills' : `have ${button.radius}px corners`}. Inputs ${input.radius}px, cards ${radius.lg}px, larger surfaces ${radius.xl}px, sheet tops
 ${radius['2xl']}px; chips, avatars and dots are fully round.
 
 ## Components
 
-Only components listed in the registry in \`DESIGN_SYSTEM.md\` exist. Controls are 48px tall (small
-40, large 56). ${STYLE_TEXT.button[ctx.styles.button]} ${STYLE_TEXT.field[ctx.styles.field]} Selected chips and segments are neutral (inverted foreground), never the brand colour.
+Only components listed in the registry in \`DESIGN_SYSTEM.md\` exist. ${STYLE_TEXT.button[ctx.styles.button]} ${STYLE_TEXT.field[ctx.styles.field]}
+Button, Chip, Badge and Input draw the theme's component tokens, the same in both kits: ${describeComponents(ctx.components).join('; ')}.
+Never restyle them by hand. Phones raise any tap target under 44px to 44.
 Motion: ${duration.fast}ms for micro-feedback, ${duration.base}ms for most transitions, ${duration.slow}ms for sheets, and
 nothing moves when the OS asks for reduced motion.
 

package/targets/figma.mjs

@@ -16,7 +16,7 @@ export default function figma(ctx, options) {
         .map((t) => [t.key, { value: t.value, code: code(t.key) }])
     );
   // The theme's radius: rounded-* scale with its base (rounded-lg); rounded-control is buttons and chips.
-  const radius = Object.fromEntries(ctx.radius.steps.map((s) => [s.name, { value: Math.round(ctx.radius.base * s.scale * 10) / 10, code: `rounded-${s.name}` }]));
+  const radius = Object.fromEntries(ctx.radius.steps.map((s) => [s.name, { value: s.px, code: `rounded-${s.name}` }]));
   radius.control = { value: Math.min(ctx.shape.control, 9999), code: 'rounded-control' };
   radius.full = { value: 9999, code: 'rounded-full' };
   const numbers = {

package/targets/fonts.mjs

@@ -6,10 +6,11 @@
  *            --kit-font-body and --kit-font-mono (app/tokens.css maps them to font-heading / font-sans / font-mono)
  * An empty family (heading, body) or Menlo (mono) is the platform's own font: nothing to load.
  *
- * Only fonts from the curated list (lib/theme/fonts.mjs) are supported; halftone-tokens theme apply installs
- * the @expo-google-fonts packages they need (see expoPackages).
+ * A curated font (lib/theme/fonts.mjs) loads the weights it lists; any other Google Fonts family (a system's
+ * fonts) loads 400–700 under the packages' own naming (fontByFamily). halftone-tokens theme apply installs the
+ * @expo-google-fonts packages they need (see expoPackages).
  */
-import { FONTS } from '../lib/theme/fonts.mjs';
+import { fontByFamily } from '../lib/theme/fonts.mjs';
 import { group } from '../lib/resolve.mjs';
 
 const SUFFIX = { 400: 'Regular', 500: 'Medium', 600: 'SemiBold', 700: 'Bold' };
@@ -20,8 +21,7 @@ export function themeFonts(ctx) {
   const pick = (role) => {
     const family = families[role];
     if (!family) return null;
-    const font = FONTS.find((f) => f.family === family);
-    if (!font) throw new Error(`fonts: "${family}" (font.family.${role}) is not in the curated font list; pick one of ${FONTS.filter((f) => !f.system).map((f) => f.family).join(', ')}`);
+    const font = fontByFamily(family);
     return font.system ? null : font;
   };
   return { heading: pick('heading'), body: pick('body'), mono: pick('mono') };

package/targets/llms.mjs

@@ -1,12 +1,14 @@
 /**
  * The tokens section of llms.txt: a compact Markdown fragment that registry-build stitches into the
  * app's llms.txt (and the docs site into /llms.txt).
- *   options: { out: 'tokens/generated/llms-tokens.md' }
+ *   options: { out: 'tokens/generated/llms-tokens.md', platform?: 'mobile' | 'web' }
  */
 import { group } from '../lib/resolve.mjs';
 import { AA, describeTintLimits, textOnTintLimits } from '../lib/contrast.mjs';
 import { themeStatus } from '../lib/theme/index.mjs';
 import { themeFonts } from './fonts.mjs';
+import { describeComponents } from '../lib/theme/components.mjs';
+import { describeExtras } from '../lib/theme/extras.mjs';
 
 export default function llms(ctx, options) {
   const rows = ctx.colors.map((c) => `| \`${c.name}\` | ${c.light} | ${c.dark} |`).join('\n');
@@ -16,6 +18,7 @@ export default function llms(ctx, options) {
       .join(' · ');
   const fonts = themeFonts(ctx);
   const theme = themeStatus(ctx.source);
+  const extras = describeExtras(ctx.extras ?? { color: [], text: [], radius: [], shadow: [], border: [] }, { platform: options.platform ?? 'mobile' });
   const contents = `<!-- ${ctx.header} -->
 ## Tokens
 
@@ -31,14 +34,15 @@ ${describeTintLimits(textOnTintLimits(ctx.colors))}.
 ${rows}
 
 - Spacing (4-pt grid, Tailwind numeric scale): ${steps(['space'])}
-- Radius (\`rounded-*\`): ${ctx.radius.steps.map((s) => `${s.name} ${Math.round(ctx.radius.base * s.scale * 10) / 10}px`).join(' · ')} (multiples of \`--radius\` = ${ctx.radius.base}px)${options.controlRadius === false ? '; buttons use \`rounded-md\`' : `; \`rounded-control\` (buttons, chips) ${ctx.shape.control >= 9999 ? 'pill' : `${ctx.shape.control}px`}`}
+- Radius (\`rounded-*\`): ${ctx.radius.steps.map((s) => `${s.name} ${s.px}px`).join(' · ')} (multiples of \`--radius\` = ${ctx.radius.base}px); \`rounded-control\` ${ctx.shape.control >= 9999 ? 'pill' : `${ctx.shape.control}px`}
 - Depth: \`shadow-sm\` (controls, cards), \`shadow-md\` (raised, popovers), \`shadow-lg\` (menus, dialogs) are the theme's three elevation levels; no shadow colour modifiers on surfaces (thumbs and floating elements may add \`shadow-black/20\`)
 - Border \`border\` ${ctx.shape.borderWidth}px · icon stroke ${ctx.shape.stroke} (an Icon's \`strokeWidth\` is relative to 2)
-- Styles: ${ctx.styles.button} buttons, ${ctx.styles.field} fields. Button and the text fields already draw them (\`bg-button\`, \`bg-field\`); never restyle a primary button or a field by hand
+- Styles: ${ctx.styles.button} buttons, ${ctx.styles.field} fields
+- Components (one theme for both kits; never restyle them by hand): ${describeComponents(ctx.components).join('; ')}. Phones raise any tap target under 44px to 44
 - Fonts: headings ${fonts.heading?.family ?? 'system'}, body ${fonts.body?.family ?? 'system'}, mono ${fonts.mono?.family ?? 'system'} (applied by Text; \`font-heading\` makes any Text a heading, \`font-mono\` code and figures)
 - Typeset: body ${ctx.type.size}px, leading ${ctx.type.leading}; every \`text-*\` size below scales by ${ctx.type.scale}${theme.applied ? `\n- Theme: \`${theme.code}\` (\`npx halftone-tokens theme show\`)` : ''}
 - Font sizes (\`text-*\`): ${steps(['font', 'size'])}
 - Durations: ${steps(['duration'], 'ms')}
-`;
+${extras.length ? `\n### Extras (this brand's own)\n\nNo kit component uses these; screens may, as classes (never their hex):\n\n${extras.join('\n')}\n` : ''}`;
   return [{ path: options.out, contents }];
 }

package/targets/nativewind3.mjs

@@ -4,9 +4,11 @@
  *   options: { css: 'global.css', tailwind: 'tokens/generated/tailwind.theme.js' }
  */
 import { hexToHslTriplet } from '../lib/color.mjs';
-import { cssName, group, isColor, radiusCalc } from '../lib/resolve.mjs';
-import { TEXT_LINE_HEIGHT } from '../lib/theme/recipe.mjs';
-import { styleVars } from '../lib/theme/vars.mjs';
+import { cssName, group, isColor, radiusCss } from '../lib/resolve.mjs';
+import { shadowCss, TEXT_LINE_HEIGHT } from '../lib/theme/recipe.mjs';
+import { COMPONENT_NAMES, COMPONENTS, componentColors, componentVars } from '../lib/theme/components.mjs';
+import { extraTextStyles } from '../lib/theme/extras.mjs';
+import { extraVars, styleVars, textStyleVars } from '../lib/theme/vars.mjs';
 
 const rem = (px) => (px >= 9999 ? '9999px' : `${Number((px / 16).toFixed(4))}rem`);
 
@@ -17,7 +19,8 @@ function cssBlock(selector, tokens, shape, mode, colors) {
   const lines = tokens
     // Shadows are literal in tailwind.theme.js: a var() box-shadow drops the view on native. The styles'
     // numbers come from shape (with their units), below.
-    .filter((t) => t.$type !== 'shadow' && !SHAPE.has(cssName(t)) && !/^(density|type)-/.test(cssName(t)))
+    // A system's radius steps are in borderRadius below, with their units.
+    .filter((t) => t.$type !== 'shadow' && !SHAPE.has(cssName(t)) && !/^(density|type|radius)-/.test(cssName(t)))
     .filter((t) => isColor(t) || !/^(button|field)-/.test(cssName(t)))
     .map((t) => {
       const name = cssName(t);
@@ -29,10 +32,19 @@ function cssBlock(selector, tokens, shape, mode, colors) {
     lines.push(`    --radius-control: ${rem(shape.control)};`, `    --border-width: ${shape.borderWidth}px;`, `    --icon-stroke: ${shape.stroke};`);
     for (const size of ['sm', 'md', 'lg', 'x']) lines.push(`    --control-${size}: ${shape.density[size]}px;`);
   }
+  // The text styles (Text h1…blockquote): literal at the typeset, so an edited style is one variable.
+  if (shape.textStyles) for (const [name, value] of Object.entries(textStyleVars(shape.textStyles, 'hsl'))) lines.push(`    ${name}: ${value};`);
   // Style colours a token file from before the styles doesn't have (resolve.mjs adds them), then the styles' numbers.
   const present = new Set(tokens.filter(isColor).map(cssName));
   for (const c of colors) if (!present.has(c.name)) lines.push(`    --${c.name}: ${hexToHslTriplet(c[mode])};`);
   for (const [name, value] of Object.entries(styleVars(shape.styleShape, 'hsl')[mode])) lines.push(`    ${name}: ${value};`);
+  // The component layer (Button, Chip, Badge, Input): corners, sizes, text and each variant's colours.
+  if (shape.components) for (const [name, value] of Object.entries(componentVars(shape.components, 'hsl', hexToHslTriplet)[mode])) lines.push(`    ${name}: ${value};`);
+  // A system's extras: colours, text styles and border widths (corners and shadows are literal in tailwind.theme.js).
+  if (shape.extras) {
+    const extra = Object.entries(extraVars(shape.extras, 'hsl')[mode]).filter(([name]) => !/^--(radius|shadow)-/.test(name));
+    if (extra.length) lines.push('    /* Extras: this system\'s own tokens. No kit component uses them; screens may. */', ...extra.map(([name, value]) => `    ${name}: ${value};`));
+  }
   return `  ${selector} {\n${lines.join('\n')}\n  }`;
 }
 
@@ -43,16 +55,16 @@ export default function nativewind3(ctx, options) {
 @tailwind utilities;
 
 @layer base {
-${cssBlock(':root', ctx.semLight, { ...ctx.shape, styleShape: ctx.shape }, 'light', ctx.colors)}
+${cssBlock(':root', ctx.semLight, { ...ctx.shape, styleShape: ctx.shape, textStyles: ctx.textStyles, extras: ctx.extras, components: ctx.components }, 'light', ctx.colors)}
 
-${cssBlock('.dark:root', ctx.semDark, { styleShape: ctx.shape }, 'dark', ctx.colors)}
+${cssBlock('.dark:root', ctx.semDark, { styleShape: ctx.shape, extras: ctx.extras, components: ctx.components }, 'dark', ctx.colors)}
 }
 `;
   const colors = Object.fromEntries(ctx.colors.map((c) => [c.name, `hsl(var(--${c.name}))`]));
   // The styles' fills carry their own opacity (an outline button, a transparent field). No /90 modifiers on these.
   colors.button = 'hsl(var(--button) / var(--button-alpha))';
   colors.field = 'hsl(var(--field) / var(--field-alpha))';
-  const borderRadius = Object.fromEntries(ctx.radius.steps.map((s) => [s.name, radiusCalc(s.scale)]));
+  const borderRadius = Object.fromEntries(ctx.radius.steps.map((s) => [s.name, radiusCss(s)]));
   borderRadius.control = 'var(--radius-control)';
   // Field style: rounded-field (top) and rounded-b-field-b (bottom).
   borderRadius.field = 'var(--field-radius)';
@@ -77,7 +89,45 @@ ${cssBlock('.dark:root', ctx.semDark, { styleShape: ctx.shape }, 'dark', ctx.col
   const lineHeight = { prose: rem(size * leading) };
   const spacing = { 'control-x': 'var(--control-x)', 'field-x': 'var(--field-x)', flow: rem(size * flow) };
   const maxWidth = { measure: rem(measure * size * 0.5) };
-  const tailwind = `// ${ctx.header}\nmodule.exports = ${JSON.stringify({ colors, borderRadius, borderWidth, boxShadow, height, minHeight: height, width: height, spacing, fontSize, lineHeight, maxWidth }, null, 2)};\n`;
+  // The text styles, one key per property: text-type-h1, leading-type-h1, tracking-type-h1, font-type-h1 (Text's
+  // variants). Variables (global.css), so a system's edited style changes one value.
+  for (const name of Object.keys(ctx.textStyles)) {
+    fontSize[`type-${name}`] = `var(--type-${name}-size)`;
+    lineHeight[`type-${name}`] = `var(--type-${name}-leading)`;
+  }
+  const letterSpacing = Object.fromEntries(Object.keys(ctx.textStyles).map((name) => [`type-${name}`, `var(--type-${name}-tracking)`]));
+  const fontWeight = Object.fromEntries(Object.keys(ctx.textStyles).map((name) => [`type-${name}`, `var(--type-${name}-weight)`]));
+  // The component layer: bg-button-primary-bg, rounded-button, h-button-md, px-button-x, text-type-button,
+  // border-button-primary-w… Each colour carries its opacity (--button-primary-bg-a).
+  Object.assign(colors, componentColors(ctx.components, (key, alpha) => (alpha ? `hsl(var(--${key}) / var(--${key}-a))` : `hsl(var(--${key}))`)));
+  for (const name of COMPONENT_NAMES) {
+    const c = ctx.components[name];
+    const p = COMPONENTS[name].prefix;
+    if (name !== 'input') borderRadius[p] = `var(--${p}-radius)`;
+    for (const size of Object.keys(c.h)) height[`${p}-${size}`] = `var(--${p}-h-${size})`;
+    if (name !== 'input') spacing[`${p}-x`] = `var(--${p}-x)`;
+    fontSize[`type-${p}`] = `var(--${p}-text-size)`;
+    lineHeight[`type-${p}`] = `var(--${p}-text-leading)`;
+    letterSpacing[`type-${p}`] = `var(--${p}-text-tracking)`;
+  }
+  Object.assign(spacing, { 'button-x-sm': 'var(--button-x-sm)', 'button-x-lg': 'var(--button-x-lg)' });
+  for (const variant of Object.keys(ctx.components.button.variants)) {
+    borderWidth[`button-${variant}-w`] = `var(--button-${variant}-border-w)`;
+    borderWidth[`button-${variant}-edge-w`] = `var(--button-${variant}-edge-w)`;
+  }
+  // A system's extras: bg-<name>, rounded-<name>, shadow-<name>, border-<name> (its width), text-type-<name>…
+  const extras = ctx.extras ?? { color: [], text: [], radius: [], shadow: [], border: [] };
+  for (const c of extras.color) colors[c.name] = `hsl(var(--${c.name}))`;
+  for (const r of extras.radius) borderRadius[r.name] = rem(r.px);
+  for (const sh of extras.shadow) boxShadow[sh.name] = shadowCss(sh.light);
+  for (const b of extras.border) borderWidth[b.name] = `var(--border-${b.name}-width)`;
+  for (const name of Object.keys(extraTextStyles(extras))) {
+    fontSize[`type-${name}`] = `var(--type-${name}-size)`;
+    lineHeight[`type-${name}`] = `var(--type-${name}-leading)`;
+    letterSpacing[`type-${name}`] = `var(--type-${name}-tracking)`;
+    fontWeight[`type-${name}`] = `var(--type-${name}-weight)`;
+  }
+  const tailwind = `// ${ctx.header}\nmodule.exports = ${JSON.stringify({ colors, borderRadius, borderWidth, boxShadow, height, minHeight: height, width: height, spacing, fontSize, lineHeight, letterSpacing, fontWeight, maxWidth }, null, 2)};\n`;
   return [
     { path: options.css, contents: css },
     { path: options.tailwind, contents: tailwind },

package/targets/registry-theme.mjs

@@ -4,7 +4,7 @@
  *   options: { out: 'tokens/generated/theme.registry.json' }
  */
 import { hexToHslTriplet, hexToOklch } from '../lib/color.mjs';
-import { radiusCalc } from '../lib/resolve.mjs';
+import { radiusCss } from '../lib/resolve.mjs';
 
 export default function registryTheme(ctx, options) {
   const radius = `${ctx.radius.base / 16}rem`;
@@ -20,7 +20,7 @@ export default function registryTheme(ctx, options) {
           theme: {
             extend: {
               colors: Object.fromEntries(ctx.colors.map((c) => [c.name, `hsl(var(--${c.name}))`])),
-              borderRadius: Object.fromEntries(ctx.radius.steps.map((s) => [s.name, radiusCalc(s.scale)])),
+              borderRadius: Object.fromEntries(ctx.radius.steps.map((s) => [s.name, radiusCss(s)])),
             },
           },
         },
@@ -28,7 +28,7 @@ export default function registryTheme(ctx, options) {
     },
     web: {
       cssVars: {
-        theme: Object.fromEntries(ctx.radius.steps.map((s) => [`radius-${s.name}`, radiusCalc(s.scale)])),
+        theme: Object.fromEntries(ctx.radius.steps.map((s) => [`radius-${s.name}`, radiusCss(s)])),
         light: { radius, ...vars(hexToOklch, 'light') },
         dark: vars(hexToOklch, 'dark'),
       },

package/targets/shadcn-web.mjs

@@ -8,9 +8,11 @@
  *            typeset: false   leave the text sizes alone (the docs site keeps its reading sizes)
  */
 import { hexToOklch } from '../lib/color.mjs';
-import { group, radiusCalc } from '../lib/resolve.mjs';
+import { group, radiusCss } from '../lib/resolve.mjs';
 import { TEXT_LINE_HEIGHT } from '../lib/theme/recipe.mjs';
-import { styleVars, typeVars } from '../lib/theme/vars.mjs';
+import { COMPONENT_NAMES, COMPONENTS, componentColors, componentVars } from '../lib/theme/components.mjs';
+import { hasExtras } from '../lib/theme/extras.mjs';
+import { extraVars, styleVars, textStyleVars, typeVars } from '../lib/theme/vars.mjs';
 
 const rem = (px) => (px >= 9999 ? '9999px' : `${px / 16}rem`);
 const SYSTEM_SANS = "ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif";
@@ -27,7 +29,91 @@ function textScale(ctx) {
     .join('\n');
 }
 
+/** A font role's family, as @theme's --font-* resolve it (app/fonts.ts or a live theme sets --kit-font-*). */
+const FONT_ROLE = {
+  heading: `var(--kit-font-heading, var(--kit-font-body, ${SYSTEM_SANS}))`,
+  body: `var(--kit-font-body, ${SYSTEM_SANS})`,
+  mono: `var(--kit-font-mono, ${SYSTEM_MONO})`,
+};
+
+/**
+ * The text styles as utilities: type-h1 … type-blockquote set the style's font, size, line height, tracking and
+ * weight from its variables. leading-*, tracking-* and font-* on the same element still win, as on text-*.
+ */
+function textStyleUtilities(names) {
+  return names
+    .map(
+      (name) => `@utility type-${name} {
+  font-family: var(--type-${name}-font);
+  font-size: var(--type-${name}-size);
+  line-height: var(--tw-leading, var(--type-${name}-leading));
+  letter-spacing: var(--tw-tracking, var(--type-${name}-tracking));
+  font-weight: var(--tw-font-weight, var(--type-${name}-weight));
+}`
+    )
+    .join('\n');
+}
+
+/**
+ * A system's extras (lib/theme/extras.mjs): their variables in :root and .dark, colours and corners in @theme (so
+ * bg-<name>, text-<name>, rounded-<name> exist), and shadow-, border- and type- utilities. No kit component uses them.
+ */
+function extrasCss(ctx) {
+  const list = ctx.extras;
+  if (!list || !hasExtras(list)) return { light: '', dark: '', theme: '', utilities: '' };
+  const vars = extraVars(list, 'oklch', (role) => FONT_ROLE[role]);
+  const lines = (map) => Object.entries(map).map(([k, v]) => `  ${k}: ${v};`).join('\n');
+  // Corners are literal in @theme (rounded-<name>), not variables of their own.
+  const light = Object.fromEntries(Object.entries(vars.light).filter(([k]) => !k.startsWith('--radius-')));
+  const theme = [
+    ...list.color.map((c) => `  --color-${c.name}: var(--${c.name});`),
+    ...list.radius.map((r) => `  --radius-${r.name}: ${rem(r.px)};`),
+  ];
+  const utilities = [
+    ...list.shadow.map((s) => `@utility shadow-${s.name} {\n  box-shadow: var(--shadow-${s.name});\n}`),
+    ...list.border.map((b) => `@utility border-${b.name} {\n  border-width: var(--border-${b.name}-width);\n  border-style: ${b.style ?? 'solid'};\n}`),
+    textStyleUtilities(list.text.map((t) => t.name)),
+  ].filter(Boolean);
+  return {
+    light: `\n  /* Extras: this system's own tokens. No kit component uses them; screens may. */\n${lines(light)}`,
+    dark: Object.keys(vars.dark).length ? `\n  /* Extras */\n${lines(vars.dark)}` : '',
+    theme: theme.length ? `\n  /* Extras */\n${theme.join('\n')}` : '',
+    utilities: utilities.length ? `\n/* Extras */\n${utilities.join('\n')}\n` : '',
+  };
+}
+
+/**
+ * The component layer (Button, Chip, Badge, Input): the variables per mode, each variant's colours as Tailwind colours
+ * (bg-button-primary-bg; a colour with an opacity mixes it in), rounded-button / -chip / -badge, and type-button,
+ * type-chip, type-badge and type-field for the text. Heights and padding are read as h-(--button-h-md), px-(--button-x).
+ */
+function componentsCss(ctx) {
+  const vars = componentVars(ctx.components, 'oklch', hexToOklch, (role) => FONT_ROLE[role]);
+  const lines = (map) => Object.entries(map).map(([k, v]) => `  ${k}: ${v};`).join('\n');
+  const colors = componentColors(ctx.components, (key, alpha) => (alpha ? `color-mix(in oklab, var(--${key}) calc(var(--${key}-a) * 100%), transparent)` : `var(--${key})`));
+  const theme = [
+    ...COMPONENT_NAMES.filter((n) => n !== 'input').map((n) => `  --radius-${n}: var(--${n}-radius);`),
+    ...Object.entries(colors).map(([key, css]) => `  --color-${key}: ${css};`),
+  ];
+  const utilities = COMPONENT_NAMES.map((n) => COMPONENTS[n].prefix).map(
+    (p) => `@utility type-${p} {
+  font-family: var(--${p}-text-font);
+  font-size: var(--${p}-text-size);
+  line-height: var(--tw-leading, var(--${p}-text-leading));
+  letter-spacing: var(--tw-tracking, var(--${p}-text-tracking));
+}`
+  );
+  return {
+    light: `\n  /* Components: Button, Chip, Badge, Input (corners, sizes, text, each variant's colours). */\n${lines(vars.light)}`,
+    dark: `\n  /* Components */\n${lines(vars.dark)}`,
+    theme: `\n  /* Components: rounded-button, bg-button-primary-bg, border-field-focus-border… */\n${theme.join('\n')}`,
+    utilities: `${utilities.join('\n')}\n`,
+  };
+}
+
 export default function shadcnWeb(ctx, options) {
+  const extras = extrasCss(ctx);
+  const components = componentsCss(ctx);
   const vars = (mode) => ctx.colors.map((c) => `  --${c.name}: ${hexToOklch(c[mode])};`).join('\n');
   const styles = (mode) => Object.entries(styleVars(ctx.shape, 'oklch')[mode]).map(([k, v]) => `  ${k}: ${v};`).join('\n');
   // The styles' fills carry their own opacity (an outline button, a transparent field).
@@ -46,17 +132,19 @@ export default function shadcnWeb(ctx, options) {
   }
 ${styles('light')}
 ${shadows('light')}
-${vars('light')}
+  /* The text styles (type-h1…type-blockquote), literal at the typeset: an edited style is one variable. */
+${Object.entries(textStyleVars(ctx.textStyles, 'oklch', (role) => FONT_ROLE[role])).map(([k, v]) => `  ${k}: ${v};`).join('\n')}
+${vars('light')}${components.light}${extras.light}
 }
 
 .dark {
 ${styles('dark')}
 ${shadows('dark')}
-${vars('dark')}
+${vars('dark')}${components.dark}${extras.dark}
 }
 
 @theme inline {
-${ctx.radius.steps.map((s) => `  --radius-${s.name}: ${radiusCalc(s.scale)};`).join('\n')}
+${ctx.radius.steps.map((s) => `  --radius-${s.name}: ${radiusCss(s)};`).join('\n')}
   --radius-control: var(--radius-control);
   /* The field style: rounded-field, rounded-b-field-b, px-field-x. Widths are border-(length:--field-border-w) etc. */
   --radius-field: var(--field-radius);
@@ -75,9 +163,11 @@ ${ctx.radius.steps.map((s) => `  --radius-${s.name}: ${radiusCalc(s.scale)};`).j
   --font-mono: var(--kit-font-mono, ${SYSTEM_MONO});${
     options.typeset === false ? '' : `\n  /* The theme's typeset scales every text size and its line height (text-sm, text-base…). */\n${textScale(ctx)}`
   }
-${ctx.colors.map((c) => `  --color-${c.name}: ${color(c.name)};`).join('\n')}
+${ctx.colors.map((c) => `  --color-${c.name}: ${color(c.name)};`).join('\n')}${components.theme}${extras.theme}
 }
 
+${textStyleUtilities(Object.keys(ctx.textStyles))}
+${components.utilities}${extras.utilities}
 @layer base {
   * {
     @apply border-border outline-ring/50;

package/targets/ts-theme.mjs

@@ -4,6 +4,7 @@
  *   options: { out: 'lib/theme.ts', navTheme?: 'expo-router/react-navigation' | false }
  */
 import { camel, group } from '../lib/resolve.mjs';
+import { COMPONENT_NAMES, componentVarNames, TOUCH_TARGET } from '../lib/theme/components.mjs';
 import { presetById, sameRecipe, themeStatus } from '../lib/theme/index.mjs';
 
 /** The applied theme, for a read-only summary in the app (Foundations). */
@@ -11,10 +12,30 @@ function themeInfo(source) {
   const status = themeStatus(source);
   if (!status.applied) return 'null';
   const preset = presetById(status.recipe.preset ?? '');
-  const name = preset && sameRecipe(preset.recipe, status.recipe) ? preset.name : 'Custom';
+  // A system is named after itself; its code is null when it has overrides a code can't carry.
+  const name = status.system?.name ?? (preset && sameRecipe(preset.recipe, status.recipe) ? preset.name : 'Custom');
   return JSON.stringify({ code: status.code, name, edited: status.drift.length > 0, recipe: status.recipe }, null, 2);
 }
 
+const round = (n) => Number(n.toFixed(4));
+
+/** The component layer's numbers: sizes (px, for the phone touch-target floor) and each text's font role and tracking. */
+function componentsObject(components) {
+  return COMPONENT_NAMES.map((name) => {
+    const c = components[name];
+    const text = { font: c.text.font, size: round(c.text.size), lineHeight: round(c.text.leading), tracking: c.text.tracking };
+    // The font role is typed as a role, so code can branch on it (the object is `as const`).
+    const json = JSON.stringify({ height: c.h, x: c.x, radius: c.radius, text }).replace(/"font":("\w+")/, `"font":$1 as 'heading' | 'body' | 'mono'`);
+    return `    ${name}: ${json},`;
+  }).join('\n');
+}
+
+function textStylesObject(styles) {
+  return Object.entries(styles)
+    .map(([name, s]) => `    ${name}: ${JSON.stringify({ font: s.font, weight: s.weight, size: round(s.size), lineHeight: round(s.lineHeight), tracking: s.tracking })},`)
+    .join('\n');
+}
+
 function colorObject(colors, mode) {
   return colors.map((c) => `    ${camel(c.name)}: '${c[mode]}',`).join('\n');
 }
@@ -77,6 +98,12 @@ ${primitiveGroup(ctx.prim, ['radius'])}
   styles: ${JSON.stringify(ctx.styles)},
   button: ${JSON.stringify(ctx.shape.button)},
   field: ${JSON.stringify(ctx.shape.field)},
+  /** The component layer (Button, Chip, Badge, Input) as numbers: heights and padding (px), corner, and the text's
+   *  font role and tracking. The classes (h-button-md, rounded-button, text-type-button…) already follow them; this is
+   *  for the touch-target floor (phones raise a height under ${TOUCH_TARGET} with hitSlop) and the font. */
+  components: {
+${componentsObject(ctx.components)}
+  },
   /** Control heights and padding (px) for the theme's density: h-control-sm, h-control, h-control-lg, px-control-x. */
   density: ${JSON.stringify({ sm: ctx.shape.density.sm, md: ctx.shape.density.md, lg: ctx.shape.density.lg, x: ctx.shape.density.x })},
   /** The type scale at 16px; the theme's typeset multiplies it (text-* classes are already scaled). */
@@ -86,6 +113,12 @@ ${primitiveGroup(ctx.prim, ['font', 'size'])}
   /** The typeset: body size (px) and its scale, running-text leading and its factor on the text sizes' line
    *  heights, and Prose's flow (em between blocks) and measure (characters per line). */
   typeset: ${JSON.stringify(ctx.type)},
+  /** The Text variants at the typeset, a system's edited styles included: font role, weight, size and line height
+   *  (px), tracking (em). The classes (text-type-h1, leading-type-h1…) already follow them; this is for code
+   *  that picks something per style, such as a font file per weight. */
+  textStyles: {
+${textStylesObject(ctx.textStyles)}
+  },
   fontFamily: {
 ${primitiveGroup(ctx.prim, ['font', 'family'])}
   },
@@ -97,12 +130,17 @@ ${primitiveGroup(ctx.prim, ['easing'])}
   },
 } as const;
 
+/** The component layer's CSS variables (what an embedded kit accepts from the docs site's live theme). */
+export const COMPONENT_VARS = ${JSON.stringify(componentVarNames())} as const;
+
 /** The theme tokens.json was generated from (\`halftone-tokens theme apply\`), or null. \`edited\`: theme tokens
  *  were changed by hand since. */
 export const THEME_INFO: ThemeInfo | null = ${themeInfo(ctx.source)};
 
 export type ThemeInfo = {
-  code: string;
+  /** null for a system (\`.halftone.json\`) with overrides no theme code carries. */
+  code: string | null;
+  /** The preset's name, the system's name, or 'Custom'. */
   name: string;
   edited: boolean;
   recipe: {