asharyu-design-token 2.0.4 → 2.1.0

package/dist/zIndex/index.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Asharyu Design System - Z-Index Layer Tokens
+ * 층위(層位)의 질서: 인터페이스 요소 간의 겹침과 시각적 우선순위를 정의합니다.
+ */
+export declare const zIndex: Readonly<{
+    /** 기본 바닥면 */
+    base: "0";
+    /** 살짝 들어올려진 요소 (카드 호버, 스크롤바 등) */
+    raised: "1";
+    /** 하단 네비게이션 또는 도킹 바 */
+    docked: "10";
+    /** 상단 고정 헤더, 스티키 컴포넌트 */
+    sticky: "100";
+    /** 드롭다운 메뉴, 셀렉트 옵션 리스트 */
+    dropdown: "200";
+    /** 백드롭 마스크 레이어 */
+    backdrop: "500";
+    /** 모달 다이얼로그 본체 */
+    modal: "600";
+    /** 팝오버, 플로팅 패널 */
+    popover: "700";
+    /** 토스트 알림, 스낵바 */
+    toast: "800";
+    /** 툴팁 (최상위 안내 힌트) */
+    tooltip: "900";
+    /** 절대 최상위 레이어 */
+    max: "9999";
+}>;
+export type ZIndexType = typeof zIndex;
+export default zIndex;

package/package.json

@@ -1,42 +1,61 @@
-{
-  "name": "asharyu-design-token",
-  "version": "2.0.4",
-  "description": "design token",
-  "keywords": [
-    "designtoken"
-  ],
-  "author": "Isa <yunjonglyu@gmail.com> (yunjongryu)",
-  "homepage": "https://github.com/yoonjonglyu/asharyu-design#readme",
-  "license": "Apache-2.0",
-  "type": "module",
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": "./dist/index.js",
-    "./index.css": "./dist/index.css"
-  },
-  "directories": {
-    "dist": "dist"
-  },
-  "files": [
-    "dist"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/yoonjonglyu/asharyu-design.git"
-  },
-  "scripts": {
-    "build": "tsc && esbuild src/index.ts --bundle --format=esm --outdir=dist",
-    "postbuild": "node makeCSS.js"
-  },
-  "bugs": {
-    "url": "https://github.com/yoonjonglyu/asharyu-design/issues"
-  },
-  "dependencies": {
-    "normalize.css": "^8.0.1"
-  },
-  "devDependencies": {
-    "esbuild": "^0.15.3",
-    "typescript": "^4.7.4"
-  }
-}
+{
+  "name": "asharyu-design-token",
+  "version": "2.1.0",
+  "description": "asharyu-design-system token (Yin-Yang, Wu Xing, Spacing, Elevation, Figma DTCG)",
+  "keywords": [
+    "asharyu",
+    "design",
+    "token",
+    "designtoken",
+    "wuxing",
+    "figma",
+    "tokens-studio",
+    "ryuislabs"
+  ],
+  "author": "Isa <yunjonglyu@gmail.com> (yunjongryu)",
+  "homepage": "https://github.com/yoonjonglyu/asharyu-design#readme",
+  "license": "Apache-2.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./index.css": "./dist/index.css",
+    "./tokens.json": "./dist/tokens.json",
+    "./figma-variables.json": "./dist/figma-variables.json",
+    "./SKILL.md": "./SKILL.md"
+  },
+  "directories": {
+    "dist": "dist"
+  },
+  "files": [
+    "dist",
+    "SKILL.md",
+    "README.md",
+    "README.ko.md",
+    "README.zh-TW.md",
+    "README.ja.md"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/yoonjonglyu/asharyu-design.git"
+  },
+  "bugs": {
+    "url": "https://github.com/yoonjonglyu/asharyu-design/issues"
+  },
+  "dependencies": {
+    "normalize.css": "^8.0.1"
+  },
+  "devDependencies": {
+    "esbuild": "^0.15.3",
+    "typescript": "^4.7.4"
+  },
+  "scripts": {
+    "build": "tsc && esbuild src/index.ts --bundle --format=esm --outdir=dist",
+    "postbuild": "node makeCSS.js && node makeFigmaTokens.js",
+    "test": "node --test __tests__/*.test.mjs"
+  }
+}

package/dist/src/color/value.d.ts

@@ -1,21 +0,0 @@
-export interface ColorValueProps {
-    readonly $metal: ValueProps;
-    readonly $water: ValueProps;
-    readonly $fire: ValueProps;
-    readonly $wood: ValueProps;
-    readonly $earth: ValueProps;
-    readonly $geukFireMetal: ValueProps;
-    readonly $geukWaterFire: ValueProps;
-    readonly $geukMetalWood: ValueProps;
-    readonly $geukEarthWater: ValueProps;
-    readonly $geukWoodEarth: ValueProps;
-}
-export interface ValueProps {
-    0: string;
-    1: string;
-    2: string;
-    3: string;
-    4: string;
-}
-export declare const colorValue: Readonly<ColorValueProps>;
-export default colorValue;

package/dist/src/font/index.d.ts

@@ -1,12 +0,0 @@
-export declare const rawFontSizeRem: Record<"$8" | "$10" | "$12" | "$14" | "$16" | "$18" | "$20" | "$22" | "$24" | "$26" | "$28" | "$30" | "$32" | "$34" | "$36" | "$38" | "$40" | "$42" | "$44" | "$46" | "$48" | "$50" | "$52" | "$54" | "$56" | "$58" | "$60" | "$62" | "$64" | "$66" | "$68", string>;
-export interface FontSizeProps {
-    schema: Record<'$h1' | '$h2' | '$h3' | '$h4' | '$h5' | '$h6' | '$subtitle1' | '$subtitle2' | '$subtitle3' | '$body1' | '$body2' | '$body3' | '$button' | '$caption' | '$overline', string>;
-}
-/** Defines semantic font sizes for various UI elements.
- *  Adjustments may be needed based on design samples.
- */
-export declare const fontSize: Readonly<FontSizeProps>;
-/**
- * Semantic font size schema.
- */
-export declare const semanticFontSize: Record<"$h1" | "$h2" | "$h3" | "$h4" | "$h5" | "$h6" | "$subtitle1" | "$subtitle2" | "$subtitle3" | "$body1" | "$body2" | "$body3" | "$button" | "$caption" | "$overline", string>;

package/dist/src/index.d.ts

@@ -1,297 +0,0 @@
-import { colorValue } from './color/colorValue';
-import { semanticValue } from './color/semanticValue';
-import { rawFontSizeRem, semanticFontSize } from './font';
-export { colorValue, semanticValue };
-export { rawFontSizeRem, semanticFontSize };
-declare const AsharyuDesignToken: {
-    color: Readonly<{
-        raw: {
-            yang: {
-                0: string;
-                1: string;
-                2: string;
-                3: string;
-                4: string;
-            };
-            yin: {
-                0: string;
-                1: string;
-                2: string;
-                3: string;
-                4: string;
-            };
-            wood: {
-                0: string;
-                1: string;
-                2: string;
-                3: string;
-                4: string;
-            };
-            fire: {
-                0: string;
-                1: string;
-                2: string;
-                3: string;
-                4: string;
-            };
-            earth: {
-                0: string;
-                1: string;
-                2: string;
-                3: string;
-                4: string;
-            };
-            metal: {
-                0: string;
-                1: string;
-                2: string;
-                3: string;
-                4: string;
-            };
-            water: {
-                0: string;
-                1: string;
-                2: string;
-                3: string;
-                4: string;
-            };
-            hong: {
-                0: string;
-                1: string;
-                2: string;
-                3: string;
-                4: string;
-            };
-            byeok: {
-                0: string;
-                1: string;
-                2: string;
-                3: string;
-                4: string;
-            };
-            nok: {
-                0: string;
-                1: string;
-                2: string;
-                3: string;
-                4: string;
-            };
-            yuhwang: {
-                0: string;
-                1: string;
-                2: string;
-                /**
-                 * 'tokens' 객체는 Asharyu 디자인 토큰의 구조를 그대로 가지지만, 값은 CSS 변수 참조 문자열입니다.
-                 * 예: tokens.color.semantic.yinText -> "var(--asharyu-color-semantic-yin-text)"
-                 */
-                3: string;
-                4: string;
-            };
-            ja: {
-                0: string;
-                1: string;
-                2: string;
-                3: string;
-                4: string;
-            };
-        };
-        semantic: Readonly<import("./color/semanticValue").SemanticValueProps>;
-    }>;
-    font: Readonly<{
-        rawRem: Record<"$8" | "$10" | "$12" | "$14" | "$16" | "$18" | "$20" | "$22" | "$24" | "$26" | "$28" | "$30" | "$32" | "$34" | "$36" | "$38" | "$40" | "$42" | "$44" | "$46" | "$48" | "$50" | "$52" | "$54" | "$56" | "$58" | "$60" | "$62" | "$64" | "$66" | "$68", string>;
-        semantic: Record<"$h1" | "$h2" | "$h3" | "$h4" | "$h5" | "$h6" | "$subtitle1" | "$subtitle2" | "$subtitle3" | "$body1" | "$body2" | "$body3" | "$button" | "$caption" | "$overline", string>;
-    }>;
-    motion: Readonly<{
-        kiUn: {
-            gentle: string;
-            sharp: string;
-            spread: string;
-        };
-        duration: {
-            decisive: string;
-            flow: string;
-            bleed: string;
-        };
-    }>;
-    stroke: Readonly<{
-        weight: {
-            sharp: string;
-            fine: string;
-            medium: string;
-            bold: string;
-            heavy: string;
-        };
-        ink: {
-            pressureLight: string;
-            pressureHeavy: string;
-            bleed: string;
-        };
-        sharp: "var(--asharyu-stroke-weight-fine) solid var(--asharyu-color-semantic-stroke)";
-        rough: "url(#ink-bleed-filter)";
-    }>;
-    interaction: Readonly<{
-        flow: {
-            sangSaeng: string;
-        };
-        feedback: {
-            sangGeukDecisive: string;
-            sangGeukSpread: string;
-        };
-        theme: {
-            bleed: string;
-        };
-    }>;
-};
-/**
- * '검의 예리함'을 담아 키값을 Kebab-case로 변환합니다.
- * $ 접두사 제거 및 Camel/PascalCase를 Kebab-case로 변환
- */
-export declare const normalizeKey: (key: string) => string;
-/**
- * 'tokens' 객체는 Asharyu 디자인 토큰의 구조를 그대로 가지지만, 값은 CSS 변수 참조 문자열입니다.
- * 예: tokens.color.semantic.yinText -> "var(--asharyu-color-semantic-yin-text)"
- */
-export declare const tokens: {
-    color: Readonly<{
-        raw: {
-            yang: {
-                0: string;
-                1: string;
-                2: string;
-                3: string;
-                4: string;
-            };
-            yin: {
-                0: string;
-                1: string;
-                2: string;
-                3: string;
-                4: string;
-            };
-            wood: {
-                0: string;
-                1: string;
-                2: string;
-                3: string;
-                4: string;
-            };
-            fire: {
-                0: string;
-                1: string;
-                2: string;
-                3: string;
-                4: string;
-            };
-            earth: {
-                0: string;
-                1: string;
-                2: string;
-                3: string;
-                4: string;
-            };
-            metal: {
-                0: string;
-                1: string;
-                2: string;
-                3: string;
-                4: string;
-            };
-            water: {
-                0: string;
-                1: string;
-                2: string;
-                3: string;
-                4: string;
-            };
-            hong: {
-                0: string;
-                1: string;
-                2: string;
-                3: string;
-                4: string;
-            };
-            byeok: {
-                0: string;
-                1: string;
-                2: string;
-                3: string;
-                4: string;
-            };
-            nok: {
-                0: string;
-                1: string;
-                2: string;
-                3: string;
-                4: string;
-            };
-            yuhwang: {
-                0: string;
-                1: string;
-                2: string;
-                /**
-                 * 'tokens' 객체는 Asharyu 디자인 토큰의 구조를 그대로 가지지만, 값은 CSS 변수 참조 문자열입니다.
-                 * 예: tokens.color.semantic.yinText -> "var(--asharyu-color-semantic-yin-text)"
-                 */
-                3: string;
-                4: string;
-            };
-            ja: {
-                0: string;
-                1: string;
-                2: string;
-                3: string;
-                4: string;
-            };
-        };
-        semantic: Readonly<import("./color/semanticValue").SemanticValueProps>;
-    }>;
-    font: Readonly<{
-        rawRem: Record<"$8" | "$10" | "$12" | "$14" | "$16" | "$18" | "$20" | "$22" | "$24" | "$26" | "$28" | "$30" | "$32" | "$34" | "$36" | "$38" | "$40" | "$42" | "$44" | "$46" | "$48" | "$50" | "$52" | "$54" | "$56" | "$58" | "$60" | "$62" | "$64" | "$66" | "$68", string>;
-        semantic: Record<"$h1" | "$h2" | "$h3" | "$h4" | "$h5" | "$h6" | "$subtitle1" | "$subtitle2" | "$subtitle3" | "$body1" | "$body2" | "$body3" | "$button" | "$caption" | "$overline", string>;
-    }>;
-    motion: Readonly<{
-        kiUn: {
-            gentle: string;
-            sharp: string;
-            spread: string;
-        };
-        duration: {
-            decisive: string;
-            flow: string;
-            bleed: string;
-        };
-    }>;
-    stroke: Readonly<{
-        weight: {
-            sharp: string;
-            fine: string;
-            medium: string;
-            bold: string;
-            heavy: string;
-        };
-        ink: {
-            pressureLight: string;
-            pressureHeavy: string;
-            bleed: string;
-        };
-        sharp: "var(--asharyu-stroke-weight-fine) solid var(--asharyu-color-semantic-stroke)";
-        rough: "url(#ink-bleed-filter)";
-    }>;
-    interaction: Readonly<{
-        flow: {
-            sangSaeng: string;
-        };
-        feedback: {
-            sangGeukDecisive: string;
-            sangGeukSpread: string;
-        };
-        theme: {
-            bleed: string;
-        };
-    }>;
-};
-/**
- * 기운생동(氣韻生動)한 스타일 작성을 돕는 Tagged Template Literal입니다.
- */
-export declare const css: (strings: TemplateStringsArray, ...values: any[]) => string;
-export default AsharyuDesignToken;

package/dist/src/prev/value.d.ts

@@ -1,21 +0,0 @@
-export interface ColorValueProps {
-    readonly $metal: ValueProps;
-    readonly $water: ValueProps;
-    readonly $fire: ValueProps;
-    readonly $wood: ValueProps;
-    readonly $earth: ValueProps;
-    readonly $geukFireMetal: ValueProps;
-    readonly $geukWaterFire: ValueProps;
-    readonly $geukMetalWood: ValueProps;
-    readonly $geukEarthWater: ValueProps;
-    readonly $geukWoodEarth: ValueProps;
-}
-export interface ValueProps {
-    0: string;
-    1: string;
-    2: string;
-    3: string;
-    4: string;
-}
-export declare const colorValue: Readonly<ColorValueProps>;
-export default colorValue;