@worldcoin/nucleus 0.1.4

package/tokens/formats/buttons.ts

@@ -0,0 +1,187 @@
+import { readFileSync } from 'fs';
+import { resolve, dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+import { parseReference, typographyTokenPath } from './shared.js';
+
+const ROOT = resolve(dirname(fileURLToPath(import.meta.url)), '../..');
+
+interface RawVariant {
+  background?: unknown;
+  content?: unknown;
+  border?: unknown;
+}
+interface RawSize {
+  height?: unknown;
+  cornerRadius?: unknown;
+  paddingHorizontal?: unknown;
+  paddingVertical?: unknown;
+  font?: unknown;
+}
+interface RawButtonDefinition {
+  component?: {
+    button?: {
+      variants?: Record<string, RawVariant>;
+      sizes?: Record<string, RawSize>;
+      pressedInset?: unknown;
+    };
+  };
+}
+
+export interface ButtonVariant {
+  name: string;
+  /** Color token path, e.g. `semantic.color.action.primary`. */
+  background: string;
+  content: string;
+  border?: string;
+}
+export interface ButtonSize {
+  name: string;
+  height: number;
+  cornerRadius: number;
+  paddingHorizontal: number;
+  paddingVertical: number;
+  /** Source font token id, e.g. `s1`. */
+  fontToken: string;
+  /** Grouped typography path, e.g. `typography.subtitle.s1`. */
+  fontPath: string;
+}
+export interface ButtonDefinition {
+  variants: ButtonVariant[];
+  sizes: ButtonSize[];
+  pressedInset: number;
+}
+
+function refPath(raw: unknown, where: string): string {
+  if (typeof raw !== 'string') {
+    throw new Error(`${where} must be a token reference string`);
+  }
+  const ref = parseReference(raw);
+  if (!ref) {
+    throw new Error(
+      `${where} must be a token reference like {semantic.color.action.primary}`,
+    );
+  }
+  return ref.join('.');
+}
+
+function num(raw: unknown, where: string): number {
+  if (typeof raw !== 'number' || Number.isNaN(raw)) {
+    throw new Error(`${where} must be a number`);
+  }
+  return raw;
+}
+
+export function loadButtonDefinition(jsonPath: string): ButtonDefinition {
+  const raw = JSON.parse(
+    readFileSync(resolve(ROOT, jsonPath), 'utf8'),
+  ) as RawButtonDefinition;
+  const button = raw.component?.button;
+  if (!button?.variants || !button?.sizes) {
+    throw new Error(
+      `${jsonPath} must define component.button.variants and component.button.sizes`,
+    );
+  }
+
+  const variants = Object.entries(button.variants).map(([name, v]) => ({
+    name,
+    background: refPath(v.background, `${jsonPath} → ${name}.background`),
+    content: refPath(v.content, `${jsonPath} → ${name}.content`),
+    border: v.border
+      ? refPath(v.border, `${jsonPath} → ${name}.border`)
+      : undefined,
+  }));
+
+  const sizes = Object.entries(button.sizes).map(([name, s]) => {
+    const fontToken =
+      typeof s.font === 'string' ? s.font : '';
+    if (!fontToken) {
+      throw new Error(`${jsonPath} → sizes.${name}.font must be a font token id`);
+    }
+    return {
+      name,
+      height: num(s.height, `${jsonPath} → sizes.${name}.height`),
+      cornerRadius: num(s.cornerRadius, `${jsonPath} → sizes.${name}.cornerRadius`),
+      paddingHorizontal: num(
+        s.paddingHorizontal,
+        `${jsonPath} → sizes.${name}.paddingHorizontal`,
+      ),
+      paddingVertical: num(
+        s.paddingVertical,
+        `${jsonPath} → sizes.${name}.paddingVertical`,
+      ),
+      fontToken,
+      fontPath: typographyTokenPath(fontToken),
+    };
+  });
+
+  return {
+    variants,
+    sizes,
+    pressedInset:
+      typeof button.pressedInset === 'number' ? button.pressedInset : 0,
+  };
+}
+
+export interface ResolvedButtonStyle {
+  /** Combined wire token, e.g. `component.button.primary.48`. */
+  token: string;
+  variant: string;
+  size: string;
+  background: string;
+  content: string;
+  border: string | null;
+  height: number;
+  cornerRadius: number;
+  paddingHorizontal: number;
+  paddingVertical: number;
+  font: string;
+  pressedInset: number;
+}
+
+/** Cross-product of variants × sizes into combined, fully-specified styles. */
+export function resolveButtonStyles(
+  def: ButtonDefinition,
+): ResolvedButtonStyle[] {
+  const out: ResolvedButtonStyle[] = [];
+  for (const variant of def.variants) {
+    for (const size of def.sizes) {
+      out.push({
+        token: `component.button.${variant.name}.${size.name}`,
+        variant: variant.name,
+        size: size.name,
+        background: variant.background,
+        content: variant.content,
+        border: variant.border ?? null,
+        height: size.height,
+        cornerRadius: size.cornerRadius,
+        paddingHorizontal: size.paddingHorizontal,
+        paddingVertical: size.paddingVertical,
+        font: size.fontPath,
+        pressedInset: def.pressedInset,
+      });
+    }
+  }
+  return out;
+}
+
+export function generateWebButtonJson(styles: ResolvedButtonStyle[]): string {
+  const result: Record<string, Record<string, unknown>> = {};
+  for (const style of styles) {
+    const entry: Record<string, unknown> = {
+      background: style.background,
+      content: style.content,
+      height: style.height,
+      cornerRadius: style.cornerRadius,
+      paddingHorizontal: style.paddingHorizontal,
+      paddingVertical: style.paddingVertical,
+      font: style.font,
+      pressedInset: style.pressedInset,
+    };
+    if (style.border) {
+      entry.border = style.border;
+    }
+    result[style.token] = entry;
+  }
+  return `${JSON.stringify(result, null, 2)}\n`;
+}

package/tokens/formats/colors-android.ts

@@ -0,0 +1,64 @@
+import Handlebars from 'handlebars';
+
+import {
+  camelCasePath,
+  parseReference,
+  publicColorPath,
+  readTemplate,
+} from './shared.js';
+import type { ColorLeaf } from './loaders.js';
+
+const PACKAGE_NAME = 'com.worldcoin.nucleus.tokens';
+const TEMPLATE = Handlebars.compile(
+  readTemplate('tokens/templates/android/NucleusColors.kt.hbs'),
+);
+
+function hexToArgb(hex: string): string {
+  const normalized = hex.replace('#', '').toUpperCase();
+  if (normalized.length === 6) return `0xFF${normalized}`;
+  if (normalized.length === 8) return `0x${normalized.slice(6)}${normalized.slice(0, 6)}`;
+  throw new Error(`Unsupported color format: ${hex}`);
+}
+
+function androidColorValue(rawValue: string, semanticObjectName: string): string {
+  const referencePath = parseReference(rawValue);
+  if (referencePath) {
+    const [root] = referencePath;
+    const accessor = camelCasePath(publicColorPath(referencePath));
+    if (root === 'primitive') return `NucleusPrimitiveColors.${accessor}`;
+    if (root === 'semantic') return `${semanticObjectName}.${accessor}`;
+  }
+  return `Color(${hexToArgb(rawValue)})`;
+}
+
+interface RenderArgs {
+  objectName: string;
+  tokens: ColorLeaf[];
+  semanticObjectName: string;
+}
+
+function render({ objectName, tokens, semanticObjectName }: RenderArgs): string {
+  return TEMPLATE({
+    packageName: PACKAGE_NAME,
+    objectName,
+    tokens: tokens.map((token) => ({
+      name: camelCasePath(publicColorPath(token.path)),
+      value: androidColorValue(token.rawValue, semanticObjectName),
+    })),
+  });
+}
+
+export function generateAndroidPrimitiveColors(tokens: ColorLeaf[]): string {
+  return render({
+    objectName: 'NucleusPrimitiveColors',
+    tokens,
+    semanticObjectName: 'NucleusPrimitiveColors',
+  });
+}
+
+export function generateAndroidSemanticColors(
+  objectName: string,
+  tokens: ColorLeaf[],
+): string {
+  return render({ objectName, tokens, semanticObjectName: objectName });
+}

package/tokens/formats/colors-ios.ts

@@ -0,0 +1,106 @@
+import Handlebars from 'handlebars';
+
+import { camelCasePath, parseReference, publicColorPath, readTemplate } from './shared.js';
+import { loadColorTokens } from './loaders.js';
+import type { ColorLeaf } from './loaders.js';
+
+const PRIMITIVES_TEMPLATE = Handlebars.compile(
+  readTemplate('tokens/templates/ios/NucleusColor+Primitives.swift.hbs'),
+);
+const SEMANTICS_TEMPLATE = Handlebars.compile(
+  readTemplate('tokens/templates/ios/NucleusColor+Semantics.swift.hbs'),
+);
+
+interface PrimitiveEntry {
+  name: string;
+  hex: string;
+}
+
+interface SemanticEntry {
+  name: string;
+  lightHex: string;
+  darkHex: string;
+  sameForBoth: boolean;
+}
+
+function hexOnly(value: string): string {
+  return value.replace('#', '').toUpperCase();
+}
+
+function resolveHex(rawValue: string, primitivesByPath: Map<string, string>): string {
+  const referencePath = parseReference(rawValue);
+  if (!referencePath) return hexOnly(rawValue);
+  const resolved = primitivesByPath.get(referencePath.join('.'));
+  if (!resolved) {
+    throw new Error(`Unresolved nucleus color reference: ${rawValue}`);
+  }
+  return resolved;
+}
+
+function buildPrimitives(tokens: ColorLeaf[]): {
+  entries: PrimitiveEntry[];
+  byPath: Map<string, string>;
+} {
+  const byPath = new Map<string, string>();
+  const entries: PrimitiveEntry[] = [];
+  for (const { path, rawValue } of tokens) {
+    const hex = hexOnly(rawValue);
+    byPath.set(path.join('.'), hex);
+    entries.push({ name: camelCasePath(publicColorPath(path)), hex });
+  }
+  entries.sort((a, b) => a.name.localeCompare(b.name));
+  return { entries, byPath };
+}
+
+function buildSemantics(
+  lightTokens: ColorLeaf[],
+  darkTokens: ColorLeaf[],
+  primitivesByPath: Map<string, string>,
+): SemanticEntry[] {
+  const collectByName = (tokens: ColorLeaf[]): Map<string, string> => {
+    const out = new Map<string, string>();
+    for (const { path, rawValue } of tokens) {
+      out.set(camelCasePath(publicColorPath(path)), resolveHex(rawValue, primitivesByPath));
+    }
+    return out;
+  };
+
+  const lightByName = collectByName(lightTokens);
+  const darkByName = collectByName(darkTokens);
+
+  const allNames = new Set([...lightByName.keys(), ...darkByName.keys()]);
+  const entries: SemanticEntry[] = [];
+  for (const name of allNames) {
+    const lightHex = lightByName.get(name);
+    const darkHex = darkByName.get(name);
+    if (!lightHex || !darkHex) {
+      throw new Error(`Semantic token '${name}' missing from one of the light/dark sources`);
+    }
+    entries.push({ name, lightHex, darkHex, sameForBoth: lightHex === darkHex });
+  }
+  entries.sort((a, b) => a.name.localeCompare(b.name));
+  return entries;
+}
+
+export interface IOSColorOutput {
+  primitivesContent: string;
+  semanticsContent: string;
+}
+
+export function generateIOSColors(args: {
+  primitiveSource: string;
+  semanticLightSource: string;
+  semanticDarkSource: string;
+}): IOSColorOutput {
+  const primitiveTokens = loadColorTokens(args.primitiveSource);
+  const lightTokens = loadColorTokens(args.semanticLightSource);
+  const darkTokens = loadColorTokens(args.semanticDarkSource);
+
+  const { entries: primitiveEntries, byPath: primitivesByPath } = buildPrimitives(primitiveTokens);
+  const semanticEntries = buildSemantics(lightTokens, darkTokens, primitivesByPath);
+
+  return {
+    primitivesContent: PRIMITIVES_TEMPLATE({ tokens: primitiveEntries }),
+    semanticsContent: SEMANTICS_TEMPLATE({ tokens: semanticEntries }),
+  };
+}

package/tokens/formats/colors-web.ts

@@ -0,0 +1,32 @@
+import {
+  camelCasePath,
+  kebabCasePath,
+  parseReference,
+  publicColorPath,
+} from './shared.js';
+import type { ColorLeaf } from './loaders.js';
+
+function cssVariableName(path: string[]): string {
+  return `--nucleus-${kebabCasePath(publicColorPath(path))}`;
+}
+
+function cssColorValue(rawValue: string): string {
+  const referencePath = parseReference(rawValue);
+  if (referencePath) return `var(${cssVariableName(referencePath)})`;
+  return rawValue;
+}
+
+export function generateWebColorCss(tokens: ColorLeaf[]): string {
+  const lines = tokens.map(
+    (token) => `  ${cssVariableName(token.path)}: ${cssColorValue(token.rawValue)};`,
+  );
+  return [':root {', ...lines, '}', ''].join('\n');
+}
+
+export function generateWebColorJson(tokens: ColorLeaf[]): string {
+  const result: Record<string, string> = {};
+  for (const token of tokens) {
+    result[camelCasePath(publicColorPath(token.path))] = token.rawValue;
+  }
+  return JSON.stringify(result, null, 2) + '\n';
+}

package/tokens/formats/fonts-android.ts

@@ -0,0 +1,33 @@
+import Handlebars from 'handlebars';
+
+import { readTemplate, snakeCase } from './shared.js';
+import type { FontToken } from './loaders.js';
+
+const PACKAGE_NAME = 'com.worldcoin.nucleus.tokens';
+const TEMPLATE = Handlebars.compile(
+  readTemplate('tokens/templates/android/NucleusFonts.kt.hbs'),
+);
+
+interface AndroidFontEntry {
+  name: string;
+  fontResource: string;
+  size: string;
+  weight: number;
+  letterSpacing: string;
+  lineHeight: string;
+}
+
+function toAndroidEntry(token: FontToken): AndroidFontEntry {
+  return {
+    name: token.name,
+    fontResource: snakeCase(token.family.file),
+    size: token.size.toString(),
+    weight: token.weight,
+    letterSpacing: token.letterSpacing.toString(),
+    lineHeight: token.lineHeight.toString(),
+  };
+}
+
+export function generateAndroidFonts(tokens: FontToken[]): string {
+  return TEMPLATE({ packageName: PACKAGE_NAME, tokens: tokens.map(toAndroidEntry) });
+}

package/tokens/formats/fonts-ios.ts

@@ -0,0 +1,34 @@
+import Handlebars from 'handlebars';
+
+import { readTemplate } from './shared.js';
+import type { FontToken } from './loaders.js';
+
+const TEMPLATE = Handlebars.compile(
+  readTemplate('tokens/templates/ios/NucleusFont+Defaults.swift.hbs'),
+);
+
+interface IOSFontEntry {
+  name: string;
+  fontName: string;
+  size: string;
+  weight: string;
+  letterSpacing: string;
+  lineHeight: string;
+  dynamicTypeStyle: string;
+}
+
+function toIOSEntry(token: FontToken): IOSFontEntry {
+  return {
+    name: token.name,
+    fontName: token.family.postscriptName,
+    size: token.size.toString(),
+    weight: token.weight.toString(),
+    letterSpacing: token.letterSpacing.toString(),
+    lineHeight: token.lineHeight.toString(),
+    dynamicTypeStyle: token.dynamicTypeStyle ?? 'body',
+  };
+}
+
+export function generateIOSFonts(tokens: FontToken[]): string {
+  return TEMPLATE({ tokens: tokens.map(toIOSEntry) });
+}

package/tokens/formats/fonts-web.ts

@@ -0,0 +1,44 @@
+import { kebabCase } from './shared.js';
+import type { FontToken } from './loaders.js';
+
+export interface WebFontResult {
+  variablesCss: string;
+  json: string;
+}
+
+function variableName(token: FontToken, key: string): string {
+  return `--nucleus-font-${kebabCase(token.name)}-${key}`;
+}
+
+function buildVariablesCss(tokens: FontToken[]): string {
+  const lines: string[] = [];
+  for (const token of tokens) {
+    lines.push(`  ${variableName(token, 'family')}: "${token.family.postscriptName}";`);
+    lines.push(`  ${variableName(token, 'size')}: ${token.size}px;`);
+    lines.push(`  ${variableName(token, 'weight')}: ${token.weight};`);
+    lines.push(`  ${variableName(token, 'letter-spacing')}: ${token.letterSpacing}em;`);
+    lines.push(`  ${variableName(token, 'line-height')}: ${token.lineHeight};`);
+  }
+  return [':root {', ...lines, '}', ''].join('\n');
+}
+
+function buildJson(tokens: FontToken[]): string {
+  const result: Record<string, Record<string, string | number>> = {};
+  for (const token of tokens) {
+    result[token.name] = {
+      fontName: token.family.postscriptName,
+      size: `${token.size}px`,
+      weight: token.weight,
+      letterSpacing: `${token.letterSpacing}em`,
+      lineHeight: token.lineHeight,
+    };
+  }
+  return JSON.stringify(result, null, 2) + '\n';
+}
+
+export function generateWebFonts(tokens: FontToken[]): WebFontResult {
+  return {
+    variablesCss: buildVariablesCss(tokens),
+    json: buildJson(tokens),
+  };
+}