@causw/tokens 0.0.7 → 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.
Files changed (11) hide show
  1. package/README.md +151 -0
  2. package/dist/index.d.mts +69 -72
  3. package/dist/index.d.ts +69 -72
  4. package/dist/index.js +85 -96
  5. package/dist/index.mjs +106 -1
  6. package/package.json +3 -3
  7. package/dist/chunk-DPNL4AJ4.mjs +0 -119
  8. package/dist/config/index.d.mts +0 -44
  9. package/dist/config/index.d.ts +0 -44
  10. package/dist/config/index.js +0 -156
  11. package/dist/config/index.mjs +0 -36
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,95 +1,92 @@
1
+ import { Config } from 'tailwindcss';
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
+
1
13
  declare const colors: {
2
- readonly primary: {
3
- readonly 50: "#e3f2fd";
4
- readonly 100: "#bbdefb";
5
- readonly 200: "#90caf9";
6
- readonly 300: "#64b5f6";
7
- readonly 400: "#42a5f5";
8
- readonly 500: "#2196f3";
9
- readonly 600: "#1e88e5";
10
- readonly 700: "#1976d2";
11
- readonly 800: "#1565c0";
12
- readonly 900: "#0d47a1";
14
+ readonly blue: {
15
+ readonly 50: "#EEF4FF";
16
+ readonly 500: "#4F98FF";
17
+ readonly 700: "#237EFF";
13
18
  };
14
19
  readonly gray: {
15
- readonly 50: "#fafafa";
16
- readonly 100: "#f5f5f5";
17
- readonly 200: "#eeeeee";
18
- readonly 300: "#e0e0e0";
19
- readonly 400: "#bdbdbd";
20
- readonly 500: "#9e9e9e";
21
- readonly 600: "#757575";
22
- readonly 700: "#616161";
23
- readonly 800: "#424242";
24
- readonly 900: "#212121";
25
- };
26
- readonly success: {
27
- readonly main: "#4caf50";
28
- readonly light: "#81c784";
29
- 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";
30
30
  };
31
- readonly error: {
32
- readonly main: "#f44336";
33
- readonly light: "#e57373";
34
- readonly dark: "#d32f2f";
31
+ readonly red: {
32
+ readonly 100: "#FFEFEF";
33
+ readonly 400: "#FD5C5F";
35
34
  };
36
- readonly warning: {
37
- readonly main: "#ff9800";
38
- readonly light: "#ffb74d";
39
- readonly dark: "#f57c00";
35
+ readonly white: {
36
+ readonly main: "#FFEFEF";
40
37
  };
41
- readonly info: {
42
- readonly main: "#2196f3";
43
- readonly light: "#64b5f6";
44
- readonly dark: "#1976d2";
38
+ readonly black: {
39
+ readonly main: "#000000";
45
40
  };
46
41
  };
47
42
 
48
- declare const spacing: {
49
- readonly 0: "0";
50
- readonly 1: "0.25rem";
51
- readonly 2: "0.5rem";
52
- readonly 3: "0.75rem";
53
- readonly 4: "1rem";
54
- readonly 5: "1.25rem";
55
- readonly 6: "1.5rem";
56
- readonly 8: "2rem";
57
- readonly 10: "2.5rem";
58
- readonly 12: "3rem";
59
- readonly 16: "4rem";
60
- readonly 20: "5rem";
61
- readonly 24: "6rem";
62
- };
63
-
64
43
  declare const typography: {
65
44
  readonly fontFamily: {
66
- readonly base: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
67
- 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";
68
48
  };
69
49
  readonly fontSize: {
70
- readonly xs: "0.75rem";
71
- readonly sm: "0.875rem";
72
- readonly base: "1rem";
73
- readonly lg: "1.125rem";
74
- readonly xl: "1.25rem";
75
- readonly '2xl': "1.5rem";
76
- readonly '3xl': "1.875rem";
77
- readonly '4xl': "2.25rem";
78
- readonly '5xl': "3rem";
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";
79
61
  };
80
62
  readonly fontWeight: {
81
- readonly normal: "400";
63
+ readonly regular: "400";
82
64
  readonly medium: "500";
83
65
  readonly semibold: "600";
84
66
  readonly bold: "700";
85
67
  };
86
68
  readonly lineHeight: {
87
- readonly none: "1";
88
- readonly tight: "1.25";
89
- readonly normal: "1.5";
90
- readonly relaxed: "1.75";
91
- readonly loose: "2";
69
+ readonly tight: "1.5";
70
+ readonly normal: "1.6";
92
71
  };
93
72
  };
94
73
 
95
- export { colors, spacing, typography };
74
+ declare const causwContent: string[];
75
+
76
+ /**
77
+ * CAUSW Design System Tailwind CSS Preset
78
+ *
79
+ * @example
80
+ * ```ts
81
+ * // tailwind.config.ts
82
+ * import { causwPreset } from '@causw/design-system/tailwind-preset';
83
+ *
84
+ * export default {
85
+ * presets: [causwPreset],
86
+ * content: ['./src/**\/*.{js,ts,jsx,tsx}'],
87
+ * } satisfies Config;
88
+ * ```
89
+ */
90
+ declare const causwPreset: Partial<Config>;
91
+
92
+ export { borderRadius, causwContent, causwPreset, colors, typography };
package/dist/index.d.ts CHANGED
@@ -1,95 +1,92 @@
1
+ import { Config } from 'tailwindcss';
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
+
1
13
  declare const colors: {
2
- readonly primary: {
3
- readonly 50: "#e3f2fd";
4
- readonly 100: "#bbdefb";
5
- readonly 200: "#90caf9";
6
- readonly 300: "#64b5f6";
7
- readonly 400: "#42a5f5";
8
- readonly 500: "#2196f3";
9
- readonly 600: "#1e88e5";
10
- readonly 700: "#1976d2";
11
- readonly 800: "#1565c0";
12
- readonly 900: "#0d47a1";
14
+ readonly blue: {
15
+ readonly 50: "#EEF4FF";
16
+ readonly 500: "#4F98FF";
17
+ readonly 700: "#237EFF";
13
18
  };
14
19
  readonly gray: {
15
- readonly 50: "#fafafa";
16
- readonly 100: "#f5f5f5";
17
- readonly 200: "#eeeeee";
18
- readonly 300: "#e0e0e0";
19
- readonly 400: "#bdbdbd";
20
- readonly 500: "#9e9e9e";
21
- readonly 600: "#757575";
22
- readonly 700: "#616161";
23
- readonly 800: "#424242";
24
- readonly 900: "#212121";
25
- };
26
- readonly success: {
27
- readonly main: "#4caf50";
28
- readonly light: "#81c784";
29
- 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";
30
30
  };
31
- readonly error: {
32
- readonly main: "#f44336";
33
- readonly light: "#e57373";
34
- readonly dark: "#d32f2f";
31
+ readonly red: {
32
+ readonly 100: "#FFEFEF";
33
+ readonly 400: "#FD5C5F";
35
34
  };
36
- readonly warning: {
37
- readonly main: "#ff9800";
38
- readonly light: "#ffb74d";
39
- readonly dark: "#f57c00";
35
+ readonly white: {
36
+ readonly main: "#FFEFEF";
40
37
  };
41
- readonly info: {
42
- readonly main: "#2196f3";
43
- readonly light: "#64b5f6";
44
- readonly dark: "#1976d2";
38
+ readonly black: {
39
+ readonly main: "#000000";
45
40
  };
46
41
  };
47
42
 
48
- declare const spacing: {
49
- readonly 0: "0";
50
- readonly 1: "0.25rem";
51
- readonly 2: "0.5rem";
52
- readonly 3: "0.75rem";
53
- readonly 4: "1rem";
54
- readonly 5: "1.25rem";
55
- readonly 6: "1.5rem";
56
- readonly 8: "2rem";
57
- readonly 10: "2.5rem";
58
- readonly 12: "3rem";
59
- readonly 16: "4rem";
60
- readonly 20: "5rem";
61
- readonly 24: "6rem";
62
- };
63
-
64
43
  declare const typography: {
65
44
  readonly fontFamily: {
66
- readonly base: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
67
- 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";
68
48
  };
69
49
  readonly fontSize: {
70
- readonly xs: "0.75rem";
71
- readonly sm: "0.875rem";
72
- readonly base: "1rem";
73
- readonly lg: "1.125rem";
74
- readonly xl: "1.25rem";
75
- readonly '2xl': "1.5rem";
76
- readonly '3xl': "1.875rem";
77
- readonly '4xl': "2.25rem";
78
- readonly '5xl': "3rem";
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";
79
61
  };
80
62
  readonly fontWeight: {
81
- readonly normal: "400";
63
+ readonly regular: "400";
82
64
  readonly medium: "500";
83
65
  readonly semibold: "600";
84
66
  readonly bold: "700";
85
67
  };
86
68
  readonly lineHeight: {
87
- readonly none: "1";
88
- readonly tight: "1.25";
89
- readonly normal: "1.5";
90
- readonly relaxed: "1.75";
91
- readonly loose: "2";
69
+ readonly tight: "1.5";
70
+ readonly normal: "1.6";
92
71
  };
93
72
  };
94
73
 
95
- export { colors, spacing, typography };
74
+ declare const causwContent: string[];
75
+
76
+ /**
77
+ * CAUSW Design System Tailwind CSS Preset
78
+ *
79
+ * @example
80
+ * ```ts
81
+ * // tailwind.config.ts
82
+ * import { causwPreset } from '@causw/design-system/tailwind-preset';
83
+ *
84
+ * export default {
85
+ * presets: [causwPreset],
86
+ * content: ['./src/**\/*.{js,ts,jsx,tsx}'],
87
+ * } satisfies Config;
88
+ * ```
89
+ */
90
+ declare const causwPreset: Partial<Config>;
91
+
92
+ export { borderRadius, causwContent, causwPreset, colors, typography };
package/dist/index.js CHANGED
@@ -1,123 +1,112 @@
1
1
  'use strict';
2
2
 
3
- // src/tokens/colors.ts
4
- var colors = {
5
- primary: {
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
- 2: "0.5rem",
7
+ sm: "0.5rem",
57
8
  // 8px
58
- 3: "0.75rem",
9
+ md: "0.75rem",
59
10
  // 12px
60
- 4: "1rem",
11
+ lg: "1rem",
61
12
  // 16px
62
- 5: "1.25rem",
13
+ xl: "1.25rem",
63
14
  // 20px
64
- 6: "1.5rem",
15
+ "2xl": "1.5rem",
65
16
  // 24px
66
- 8: "2rem",
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/tokens/typography.ts
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
- base: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
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
- xs: "0.75rem",
88
- // 12px
89
- sm: "0.875rem",
90
- // 14px
91
- base: "1rem",
92
- // 16px
93
- lg: "1.125rem",
94
- // 18px
95
- xl: "1.25rem",
96
- // 20px
97
- "2xl": "1.5rem",
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
- normal: "400",
73
+ regular: "400",
108
74
  medium: "500",
109
75
  semibold: "600",
110
76
  bold: "700"
111
77
  },
112
78
  lineHeight: {
113
- none: "1",
114
- tight: "1.25",
115
- normal: "1.5",
116
- relaxed: "1.75",
117
- loose: "2"
79
+ tight: "1.5",
80
+ normal: "1.6"
81
+ }
82
+ };
83
+
84
+ // src/config/tailwind-content/tailwind-content.ts
85
+ var causwContent = [
86
+ "./node_modules/@causw/components/dist/**/*.{js,mjs}",
87
+ "./node_modules/@causw/tokens/dist/**/*.{js,mjs}"
88
+ ];
89
+
90
+ // src/config/tailwind-preset/tailwind-preset.ts
91
+ var causwPreset = {
92
+ theme: {
93
+ extend: {
94
+ borderRadius,
95
+ colors,
96
+ fontFamily: {
97
+ sans: typography.fontFamily.sans,
98
+ mono: typography.fontFamily.mono,
99
+ serif: typography.fontFamily.serif
100
+ },
101
+ fontSize: typography.fontSize,
102
+ fontWeight: typography.fontWeight,
103
+ lineHeight: typography.lineHeight
104
+ }
118
105
  }
119
106
  };
120
107
 
108
+ exports.borderRadius = borderRadius;
109
+ exports.causwContent = causwContent;
110
+ exports.causwPreset = causwPreset;
121
111
  exports.colors = colors;
122
- exports.spacing = spacing;
123
112
  exports.typography = typography;
package/dist/index.mjs CHANGED
@@ -1 +1,106 @@
1
- export { colors, spacing, typography } from './chunk-DPNL4AJ4.mjs';
1
+ // src/foundations/borderRadius.ts
2
+ var borderRadius = {
3
+ xs: "0.25rem",
4
+ // 4px
5
+ sm: "0.5rem",
6
+ // 8px
7
+ md: "0.75rem",
8
+ // 12px
9
+ lg: "1rem",
10
+ // 16px
11
+ xl: "1.25rem",
12
+ // 20px
13
+ "2xl": "1.5rem",
14
+ // 24px
15
+ "3xl": "2rem"
16
+ // 32px
17
+ };
18
+
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
51
+ var typography = {
52
+ fontFamily: {
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'
56
+ },
57
+ fontSize: {
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"
69
+ },
70
+ fontWeight: {
71
+ regular: "400",
72
+ medium: "500",
73
+ semibold: "600",
74
+ bold: "700"
75
+ },
76
+ lineHeight: {
77
+ tight: "1.5",
78
+ normal: "1.6"
79
+ }
80
+ };
81
+
82
+ // src/config/tailwind-content/tailwind-content.ts
83
+ var causwContent = [
84
+ "./node_modules/@causw/components/dist/**/*.{js,mjs}",
85
+ "./node_modules/@causw/tokens/dist/**/*.{js,mjs}"
86
+ ];
87
+
88
+ // src/config/tailwind-preset/tailwind-preset.ts
89
+ var causwPreset = {
90
+ theme: {
91
+ extend: {
92
+ borderRadius,
93
+ colors,
94
+ fontFamily: {
95
+ sans: typography.fontFamily.sans,
96
+ mono: typography.fontFamily.mono,
97
+ serif: typography.fontFamily.serif
98
+ },
99
+ fontSize: typography.fontSize,
100
+ fontWeight: typography.fontWeight,
101
+ lineHeight: typography.lineHeight
102
+ }
103
+ }
104
+ };
105
+
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.7",
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",
@@ -31,8 +31,8 @@
31
31
  },
32
32
  "sideEffects": false,
33
33
  "scripts": {
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",
34
+ "build": "tsup src/index.ts --format cjs,esm --dts --treeshake",
35
+ "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
36
36
  "lint": "eslint src",
37
37
  "test": "echo \"No tests yet\""
38
38
  }
package/dist/chunk-DPNL4AJ4.mjs DELETED
@@ -1,119 +0,0 @@
1
- // src/tokens/colors.ts
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
- export { colors, spacing, typography };
package/dist/config/index.d.mts DELETED
@@ -1,44 +0,0 @@
1
- import { Config } from 'tailwindcss';
2
-
3
- /**
4
- * CAUSW Design System Tailwind CSS Configuration
5
- *
6
- * 이 파일은 `@config` 지시자와 함께 사용할 수 있는 완전한 Tailwind config입니다.
7
- *
8
- * @example CSS에서 사용
9
- * ```css
10
- * @import 'tailwindcss';
11
- * @config '@causw/tokens/tailwind.config';
12
- * ```
13
- *
14
- * @example JS/TS config에서 사용
15
- * ```ts
16
- * // tailwind.config.ts
17
- * import causwConfig from '@causw/tokens/tailwind.config';
18
- * export default {
19
- * ...causwConfig,
20
- * content: [...causwConfig.content, './src/**\/*.{js,ts,jsx,tsx}'],
21
- * };
22
- * ```
23
- */
24
- declare const causwConfig: Config;
25
-
26
- /**
27
- * CAUSW Design System Tailwind CSS Preset
28
- *
29
- * @example
30
- * ```ts
31
- * // tailwind.config.ts
32
- * import { causwPreset } from '@causw/design-system/tailwind-preset';
33
- *
34
- * export default {
35
- * presets: [causwPreset],
36
- * content: ['./src/**\/*.{js,ts,jsx,tsx}'],
37
- * } satisfies Config;
38
- * ```
39
- */
40
- declare const causwPreset: Partial<Config>;
41
-
42
- declare const causwContent: string[];
43
-
44
- export { causwConfig, causwContent, causwPreset };
package/dist/config/index.d.ts DELETED
@@ -1,44 +0,0 @@
1
- import { Config } from 'tailwindcss';
2
-
3
- /**
4
- * CAUSW Design System Tailwind CSS Configuration
5
- *
6
- * 이 파일은 `@config` 지시자와 함께 사용할 수 있는 완전한 Tailwind config입니다.
7
- *
8
- * @example CSS에서 사용
9
- * ```css
10
- * @import 'tailwindcss';
11
- * @config '@causw/tokens/tailwind.config';
12
- * ```
13
- *
14
- * @example JS/TS config에서 사용
15
- * ```ts
16
- * // tailwind.config.ts
17
- * import causwConfig from '@causw/tokens/tailwind.config';
18
- * export default {
19
- * ...causwConfig,
20
- * content: [...causwConfig.content, './src/**\/*.{js,ts,jsx,tsx}'],
21
- * };
22
- * ```
23
- */
24
- declare const causwConfig: Config;
25
-
26
- /**
27
- * CAUSW Design System Tailwind CSS Preset
28
- *
29
- * @example
30
- * ```ts
31
- * // tailwind.config.ts
32
- * import { causwPreset } from '@causw/design-system/tailwind-preset';
33
- *
34
- * export default {
35
- * presets: [causwPreset],
36
- * content: ['./src/**\/*.{js,ts,jsx,tsx}'],
37
- * } satisfies Config;
38
- * ```
39
- */
40
- declare const causwPreset: Partial<Config>;
41
-
42
- declare const causwContent: string[];
43
-
44
- export { causwConfig, causwContent, causwPreset };
package/dist/config/index.js DELETED
@@ -1,156 +0,0 @@
1
- 'use strict';
2
-
3
- // src/tokens/colors.ts
4
- var colors = {
5
- primary: {
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",
55
- // 4px
56
- 2: "0.5rem",
57
- // 8px
58
- 3: "0.75rem",
59
- // 12px
60
- 4: "1rem",
61
- // 16px
62
- 5: "1.25rem",
63
- // 20px
64
- 6: "1.5rem",
65
- // 24px
66
- 8: "2rem",
67
- // 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
- };
79
-
80
- // src/tokens/typography.ts
81
- var typography = {
82
- fontFamily: {
83
- base: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
84
- mono: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace'
85
- },
86
- fontSize: {
87
- xs: "0.75rem",
88
- // 12px
89
- sm: "0.875rem",
90
- // 14px
91
- base: "1rem",
92
- // 16px
93
- lg: "1.125rem",
94
- // 18px
95
- xl: "1.25rem",
96
- // 20px
97
- "2xl": "1.5rem",
98
- // 24px
99
- "3xl": "1.875rem",
100
- // 30px
101
- "4xl": "2.25rem",
102
- // 36px
103
- "5xl": "3rem"
104
- // 48px
105
- },
106
- fontWeight: {
107
- normal: "400",
108
- medium: "500",
109
- semibold: "600",
110
- bold: "700"
111
- },
112
- lineHeight: {
113
- none: "1",
114
- tight: "1.25",
115
- normal: "1.5",
116
- relaxed: "1.75",
117
- loose: "2"
118
- }
119
- };
120
-
121
- // src/config/tailwind-config/tailwind-preset.ts
122
- var causwPreset = {
123
- theme: {
124
- extend: {
125
- colors,
126
- spacing,
127
- fontFamily: {
128
- sans: typography.fontFamily.base,
129
- mono: typography.fontFamily.mono
130
- },
131
- fontSize: typography.fontSize,
132
- fontWeight: typography.fontWeight,
133
- lineHeight: typography.lineHeight
134
- }
135
- }
136
- };
137
-
138
- // src/config/tailwind-config/tailwind.config.ts
139
- var causwConfig = {
140
- content: [
141
- // CAUSW 컴포넌트 패키지의 빌드된 파일 스캔
142
- "./node_modules/@causw/components/dist/**/*.{js,mjs}",
143
- "./node_modules/@causw/tokens/dist/**/*.{js,mjs}"
144
- ],
145
- presets: [causwPreset]
146
- };
147
-
148
- // src/config/tailwind-config/tailwind-content.ts
149
- var causwContent = [
150
- "./node_modules/@causw/components/dist/**/*.{js,mjs}",
151
- "./node_modules/@causw/tokens/dist/**/*.{js,mjs}"
152
- ];
153
-
154
- exports.causwConfig = causwConfig;
155
- exports.causwContent = causwContent;
156
- exports.causwPreset = causwPreset;
package/dist/config/index.mjs DELETED
@@ -1,36 +0,0 @@
1
- import { typography, spacing, colors } from '../chunk-DPNL4AJ4.mjs';
2
-
3
- // src/config/tailwind-config/tailwind-preset.ts
4
- var causwPreset = {
5
- theme: {
6
- extend: {
7
- colors,
8
- spacing,
9
- fontFamily: {
10
- sans: typography.fontFamily.base,
11
- mono: typography.fontFamily.mono
12
- },
13
- fontSize: typography.fontSize,
14
- fontWeight: typography.fontWeight,
15
- lineHeight: typography.lineHeight
16
- }
17
- }
18
- };
19
-
20
- // src/config/tailwind-config/tailwind.config.ts
21
- var causwConfig = {
22
- content: [
23
- // CAUSW 컴포넌트 패키지의 빌드된 파일 스캔
24
- "./node_modules/@causw/components/dist/**/*.{js,mjs}",
25
- "./node_modules/@causw/tokens/dist/**/*.{js,mjs}"
26
- ],
27
- presets: [causwPreset]
28
- };
29
-
30
- // src/config/tailwind-config/tailwind-content.ts
31
- var causwContent = [
32
- "./node_modules/@causw/components/dist/**/*.{js,mjs}",
33
- "./node_modules/@causw/tokens/dist/**/*.{js,mjs}"
34
- ];
35
-
36
- export { causwConfig, causwContent, causwPreset };