@tide-tds/foundation 0.0.0-stage → 0.1.0

package/dist/semantic.d.ts

@@ -0,0 +1,328 @@
+import { PrimitiveColorName } from "./color.js";
+/** Theme 이름 */
+export type ThemeName = "light" | "dark";
+/** Primitive에 투명도를 더한 색. overlay와 shadow 색에만 쓰고, CSS에는 8자리 hex로 나간다. */
+export interface AlphaColor {
+  readonly primitive: PrimitiveColorName;
+  /** 0~1 */
+  readonly alpha: number;
+}
+/**
+ * Semantic Token 하나가 가리키는 값. `transparent`는 light raised border에만 쓴다(CSS에서도 `transparent` 키워드로 나간다).
+ */
+export type SemanticColorValue = PrimitiveColorName | AlphaColor | "transparent";
+/** Theme별로 가리키는 값 */
+export interface ThemedColor {
+  readonly light: SemanticColorValue;
+  readonly dark: SemanticColorValue;
+}
+/** Role. Component에서는 `color` prop으로 고른다. */
+export type Role = "neutral" | "primary" | "success" | "warning" | "danger" | "info";
+/**
+ * Role이 참조하는 Primitive 계열.
+ * @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+ */
+export declare const roleFamily: {
+  readonly neutral: "gray";
+  readonly primary: "blue";
+  readonly success: "green";
+  readonly warning: "amber";
+  readonly danger: "red";
+  readonly info: "cyan";
+};
+export declare const semantic: {
+  readonly background: {
+    readonly canvas: {
+      readonly light: "white";
+      readonly dark: "gray-950";
+    };
+    readonly surface: {
+      readonly light: "white";
+      readonly dark: "gray-950";
+    };
+    readonly raised: {
+      readonly light: "white";
+      readonly dark: "gray-900";
+    };
+    readonly disabled: {
+      readonly light: "gray-100";
+      readonly dark: "gray-900";
+    };
+    readonly overlay: {
+      readonly light: {
+        readonly primitive: "gray-950";
+        readonly alpha: 0.5;
+      };
+      readonly dark: {
+        readonly primitive: "gray-950";
+        readonly alpha: 0.7;
+      };
+    };
+    readonly "neutral-solid": {
+      readonly light: "gray-600";
+      readonly dark: "gray-600";
+    };
+    readonly "neutral-solid-hover": {
+      readonly light: "gray-700";
+      readonly dark: "gray-700";
+    };
+    readonly "neutral-solid-active": {
+      readonly light: "gray-800";
+      readonly dark: "gray-800";
+    };
+    readonly "neutral-subtle": {
+      readonly light: "gray-50";
+      readonly dark: "gray-900";
+    };
+    readonly "neutral-subtle-hover": {
+      readonly light: "gray-100";
+      readonly dark: "gray-800";
+    };
+    readonly "neutral-subtle-active": {
+      readonly light: "gray-200";
+      readonly dark: "gray-700";
+    };
+    readonly "primary-solid": {
+      readonly light: "blue-600";
+      readonly dark: "blue-600";
+    };
+    readonly "primary-solid-hover": {
+      readonly light: "blue-700";
+      readonly dark: "blue-700";
+    };
+    readonly "primary-solid-active": {
+      readonly light: "blue-800";
+      readonly dark: "blue-800";
+    };
+    readonly "primary-subtle": {
+      readonly light: "blue-50";
+      readonly dark: "blue-950";
+    };
+    readonly "primary-subtle-hover": {
+      readonly light: "blue-100";
+      readonly dark: "blue-900";
+    };
+    readonly "primary-subtle-active": {
+      readonly light: "blue-200";
+      readonly dark: "blue-800";
+    };
+    readonly "success-solid": {
+      readonly light: "green-600";
+      readonly dark: "green-600";
+    };
+    readonly "success-solid-hover": {
+      readonly light: "green-700";
+      readonly dark: "green-700";
+    };
+    readonly "success-solid-active": {
+      readonly light: "green-800";
+      readonly dark: "green-800";
+    };
+    readonly "success-subtle": {
+      readonly light: "green-50";
+      readonly dark: "green-950";
+    };
+    readonly "success-subtle-hover": {
+      readonly light: "green-100";
+      readonly dark: "green-900";
+    };
+    readonly "success-subtle-active": {
+      readonly light: "green-200";
+      readonly dark: "green-800";
+    };
+    readonly "warning-solid": {
+      readonly light: "amber-600";
+      readonly dark: "amber-600";
+    };
+    readonly "warning-solid-hover": {
+      readonly light: "amber-700";
+      readonly dark: "amber-700";
+    };
+    readonly "warning-solid-active": {
+      readonly light: "amber-800";
+      readonly dark: "amber-800";
+    };
+    readonly "warning-subtle": {
+      readonly light: "amber-50";
+      readonly dark: "amber-950";
+    };
+    readonly "warning-subtle-hover": {
+      readonly light: "amber-100";
+      readonly dark: "amber-900";
+    };
+    readonly "warning-subtle-active": {
+      readonly light: "amber-200";
+      readonly dark: "amber-800";
+    };
+    readonly "danger-solid": {
+      readonly light: "red-600";
+      readonly dark: "red-600";
+    };
+    readonly "danger-solid-hover": {
+      readonly light: "red-700";
+      readonly dark: "red-700";
+    };
+    readonly "danger-solid-active": {
+      readonly light: "red-800";
+      readonly dark: "red-800";
+    };
+    readonly "danger-subtle": {
+      readonly light: "red-50";
+      readonly dark: "red-950";
+    };
+    readonly "danger-subtle-hover": {
+      readonly light: "red-100";
+      readonly dark: "red-900";
+    };
+    readonly "danger-subtle-active": {
+      readonly light: "red-200";
+      readonly dark: "red-800";
+    };
+    readonly "info-solid": {
+      readonly light: "cyan-600";
+      readonly dark: "cyan-600";
+    };
+    readonly "info-solid-hover": {
+      readonly light: "cyan-700";
+      readonly dark: "cyan-700";
+    };
+    readonly "info-solid-active": {
+      readonly light: "cyan-800";
+      readonly dark: "cyan-800";
+    };
+    readonly "info-subtle": {
+      readonly light: "cyan-50";
+      readonly dark: "cyan-950";
+    };
+    readonly "info-subtle-hover": {
+      readonly light: "cyan-100";
+      readonly dark: "cyan-900";
+    };
+    readonly "info-subtle-active": {
+      readonly light: "cyan-200";
+      readonly dark: "cyan-800";
+    };
+  };
+  readonly text: {
+    readonly default: {
+      readonly light: "gray-900";
+      readonly dark: "gray-50";
+    };
+    readonly muted: {
+      readonly light: "gray-600";
+      readonly dark: "gray-300";
+    };
+    readonly disabled: {
+      readonly light: "gray-400";
+      readonly dark: "gray-600";
+    };
+    readonly "on-solid": {
+      readonly light: "white";
+      readonly dark: "white";
+    };
+    readonly primary: {
+      readonly light: "blue-800";
+      readonly dark: "blue-200";
+    };
+    readonly success: {
+      readonly light: "green-800";
+      readonly dark: "green-200";
+    };
+    readonly warning: {
+      readonly light: "amber-800";
+      readonly dark: "amber-200";
+    };
+    readonly danger: {
+      readonly light: "red-800";
+      readonly dark: "red-200";
+    };
+    readonly info: {
+      readonly light: "cyan-800";
+      readonly dark: "cyan-200";
+    };
+  };
+  readonly border: {
+    readonly default: {
+      readonly light: "gray-200";
+      readonly dark: "gray-800";
+    };
+    readonly strong: {
+      readonly light: "gray-500";
+      readonly dark: "gray-400";
+    };
+    readonly raised: {
+      readonly light: "transparent";
+      readonly dark: "gray-800";
+    };
+    readonly primary: {
+      readonly light: "blue-600";
+      readonly dark: "blue-400";
+    };
+    readonly success: {
+      readonly light: "green-600";
+      readonly dark: "green-400";
+    };
+    readonly warning: {
+      readonly light: "amber-600";
+      readonly dark: "amber-400";
+    };
+    readonly danger: {
+      readonly light: "red-600";
+      readonly dark: "red-400";
+    };
+    readonly info: {
+      readonly light: "cyan-600";
+      readonly dark: "cyan-400";
+    };
+  };
+  readonly outline: {
+    readonly focus: {
+      readonly light: "blue-600";
+      readonly dark: "blue-400";
+    };
+  };
+};
+/** Semantic namespace와 Utility class 접두사 */
+export type SemanticNamespace = "background" | "text" | "border" | "outline";
+export declare const semanticPrefix: {
+  readonly background: "bg";
+  readonly text: "text";
+  readonly border: "border";
+  readonly outline: "outline";
+};
+/** Semantic Token의 Utility class 이름. 예: `bg-primary-solid`, `text-muted` */
+export type SemanticColorName = { [Namespace in SemanticNamespace]: `${(typeof semanticPrefix)[Namespace]}-${keyof (typeof semantic)[Namespace] & string}`; }[SemanticNamespace];
+/**
+ * Theme별 shadow 색. CSS에서는 `--tide-shadow-color`로 쓴다.
+ * @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+ */
+export declare const shadowColor: {
+  readonly light: {
+    readonly primitive: "gray-950";
+    readonly alpha: 0.08;
+  };
+  readonly dark: {
+    readonly primitive: "black";
+    readonly alpha: 0.3;
+  };
+};
+/**
+ * 모든 Semantic Token(namespace, Utility class 이름, Theme별 값).
+ * @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+ */
+export declare function semanticEntries(): {
+  readonly namespace: SemanticNamespace;
+  readonly key: string;
+  readonly className: SemanticColorName;
+  readonly value: ThemedColor;
+}[];
+/**
+ * 값을 hex로 바꾼다. alpha가 있으면 8자리 hex(`#rrggbbaa`)다. `transparent`는 `#00000000`이다.
+ * @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+ */
+export declare function colorValueHex(value: SemanticColorValue): string;
+/**
+ * Semantic Token이 Theme에서 가리키는 hex.
+ * @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+ */
+export declare function semanticHex(name: SemanticColorName, theme: ThemeName): string;

package/dist/semantic.js

@@ -0,0 +1,318 @@
+import { primitiveHex } from "./color.js";
+
+// src/semantic.ts
+/**
+* Role이 참조하는 Primitive 계열.
+* @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+*/
+const roleFamily = {
+	neutral: "gray",
+	primary: "blue",
+	success: "green",
+	warning: "amber",
+	danger: "red",
+	info: "cyan"
+};
+const semantic = {
+	background: {
+		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
+			}
+		},
+		"neutral-solid": {
+			light: "gray-600",
+			dark: "gray-600"
+		},
+		"neutral-solid-hover": {
+			light: "gray-700",
+			dark: "gray-700"
+		},
+		"neutral-solid-active": {
+			light: "gray-800",
+			dark: "gray-800"
+		},
+		"neutral-subtle": {
+			light: "gray-50",
+			dark: "gray-900"
+		},
+		"neutral-subtle-hover": {
+			light: "gray-100",
+			dark: "gray-800"
+		},
+		"neutral-subtle-active": {
+			light: "gray-200",
+			dark: "gray-700"
+		},
+		"primary-solid": {
+			light: "blue-600",
+			dark: "blue-600"
+		},
+		"primary-solid-hover": {
+			light: "blue-700",
+			dark: "blue-700"
+		},
+		"primary-solid-active": {
+			light: "blue-800",
+			dark: "blue-800"
+		},
+		"primary-subtle": {
+			light: "blue-50",
+			dark: "blue-950"
+		},
+		"primary-subtle-hover": {
+			light: "blue-100",
+			dark: "blue-900"
+		},
+		"primary-subtle-active": {
+			light: "blue-200",
+			dark: "blue-800"
+		},
+		"success-solid": {
+			light: "green-600",
+			dark: "green-600"
+		},
+		"success-solid-hover": {
+			light: "green-700",
+			dark: "green-700"
+		},
+		"success-solid-active": {
+			light: "green-800",
+			dark: "green-800"
+		},
+		"success-subtle": {
+			light: "green-50",
+			dark: "green-950"
+		},
+		"success-subtle-hover": {
+			light: "green-100",
+			dark: "green-900"
+		},
+		"success-subtle-active": {
+			light: "green-200",
+			dark: "green-800"
+		},
+		"warning-solid": {
+			light: "amber-600",
+			dark: "amber-600"
+		},
+		"warning-solid-hover": {
+			light: "amber-700",
+			dark: "amber-700"
+		},
+		"warning-solid-active": {
+			light: "amber-800",
+			dark: "amber-800"
+		},
+		"warning-subtle": {
+			light: "amber-50",
+			dark: "amber-950"
+		},
+		"warning-subtle-hover": {
+			light: "amber-100",
+			dark: "amber-900"
+		},
+		"warning-subtle-active": {
+			light: "amber-200",
+			dark: "amber-800"
+		},
+		"danger-solid": {
+			light: "red-600",
+			dark: "red-600"
+		},
+		"danger-solid-hover": {
+			light: "red-700",
+			dark: "red-700"
+		},
+		"danger-solid-active": {
+			light: "red-800",
+			dark: "red-800"
+		},
+		"danger-subtle": {
+			light: "red-50",
+			dark: "red-950"
+		},
+		"danger-subtle-hover": {
+			light: "red-100",
+			dark: "red-900"
+		},
+		"danger-subtle-active": {
+			light: "red-200",
+			dark: "red-800"
+		},
+		"info-solid": {
+			light: "cyan-600",
+			dark: "cyan-600"
+		},
+		"info-solid-hover": {
+			light: "cyan-700",
+			dark: "cyan-700"
+		},
+		"info-solid-active": {
+			light: "cyan-800",
+			dark: "cyan-800"
+		},
+		"info-subtle": {
+			light: "cyan-50",
+			dark: "cyan-950"
+		},
+		"info-subtle-hover": {
+			light: "cyan-100",
+			dark: "cyan-900"
+		},
+		"info-subtle-active": {
+			light: "cyan-200",
+			dark: "cyan-800"
+		}
+	},
+	text: {
+		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"
+		},
+		primary: {
+			light: "blue-800",
+			dark: "blue-200"
+		},
+		success: {
+			light: "green-800",
+			dark: "green-200"
+		},
+		warning: {
+			light: "amber-800",
+			dark: "amber-200"
+		},
+		danger: {
+			light: "red-800",
+			dark: "red-200"
+		},
+		info: {
+			light: "cyan-800",
+			dark: "cyan-200"
+		}
+	},
+	border: {
+		default: {
+			light: "gray-200",
+			dark: "gray-800"
+		},
+		strong: {
+			light: "gray-500",
+			dark: "gray-400"
+		},
+		raised: {
+			light: "transparent",
+			dark: "gray-800"
+		},
+		primary: {
+			light: "blue-600",
+			dark: "blue-400"
+		},
+		success: {
+			light: "green-600",
+			dark: "green-400"
+		},
+		warning: {
+			light: "amber-600",
+			dark: "amber-400"
+		},
+		danger: {
+			light: "red-600",
+			dark: "red-400"
+		},
+		info: {
+			light: "cyan-600",
+			dark: "cyan-400"
+		}
+	},
+	outline: { focus: {
+		light: "blue-600",
+		dark: "blue-400"
+	} }
+};
+const semanticPrefix = {
+	background: "bg",
+	text: "text",
+	border: "border",
+	outline: "outline"
+};
+/**
+* Theme별 shadow 색. CSS에서는 `--tide-shadow-color`로 쓴다.
+* @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+*/
+const shadowColor = {
+	light: {
+		primitive: "gray-950",
+		alpha: .08
+	},
+	dark: {
+		primitive: "black",
+		alpha: .3
+	}
+};
+/**
+* 모든 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]);
+}
+
+export { colorValueHex, roleFamily, semantic, semanticEntries, semanticHex, semanticPrefix, shadowColor };