@tide-tds/foundation 0.0.0-stage → 0.2.0

package/dist/cli.js

@@ -0,0 +1,699 @@
+#!/usr/bin/env node
+import { resolve } from "node:path";
+import process from "node:process";
+import { pathToFileURL } from "node:url";
+
+// src/color.ts
+const color = {
+	white: "#ffffff",
+	black: "#000000",
+	blue: {
+		50: "#f0f6fe",
+		100: "#ddeafc",
+		200: "#c3dafb",
+		300: "#9bc3fd",
+		400: "#65a1f9",
+		500: "#3183f5",
+		600: "#006ae2",
+		700: "#005ac2",
+		800: "#0049a1",
+		900: "#093f85",
+		950: "#0d2850"
+	},
+	gray: {
+		50: "#f5f5f6",
+		100: "#e8e8ea",
+		200: "#d7d8da",
+		300: "#bec1c4",
+		400: "#9da1a6",
+		500: "#82878e",
+		600: "#6b7179",
+		700: "#5b6068",
+		800: "#4a4e54",
+		900: "#3f4247",
+		950: "#28292c"
+	},
+	green: {
+		50: "#f0f7f1",
+		100: "#deeee0",
+		200: "#c4e1c9",
+		300: "#9bd0a5",
+		400: "#60b775",
+		500: "#15a14c",
+		600: "#00873d",
+		700: "#007433",
+		800: "#005f28",
+		900: "#005121",
+		950: "#073315"
+	},
+	amber: {
+		50: "#faf4ed",
+		100: "#f3e7d7",
+		200: "#ead5b8",
+		300: "#e0ba85",
+		400: "#ce9437",
+		500: "#b47900",
+		600: "#976500",
+		700: "#815600",
+		800: "#6a4600",
+		900: "#5b3b00",
+		950: "#3a2400"
+	},
+	red: {
+		50: "#fff2f0",
+		100: "#fde1dd",
+		200: "#fccac4",
+		300: "#fca79d",
+		400: "#f47368",
+		500: "#ea3e39",
+		600: "#d30016",
+		700: "#b60011",
+		800: "#96000c",
+		900: "#7d0e10",
+		950: "#4c120f"
+	},
+	cyan: {
+		50: "#eff7fa",
+		100: "#dcecf2",
+		200: "#c0deea",
+		300: "#93cae0",
+		400: "#51aed0",
+		500: "#0094bc",
+		600: "#007c9e",
+		700: "#006a87",
+		800: "#00576f",
+		900: "#004a5f",
+		950: "#002f3d"
+	}
+};
+/**
+* Primitive 이름을 정본 hex로 바꾼다.
+* @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+*/
+function primitiveHex(name) {
+	if (name === "white" || name === "black") return color[name];
+	const index = name.lastIndexOf("-");
+	const family = name.slice(0, index);
+	const step = Number(name.slice(index + 1));
+	return color[family][step];
+}
+
+// src/color-slot.ts
+/**
+* 색 계열 변수 묶음의 슬롯. CSS에서는 `--tide-<색 이름>-<슬롯>`과 `--tide-accent-<슬롯>`으로 나간다.
+*/
+const colorSlots = [
+	"solid",
+	"solid-hover",
+	"solid-active",
+	"subtle",
+	"subtle-hover",
+	"subtle-active",
+	"text",
+	"border",
+	"on-solid"
+];
+/**
+* 슬롯 매핑 규칙.
+* @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+*/
+const slotRule = {
+	solid: {
+		light: 600,
+		dark: 600
+	},
+	"solid-hover": {
+		light: 700,
+		dark: 700
+	},
+	"solid-active": {
+		light: 800,
+		dark: 800
+	},
+	subtle: {
+		light: 50,
+		dark: 950
+	},
+	"subtle-hover": {
+		light: 100,
+		dark: 900
+	},
+	"subtle-active": {
+		light: 200,
+		dark: 800
+	},
+	text: {
+		light: 800,
+		dark: 200
+	},
+	border: {
+		light: 600,
+		dark: 400
+	},
+	"on-solid": {
+		light: "white",
+		dark: "white"
+	}
+};
+/**
+* Tide 계열별 덮어쓸 값.
+* @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+*/
+const familyOverrides = {};
+/**
+* 규칙에 덮어쓸 값을 얹은 슬롯별 단계.
+* @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+*/
+function resolveSlotSteps(...overrides) {
+	return Object.fromEntries(colorSlots.map((slot) => {
+		return [slot, overrides.reduce((current, override) => ({
+			...current,
+			...override?.[slot]
+		}), slotRule[slot])];
+	}));
+}
+/**
+* 슬롯 값을 Primitive 이름으로 바꾼다. 예: (`blue`, 600) → `blue-600`, (`blue`, `white`) → `white`
+* @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+*/
+function slotPrimitive(family, step) {
+	return typeof step === "number" ? `${family}-${step}` : step;
+}
+
+// src/semantic.ts
+/**
+* Role이 참조하는 Primitive 계열.
+* @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+*/
+const roleFamily = {
+	neutral: "gray",
+	primary: "blue",
+	success: "green",
+	warning: "amber",
+	danger: "red",
+	info: "cyan"
+};
+/**
+* Role별로 계열 규칙에서 덮어쓸 값.
+* @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+*/
+const roleOverrides = { neutral: {
+	subtle: { dark: 900 },
+	"subtle-hover": { dark: 800 },
+	"subtle-active": { dark: 700 }
+} };
+/**
+* 역할 Token 대신 공통 Semantic Token을 쓰는 Role 슬롯. on-solid는 모든 Role이 `text-on-solid`를 쓴다.
+* @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+*/
+const roleSharedSlots = { neutral: {
+	text: "text-default",
+	border: "border-strong"
+} };
+const roles$1 = Object.keys(roleFamily);
+const backgroundSlots = colorSlots.filter((slot) => slot !== "text" && slot !== "border" && slot !== "on-solid");
+const accentRoles = roles$1.filter((role) => !(role in roleSharedSlots));
+/** Role 슬롯이 가리키는 Primitive. 계열 규칙 → 계열 덮어쓸 값 → Role 덮어쓸 값 순서로 얹는다. */
+function roleSlotColor(role, slot) {
+	const family = roleFamily[role];
+	const steps = resolveSlotSteps(familyOverrides[family], roleOverrides[role])[slot];
+	return {
+		light: slotPrimitive(family, steps.light),
+		dark: slotPrimitive(family, steps.dark)
+	};
+}
+const commonBackground = {
+	canvas: {
+		light: "white",
+		dark: "gray-950"
+	},
+	surface: {
+		light: "white",
+		dark: "gray-950"
+	},
+	raised: {
+		light: "white",
+		dark: "gray-900"
+	},
+	disabled: {
+		light: "gray-100",
+		dark: "gray-900"
+	},
+	overlay: {
+		light: {
+			primitive: "gray-950",
+			alpha: .5
+		},
+		dark: {
+			primitive: "gray-950",
+			alpha: .7
+		}
+	}
+};
+const commonText = {
+	default: {
+		light: "gray-900",
+		dark: "gray-50"
+	},
+	muted: {
+		light: "gray-600",
+		dark: "gray-300"
+	},
+	disabled: {
+		light: "gray-400",
+		dark: "gray-600"
+	},
+	"on-solid": {
+		light: "white",
+		dark: "white"
+	}
+};
+const commonBorder = {
+	default: {
+		light: "gray-200",
+		dark: "gray-800"
+	},
+	strong: {
+		light: "gray-500",
+		dark: "gray-400"
+	},
+	raised: {
+		light: "transparent",
+		dark: "gray-800"
+	}
+};
+const commonOutline = { focus: {
+	light: "blue-600",
+	dark: "blue-400"
+} };
+const semantic = {
+	background: {
+		...commonBackground,
+		...Object.fromEntries(roles$1.flatMap((role) => backgroundSlots.map((slot) => [`${role}-${slot}`, roleSlotColor(role, slot)])))
+	},
+	text: {
+		...commonText,
+		...Object.fromEntries(accentRoles.map((role) => [role, roleSlotColor(role, "text")]))
+	},
+	border: {
+		...commonBorder,
+		...Object.fromEntries(accentRoles.map((role) => [role, roleSlotColor(role, "border")]))
+	},
+	outline: commonOutline
+};
+const semanticPrefix = {
+	background: "bg",
+	text: "text",
+	border: "border",
+	outline: "outline"
+};
+/**
+* 모든 Semantic Token(namespace, Utility class 이름, Theme별 값).
+* @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+*/
+function semanticEntries() {
+	return Object.keys(semantic).flatMap((namespace) => Object.entries(semantic[namespace]).map(([key, value]) => ({
+		namespace,
+		key,
+		className: `${semanticPrefix[namespace]}-${key}`,
+		value
+	})));
+}
+/**
+* 값을 hex로 바꾼다. alpha가 있으면 8자리 hex(`#rrggbbaa`)다. `transparent`는 `#00000000`이다.
+* @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+*/
+function colorValueHex(value) {
+	if (value === "transparent") return "#00000000";
+	if (typeof value === "string") return primitiveHex(value);
+	const alpha = Math.round(value.alpha * 255).toString(16).padStart(2, "0");
+	return `${primitiveHex(value.primitive)}${alpha}`;
+}
+/**
+* Semantic Token이 Theme에서 가리키는 hex.
+* @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+*/
+function semanticHex(name, theme) {
+	const entry = semanticEntries().find((candidate) => candidate.className === name);
+	if (!entry) throw new Error(`Semantic Token이 아니다: ${name}`);
+	return colorValueHex(entry.value[theme]);
+}
+
+// src/color-name.ts
+/**
+* Role 이름 목록(neutral, primary, success, warning, danger, info 순서).
+* @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+*/
+const roleNames = Object.keys(roleFamily);
+/**
+* Tide 색 계열 목록(`color`의 11단계 계열 순서).
+* @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+*/
+const colorFamilyNames = Object.keys(color).filter((name) => typeof color[name] !== "string");
+/**
+* Tide 색 이름 목록. Role 다음에 색 계열이 온다.
+* @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+*/
+const tideColorNames = [...roleNames, ...colorFamilyNames];
+/**
+* Tide Role인지 확인한다. 앱 Role은 Role Token이 없어서 false다.
+* @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+*/
+function isRole(name) {
+	return Object.hasOwn(roleFamily, name);
+}
+/**
+* Role 슬롯이 가리키는 Semantic Token. 예: (`primary`, `solid`) → `bg-primary-solid`, (`neutral`, `text`) → `text-default`
+* @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+*/
+function roleSlotToken(role, slot) {
+	if (slot === "on-solid") return "text-on-solid";
+	if (slot === "text" || slot === "border") return roleSharedSlots[role]?.[slot] ?? `${slot}-${role}`;
+	return `bg-${role}-${slot}`;
+}
+
+// src/color-css.ts
+/** Primitive 변수 이름. 예: `--tide-color-blue-600` */
+function primitiveVar(name) {
+	return `--tide-color-${name}`;
+}
+/** 계열 변수 이름. 예: `--tide-blue-solid` */
+function familyVar(family, slot) {
+	return `--tide-${family}-${slot}`;
+}
+/** accent 슬롯 변수 이름. 예: `--tide-accent-solid` */
+function accentVar(slot) {
+	return `--tide-accent-${slot}`;
+}
+/** Semantic Token 변수 이름. 예: `--tide-bg-primary-solid` */
+function semanticVar(className) {
+	return `--tide-${className}`;
+}
+/** 슬롯 값의 CSS 표현. 계열 단계는 Primitive 변수를, white·black은 Tide Primitive 변수를 가리킨다. */
+function slotCss(family, step) {
+	return `var(${primitiveVar(slotPrimitive(family, step))})`;
+}
+/**
+* 계열 하나의 Theme 블록 선언(9줄).
+* @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+*/
+function familyThemeDeclarations(family, steps, theme) {
+	return colorSlots.map((slot) => `  ${familyVar(family, slot)}: ${slotCss(family, steps[slot][theme])};`);
+}
+/** accent 슬롯에 변수를 꽂는 선언 */
+function accentDeclarations(source) {
+	return colorSlots.map((slot) => `  ${accentVar(slot)}: var(${source(slot)});`);
+}
+/**
+* `[data-color="<색 이름>"]` 규칙 하나. Role은 Role Token을, 계열은 계열 변수를 꽂는다.
+* @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+*/
+function dataColorRule(name) {
+	const source = isRole(name) ? (slot) => semanticVar(roleSlotToken(name, slot)) : (slot) => familyVar(name, slot);
+	return [
+		`[data-color="${name}"] {`,
+		...accentDeclarations(source),
+		"}"
+	].join("\n");
+}
+const roleAliases = new Map(roleNames.flatMap((role) => colorSlots.map((slot) => [roleSlotToken(role, slot), slot]).filter(([token]) => token.includes(`-${role}`)).map(([token, slot]) => [token, {
+	family: roleFamily[role],
+	slot
+}])));
+/**
+* accent Utility class 목록. 예: `bg-accent-solid` → `--tide-accent-solid`, `text-accent` → `--tide-accent-text`
+* @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+*/
+const accentUtilities = [
+	...colorSlots.filter((slot) => slot !== "text" && slot !== "border" && slot !== "on-solid").map((slot) => ({
+		namespace: "background",
+		key: `accent-${slot}`,
+		slot
+	})),
+	{
+		namespace: "text",
+		key: "accent",
+		slot: "text"
+	},
+	{
+		namespace: "text",
+		key: "accent-on-solid",
+		slot: "on-solid"
+	},
+	{
+		namespace: "border",
+		key: "accent",
+		slot: "border"
+	}
+];
+
+// src/contrast.ts
+const surfaces = [
+	"bg-canvas",
+	"bg-surface",
+	"bg-raised"
+];
+const roles = [
+	"primary",
+	"success",
+	"warning",
+	"danger",
+	"info"
+];
+const allRoles = ["neutral", ...roles];
+const subtleStates = [
+	"subtle",
+	"subtle-hover",
+	"subtle-active"
+];
+const solidStates = [
+	"solid",
+	"solid-hover",
+	"solid-active"
+];
+function pairs(foregrounds, backgrounds, minRatio) {
+	return foregrounds.flatMap((foreground) => backgrounds.map((background) => ({
+		foreground,
+		background,
+		minRatio
+	})));
+}
+const contrastPairs = [
+	...pairs(["text-default", "text-muted"], surfaces, 4.5),
+	...pairs(["text-default"], subtleStates.map((state) => `bg-neutral-${state}`), 4.5),
+	...roles.flatMap((role) => pairs([`text-${role}`], [...surfaces, ...subtleStates.map((state) => `bg-${role}-${state}`)], 4.5)),
+	...pairs(["text-on-solid"], allRoles.flatMap((role) => solidStates.map((state) => `bg-${role}-${state}`)), 4.5),
+	...pairs([
+		"border-strong",
+		...roles.map((role) => `border-${role}`),
+		"outline-focus"
+	], surfaces, 3)
+];
+/**
+* 색 이름 하나의 대비 쌍 규칙.
+* @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+*/
+const colorContrastRules = [
+	...[...surfaces, ...subtleStates].map((background) => ({
+		foreground: "text",
+		background,
+		minRatio: 4.5
+	})),
+	...solidStates.map((background) => ({
+		foreground: "on-solid",
+		background,
+		minRatio: 4.5
+	})),
+	...surfaces.map((background) => ({
+		foreground: "border",
+		background,
+		minRatio: 3
+	}))
+];
+/**
+* 색 이름 하나의 슬롯 hex로 대비 쌍 규칙을 light·dark에서 검사한다. 표면 층은 Tide Token 값을 쓴다.
+* @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+*/
+function checkColorContrast(slotHex) {
+	return ["light", "dark"].flatMap((theme) => colorContrastRules.map((rule) => {
+		const background = rule.background.startsWith("bg-") ? semanticHex(rule.background, theme) : slotHex[theme][rule.background];
+		const ratio = contrastRatio(slotHex[theme][rule.foreground], background);
+		return {
+			...rule,
+			theme,
+			ratio,
+			pass: ratio >= rule.minRatio
+		};
+	}));
+}
+/** WCAG 2.x 상대 휘도. `#rrggbb`만 받는다. */
+function relativeLuminance(hex) {
+	const match = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(hex);
+	if (!match) throw new Error(`불투명한 6자리 hex가 아니다: ${hex}`);
+	const [r, g, b] = match.slice(1).map((channel) => {
+		const value = Number.parseInt(channel, 16) / 255;
+		return value <= .04045 ? value / 12.92 : ((value + .055) / 1.055) ** 2.4;
+	});
+	return .2126 * r + .7152 * g + .0722 * b;
+}
+/**
+* 두 색의 WCAG 2.x 대비비(1~21). 순서는 상관없다.
+* 반투명 색(8자리 hex)은 받지 않는다. 대비 검사에서 overlay와 shadow는 제외한다.
+* @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+*/
+function contrastRatio(foreground, background) {
+	const a = relativeLuminance(foreground);
+	const b = relativeLuminance(background);
+	return (Math.max(a, b) + .05) / (Math.min(a, b) + .05);
+}
+
+// src/color-family.ts
+/**
+* `@tide-tds/foundation/color-family`: 앱이 자기 브랜드 색 계열을 더하는 API.
+*
+* 앱은 `defineColorFamily`로 11단계 스케일을 정의하고, `tide-color build <파일>`로 CSS를 만든다.
+* CSS는 Tide 계열과 같은 매핑 규칙으로 light·dark 계열 변수와 `[data-color="<이름>"]` 규칙을 담는다.
+* @packageDocumentation
+*/
+const steps = Object.keys(color.blue).map(Number);
+const reservedNames = /* @__PURE__ */ new Set([
+	...tideColorNames,
+	"accent",
+	"white",
+	"black",
+	"color",
+	"bg",
+	"text",
+	"border",
+	"outline",
+	"font",
+	"rounded",
+	"shadow",
+	"duration",
+	"ease",
+	"z",
+	"focus"
+]);
+function isSlotStep(value) {
+	return value === "white" || value === "black" || steps.includes(value);
+}
+/**
+* 앱 브랜드 색 계열을 정의한다. 이름, 스케일, 덮어쓸 값이 올바른지 확인하고 그대로 돌려준다.
+*
+* ```ts
+* // brand.ts
+* import { defineColorFamily } from "@tide-tds/foundation/color-family";
+*
+* export default defineColorFamily({
+*   name: "brand",
+*   scale: { 50: "#f5f3ff", 100: "#ede9fe", ... 950: "#2e1065" },
+* });
+* ```
+*
+* @throws 이름이 Tide 색 이름과 겹치거나, 스케일 단계가 빠졌거나, hex가 `#rrggbb`가 아니면
+*/
+function defineColorFamily(input) {
+	const { name, scale, overrides = {} } = input;
+	if (!/^[a-z][a-z0-9]*(-[a-z0-9]+)*$/.test(name)) throw new Error(`색 이름은 소문자로 시작하는 kebab-case여야 한다: "${name}"`);
+	if (reservedNames.has(name)) throw new Error(`"${name}"은 Tide가 쓰는 이름이라 앱 색 계열 이름으로 쓸 수 없다.`);
+	for (const step of steps) {
+		const hex = scale[step];
+		if (typeof hex !== "string" || !/^#[0-9a-f]{6}$/i.test(hex)) throw new Error(`${name}-${step}: #rrggbb hex가 아니다(${String(hex)})`);
+	}
+	const extraSteps = Object.keys(scale).filter((step) => !steps.includes(Number(step)));
+	if (extraSteps.length > 0) throw new Error(`${name}: 스케일에 없는 단계가 있다(${extraSteps.join(", ")})`);
+	for (const [slot, rule] of Object.entries(overrides)) {
+		if (!colorSlots.includes(slot)) throw new Error(`${name}: 없는 슬롯을 덮어썼다(${slot})`);
+		for (const [theme, step] of Object.entries(rule ?? {})) if (theme !== "light" && theme !== "dark" || !isSlotStep(step)) throw new Error(`${name}: ${slot}.${theme} 값이 단계(50~950, white, black)가 아니다`);
+	}
+	return {
+		name,
+		scale: Object.fromEntries(steps.map((step) => [step, scale[step].toLowerCase()])),
+		overrides
+	};
+}
+/** 앱 계열의 슬롯별 단계(규칙 + 덮어쓸 값) */
+function slotSteps(family) {
+	return resolveSlotSteps(family.overrides);
+}
+/** 앱 계열의 Theme별 슬롯 hex */
+function colorFamilySlotHex(family) {
+	const resolved = slotSteps(family);
+	const hex = (step) => typeof step === "number" ? family.scale[step] : color[step];
+	return {
+		light: Object.fromEntries(colorSlots.map((slot) => [slot, hex(resolved[slot].light)])),
+		dark: Object.fromEntries(colorSlots.map((slot) => [slot, hex(resolved[slot].dark)]))
+	};
+}
+/** 앱 계열을 Tide와 같은 대비 쌍 규칙으로 light·dark에서 검사한다. 미달이면 `pass`가 false다. */
+function checkColorFamily(family) {
+	return checkColorContrast(colorFamilySlotHex(family));
+}
+/**
+* 앱 계열의 CSS. Primitive 변수, light·dark 계열 변수, `[data-color]` 규칙을 담는다.
+* Tide CSS(`@tide-tds/components/styles.css` 또는 foundation CSS) 다음에 불러온다.
+*/
+function colorFamilyCss(families) {
+	const themeBlock = (theme) => families.flatMap((family) => familyThemeDeclarations(family.name, slotSteps(family), theme));
+	return [
+		":root {",
+		...families.flatMap((family) => steps.map((step) => `  ${primitiveVar(slotPrimitive(family.name, step))}: ${family.scale[step]};`)),
+		"}",
+		"",
+		":root,\n[data-theme=\"light\"] {",
+		...themeBlock("light"),
+		"}",
+		"",
+		"[data-theme=\"dark\"] {",
+		...themeBlock("dark"),
+		"}",
+		"",
+		...families.flatMap((family) => [dataColorRule(family.name), ""])
+	].join("\n");
+}
+
+// src/cli.ts
+const usage = "사용법: tide-color build <색 계열 파일(.ts, .js)> > <출력 CSS>";
+async function loadFamilies(file) {
+	const exported = (await import(pathToFileURL(resolve(file)).href)).default;
+	if (exported === void 0) throw new Error(`${file}에 default export가 없다. defineColorFamily 결과를 default로 내보낸다.`);
+	const families = (Array.isArray(exported) ? exported : [exported]).map((family) => defineColorFamily(family));
+	const names = families.map((family) => family.name);
+	const duplicated = names.filter((name, index) => names.indexOf(name) !== index);
+	if (duplicated.length > 0) throw new Error(`같은 색 이름이 두 번 나온다: ${duplicated.join(", ")}`);
+	return families;
+}
+async function build(file) {
+	const families = await loadFamilies(file);
+	let failed = 0;
+	for (const family of families) {
+		const results = checkColorFamily(family);
+		const failures = results.filter((result) => !result.pass);
+		failed += failures.length;
+		for (const failure of failures) process.stderr.write(`대비 미달 ${family.name} ${failure.theme}: ${failure.foreground} / ${failure.background} ${failure.ratio.toFixed(2)}:1 < ${failure.minRatio}:1\n`);
+		process.stderr.write(`${family.name}: 대비 쌍 ${results.length}개 중 ${results.length - failures.length}개 통과\n`);
+	}
+	if (failed > 0) {
+		process.stderr.write("대비 기준에 못 미쳐 CSS를 만들지 않았다. 스케일을 고치거나 overrides로 슬롯 단계를 바꾼다.\n");
+		return 1;
+	}
+	const header = `/* tide-color가 ${file}에서 만들었다. 직접 고치지 않는다. Tide CSS 다음에 불러온다. */\n`;
+	process.stdout.write(header + colorFamilyCss(families));
+	return 0;
+}
+async function main(args) {
+	const [command, file, ...rest] = args;
+	if (command !== "build" || !file || rest.length > 0) {
+		process.stderr.write(`${usage}\n`);
+		return 2;
+	}
+	try {
+		return await build(file);
+	} catch (error) {
+		process.stderr.write(`tide-color: ${error instanceof Error ? error.message : String(error)}\n`);
+		return 1;
+	}
+}
+process.exitCode = await main(process.argv.slice(2));
+
+export {  };