asharyu-design-token 1.0.4 → 2.0.4

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

@@ -0,0 +1,39 @@
+/**
+ * Asharyu Design System - Semantic Color Tokens
+ * 음양의 반전과 오행의 기운을 담은 테마별 시맨틱 정의입니다.
+ */
+interface ThemeTokens {
+    /** 5단계 색상 계층 구조 */
+    readonly scale: {
+        readonly subtle: string;
+        readonly soft: string;
+        readonly primary: string;
+        readonly deep: string;
+        readonly sharp: string;
+    };
+    readonly background: string;
+    readonly text: string;
+    readonly stroke: string;
+    readonly action: ThemeTokens['scale'];
+    readonly danger: ThemeTokens['scale'];
+    readonly surface: ThemeTokens['scale'];
+    readonly border: ThemeTokens['scale'];
+    readonly info: ThemeTokens['scale'];
+    readonly status: {
+        readonly success: ThemeTokens['scale'];
+        readonly alertHover: ThemeTokens['scale'];
+        readonly actionFocus: ThemeTokens['scale'];
+        readonly subSurface: ThemeTokens['scale'];
+        readonly infoActive: ThemeTokens['scale'];
+    };
+    readonly bleed: {
+        readonly primary: string;
+        readonly soft: string;
+    };
+}
+export interface SemanticValueProps {
+    readonly light: ThemeTokens;
+    readonly dark: ThemeTokens;
+}
+export declare const semanticValue: Readonly<SemanticValueProps>;
+export default semanticValue;

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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,12 @@
+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/{font → src/font}/value.d.ts

@@ -1,14 +1,8 @@
 /**
  * @description 16px 기준으로 자주 쓰이는 px을 모두 rem 단위로 계산한 사이즈. 반응형 대응시 용이함
  * @todo calc
- *
  */
-declare type MakeSizeSet<T extends number[]> = `$${T[number]}`;
 export interface FontSizeValueProps {
-    $basic: '16px';
-    $1x: '1rem';
-    $2x: '2rem';
-    $3x: '3rem';
     $rem: Record<MakeSizeSet<[
         8,
         10,
@@ -44,4 +38,5 @@ export interface FontSizeValueProps {
     ]>, string>;
 }
 export declare const fontSizeValue: Readonly<FontSizeValueProps>;
+type MakeSizeSet<T extends number[]> = `$${T[number]}`;
 export {};

package/dist/src/index.d.ts

@@ -0,0 +1,297 @@
+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/interaction/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 수묵의 기운과 음양오행의 철학을 투영한 인터랙션 토큰
+ */
+export declare const interaction: Readonly<{
+    flow: {
+        sangSaeng: string;
+    };
+    feedback: {
+        sangGeukDecisive: string;
+        sangGeukSpread: string;
+    };
+    theme: {
+        bleed: string;
+    };
+}>;

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

@@ -0,0 +1,16 @@
+/**
+ * Asharyu Design System - Motion Tokens
+ * 기운생동(氣韻生動)의 원리를 담은 베지어 곡선과 시간 정의입니다.
+ */
+export declare const motion: Readonly<{
+    kiUn: {
+        gentle: string;
+        sharp: string;
+        spread: string;
+    };
+    duration: {
+        decisive: string;
+        flow: string;
+        bleed: string;
+    };
+}>;

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

@@ -0,0 +1,21 @@
+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/stroke/index.d.ts

@@ -0,0 +1,20 @@
+/**
+ * 수묵의 필치와 필압을 조절하는 스트로크 토큰
+ */
+export declare const 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)";
+}>;
+export type StrokeType = typeof stroke;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "asharyu-design-token",
-  "version": "1.0.4",
+  "version": "2.0.4",
   "description": "design token",
   "keywords": [
     "designtoken"

package/dist/color/index.d.ts

@@ -1,12 +0,0 @@
-declare type MakeTokenSet<Value extends string, Scale extends number[]> = `$${Value}$${Scale[number]}`;
-declare type ColorSchemaSet<T extends string> = `$${T}` | MakeTokenSet<T, [1, 2, 3, 4]>;
-export interface YinYangProps {
-    schema: Record<ColorSchemaSet<'yin'> | ColorSchemaSet<'yang'>, string>;
-}
-export declare const yinYang: Readonly<YinYangProps>;
-export interface FiveElementsProps {
-    schema: Record<ColorSchemaSet<'wood'> | ColorSchemaSet<'fire'> | ColorSchemaSet<'earth'> | ColorSchemaSet<'metal'> | ColorSchemaSet<'water'> | ColorSchemaSet<'firemetal'> | ColorSchemaSet<'metalwood'> | ColorSchemaSet<'woodearth'> | ColorSchemaSet<'earthwater'> | ColorSchemaSet<'waterfire'>, string>;
-}
-export declare const fiveElements: Readonly<FiveElementsProps>;
-export declare const colorSchema: Readonly<import("./value").ColorValueProps>;
-export {};

package/dist/color/semanticValue.d.ts

@@ -1,17 +0,0 @@
-import { ValueProps } from './value';
-export interface SemanticValueProps {
-    $yin: ValueProps;
-    $yang: ValueProps;
-    $wood: ValueProps;
-    $fire: ValueProps;
-    $earth: ValueProps;
-    $metal: ValueProps;
-    $water: ValueProps;
-    $firebwmetal: ValueProps;
-    $metalbwwood: ValueProps;
-    $woodbwearth: ValueProps;
-    $earthbwwater: ValueProps;
-    $waterbwfire: ValueProps;
-}
-declare const semanticValue: Readonly<SemanticValueProps>;
-export default semanticValue;

package/dist/color/value.d.ts

@@ -1,21 +0,0 @@
-export interface ColorValueProps {
-    $white: ValueProps;
-    $black: ValueProps;
-    $red: ValueProps;
-    $blue: ValueProps;
-    $yellow: ValueProps;
-    $orangered: ValueProps;
-    $purple: ValueProps;
-    $aqua: ValueProps;
-    $orange: ValueProps;
-    $green: ValueProps;
-}
-export interface ValueProps {
-    0: string;
-    1: string;
-    2: string;
-    3: string;
-    4: string;
-}
-declare const colorValue: Readonly<ColorValueProps>;
-export default colorValue;

package/dist/font/index.d.ts

@@ -1,11 +0,0 @@
-/**
- * @todo 폰트 사이즈 & 폰트 패밀리등 정의
- */
-export declare const fontSizeSchema: 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' | '$subtitle$1' | '$subtitle$2' | '$subTitle$3' | '$body$1' | '$body$2' | '$body$3' | '$button' | '$caption' | '$overline', string>;
-}
-/**
- * @todo 해드 태그들 사이즈 조정이 필요함. 디자인 샘플을 보면서 조정해야할듯
- */
-export declare const fontSize: Readonly<FontSizeProps>;

package/dist/index.d.ts

@@ -1,16 +0,0 @@
-import { yinYang, fiveElements, colorSchema } from './color';
-import { fontSizeSchema, fontSize } from './font';
-export { yinYang, fiveElements, colorSchema };
-export { fontSize, fontSizeSchema };
-declare const AsharyuDesignToken: {
-    color: Readonly<{
-        yinYang: Record<("$yin" | "$yin$1" | "$yin$2" | "$yin$3" | "$yin$4") | ("$yang" | "$yang$1" | "$yang$2" | "$yang$3" | "$yang$4"), string>;
-        fiveElements: Record<("$wood" | "$wood$1" | "$wood$2" | "$wood$3" | "$wood$4") | ("$fire" | "$fire$1" | "$fire$2" | "$fire$3" | "$fire$4") | ("$earth" | "$earth$1" | "$earth$2" | "$earth$3" | "$earth$4") | ("$metal" | "$metal$1" | "$metal$2" | "$metal$3" | "$metal$4") | ("$water" | "$water$1" | "$water$2" | "$water$3" | "$water$4") | ("$firemetal" | "$firemetal$1" | "$firemetal$2" | "$firemetal$3" | "$firemetal$4") | ("$metalwood" | "$metalwood$1" | "$metalwood$2" | "$metalwood$3" | "$metalwood$4") | ("$woodearth" | "$woodearth$1" | "$woodearth$2" | "$woodearth$3" | "$woodearth$4") | ("$earthwater" | "$earthwater$1" | "$earthwater$2" | "$earthwater$3" | "$earthwater$4") | ("$waterfire" | "$waterfire$1" | "$waterfire$2" | "$waterfire$3" | "$waterfire$4"), string>;
-        colorSchema: Readonly<import("./color/value").ColorValueProps>;
-    }>;
-    font: Readonly<{
-        fontSize: Record<"$h1" | "$h2" | "$h3" | "$h4" | "$h5" | "$h6" | "$subtitle$1" | "$subtitle$2" | "$subTitle$3" | "$body$1" | "$body$2" | "$body$3" | "$button" | "$caption" | "$overline", string>;
-        fontSizeSchema: 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 default AsharyuDesignToken;