asharyu-design-token 1.0.0 → 1.0.1
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 +28 -0
- 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.d.ts +16 -134
- package/dist/index.js +2 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,6 +2,34 @@
|
|
|
2
2
|
|
|
3
3
|
> 디자인 토큰
|
|
4
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
|
+
|
|
5
33
|
## Concept
|
|
6
34
|
|
|
7
35
|
;
|
|
@@ -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.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: Readonly<import("./color").YinYangProps>;
|
|
8
|
+
fiveElements: Readonly<import("./color").FiveElementsProps>;
|
|
9
|
+
colorSchema: Readonly<import("./color/value").ColorValueProps>;
|
|
10
|
+
}>;
|
|
11
|
+
font: Readonly<{
|
|
12
|
+
fontSize: Readonly<import("./font").FontSizeProps>;
|
|
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
|
@@ -257,7 +257,8 @@ var fontSize = Object.freeze({
|
|
|
257
257
|
// src/index.ts
|
|
258
258
|
var color = Object.freeze({ yinYang, fiveElements, colorSchema });
|
|
259
259
|
var font = Object.freeze({ fontSize, fontSizeSchema });
|
|
260
|
-
var
|
|
260
|
+
var AsharyuDesignToken = { color, font };
|
|
261
|
+
var src_default = AsharyuDesignToken;
|
|
261
262
|
export {
|
|
262
263
|
colorSchema,
|
|
263
264
|
src_default as default,
|