@tide-tds/foundation 0.0.0-stage → 0.2.0

package/dist/color.d.ts

@@ -0,0 +1,95 @@
+export declare const color: {
+  readonly white: "#ffffff";
+  readonly black: "#000000";
+  readonly blue: {
+    readonly 50: "#f0f6fe";
+    readonly 100: "#ddeafc";
+    readonly 200: "#c3dafb";
+    readonly 300: "#9bc3fd";
+    readonly 400: "#65a1f9";
+    readonly 500: "#3183f5";
+    readonly 600: "#006ae2";
+    readonly 700: "#005ac2";
+    readonly 800: "#0049a1";
+    readonly 900: "#093f85";
+    readonly 950: "#0d2850";
+  };
+  readonly gray: {
+    readonly 50: "#f5f5f6";
+    readonly 100: "#e8e8ea";
+    readonly 200: "#d7d8da";
+    readonly 300: "#bec1c4";
+    readonly 400: "#9da1a6";
+    readonly 500: "#82878e";
+    readonly 600: "#6b7179";
+    readonly 700: "#5b6068";
+    readonly 800: "#4a4e54";
+    readonly 900: "#3f4247";
+    readonly 950: "#28292c";
+  };
+  readonly green: {
+    readonly 50: "#f0f7f1";
+    readonly 100: "#deeee0";
+    readonly 200: "#c4e1c9";
+    readonly 300: "#9bd0a5";
+    readonly 400: "#60b775";
+    readonly 500: "#15a14c";
+    readonly 600: "#00873d";
+    readonly 700: "#007433";
+    readonly 800: "#005f28";
+    readonly 900: "#005121";
+    readonly 950: "#073315";
+  };
+  readonly amber: {
+    readonly 50: "#faf4ed";
+    readonly 100: "#f3e7d7";
+    readonly 200: "#ead5b8";
+    readonly 300: "#e0ba85";
+    readonly 400: "#ce9437";
+    readonly 500: "#b47900";
+    readonly 600: "#976500";
+    readonly 700: "#815600";
+    readonly 800: "#6a4600";
+    readonly 900: "#5b3b00";
+    readonly 950: "#3a2400";
+  };
+  readonly red: {
+    readonly 50: "#fff2f0";
+    readonly 100: "#fde1dd";
+    readonly 200: "#fccac4";
+    readonly 300: "#fca79d";
+    readonly 400: "#f47368";
+    readonly 500: "#ea3e39";
+    readonly 600: "#d30016";
+    readonly 700: "#b60011";
+    readonly 800: "#96000c";
+    readonly 900: "#7d0e10";
+    readonly 950: "#4c120f";
+  };
+  readonly cyan: {
+    readonly 50: "#eff7fa";
+    readonly 100: "#dcecf2";
+    readonly 200: "#c0deea";
+    readonly 300: "#93cae0";
+    readonly 400: "#51aed0";
+    readonly 500: "#0094bc";
+    readonly 600: "#007c9e";
+    readonly 700: "#006a87";
+    readonly 800: "#00576f";
+    readonly 900: "#004a5f";
+    readonly 950: "#002f3d";
+  };
+};
+type ColorTable = typeof color;
+/** 11단계 스케일을 가진 계열 이름. 예: `blue` */
+export type ColorFamily = { [Key in keyof ColorTable]: ColorTable[Key] extends string ? never : Key; }[keyof ColorTable];
+/** 스케일 단계. 50~950의 11단계 */
+export type ColorStep = keyof ColorTable["blue"];
+/** Primitive 이름. 예: `blue-600`, `white` */
+export type PrimitiveColorName = { [Key in keyof ColorTable]: ColorTable[Key] extends string ? Key : never; }[keyof ColorTable] | { [Family in ColorFamily]: `${Family}-${ColorStep}`; }[ColorFamily];
+/**
+ * Primitive 이름을 정본 hex로 바꾼다.
+ * @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+ */
+export declare function primitiveHex(name: PrimitiveColorName): string;
+export {};

package/dist/color.js

@@ -0,0 +1,96 @@
+// 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];
+}
+
+export { color, primitiveHex };

package/dist/contrast.d.ts

@@ -0,0 +1,51 @@
+import { ColorSlot } from "./color-slot.js";
+import { SemanticColorName, ThemeName } from "./semantic.js";
+/** 함께 쓰이는 글자(또는 경계)와 배경의 짝. Utility class 이름으로 적는다. */
+export interface ContrastPair {
+  readonly foreground: SemanticColorName;
+  readonly background: SemanticColorName;
+  /** 텍스트는 4.5, UI 경계와 포커스는 3 */
+  readonly minRatio: 4.5 | 3;
+}
+/** 대비 검사에서 빼는 Semantic Token과 그 이유 */
+export interface ContrastExclusion {
+  readonly token: SemanticColorName;
+  readonly reason: string;
+}
+declare const surfaces: readonly ["bg-canvas", "bg-surface", "bg-raised"];
+export declare const contrastPairs: readonly ContrastPair[];
+/**
+ * 대비 검사에서 뺀 Semantic Token과 이유.
+ * @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+ */
+export declare const contrastExclusions: readonly ContrastExclusion[];
+/** 색 이름 하나에서 함께 쓰는 슬롯 짝. 배경은 같은 색의 슬롯이거나 표면 층 Token이다. */
+export interface ColorContrastRule {
+  readonly foreground: ColorSlot;
+  readonly background: ColorSlot | (typeof surfaces)[number];
+  /** 텍스트는 4.5, UI 경계는 3 */
+  readonly minRatio: 4.5 | 3;
+}
+/**
+ * 색 이름 하나의 대비 쌍 규칙.
+ * @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+ */
+export declare const colorContrastRules: readonly ColorContrastRule[];
+/** 대비 쌍 규칙 하나를 Theme 하나에서 검사한 결과 */
+export interface ColorContrastResult extends ColorContrastRule {
+  readonly theme: ThemeName;
+  readonly ratio: number;
+  readonly pass: boolean;
+}
+/**
+ * 색 이름 하나의 슬롯 hex로 대비 쌍 규칙을 light·dark에서 검사한다. 표면 층은 Tide Token 값을 쓴다.
+ * @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+ */
+export declare function checkColorContrast(slotHex: Readonly<Record<ThemeName, Readonly<Record<ColorSlot, string>>>>): ColorContrastResult[];
+/**
+ * 두 색의 WCAG 2.x 대비비(1~21). 순서는 상관없다.
+ * 반투명 색(8자리 hex)은 받지 않는다. 대비 검사에서 overlay와 shadow는 제외한다.
+ * @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+ */
+export declare function contrastRatio(foreground: string, background: string): number;
+export {};

package/dist/contrast.js

@@ -0,0 +1,129 @@
+import { semanticHex } from "./semantic.js";
+
+// 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)
+];
+/**
+* 대비 검사에서 뺀 Semantic Token과 이유.
+* @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+*/
+const contrastExclusions = [
+	{
+		token: "border-default",
+		reason: "장식용 구분선이다. 경계 식별에 쓰지 않는다."
+	},
+	{
+		token: "border-raised",
+		reason: "raised 표면의 장식용 경계다(light 투명, dark gray-800). 표면 구분은 그림자와 배경 밝기가 맡고, 대비 의무가 없다."
+	},
+	{
+		token: "bg-disabled",
+		reason: "비활성 상태는 WCAG 대비 요건 밖이다. Component가 속성과 cursor로도 표현한다."
+	},
+	{
+		token: "text-disabled",
+		reason: "비활성 상태는 WCAG 대비 요건 밖이다. Component가 속성과 cursor로도 표현한다."
+	},
+	{
+		token: "bg-overlay",
+		reason: "modal 뒤를 가리는 반투명 막이다. 위에 글자를 두지 않는다."
+	}
+];
+/**
+* 색 이름 하나의 대비 쌍 규칙.
+* @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);
+}
+
+export { checkColorContrast, colorContrastRules, contrastExclusions, contrastPairs, contrastRatio };

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+import { ColorFamily, ColorStep, PrimitiveColorName, color } from "./color.js";
+import { ColorSlot } from "./color-slot.js";
+import { AlphaColor, Color, ColorFamilyName, ColorFamilyRegistry, Role, RoleRegistry, SemanticColorName, SemanticColorValue, SemanticNamespace, ThemeName, ThemedColor, TideRole, semantic, semanticPrefix } from "./semantic.js";
+import { ContrastExclusion, ContrastPair, contrastPairs } from "./contrast.js";
+import { FontFamilyName, FontSizeStep, FontWeightName, TextStyleName, TextStyleValue, fontFamily, fontSize, fontWeight, textStyle } from "./typography.js";
+import { RadiusName, ShadowLayer, ShadowName, focusRing, radius, shadow } from "./shape.js";
+import { DurationName, EasingName, duration, easing } from "./motion.js";
+import { ZIndexName, zIndex } from "./stacking.js";
+export { type AlphaColor, type Color, type ColorFamily, type ColorFamilyName, type ColorFamilyRegistry, type ColorSlot, type ColorStep, type ContrastExclusion, type ContrastPair, type DurationName, type EasingName, type FontFamilyName, type FontSizeStep, type FontWeightName, type PrimitiveColorName, type RadiusName, type Role, type RoleRegistry, type SemanticColorName, type SemanticColorValue, type SemanticNamespace, type ShadowLayer, type ShadowName, type TextStyleName, type TextStyleValue, type ThemeName, type ThemedColor, type TideRole, type ZIndexName, color, contrastPairs, duration, easing, focusRing, fontFamily, fontSize, fontWeight, radius, semantic, semanticPrefix, shadow, textStyle, zIndex };

package/dist/index.js

@@ -0,0 +1,9 @@
+import { color } from "./color.js";
+import { semantic, semanticPrefix } from "./semantic.js";
+import { contrastPairs } from "./contrast.js";
+import { fontFamily, fontSize, fontWeight, textStyle } from "./typography.js";
+import { focusRing, radius, shadow } from "./shape.js";
+import { duration, easing } from "./motion.js";
+import { zIndex } from "./stacking.js";
+
+export { color, contrastPairs, duration, easing, focusRing, fontFamily, fontSize, fontWeight, radius, semantic, semanticPrefix, shadow, textStyle, zIndex };

package/dist/internal.d.ts

@@ -0,0 +1,15 @@
+/**
+ * `@tide-tds/foundation/internal`: 문서 앱(Token 블록), 빌드 스크립트, 테스트가 쓰는 내부 도우미.
+ *
+ * @internal 앱 개발자용 공개 계약이 아니다. 문서에 싣지 않고, 예고 없이 바뀌거나 사라질 수 있다.
+ * @packageDocumentation
+ */
+import { primitiveHex } from "./color.js";
+import { BackgroundSlot, SlotOverrides, SlotRule, SlotStep, colorSlots, familyOverrides, familySlotSteps, resolveSlotSteps, slotPrimitive, slotRule } from "./color-slot.js";
+import { colorValueHex, roleFamily, roleOverrides, roleSharedSlots, semanticEntries, semanticHex, shadowColor } from "./semantic.js";
+import { TideColor, colorFamilyNames, colorSlotHex, colorSlotValues, isRole, roleNames, roleSlotToken, tideColorNames } from "./color-name.js";
+import { AccentUtility, accentDefaultDeclarations, accentUtilities, accentVar, dataColorRule, familyThemeDeclarations, familyVar, primitiveVar, roleAliasCss, semanticVar, tideFamilyThemeDeclarations } from "./color-css.js";
+import { ColorContrastResult, ColorContrastRule, checkColorContrast, colorContrastRules, contrastExclusions, contrastRatio } from "./contrast.js";
+import { fontFamilyCss } from "./typography.js";
+import { shadowCss } from "./shape.js";
+export { type AccentUtility, type BackgroundSlot, type ColorContrastResult, type ColorContrastRule, type SlotOverrides, type SlotRule, type SlotStep, type TideColor, accentDefaultDeclarations, accentUtilities, accentVar, checkColorContrast, colorContrastRules, colorFamilyNames, colorSlotHex, colorSlotValues, colorSlots, colorValueHex, contrastExclusions, contrastRatio, dataColorRule, familyOverrides, familySlotSteps, familyThemeDeclarations, familyVar, fontFamilyCss, isRole, primitiveHex, primitiveVar, resolveSlotSteps, roleAliasCss, roleFamily, roleNames, roleOverrides, roleSharedSlots, roleSlotToken, semanticEntries, semanticHex, semanticVar, shadowColor, shadowCss, slotPrimitive, slotRule, tideColorNames, tideFamilyThemeDeclarations };

package/dist/internal.js

@@ -0,0 +1,10 @@
+import { primitiveHex } from "./color.js";
+import { colorSlots, familyOverrides, familySlotSteps, resolveSlotSteps, slotPrimitive, slotRule } from "./color-slot.js";
+import { colorValueHex, roleFamily, roleOverrides, roleSharedSlots, semanticEntries, semanticHex, shadowColor } from "./semantic.js";
+import { colorFamilyNames, colorSlotHex, colorSlotValues, isRole, roleNames, roleSlotToken, tideColorNames } from "./color-name.js";
+import { accentDefaultDeclarations, accentUtilities, accentVar, dataColorRule, familyThemeDeclarations, familyVar, primitiveVar, roleAliasCss, semanticVar, tideFamilyThemeDeclarations } from "./color-css.js";
+import { checkColorContrast, colorContrastRules, contrastExclusions, contrastRatio } from "./contrast.js";
+import { fontFamilyCss } from "./typography.js";
+import { shadowCss } from "./shape.js";
+
+export { accentDefaultDeclarations, accentUtilities, accentVar, checkColorContrast, colorContrastRules, colorFamilyNames, colorSlotHex, colorSlotValues, colorSlots, colorValueHex, contrastExclusions, contrastRatio, dataColorRule, familyOverrides, familySlotSteps, familyThemeDeclarations, familyVar, fontFamilyCss, isRole, primitiveHex, primitiveVar, resolveSlotSteps, roleAliasCss, roleFamily, roleNames, roleOverrides, roleSharedSlots, roleSlotToken, semanticEntries, semanticHex, semanticVar, shadowColor, shadowCss, slotPrimitive, slotRule, tideColorNames, tideFamilyThemeDeclarations };

package/dist/motion.d.ts

@@ -0,0 +1,20 @@
+/**
+ * duration 2단계. `duration-<이름>` class와 공개 계약 `--tide-duration-<이름>`이 쓴다.
+ * - fast: hover·press, 색 전환, Switch thumb, 오버레이가 사라질 때. 시간을 적지 않은 transition의 기본값이다.
+ * - normal: 가끔 쓰는 오버레이(Popover, Toast, Dialog류)가 나타날 때
+ */
+export declare const duration: {
+  readonly fast: "150ms";
+  readonly normal: "300ms";
+};
+/** duration 단계 이름 */
+export type DurationName = keyof typeof duration;
+/**
+ * easing. `ease-<이름>` class와 공개 계약 `--tide-ease-<이름>`이 쓴다.
+ * - out: Tide Component 전부. 나타날 때와 사라질 때 모두. 시간을 적지 않은 transition의 기본값이다.
+ */
+export declare const easing: {
+  readonly out: "cubic-bezier(0, 0, 0.2, 1)";
+};
+/** easing 이름 */
+export type EasingName = keyof typeof easing;

package/dist/motion.js

@@ -0,0 +1,17 @@
+// src/motion.ts
+/**
+* duration 2단계. `duration-<이름>` class와 공개 계약 `--tide-duration-<이름>`이 쓴다.
+* - fast: hover·press, 색 전환, Switch thumb, 오버레이가 사라질 때. 시간을 적지 않은 transition의 기본값이다.
+* - normal: 가끔 쓰는 오버레이(Popover, Toast, Dialog류)가 나타날 때
+*/
+const duration = {
+	fast: "150ms",
+	normal: "300ms"
+};
+/**
+* easing. `ease-<이름>` class와 공개 계약 `--tide-ease-<이름>`이 쓴다.
+* - out: Tide Component 전부. 나타날 때와 사라질 때 모두. 시간을 적지 않은 transition의 기본값이다.
+*/
+const easing = { out: "cubic-bezier(0, 0, 0.2, 1)" };
+
+export { duration, easing };