@causw/tokens 0.0.8 → 0.0.10
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/chunk-5M6YEJA6.mjs +159 -0
- package/dist/config/index.d.mts +15 -0
- package/dist/config/index.d.ts +15 -0
- package/dist/config/index.js +165 -0
- package/dist/config/index.mjs +1 -0
- package/dist/index.d.mts +48 -88
- package/dist/index.d.ts +48 -88
- package/dist/index.js +99 -89
- package/dist/index.mjs +1 -142
- package/dist/tailwind-preset-Bz71olkK.d.mts +21 -0
- package/dist/tailwind-preset-Bz71olkK.d.ts +21 -0
- package/package.json +8 -3
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>
|
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
// src/config/tailwind-content/tailwind-content.ts
|
|
2
|
+
var causwContent = [
|
|
3
|
+
"./node_modules/@causw/core/dist/**/*.{js,mjs}",
|
|
4
|
+
"./node_modules/@causw/tokens/dist/**/*.{js,mjs}"
|
|
5
|
+
];
|
|
6
|
+
|
|
7
|
+
// src/foundations/borderRadius.ts
|
|
8
|
+
var borderRadius = {
|
|
9
|
+
xs: "0.25rem",
|
|
10
|
+
// 4px
|
|
11
|
+
sm: "0.5rem",
|
|
12
|
+
// 8px
|
|
13
|
+
md: "0.75rem",
|
|
14
|
+
// 12px
|
|
15
|
+
lg: "1rem",
|
|
16
|
+
// 16px
|
|
17
|
+
xl: "1.25rem",
|
|
18
|
+
// 20px
|
|
19
|
+
"2xl": "1.5rem",
|
|
20
|
+
// 24px
|
|
21
|
+
"3xl": "2rem"
|
|
22
|
+
// 32px
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
// src/foundations/colors.ts
|
|
26
|
+
var colors = {
|
|
27
|
+
blue: {
|
|
28
|
+
50: "#EEF4FF",
|
|
29
|
+
500: "#4F98FF",
|
|
30
|
+
700: "#237EFF"
|
|
31
|
+
},
|
|
32
|
+
gray: {
|
|
33
|
+
50: "#F9FAFB",
|
|
34
|
+
100: "#F5F6F8",
|
|
35
|
+
200: "#E9ECF2",
|
|
36
|
+
300: "#CACED5",
|
|
37
|
+
400: "#99A1AF",
|
|
38
|
+
500: "#6A7282",
|
|
39
|
+
600: "#4A5565",
|
|
40
|
+
700: "#364153",
|
|
41
|
+
800: "#1E2939",
|
|
42
|
+
900: "#101828"
|
|
43
|
+
},
|
|
44
|
+
red: {
|
|
45
|
+
100: "#FFEFEF",
|
|
46
|
+
400: "#FD5C5F"
|
|
47
|
+
},
|
|
48
|
+
white: {
|
|
49
|
+
main: "#FFEFEF"
|
|
50
|
+
},
|
|
51
|
+
black: {
|
|
52
|
+
main: "#000000"
|
|
53
|
+
}
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
// src/foundations/typography.ts
|
|
57
|
+
var typography = {
|
|
58
|
+
fontFamily: {
|
|
59
|
+
sans: [
|
|
60
|
+
"Pretendard",
|
|
61
|
+
"Pretendard Variable",
|
|
62
|
+
"-apple-system",
|
|
63
|
+
"BlinkMacSystemFont",
|
|
64
|
+
"system-ui",
|
|
65
|
+
"Roboto",
|
|
66
|
+
"Helvetica Neue",
|
|
67
|
+
"Segoe UI",
|
|
68
|
+
"Apple SD Gothic Neo",
|
|
69
|
+
"Noto Sans KR",
|
|
70
|
+
"Malgun Gothic",
|
|
71
|
+
"Apple Color Emoji",
|
|
72
|
+
"Segoe UI Emoji",
|
|
73
|
+
"Segoe UI Symbol",
|
|
74
|
+
"sans-serif"
|
|
75
|
+
],
|
|
76
|
+
mono: [
|
|
77
|
+
"Pretendard",
|
|
78
|
+
"Pretendard Variable",
|
|
79
|
+
"ui-monospace",
|
|
80
|
+
"SFMono-Regular",
|
|
81
|
+
"SF Mono",
|
|
82
|
+
"Menlo",
|
|
83
|
+
"Consolas",
|
|
84
|
+
"Liberation Mono",
|
|
85
|
+
"monospace"
|
|
86
|
+
],
|
|
87
|
+
serif: [
|
|
88
|
+
"Pretendard",
|
|
89
|
+
"Pretendard Variable",
|
|
90
|
+
"ui-serif",
|
|
91
|
+
"Georgia",
|
|
92
|
+
"Cambria",
|
|
93
|
+
"Times New Roman",
|
|
94
|
+
"Times",
|
|
95
|
+
"serif"
|
|
96
|
+
]
|
|
97
|
+
},
|
|
98
|
+
fontSize: {
|
|
99
|
+
"2xs": "0.75rem",
|
|
100
|
+
// 12px
|
|
101
|
+
xs: "0.875rem",
|
|
102
|
+
// 14px
|
|
103
|
+
sm: "0.9375rem",
|
|
104
|
+
// 15px
|
|
105
|
+
base: "1rem",
|
|
106
|
+
// 16px
|
|
107
|
+
lg: "1.125rem",
|
|
108
|
+
// 18px
|
|
109
|
+
xl: "1.25rem",
|
|
110
|
+
// 20px
|
|
111
|
+
"2xl": "1.375rem",
|
|
112
|
+
// 22px
|
|
113
|
+
"3xl": "1.5rem",
|
|
114
|
+
// 24px
|
|
115
|
+
"4xl": "1.875rem",
|
|
116
|
+
// 30px
|
|
117
|
+
"5xl": "2rem",
|
|
118
|
+
// 32px
|
|
119
|
+
"6xl": "3rem"
|
|
120
|
+
// 48px
|
|
121
|
+
},
|
|
122
|
+
fontWeight: {
|
|
123
|
+
regular: "400",
|
|
124
|
+
medium: "500",
|
|
125
|
+
semibold: "600",
|
|
126
|
+
bold: "700"
|
|
127
|
+
},
|
|
128
|
+
lineHeight: {
|
|
129
|
+
tight: "1.5",
|
|
130
|
+
normal: "1.6"
|
|
131
|
+
}
|
|
132
|
+
};
|
|
133
|
+
|
|
134
|
+
// src/config/tailwind-preset/tailwind-preset.ts
|
|
135
|
+
var causwPreset = {
|
|
136
|
+
theme: {
|
|
137
|
+
extend: {
|
|
138
|
+
borderRadius,
|
|
139
|
+
colors,
|
|
140
|
+
fontFamily: {
|
|
141
|
+
sans: typography.fontFamily.sans,
|
|
142
|
+
mono: typography.fontFamily.mono,
|
|
143
|
+
serif: typography.fontFamily.serif
|
|
144
|
+
},
|
|
145
|
+
fontSize: typography.fontSize,
|
|
146
|
+
fontWeight: typography.fontWeight,
|
|
147
|
+
lineHeight: typography.lineHeight
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
};
|
|
151
|
+
|
|
152
|
+
// src/config/index.ts
|
|
153
|
+
var causwConfig = {
|
|
154
|
+
content: causwContent,
|
|
155
|
+
presets: [causwPreset]
|
|
156
|
+
};
|
|
157
|
+
var config_default = causwConfig;
|
|
158
|
+
|
|
159
|
+
export { borderRadius, causwContent, causwPreset, colors, config_default, typography };
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { Config } from 'tailwindcss';
|
|
2
|
+
export { c as causwContent, a as causwPreset } from '../tailwind-preset-Bz71olkK.mjs';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Tailwind CSS 4 config for use with @config directive
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* ```css
|
|
9
|
+
* @import 'tailwindcss';
|
|
10
|
+
* @config '@causw/tokens/config';
|
|
11
|
+
* ```
|
|
12
|
+
*/
|
|
13
|
+
declare const causwConfig: Config;
|
|
14
|
+
|
|
15
|
+
export { causwConfig as default };
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { Config } from 'tailwindcss';
|
|
2
|
+
export { c as causwContent, a as causwPreset } from '../tailwind-preset-Bz71olkK.js';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Tailwind CSS 4 config for use with @config directive
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* ```css
|
|
9
|
+
* @import 'tailwindcss';
|
|
10
|
+
* @config '@causw/tokens/config';
|
|
11
|
+
* ```
|
|
12
|
+
*/
|
|
13
|
+
declare const causwConfig: Config;
|
|
14
|
+
|
|
15
|
+
export { causwConfig as default };
|
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
// src/config/tailwind-content/tailwind-content.ts
|
|
6
|
+
var causwContent = [
|
|
7
|
+
"./node_modules/@causw/core/dist/**/*.{js,mjs}",
|
|
8
|
+
"./node_modules/@causw/tokens/dist/**/*.{js,mjs}"
|
|
9
|
+
];
|
|
10
|
+
|
|
11
|
+
// src/foundations/borderRadius.ts
|
|
12
|
+
var borderRadius = {
|
|
13
|
+
xs: "0.25rem",
|
|
14
|
+
// 4px
|
|
15
|
+
sm: "0.5rem",
|
|
16
|
+
// 8px
|
|
17
|
+
md: "0.75rem",
|
|
18
|
+
// 12px
|
|
19
|
+
lg: "1rem",
|
|
20
|
+
// 16px
|
|
21
|
+
xl: "1.25rem",
|
|
22
|
+
// 20px
|
|
23
|
+
"2xl": "1.5rem",
|
|
24
|
+
// 24px
|
|
25
|
+
"3xl": "2rem"
|
|
26
|
+
// 32px
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
// src/foundations/colors.ts
|
|
30
|
+
var colors = {
|
|
31
|
+
blue: {
|
|
32
|
+
50: "#EEF4FF",
|
|
33
|
+
500: "#4F98FF",
|
|
34
|
+
700: "#237EFF"
|
|
35
|
+
},
|
|
36
|
+
gray: {
|
|
37
|
+
50: "#F9FAFB",
|
|
38
|
+
100: "#F5F6F8",
|
|
39
|
+
200: "#E9ECF2",
|
|
40
|
+
300: "#CACED5",
|
|
41
|
+
400: "#99A1AF",
|
|
42
|
+
500: "#6A7282",
|
|
43
|
+
600: "#4A5565",
|
|
44
|
+
700: "#364153",
|
|
45
|
+
800: "#1E2939",
|
|
46
|
+
900: "#101828"
|
|
47
|
+
},
|
|
48
|
+
red: {
|
|
49
|
+
100: "#FFEFEF",
|
|
50
|
+
400: "#FD5C5F"
|
|
51
|
+
},
|
|
52
|
+
white: {
|
|
53
|
+
main: "#FFEFEF"
|
|
54
|
+
},
|
|
55
|
+
black: {
|
|
56
|
+
main: "#000000"
|
|
57
|
+
}
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
// src/foundations/typography.ts
|
|
61
|
+
var typography = {
|
|
62
|
+
fontFamily: {
|
|
63
|
+
sans: [
|
|
64
|
+
"Pretendard",
|
|
65
|
+
"Pretendard Variable",
|
|
66
|
+
"-apple-system",
|
|
67
|
+
"BlinkMacSystemFont",
|
|
68
|
+
"system-ui",
|
|
69
|
+
"Roboto",
|
|
70
|
+
"Helvetica Neue",
|
|
71
|
+
"Segoe UI",
|
|
72
|
+
"Apple SD Gothic Neo",
|
|
73
|
+
"Noto Sans KR",
|
|
74
|
+
"Malgun Gothic",
|
|
75
|
+
"Apple Color Emoji",
|
|
76
|
+
"Segoe UI Emoji",
|
|
77
|
+
"Segoe UI Symbol",
|
|
78
|
+
"sans-serif"
|
|
79
|
+
],
|
|
80
|
+
mono: [
|
|
81
|
+
"Pretendard",
|
|
82
|
+
"Pretendard Variable",
|
|
83
|
+
"ui-monospace",
|
|
84
|
+
"SFMono-Regular",
|
|
85
|
+
"SF Mono",
|
|
86
|
+
"Menlo",
|
|
87
|
+
"Consolas",
|
|
88
|
+
"Liberation Mono",
|
|
89
|
+
"monospace"
|
|
90
|
+
],
|
|
91
|
+
serif: [
|
|
92
|
+
"Pretendard",
|
|
93
|
+
"Pretendard Variable",
|
|
94
|
+
"ui-serif",
|
|
95
|
+
"Georgia",
|
|
96
|
+
"Cambria",
|
|
97
|
+
"Times New Roman",
|
|
98
|
+
"Times",
|
|
99
|
+
"serif"
|
|
100
|
+
]
|
|
101
|
+
},
|
|
102
|
+
fontSize: {
|
|
103
|
+
"2xs": "0.75rem",
|
|
104
|
+
// 12px
|
|
105
|
+
xs: "0.875rem",
|
|
106
|
+
// 14px
|
|
107
|
+
sm: "0.9375rem",
|
|
108
|
+
// 15px
|
|
109
|
+
base: "1rem",
|
|
110
|
+
// 16px
|
|
111
|
+
lg: "1.125rem",
|
|
112
|
+
// 18px
|
|
113
|
+
xl: "1.25rem",
|
|
114
|
+
// 20px
|
|
115
|
+
"2xl": "1.375rem",
|
|
116
|
+
// 22px
|
|
117
|
+
"3xl": "1.5rem",
|
|
118
|
+
// 24px
|
|
119
|
+
"4xl": "1.875rem",
|
|
120
|
+
// 30px
|
|
121
|
+
"5xl": "2rem",
|
|
122
|
+
// 32px
|
|
123
|
+
"6xl": "3rem"
|
|
124
|
+
// 48px
|
|
125
|
+
},
|
|
126
|
+
fontWeight: {
|
|
127
|
+
regular: "400",
|
|
128
|
+
medium: "500",
|
|
129
|
+
semibold: "600",
|
|
130
|
+
bold: "700"
|
|
131
|
+
},
|
|
132
|
+
lineHeight: {
|
|
133
|
+
tight: "1.5",
|
|
134
|
+
normal: "1.6"
|
|
135
|
+
}
|
|
136
|
+
};
|
|
137
|
+
|
|
138
|
+
// src/config/tailwind-preset/tailwind-preset.ts
|
|
139
|
+
var causwPreset = {
|
|
140
|
+
theme: {
|
|
141
|
+
extend: {
|
|
142
|
+
borderRadius,
|
|
143
|
+
colors,
|
|
144
|
+
fontFamily: {
|
|
145
|
+
sans: typography.fontFamily.sans,
|
|
146
|
+
mono: typography.fontFamily.mono,
|
|
147
|
+
serif: typography.fontFamily.serif
|
|
148
|
+
},
|
|
149
|
+
fontSize: typography.fontSize,
|
|
150
|
+
fontWeight: typography.fontWeight,
|
|
151
|
+
lineHeight: typography.lineHeight
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
};
|
|
155
|
+
|
|
156
|
+
// src/config/index.ts
|
|
157
|
+
var causwConfig = {
|
|
158
|
+
content: causwContent,
|
|
159
|
+
presets: [causwPreset]
|
|
160
|
+
};
|
|
161
|
+
var config_default = causwConfig;
|
|
162
|
+
|
|
163
|
+
exports.causwContent = causwContent;
|
|
164
|
+
exports.causwPreset = causwPreset;
|
|
165
|
+
exports.default = config_default;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { causwContent, causwPreset, config_default as default } from '../chunk-5M6YEJA6.mjs';
|
package/dist/index.d.mts
CHANGED
|
@@ -1,115 +1,75 @@
|
|
|
1
|
-
|
|
1
|
+
export { c as causwContent, a as causwPreset } from './tailwind-preset-Bz71olkK.mjs';
|
|
2
|
+
import 'tailwindcss';
|
|
3
|
+
|
|
4
|
+
declare const borderRadius: {
|
|
5
|
+
readonly xs: "0.25rem";
|
|
6
|
+
readonly sm: "0.5rem";
|
|
7
|
+
readonly md: "0.75rem";
|
|
8
|
+
readonly lg: "1rem";
|
|
9
|
+
readonly xl: "1.25rem";
|
|
10
|
+
readonly '2xl': "1.5rem";
|
|
11
|
+
readonly '3xl': "2rem";
|
|
12
|
+
};
|
|
2
13
|
|
|
3
14
|
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";
|
|
15
|
+
readonly blue: {
|
|
16
|
+
readonly 50: "#EEF4FF";
|
|
17
|
+
readonly 500: "#4F98FF";
|
|
18
|
+
readonly 700: "#237EFF";
|
|
15
19
|
};
|
|
16
20
|
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: "#
|
|
21
|
+
readonly 50: "#F9FAFB";
|
|
22
|
+
readonly 100: "#F5F6F8";
|
|
23
|
+
readonly 200: "#E9ECF2";
|
|
24
|
+
readonly 300: "#CACED5";
|
|
25
|
+
readonly 400: "#99A1AF";
|
|
26
|
+
readonly 500: "#6A7282";
|
|
27
|
+
readonly 600: "#4A5565";
|
|
28
|
+
readonly 700: "#364153";
|
|
29
|
+
readonly 800: "#1E2939";
|
|
30
|
+
readonly 900: "#101828";
|
|
27
31
|
};
|
|
28
|
-
readonly
|
|
29
|
-
readonly
|
|
30
|
-
readonly
|
|
31
|
-
readonly dark: "#388e3c";
|
|
32
|
+
readonly red: {
|
|
33
|
+
readonly 100: "#FFEFEF";
|
|
34
|
+
readonly 400: "#FD5C5F";
|
|
32
35
|
};
|
|
33
|
-
readonly
|
|
34
|
-
readonly main: "#
|
|
35
|
-
readonly light: "#e57373";
|
|
36
|
-
readonly dark: "#d32f2f";
|
|
36
|
+
readonly white: {
|
|
37
|
+
readonly main: "#FFEFEF";
|
|
37
38
|
};
|
|
38
|
-
readonly
|
|
39
|
-
readonly main: "#
|
|
40
|
-
readonly light: "#ffb74d";
|
|
41
|
-
readonly dark: "#f57c00";
|
|
42
|
-
};
|
|
43
|
-
readonly info: {
|
|
44
|
-
readonly main: "#2196f3";
|
|
45
|
-
readonly light: "#64b5f6";
|
|
46
|
-
readonly dark: "#1976d2";
|
|
39
|
+
readonly black: {
|
|
40
|
+
readonly main: "#000000";
|
|
47
41
|
};
|
|
48
42
|
};
|
|
49
43
|
|
|
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
44
|
declare const typography: {
|
|
67
45
|
readonly fontFamily: {
|
|
68
|
-
readonly
|
|
69
|
-
readonly mono: "ui-monospace, SFMono-Regular,
|
|
46
|
+
readonly sans: readonly ["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"];
|
|
47
|
+
readonly mono: readonly ["Pretendard", "Pretendard Variable", "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas", "Liberation Mono", "monospace"];
|
|
48
|
+
readonly serif: readonly ["Pretendard", "Pretendard Variable", "ui-serif", "Georgia", "Cambria", "Times New Roman", "Times", "serif"];
|
|
70
49
|
};
|
|
71
50
|
readonly fontSize: {
|
|
72
|
-
readonly
|
|
73
|
-
readonly
|
|
51
|
+
readonly '2xs': "0.75rem";
|
|
52
|
+
readonly xs: "0.875rem";
|
|
53
|
+
readonly sm: "0.9375rem";
|
|
74
54
|
readonly base: "1rem";
|
|
75
55
|
readonly lg: "1.125rem";
|
|
76
56
|
readonly xl: "1.25rem";
|
|
77
|
-
readonly '2xl': "1.
|
|
78
|
-
readonly '3xl': "1.
|
|
79
|
-
readonly '4xl': "
|
|
80
|
-
readonly '5xl': "
|
|
57
|
+
readonly '2xl': "1.375rem";
|
|
58
|
+
readonly '3xl': "1.5rem";
|
|
59
|
+
readonly '4xl': "1.875rem";
|
|
60
|
+
readonly '5xl': "2rem";
|
|
61
|
+
readonly '6xl': "3rem";
|
|
81
62
|
};
|
|
82
63
|
readonly fontWeight: {
|
|
83
|
-
readonly
|
|
64
|
+
readonly regular: "400";
|
|
84
65
|
readonly medium: "500";
|
|
85
66
|
readonly semibold: "600";
|
|
86
67
|
readonly bold: "700";
|
|
87
68
|
};
|
|
88
69
|
readonly lineHeight: {
|
|
89
|
-
readonly
|
|
90
|
-
readonly
|
|
91
|
-
readonly normal: "1.5";
|
|
92
|
-
readonly relaxed: "1.75";
|
|
93
|
-
readonly loose: "2";
|
|
70
|
+
readonly tight: "1.5";
|
|
71
|
+
readonly normal: "1.6";
|
|
94
72
|
};
|
|
95
73
|
};
|
|
96
74
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
/**
|
|
100
|
-
* CAUSW Design System Tailwind CSS Preset
|
|
101
|
-
*
|
|
102
|
-
* @example
|
|
103
|
-
* ```ts
|
|
104
|
-
* // tailwind.config.ts
|
|
105
|
-
* import { causwPreset } from '@causw/design-system/tailwind-preset';
|
|
106
|
-
*
|
|
107
|
-
* export default {
|
|
108
|
-
* presets: [causwPreset],
|
|
109
|
-
* content: ['./src/**\/*.{js,ts,jsx,tsx}'],
|
|
110
|
-
* } satisfies Config;
|
|
111
|
-
* ```
|
|
112
|
-
*/
|
|
113
|
-
declare const causwPreset: Partial<Config>;
|
|
114
|
-
|
|
115
|
-
export { causwContent, causwPreset, colors, spacing, typography };
|
|
75
|
+
export { borderRadius, colors, typography };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,115 +1,75 @@
|
|
|
1
|
-
|
|
1
|
+
export { c as causwContent, a as causwPreset } from './tailwind-preset-Bz71olkK.js';
|
|
2
|
+
import 'tailwindcss';
|
|
3
|
+
|
|
4
|
+
declare const borderRadius: {
|
|
5
|
+
readonly xs: "0.25rem";
|
|
6
|
+
readonly sm: "0.5rem";
|
|
7
|
+
readonly md: "0.75rem";
|
|
8
|
+
readonly lg: "1rem";
|
|
9
|
+
readonly xl: "1.25rem";
|
|
10
|
+
readonly '2xl': "1.5rem";
|
|
11
|
+
readonly '3xl': "2rem";
|
|
12
|
+
};
|
|
2
13
|
|
|
3
14
|
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";
|
|
15
|
+
readonly blue: {
|
|
16
|
+
readonly 50: "#EEF4FF";
|
|
17
|
+
readonly 500: "#4F98FF";
|
|
18
|
+
readonly 700: "#237EFF";
|
|
15
19
|
};
|
|
16
20
|
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: "#
|
|
21
|
+
readonly 50: "#F9FAFB";
|
|
22
|
+
readonly 100: "#F5F6F8";
|
|
23
|
+
readonly 200: "#E9ECF2";
|
|
24
|
+
readonly 300: "#CACED5";
|
|
25
|
+
readonly 400: "#99A1AF";
|
|
26
|
+
readonly 500: "#6A7282";
|
|
27
|
+
readonly 600: "#4A5565";
|
|
28
|
+
readonly 700: "#364153";
|
|
29
|
+
readonly 800: "#1E2939";
|
|
30
|
+
readonly 900: "#101828";
|
|
27
31
|
};
|
|
28
|
-
readonly
|
|
29
|
-
readonly
|
|
30
|
-
readonly
|
|
31
|
-
readonly dark: "#388e3c";
|
|
32
|
+
readonly red: {
|
|
33
|
+
readonly 100: "#FFEFEF";
|
|
34
|
+
readonly 400: "#FD5C5F";
|
|
32
35
|
};
|
|
33
|
-
readonly
|
|
34
|
-
readonly main: "#
|
|
35
|
-
readonly light: "#e57373";
|
|
36
|
-
readonly dark: "#d32f2f";
|
|
36
|
+
readonly white: {
|
|
37
|
+
readonly main: "#FFEFEF";
|
|
37
38
|
};
|
|
38
|
-
readonly
|
|
39
|
-
readonly main: "#
|
|
40
|
-
readonly light: "#ffb74d";
|
|
41
|
-
readonly dark: "#f57c00";
|
|
42
|
-
};
|
|
43
|
-
readonly info: {
|
|
44
|
-
readonly main: "#2196f3";
|
|
45
|
-
readonly light: "#64b5f6";
|
|
46
|
-
readonly dark: "#1976d2";
|
|
39
|
+
readonly black: {
|
|
40
|
+
readonly main: "#000000";
|
|
47
41
|
};
|
|
48
42
|
};
|
|
49
43
|
|
|
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
44
|
declare const typography: {
|
|
67
45
|
readonly fontFamily: {
|
|
68
|
-
readonly
|
|
69
|
-
readonly mono: "ui-monospace, SFMono-Regular,
|
|
46
|
+
readonly sans: readonly ["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"];
|
|
47
|
+
readonly mono: readonly ["Pretendard", "Pretendard Variable", "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas", "Liberation Mono", "monospace"];
|
|
48
|
+
readonly serif: readonly ["Pretendard", "Pretendard Variable", "ui-serif", "Georgia", "Cambria", "Times New Roman", "Times", "serif"];
|
|
70
49
|
};
|
|
71
50
|
readonly fontSize: {
|
|
72
|
-
readonly
|
|
73
|
-
readonly
|
|
51
|
+
readonly '2xs': "0.75rem";
|
|
52
|
+
readonly xs: "0.875rem";
|
|
53
|
+
readonly sm: "0.9375rem";
|
|
74
54
|
readonly base: "1rem";
|
|
75
55
|
readonly lg: "1.125rem";
|
|
76
56
|
readonly xl: "1.25rem";
|
|
77
|
-
readonly '2xl': "1.
|
|
78
|
-
readonly '3xl': "1.
|
|
79
|
-
readonly '4xl': "
|
|
80
|
-
readonly '5xl': "
|
|
57
|
+
readonly '2xl': "1.375rem";
|
|
58
|
+
readonly '3xl': "1.5rem";
|
|
59
|
+
readonly '4xl': "1.875rem";
|
|
60
|
+
readonly '5xl': "2rem";
|
|
61
|
+
readonly '6xl': "3rem";
|
|
81
62
|
};
|
|
82
63
|
readonly fontWeight: {
|
|
83
|
-
readonly
|
|
64
|
+
readonly regular: "400";
|
|
84
65
|
readonly medium: "500";
|
|
85
66
|
readonly semibold: "600";
|
|
86
67
|
readonly bold: "700";
|
|
87
68
|
};
|
|
88
69
|
readonly lineHeight: {
|
|
89
|
-
readonly
|
|
90
|
-
readonly
|
|
91
|
-
readonly normal: "1.5";
|
|
92
|
-
readonly relaxed: "1.75";
|
|
93
|
-
readonly loose: "2";
|
|
70
|
+
readonly tight: "1.5";
|
|
71
|
+
readonly normal: "1.6";
|
|
94
72
|
};
|
|
95
73
|
};
|
|
96
74
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
/**
|
|
100
|
-
* CAUSW Design System Tailwind CSS Preset
|
|
101
|
-
*
|
|
102
|
-
* @example
|
|
103
|
-
* ```ts
|
|
104
|
-
* // tailwind.config.ts
|
|
105
|
-
* import { causwPreset } from '@causw/design-system/tailwind-preset';
|
|
106
|
-
*
|
|
107
|
-
* export default {
|
|
108
|
-
* presets: [causwPreset],
|
|
109
|
-
* content: ['./src/**\/*.{js,ts,jsx,tsx}'],
|
|
110
|
-
* } satisfies Config;
|
|
111
|
-
* ```
|
|
112
|
-
*/
|
|
113
|
-
declare const causwPreset: Partial<Config>;
|
|
114
|
-
|
|
115
|
-
export { causwContent, causwPreset, colors, spacing, typography };
|
|
75
|
+
export { borderRadius, colors, typography };
|
package/dist/index.js
CHANGED
|
@@ -1,126 +1,135 @@
|
|
|
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
|
-
|
|
55
|
+
sans: [
|
|
56
|
+
"Pretendard",
|
|
57
|
+
"Pretendard Variable",
|
|
58
|
+
"-apple-system",
|
|
59
|
+
"BlinkMacSystemFont",
|
|
60
|
+
"system-ui",
|
|
61
|
+
"Roboto",
|
|
62
|
+
"Helvetica Neue",
|
|
63
|
+
"Segoe UI",
|
|
64
|
+
"Apple SD Gothic Neo",
|
|
65
|
+
"Noto Sans KR",
|
|
66
|
+
"Malgun Gothic",
|
|
67
|
+
"Apple Color Emoji",
|
|
68
|
+
"Segoe UI Emoji",
|
|
69
|
+
"Segoe UI Symbol",
|
|
70
|
+
"sans-serif"
|
|
71
|
+
],
|
|
72
|
+
mono: [
|
|
73
|
+
"Pretendard",
|
|
74
|
+
"Pretendard Variable",
|
|
75
|
+
"ui-monospace",
|
|
76
|
+
"SFMono-Regular",
|
|
77
|
+
"SF Mono",
|
|
78
|
+
"Menlo",
|
|
79
|
+
"Consolas",
|
|
80
|
+
"Liberation Mono",
|
|
81
|
+
"monospace"
|
|
82
|
+
],
|
|
83
|
+
serif: [
|
|
84
|
+
"Pretendard",
|
|
85
|
+
"Pretendard Variable",
|
|
86
|
+
"ui-serif",
|
|
87
|
+
"Georgia",
|
|
88
|
+
"Cambria",
|
|
89
|
+
"Times New Roman",
|
|
90
|
+
"Times",
|
|
91
|
+
"serif"
|
|
92
|
+
]
|
|
85
93
|
},
|
|
86
94
|
fontSize: {
|
|
87
|
-
|
|
95
|
+
"2xs": "0.75rem",
|
|
88
96
|
// 12px
|
|
89
|
-
|
|
97
|
+
xs: "0.875rem",
|
|
90
98
|
// 14px
|
|
99
|
+
sm: "0.9375rem",
|
|
100
|
+
// 15px
|
|
91
101
|
base: "1rem",
|
|
92
102
|
// 16px
|
|
93
103
|
lg: "1.125rem",
|
|
94
104
|
// 18px
|
|
95
105
|
xl: "1.25rem",
|
|
96
106
|
// 20px
|
|
97
|
-
"2xl": "1.
|
|
107
|
+
"2xl": "1.375rem",
|
|
108
|
+
// 22px
|
|
109
|
+
"3xl": "1.5rem",
|
|
98
110
|
// 24px
|
|
99
|
-
"
|
|
111
|
+
"4xl": "1.875rem",
|
|
100
112
|
// 30px
|
|
101
|
-
"
|
|
102
|
-
//
|
|
103
|
-
"
|
|
113
|
+
"5xl": "2rem",
|
|
114
|
+
// 32px
|
|
115
|
+
"6xl": "3rem"
|
|
104
116
|
// 48px
|
|
105
117
|
},
|
|
106
118
|
fontWeight: {
|
|
107
|
-
|
|
119
|
+
regular: "400",
|
|
108
120
|
medium: "500",
|
|
109
121
|
semibold: "600",
|
|
110
122
|
bold: "700"
|
|
111
123
|
},
|
|
112
124
|
lineHeight: {
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
normal: "1.5",
|
|
116
|
-
relaxed: "1.75",
|
|
117
|
-
loose: "2"
|
|
125
|
+
tight: "1.5",
|
|
126
|
+
normal: "1.6"
|
|
118
127
|
}
|
|
119
128
|
};
|
|
120
129
|
|
|
121
130
|
// src/config/tailwind-content/tailwind-content.ts
|
|
122
131
|
var causwContent = [
|
|
123
|
-
"./node_modules/@causw/
|
|
132
|
+
"./node_modules/@causw/core/dist/**/*.{js,mjs}",
|
|
124
133
|
"./node_modules/@causw/tokens/dist/**/*.{js,mjs}"
|
|
125
134
|
];
|
|
126
135
|
|
|
@@ -128,11 +137,12 @@ var causwContent = [
|
|
|
128
137
|
var causwPreset = {
|
|
129
138
|
theme: {
|
|
130
139
|
extend: {
|
|
140
|
+
borderRadius,
|
|
131
141
|
colors,
|
|
132
|
-
spacing,
|
|
133
142
|
fontFamily: {
|
|
134
|
-
sans: typography.fontFamily.
|
|
135
|
-
mono: typography.fontFamily.mono
|
|
143
|
+
sans: typography.fontFamily.sans,
|
|
144
|
+
mono: typography.fontFamily.mono,
|
|
145
|
+
serif: typography.fontFamily.serif
|
|
136
146
|
},
|
|
137
147
|
fontSize: typography.fontSize,
|
|
138
148
|
fontWeight: typography.fontWeight,
|
|
@@ -141,8 +151,8 @@ var causwPreset = {
|
|
|
141
151
|
}
|
|
142
152
|
};
|
|
143
153
|
|
|
154
|
+
exports.borderRadius = borderRadius;
|
|
144
155
|
exports.causwContent = causwContent;
|
|
145
156
|
exports.causwPreset = causwPreset;
|
|
146
157
|
exports.colors = colors;
|
|
147
|
-
exports.spacing = spacing;
|
|
148
158
|
exports.typography = typography;
|
package/dist/index.mjs
CHANGED
|
@@ -1,142 +1 @@
|
|
|
1
|
-
|
|
2
|
-
var colors = {
|
|
3
|
-
primary: {
|
|
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",
|
|
53
|
-
// 4px
|
|
54
|
-
2: "0.5rem",
|
|
55
|
-
// 8px
|
|
56
|
-
3: "0.75rem",
|
|
57
|
-
// 12px
|
|
58
|
-
4: "1rem",
|
|
59
|
-
// 16px
|
|
60
|
-
5: "1.25rem",
|
|
61
|
-
// 20px
|
|
62
|
-
6: "1.5rem",
|
|
63
|
-
// 24px
|
|
64
|
-
8: "2rem",
|
|
65
|
-
// 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
|
-
};
|
|
77
|
-
|
|
78
|
-
// src/tokens/typography.ts
|
|
79
|
-
var typography = {
|
|
80
|
-
fontFamily: {
|
|
81
|
-
base: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
|
|
82
|
-
mono: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace'
|
|
83
|
-
},
|
|
84
|
-
fontSize: {
|
|
85
|
-
xs: "0.75rem",
|
|
86
|
-
// 12px
|
|
87
|
-
sm: "0.875rem",
|
|
88
|
-
// 14px
|
|
89
|
-
base: "1rem",
|
|
90
|
-
// 16px
|
|
91
|
-
lg: "1.125rem",
|
|
92
|
-
// 18px
|
|
93
|
-
xl: "1.25rem",
|
|
94
|
-
// 20px
|
|
95
|
-
"2xl": "1.5rem",
|
|
96
|
-
// 24px
|
|
97
|
-
"3xl": "1.875rem",
|
|
98
|
-
// 30px
|
|
99
|
-
"4xl": "2.25rem",
|
|
100
|
-
// 36px
|
|
101
|
-
"5xl": "3rem"
|
|
102
|
-
// 48px
|
|
103
|
-
},
|
|
104
|
-
fontWeight: {
|
|
105
|
-
normal: "400",
|
|
106
|
-
medium: "500",
|
|
107
|
-
semibold: "600",
|
|
108
|
-
bold: "700"
|
|
109
|
-
},
|
|
110
|
-
lineHeight: {
|
|
111
|
-
none: "1",
|
|
112
|
-
tight: "1.25",
|
|
113
|
-
normal: "1.5",
|
|
114
|
-
relaxed: "1.75",
|
|
115
|
-
loose: "2"
|
|
116
|
-
}
|
|
117
|
-
};
|
|
118
|
-
|
|
119
|
-
// src/config/tailwind-content/tailwind-content.ts
|
|
120
|
-
var causwContent = [
|
|
121
|
-
"./node_modules/@causw/components/dist/**/*.{js,mjs}",
|
|
122
|
-
"./node_modules/@causw/tokens/dist/**/*.{js,mjs}"
|
|
123
|
-
];
|
|
124
|
-
|
|
125
|
-
// src/config/tailwind-preset/tailwind-preset.ts
|
|
126
|
-
var causwPreset = {
|
|
127
|
-
theme: {
|
|
128
|
-
extend: {
|
|
129
|
-
colors,
|
|
130
|
-
spacing,
|
|
131
|
-
fontFamily: {
|
|
132
|
-
sans: typography.fontFamily.base,
|
|
133
|
-
mono: typography.fontFamily.mono
|
|
134
|
-
},
|
|
135
|
-
fontSize: typography.fontSize,
|
|
136
|
-
fontWeight: typography.fontWeight,
|
|
137
|
-
lineHeight: typography.lineHeight
|
|
138
|
-
}
|
|
139
|
-
}
|
|
140
|
-
};
|
|
141
|
-
|
|
142
|
-
export { causwContent, causwPreset, colors, spacing, typography };
|
|
1
|
+
export { borderRadius, causwContent, causwPreset, colors, typography } from './chunk-5M6YEJA6.mjs';
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { Config } from 'tailwindcss';
|
|
2
|
+
|
|
3
|
+
declare const causwContent: string[];
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* CAUSW Design System Tailwind CSS Preset
|
|
7
|
+
*
|
|
8
|
+
* @example
|
|
9
|
+
* ```ts
|
|
10
|
+
* // tailwind.config.ts
|
|
11
|
+
* import { causwPreset } from '@causw/design-system/tailwind-preset';
|
|
12
|
+
*
|
|
13
|
+
* export default {
|
|
14
|
+
* presets: [causwPreset],
|
|
15
|
+
* content: ['./src/**\/*.{js,ts,jsx,tsx}'],
|
|
16
|
+
* } satisfies Config;
|
|
17
|
+
* ```
|
|
18
|
+
*/
|
|
19
|
+
declare const causwPreset: Partial<Config>;
|
|
20
|
+
|
|
21
|
+
export { causwPreset as a, causwContent as c };
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { Config } from 'tailwindcss';
|
|
2
|
+
|
|
3
|
+
declare const causwContent: string[];
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* CAUSW Design System Tailwind CSS Preset
|
|
7
|
+
*
|
|
8
|
+
* @example
|
|
9
|
+
* ```ts
|
|
10
|
+
* // tailwind.config.ts
|
|
11
|
+
* import { causwPreset } from '@causw/design-system/tailwind-preset';
|
|
12
|
+
*
|
|
13
|
+
* export default {
|
|
14
|
+
* presets: [causwPreset],
|
|
15
|
+
* content: ['./src/**\/*.{js,ts,jsx,tsx}'],
|
|
16
|
+
* } satisfies Config;
|
|
17
|
+
* ```
|
|
18
|
+
*/
|
|
19
|
+
declare const causwPreset: Partial<Config>;
|
|
20
|
+
|
|
21
|
+
export { causwPreset as a, causwContent as c };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@causw/tokens",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.10",
|
|
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": [
|
|
@@ -26,8 +31,8 @@
|
|
|
26
31
|
},
|
|
27
32
|
"sideEffects": false,
|
|
28
33
|
"scripts": {
|
|
29
|
-
"build": "tsup src/index.ts --format cjs,esm --dts --treeshake",
|
|
30
|
-
"dev": "tsup src/index.ts --format cjs,esm --dts --watch",
|
|
34
|
+
"build": "tsup src/index.ts src/config/index.ts --format cjs,esm --dts --treeshake",
|
|
35
|
+
"dev": "tsup src/index.ts src/config/index.ts --format cjs,esm --dts --watch",
|
|
31
36
|
"lint": "eslint src",
|
|
32
37
|
"test": "echo \"No tests yet\""
|
|
33
38
|
}
|