asharyu-design-token 1.0.0

package/README.md

@@ -0,0 +1,72 @@
+# Asharyu-design-token
+
+> 디자인 토큰
+
+## Concept
+
+![음야오행 색상도](./wuxingcolor.png);
+
+철학적인 요소를 결합해서 CSS 디자인 시스템을 HTML 처럼 시맨틱하게 할 수 없을까? 라는 발상으로 컨셉을 잡고 시작한 프로젝트입니다. 음양오행설을 베이스로 삼고 어레인지해서 컨셉을 잡습니다.  
+오행 정색과 간색의 기본색을 정의하고 기본 베이스로 삼았습니다. 음양을 상징하는 흑백(동,서)의 경우 1단계씩 나머지 3정색은 2단계 또 간색은 1단계씩 색상의 단계를 정의하여서 0,1,2,3,4(0의 경우 무시) 5단계로 색상을 정의하였습니다.  
+오행 정색과 간색의 경우 색상에 대한 정의가 제각각인 점이 있어서 편의적으로 규정한 부분이 있습니다. 실제 철학적인 색상과 100% 일치하지 않습니다.  
+음양을 기반으로한 심플한 스타일의 디자인 테마와 오행을 기반으로 각 5원소와 그 5원소간의 상극 과정에서 도출되는 간색의 위계와 조화를 통해서 이론적으로 색의 조합과 그 색을 통한 문서의 철학적인(직관) 표현을 유도하는 것이 기본 컨셉입니다.
+
+심플한 스타일의 음양 테마와 화려하면서도 정갈한 오행의 시맨틱한 디자인을 표현하는 것을 디자인 시스템의 컨셉으로 삼았습니다.  
+해당 프로젝트는 디자인 감각에 의존하지 않아도 되는 시맨틱 CSS를 추구합니다.
+
+## Token Structure
+
+core 토큰 구성요소 `label`, `scale`, `type`, `category`는 4가지.
+
+`$red-1`: `label-scale`;  
+`$color-red-1`: `type-label-scale`;  
+`$light-color-red-1`:`category-type-label-scale`;
+
+기본이 되는 value schema와 sementic layer가 존재한다.  
+토큰은 css와 js(타입스크립트 지원) 두가지 구조로 구성 되어있다.
+css의 경우 [CSS var](https://developer.mozilla.org/ko/docs/Web/CSS/var)로 제공된다.
+
+```css
+:root {
+  --color-yinyang-yin: #000000;
+  --color-yinyang-yin-1: #111111;
+  --color-yinyang-yin-2: #222222;
+  --color-yinyang-yin-3: #333333;
+  --color-yinyang-yin-4: #444444;
+  --color-yinyang-yang: #ffffff;
+  --color-yinyang-yang-1: #eeeeee;
+  --color-yinyang-yang-2: #dddddd;
+  --color-yinyang-yang-3: #cccccc;
+  --color-yinyang-yang-4: #bbbbbb;
+  --color-fiveelements-wood: #0000ff;
+  --color-fiveelements-wood-1: #0000dd;
+  --color-fiveelements-wood-2: #0000bb;
+  --color-fiveelements-wood-3: #000099;
+  --color-fiveelements-wood-4: #000077;
+  --color-fiveelements-fire: #ff0000;
+  --color-fiveelements-fire-1: #dd0000;
+  --color-fiveelements-fire-2: #bb0000;
+  --color-fiveelements-fire-3: #990000;
+  --color-fiveelements-fire-4: #770000;
+  --color-fiveelements-earth: #ffff00;
+  --color-fiveelements-earth-1: #dddd00;
+  --color-fiveelements-earth-2: #bbbb00;
+  --color-fiveelements-earth-3: #999900;
+  --color-fiveelements-earth-4: #777700;
+  --color-fiveelements-metal: #ffffff;
+  --color-fiveelements-metal-1: #eeeeee;
+  --color-fiveelements-metal-2: #dddddd;
+  --color-fiveelements-metal-3: #cccccc;
+  --color-fiveelements-metal-4: #bbbbbb;
+  --color-fiveelements-water: #000000;
+  --color-fiveelements-water-1: #111111;
+  --color-fiveelements-water-2: #222222;
+  --color-fiveelements-water-3: #333333;
+  --color-fiveelements-water-4: #444444;
+  ......;
+}
+```
+
+## License
+
+This project is licensed under the [Apache 2.0 License](/LICENSE).

package/dist/index.css

@@ -0,0 +1,171 @@
+:root {
+
+
+  --color-yinyang-yin: #000000;
+  --color-yinyang-yin-1: #111111;
+  --color-yinyang-yin-2: #222222;
+  --color-yinyang-yin-3: #333333;
+  --color-yinyang-yin-4: #444444;
+  --color-yinyang-yang: #ffffff;
+  --color-yinyang-yang-1: #eeeeee;
+  --color-yinyang-yang-2: #dddddd;
+  --color-yinyang-yang-3: #cccccc;
+  --color-yinyang-yang-4: #bbbbbb;
+
+
+  --color-fiveelements-wood: #0000ff;
+  --color-fiveelements-wood-1: #0000dd;
+  --color-fiveelements-wood-2: #0000bb;
+  --color-fiveelements-wood-3: #000099;
+  --color-fiveelements-wood-4: #000077;
+  --color-fiveelements-fire: #ff0000;
+  --color-fiveelements-fire-1: #dd0000;
+  --color-fiveelements-fire-2: #bb0000;
+  --color-fiveelements-fire-3: #990000;
+  --color-fiveelements-fire-4: #770000;
+  --color-fiveelements-earth: #ffff00;
+  --color-fiveelements-earth-1: #dddd00;
+  --color-fiveelements-earth-2: #bbbb00;
+  --color-fiveelements-earth-3: #999900;
+  --color-fiveelements-earth-4: #777700;
+  --color-fiveelements-metal: #ffffff;
+  --color-fiveelements-metal-1: #eeeeee;
+  --color-fiveelements-metal-2: #dddddd;
+  --color-fiveelements-metal-3: #cccccc;
+  --color-fiveelements-metal-4: #bbbbbb;
+  --color-fiveelements-water: #000000;
+  --color-fiveelements-water-1: #111111;
+  --color-fiveelements-water-2: #222222;
+  --color-fiveelements-water-3: #333333;
+  --color-fiveelements-water-4: #444444;
+  --color-fiveelements-firemetal: #ff4500;
+  --color-fiveelements-firemetal-1: #ee4500;
+  --color-fiveelements-firemetal-2: #dd4500;
+  --color-fiveelements-firemetal-3: #cc4500;
+  --color-fiveelements-firemetal-4: #bb4500;
+  --color-fiveelements-metalwood: #00ffff;
+  --color-fiveelements-metalwood-1: #00eeff;
+  --color-fiveelements-metalwood-2: #00ddff;
+  --color-fiveelements-metalwood-3: #00ccff;
+  --color-fiveelements-metalwood-4: #00bbff;
+  --color-fiveelements-woodearth: #00ff00;
+  --color-fiveelements-woodearth-1: #00ee00;
+  --color-fiveelements-woodearth-2: #00dd00;
+  --color-fiveelements-woodearth-3: #00cc00;
+  --color-fiveelements-woodearth-4: #00bb00;
+  --color-fiveelements-earthwater: #ffa500;
+  --color-fiveelements-earthwater-1: #eea500;
+  --color-fiveelements-earthwater-2: #dda500;
+  --color-fiveelements-earthwater-3: #cca500;
+  --color-fiveelements-earthwater-4: #bba500;
+  --color-fiveelements-waterfire: #800080;
+  --color-fiveelements-waterfire-1: #800070;
+  --color-fiveelements-waterfire-2: #800060;
+  --color-fiveelements-waterfire-3: #800050;
+  --color-fiveelements-waterfire-4: #800040;
+
+
+  --color-colorschema-white0: #ffffff;
+  --color-colorschema-white1: #eeeeee;
+  --color-colorschema-white2: #dddddd;
+  --color-colorschema-white3: #cccccc;
+  --color-colorschema-white4: #bbbbbb;
+  --color-colorschema-black0: #000000;
+  --color-colorschema-black1: #111111;
+  --color-colorschema-black2: #222222;
+  --color-colorschema-black3: #333333;
+  --color-colorschema-black4: #444444;
+  --color-colorschema-red0: #ff0000;
+  --color-colorschema-red1: #dd0000;
+  --color-colorschema-red2: #bb0000;
+  --color-colorschema-red3: #990000;
+  --color-colorschema-red4: #770000;
+  --color-colorschema-blue0: #0000ff;
+  --color-colorschema-blue1: #0000dd;
+  --color-colorschema-blue2: #0000bb;
+  --color-colorschema-blue3: #000099;
+  --color-colorschema-blue4: #000077;
+  --color-colorschema-yellow0: #ffff00;
+  --color-colorschema-yellow1: #dddd00;
+  --color-colorschema-yellow2: #bbbb00;
+  --color-colorschema-yellow3: #999900;
+  --color-colorschema-yellow4: #777700;
+  --color-colorschema-orangered0: #ff4500;
+  --color-colorschema-orangered1: #ee4500;
+  --color-colorschema-orangered2: #dd4500;
+  --color-colorschema-orangered3: #cc4500;
+  --color-colorschema-orangered4: #bb4500;
+  --color-colorschema-purple0: #800080;
+  --color-colorschema-purple1: #800070;
+  --color-colorschema-purple2: #800060;
+  --color-colorschema-purple3: #800050;
+  --color-colorschema-purple4: #800040;
+  --color-colorschema-aqua0: #00ffff;
+  --color-colorschema-aqua1: #00eeff;
+  --color-colorschema-aqua2: #00ddff;
+  --color-colorschema-aqua3: #00ccff;
+  --color-colorschema-aqua4: #00bbff;
+  --color-colorschema-orange0: #ffa500;
+  --color-colorschema-orange1: #eea500;
+  --color-colorschema-orange2: #dda500;
+  --color-colorschema-orange3: #cca500;
+  --color-colorschema-orange4: #bba500;
+  --color-colorschema-green0: #00ff00;
+  --color-colorschema-green1: #00ee00;
+  --color-colorschema-green2: #00dd00;
+  --color-colorschema-green3: #00cc00;
+  --color-colorschema-green4: #00bb00;
+
+
+
+  --font-fontsize-h1: 4.25rem;
+  --font-fontsize-h2: 3rem;
+  --font-fontsize-h3: 2.125rem;
+  --font-fontsize-h4: 1.75rem;
+  --font-fontsize-h5: 1.375rem;
+  --font-fontsize-h6: 1.125rem;
+  --font-fontsize-subtitle-1: 1rem;
+  --font-fontsize-subtitle-2: 0.875rem;
+  --font-fontsize-subtitle-3: 0.75rem;
+  --font-fontsize-body-1: 1rem;
+  --font-fontsize-body-2: 0.875rem;
+  --font-fontsize-body-3: 0.75rem;
+  --font-fontsize-button: 0.75rem;
+  --font-fontsize-caption: 0.625rem;
+  --font-fontsize-overline: 0.5rem;
+
+
+  --font-fontsizeschema-8: 0.5rem;
+  --font-fontsizeschema-10: 0.625rem;
+  --font-fontsizeschema-12: 0.75rem;
+  --font-fontsizeschema-14: 0.875rem;
+  --font-fontsizeschema-16: 1rem;
+  --font-fontsizeschema-18: 1.125rem;
+  --font-fontsizeschema-20: 1.25rem;
+  --font-fontsizeschema-22: 1.375rem;
+  --font-fontsizeschema-24: 1.5rem;
+  --font-fontsizeschema-26: 1.625rem;
+  --font-fontsizeschema-28: 1.75rem;
+  --font-fontsizeschema-30: 1.875rem;
+  --font-fontsizeschema-32: 2rem;
+  --font-fontsizeschema-34: 2.125rem;
+  --font-fontsizeschema-36: 2.25rem;
+  --font-fontsizeschema-38: 2.375rem;
+  --font-fontsizeschema-40: 2.5rem;
+  --font-fontsizeschema-42: 2.625rem;
+  --font-fontsizeschema-44: 2.75rem;
+  --font-fontsizeschema-46: 2.875rem;
+  --font-fontsizeschema-48: 3rem;
+  --font-fontsizeschema-50: 3.125rem;
+  --font-fontsizeschema-52: 3.25rem;
+  --font-fontsizeschema-54: 3.375rem;
+  --font-fontsizeschema-56: 3.5rem;
+  --font-fontsizeschema-58: 3.625rem;
+  --font-fontsizeschema-60: 3.75rem;
+  --font-fontsizeschema-62: 3.875rem;
+  --font-fontsizeschema-64: 4rem;
+  --font-fontsizeschema-66: 4.125rem;
+  --font-fontsizeschema-68: 4.25rem;
+
+
+}

package/dist/index.d.ts

@@ -0,0 +1,134 @@
+declare module "color/value" {
+    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;
+    }
+    const colorValue: Readonly<ColorValueProps>;
+    export default colorValue;
+}
+declare module "color/semanticValue" {
+    import { ValueProps } from "color/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;
+    }
+    const semanticValue: Readonly<SemanticValueProps>;
+    export default semanticValue;
+}
+declare module "color/index" {
+    type MakeTokenSet<Value extends string, Scale extends number[]> = `$${Value}${Scale[number]}`;
+    type ColorSchemaSet<T extends string> = `$${T}` | MakeTokenSet<T, [1, 2, 3, 4]>;
+    export interface YinYangProps {
+        schema: Record<ColorSchemaSet<'yin'> | ColorSchemaSet<'yang'>, string>;
+    }
+    export 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 const fiveElements: Readonly<FiveElementsProps>;
+    export const colorSchema: Readonly<import("color/value").ColorValueProps>;
+}
+declare module "font/value" {
+    /**
+     * @description 16px 기준으로 자주 쓰이는 px을 모두 rem 단위로 계산한 사이즈. 반응형 대응시 용이함
+     * @todo calc
+     *
+     */
+    type MakeSizeSet<T extends number[]> = `$${T[number]}`;
+    export interface FontSizeValueProps {
+        $basic: '16px';
+        $1x: '1rem';
+        $2x: '2rem';
+        $3x: '3rem';
+        $rem: Record<MakeSizeSet<[
+            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 const fontSizeValue: Readonly<FontSizeValueProps>;
+}
+declare module "font/index" {
+    /**
+     * @todo 폰트 사이즈 & 폰트 패밀리등 정의
+     */
+    export 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 const fontSize: Readonly<FontSizeProps>;
+}
+declare module "index" {
+    import { yinYang, fiveElements, colorSchema } from "color/index";
+    import { fontSizeSchema, fontSize } from "font/index";
+    export { yinYang, fiveElements, colorSchema };
+    export { fontSize, fontSizeSchema };
+    const _default: {
+        color: Readonly<{
+            yinYang: Readonly<import("color").YinYangProps>;
+            fiveElements: Readonly<import("color").FiveElementsProps>;
+            colorSchema: Readonly<import("color/value").ColorValueProps>;
+        }>;
+        font: Readonly<{
+            fontSize: Readonly<import("font").FontSizeProps>;
+            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 _default;
+}

package/dist/index.js

@@ -0,0 +1,268 @@
+// src/color/value.ts
+var colorValue = Object.freeze({
+  $white: {
+    0: "#FFFFFF",
+    1: "#EEEEEE",
+    2: "#DDDDDD",
+    3: "#CCCCCC",
+    4: "#BBBBBB"
+  },
+  $black: {
+    0: "#000000",
+    1: "#111111",
+    2: "#222222",
+    3: "#333333",
+    4: "#444444"
+  },
+  $red: {
+    0: "#FF0000",
+    1: "#DD0000",
+    2: "#BB0000",
+    3: "#990000",
+    4: "#770000"
+  },
+  $blue: {
+    0: "#0000FF",
+    1: "#0000DD",
+    2: "#0000BB",
+    3: "#000099",
+    4: "#000077"
+  },
+  $yellow: {
+    0: "#FFFF00",
+    1: "#DDDD00",
+    2: "#BBBB00",
+    3: "#999900",
+    4: "#777700"
+  },
+  $orangered: {
+    0: "#FF4500",
+    1: "#EE4500",
+    2: "#DD4500",
+    3: "#CC4500",
+    4: "#BB4500"
+  },
+  $purple: {
+    0: "#800080",
+    1: "#800070",
+    2: "#800060",
+    3: "#800050",
+    4: "#800040"
+  },
+  $aqua: {
+    0: "#00FFFF",
+    1: "#00EEFF",
+    2: "#00DDFF",
+    3: "#00CCFF",
+    4: "#00BBFF"
+  },
+  $orange: {
+    0: "#FFA500",
+    1: "#EEA500",
+    2: "#DDA500",
+    3: "#CCA500",
+    4: "#BBA500"
+  },
+  $green: {
+    0: "#00FF00",
+    1: "#00EE00",
+    2: "#00DD00",
+    3: "#00CC00",
+    4: "#00BB00"
+  }
+});
+var value_default = colorValue;
+
+// src/color/semanticValue.ts
+var semanticValue = Object.freeze({
+  $yin: {
+    0: value_default.$black[0],
+    1: value_default.$black[1],
+    2: value_default.$black[2],
+    3: value_default.$black[3],
+    4: value_default.$black[4]
+  },
+  $yang: {
+    0: value_default.$white[0],
+    1: value_default.$white[1],
+    2: value_default.$white[2],
+    3: value_default.$white[3],
+    4: value_default.$white[4]
+  },
+  $wood: {
+    0: value_default.$blue[0],
+    1: value_default.$blue[1],
+    2: value_default.$blue[2],
+    3: value_default.$blue[3],
+    4: value_default.$blue[4]
+  },
+  $fire: {
+    0: value_default.$red[0],
+    1: value_default.$red[1],
+    2: value_default.$red[2],
+    3: value_default.$red[3],
+    4: value_default.$red[4]
+  },
+  $earth: {
+    0: value_default.$yellow[0],
+    1: value_default.$yellow[1],
+    2: value_default.$yellow[2],
+    3: value_default.$yellow[3],
+    4: value_default.$yellow[4]
+  },
+  $metal: {
+    0: value_default.$white[0],
+    1: value_default.$white[1],
+    2: value_default.$white[2],
+    3: value_default.$white[3],
+    4: value_default.$white[4]
+  },
+  $water: {
+    0: value_default.$black[0],
+    1: value_default.$black[1],
+    2: value_default.$black[2],
+    3: value_default.$black[3],
+    4: value_default.$black[4]
+  },
+  $firebwmetal: {
+    0: value_default.$orangered[0],
+    1: value_default.$orangered[1],
+    2: value_default.$orangered[2],
+    3: value_default.$orangered[3],
+    4: value_default.$orangered[4]
+  },
+  $metalbwwood: {
+    0: value_default.$aqua[0],
+    1: value_default.$aqua[1],
+    2: value_default.$aqua[2],
+    3: value_default.$aqua[3],
+    4: value_default.$aqua[4]
+  },
+  $woodbwearth: {
+    0: value_default.$green[0],
+    1: value_default.$green[1],
+    2: value_default.$green[2],
+    3: value_default.$green[3],
+    4: value_default.$green[4]
+  },
+  $earthbwwater: {
+    0: value_default.$orange[0],
+    1: value_default.$orange[1],
+    2: value_default.$orange[2],
+    3: value_default.$orange[3],
+    4: value_default.$orange[4]
+  },
+  $waterbwfire: {
+    0: value_default.$purple[0],
+    1: value_default.$purple[1],
+    2: value_default.$purple[2],
+    3: value_default.$purple[3],
+    4: value_default.$purple[4]
+  }
+});
+var semanticValue_default = semanticValue;
+
+// src/color/index.ts
+var yinYang = Object.freeze({
+  schema: {
+    ...getSchema("yin", semanticValue_default.$yin),
+    ...getSchema("yang", semanticValue_default.$yang)
+  }
+});
+var fiveElements = Object.freeze({
+  schema: {
+    ...getSchema("wood", semanticValue_default.$wood),
+    ...getSchema("fire", semanticValue_default.$fire),
+    ...getSchema("earth", semanticValue_default.$earth),
+    ...getSchema("metal", semanticValue_default.$metal),
+    ...getSchema("water", semanticValue_default.$water),
+    ...getSchema("firemetal", semanticValue_default.$firebwmetal),
+    ...getSchema("metalwood", semanticValue_default.$metalbwwood),
+    ...getSchema("woodearth", semanticValue_default.$woodbwearth),
+    ...getSchema("earthwater", semanticValue_default.$earthbwwater),
+    ...getSchema("waterfire", semanticValue_default.$waterbwfire)
+  }
+});
+var colorSchema = value_default;
+function getSchema(key, model) {
+  return Object.values(model).reduce((result, current, idx) => {
+    idx > 0 ? result[`$${key}$${idx}`] = current : result[`$${key}`] = current;
+    return result;
+  }, {});
+}
+
+// src/font/value.ts
+var fontSizeValue = Object.freeze({
+  $basic: "16px",
+  $1x: "1rem",
+  $2x: "2rem",
+  $3x: "3rem",
+  $rem: {
+    $8: "0.5rem",
+    $10: "0.625rem",
+    $12: "0.75rem",
+    $14: "0.875rem",
+    $16: "1rem",
+    $18: "1.125rem",
+    $20: "1.25rem",
+    $22: "1.375rem",
+    $24: "1.5rem",
+    $26: "1.625rem",
+    $28: "1.75rem",
+    $30: "1.875rem",
+    $32: "2rem",
+    $34: "2.125rem",
+    $36: "2.25rem",
+    $38: "2.375rem",
+    $40: "2.5rem",
+    $42: "2.625rem",
+    $44: "2.75rem",
+    $46: "2.875rem",
+    $48: "3rem",
+    $50: "3.125rem",
+    $52: "3.25rem",
+    $54: "3.375rem",
+    $56: "3.5rem",
+    $58: "3.625rem",
+    $60: "3.75rem",
+    $62: "3.875rem",
+    $64: "4rem",
+    $66: "4.125rem",
+    $68: "4.25rem"
+  }
+});
+
+// src/font/index.ts
+var fontSizeSchema = fontSizeValue.$rem;
+var fontSize = Object.freeze({
+  schema: {
+    $h1: fontSizeValue.$rem.$68,
+    $h2: fontSizeValue.$rem.$48,
+    $h3: fontSizeValue.$rem.$34,
+    $h4: fontSizeValue.$rem.$28,
+    $h5: fontSizeValue.$rem.$22,
+    $h6: fontSizeValue.$rem.$18,
+    $subtitle$1: fontSizeValue.$rem.$16,
+    $subtitle$2: fontSizeValue.$rem.$14,
+    $subTitle$3: fontSizeValue.$rem.$12,
+    $body$1: fontSizeValue.$rem.$16,
+    $body$2: fontSizeValue.$rem.$14,
+    $body$3: fontSizeValue.$rem.$12,
+    $button: fontSizeValue.$rem.$12,
+    $caption: fontSizeValue.$rem.$10,
+    $overline: fontSizeValue.$rem.$8
+  }
+});
+
+// src/index.ts
+var color = Object.freeze({ yinYang, fiveElements, colorSchema });
+var font = Object.freeze({ fontSize, fontSizeSchema });
+var src_default = { color, font };
+export {
+  colorSchema,
+  src_default as default,
+  fiveElements,
+  fontSize,
+  fontSizeSchema,
+  yinYang
+};

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "asharyu-design-token",
+  "version": "1.0.0",
+  "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"
+  }
+}