@tide-tds/foundation 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 chane81
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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 Color = typeof color;
+/** 11단계 스케일을 가진 계열 이름. 예: `blue` */
+export type ColorFamily = { [Key in keyof Color]: Color[Key] extends string ? never : Key; }[keyof Color];
+/** 스케일 단계. 50~950의 11단계 */
+export type ColorStep = keyof Color["blue"];
+/** Primitive 이름. 예: `blue-600`, `white` */
+export type PrimitiveColorName = { [Key in keyof Color]: Color[Key] extends string ? Key : never; }[keyof Color] | { [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,25 @@
+import { SemanticColorName } 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;
+}
+export declare const contrastPairs: readonly ContrastPair[];
+/**
+ * 대비 검사에서 뺀 Semantic Token과 이유.
+ * @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+ */
+export declare const contrastExclusions: readonly ContrastExclusion[];
+/**
+ * 두 색의 WCAG 2.x 대비비(1~21). 순서는 상관없다.
+ * 반투명 색(8자리 hex)은 받지 않는다. 대비 검사에서 overlay와 shadow는 제외한다.
+ * @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+ */
+export declare function contrastRatio(foreground: string, background: string): number;

package/dist/contrast.js

@@ -0,0 +1,90 @@
+// 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 뒤를 가리는 반투명 막이다. 위에 글자를 두지 않는다."
+	}
+];
+/** 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 { contrastExclusions, contrastPairs, contrastRatio };

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+import { ColorFamily, ColorStep, PrimitiveColorName, color } from "./color.js";
+import { AlphaColor, Role, SemanticColorName, SemanticColorValue, SemanticNamespace, ThemeName, ThemedColor, 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 };

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,12 @@
+/**
+ * `@tide-tds/foundation/internal`: 문서 앱(Token 블록), 빌드 스크립트, 테스트가 쓰는 내부 도우미.
+ *
+ * @internal 앱 개발자용 공개 계약이 아니다. 문서에 싣지 않고, 예고 없이 바뀌거나 사라질 수 있다.
+ * @packageDocumentation
+ */
+import { primitiveHex } from "./color.js";
+import { colorValueHex, roleFamily, semanticEntries, semanticHex, shadowColor } from "./semantic.js";
+import { 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 };

package/dist/internal.js

@@ -0,0 +1,7 @@
+import { primitiveHex } from "./color.js";
+import { colorValueHex, roleFamily, semanticEntries, semanticHex, shadowColor } from "./semantic.js";
+import { 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 };

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 };