asharyu-design-token 1.0.0 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +100 -72
- package/dist/color/index.d.ts +12 -0
- package/dist/color/semanticValue.d.ts +17 -0
- package/dist/color/value.d.ts +21 -0
- package/dist/font/index.d.ts +11 -0
- package/dist/font/value.d.ts +47 -0
- package/dist/index.css +50 -50
- package/dist/index.d.ts +16 -134
- package/dist/index.js +8 -3
- package/package.json +42 -42
package/README.md
CHANGED
|
@@ -1,72 +1,100 @@
|
|
|
1
|
-
# Asharyu-design-token
|
|
2
|
-
|
|
3
|
-
> 디자인 토큰
|
|
4
|
-
|
|
5
|
-
##
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
--color-
|
|
60
|
-
--color-
|
|
61
|
-
--color-
|
|
62
|
-
--color-
|
|
63
|
-
--color-
|
|
64
|
-
--color-
|
|
65
|
-
--color-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
1
|
+
# Asharyu-design-token
|
|
2
|
+
|
|
3
|
+
> 디자인 토큰
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
1.npm
|
|
8
|
+
|
|
9
|
+
```
|
|
10
|
+
npm i asharyu-design-token
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
2.yarn
|
|
14
|
+
|
|
15
|
+
```
|
|
16
|
+
yarn add asharyu-design-token
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Usage
|
|
20
|
+
|
|
21
|
+
1. css
|
|
22
|
+
|
|
23
|
+
```js
|
|
24
|
+
import 'asharyu-design-token/index.css';
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
2.js(ts)
|
|
28
|
+
|
|
29
|
+
```js
|
|
30
|
+
import Token from 'asharyu-design-token';
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## Concept
|
|
34
|
+
|
|
35
|
+
;
|
|
36
|
+
|
|
37
|
+
철학적인 요소를 결합해서 CSS 디자인 시스템을 HTML 처럼 시맨틱하게 할 수 없을까? 라는 발상으로 컨셉을 잡고 시작한 프로젝트입니다. 음양오행설을 베이스로 삼고 어레인지해서 컨셉을 잡습니다.
|
|
38
|
+
오행 정색과 간색의 기본색을 정의하고 기본 베이스로 삼았습니다. 음양을 상징하는 흑백(동,서)의 경우 1단계씩 나머지 3정색은 2단계 또 간색은 1단계씩 색상의 단계를 정의하여서 0,1,2,3,4(0의 경우 무시) 5단계로 색상을 정의하였습니다.
|
|
39
|
+
오행 정색과 간색의 경우 색상에 대한 정의가 제각각인 점이 있어서 편의적으로 규정한 부분이 있습니다. 실제 철학적인 색상과 100% 일치하지 않습니다.
|
|
40
|
+
음양을 기반으로한 심플한 스타일의 디자인 테마와 오행을 기반으로 각 5원소와 그 5원소간의 상극 과정에서 도출되는 간색의 위계와 조화를 통해서 이론적으로 색의 조합과 그 색을 통한 문서의 철학적인(직관) 표현을 유도하는 것이 기본 컨셉입니다.
|
|
41
|
+
|
|
42
|
+
심플한 스타일의 음양 테마와 화려하면서도 정갈한 오행의 시맨틱한 디자인을 표현하는 것을 디자인 시스템의 컨셉으로 삼았습니다.
|
|
43
|
+
해당 프로젝트는 디자인 감각에 의존하지 않아도 되는 시맨틱 CSS를 추구합니다.
|
|
44
|
+
|
|
45
|
+
## Token Structure
|
|
46
|
+
|
|
47
|
+
core 토큰 구성요소 `label`, `scale`, `type`, `category`는 4가지.
|
|
48
|
+
|
|
49
|
+
`$red-1`: `label-scale`;
|
|
50
|
+
`$color-red-1`: `type-label-scale`;
|
|
51
|
+
`$light-color-red-1`:`category-type-label-scale`;
|
|
52
|
+
|
|
53
|
+
기본이 되는 value schema와 sementic layer가 존재한다.
|
|
54
|
+
토큰은 css와 js(타입스크립트 지원) 두가지 구조로 구성 되어있다.
|
|
55
|
+
css의 경우 [CSS var](https://developer.mozilla.org/ko/docs/Web/CSS/var)로 제공된다.
|
|
56
|
+
|
|
57
|
+
```css
|
|
58
|
+
:root {
|
|
59
|
+
--color-yinyang-yin: #000000;
|
|
60
|
+
--color-yinyang-yin-1: #111111;
|
|
61
|
+
--color-yinyang-yin-2: #222222;
|
|
62
|
+
--color-yinyang-yin-3: #333333;
|
|
63
|
+
--color-yinyang-yin-4: #444444;
|
|
64
|
+
--color-yinyang-yang: #ffffff;
|
|
65
|
+
--color-yinyang-yang-1: #eeeeee;
|
|
66
|
+
--color-yinyang-yang-2: #dddddd;
|
|
67
|
+
--color-yinyang-yang-3: #cccccc;
|
|
68
|
+
--color-yinyang-yang-4: #bbbbbb;
|
|
69
|
+
--color-fiveelements-wood: #0000ff;
|
|
70
|
+
--color-fiveelements-wood-1: #0000dd;
|
|
71
|
+
--color-fiveelements-wood-2: #0000bb;
|
|
72
|
+
--color-fiveelements-wood-3: #000099;
|
|
73
|
+
--color-fiveelements-wood-4: #000077;
|
|
74
|
+
--color-fiveelements-fire: #ff0000;
|
|
75
|
+
--color-fiveelements-fire-1: #dd0000;
|
|
76
|
+
--color-fiveelements-fire-2: #bb0000;
|
|
77
|
+
--color-fiveelements-fire-3: #990000;
|
|
78
|
+
--color-fiveelements-fire-4: #770000;
|
|
79
|
+
--color-fiveelements-earth: #ffff00;
|
|
80
|
+
--color-fiveelements-earth-1: #dddd00;
|
|
81
|
+
--color-fiveelements-earth-2: #bbbb00;
|
|
82
|
+
--color-fiveelements-earth-3: #999900;
|
|
83
|
+
--color-fiveelements-earth-4: #777700;
|
|
84
|
+
--color-fiveelements-metal: #ffffff;
|
|
85
|
+
--color-fiveelements-metal-1: #eeeeee;
|
|
86
|
+
--color-fiveelements-metal-2: #dddddd;
|
|
87
|
+
--color-fiveelements-metal-3: #cccccc;
|
|
88
|
+
--color-fiveelements-metal-4: #bbbbbb;
|
|
89
|
+
--color-fiveelements-water: #000000;
|
|
90
|
+
--color-fiveelements-water-1: #111111;
|
|
91
|
+
--color-fiveelements-water-2: #222222;
|
|
92
|
+
--color-fiveelements-water-3: #333333;
|
|
93
|
+
--color-fiveelements-water-4: #444444;
|
|
94
|
+
......
|
|
95
|
+
}
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
## License
|
|
99
|
+
|
|
100
|
+
This project is licensed under the [Apache 2.0 License](/LICENSE).
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
declare type MakeTokenSet<Value extends string, Scale extends number[]> = `$${Value}$${Scale[number]}`;
|
|
2
|
+
declare type ColorSchemaSet<T extends string> = `$${T}` | MakeTokenSet<T, [1, 2, 3, 4]>;
|
|
3
|
+
export interface YinYangProps {
|
|
4
|
+
schema: Record<ColorSchemaSet<'yin'> | ColorSchemaSet<'yang'>, string>;
|
|
5
|
+
}
|
|
6
|
+
export declare const yinYang: Readonly<YinYangProps>;
|
|
7
|
+
export interface FiveElementsProps {
|
|
8
|
+
schema: Record<ColorSchemaSet<'wood'> | ColorSchemaSet<'fire'> | ColorSchemaSet<'earth'> | ColorSchemaSet<'metal'> | ColorSchemaSet<'water'> | ColorSchemaSet<'firemetal'> | ColorSchemaSet<'metalwood'> | ColorSchemaSet<'woodearth'> | ColorSchemaSet<'earthwater'> | ColorSchemaSet<'waterfire'>, string>;
|
|
9
|
+
}
|
|
10
|
+
export declare const fiveElements: Readonly<FiveElementsProps>;
|
|
11
|
+
export declare const colorSchema: Readonly<import("./value").ColorValueProps>;
|
|
12
|
+
export {};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { ValueProps } from './value';
|
|
2
|
+
export interface SemanticValueProps {
|
|
3
|
+
$yin: ValueProps;
|
|
4
|
+
$yang: ValueProps;
|
|
5
|
+
$wood: ValueProps;
|
|
6
|
+
$fire: ValueProps;
|
|
7
|
+
$earth: ValueProps;
|
|
8
|
+
$metal: ValueProps;
|
|
9
|
+
$water: ValueProps;
|
|
10
|
+
$firebwmetal: ValueProps;
|
|
11
|
+
$metalbwwood: ValueProps;
|
|
12
|
+
$woodbwearth: ValueProps;
|
|
13
|
+
$earthbwwater: ValueProps;
|
|
14
|
+
$waterbwfire: ValueProps;
|
|
15
|
+
}
|
|
16
|
+
declare const semanticValue: Readonly<SemanticValueProps>;
|
|
17
|
+
export default semanticValue;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
export interface ColorValueProps {
|
|
2
|
+
$white: ValueProps;
|
|
3
|
+
$black: ValueProps;
|
|
4
|
+
$red: ValueProps;
|
|
5
|
+
$blue: ValueProps;
|
|
6
|
+
$yellow: ValueProps;
|
|
7
|
+
$orangered: ValueProps;
|
|
8
|
+
$purple: ValueProps;
|
|
9
|
+
$aqua: ValueProps;
|
|
10
|
+
$orange: ValueProps;
|
|
11
|
+
$green: ValueProps;
|
|
12
|
+
}
|
|
13
|
+
export interface ValueProps {
|
|
14
|
+
0: string;
|
|
15
|
+
1: string;
|
|
16
|
+
2: string;
|
|
17
|
+
3: string;
|
|
18
|
+
4: string;
|
|
19
|
+
}
|
|
20
|
+
declare const colorValue: Readonly<ColorValueProps>;
|
|
21
|
+
export default colorValue;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @todo 폰트 사이즈 & 폰트 패밀리등 정의
|
|
3
|
+
*/
|
|
4
|
+
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>;
|
|
5
|
+
export interface FontSizeProps {
|
|
6
|
+
schema: Record<'$h1' | '$h2' | '$h3' | '$h4' | '$h5' | '$h6' | '$subtitle$1' | '$subtitle$2' | '$subTitle$3' | '$body$1' | '$body$2' | '$body$3' | '$button' | '$caption' | '$overline', string>;
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* @todo 해드 태그들 사이즈 조정이 필요함. 디자인 샘플을 보면서 조정해야할듯
|
|
10
|
+
*/
|
|
11
|
+
export declare const fontSize: Readonly<FontSizeProps>;
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @description 16px 기준으로 자주 쓰이는 px을 모두 rem 단위로 계산한 사이즈. 반응형 대응시 용이함
|
|
3
|
+
* @todo calc
|
|
4
|
+
*
|
|
5
|
+
*/
|
|
6
|
+
declare type MakeSizeSet<T extends number[]> = `$${T[number]}`;
|
|
7
|
+
export interface FontSizeValueProps {
|
|
8
|
+
$basic: '16px';
|
|
9
|
+
$1x: '1rem';
|
|
10
|
+
$2x: '2rem';
|
|
11
|
+
$3x: '3rem';
|
|
12
|
+
$rem: Record<MakeSizeSet<[
|
|
13
|
+
8,
|
|
14
|
+
10,
|
|
15
|
+
12,
|
|
16
|
+
14,
|
|
17
|
+
16,
|
|
18
|
+
18,
|
|
19
|
+
20,
|
|
20
|
+
22,
|
|
21
|
+
24,
|
|
22
|
+
26,
|
|
23
|
+
28,
|
|
24
|
+
30,
|
|
25
|
+
32,
|
|
26
|
+
34,
|
|
27
|
+
36,
|
|
28
|
+
38,
|
|
29
|
+
40,
|
|
30
|
+
42,
|
|
31
|
+
44,
|
|
32
|
+
46,
|
|
33
|
+
48,
|
|
34
|
+
50,
|
|
35
|
+
52,
|
|
36
|
+
54,
|
|
37
|
+
56,
|
|
38
|
+
58,
|
|
39
|
+
60,
|
|
40
|
+
62,
|
|
41
|
+
64,
|
|
42
|
+
66,
|
|
43
|
+
68
|
|
44
|
+
]>, string>;
|
|
45
|
+
}
|
|
46
|
+
export declare const fontSizeValue: Readonly<FontSizeValueProps>;
|
|
47
|
+
export {};
|
package/dist/index.css
CHANGED
|
@@ -65,56 +65,56 @@
|
|
|
65
65
|
--color-fiveelements-waterfire-4: #800040;
|
|
66
66
|
|
|
67
67
|
|
|
68
|
-
--color-colorschema-
|
|
69
|
-
--color-colorschema-
|
|
70
|
-
--color-colorschema-
|
|
71
|
-
--color-colorschema-
|
|
72
|
-
--color-colorschema-
|
|
73
|
-
--color-colorschema-
|
|
74
|
-
--color-colorschema-
|
|
75
|
-
--color-colorschema-
|
|
76
|
-
--color-colorschema-
|
|
77
|
-
--color-colorschema-
|
|
78
|
-
--color-colorschema-
|
|
79
|
-
--color-colorschema-
|
|
80
|
-
--color-colorschema-
|
|
81
|
-
--color-colorschema-
|
|
82
|
-
--color-colorschema-
|
|
83
|
-
--color-colorschema-
|
|
84
|
-
--color-colorschema-
|
|
85
|
-
--color-colorschema-
|
|
86
|
-
--color-colorschema-
|
|
87
|
-
--color-colorschema-
|
|
88
|
-
--color-colorschema-
|
|
89
|
-
--color-colorschema-
|
|
90
|
-
--color-colorschema-
|
|
91
|
-
--color-colorschema-
|
|
92
|
-
--color-colorschema-
|
|
93
|
-
--color-colorschema-
|
|
94
|
-
--color-colorschema-
|
|
95
|
-
--color-colorschema-
|
|
96
|
-
--color-colorschema-
|
|
97
|
-
--color-colorschema-
|
|
98
|
-
--color-colorschema-
|
|
99
|
-
--color-colorschema-
|
|
100
|
-
--color-colorschema-
|
|
101
|
-
--color-colorschema-
|
|
102
|
-
--color-colorschema-
|
|
103
|
-
--color-colorschema-
|
|
104
|
-
--color-colorschema-
|
|
105
|
-
--color-colorschema-
|
|
106
|
-
--color-colorschema-
|
|
107
|
-
--color-colorschema-
|
|
108
|
-
--color-colorschema-
|
|
109
|
-
--color-colorschema-
|
|
110
|
-
--color-colorschema-
|
|
111
|
-
--color-colorschema-
|
|
112
|
-
--color-colorschema-
|
|
113
|
-
--color-colorschema-
|
|
114
|
-
--color-colorschema-
|
|
115
|
-
--color-colorschema-
|
|
116
|
-
--color-colorschema-
|
|
117
|
-
--color-colorschema-
|
|
68
|
+
--color-colorschema-white-0: #ffffff;
|
|
69
|
+
--color-colorschema-white-1: #eeeeee;
|
|
70
|
+
--color-colorschema-white-2: #dddddd;
|
|
71
|
+
--color-colorschema-white-3: #cccccc;
|
|
72
|
+
--color-colorschema-white-4: #bbbbbb;
|
|
73
|
+
--color-colorschema-black-0: #000000;
|
|
74
|
+
--color-colorschema-black-1: #111111;
|
|
75
|
+
--color-colorschema-black-2: #222222;
|
|
76
|
+
--color-colorschema-black-3: #333333;
|
|
77
|
+
--color-colorschema-black-4: #444444;
|
|
78
|
+
--color-colorschema-red-0: #ff0000;
|
|
79
|
+
--color-colorschema-red-1: #dd0000;
|
|
80
|
+
--color-colorschema-red-2: #bb0000;
|
|
81
|
+
--color-colorschema-red-3: #990000;
|
|
82
|
+
--color-colorschema-red-4: #770000;
|
|
83
|
+
--color-colorschema-blue-0: #0000ff;
|
|
84
|
+
--color-colorschema-blue-1: #0000dd;
|
|
85
|
+
--color-colorschema-blue-2: #0000bb;
|
|
86
|
+
--color-colorschema-blue-3: #000099;
|
|
87
|
+
--color-colorschema-blue-4: #000077;
|
|
88
|
+
--color-colorschema-yellow-0: #ffff00;
|
|
89
|
+
--color-colorschema-yellow-1: #dddd00;
|
|
90
|
+
--color-colorschema-yellow-2: #bbbb00;
|
|
91
|
+
--color-colorschema-yellow-3: #999900;
|
|
92
|
+
--color-colorschema-yellow-4: #777700;
|
|
93
|
+
--color-colorschema-orangered-0: #ff4500;
|
|
94
|
+
--color-colorschema-orangered-1: #ee4500;
|
|
95
|
+
--color-colorschema-orangered-2: #dd4500;
|
|
96
|
+
--color-colorschema-orangered-3: #cc4500;
|
|
97
|
+
--color-colorschema-orangered-4: #bb4500;
|
|
98
|
+
--color-colorschema-purple-0: #800080;
|
|
99
|
+
--color-colorschema-purple-1: #800070;
|
|
100
|
+
--color-colorschema-purple-2: #800060;
|
|
101
|
+
--color-colorschema-purple-3: #800050;
|
|
102
|
+
--color-colorschema-purple-4: #800040;
|
|
103
|
+
--color-colorschema-aqua-0: #00ffff;
|
|
104
|
+
--color-colorschema-aqua-1: #00eeff;
|
|
105
|
+
--color-colorschema-aqua-2: #00ddff;
|
|
106
|
+
--color-colorschema-aqua-3: #00ccff;
|
|
107
|
+
--color-colorschema-aqua-4: #00bbff;
|
|
108
|
+
--color-colorschema-orange-0: #ffa500;
|
|
109
|
+
--color-colorschema-orange-1: #eea500;
|
|
110
|
+
--color-colorschema-orange-2: #dda500;
|
|
111
|
+
--color-colorschema-orange-3: #cca500;
|
|
112
|
+
--color-colorschema-orange-4: #bba500;
|
|
113
|
+
--color-colorschema-green-0: #00ff00;
|
|
114
|
+
--color-colorschema-green-1: #00ee00;
|
|
115
|
+
--color-colorschema-green-2: #00dd00;
|
|
116
|
+
--color-colorschema-green-3: #00cc00;
|
|
117
|
+
--color-colorschema-green-4: #00bb00;
|
|
118
118
|
|
|
119
119
|
|
|
120
120
|
|
package/dist/index.d.ts
CHANGED
|
@@ -1,134 +1,16 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
2: string;
|
|
18
|
-
3: string;
|
|
19
|
-
4: string;
|
|
20
|
-
}
|
|
21
|
-
const colorValue: Readonly<ColorValueProps>;
|
|
22
|
-
export default colorValue;
|
|
23
|
-
}
|
|
24
|
-
declare module "color/semanticValue" {
|
|
25
|
-
import { ValueProps } from "color/value";
|
|
26
|
-
export interface SemanticValueProps {
|
|
27
|
-
$yin: ValueProps;
|
|
28
|
-
$yang: ValueProps;
|
|
29
|
-
$wood: ValueProps;
|
|
30
|
-
$fire: ValueProps;
|
|
31
|
-
$earth: ValueProps;
|
|
32
|
-
$metal: ValueProps;
|
|
33
|
-
$water: ValueProps;
|
|
34
|
-
$firebwmetal: ValueProps;
|
|
35
|
-
$metalbwwood: ValueProps;
|
|
36
|
-
$woodbwearth: ValueProps;
|
|
37
|
-
$earthbwwater: ValueProps;
|
|
38
|
-
$waterbwfire: ValueProps;
|
|
39
|
-
}
|
|
40
|
-
const semanticValue: Readonly<SemanticValueProps>;
|
|
41
|
-
export default semanticValue;
|
|
42
|
-
}
|
|
43
|
-
declare module "color/index" {
|
|
44
|
-
type MakeTokenSet<Value extends string, Scale extends number[]> = `$${Value}${Scale[number]}`;
|
|
45
|
-
type ColorSchemaSet<T extends string> = `$${T}` | MakeTokenSet<T, [1, 2, 3, 4]>;
|
|
46
|
-
export interface YinYangProps {
|
|
47
|
-
schema: Record<ColorSchemaSet<'yin'> | ColorSchemaSet<'yang'>, string>;
|
|
48
|
-
}
|
|
49
|
-
export const yinYang: Readonly<YinYangProps>;
|
|
50
|
-
export interface FiveElementsProps {
|
|
51
|
-
schema: Record<ColorSchemaSet<'wood'> | ColorSchemaSet<'fire'> | ColorSchemaSet<'earth'> | ColorSchemaSet<'metal'> | ColorSchemaSet<'water'> | ColorSchemaSet<'firemetal'> | ColorSchemaSet<'metalwood'> | ColorSchemaSet<'woodearth'> | ColorSchemaSet<'earthwater'> | ColorSchemaSet<'waterfire'>, string>;
|
|
52
|
-
}
|
|
53
|
-
export const fiveElements: Readonly<FiveElementsProps>;
|
|
54
|
-
export const colorSchema: Readonly<import("color/value").ColorValueProps>;
|
|
55
|
-
}
|
|
56
|
-
declare module "font/value" {
|
|
57
|
-
/**
|
|
58
|
-
* @description 16px 기준으로 자주 쓰이는 px을 모두 rem 단위로 계산한 사이즈. 반응형 대응시 용이함
|
|
59
|
-
* @todo calc
|
|
60
|
-
*
|
|
61
|
-
*/
|
|
62
|
-
type MakeSizeSet<T extends number[]> = `$${T[number]}`;
|
|
63
|
-
export interface FontSizeValueProps {
|
|
64
|
-
$basic: '16px';
|
|
65
|
-
$1x: '1rem';
|
|
66
|
-
$2x: '2rem';
|
|
67
|
-
$3x: '3rem';
|
|
68
|
-
$rem: Record<MakeSizeSet<[
|
|
69
|
-
8,
|
|
70
|
-
10,
|
|
71
|
-
12,
|
|
72
|
-
14,
|
|
73
|
-
16,
|
|
74
|
-
18,
|
|
75
|
-
20,
|
|
76
|
-
22,
|
|
77
|
-
24,
|
|
78
|
-
26,
|
|
79
|
-
28,
|
|
80
|
-
30,
|
|
81
|
-
32,
|
|
82
|
-
34,
|
|
83
|
-
36,
|
|
84
|
-
38,
|
|
85
|
-
40,
|
|
86
|
-
42,
|
|
87
|
-
44,
|
|
88
|
-
46,
|
|
89
|
-
48,
|
|
90
|
-
50,
|
|
91
|
-
52,
|
|
92
|
-
54,
|
|
93
|
-
56,
|
|
94
|
-
58,
|
|
95
|
-
60,
|
|
96
|
-
62,
|
|
97
|
-
64,
|
|
98
|
-
66,
|
|
99
|
-
68
|
|
100
|
-
]>, string>;
|
|
101
|
-
}
|
|
102
|
-
export const fontSizeValue: Readonly<FontSizeValueProps>;
|
|
103
|
-
}
|
|
104
|
-
declare module "font/index" {
|
|
105
|
-
/**
|
|
106
|
-
* @todo 폰트 사이즈 & 폰트 패밀리등 정의
|
|
107
|
-
*/
|
|
108
|
-
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>;
|
|
109
|
-
export interface FontSizeProps {
|
|
110
|
-
schema: Record<'$h1' | '$h2' | '$h3' | '$h4' | '$h5' | '$h6' | '$subtitle$1' | '$subtitle$2' | '$subTitle$3' | '$body$1' | '$body$2' | '$body$3' | '$button' | '$caption' | '$overline', string>;
|
|
111
|
-
}
|
|
112
|
-
/**
|
|
113
|
-
* @todo 해드 태그들 사이즈 조정이 필요함. 디자인 샘플을 보면서 조정해야할듯
|
|
114
|
-
*/
|
|
115
|
-
export const fontSize: Readonly<FontSizeProps>;
|
|
116
|
-
}
|
|
117
|
-
declare module "index" {
|
|
118
|
-
import { yinYang, fiveElements, colorSchema } from "color/index";
|
|
119
|
-
import { fontSizeSchema, fontSize } from "font/index";
|
|
120
|
-
export { yinYang, fiveElements, colorSchema };
|
|
121
|
-
export { fontSize, fontSizeSchema };
|
|
122
|
-
const _default: {
|
|
123
|
-
color: Readonly<{
|
|
124
|
-
yinYang: Readonly<import("color").YinYangProps>;
|
|
125
|
-
fiveElements: Readonly<import("color").FiveElementsProps>;
|
|
126
|
-
colorSchema: Readonly<import("color/value").ColorValueProps>;
|
|
127
|
-
}>;
|
|
128
|
-
font: Readonly<{
|
|
129
|
-
fontSize: Readonly<import("font").FontSizeProps>;
|
|
130
|
-
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>;
|
|
131
|
-
}>;
|
|
132
|
-
};
|
|
133
|
-
export default _default;
|
|
134
|
-
}
|
|
1
|
+
import { yinYang, fiveElements, colorSchema } from './color';
|
|
2
|
+
import { fontSizeSchema, fontSize } from './font';
|
|
3
|
+
export { yinYang, fiveElements, colorSchema };
|
|
4
|
+
export { fontSize, fontSizeSchema };
|
|
5
|
+
declare const AsharyuDesignToken: {
|
|
6
|
+
color: Readonly<{
|
|
7
|
+
yinYang: Record<("$yin" | "$yin$1" | "$yin$2" | "$yin$3" | "$yin$4") | ("$yang" | "$yang$1" | "$yang$2" | "$yang$3" | "$yang$4"), string>;
|
|
8
|
+
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>;
|
|
9
|
+
colorSchema: Readonly<import("./color/value").ColorValueProps>;
|
|
10
|
+
}>;
|
|
11
|
+
font: Readonly<{
|
|
12
|
+
fontSize: Record<"$h1" | "$h2" | "$h3" | "$h4" | "$h5" | "$h6" | "$subtitle$1" | "$subtitle$2" | "$subTitle$3" | "$body$1" | "$body$2" | "$body$3" | "$button" | "$caption" | "$overline", string>;
|
|
13
|
+
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>;
|
|
14
|
+
}>;
|
|
15
|
+
};
|
|
16
|
+
export default AsharyuDesignToken;
|
package/dist/index.js
CHANGED
|
@@ -255,9 +255,14 @@ var fontSize = Object.freeze({
|
|
|
255
255
|
});
|
|
256
256
|
|
|
257
257
|
// src/index.ts
|
|
258
|
-
var color = Object.freeze({
|
|
259
|
-
|
|
260
|
-
|
|
258
|
+
var color = Object.freeze({
|
|
259
|
+
yinYang: yinYang.schema,
|
|
260
|
+
fiveElements: fiveElements.schema,
|
|
261
|
+
colorSchema
|
|
262
|
+
});
|
|
263
|
+
var font = Object.freeze({ fontSize: fontSize.schema, fontSizeSchema });
|
|
264
|
+
var AsharyuDesignToken = { color, font };
|
|
265
|
+
var src_default = AsharyuDesignToken;
|
|
261
266
|
export {
|
|
262
267
|
colorSchema,
|
|
263
268
|
src_default as default,
|
package/package.json
CHANGED
|
@@ -1,42 +1,42 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "asharyu-design-token",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"description": "design token",
|
|
5
|
-
"keywords": [
|
|
6
|
-
"designtoken"
|
|
7
|
-
],
|
|
8
|
-
"author": "Isa <yunjonglyu@gmail.com> (yunjongryu)",
|
|
9
|
-
"homepage": "https://github.com/yoonjonglyu/asharyu-design#readme",
|
|
10
|
-
"license": "Apache-2.0",
|
|
11
|
-
"type": "module",
|
|
12
|
-
"main": "./dist/index.js",
|
|
13
|
-
"types": "./dist/index.d.ts",
|
|
14
|
-
"exports": {
|
|
15
|
-
".": "./dist/index.js",
|
|
16
|
-
"./index.css": "./dist/index.css"
|
|
17
|
-
},
|
|
18
|
-
"directories": {
|
|
19
|
-
"dist": "dist"
|
|
20
|
-
},
|
|
21
|
-
"files": [
|
|
22
|
-
"dist"
|
|
23
|
-
],
|
|
24
|
-
"repository": {
|
|
25
|
-
"type": "git",
|
|
26
|
-
"url": "git+https://github.com/yoonjonglyu/asharyu-design.git"
|
|
27
|
-
},
|
|
28
|
-
"scripts": {
|
|
29
|
-
"build": "tsc && esbuild src/index.ts --bundle --format=esm --outdir=dist",
|
|
30
|
-
"postbuild": "node makeCSS.js"
|
|
31
|
-
},
|
|
32
|
-
"bugs": {
|
|
33
|
-
"url": "https://github.com/yoonjonglyu/asharyu-design/issues"
|
|
34
|
-
},
|
|
35
|
-
"dependencies": {
|
|
36
|
-
"normalize.css": "^8.0.1"
|
|
37
|
-
},
|
|
38
|
-
"devDependencies": {
|
|
39
|
-
"esbuild": "^0.15.3",
|
|
40
|
-
"typescript": "^4.7.4"
|
|
41
|
-
}
|
|
42
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "asharyu-design-token",
|
|
3
|
+
"version": "1.0.3",
|
|
4
|
+
"description": "design token",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"designtoken"
|
|
7
|
+
],
|
|
8
|
+
"author": "Isa <yunjonglyu@gmail.com> (yunjongryu)",
|
|
9
|
+
"homepage": "https://github.com/yoonjonglyu/asharyu-design#readme",
|
|
10
|
+
"license": "Apache-2.0",
|
|
11
|
+
"type": "module",
|
|
12
|
+
"main": "./dist/index.js",
|
|
13
|
+
"types": "./dist/index.d.ts",
|
|
14
|
+
"exports": {
|
|
15
|
+
".": "./dist/index.js",
|
|
16
|
+
"./index.css": "./dist/index.css"
|
|
17
|
+
},
|
|
18
|
+
"directories": {
|
|
19
|
+
"dist": "dist"
|
|
20
|
+
},
|
|
21
|
+
"files": [
|
|
22
|
+
"dist"
|
|
23
|
+
],
|
|
24
|
+
"repository": {
|
|
25
|
+
"type": "git",
|
|
26
|
+
"url": "git+https://github.com/yoonjonglyu/asharyu-design.git"
|
|
27
|
+
},
|
|
28
|
+
"scripts": {
|
|
29
|
+
"build": "tsc && esbuild src/index.ts --bundle --format=esm --outdir=dist",
|
|
30
|
+
"postbuild": "node makeCSS.js"
|
|
31
|
+
},
|
|
32
|
+
"bugs": {
|
|
33
|
+
"url": "https://github.com/yoonjonglyu/asharyu-design/issues"
|
|
34
|
+
},
|
|
35
|
+
"dependencies": {
|
|
36
|
+
"normalize.css": "^8.0.1"
|
|
37
|
+
},
|
|
38
|
+
"devDependencies": {
|
|
39
|
+
"esbuild": "^0.15.3",
|
|
40
|
+
"typescript": "^4.7.4"
|
|
41
|
+
}
|
|
42
|
+
}
|