@tide-tds/foundation 0.1.0 → 0.2.0

package/dist/contrast.js

@@ -1,3 +1,5 @@
+import { semanticHex } from "./semantic.js";
+
 // src/contrast.ts
 const surfaces = [
 	"bg-canvas",
@@ -66,6 +68,43 @@ const contrastExclusions = [
 		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);
@@ -87,4 +126,4 @@ function contrastRatio(foreground, background) {
 	return (Math.max(a, b) + .05) / (Math.min(a, b) + .05);
 }
 
-export { contrastExclusions, contrastPairs, contrastRatio };
+export { checkColorContrast, colorContrastRules, contrastExclusions, contrastPairs, contrastRatio };

package/dist/index.d.ts

@@ -1,8 +1,9 @@
 import { ColorFamily, ColorStep, PrimitiveColorName, color } from "./color.js";
-import { AlphaColor, Role, SemanticColorName, SemanticColorValue, SemanticNamespace, ThemeName, ThemedColor, semantic, semanticPrefix } from "./semantic.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 ColorFamily, type ColorStep, type ContrastExclusion, type ContrastPair, type DurationName, type EasingName, type FontFamilyName, type FontSizeStep, type FontWeightName, type PrimitiveColorName, type RadiusName, type Role, type SemanticColorName, type SemanticColorValue, type SemanticNamespace, type ShadowLayer, type ShadowName, type TextStyleName, type TextStyleValue, type ThemeName, type ThemedColor, type ZIndexName, color, contrastPairs, duration, easing, focusRing, fontFamily, fontSize, fontWeight, radius, semantic, semanticPrefix, shadow, textStyle, zIndex };
+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/internal.d.ts

@@ -5,8 +5,11 @@
  * @packageDocumentation
  */
 import { primitiveHex } from "./color.js";
-import { colorValueHex, roleFamily, semanticEntries, semanticHex, shadowColor } from "./semantic.js";
-import { contrastExclusions, contrastRatio } from "./contrast.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 { colorValueHex, contrastExclusions, contrastRatio, fontFamilyCss, primitiveHex, roleFamily, semanticEntries, semanticHex, shadowColor, shadowCss };
+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

@@ -1,7 +1,10 @@
 import { primitiveHex } from "./color.js";
-import { colorValueHex, roleFamily, semanticEntries, semanticHex, shadowColor } from "./semantic.js";
-import { contrastExclusions, contrastRatio } from "./contrast.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 { colorValueHex, contrastExclusions, contrastRatio, fontFamilyCss, primitiveHex, roleFamily, semanticEntries, semanticHex, shadowColor, shadowCss };
+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/semantic.d.ts

@@ -1,4 +1,5 @@
-import { PrimitiveColorName } from "./color.js";
+import { ColorFamily, PrimitiveColorName } from "./color.js";
+import { BackgroundSlot, ColorSlot, familyOverrides, slotRule } from "./color-slot.js";
 /** Theme 이름 */
 export type ThemeName = "light" | "dark";
 /** Primitive에 투명도를 더한 색. overlay와 shadow 색에만 쓰고, CSS에는 8자리 hex로 나간다. */
@@ -16,8 +17,11 @@ export interface ThemedColor {
   readonly light: SemanticColorValue;
   readonly dark: SemanticColorValue;
 }
-/** Role. Component에서는 `color` prop으로 고른다. */
-export type Role = "neutral" | "primary" | "success" | "warning" | "danger" | "info";
+/**
+ * Tide가 정한 Role 6개. 앱이 `RoleRegistry`에 더한 Role은 들어 있지 않다.
+ * Tide 안의 계산(Semantic Token 이름, 대비 쌍)은 이 타입을 쓴다. 앱 Role에는 Role Token이 생기지 않기 때문이다.
+ */
+export type TideRole = "neutral" | "primary" | "success" | "warning" | "danger" | "info";
 /**
  * Role이 참조하는 Primitive 계열.
  * @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
@@ -30,257 +34,154 @@ export declare const roleFamily: {
   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";
+/**
+ * Role별로 계열 규칙에서 덮어쓸 값.
+ * @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+ */
+export declare const roleOverrides: {
+  readonly neutral: {
+    readonly subtle: {
+      readonly dark: 900;
     };
-    readonly "info-subtle-hover": {
-      readonly light: "cyan-100";
-      readonly dark: "cyan-900";
+    readonly "subtle-hover": {
+      readonly dark: 800;
     };
-    readonly "info-subtle-active": {
-      readonly light: "cyan-200";
-      readonly dark: "cyan-800";
+    readonly "subtle-active": {
+      readonly dark: 700;
     };
   };
-  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";
-    };
+};
+/**
+ * 역할 Token 대신 공통 Semantic Token을 쓰는 Role 슬롯. on-solid는 모든 Role이 `text-on-solid`를 쓴다.
+ * @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+ */
+export declare const roleSharedSlots: {
+  readonly neutral: {
+    readonly text: "text-default";
+    readonly border: "border-strong";
   };
-  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";
+};
+/**
+ * Role 목록. Tide Role 6개가 들어 있고, 앱은 module augmentation으로 자기 Role(예: `brand`)을 더한다.
+ * 앱 Role의 색은 `@tide-tds/foundation/color-family`의 `defineColorFamily`와 `tide-color build`로 만든다.
+ *
+ * ```ts
+ * declare module "@tide-tds/components" {
+ *   interface RoleRegistry {
+ *     brand: true;
+ *   }
+ * }
+ * ```
+ */
+export interface RoleRegistry extends Record<TideRole, true> {}
+/**
+ * Role. 뜻이 있는 색이다. 행동·의미 Component의 `color`로 고르고, `data-color` 속성으로 accent 슬롯에 꽂는다.
+ * Tide Role 6개와 앱이 `RoleRegistry`에 더한 Role이다.
+ */
+export type Role = keyof RoleRegistry;
+/**
+ * 색 계열 목록. Tide 색 계열 6개가 들어 있고, 앱은 module augmentation으로 장식용 계열을 더한다.
+ * Tide가 Primitive 계열을 더하면 이 목록도 함께 넓어진다.
+ *
+ * ```ts
+ * declare module "@tide-tds/components" {
+ *   interface ColorFamilyRegistry {
+ *     brand: true;
+ *   }
+ * }
+ * ```
+ */
+export interface ColorFamilyRegistry extends Record<ColorFamily, true> {}
+/**
+ * 색 계열 이름. 뜻이 없는 색이라 장식·분류 Component가 쓴다.
+ * Tide 색 계열(`ColorFamily`)과 앱이 `ColorFamilyRegistry`에 더한 계열이다.
+ */
+export type ColorFamilyName = keyof ColorFamilyRegistry;
+/** 색 이름(Color). `data-color` 속성이 받는 모든 이름이다(Role과 색 계열). */
+export type Color = Role | ColorFamilyName;
+type Lookup<Table, K1, K2, K3, Fallback> = K1 extends keyof Table ? K2 extends keyof Table[K1] ? K3 extends keyof Table[K1][K2] ? Table[K1][K2][K3] : Fallback : Fallback : Fallback;
+type FamilyStep<Family, Slot extends ColorSlot, Theme extends ThemeName> = Lookup<typeof familyOverrides, Family, Slot, Theme, (typeof slotRule)[Slot][Theme]>;
+type RoleStep<Name extends TideRole, Slot extends ColorSlot, Theme extends ThemeName> = Lookup<typeof roleOverrides, Name, Slot, Theme, FamilyStep<(typeof roleFamily)[Name], Slot, Theme>>;
+type StepName<Family extends string, Step> = Step extends number ? `${Family}-${Step}` : Step;
+type RoleSlotColor<Name extends TideRole, Slot extends ColorSlot> = {
+  readonly light: StepName<(typeof roleFamily)[Name], RoleStep<Name, Slot, "light">>;
+  readonly dark: StepName<(typeof roleFamily)[Name], RoleStep<Name, Slot, "dark">>;
+};
+/** 역할 text·border Token이 있는 Role(neutral 제외) */
+type AccentRole = Exclude<TideRole, keyof typeof roleSharedSlots>;
+type RoleBackgroundTokens = { readonly [Key in `${TideRole}-${BackgroundSlot}`]: Key extends `${infer Name extends TideRole}-${infer Slot extends BackgroundSlot}` ? RoleSlotColor<Name, Slot> : never; };
+type RoleSlotTokens<Slot extends "text" | "border"> = { readonly [Name in AccentRole]: RoleSlotColor<Name, Slot>; };
+declare const commonBackground: {
+  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 info: {
-      readonly light: "cyan-600";
-      readonly dark: "cyan-400";
+    readonly dark: {
+      readonly primitive: "gray-950";
+      readonly alpha: 0.7;
     };
   };
-  readonly outline: {
-    readonly focus: {
-      readonly light: "blue-600";
-      readonly dark: "blue-400";
-    };
+};
+declare const commonText: {
+  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";
+  };
+};
+declare const commonBorder: {
+  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";
+  };
+};
+declare const commonOutline: {
+  readonly focus: {
+    readonly light: "blue-600";
+    readonly dark: "blue-400";
+  };
+};
+export declare const semantic: {
+  readonly background: typeof commonBackground & RoleBackgroundTokens;
+  readonly text: typeof commonText & RoleSlotTokens<"text">;
+  readonly border: typeof commonBorder & RoleSlotTokens<"border">;
+  readonly outline: typeof commonOutline;
 };
 /** Semantic namespace와 Utility class 접두사 */
 export type SemanticNamespace = "background" | "text" | "border" | "outline";
@@ -325,4 +226,5 @@ 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;
+export declare function semanticHex(name: SemanticColorName, theme: ThemeName): string;
+export {};