@halftone-ds/tokens 1.1.0 → 1.3.0

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 { 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,8 +29,96 @@ 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).
+  const color = (name) =>
+    name === 'button' || name === 'field' ? `color-mix(in oklab, var(--${name}) calc(var(--${name}-alpha) * 100%), transparent)` : `var(--${name})`;
   const shadows = (mode) => Object.entries(ctx.shape.shadows[mode]).map(([level, css]) => `  --shadow-${level}: ${css};`).join('\n');
   const contents = `/* ${ctx.header} */
 @custom-variant dark (&:is(.dark *));
@@ -40,18 +130,26 @@ export default function shadcnWeb(ctx, options) {
   --icon-stroke: ${ctx.shape.stroke};${options.density === false ? '' : `\n  --density: ${ctx.shape.density.scale};`}${
     options.typeset === false ? '' : '\n' + Object.entries(typeVars(ctx.type)).map(([k, v]) => `  ${k}: ${v};`).join('\n')
   }
+${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);
+  --radius-field-b: var(--field-radius-b);
+  --spacing-field-x: var(--field-x);
   --default-border-width: var(--border-width);${options.density === false ? '' : `\n  /* The theme's density scales the whole spacing scale (p-4, gap-2, h-9…). */\n  --spacing: calc(0.25rem * var(--density));`}
   --shadow-2xs: var(--shadow-1);
   --shadow-xs: var(--shadow-1);
@@ -65,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}: var(--${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). */
@@ -15,6 +16,25 @@ function themeInfo(source) {
   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');
 }
@@ -72,6 +92,17 @@ ${primitiveGroup(ctx.prim, ['radius'])}
   iconStroke: ${ctx.shape.stroke},
   /** Width of \`border\` in px. */
   borderWidth: ${ctx.shape.borderWidth},
+  /** The theme's styles (button: solid · soft · outline · raised; field: outline · filled · underline) and their
+   *  numbers (px): bg-button / bg-field, border-button-w, rounded-field… already follow them. */
+  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). */
@@ -81,6 +112,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'])}
   },
@@ -92,6 +129,9 @@ ${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)};
@@ -115,6 +155,8 @@ export type ThemeInfo = {
     leading: string;
     flow: string;
     measure: string;
+    button?: string;
+    field?: string;
     preset?: string;
   };
 };