unholy-design-tokens 1.0.0

package/dist/src/utils/index.js

@@ -0,0 +1,4 @@
+export * from './helpers';
+export * from './template';
+export * from './tokens';
+export * from './utopia';

package/dist/src/utils/template.js

@@ -0,0 +1,83 @@
+/**
+ * Utility functions for template generation.
+ * https://styledictionary.com/reference/hooks/formats/#using-a-template--templating-engine-to-create-a-format
+ */
+import { capitalizeFirstLetter } from "./helpers.js";
+export { generateHeader, generateSubheader, formatInLayer, generateFigmaHeaderReference, };
+const startComment = "/* ";
+const endComment = " */";
+const headerLength = 60;
+const subheaderLength = 20;
+const separatorChar = "-";
+const headerSeparator = " ";
+function generateSeparator(length) {
+    return `${startComment}${separatorChar.repeat(length)}${endComment}`;
+}
+/**
+ * Will generate a comment block like this:
+/* ------------------------------------------------------------ *\/
+/*                            Title                             *\/
+/* ------------------------------------------------------------ *\/
+ *
+ */
+function generateCommentBlock(title, totalLength, separatorChar, indent = "") {
+    let titleTotalLength = totalLength - title.length;
+    let halfLength = Math.floor(titleTotalLength / 2);
+    let titleSeparator = headerSeparator.repeat(halfLength);
+    if (totalLength % 2 !== 0) {
+        titleSeparator += separatorChar;
+    }
+    return (`\n${indent}${generateSeparator(totalLength)}` +
+        `\n${indent}${startComment}${titleSeparator}${title}${titleSeparator}${endComment}` +
+        `\n${indent}${generateSeparator(totalLength)}\n`);
+}
+/**
+ * Generates a header comment block for a given header string.
+ * /* ------------------------------------------------------------ *\/
+ * /*                            Header                            *\/
+ * /* ------------------------------------------------------------ *\/
+ */
+function generateHeader(header) {
+    if (!header)
+        return "";
+    return generateCommentBlock(capitalizeFirstLetter(header), headerLength, separatorChar, "");
+}
+/**
+ * Generates a subheader comment block for a given subheader string.
+ * /* ---------------------- \/*
+ * /*       Subheader        *\/
+ * /* ---------------------- *\/
+ */
+function generateSubheader(subheader) {
+    if (!subheader)
+        return "";
+    return generateCommentBlock(capitalizeFirstLetter(subheader), subheaderLength, separatorChar, "  ");
+}
+/**
+ * Formats content within a CSS layer block.
+ * @layer name {
+ *   :root {
+ *     --variable: value;
+ *   }
+ * }
+ */
+function formatInLayer(name, content) {
+    let result = `@layer ${name} {`;
+    result += `\n`;
+    result += `  :root {`;
+    result += `\n`;
+    result += `${content}`;
+    result += `  }\n`;
+    result += `}\n`;
+    return result;
+}
+/**
+ * Generates a Figma header reference comment block
+ * /* Collection name: <collectionName> *\/
+ * /* Mode: <mode> *\/
+ *
+ * See https://www.figma.com/community/plugin/1470777269812001046/css-variables-import-export
+ */
+function generateFigmaHeaderReference(collectionName, mode = "Light") {
+    return `/* Collection name: ${collectionName} */\n/* Mode: ${mode} */`;
+}

package/dist/src/utils/tokens.js

@@ -0,0 +1,80 @@
+import { getReferences, usesReferences } from 'style-dictionary/utils';
+import { toKebab } from './helpers.js';
+export function tokenName(token) {
+    const attrs = token.attributes;
+    const path = attrs?.item ? [attrs.category, attrs.type, attrs.item] : token.path;
+    return path.join('-');
+}
+// TODO:
+export function resolveTokenReferences(token, options, dictionary, privateVar = false) {
+    const originalValue = token.original?.value;
+    // if (!shouldOutputReferences(token, options, dictionary)) {
+    //   return originalValue != null
+    //     ? cssValue(originalValue)
+    //     : cssValue(token.value);
+    // }
+    if (!originalValue)
+        return cssValue(token.value);
+    // if (
+    //   (originalValueParsed && originalValueParsed.startsWith("var(--")) ||
+    //   originalValueParsed.startsWith("calc") ||
+    //   originalValueParsed.startsWith("clamp")
+    // ) {
+    //   ("📟 - cssValue(originalValue) → ", cssValue(originalValue));
+    //   return originalValue;
+    // }
+    if (!usesReferences(originalValue))
+        return cssValue(token.value);
+    if (!shouldOutputReferences(token, options, dictionary)) {
+        return rewriteOriginalRefs(originalValue, dictionary.tokens, privateVar);
+    }
+    else {
+        return cssValue(originalValue);
+    }
+}
+export function refToTokenRefString(ref) {
+    // Verify if the ref is a style-dictionary reference object pattern or a direct var(--...) string
+    const refPath = ref.ref ?? ref.path;
+    return `{${refPath.join('.')}}`;
+}
+export function refToCssVar(ref, privateVar) {
+    return `var(--${privateVar ? '_' : ''}${toKebab(ref.name)})`;
+}
+const cssValue = (v) => {
+    if (v == null)
+        return '';
+    if (typeof v === 'string')
+        return v;
+    if (typeof v === 'number')
+        return String(v);
+    if (typeof v === 'boolean')
+        return v ? 'true' : 'false';
+    if (Array.isArray(v))
+        return v.join(',');
+    return JSON.stringify(v);
+};
+export function rewriteOriginalRefs(originalValue, dictionaryTokens, privateVar) {
+    if (typeof originalValue !== 'string' || !usesReferences(originalValue))
+        return null;
+    const refs = getReferences(originalValue, dictionaryTokens);
+    let out = originalValue;
+    for (const ref of refs) {
+        out = out.replaceAll(refToTokenRefString(ref), refToCssVar(ref, privateVar));
+    }
+    return out;
+}
+export function shouldOutputReferences(token, options, dictionary) {
+    const originalValue = token.original?.value;
+    if (!usesReferences(originalValue))
+        return false;
+    const originalValueParsed = cssValue(originalValue);
+    if ((originalValueParsed && originalValueParsed.startsWith('var(--')) ||
+        originalValueParsed.startsWith('calc') ||
+        originalValueParsed.startsWith('clamp')) {
+        return false;
+    }
+    const { usesDtcg, outputReferences } = options ?? {};
+    return typeof outputReferences === 'function'
+        ? outputReferences(token, { dictionary, usesDtcg })
+        : Boolean(outputReferences);
+}

package/dist/src/utils/utopia.js

@@ -0,0 +1,19 @@
+// src/utils/utopia.js
+/**
+ * Generate a Utopia fluid type scale.
+ *
+ * Based on https://utopia.fyi/type/calculator/
+ * by James Gilyead & Trys Mudford
+ */
+export function generateUtopiaScale({ minViewport = 360, maxViewport = 1280, minFont = 16, maxFont = 20, scaleMin = 1.2, scaleMax = 1.25, steps = [-2, -1, 0, 1, 2, 3, 4], } = {}) {
+    const results = {};
+    steps.forEach((step) => {
+        const minSize = minFont * scaleMin ** step;
+        const maxSize = maxFont * scaleMax ** step;
+        const slope = ((maxSize - minSize) / (maxViewport - minViewport)) * 100;
+        const intercept = minSize - (slope / 100) * minViewport;
+        const clampValue = `clamp(${minSize / 16}rem, ${intercept / 16}rem + ${slope}vw, ${maxSize / 16}rem)`;
+        results[step] = clampValue;
+    });
+    return results;
+}

package/eslint.config.js

@@ -0,0 +1,67 @@
+import css from '@eslint/css'
+import js from '@eslint/js'
+import json from '@eslint/json'
+import markdown from '@eslint/markdown'
+import { defineConfig } from 'eslint/config'
+import globals from 'globals'
+
+export default defineConfig([
+  {
+    ignores: [
+      'dist/**',
+      'build/**',
+      'node_modules/**',
+      '**/package-lock.json',
+      '**/yarn.lock',
+      '**/pnpm-lock.yaml',
+    ],
+  },
+  {
+    files: ['**/*.{js,mjs,cjs, ts, mts}'],
+    plugins: { js },
+    extends: ['js/recommended'],
+    languageOptions: { globals: { ...globals.browser, ...globals.node } },
+    rules: {
+      'no-console': 'error',
+    },
+  },
+  {
+    files: ['**/*.json'],
+    ignores: ['**/tokens/**/*.json'],
+    plugins: { json },
+    language: 'json/json',
+    extends: ['json/recommended'],
+  },
+  {
+    files: ['**/tokens/**/*.json'],
+    plugins: { json },
+    language: 'json/json5',
+    extends: ['json/recommended'],
+  },
+  {
+    files: ['**/*.json5'],
+    plugins: { json },
+    language: 'json/json5',
+    extends: ['json/recommended'],
+  },
+  {
+    files: ['**/*.md'],
+    plugins: { markdown },
+    language: 'markdown/commonmark',
+    extends: ['markdown/recommended'],
+  },
+  {
+    files: ['**/*.css'],
+    plugins: { css },
+    language: 'css/css',
+    extends: ['css/recommended'],
+    rules: {
+      'css/no-invalid-properties': [
+        'error',
+        {
+          allowUnknownVariables: true,
+        },
+      ],
+    },
+  },
+])

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "unholy-design-tokens",
+  "version": "1.0.0",
+  "description": "",
+  "main": "dist/build-tokens.js",
+  "module": "dist/build-tokens.js",
+  "types": "dist/build-tokens.d.ts",
+  "exports": {
+    "package.json": "./dist/package.json",
+    ".": {
+      "import": "./dist/build-tokens.js",
+      "require": "./dist/build-tokens.js"
+    }
+  },
+  "type": "module",
+  "scripts": {
+    "clean": "rm -rf build",
+    "tokens:typography": "node scripts/generate-typography-tokens.js",
+    "build:ts": "tsc",
+    "build": "pnpm run build:ts",
+    "prepack": "pnpm run build",
+    "build-tokens": "node scripts/generate-typography-tokens.js && pnpm run build:ts && node dist/build-tokens.js",
+    "build-tokens:verbose": "node scripts/generate-typography-tokens.js && pnpm run build:ts && node dist/build-tokens.js --verbose",
+    "build:verbose": "pnpm exec build-tokens -- --verbose",
+    "build-TODO:": "build-tokens -- --buildPath=./build/ --source=./src/tokens/ --destination=./build/ --test",
+    "lint": "eslint .",
+    "format": "prettier --write src/**/*.ts src/**/*.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "@eslint/css": "^0.14.1",
+    "@eslint/js": "^9.39.2",
+    "@eslint/json": "^0.14.0",
+    "@eslint/markdown": "^7.5.1",
+    "@types/node": "24.5.1",
+    "@types/tinycolor2": "1.4.6",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
+    "globals": "^16.5.0",
+    "prettier": "3.7.4",
+    "style-dictionary": "^4.0.0-prerelease.30",
+    "tinycolor2": "1.6.0",
+    "prettier-plugin-organize-imports": "4.1.0",
+    "ts-node": "^10.9.2",
+    "tslib": "^2.8.1",
+    "tsx": "^4.21.0",
+    "typescript": "5.9.3",
+    "typescript-eslint": "^8.50.0"
+  },
+  "bin": {
+    "build-tokens": "./dist/bin/build-tokens.js"
+  },
+  "dependencies": {
+    "commander": "^14.0.2",
+    "install": "^0.13.0",
+    "turbowatch": "^2.29.4"
+  }
+}

package/scripts/build-style-dictionary.ts

@@ -0,0 +1,44 @@
+import path from 'node:path'
+import StyleDictionary from 'style-dictionary'
+import { logVerbosityLevels } from 'style-dictionary/enums'
+import styleDictionaryConfig from '../src/style-dictionary.config'
+import {
+  tokensDeclarationFormatter,
+  typesDeclarationFormatter,
+} from '../src/type-declarations/type-declarations.formatter.js'
+import { generateTypographyTokens } from './generate-typography-tokens'
+
+function ensureTrailingSlash(p: string): string {
+  // Style Dictionary wants POSIX-ish trailing slash, even on Windows it accepts `/`
+  return p.endsWith(path.sep) ? p : p + path.sep
+}
+
+export async function buildStyleDictionary(outDir: string) {
+  // 1️⃣ Generate typography tokens FIRST
+  generateTypographyTokens()
+
+  // clone config so we can override buildPath safely
+  const config = {
+    ...styleDictionaryConfig,
+    platforms: Object.fromEntries(
+      Object.entries(styleDictionaryConfig.platforms).map(([name, platform]) => [
+        name,
+        { ...platform },
+      ]),
+    ),
+  }
+
+  for (const platform of Object.values(config.platforms)) {
+    platform.buildPath = ensureTrailingSlash(path.resolve(outDir, platform.buildPath ?? './build/'))
+  }
+
+  let sd = new StyleDictionary(config, {
+    verbosity: logVerbosityLevels.verbose,
+  })
+
+  // Types formatters
+  StyleDictionary.registerFormat(typesDeclarationFormatter)
+  StyleDictionary.registerFormat(tokensDeclarationFormatter)
+
+  await sd.buildAllPlatforms()
+}

package/scripts/generate-typography-tokens.ts

@@ -0,0 +1,138 @@
+// scripts/generate-typography-tokens.js
+// ---------------------------------------------------------
+// Generate ALL typography tokens from primitives/font.json
+// ---------------------------------------------------------
+
+import fs from 'fs'
+import path from 'path'
+import { fileURLToPath } from 'url'
+import { generateUtopiaScale } from '../src/utils'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+const INPUT_FILE = path.join(__dirname, `../src/tokens/1 - primitives/font.json`)
+const PRIMITIVES_OUT = path.join(__dirname, `../src/tokens/1 - primitives/font-scale.json`)
+const INTENT_OUT = path.join(__dirname, '../src/tokens/3 - intent/font.json')
+
+// -----------------------------------
+// Load primitive inputs for typography
+// -----------------------------------
+export function generateTypographyTokens() {
+  if (!fs.existsSync(INPUT_FILE)) {
+    process.exit(1)
+  }
+
+  let configToken
+  try {
+    configToken = JSON.parse(fs.readFileSync(INPUT_FILE, 'utf8')).font
+  } catch {
+    process.exit(1)
+  }
+
+  const config = {
+    minFont: configToken.minFont?.value ?? 16,
+    maxFont: configToken.maxFont?.value ?? 20,
+    minViewport: configToken.minViewport?.value ?? 360,
+    maxViewport: configToken.maxViewport?.value ?? 1280,
+    scaleMin: configToken.scaleMin?.value ?? 1.2,
+    scaleMax: configToken.scaleMax?.value ?? 1.25,
+    steps: configToken.steps?.value ?? [0, 1, 2, 3, 4, 5, 6],
+  }
+
+  // -----------------------------------
+  // Build Utopia scale
+  // -----------------------------------
+
+  const scale = generateUtopiaScale(config)
+
+  // -----------------------------------
+  // Output primitive scale tokens
+  // -----------------------------------
+
+  const primitives = {
+    font: {
+      scale: Object.fromEntries(Object.entries(scale).map(([step, value]) => [step, { value }])),
+    },
+  }
+
+  // -----------------------------------
+  // Define intent tokens
+  // -----------------------------------
+
+  const intent = {
+    text: {
+      body: {
+        size: {
+          value: 'var(--font-scale-0)',
+        },
+        lineHeight: {
+          value: '1.5',
+        },
+        weight: {
+          value: 'var(--font-weight-regular)',
+        },
+      },
+      caption: {
+        size: {
+          value: 'var(--font-scale--2)',
+        },
+        lineHeight: {
+          value: '1.4',
+        },
+        weight: {
+          value: 'var(--font-weight-regular)',
+        },
+      },
+      small: {
+        size: {
+          value: 'var(--font-scale--1)',
+        },
+        lineHeight: {
+          value: '1.4',
+        },
+        weight: {
+          value: 'var(--font-weight-regular)',
+        },
+      },
+    },
+    heading: {
+      h1: {
+        size: {
+          value: 'var(--font-scale-4)',
+        },
+        lineHeight: {
+          value: '1.1',
+        },
+        weight: {
+          value: 'var(--font-weight-bold)',
+        },
+      },
+      h2: {
+        size: {
+          value: 'var(--font-scale-3)',
+        },
+        lineHeight: {
+          value: '1.15',
+        },
+        weight: {
+          value: 'var(--font-weight-bold)',
+        },
+      },
+    },
+  }
+
+  // -----------------------------------
+  // Write JSON files
+  // -----------------------------------
+
+  function writeJSON(file: string, data: unknown) {
+    const dir = path.dirname(file)
+    if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true })
+    fs.writeFileSync(file, JSON.stringify(data, null, 2))
+  }
+
+  writeJSON(PRIMITIVES_OUT, primitives)
+  // writeJSON(SEMANTIC_OUT, semantic);
+  writeJSON(INTENT_OUT, intent)
+}