@kiva/kv-tokens 4.0.0 → 4.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kiva/kv-tokens",
-    "version": "4.0.0",
+    "version": "4.0.2",
     "type": "module",
     "publishConfig": {
         "access": "public"
@@ -24,7 +24,6 @@
         "configs/",
         "dist/",
         "assets/",
-        "build/",
         "tokens/"
     ],
     "scripts": {
@@ -45,8 +44,10 @@
     "homepage": "https://github.com/kiva/kv-ui-elements/tree/main/%40kiva/kv-tokens#readme",
     "dependencies": {
         "@tailwindcss/typography": "^0.5.1",
-        "style-dictionary": "^4.4.0",
         "tailwindcss": "^3.4.3"
     },
-    "gitHead": "adc213db33b85ed8e36aff18b14bff6db7093fdd"
+    "devDependencies": {
+        "style-dictionary": "^4.4.0"
+    },
+    "gitHead": "c36f55448e2b6a170321908075aec0176d22ca57"
 }

package/build/build-dtcg.js

@@ -1,31 +0,0 @@
-// Emits dist/dtcg/tokens.json — a single deep-merged DTCG manifest of every
-// source token under tokens/. Aliases (e.g. "{color.brand.DEFAULT}") and
-// $type/$description metadata are preserved verbatim so external consumers
-// (Figma plugins, alternative build pipelines, agent reference docs) get
-// the canonical authored shape, not a transformed view of it.
-
-import {
-	mkdirSync, readFileSync, writeFileSync,
-} from 'node:fs';
-import { dirname, join, relative } from 'node:path';
-import { fileURLToPath } from 'node:url';
-
-import { findJsonFiles, mergeTokens } from './dtcg-merge.js';
-
-const PACKAGE_ROOT = join(dirname(fileURLToPath(import.meta.url)), '..');
-const TOKENS_DIR = join(PACKAGE_ROOT, 'tokens');
-const OUT_DIR = join(PACKAGE_ROOT, 'dist', 'dtcg');
-const OUT_FILE = join(OUT_DIR, 'tokens.json');
-
-const files = findJsonFiles(TOKENS_DIR);
-const sources = files.map((path) => ({
-	path: relative(PACKAGE_ROOT, path),
-	contents: JSON.parse(readFileSync(path, 'utf8')),
-}));
-
-const merged = mergeTokens(sources);
-
-mkdirSync(OUT_DIR, { recursive: true });
-writeFileSync(OUT_FILE, `${JSON.stringify(merged, null, '\t')}\n`, 'utf8');
-
-process.stdout.write(`dtcg: wrote ${relative(PACKAGE_ROOT, OUT_FILE)} from ${files.length} source files\n`);

package/build/build.js

@@ -1,23 +0,0 @@
-import fs from 'node:fs';
-import { generateExternalSVG } from '../configs/kivaHeadingUnderline.js';
-
-// Note: dir is relative to the root of the kv-tokens package
-const dir = '../../dist/kvui';
-
-// Create dist folder
-if (!fs.existsSync(dir)) {
-	fs.mkdirSync(dir, { recursive: true });
-}
-
-// Copy fonts to dist folder
-const fontsDir = './assets/fonts';
-const fontFiles = fs.readdirSync(fontsDir).filter((file) => file.endsWith('.woff2'));
-fontFiles.forEach((file) => {
-	const srcPath = `${fontsDir}/${file}`;
-	const destPath = `${dir}/${file}`;
-	fs.copyFileSync(srcPath, destPath);
-});
-
-// Generate Heading Underline SVG
-const svg = generateExternalSVG();
-fs.writeFileSync(`${dir}/heading-underline.svg`, svg);

package/build/dtcg-merge.js

@@ -1,60 +0,0 @@
-// Pure merge logic for the raw DTCG manifest. Kept side-effect free so the
-// CLI wrapper (build-dtcg.js) and the test suite share the same code path.
-
-import { readdirSync, statSync } from 'node:fs';
-import { join } from 'node:path';
-
-const isLeaf = (node) => node && typeof node === 'object' && '$value' in node;
-
-export function findJsonFiles(rootDir) {
-	const out = [];
-	const walk = (dir) => {
-		readdirSync(dir).forEach((entry) => {
-			const full = join(dir, entry);
-			if (statSync(full).isDirectory()) {
-				walk(full);
-			} else if (entry.endsWith('.json')) {
-				out.push(full);
-			}
-		});
-	};
-	walk(rootDir);
-	return out.sort();
-}
-
-// Deep-merges DTCG token sources into a single object. Throws if two source
-// files both define a leaf at the same path — the canonical source must not
-// have ambiguous duplicates.
-export function mergeTokens(sources) {
-	const out = {};
-	const provenance = new Map();
-
-	const walk = (node, path, fromFile) => {
-		if (isLeaf(node)) {
-			const pathKey = path.join('.');
-			if (provenance.has(pathKey)) {
-				throw new Error(
-					`Leaf token collision at "${pathKey}" — defined in both `
-					+ `${provenance.get(pathKey)} and ${fromFile}`,
-				);
-			}
-			let cursor = out;
-			for (let i = 0; i < path.length - 1; i += 1) {
-				cursor[path[i]] = cursor[path[i]] ?? {};
-				cursor = cursor[path[i]];
-			}
-			cursor[path[path.length - 1]] = node;
-			provenance.set(pathKey, fromFile);
-			return;
-		}
-		if (node && typeof node === 'object' && !Array.isArray(node)) {
-			Object.keys(node).forEach((key) => walk(node[key], [...path, key], fromFile));
-		}
-	};
-
-	sources.forEach(({ path, contents }) => {
-		walk(contents, [], path);
-	});
-
-	return out;
-}

package/build/dtcg-merge.test.js

@@ -1,140 +0,0 @@
-import { test } from 'node:test';
-import { strict as assert } from 'node:assert';
-
-import { mergeTokens } from './dtcg-merge.js';
-
-test('merges disjoint top-level keys from multiple sources', () => {
-	const result = mergeTokens([
-		{
-			path: 'a.json',
-			contents: { color: { red: { $type: 'color', $value: '#f00' } } },
-		},
-		{
-			path: 'b.json',
-			contents: {
-				space: { 1: { $type: 'dimension', $value: { value: 4, unit: 'px' } } },
-			},
-		},
-	]);
-
-	assert.equal(result.color.red.$value, '#f00');
-	assert.equal(result.space[1].$value.value, 4);
-});
-
-test('merges nested keys at the same branch without collision', () => {
-	const result = mergeTokens([
-		{
-			path: 'theme-default.json',
-			contents: {
-				theme: { DEFAULT: { text: { primary: { $type: 'color', $value: '#000' } } } },
-			},
-		},
-		{
-			path: 'theme-dark.json',
-			contents: {
-				theme: { dark: { text: { primary: { $type: 'color', $value: '#fff' } } } },
-			},
-		},
-	]);
-
-	assert.equal(result.theme.DEFAULT.text.primary.$value, '#000');
-	assert.equal(result.theme.dark.text.primary.$value, '#fff');
-});
-
-test('preserves alias references as literal strings', () => {
-	const result = mergeTokens([
-		{
-			path: 'core.json',
-			contents: { color: { brand: { $type: 'color', $value: '#2AA967' } } },
-		},
-		{
-			path: 'semantic.json',
-			contents: {
-				theme: { DEFAULT: { primary: { $type: 'color', $value: '{color.brand}' } } },
-			},
-		},
-	]);
-
-	assert.equal(result.theme.DEFAULT.primary.$value, '{color.brand}');
-});
-
-test('preserves $type and $description metadata', () => {
-	const result = mergeTokens([
-		{
-			path: 'a.json',
-			contents: {
-				color: {
-					red: {
-						$type: 'color',
-						$value: '#f00',
-						$description: 'danger signal',
-					},
-				},
-			},
-		},
-	]);
-
-	assert.equal(result.color.red.$type, 'color');
-	assert.equal(result.color.red.$description, 'danger signal');
-});
-
-test('preserves dimension $value object shape (does not unwrap)', () => {
-	const result = mergeTokens([
-		{
-			path: 'a.json',
-			contents: {
-				space: { 1: { $type: 'dimension', $value: { value: 4, unit: 'px' } } },
-			},
-		},
-	]);
-
-	assert.deepEqual(result.space[1].$value, { value: 4, unit: 'px' });
-});
-
-test('throws on leaf collision with both source paths in the message', () => {
-	assert.throws(
-		() => mergeTokens([
-			{
-				path: 'a.json',
-				contents: { color: { brand: { $type: 'color', $value: '#000' } } },
-			},
-			{
-				path: 'b.json',
-				contents: { color: { brand: { $type: 'color', $value: '#fff' } } },
-			},
-		]),
-		(err) => {
-			assert.match(err.message, /collision/);
-			assert.match(err.message, /color\.brand/);
-			assert.match(err.message, /a\.json/);
-			assert.match(err.message, /b\.json/);
-			return true;
-		},
-	);
-});
-
-test('leaves $value untouched when it is the literal string "0"', () => {
-	// Guard against a naive `!$value` check treating falsy values as missing.
-	const result = mergeTokens([
-		{
-			path: 'a.json',
-			contents: { opacity: { none: { $type: 'opacity', $value: 0 } } },
-		},
-	]);
-
-	assert.equal(result.opacity.none.$value, 0);
-});
-
-test('returns an empty object for empty input', () => {
-	assert.deepEqual(mergeTokens([]), {});
-});
-
-test('merges three sources sharing the same branch', () => {
-	const result = mergeTokens([
-		{ path: 'a.json', contents: { color: { a: { $type: 'color', $value: '#a' } } } },
-		{ path: 'b.json', contents: { color: { b: { $type: 'color', $value: '#b' } } } },
-		{ path: 'c.json', contents: { color: { c: { $type: 'color', $value: '#c' } } } },
-	]);
-
-	assert.deepEqual(Object.keys(result.color).sort(), ['a', 'b', 'c']);
-});

package/build/formats/css-themes.js

@@ -1,60 +0,0 @@
-// Emit a CSS file with :root (DEFAULT theme) plus [data-theme="..."] blocks
-// for every other theme found under theme tokens.
-
-const hexToRGB = (hex) => {
-	const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
-	const replacedHex = hex.replace(shorthandRegex, (m, r, g, b) => r + r + g + g + b + b);
-	const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(replacedHex);
-	return `${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}`;
-};
-
-const CATEGORY_TO_PREFIX = {
-	text: 'text',
-	background: 'bg',
-	border: 'border',
-	'heading-underline': 'heading-underline',
-};
-
-const blockFor = (themeTokens) => {
-	const lines = [];
-	Object.keys(themeTokens).forEach((category) => {
-		const prefix = CATEGORY_TO_PREFIX[category] ?? category;
-		const props = themeTokens[category];
-		Object.keys(props).forEach((prop) => {
-			const tokenLeaf = props[prop];
-			const raw = tokenLeaf.$value ?? tokenLeaf.value;
-			const name = `--${prefix}-${prop}`;
-			if (category === 'heading-underline') {
-				lines.push(`\t${name}: url('/kvui/heading-underline.svg${raw}');`);
-			} else {
-				lines.push(`\t${name}: ${hexToRGB(raw)};`);
-			}
-		});
-	});
-	return lines.join('\n');
-};
-
-const cssThemesFormat = {
-	name: 'kiva/css-themes',
-	format: ({ dictionary }) => {
-		const themes = dictionary.tokens.theme ?? {};
-		const out = ['/* Do not edit directly. Generated by Style Dictionary. */', ''];
-		const defaultTheme = themes.DEFAULT;
-		if (defaultTheme) {
-			out.push(':root {');
-			out.push(blockFor(defaultTheme));
-			out.push('}');
-			out.push('');
-		}
-		Object.keys(themes).forEach((name) => {
-			if (name === 'DEFAULT') return;
-			out.push(`[data-theme="${name}"] {`);
-			out.push(blockFor(themes[name]));
-			out.push('}');
-			out.push('');
-		});
-		return out.join('\n');
-	},
-};
-
-export default cssThemesFormat;

package/build/formats/js-tokens.js

@@ -1,91 +0,0 @@
-// Style Dictionary v4 custom format.
-// Emits:
-//   1. Flat named exports: `export const colorBrandDefault = '#2AA967';`
-//   2. A nested default export matching the legacy primitives.js shape.
-
-const DTCG_TO_LEGACY_KEY = {
-	color: 'colors',
-	'font-family': 'fonts',
-	'font-weight': 'fontWeights',
-	'font-size': 'fontSizes',
-	'semantic-font-size': 'semanticFontSizes',
-	'line-height': 'lineHeights',
-	'line-height-absolute': 'lineHeightsAbsolute',
-	'letter-spacing': 'letterSpacings',
-	'border-width': 'borderWidths',
-	breakpoint: 'breakpoints',
-	radius: 'radii',
-	'z-index': 'zIndices',
-	space: 'space',
-	opacity: 'opacity',
-	theme: 'theme',
-};
-
-const restoreKey = (key) => {
-	if (/^n\d+_\d+$/.test(key)) return `-${key.slice(1).replace('_', '.')}`;
-	if (/^n\d+$/.test(key)) return `-${key.slice(1)}`;
-	if (/^\d+_\d+$/.test(key)) return key.replace('_', '.');
-	return key;
-};
-
-// camelCase that preserves underscores as digit separators so `space.1_5`
-// and `space.15` don't collide. Dashes split into word boundaries.
-const camelCase = (parts) => parts
-	.flatMap((p) => String(p).split('-').filter(Boolean))
-	.map((w, i) => {
-		const lower = w.toLowerCase();
-		if (i === 0) return lower;
-		return lower.charAt(0).toUpperCase() + lower.slice(1);
-	})
-	.join('');
-
-const isLeaf = (node) => node && typeof node === 'object' && '$value' in node;
-
-const buildNested = (tokens) => {
-	const out = {};
-	const walk = (node, path) => {
-		if (isLeaf(node)) {
-			const legacyPath = path.map((seg, i) => (i === 0 ? (DTCG_TO_LEGACY_KEY[seg] || seg) : restoreKey(seg)));
-			const finalPath = legacyPath[0] === 'theme' ? ['colors', ...legacyPath] : legacyPath;
-			let cursor = out;
-			for (let i = 0; i < finalPath.length - 1; i += 1) {
-				cursor[finalPath[i]] = cursor[finalPath[i]] ?? {};
-				cursor = cursor[finalPath[i]];
-			}
-			cursor[finalPath[finalPath.length - 1]] = node.$value;
-			return;
-		}
-		if (node && typeof node === 'object') {
-			Object.keys(node).forEach((k) => walk(node[k], [...path, k]));
-		}
-	};
-	walk(tokens, []);
-	out.colors = out.colors ?? {};
-	out.shadows = out.shadows ?? {};
-	return out;
-};
-
-const jsTokensFormat = {
-	name: 'kiva/js-tokens',
-	format: ({ dictionary }) => {
-		const flatLines = dictionary.allTokens.map((t) => {
-			const name = camelCase(t.path);
-			const v = t.$value;
-			const value = typeof v === 'number' ? v : JSON.stringify(v);
-			return `export const ${name} = ${value};`;
-		});
-		const nested = buildNested(dictionary.tokens);
-		return [
-			'// Do not edit directly. Generated by Style Dictionary.',
-			'',
-			...flatLines,
-			'',
-			`const tokens = ${JSON.stringify(nested, null, '\t')};`,
-			'',
-			'export default tokens;',
-			'',
-		].join('\n');
-	},
-};
-
-export default jsTokensFormat;

package/build/style-dictionary.config.js

@@ -1,45 +0,0 @@
-import StyleDictionary from 'style-dictionary';
-import jsTokensFormat from './formats/js-tokens.js';
-import cssThemesFormat from './formats/css-themes.js';
-import dimensionToNumberTransform from './transforms/dimension-to-number.js';
-
-StyleDictionary.registerFormat(jsTokensFormat);
-StyleDictionary.registerFormat(cssThemesFormat);
-StyleDictionary.registerTransform(dimensionToNumberTransform);
-
-export default {
-	source: ['tokens/**/*.json'],
-	platforms: {
-		js: {
-			transforms: ['attribute/cti', 'name/kebab', 'kiva/dimension-to-number'],
-			buildPath: 'dist/js/',
-			files: [
-				{
-					destination: 'tokens.js',
-					format: 'kiva/js-tokens',
-				},
-			],
-		},
-		css: {
-			transforms: ['attribute/cti', 'name/kebab'],
-			buildPath: 'dist/css/',
-			files: [
-				{
-					destination: 'tokens.css',
-					format: 'kiva/css-themes',
-				},
-			],
-		},
-		scss: {
-			transforms: ['attribute/cti', 'name/kebab', 'kiva/dimension-to-number'],
-			buildPath: 'dist/scss/',
-			files: [
-				{
-					destination: 'tokens.scss',
-					format: 'scss/variables',
-					options: { outputReferences: false },
-				},
-			],
-		},
-	},
-};

package/build/transforms/dimension-to-number.js

@@ -1,17 +0,0 @@
-// Transform: dimension objects -> raw numeric value.
-// DTCG encodes dimensions as { value: 16, unit: 'px' }; legacy primitives.js
-// stored them as raw numbers. Strip the unit for JS output.
-
-const dimensionToNumberTransform = {
-	name: 'kiva/dimension-to-number',
-	type: 'value',
-	transitive: true,
-	filter: (token) => token.$type === 'dimension' || token.type === 'dimension',
-	transform: (token) => {
-		const v = token.$value ?? token.value;
-		if (v && typeof v === 'object' && 'value' in v) return v.value;
-		return v;
-	},
-};
-
-export default dimensionToNumberTransform;