@halftone-ds/tokens 0.0.0-stage → 1.0.0

package/targets/shadcn-web.mjs

@@ -0,0 +1,89 @@
+/**
+ * Tailwind 4 / shadcn web (v4 shape): oklch variables in `:root` and `.dark`, the `@theme inline`
+ * mapping that turns them into utilities, and shadcn's base layer. A partial, not a full stylesheet:
+ *   app/globals.css →  @import "tailwindcss";  @import "./tokens.css";
+ * Same tokens, same contrast gate as the native CSS; colours are converted with a round-trip check.
+ *   options: { out: 'tokens/generated/web.css' }
+ *            density: false   leave the spacing scale alone (the docs site)
+ *            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 { TEXT_LINE_HEIGHT } from '../lib/theme/recipe.mjs';
+import { 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";
+const SYSTEM_MONO = 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace';
+
+/** Tailwind's text-xs…4xl from the primitive sizes, scaled by the typeset (sizes and line heights). */
+function textScale(ctx) {
+  const sizes = group(ctx.prim, ['font', 'size']).filter(({ key }) => key in TEXT_LINE_HEIGHT);
+  return sizes
+    .map(({ key, value }) => {
+      // Exact ratios, as Tailwind writes them (calc(1 / 0.75)), so the default typeset changes nothing.
+      return `  --text-${key}: calc(${value / 16}rem * var(--type-scale));\n  --text-${key}--line-height: calc(${TEXT_LINE_HEIGHT[key]} / ${value} * var(--leading-factor));`;
+    })
+    .join('\n');
+}
+
+export default function shadcnWeb(ctx, options) {
+  const vars = (mode) => ctx.colors.map((c) => `  --${c.name}: ${hexToOklch(c[mode])};`).join('\n');
+  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 *));
+
+:root {
+  --radius: ${rem(ctx.radius.base)};
+  --radius-control: ${rem(ctx.shape.control)};
+  --border-width: ${ctx.shape.borderWidth}px;
+  --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')
+  }
+${shadows('light')}
+${vars('light')}
+}
+
+.dark {
+${shadows('dark')}
+${vars('dark')}
+}
+
+@theme inline {
+${ctx.radius.steps.map((s) => `  --radius-${s.name}: ${radiusCalc(s.scale)};`).join('\n')}
+  --radius-control: var(--radius-control);
+  --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);
+  --shadow-sm: var(--shadow-1);
+  --shadow-md: var(--shadow-2);
+  --shadow-lg: var(--shadow-3);
+  --shadow-xl: var(--shadow-3);
+  --shadow-2xl: var(--shadow-3);
+  --font-sans: var(--kit-font-body, ${SYSTEM_SANS});
+  --font-heading: var(--kit-font-heading, var(--kit-font-body, ${SYSTEM_SANS}));
+  --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')}
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  /* The theme's heading font (--kit-font-heading, set by app/fonts.ts or a live theme). */
+  h1, h2, h3, h4, [data-slot='card-title'] {
+    font-family: var(--font-heading);
+  }
+  /* Lucide icons take the theme's stroke. */
+  svg.lucide {
+    stroke-width: var(--icon-stroke);
+  }
+}
+`;
+  return [{ path: options.out, contents }];
+}

package/targets/ts-theme.mjs

@@ -0,0 +1,132 @@
+/**
+ * lib/theme.ts — semantic colours as hex per scheme, non-colour primitives, and (for Expo Router apps)
+ * the React Navigation theme.
+ *   options: { out: 'lib/theme.ts', navTheme?: 'expo-router/react-navigation' | false }
+ */
+import { camel, group } from '../lib/resolve.mjs';
+import { presetById, sameRecipe, themeStatus } from '../lib/theme/index.mjs';
+
+/** The applied theme, for a read-only summary in the app (Foundations). */
+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';
+  return JSON.stringify({ code: status.code, name, edited: status.drift.length > 0, recipe: status.recipe }, null, 2);
+}
+
+function colorObject(colors, mode) {
+  return colors.map((c) => `    ${camel(c.name)}: '${c[mode]}',`).join('\n');
+}
+
+function primitiveGroup(prim, prefix) {
+  return group(prim, prefix)
+    .map(({ key, value }) => `    ${/^[a-z_$][\w$]*$/i.test(key) ? key : `'${key}'`}: ${JSON.stringify(value)},`)
+    .join('\n');
+}
+
+const navTheme = (scheme, base) => `  ${scheme}: {
+    ...${base},
+    colors: {
+      background: THEME.${scheme}.background,
+      border: THEME.${scheme}.border,
+      card: THEME.${scheme}.card,
+      notification: THEME.${scheme}.destructive,
+      primary: THEME.${scheme}.primary,
+      text: THEME.${scheme}.foreground,
+    },
+  },`;
+
+export default function tsTheme(ctx, options) {
+  const nav = options.navTheme;
+  const contents = `// ${ctx.header}
+${nav ? `import { DarkTheme, DefaultTheme, type Theme } from '${nav}';\n` : ''}
+/**
+ * Semantic colours as hex, per scheme. Use ONLY where a className cannot reach:
+ * SVG fills, chart strokes, canvas, platform props (a StatusBar, gradient stops). Everything
+ * else styles with Tailwind classes (bg-primary, text-muted-foreground, …).
+ */
+export const THEME = {
+  light: {
+${colorObject(ctx.colors, 'light')}
+  },
+  dark: {
+${colorObject(ctx.colors, 'dark')}
+  },
+} as const;
+
+export type ThemeColors = typeof THEME.light;
+export type ThemeColorName = keyof ThemeColors;
+
+/** Non-colour primitives (px / ms) for the rare inline-style or Reanimated use. */
+export const TOKENS = {
+  space: {
+${primitiveGroup(ctx.prim, ['space'])}
+  },
+  radius: {
+${primitiveGroup(ctx.prim, ['radius'])}
+    base: ${ctx.radius.base},
+    control: ${ctx.shape.control},
+  },
+  /** Lucide stroke width for icons (the Icon component's default; an explicit strokeWidth is relative to 2). */
+  iconStroke: ${ctx.shape.stroke},
+  /** Width of \`border\` in px. */
+  borderWidth: ${ctx.shape.borderWidth},
+  /** 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). */
+  fontSize: {
+${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)},
+  fontFamily: {
+${primitiveGroup(ctx.prim, ['font', 'family'])}
+  },
+  duration: {
+${primitiveGroup(ctx.prim, ['duration'])}
+  },
+  easing: {
+${primitiveGroup(ctx.prim, ['easing'])}
+  },
+} 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;
+  name: string;
+  edited: boolean;
+  recipe: {
+    v: number;
+    brand: string;
+    neutral: string;
+    radius: string;
+    controls: string;
+    font: { heading: string; body: string; mono: string };
+    stroke: string;
+    depth: string;
+    density: string;
+    border: string;
+    size: string;
+    leading: string;
+    flow: string;
+    measure: string;
+    preset?: string;
+  };
+};
+${
+  nav
+    ? `
+export const NAV_THEME: Record<'light' | 'dark', Theme> = {
+${navTheme('light', 'DefaultTheme')}
+${navTheme('dark', 'DarkTheme')}
+};
+`
+    : ''
+}`;
+  return [{ path: options.out, contents }];
+}