@causw/tokens 0.0.8 → 0.0.9
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 +151 -0
- package/dist/index.d.mts +49 -72
- package/dist/index.d.ts +49 -72
- package/dist/index.js +63 -99
- package/dist/index.mjs +63 -99
- package/package.json +6 -1
package/README.md
ADDED
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
# @causw/tokens
|
|
2
|
+
|
|
3
|
+
CAUSW Design System의 디자인 토큰 패키지입니다.
|
|
4
|
+
|
|
5
|
+
## 사용 가능한 Tailwind 클래스
|
|
6
|
+
|
|
7
|
+
### Colors
|
|
8
|
+
|
|
9
|
+
| 클래스 | 설명 |
|
|
10
|
+
|--------|------|
|
|
11
|
+
| `bg-blue-50`, `text-blue-500`, `border-blue-700` | Blue 계열 (#EEF4FF, #4F98FF, #237EFF) |
|
|
12
|
+
| `bg-gray-50` ~ `bg-gray-900` | Gray 계열 (9단계) |
|
|
13
|
+
| `bg-red-100`, `bg-red-400` | Red 계열 |
|
|
14
|
+
| `bg-white-main`, `bg-black-main` | 흰색/검정색 |
|
|
15
|
+
|
|
16
|
+
```tsx
|
|
17
|
+
// 배경색
|
|
18
|
+
<div className="bg-blue-500">Primary Background</div>
|
|
19
|
+
<div className="bg-gray-100">Light Gray Background</div>
|
|
20
|
+
|
|
21
|
+
// 텍스트 색상
|
|
22
|
+
<p className="text-gray-900">Dark Text</p>
|
|
23
|
+
<p className="text-blue-700">Accent Text</p>
|
|
24
|
+
|
|
25
|
+
// 테두리 색상
|
|
26
|
+
<div className="border border-gray-200">Subtle Border</div>
|
|
27
|
+
<button className="border-2 border-blue-500">Primary Border</button>
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
### Typography
|
|
31
|
+
|
|
32
|
+
> **💡 권장사항**: 타이포그래피는 가능하면 토큰을 직접 사용하지 말고 `@causw/components`의 **`<Text>` 컴포넌트**를 활용하세요.
|
|
33
|
+
|
|
34
|
+
```tsx
|
|
35
|
+
import { Text } from '@causw/components';
|
|
36
|
+
|
|
37
|
+
// 권장: Text 컴포넌트 사용
|
|
38
|
+
<Text variant="body" size="sm">일반 본문</Text>
|
|
39
|
+
<Text variant="title" size="md" as="h1">제목</Text>
|
|
40
|
+
<Text variant="body" size="sm" point>강조 본문</Text>
|
|
41
|
+
|
|
42
|
+
// 비권장: Tailwind 클래스 직접 사용
|
|
43
|
+
<p className="font-sans text-[16px] font-normal">...</p>
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
Text 컴포넌트의 variant 옵션: `caption`, `body2`, `body`, `subtitle`, `title`, `head`, `fixed`
|
|
47
|
+
|
|
48
|
+
### Border Radius
|
|
49
|
+
|
|
50
|
+
| 클래스 | 값 | px |
|
|
51
|
+
|--------|----|----|
|
|
52
|
+
| `rounded-xs` | 0.25rem | 4px |
|
|
53
|
+
| `rounded-sm` | 0.5rem | 8px |
|
|
54
|
+
| `rounded-md` | 0.75rem | 12px |
|
|
55
|
+
| `rounded-lg` | 1rem | 16px |
|
|
56
|
+
| `rounded-xl` | 1.25rem | 20px |
|
|
57
|
+
| `rounded-2xl` | 1.5rem | 24px |
|
|
58
|
+
| `rounded-3xl` | 2rem | 32px |
|
|
59
|
+
|
|
60
|
+
```tsx
|
|
61
|
+
// 카드
|
|
62
|
+
<div className="rounded-lg bg-white border border-gray-200">
|
|
63
|
+
Card with 16px radius
|
|
64
|
+
</div>
|
|
65
|
+
|
|
66
|
+
// 버튼
|
|
67
|
+
<button className="rounded-md bg-blue-500 text-white">
|
|
68
|
+
Button with 12px radius
|
|
69
|
+
</button>
|
|
70
|
+
|
|
71
|
+
// 아바타/뱃지 (완전 원형)
|
|
72
|
+
<div className="rounded-full bg-gray-200">Avatar</div>
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
## 토큰 직접 사용
|
|
76
|
+
|
|
77
|
+
```typescript
|
|
78
|
+
import { colors, typography, borderRadius } from '@causw/tokens';
|
|
79
|
+
|
|
80
|
+
// Colors
|
|
81
|
+
colors.blue[500] // '#4F98FF'
|
|
82
|
+
colors.gray[900] // '#101828'
|
|
83
|
+
|
|
84
|
+
// Typography
|
|
85
|
+
typography.fontFamily.sans // 'Pretendard, ...'
|
|
86
|
+
typography.fontSize[16] // '1rem'
|
|
87
|
+
typography.fontWeight.bold // '700'
|
|
88
|
+
|
|
89
|
+
// Border Radius
|
|
90
|
+
borderRadius.md // '0.75rem'
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
## Exports
|
|
94
|
+
|
|
95
|
+
| 경로 | 내용 |
|
|
96
|
+
|------|------|
|
|
97
|
+
| `@causw/tokens` | colors, typography, borderRadius, causwPreset, causwContent |
|
|
98
|
+
| `@causw/tokens/config` | causwPreset, causwContent |
|
|
99
|
+
|
|
100
|
+
## 토큰 구조
|
|
101
|
+
|
|
102
|
+
<details>
|
|
103
|
+
<summary>Colors</summary>
|
|
104
|
+
|
|
105
|
+
```typescript
|
|
106
|
+
const colors = {
|
|
107
|
+
blue: { 50: '#EEF4FF', 500: '#4F98FF', 700: '#237EFF' },
|
|
108
|
+
gray: { 50: '#F9FAFB', 100: '#F5F6F8', 200: '#E9ECF2', 300: '#CACED5',
|
|
109
|
+
400: '#99A1AF', 500: '#6A7282', 600: '#4A5565', 700: '#364153',
|
|
110
|
+
800: '#1E2939', 900: '#101828' },
|
|
111
|
+
red: { 100: '#FFEFEF', 400: '#FD5C5F' },
|
|
112
|
+
white: { main: '#FFFFFF' },
|
|
113
|
+
black: { main: '#000000' },
|
|
114
|
+
};
|
|
115
|
+
```
|
|
116
|
+
</details>
|
|
117
|
+
|
|
118
|
+
<details>
|
|
119
|
+
<summary>Typography</summary>
|
|
120
|
+
|
|
121
|
+
```typescript
|
|
122
|
+
const typography = {
|
|
123
|
+
fontFamily: {
|
|
124
|
+
sans: 'Pretendard, "Pretendard Variable", -apple-system, ..., sans-serif',
|
|
125
|
+
mono: 'Pretendard, "Pretendard Variable", ui-monospace, ..., monospace',
|
|
126
|
+
serif: 'Pretendard, "Pretendard Variable", ui-serif, ..., serif',
|
|
127
|
+
},
|
|
128
|
+
fontSize: { 12: '0.75rem', 14: '0.875rem', 15: '0.9375rem', 16: '1rem',
|
|
129
|
+
18: '1.125rem', 20: '1.25rem', 22: '1.375rem', 24: '1.5rem',
|
|
130
|
+
30: '1.875rem', 32: '2rem', 48: '3rem' },
|
|
131
|
+
fontWeight: { regular: '400', medium: '500', semibold: '600', bold: '700' },
|
|
132
|
+
lineHeight: { tight: '1.5', normal: '1.6' },
|
|
133
|
+
};
|
|
134
|
+
```
|
|
135
|
+
</details>
|
|
136
|
+
|
|
137
|
+
<details>
|
|
138
|
+
<summary>Border Radius</summary>
|
|
139
|
+
|
|
140
|
+
```typescript
|
|
141
|
+
const borderRadius = {
|
|
142
|
+
xs: '0.25rem', // 4px
|
|
143
|
+
sm: '0.5rem', // 8px
|
|
144
|
+
md: '0.75rem', // 12px
|
|
145
|
+
lg: '1rem', // 16px
|
|
146
|
+
xl: '1.25rem', // 20px
|
|
147
|
+
'2xl': '1.5rem', // 24px
|
|
148
|
+
'3xl': '2rem', // 32px
|
|
149
|
+
};
|
|
150
|
+
```
|
|
151
|
+
</details>
|
package/dist/index.d.mts
CHANGED
|
@@ -1,96 +1,73 @@
|
|
|
1
1
|
import { Config } from 'tailwindcss';
|
|
2
2
|
|
|
3
|
+
declare const borderRadius: {
|
|
4
|
+
readonly xs: "0.25rem";
|
|
5
|
+
readonly sm: "0.5rem";
|
|
6
|
+
readonly md: "0.75rem";
|
|
7
|
+
readonly lg: "1rem";
|
|
8
|
+
readonly xl: "1.25rem";
|
|
9
|
+
readonly '2xl': "1.5rem";
|
|
10
|
+
readonly '3xl': "2rem";
|
|
11
|
+
};
|
|
12
|
+
|
|
3
13
|
declare const colors: {
|
|
4
|
-
readonly
|
|
5
|
-
readonly 50: "#
|
|
6
|
-
readonly
|
|
7
|
-
readonly
|
|
8
|
-
readonly 300: "#64b5f6";
|
|
9
|
-
readonly 400: "#42a5f5";
|
|
10
|
-
readonly 500: "#2196f3";
|
|
11
|
-
readonly 600: "#1e88e5";
|
|
12
|
-
readonly 700: "#1976d2";
|
|
13
|
-
readonly 800: "#1565c0";
|
|
14
|
-
readonly 900: "#0d47a1";
|
|
14
|
+
readonly blue: {
|
|
15
|
+
readonly 50: "#EEF4FF";
|
|
16
|
+
readonly 500: "#4F98FF";
|
|
17
|
+
readonly 700: "#237EFF";
|
|
15
18
|
};
|
|
16
19
|
readonly gray: {
|
|
17
|
-
readonly 50: "#
|
|
18
|
-
readonly 100: "#
|
|
19
|
-
readonly 200: "#
|
|
20
|
-
readonly 300: "#
|
|
21
|
-
readonly 400: "#
|
|
22
|
-
readonly 500: "#
|
|
23
|
-
readonly 600: "#
|
|
24
|
-
readonly 700: "#
|
|
25
|
-
readonly 800: "#
|
|
26
|
-
readonly 900: "#
|
|
27
|
-
};
|
|
28
|
-
readonly success: {
|
|
29
|
-
readonly main: "#4caf50";
|
|
30
|
-
readonly light: "#81c784";
|
|
31
|
-
readonly dark: "#388e3c";
|
|
20
|
+
readonly 50: "#F9FAFB";
|
|
21
|
+
readonly 100: "#F5F6F8";
|
|
22
|
+
readonly 200: "#E9ECF2";
|
|
23
|
+
readonly 300: "#CACED5";
|
|
24
|
+
readonly 400: "#99A1AF";
|
|
25
|
+
readonly 500: "#6A7282";
|
|
26
|
+
readonly 600: "#4A5565";
|
|
27
|
+
readonly 700: "#364153";
|
|
28
|
+
readonly 800: "#1E2939";
|
|
29
|
+
readonly 900: "#101828";
|
|
32
30
|
};
|
|
33
|
-
readonly
|
|
34
|
-
readonly
|
|
35
|
-
readonly
|
|
36
|
-
readonly dark: "#d32f2f";
|
|
31
|
+
readonly red: {
|
|
32
|
+
readonly 100: "#FFEFEF";
|
|
33
|
+
readonly 400: "#FD5C5F";
|
|
37
34
|
};
|
|
38
|
-
readonly
|
|
39
|
-
readonly main: "#
|
|
40
|
-
readonly light: "#ffb74d";
|
|
41
|
-
readonly dark: "#f57c00";
|
|
35
|
+
readonly white: {
|
|
36
|
+
readonly main: "#FFEFEF";
|
|
42
37
|
};
|
|
43
|
-
readonly
|
|
44
|
-
readonly main: "#
|
|
45
|
-
readonly light: "#64b5f6";
|
|
46
|
-
readonly dark: "#1976d2";
|
|
38
|
+
readonly black: {
|
|
39
|
+
readonly main: "#000000";
|
|
47
40
|
};
|
|
48
41
|
};
|
|
49
42
|
|
|
50
|
-
declare const spacing: {
|
|
51
|
-
readonly 0: "0";
|
|
52
|
-
readonly 1: "0.25rem";
|
|
53
|
-
readonly 2: "0.5rem";
|
|
54
|
-
readonly 3: "0.75rem";
|
|
55
|
-
readonly 4: "1rem";
|
|
56
|
-
readonly 5: "1.25rem";
|
|
57
|
-
readonly 6: "1.5rem";
|
|
58
|
-
readonly 8: "2rem";
|
|
59
|
-
readonly 10: "2.5rem";
|
|
60
|
-
readonly 12: "3rem";
|
|
61
|
-
readonly 16: "4rem";
|
|
62
|
-
readonly 20: "5rem";
|
|
63
|
-
readonly 24: "6rem";
|
|
64
|
-
};
|
|
65
|
-
|
|
66
43
|
declare const typography: {
|
|
67
44
|
readonly fontFamily: {
|
|
68
|
-
readonly
|
|
69
|
-
readonly mono: "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace";
|
|
45
|
+
readonly sans: "Pretendard, \"Pretendard Variable\", -apple-system, BlinkMacSystemFont, system-ui, Roboto, \"Helvetica Neue\", \"Segoe UI\", \"Apple SD Gothic Neo\", \"Noto Sans KR\", \"Malgun Gothic\", \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", sans-serif";
|
|
46
|
+
readonly mono: "Pretendard, \"Pretendard Variable\", ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace";
|
|
47
|
+
readonly serif: "Pretendard, \"Pretendard Variable\", ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif";
|
|
70
48
|
};
|
|
71
49
|
readonly fontSize: {
|
|
72
|
-
readonly
|
|
73
|
-
readonly
|
|
74
|
-
readonly
|
|
75
|
-
readonly
|
|
76
|
-
readonly
|
|
77
|
-
readonly
|
|
78
|
-
readonly
|
|
79
|
-
readonly
|
|
80
|
-
readonly
|
|
50
|
+
readonly 12: "0.75rem";
|
|
51
|
+
readonly 14: "0.875rem";
|
|
52
|
+
readonly 15: "0.9375rem";
|
|
53
|
+
readonly 16: "1rem";
|
|
54
|
+
readonly 18: "1.125rem";
|
|
55
|
+
readonly 20: "1.25rem";
|
|
56
|
+
readonly 22: "1.375rem";
|
|
57
|
+
readonly 24: "1.5rem";
|
|
58
|
+
readonly 30: "1.875rem";
|
|
59
|
+
readonly 32: "2rem";
|
|
60
|
+
readonly 48: "3rem";
|
|
81
61
|
};
|
|
82
62
|
readonly fontWeight: {
|
|
83
|
-
readonly
|
|
63
|
+
readonly regular: "400";
|
|
84
64
|
readonly medium: "500";
|
|
85
65
|
readonly semibold: "600";
|
|
86
66
|
readonly bold: "700";
|
|
87
67
|
};
|
|
88
68
|
readonly lineHeight: {
|
|
89
|
-
readonly
|
|
90
|
-
readonly
|
|
91
|
-
readonly normal: "1.5";
|
|
92
|
-
readonly relaxed: "1.75";
|
|
93
|
-
readonly loose: "2";
|
|
69
|
+
readonly tight: "1.5";
|
|
70
|
+
readonly normal: "1.6";
|
|
94
71
|
};
|
|
95
72
|
};
|
|
96
73
|
|
|
@@ -112,4 +89,4 @@ declare const causwContent: string[];
|
|
|
112
89
|
*/
|
|
113
90
|
declare const causwPreset: Partial<Config>;
|
|
114
91
|
|
|
115
|
-
export { causwContent, causwPreset, colors,
|
|
92
|
+
export { borderRadius, causwContent, causwPreset, colors, typography };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,96 +1,73 @@
|
|
|
1
1
|
import { Config } from 'tailwindcss';
|
|
2
2
|
|
|
3
|
+
declare const borderRadius: {
|
|
4
|
+
readonly xs: "0.25rem";
|
|
5
|
+
readonly sm: "0.5rem";
|
|
6
|
+
readonly md: "0.75rem";
|
|
7
|
+
readonly lg: "1rem";
|
|
8
|
+
readonly xl: "1.25rem";
|
|
9
|
+
readonly '2xl': "1.5rem";
|
|
10
|
+
readonly '3xl': "2rem";
|
|
11
|
+
};
|
|
12
|
+
|
|
3
13
|
declare const colors: {
|
|
4
|
-
readonly
|
|
5
|
-
readonly 50: "#
|
|
6
|
-
readonly
|
|
7
|
-
readonly
|
|
8
|
-
readonly 300: "#64b5f6";
|
|
9
|
-
readonly 400: "#42a5f5";
|
|
10
|
-
readonly 500: "#2196f3";
|
|
11
|
-
readonly 600: "#1e88e5";
|
|
12
|
-
readonly 700: "#1976d2";
|
|
13
|
-
readonly 800: "#1565c0";
|
|
14
|
-
readonly 900: "#0d47a1";
|
|
14
|
+
readonly blue: {
|
|
15
|
+
readonly 50: "#EEF4FF";
|
|
16
|
+
readonly 500: "#4F98FF";
|
|
17
|
+
readonly 700: "#237EFF";
|
|
15
18
|
};
|
|
16
19
|
readonly gray: {
|
|
17
|
-
readonly 50: "#
|
|
18
|
-
readonly 100: "#
|
|
19
|
-
readonly 200: "#
|
|
20
|
-
readonly 300: "#
|
|
21
|
-
readonly 400: "#
|
|
22
|
-
readonly 500: "#
|
|
23
|
-
readonly 600: "#
|
|
24
|
-
readonly 700: "#
|
|
25
|
-
readonly 800: "#
|
|
26
|
-
readonly 900: "#
|
|
27
|
-
};
|
|
28
|
-
readonly success: {
|
|
29
|
-
readonly main: "#4caf50";
|
|
30
|
-
readonly light: "#81c784";
|
|
31
|
-
readonly dark: "#388e3c";
|
|
20
|
+
readonly 50: "#F9FAFB";
|
|
21
|
+
readonly 100: "#F5F6F8";
|
|
22
|
+
readonly 200: "#E9ECF2";
|
|
23
|
+
readonly 300: "#CACED5";
|
|
24
|
+
readonly 400: "#99A1AF";
|
|
25
|
+
readonly 500: "#6A7282";
|
|
26
|
+
readonly 600: "#4A5565";
|
|
27
|
+
readonly 700: "#364153";
|
|
28
|
+
readonly 800: "#1E2939";
|
|
29
|
+
readonly 900: "#101828";
|
|
32
30
|
};
|
|
33
|
-
readonly
|
|
34
|
-
readonly
|
|
35
|
-
readonly
|
|
36
|
-
readonly dark: "#d32f2f";
|
|
31
|
+
readonly red: {
|
|
32
|
+
readonly 100: "#FFEFEF";
|
|
33
|
+
readonly 400: "#FD5C5F";
|
|
37
34
|
};
|
|
38
|
-
readonly
|
|
39
|
-
readonly main: "#
|
|
40
|
-
readonly light: "#ffb74d";
|
|
41
|
-
readonly dark: "#f57c00";
|
|
35
|
+
readonly white: {
|
|
36
|
+
readonly main: "#FFEFEF";
|
|
42
37
|
};
|
|
43
|
-
readonly
|
|
44
|
-
readonly main: "#
|
|
45
|
-
readonly light: "#64b5f6";
|
|
46
|
-
readonly dark: "#1976d2";
|
|
38
|
+
readonly black: {
|
|
39
|
+
readonly main: "#000000";
|
|
47
40
|
};
|
|
48
41
|
};
|
|
49
42
|
|
|
50
|
-
declare const spacing: {
|
|
51
|
-
readonly 0: "0";
|
|
52
|
-
readonly 1: "0.25rem";
|
|
53
|
-
readonly 2: "0.5rem";
|
|
54
|
-
readonly 3: "0.75rem";
|
|
55
|
-
readonly 4: "1rem";
|
|
56
|
-
readonly 5: "1.25rem";
|
|
57
|
-
readonly 6: "1.5rem";
|
|
58
|
-
readonly 8: "2rem";
|
|
59
|
-
readonly 10: "2.5rem";
|
|
60
|
-
readonly 12: "3rem";
|
|
61
|
-
readonly 16: "4rem";
|
|
62
|
-
readonly 20: "5rem";
|
|
63
|
-
readonly 24: "6rem";
|
|
64
|
-
};
|
|
65
|
-
|
|
66
43
|
declare const typography: {
|
|
67
44
|
readonly fontFamily: {
|
|
68
|
-
readonly
|
|
69
|
-
readonly mono: "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace";
|
|
45
|
+
readonly sans: "Pretendard, \"Pretendard Variable\", -apple-system, BlinkMacSystemFont, system-ui, Roboto, \"Helvetica Neue\", \"Segoe UI\", \"Apple SD Gothic Neo\", \"Noto Sans KR\", \"Malgun Gothic\", \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", sans-serif";
|
|
46
|
+
readonly mono: "Pretendard, \"Pretendard Variable\", ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace";
|
|
47
|
+
readonly serif: "Pretendard, \"Pretendard Variable\", ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif";
|
|
70
48
|
};
|
|
71
49
|
readonly fontSize: {
|
|
72
|
-
readonly
|
|
73
|
-
readonly
|
|
74
|
-
readonly
|
|
75
|
-
readonly
|
|
76
|
-
readonly
|
|
77
|
-
readonly
|
|
78
|
-
readonly
|
|
79
|
-
readonly
|
|
80
|
-
readonly
|
|
50
|
+
readonly 12: "0.75rem";
|
|
51
|
+
readonly 14: "0.875rem";
|
|
52
|
+
readonly 15: "0.9375rem";
|
|
53
|
+
readonly 16: "1rem";
|
|
54
|
+
readonly 18: "1.125rem";
|
|
55
|
+
readonly 20: "1.25rem";
|
|
56
|
+
readonly 22: "1.375rem";
|
|
57
|
+
readonly 24: "1.5rem";
|
|
58
|
+
readonly 30: "1.875rem";
|
|
59
|
+
readonly 32: "2rem";
|
|
60
|
+
readonly 48: "3rem";
|
|
81
61
|
};
|
|
82
62
|
readonly fontWeight: {
|
|
83
|
-
readonly
|
|
63
|
+
readonly regular: "400";
|
|
84
64
|
readonly medium: "500";
|
|
85
65
|
readonly semibold: "600";
|
|
86
66
|
readonly bold: "700";
|
|
87
67
|
};
|
|
88
68
|
readonly lineHeight: {
|
|
89
|
-
readonly
|
|
90
|
-
readonly
|
|
91
|
-
readonly normal: "1.5";
|
|
92
|
-
readonly relaxed: "1.75";
|
|
93
|
-
readonly loose: "2";
|
|
69
|
+
readonly tight: "1.5";
|
|
70
|
+
readonly normal: "1.6";
|
|
94
71
|
};
|
|
95
72
|
};
|
|
96
73
|
|
|
@@ -112,4 +89,4 @@ declare const causwContent: string[];
|
|
|
112
89
|
*/
|
|
113
90
|
declare const causwPreset: Partial<Config>;
|
|
114
91
|
|
|
115
|
-
export { causwContent, causwPreset, colors,
|
|
92
|
+
export { borderRadius, causwContent, causwPreset, colors, typography };
|
package/dist/index.js
CHANGED
|
@@ -1,120 +1,83 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
// src/
|
|
4
|
-
var
|
|
5
|
-
|
|
6
|
-
50: "#e3f2fd",
|
|
7
|
-
100: "#bbdefb",
|
|
8
|
-
200: "#90caf9",
|
|
9
|
-
300: "#64b5f6",
|
|
10
|
-
400: "#42a5f5",
|
|
11
|
-
500: "#2196f3",
|
|
12
|
-
600: "#1e88e5",
|
|
13
|
-
700: "#1976d2",
|
|
14
|
-
800: "#1565c0",
|
|
15
|
-
900: "#0d47a1"
|
|
16
|
-
},
|
|
17
|
-
gray: {
|
|
18
|
-
50: "#fafafa",
|
|
19
|
-
100: "#f5f5f5",
|
|
20
|
-
200: "#eeeeee",
|
|
21
|
-
300: "#e0e0e0",
|
|
22
|
-
400: "#bdbdbd",
|
|
23
|
-
500: "#9e9e9e",
|
|
24
|
-
600: "#757575",
|
|
25
|
-
700: "#616161",
|
|
26
|
-
800: "#424242",
|
|
27
|
-
900: "#212121"
|
|
28
|
-
},
|
|
29
|
-
success: {
|
|
30
|
-
main: "#4caf50",
|
|
31
|
-
light: "#81c784",
|
|
32
|
-
dark: "#388e3c"
|
|
33
|
-
},
|
|
34
|
-
error: {
|
|
35
|
-
main: "#f44336",
|
|
36
|
-
light: "#e57373",
|
|
37
|
-
dark: "#d32f2f"
|
|
38
|
-
},
|
|
39
|
-
warning: {
|
|
40
|
-
main: "#ff9800",
|
|
41
|
-
light: "#ffb74d",
|
|
42
|
-
dark: "#f57c00"
|
|
43
|
-
},
|
|
44
|
-
info: {
|
|
45
|
-
main: "#2196f3",
|
|
46
|
-
light: "#64b5f6",
|
|
47
|
-
dark: "#1976d2"
|
|
48
|
-
}
|
|
49
|
-
};
|
|
50
|
-
|
|
51
|
-
// src/tokens/spacing.ts
|
|
52
|
-
var spacing = {
|
|
53
|
-
0: "0",
|
|
54
|
-
1: "0.25rem",
|
|
3
|
+
// src/foundations/borderRadius.ts
|
|
4
|
+
var borderRadius = {
|
|
5
|
+
xs: "0.25rem",
|
|
55
6
|
// 4px
|
|
56
|
-
|
|
7
|
+
sm: "0.5rem",
|
|
57
8
|
// 8px
|
|
58
|
-
|
|
9
|
+
md: "0.75rem",
|
|
59
10
|
// 12px
|
|
60
|
-
|
|
11
|
+
lg: "1rem",
|
|
61
12
|
// 16px
|
|
62
|
-
|
|
13
|
+
xl: "1.25rem",
|
|
63
14
|
// 20px
|
|
64
|
-
|
|
15
|
+
"2xl": "1.5rem",
|
|
65
16
|
// 24px
|
|
66
|
-
|
|
17
|
+
"3xl": "2rem"
|
|
67
18
|
// 32px
|
|
68
|
-
10: "2.5rem",
|
|
69
|
-
// 40px
|
|
70
|
-
12: "3rem",
|
|
71
|
-
// 48px
|
|
72
|
-
16: "4rem",
|
|
73
|
-
// 64px
|
|
74
|
-
20: "5rem",
|
|
75
|
-
// 80px
|
|
76
|
-
24: "6rem"
|
|
77
|
-
// 96px
|
|
78
19
|
};
|
|
79
20
|
|
|
80
|
-
// src/
|
|
21
|
+
// src/foundations/colors.ts
|
|
22
|
+
var colors = {
|
|
23
|
+
blue: {
|
|
24
|
+
50: "#EEF4FF",
|
|
25
|
+
500: "#4F98FF",
|
|
26
|
+
700: "#237EFF"
|
|
27
|
+
},
|
|
28
|
+
gray: {
|
|
29
|
+
50: "#F9FAFB",
|
|
30
|
+
100: "#F5F6F8",
|
|
31
|
+
200: "#E9ECF2",
|
|
32
|
+
300: "#CACED5",
|
|
33
|
+
400: "#99A1AF",
|
|
34
|
+
500: "#6A7282",
|
|
35
|
+
600: "#4A5565",
|
|
36
|
+
700: "#364153",
|
|
37
|
+
800: "#1E2939",
|
|
38
|
+
900: "#101828"
|
|
39
|
+
},
|
|
40
|
+
red: {
|
|
41
|
+
100: "#FFEFEF",
|
|
42
|
+
400: "#FD5C5F"
|
|
43
|
+
},
|
|
44
|
+
white: {
|
|
45
|
+
main: "#FFEFEF"
|
|
46
|
+
},
|
|
47
|
+
black: {
|
|
48
|
+
main: "#000000"
|
|
49
|
+
}
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
// src/foundations/typography.ts
|
|
81
53
|
var typography = {
|
|
82
54
|
fontFamily: {
|
|
83
|
-
|
|
84
|
-
mono: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace'
|
|
55
|
+
sans: 'Pretendard, "Pretendard Variable", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif',
|
|
56
|
+
mono: 'Pretendard, "Pretendard Variable", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace',
|
|
57
|
+
serif: 'Pretendard, "Pretendard Variable", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif'
|
|
85
58
|
},
|
|
86
59
|
fontSize: {
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
// 24px
|
|
99
|
-
"3xl": "1.875rem",
|
|
100
|
-
// 30px
|
|
101
|
-
"4xl": "2.25rem",
|
|
102
|
-
// 36px
|
|
103
|
-
"5xl": "3rem"
|
|
104
|
-
// 48px
|
|
60
|
+
12: "0.75rem",
|
|
61
|
+
14: "0.875rem",
|
|
62
|
+
15: "0.9375rem",
|
|
63
|
+
16: "1rem",
|
|
64
|
+
18: "1.125rem",
|
|
65
|
+
20: "1.25rem",
|
|
66
|
+
22: "1.375rem",
|
|
67
|
+
24: "1.5rem",
|
|
68
|
+
30: "1.875rem",
|
|
69
|
+
32: "2rem",
|
|
70
|
+
48: "3rem"
|
|
105
71
|
},
|
|
106
72
|
fontWeight: {
|
|
107
|
-
|
|
73
|
+
regular: "400",
|
|
108
74
|
medium: "500",
|
|
109
75
|
semibold: "600",
|
|
110
76
|
bold: "700"
|
|
111
77
|
},
|
|
112
78
|
lineHeight: {
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
normal: "1.5",
|
|
116
|
-
relaxed: "1.75",
|
|
117
|
-
loose: "2"
|
|
79
|
+
tight: "1.5",
|
|
80
|
+
normal: "1.6"
|
|
118
81
|
}
|
|
119
82
|
};
|
|
120
83
|
|
|
@@ -128,11 +91,12 @@ var causwContent = [
|
|
|
128
91
|
var causwPreset = {
|
|
129
92
|
theme: {
|
|
130
93
|
extend: {
|
|
94
|
+
borderRadius,
|
|
131
95
|
colors,
|
|
132
|
-
spacing,
|
|
133
96
|
fontFamily: {
|
|
134
|
-
sans: typography.fontFamily.
|
|
135
|
-
mono: typography.fontFamily.mono
|
|
97
|
+
sans: typography.fontFamily.sans,
|
|
98
|
+
mono: typography.fontFamily.mono,
|
|
99
|
+
serif: typography.fontFamily.serif
|
|
136
100
|
},
|
|
137
101
|
fontSize: typography.fontSize,
|
|
138
102
|
fontWeight: typography.fontWeight,
|
|
@@ -141,8 +105,8 @@ var causwPreset = {
|
|
|
141
105
|
}
|
|
142
106
|
};
|
|
143
107
|
|
|
108
|
+
exports.borderRadius = borderRadius;
|
|
144
109
|
exports.causwContent = causwContent;
|
|
145
110
|
exports.causwPreset = causwPreset;
|
|
146
111
|
exports.colors = colors;
|
|
147
|
-
exports.spacing = spacing;
|
|
148
112
|
exports.typography = typography;
|
package/dist/index.mjs
CHANGED
|
@@ -1,118 +1,81 @@
|
|
|
1
|
-
// src/
|
|
2
|
-
var
|
|
3
|
-
|
|
4
|
-
50: "#e3f2fd",
|
|
5
|
-
100: "#bbdefb",
|
|
6
|
-
200: "#90caf9",
|
|
7
|
-
300: "#64b5f6",
|
|
8
|
-
400: "#42a5f5",
|
|
9
|
-
500: "#2196f3",
|
|
10
|
-
600: "#1e88e5",
|
|
11
|
-
700: "#1976d2",
|
|
12
|
-
800: "#1565c0",
|
|
13
|
-
900: "#0d47a1"
|
|
14
|
-
},
|
|
15
|
-
gray: {
|
|
16
|
-
50: "#fafafa",
|
|
17
|
-
100: "#f5f5f5",
|
|
18
|
-
200: "#eeeeee",
|
|
19
|
-
300: "#e0e0e0",
|
|
20
|
-
400: "#bdbdbd",
|
|
21
|
-
500: "#9e9e9e",
|
|
22
|
-
600: "#757575",
|
|
23
|
-
700: "#616161",
|
|
24
|
-
800: "#424242",
|
|
25
|
-
900: "#212121"
|
|
26
|
-
},
|
|
27
|
-
success: {
|
|
28
|
-
main: "#4caf50",
|
|
29
|
-
light: "#81c784",
|
|
30
|
-
dark: "#388e3c"
|
|
31
|
-
},
|
|
32
|
-
error: {
|
|
33
|
-
main: "#f44336",
|
|
34
|
-
light: "#e57373",
|
|
35
|
-
dark: "#d32f2f"
|
|
36
|
-
},
|
|
37
|
-
warning: {
|
|
38
|
-
main: "#ff9800",
|
|
39
|
-
light: "#ffb74d",
|
|
40
|
-
dark: "#f57c00"
|
|
41
|
-
},
|
|
42
|
-
info: {
|
|
43
|
-
main: "#2196f3",
|
|
44
|
-
light: "#64b5f6",
|
|
45
|
-
dark: "#1976d2"
|
|
46
|
-
}
|
|
47
|
-
};
|
|
48
|
-
|
|
49
|
-
// src/tokens/spacing.ts
|
|
50
|
-
var spacing = {
|
|
51
|
-
0: "0",
|
|
52
|
-
1: "0.25rem",
|
|
1
|
+
// src/foundations/borderRadius.ts
|
|
2
|
+
var borderRadius = {
|
|
3
|
+
xs: "0.25rem",
|
|
53
4
|
// 4px
|
|
54
|
-
|
|
5
|
+
sm: "0.5rem",
|
|
55
6
|
// 8px
|
|
56
|
-
|
|
7
|
+
md: "0.75rem",
|
|
57
8
|
// 12px
|
|
58
|
-
|
|
9
|
+
lg: "1rem",
|
|
59
10
|
// 16px
|
|
60
|
-
|
|
11
|
+
xl: "1.25rem",
|
|
61
12
|
// 20px
|
|
62
|
-
|
|
13
|
+
"2xl": "1.5rem",
|
|
63
14
|
// 24px
|
|
64
|
-
|
|
15
|
+
"3xl": "2rem"
|
|
65
16
|
// 32px
|
|
66
|
-
10: "2.5rem",
|
|
67
|
-
// 40px
|
|
68
|
-
12: "3rem",
|
|
69
|
-
// 48px
|
|
70
|
-
16: "4rem",
|
|
71
|
-
// 64px
|
|
72
|
-
20: "5rem",
|
|
73
|
-
// 80px
|
|
74
|
-
24: "6rem"
|
|
75
|
-
// 96px
|
|
76
17
|
};
|
|
77
18
|
|
|
78
|
-
// src/
|
|
19
|
+
// src/foundations/colors.ts
|
|
20
|
+
var colors = {
|
|
21
|
+
blue: {
|
|
22
|
+
50: "#EEF4FF",
|
|
23
|
+
500: "#4F98FF",
|
|
24
|
+
700: "#237EFF"
|
|
25
|
+
},
|
|
26
|
+
gray: {
|
|
27
|
+
50: "#F9FAFB",
|
|
28
|
+
100: "#F5F6F8",
|
|
29
|
+
200: "#E9ECF2",
|
|
30
|
+
300: "#CACED5",
|
|
31
|
+
400: "#99A1AF",
|
|
32
|
+
500: "#6A7282",
|
|
33
|
+
600: "#4A5565",
|
|
34
|
+
700: "#364153",
|
|
35
|
+
800: "#1E2939",
|
|
36
|
+
900: "#101828"
|
|
37
|
+
},
|
|
38
|
+
red: {
|
|
39
|
+
100: "#FFEFEF",
|
|
40
|
+
400: "#FD5C5F"
|
|
41
|
+
},
|
|
42
|
+
white: {
|
|
43
|
+
main: "#FFEFEF"
|
|
44
|
+
},
|
|
45
|
+
black: {
|
|
46
|
+
main: "#000000"
|
|
47
|
+
}
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
// src/foundations/typography.ts
|
|
79
51
|
var typography = {
|
|
80
52
|
fontFamily: {
|
|
81
|
-
|
|
82
|
-
mono: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace'
|
|
53
|
+
sans: 'Pretendard, "Pretendard Variable", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif',
|
|
54
|
+
mono: 'Pretendard, "Pretendard Variable", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace',
|
|
55
|
+
serif: 'Pretendard, "Pretendard Variable", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif'
|
|
83
56
|
},
|
|
84
57
|
fontSize: {
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
// 24px
|
|
97
|
-
"3xl": "1.875rem",
|
|
98
|
-
// 30px
|
|
99
|
-
"4xl": "2.25rem",
|
|
100
|
-
// 36px
|
|
101
|
-
"5xl": "3rem"
|
|
102
|
-
// 48px
|
|
58
|
+
12: "0.75rem",
|
|
59
|
+
14: "0.875rem",
|
|
60
|
+
15: "0.9375rem",
|
|
61
|
+
16: "1rem",
|
|
62
|
+
18: "1.125rem",
|
|
63
|
+
20: "1.25rem",
|
|
64
|
+
22: "1.375rem",
|
|
65
|
+
24: "1.5rem",
|
|
66
|
+
30: "1.875rem",
|
|
67
|
+
32: "2rem",
|
|
68
|
+
48: "3rem"
|
|
103
69
|
},
|
|
104
70
|
fontWeight: {
|
|
105
|
-
|
|
71
|
+
regular: "400",
|
|
106
72
|
medium: "500",
|
|
107
73
|
semibold: "600",
|
|
108
74
|
bold: "700"
|
|
109
75
|
},
|
|
110
76
|
lineHeight: {
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
normal: "1.5",
|
|
114
|
-
relaxed: "1.75",
|
|
115
|
-
loose: "2"
|
|
77
|
+
tight: "1.5",
|
|
78
|
+
normal: "1.6"
|
|
116
79
|
}
|
|
117
80
|
};
|
|
118
81
|
|
|
@@ -126,11 +89,12 @@ var causwContent = [
|
|
|
126
89
|
var causwPreset = {
|
|
127
90
|
theme: {
|
|
128
91
|
extend: {
|
|
92
|
+
borderRadius,
|
|
129
93
|
colors,
|
|
130
|
-
spacing,
|
|
131
94
|
fontFamily: {
|
|
132
|
-
sans: typography.fontFamily.
|
|
133
|
-
mono: typography.fontFamily.mono
|
|
95
|
+
sans: typography.fontFamily.sans,
|
|
96
|
+
mono: typography.fontFamily.mono,
|
|
97
|
+
serif: typography.fontFamily.serif
|
|
134
98
|
},
|
|
135
99
|
fontSize: typography.fontSize,
|
|
136
100
|
fontWeight: typography.fontWeight,
|
|
@@ -139,4 +103,4 @@ var causwPreset = {
|
|
|
139
103
|
}
|
|
140
104
|
};
|
|
141
105
|
|
|
142
|
-
export { causwContent, causwPreset, colors,
|
|
106
|
+
export { borderRadius, causwContent, causwPreset, colors, typography };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@causw/tokens",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.9",
|
|
4
4
|
"description": "Design tokens for CAUSW Design System - CAU Software Community Service",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
@@ -10,6 +10,11 @@
|
|
|
10
10
|
"types": "./dist/index.d.ts",
|
|
11
11
|
"import": "./dist/index.mjs",
|
|
12
12
|
"require": "./dist/index.js"
|
|
13
|
+
},
|
|
14
|
+
"./config": {
|
|
15
|
+
"types": "./dist/config/index.d.ts",
|
|
16
|
+
"import": "./dist/config/index.mjs",
|
|
17
|
+
"require": "./dist/config/index.js"
|
|
13
18
|
}
|
|
14
19
|
},
|
|
15
20
|
"files": [
|