@halftone-ds/tokens 1.1.0 → 1.3.0

package/lib/theme/presets.mjs

@@ -1,6 +1,6 @@
 /**
  * Starting points by personality. Each is a full recipe, typeset included; the picker starts from one and tweaks.
- * Drafts — review them in the docs studio (/themes) and adjust here. Order is the gallery order.
+ * Drafts — review them in Studio on the docs site (/studio) and adjust here. Order is the gallery order.
  */
 export const PRESETS = [
   {
@@ -12,20 +12,20 @@ export const PRESETS = [
   {
     id: 'editorial',
     name: 'Editorial',
-    description: 'Serif headlines, rust ink, hairlines and almost no rounding.',
-    recipe: { brand: '#9a3412', neutral: 'stone', radius: 'sm', controls: 'match', font: { heading: 'fraunces', body: 'inter', mono: 'ibm-plex-mono' }, stroke: 'thin', depth: 'flat', density: 'comfortable', border: 'hairline', size: '18', leading: 'relaxed', flow: 'normal', measure: '70' },
+    description: 'Serif headlines, rust ink, hairlines, underlined fields and almost no rounding.',
+    recipe: { brand: '#9a3412', neutral: 'stone', radius: 'sm', controls: 'match', font: { heading: 'fraunces', body: 'inter', mono: 'ibm-plex-mono' }, stroke: 'thin', depth: 'flat', density: 'comfortable', border: 'hairline', size: '18', leading: 'relaxed', flow: 'normal', measure: '70', button: 'solid', field: 'underline' },
   },
   {
     id: 'soft',
     name: 'Soft',
-    description: 'Lavender, generous radius, brand-tinted greys and room to breathe.',
-    recipe: { brand: '#8b5cf6', neutral: 'brand', radius: '2xl', controls: 'pill', font: { heading: 'plus-jakarta-sans', body: 'plus-jakarta-sans', mono: 'geist-mono' }, stroke: 'regular', depth: 'soft', density: 'spacious', border: 'hairline', size: '16', leading: 'relaxed', flow: 'loose', measure: '60' },
+    description: 'Lavender, generous radius, tinted buttons, filled fields and room to breathe.',
+    recipe: { brand: '#8b5cf6', neutral: 'brand', radius: '2xl', controls: 'pill', font: { heading: 'plus-jakarta-sans', body: 'plus-jakarta-sans', mono: 'geist-mono' }, stroke: 'regular', depth: 'soft', density: 'spacious', border: 'hairline', size: '16', leading: 'relaxed', flow: 'loose', measure: '60', button: 'soft', field: 'filled' },
   },
   {
     id: 'playful',
     name: 'Playful',
-    description: 'Pink, chunky icons, round display type and lifted cards.',
-    recipe: { brand: '#db2777', neutral: 'neutral', radius: 'xl', controls: 'pill', font: { heading: 'bricolage-grotesque', body: 'nunito', mono: 'fira-code' }, stroke: 'bold', depth: 'raised', density: 'comfortable', border: 'regular', size: '16', leading: 'relaxed', flow: 'normal', measure: '60' },
+    description: 'Pink, chunky icons, round display type, lifted cards and raised buttons.',
+    recipe: { brand: '#db2777', neutral: 'neutral', radius: 'xl', controls: 'pill', font: { heading: 'bricolage-grotesque', body: 'nunito', mono: 'fira-code' }, stroke: 'bold', depth: 'raised', density: 'comfortable', border: 'regular', size: '16', leading: 'relaxed', flow: 'normal', measure: '60', button: 'raised', field: 'outline' },
   },
   {
     id: 'brutalist',
@@ -51,6 +51,18 @@ export const PRESETS = [
     description: 'Teal on warm greys, a book serif for headings, thin lines, no shadows.',
     recipe: { brand: '#0d9488', neutral: 'stone', radius: 'xl', controls: 'match', font: { heading: 'lora', body: 'manrope', mono: 'source-code-pro' }, stroke: 'thin', depth: 'flat', density: 'spacious', border: 'hairline', size: '16', leading: 'relaxed', flow: 'loose', measure: '70' },
   },
+  {
+    id: 'tactile',
+    name: 'Tactile',
+    description: 'Warm orange, raised buttons you want to press, filled fields, rounded and friendly.',
+    recipe: { brand: '#ea580c', neutral: 'stone', radius: 'xl', controls: 'match', font: { heading: 'nunito', body: 'nunito', mono: 'fira-code' }, stroke: 'bold', depth: 'raised', density: 'comfortable', border: 'regular', size: '16', leading: 'normal', flow: 'normal', measure: '70', button: 'raised', field: 'filled' },
+  },
+  {
+    id: 'studio',
+    name: 'Studio',
+    description: 'Indigo on slate, tinted buttons, underlined fields, hairlines: quiet and precise.',
+    recipe: { brand: '#4f46e5', neutral: 'slate', radius: 'md', controls: 'match', font: { heading: 'geist', body: 'geist', mono: 'geist-mono' }, stroke: 'regular', depth: 'flat', density: 'comfortable', border: 'hairline', size: '15', leading: 'normal', flow: 'normal', measure: '70', button: 'soft', field: 'underline' },
+  },
 ];
 
 export const presetById = (id) => PRESETS.find((p) => p.id === id);

package/lib/theme/ramp.mjs

@@ -32,38 +32,64 @@ export function curatedRamp(seed) {
   return Object.entries(BRAND_RAMPS).find(([, ramp]) => ramp[600] === hex)?.[0] ?? null;
 }
 
+/** The step nearest a lightness, in a lightness table. */
+const nearestStep = (L, table) => STEPS.reduce((best, s) => (Math.abs(table[s] - L) < Math.abs(table[best] - L) ? s : best), '600');
+
 /** The step a seed sits on: its curated 600, or the generated step nearest its lightness. */
 export function anchorStep(seed) {
   if (curatedRamp(seed)) return '600';
-  const [L] = hexToOklchParts(seed);
-  return STEPS.reduce((best, s) => (Math.abs(LIGHTNESS[s] - L) < Math.abs(LIGHTNESS[best] - L) ? s : best), '600');
+  return nearestStep(hexToOklchParts(seed)[0], LIGHTNESS);
 }
 
-/** { 50: '#…', …, 950: '#…' } for a brand seed. */
-export function brandRamp(seed) {
-  const curated = curatedRamp(seed);
-  if (curated) return { ...BRAND_RAMPS[curated] };
-
+/**
+ * The 11 steps around a seed, in OKLCH, with the seed exactly on `anchor`.
+ *   lightness, chroma   the profile per step (chroma is relative: scaled so the anchor keeps the seed's chroma)
+ *   auto                the anchor nearest the seed's lightness: the seed's offset fades out over three steps
+ *   forced              any other anchor: each side is stretched between the seed and its end of the profile,
+ *                       which keeps the ramp in order however far the seed is from its step
+ */
+function seededRamp(seed, anchor, lightness, chroma) {
   const [Ls, Cs, Hs] = hexToOklchParts(seed);
-  const anchor = anchorStep(seed);
   const ai = STEPS.indexOf(anchor);
-  const dL = Ls - LIGHTNESS[anchor];
-  const chromaScale = Cs / CHROMA[anchor];
+  const auto = nearestStep(Ls, lightness) === anchor;
+  const dL = Ls - lightness[anchor];
+  const chromaScale = chroma[anchor] ? Cs / chroma[anchor] : 0;
+  // Forced: the ends of the ramp, kept a little beyond the seed so a step never repeats it.
+  const top = Math.min(1, Math.max(lightness[STEPS[0]], Ls + 0.01 * ai));
+  const bottom = Math.max(0, Math.min(lightness[STEPS.at(-1)], Ls - 0.01 * (STEPS.length - 1 - ai)));
   const ramp = {};
   STEPS.forEach((s, i) => {
     if (s === anchor) {
       ramp[s] = seed.toLowerCase();
       return;
     }
-    // The seed's offset from the target lightness fades out over three steps either side, which keeps
-    // neighbours in order (|dL| is at most half the gap to the next step).
-    const fade = Math.max(0, 1 - Math.abs(i - ai) / 3);
-    const L = LIGHTNESS[s] + dL * fade;
-    ramp[s] = toGamutHex([L, CHROMA[s] * chromaScale, Hs]);
+    let L;
+    if (auto) {
+      // The seed's offset from the target lightness fades out over three steps either side, which keeps
+      // neighbours in order (|dL| is at most half the gap to the next step).
+      const fade = Math.max(0, 1 - Math.abs(i - ai) / 3);
+      L = lightness[s] + dL * fade;
+    } else {
+      const end = i < ai ? STEPS[0] : STEPS.at(-1);
+      const t = (lightness[s] - lightness[anchor]) / (lightness[end] - lightness[anchor]);
+      L = Ls + t * ((i < ai ? top : bottom) - Ls);
+    }
+    ramp[s] = toGamutHex([L, chroma[s] * chromaScale, Hs]);
   });
   return ramp;
 }
 
+/**
+ * { 50: '#…', …, 950: '#…' } for a seed. `anchor` pins the seed to another step than its nearest one (the
+ * studio's "pinned step"); a curated seed with any other anchor is generated like any seed.
+ */
+export function brandRamp(seed, { anchor } = {}) {
+  const curated = curatedRamp(seed);
+  if (curated && (!anchor || anchor === '600')) return { ...BRAND_RAMPS[curated] };
+  const [L] = hexToOklchParts(seed);
+  return seededRamp(seed, anchor ?? nearestStep(L, LIGHTNESS), LIGHTNESS, CHROMA);
+}
+
 const TINT_CHROMA = { 50: 0.003, 100: 0.005, 200: 0.008, 300: 0.012, 400: 0.02, 500: 0.024, 600: 0.022, 700: 0.02, 800: 0.016, 900: 0.014, 950: 0.012 };
 
 /** The 13-step neutral: 0 (white), the 11 steps, 1000 (black). */
@@ -80,3 +106,17 @@ export function neutralRamp(kind, seed) {
   ramp[1000] = '#000000';
   return ramp;
 }
+
+/** Zinc's lightness per step: a neutral seed's ramp keeps the grey ramps' range (950 is near black). */
+const NEUTRAL_LIGHTNESS = Object.fromEntries(STEPS.map((s) => [s, hexToOklchParts(NEUTRAL_RAMPS.zinc[s])[0]]));
+
+/** The step a neutral seed sits on: the zinc step nearest its lightness. */
+export const neutralAnchorStep = (seed) => nearestStep(hexToOklchParts(seed)[0], NEUTRAL_LIGHTNESS);
+
+/**
+ * The 13-step neutral for a custom seed (any grey, or any colour as a tint): zinc's lightness, the tint's
+ * chroma profile scaled to the seed, the seed exactly on its step.
+ */
+export function neutralSeedRamp(seed, { anchor } = {}) {
+  return { 0: '#ffffff', ...seededRamp(seed, anchor ?? neutralAnchorStep(seed), NEUTRAL_LIGHTNESS, TINT_CHROMA), 1000: '#000000' };
+}

package/lib/theme/recipe.mjs

@@ -6,6 +6,8 @@
  *
  * The typeset (font.mono, size, leading, flow, measure) came later. A recipe without it gets the defaults,
  * which are what the kits always had, and a theme with the default typeset still encodes as a ht1 code.
+ * So did the styles (button, field): their defaults are the kits' original look, and a theme that keeps them
+ * encodes as ht1 or ht2 as before.
  */
 import { FONTS } from './fonts.mjs';
 
@@ -34,16 +36,46 @@ export const OPTIONS = {
   flow: ['normal', 'tight', 'loose'],
   /** Typeset: the longest line of long-form text (Prose), in characters. */
   measure: ['70', '60', '80', '90'],
+  /** Style: the primary button. Solid fill, a brand tint, a brand outline, or solid with a darker bottom edge. */
+  button: ['solid', 'soft', 'outline', 'raised'],
+  /** Style: text fields (inputs, text areas, select triggers). A box, a tinted field with a line, or a line. */
+  field: ['outline', 'filled', 'underline'],
 };
 
 /** The recipe keys that make up the typeset, besides font.mono. */
 export const TYPESET_KEYS = ['size', 'leading', 'flow', 'measure'];
+/** The recipe keys that are component styles (ht3 codes). */
+export const STYLE_KEYS = ['button', 'field'];
 
 /** Base radius per option: a primitive radius step (a reference) or 0. */
 export const RADIUS = { none: 0, sm: 'sm', md: 'md', lg: 'lg', xl: 'xl', '2xl': '2xl' };
 export const STROKE = { thin: 1.5, regular: 2, bold: 2.5 };
 /** px; hairline renders as one device pixel on a 2x screen. */
 export const BORDER = { hairline: 0.5, regular: 1, heavy: 2 };
+/**
+ * Button styles as numbers (px), on top of the colours in semantic.mjs (styleColors). `alpha` is the fill's
+ * opacity: an outline button has no fill. `border` is every side, `edge` the bottom (raised: a thicker,
+ * darker bottom edge).
+ */
+export const BUTTON = {
+  solid: { alpha: 1, border: 0, edge: 0 },
+  soft: { alpha: 1, border: 0, edge: 0 },
+  outline: { alpha: 0, border: 2, edge: 2 },
+  raised: { alpha: 1, border: 0, edge: 3 },
+};
+/**
+ * Field styles. `alpha` per mode (outline: transparent, with a faint tint in dark, as the kits always had).
+ * `border` / `edge`: 'border' = the theme's border width, 'line' = at least 1px (it's the field's only edge).
+ * `round` / `roundBottom`: 1 = the md radius, 0 = square. `inset`: 1 = the usual inner padding, 0 = flush.
+ */
+export const FIELD = {
+  outline: { alpha: { light: 0, dark: 0.3 }, border: 'border', edge: 'border', round: 1, roundBottom: 1, inset: 1 },
+  filled: { alpha: { light: 1, dark: 1 }, border: 0, edge: 'line', round: 1, roundBottom: 0, inset: 1 },
+  underline: { alpha: { light: 0, dark: 0 }, border: 0, edge: 'line', round: 0, roundBottom: 0, inset: 0 },
+};
+/** A field width in px for a border width. */
+export const fieldWidth = (value, borderWidth) => (value === 'border' ? borderWidth : value === 'line' ? Math.max(1, borderWidth) : value);
+
 /** Line height of running text (× size). 1.75 = leading-7 at 16px, what the kits' paragraphs always had. */
 export const LEADING = { tight: 1.6, normal: 1.75, relaxed: 1.9 };
 /** Space between blocks of long-form text, in em. */
@@ -72,6 +104,74 @@ export const typeScale = ({ size, leading, flow, measure }) => ({
 });
 
 
+/** The Text variants both kits draw (components/ui/text.tsx on mobile; the type-* utilities on the web). */
+export const TEXT_STYLES = ['h1', 'h2', 'h3', 'h4', 'lead', 'p', 'large', 'small', 'muted', 'code', 'blockquote'];
+
+/**
+ * The text styles as the kits draw them at the default typeset (16px, leading 1.75), from the mobile kit's
+ * components/ui/text.tsx and Tailwind's sizes: size px, leading × size, tracking em. `leading: 'prose'` is the typeset's own leading
+ * (Text p's leading-prose); every other leading scales with the typeset's (leading / 1.75), and sizes with
+ * size / 16. `small` is leading-none, which never scales.
+ */
+export const TEXT_DEFAULTS = {
+  h1: { font: 'heading', weight: 800, size: 36, leading: 40 / 36, tracking: -0.025 },
+  h2: { font: 'heading', weight: 600, size: 30, leading: 36 / 30, tracking: -0.025 },
+  h3: { font: 'heading', weight: 600, size: 24, leading: 32 / 24, tracking: -0.025 },
+  h4: { font: 'heading', weight: 600, size: 20, leading: 28 / 20, tracking: -0.025 },
+  lead: { font: 'body', weight: 400, size: 20, leading: 28 / 20, tracking: 0 },
+  p: { font: 'body', weight: 400, size: 16, leading: 'prose', tracking: 0 },
+  large: { font: 'body', weight: 600, size: 18, leading: 28 / 18, tracking: 0 },
+  small: { font: 'body', weight: 500, size: 14, leading: 1, tracking: 0 },
+  muted: { font: 'body', weight: 400, size: 14, leading: 20 / 14, tracking: 0 },
+  code: { font: 'mono', weight: 600, size: 14, leading: 20 / 14, tracking: 0 },
+  blockquote: { font: 'body', weight: 400, size: 16, leading: 24 / 16, tracking: 0 },
+};
+
+const FONT_REF = /^\{primitive\.font\.family\.(heading|body|mono)\}$/;
+
+/**
+ * A system's edited text styles from a semantic.type group: a theme's ({ h1: { size, … } }) or a token file's
+ * DTCG one ({ h1: { size: { $value } } }). The font is a reference to a role's family; a style's other keys
+ * are numbers. The typeset's own numbers (size, leading, flow, measure) are skipped.
+ *   → { h1: { size, leading, weight, tracking, font: 'heading' } }
+ */
+export function textEdits(group = {}) {
+  const out = {};
+  for (const name of TEXT_STYLES) {
+    const style = group?.[name];
+    if (!style || typeof style !== 'object' || '$value' in style) continue;
+    const value = (v) => (v && typeof v === 'object' && '$value' in v ? v.$value : v);
+    const edit = {};
+    for (const key of ['size', 'leading', 'weight', 'tracking']) if (typeof value(style[key]) === 'number') edit[key] = value(style[key]);
+    const font = FONT_REF.exec(String(value(style.font) ?? ''));
+    if (font) edit.font = font[1];
+    out[name] = edit;
+  }
+  return out;
+}
+
+/**
+ * Every text style as drawn at a typeset (typeScale), edits on top, unrounded:
+ *   { h1: { font, weight, size: px, leading: × size, tracking: em, lineHeight: px, edited: bool } }
+ * Sizes scale by the typeset's size / 16 and line heights by its leading / 1.75; Text p takes the typeset's
+ * leading itself and Text small (leading-none) never scales. With no edits this is exactly what the kits drew
+ * with Tailwind's text-* classes.
+ */
+export function resolveTextStyles(type, edits = {}) {
+  return Object.fromEntries(
+    TEXT_STYLES.map((name) => {
+      const d = TEXT_DEFAULTS[name];
+      const leading = d.leading === 'prose' ? type.leading : d.leading === 1 ? 1 : d.leading * type.leadingFactor;
+      const edit = edits[name] ?? {};
+      const style = { font: d.font, weight: d.weight, size: d.size * type.scale, leading, tracking: d.tracking, ...edit, edited: Object.keys(edit).length > 0 };
+      // The line height in px, multiplied in the order the text-* classes always were (so it rounds the same).
+      const px = Math.round(d.size * (d.leading === 'prose' ? 1 : d.leading) * 1e6) / 1e6;
+      style.lineHeight = 'size' in edit || 'leading' in edit ? style.size * style.leading : d.leading === 'prose' ? px * type.scale * type.leading : d.leading === 1 ? style.size : px * type.scale * type.leadingFactor;
+      return [name, style];
+    })
+  );
+}
+
 const s = (x, y, blur, spread, color) => ({ offsetX: x, offsetY: y, blur, spread, color });
 /**
  * Three elevation levels per depth (DTCG shadow values, light and dark): 1 for controls and cards,
@@ -136,6 +236,8 @@ export const DEFAULT_RECIPE = Object.freeze({
   leading: 'normal',
   flow: 'normal',
   measure: '70',
+  button: 'solid',
+  field: 'outline',
 });
 
 const HEX = /^#[0-9a-f]{6}$/;
@@ -143,6 +245,9 @@ const HEX = /^#[0-9a-f]{6}$/;
 /** Does the recipe use the default typeset (what every ht1 code means)? */
 export const defaultTypeset = (r) => r.font.mono === DEFAULT_RECIPE.font.mono && TYPESET_KEYS.every((k) => r[k] === DEFAULT_RECIPE[k]);
 
+/** Does the recipe keep the default styles (solid buttons, outline fields: every ht1 and ht2 code)? */
+export const defaultStyles = (r) => STYLE_KEYS.every((k) => r[k] === DEFAULT_RECIPE[k]);
+
 /** Fill in defaults, normalise, and throw on anything invalid. Returns a new, plain recipe. */
 export function normalizeRecipe(input = {}) {
   const r = { ...DEFAULT_RECIPE, ...input, font: { ...DEFAULT_RECIPE.font, ...input.font } };
@@ -175,6 +280,8 @@ export function normalizeRecipe(input = {}) {
     leading: r.leading,
     flow: r.flow,
     measure: r.measure,
+    button: r.button,
+    field: r.field,
   };
   if (input.preset) out.preset = String(input.preset);
   return out;

package/lib/theme/semantic.mjs

@@ -3,6 +3,8 @@
  * references per mode. With a curated seed this is exactly the kit's original map; a generated seed
  * moves the brand steps to wherever the seed landed (its anchor).
  */
+import { STEPS } from './palettes.mjs';
+
 const n = (step) => `{primitive.color.neutral.${step}}`;
 const b = (step) => `{primitive.color.brand.${step}}`;
 const p = (ramp, step) => `{primitive.color.${ramp}.${step}}`;
@@ -11,8 +13,18 @@ const p = (ramp, step) => `{primitive.color.${ramp}.${step}}`;
 const DARK_STEP = { 600: '500', 700: '400', 800: '300', 900: '200', 950: '100' };
 export const darkStep = (anchor) => DARK_STEP[anchor] ?? anchor;
 
-/** { name: { light: ref, dark: ref } } in the order the kit's tokens.json lists them. */
-export function semanticColors(anchor = '600') {
+/**
+ * The status tones' steps, as offsets from the step their seed sits on (600 for the curated ramps the kits
+ * ship), light and dark: a status seed that lands on another step moves its tone with it, as the brand does.
+ */
+const STATUS_STEPS = { danger: [0, -1], success: [1, -1], warning: [1, -2], info: [1, -1] };
+const status = (ramp, anchor = '600') => ({ light: p(ramp, shift(anchor, STATUS_STEPS[ramp][0])), dark: p(ramp, shift(anchor, STATUS_STEPS[ramp][1])) });
+
+/**
+ * { name: { light: ref, dark: ref } } in the order the kit's tokens.json lists them. `anchors` holds the step
+ * each status seed sits on (`{ danger: '500' }`); a status without one uses its 600, the curated ramps' seed.
+ */
+export function semanticColors(anchor = '600', anchors = {}) {
   const brand = { light: b(anchor), dark: b(darkStep(anchor)) };
   const onDark = { light: n(0), dark: n(950) };
   return {
@@ -30,13 +42,13 @@ export function semanticColors(anchor = '600') {
     'muted-foreground': { light: n(600), dark: n(400) },
     accent: { light: n(100), dark: n(800) },
     'accent-foreground': { light: n(900), dark: n(50) },
-    destructive: { light: p('danger', 600), dark: p('danger', 500) },
+    destructive: status('danger', anchors.danger),
     'destructive-foreground': onDark,
-    success: { light: p('success', 700), dark: p('success', 500) },
+    success: status('success', anchors.success),
     'success-foreground': onDark,
-    warning: { light: p('warning', 700), dark: p('warning', 400) },
+    warning: status('warning', anchors.warning),
     'warning-foreground': onDark,
-    info: { light: p('info', 700), dark: p('info', 500) },
+    info: status('info', anchors.info),
     'info-foreground': onDark,
     border: { light: n(200), dark: n(800) },
     input: { light: n(200), dark: n(800) },
@@ -57,6 +69,31 @@ export function semanticColors(anchor = '600') {
   };
 }
 
+function shift(step, by) {
+  return STEPS[Math.min(STEPS.length - 1, Math.max(0, STEPS.indexOf(step) + by))];
+}
+
+/**
+ * The colours a recipe's styles add (button, field), from the base colours after their contrast fix, so a moved
+ * primary moves the button with it. Field edges that are the field's only boundary (filled, underline) are a
+ * mid neutral, which the gate holds to 3:1 (contrast.mjs).
+ */
+export function styleColors({ button, field }, anchor, colors) {
+  const dark = darkStep(anchor);
+  const buttons = {
+    solid: { button: colors.primary, 'button-foreground': colors['primary-foreground'], 'button-edge': colors.primary },
+    soft: { button: { light: b(100), dark: b(900) }, 'button-foreground': { light: b(700), dark: b(200) }, 'button-edge': { light: b(100), dark: b(900) } },
+    outline: { button: colors.background, 'button-foreground': colors.primary, 'button-edge': colors.primary },
+    raised: { button: colors.primary, 'button-foreground': colors['primary-foreground'], 'button-edge': { light: b(shift(anchor, 2)), dark: b(shift(dark, 2)) } },
+  };
+  const fields = {
+    outline: { field: colors.input, 'field-edge': colors.input },
+    filled: { field: colors.muted, 'field-edge': { light: n(500), dark: n(400) } },
+    underline: { field: colors.background, 'field-edge': { light: n(500), dark: n(500) } },
+  };
+  return { ...buttons[button], ...fields[field] };
+}
+
 /** Tokens that share the brand step; when the fixer moves `primary`, these move with it. */
 export const BRAND_LINKED = ['ring', 'sidebar-primary', 'sidebar-ring'];