@seed-design/tailwind4-theme 0.0.12

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 (3) hide show
  1. package/README.md +101 -0
  2. package/index.css +499 -0
  3. package/package.json +31 -0
package/README.md ADDED
@@ -0,0 +1,101 @@
1
+ # @seed-design/tailwind4-theme
2
+
3
+ SEED 디자인 시스템의 디자인 토큰을 Tailwind CSS 4.0에서 사용할 수 있게 해주는 CSS 파일을 제공합니다.
4
+
5
+ ## 설치
6
+
7
+ ```bash
8
+ npm install @seed-design/tailwind4-theme
9
+ ```
10
+
11
+ 또는
12
+
13
+ ```bash
14
+ yarn add @seed-design/tailwind4-theme
15
+ ```
16
+
17
+ ## 사용 방법
18
+
19
+ 1. 프로젝트에 SEED 디자인 토큰 CSS 파일이 먼저 로드되어 있어야 합니다.
20
+ ```js
21
+ import '@seed-design/css/base.css';
22
+ // or
23
+ import '@seed-design/css/all.css';
24
+ ```
25
+
26
+ 2. CSS 파일에 Tailwind CSS와 SEED 디자인 토큰을 가져옵니다.
27
+ ```css
28
+ /* index.css 또는 main.css 등 */
29
+ @import "tailwindcss";
30
+ @import "@seed-design/tailwind4-theme";
31
+ ```
32
+
33
+ 3. 이제 SEED 디자인 토큰 변수들이 Tailwind CSS 4.0의 테마에 등록되며, 다음과 같은 유틸리티 클래스를 사용할 수 있습니다.
34
+
35
+ ## 유틸리티 클래스
36
+
37
+ ### 색상 유틸리티
38
+ ```jsx
39
+ // 텍스트 색상
40
+ <p className="text-fg-brand">브랜드 색상 텍스트</p>
41
+ <p className="text-fg-neutral">기본 텍스트 색상</p>
42
+ <p className="text-palette-blue-500">팔레트 색상 텍스트</p>
43
+
44
+ // 배경 색상
45
+ <div className="bg-bg-layer-basement">레이어 베이스먼트 배경</div>
46
+ <div className="bg-palette-gray-100">회색 배경</div>
47
+
48
+ // 테두리 색상
49
+ <div className="border border-stroke-brand">브랜드 테두리</div>
50
+ <div className="border border-palette-red-500">팔레트 테두리</div>
51
+ ```
52
+
53
+ ### 타이포그래피 유틸리티
54
+ ```jsx
55
+ <h1 className="screen-title">화면 제목</h1>
56
+ <p className="t3-regular">본문 텍스트</p>
57
+ <p className="article-body">아티클 본문</p>
58
+ ```
59
+
60
+ ### 크기 및 여백 유틸리티
61
+ ```jsx
62
+ // 크기 유틸리티
63
+ <div className="size-x4">정사각형 요소</div>
64
+ <div className="w-x8 h-x4">직사각형 요소</div>
65
+
66
+ // 여백 유틸리티
67
+ <div className="p-x2">패딩 사용</div>
68
+ <div className="px-x4 py-x2">수평/수직 패딩</div>
69
+ <div className="m-x2">마진 사용</div>
70
+ <div className="mx-auto">중앙 정렬</div>
71
+
72
+ // 간격 유틸리티
73
+ <div className="flex gap-x3">아이템 간격 설정</div>
74
+ <div className="grid gap-y-x2 gap-x-x4">그리드 간격 설정</div>
75
+ ```
76
+
77
+ ### 테두리 반경
78
+ ```jsx
79
+ <div className="radius-r2">표준 둥근 모서리</div>
80
+ <div className="radius-r4">큰 둥근 모서리</div>
81
+ <button className="radius-r8">매우 둥근 버튼</button>
82
+ ```
83
+
84
+ ## 지원하는 토큰
85
+
86
+ 이 패키지는 모든 SEED 디자인 토큰을 Tailwind CSS 4.0의 테마 변수로 제공합니다:
87
+
88
+ - 색상 (fg-*, bg-*, stroke-*, palette-*)
89
+ - 크기 (dimension-x*)
90
+ - 여백 (p-x*, m-x*, gap-x*)
91
+ - 반경 (radius-r*)
92
+ - 글꼴 크기 (text-size-*)
93
+ - 글꼴 두께 (font-*)
94
+ - 줄 높이 (leading-*)
95
+ - 애니메이션 지속 시간 (duration-d*)
96
+ - 타이밍 함수 (easing-*)
97
+ - 타이포그래피 스타일 (t1-regular, t1-bold, t2-regular, ...etc)
98
+
99
+ ## 버전 호환성
100
+
101
+ 이 패키지는 Tailwind CSS 4.0 이상 버전에서만 사용할 수 있습니다. Tailwind CSS 3.x 버전은 `@seed-design/tailwind3-plugin`을 사용하세요.
package/index.css ADDED
@@ -0,0 +1,499 @@
1
+ /**
2
+ * SEED Design Tailwind 4.0 Theme
3
+ * 이 파일은 Tailwind CSS 4.0에서 SEED 디자인 토큰을 사용하기 위한 테마 변수를 제공합니다.
4
+ */
5
+ @theme {
6
+ --color-palette-blue-100: var(--seed-color-palette-blue-100);
7
+ --color-palette-blue-200: var(--seed-color-palette-blue-200);
8
+ --color-palette-blue-300: var(--seed-color-palette-blue-300);
9
+ --color-palette-blue-400: var(--seed-color-palette-blue-400);
10
+ --color-palette-blue-500: var(--seed-color-palette-blue-500);
11
+ --color-palette-blue-600: var(--seed-color-palette-blue-600);
12
+ --color-palette-blue-700: var(--seed-color-palette-blue-700);
13
+ --color-palette-blue-800: var(--seed-color-palette-blue-800);
14
+ --color-palette-blue-900: var(--seed-color-palette-blue-900);
15
+ --color-palette-blue-1000: var(--seed-color-palette-blue-1000);
16
+ --color-palette-carrot-100: var(--seed-color-palette-carrot-100);
17
+ --color-palette-carrot-200: var(--seed-color-palette-carrot-200);
18
+ --color-palette-carrot-300: var(--seed-color-palette-carrot-300);
19
+ --color-palette-carrot-400: var(--seed-color-palette-carrot-400);
20
+ --color-palette-carrot-500: var(--seed-color-palette-carrot-500);
21
+ --color-palette-carrot-600: var(--seed-color-palette-carrot-600);
22
+ --color-palette-carrot-700: var(--seed-color-palette-carrot-700);
23
+ --color-palette-carrot-800: var(--seed-color-palette-carrot-800);
24
+ --color-palette-carrot-900: var(--seed-color-palette-carrot-900);
25
+ --color-palette-carrot-1000: var(--seed-color-palette-carrot-1000);
26
+ --color-palette-gray-00: var(--seed-color-palette-gray-00);
27
+ --color-palette-gray-100: var(--seed-color-palette-gray-100);
28
+ --color-palette-gray-200: var(--seed-color-palette-gray-200);
29
+ --color-palette-gray-300: var(--seed-color-palette-gray-300);
30
+ --color-palette-gray-400: var(--seed-color-palette-gray-400);
31
+ --color-palette-gray-500: var(--seed-color-palette-gray-500);
32
+ --color-palette-gray-600: var(--seed-color-palette-gray-600);
33
+ --color-palette-gray-700: var(--seed-color-palette-gray-700);
34
+ --color-palette-gray-800: var(--seed-color-palette-gray-800);
35
+ --color-palette-gray-900: var(--seed-color-palette-gray-900);
36
+ --color-palette-gray-1000: var(--seed-color-palette-gray-1000);
37
+ --color-palette-green-100: var(--seed-color-palette-green-100);
38
+ --color-palette-green-200: var(--seed-color-palette-green-200);
39
+ --color-palette-green-300: var(--seed-color-palette-green-300);
40
+ --color-palette-green-400: var(--seed-color-palette-green-400);
41
+ --color-palette-green-500: var(--seed-color-palette-green-500);
42
+ --color-palette-green-600: var(--seed-color-palette-green-600);
43
+ --color-palette-green-700: var(--seed-color-palette-green-700);
44
+ --color-palette-green-800: var(--seed-color-palette-green-800);
45
+ --color-palette-green-900: var(--seed-color-palette-green-900);
46
+ --color-palette-green-1000: var(--seed-color-palette-green-1000);
47
+ --color-palette-purple-100: var(--seed-color-palette-purple-100);
48
+ --color-palette-purple-200: var(--seed-color-palette-purple-200);
49
+ --color-palette-purple-300: var(--seed-color-palette-purple-300);
50
+ --color-palette-purple-400: var(--seed-color-palette-purple-400);
51
+ --color-palette-purple-500: var(--seed-color-palette-purple-500);
52
+ --color-palette-purple-600: var(--seed-color-palette-purple-600);
53
+ --color-palette-purple-700: var(--seed-color-palette-purple-700);
54
+ --color-palette-purple-800: var(--seed-color-palette-purple-800);
55
+ --color-palette-purple-900: var(--seed-color-palette-purple-900);
56
+ --color-palette-purple-1000: var(--seed-color-palette-purple-1000);
57
+ --color-palette-red-100: var(--seed-color-palette-red-100);
58
+ --color-palette-red-200: var(--seed-color-palette-red-200);
59
+ --color-palette-red-300: var(--seed-color-palette-red-300);
60
+ --color-palette-red-400: var(--seed-color-palette-red-400);
61
+ --color-palette-red-500: var(--seed-color-palette-red-500);
62
+ --color-palette-red-600: var(--seed-color-palette-red-600);
63
+ --color-palette-red-700: var(--seed-color-palette-red-700);
64
+ --color-palette-red-800: var(--seed-color-palette-red-800);
65
+ --color-palette-red-900: var(--seed-color-palette-red-900);
66
+ --color-palette-red-1000: var(--seed-color-palette-red-1000);
67
+ --color-palette-static-black: var(--seed-color-palette-static-black);
68
+ --color-palette-static-white: var(--seed-color-palette-static-white);
69
+ --color-palette-static-black-alpha-50: var(--seed-color-palette-static-black-alpha-50);
70
+ --color-palette-static-black-alpha-200: var(--seed-color-palette-static-black-alpha-200);
71
+ --color-palette-static-black-alpha-500: var(--seed-color-palette-static-black-alpha-500);
72
+ --color-palette-static-white-alpha-200: var(--seed-color-palette-static-white-alpha-200);
73
+ --color-palette-static-white-alpha-800: var(--seed-color-palette-static-white-alpha-800);
74
+ --color-palette-yellow-100: var(--seed-color-palette-yellow-100);
75
+ --color-palette-yellow-200: var(--seed-color-palette-yellow-200);
76
+ --color-palette-yellow-300: var(--seed-color-palette-yellow-300);
77
+ --color-palette-yellow-400: var(--seed-color-palette-yellow-400);
78
+ --color-palette-yellow-500: var(--seed-color-palette-yellow-500);
79
+ --color-palette-yellow-600: var(--seed-color-palette-yellow-600);
80
+ --color-palette-yellow-700: var(--seed-color-palette-yellow-700);
81
+ --color-palette-yellow-800: var(--seed-color-palette-yellow-800);
82
+ --color-palette-yellow-900: var(--seed-color-palette-yellow-900);
83
+ --color-palette-yellow-1000: var(--seed-color-palette-yellow-1000);
84
+ --color-fg-brand: var(--seed-color-fg-brand);
85
+ --color-fg-critical: var(--seed-color-fg-critical);
86
+ --color-fg-disabled: var(--seed-color-fg-disabled);
87
+ --color-fg-informative: var(--seed-color-fg-informative);
88
+ --color-fg-magic: var(--seed-color-fg-magic);
89
+ --color-fg-neutral: var(--seed-color-fg-neutral);
90
+ --color-fg-placeholder: var(--seed-color-fg-placeholder);
91
+ --color-fg-positive: var(--seed-color-fg-positive);
92
+ --color-fg-critical-contrast: var(--seed-color-fg-critical-contrast);
93
+ --color-fg-informative-contrast: var(--seed-color-fg-informative-contrast);
94
+ --color-fg-magic-contrast: var(--seed-color-fg-magic-contrast);
95
+ --color-fg-neutral-inverted: var(--seed-color-fg-neutral-inverted);
96
+ --color-fg-neutral-muted: var(--seed-color-fg-neutral-muted);
97
+ --color-fg-neutral-subtle: var(--seed-color-fg-neutral-subtle);
98
+ --color-fg-positive-contrast: var(--seed-color-fg-positive-contrast);
99
+ --color-fg-warning-contrast: var(--seed-color-fg-warning-contrast);
100
+ --color-bg-disabled: var(--seed-color-bg-disabled);
101
+ --color-bg-overlay: var(--seed-color-bg-overlay);
102
+ --color-bg-brand-solid: var(--seed-color-bg-brand-solid);
103
+ --color-bg-brand-solid-pressed: var(--seed-color-bg-brand-solid-pressed);
104
+ --color-bg-critical-solid: var(--seed-color-bg-critical-solid);
105
+ --color-bg-critical-weak: var(--seed-color-bg-critical-weak);
106
+ --color-bg-critical-solid-pressed: var(--seed-color-bg-critical-solid-pressed);
107
+ --color-bg-critical-weak-pressed: var(--seed-color-bg-critical-weak-pressed);
108
+ --color-bg-informative-solid: var(--seed-color-bg-informative-solid);
109
+ --color-bg-informative-weak: var(--seed-color-bg-informative-weak);
110
+ --color-bg-informative-solid-pressed: var(--seed-color-bg-informative-solid-pressed);
111
+ --color-bg-informative-weak-pressed: var(--seed-color-bg-informative-weak-pressed);
112
+ --color-bg-layer-basement: var(--seed-color-bg-layer-basement);
113
+ --color-bg-layer-default: var(--seed-color-bg-layer-default);
114
+ --color-bg-layer-fill: var(--seed-color-bg-layer-fill);
115
+ --color-bg-layer-floating: var(--seed-color-bg-layer-floating);
116
+ --color-bg-layer-default-pressed: var(--seed-color-bg-layer-default-pressed);
117
+ --color-bg-layer-floating-pressed: var(--seed-color-bg-layer-floating-pressed);
118
+ --color-bg-magic-solid: var(--seed-color-bg-magic-solid);
119
+ --color-bg-magic-weak: var(--seed-color-bg-magic-weak);
120
+ --color-bg-magic-solid-pressed: var(--seed-color-bg-magic-solid-pressed);
121
+ --color-bg-magic-weak-pressed: var(--seed-color-bg-magic-weak-pressed);
122
+ --color-bg-neutral-inverted: var(--seed-color-bg-neutral-inverted);
123
+ --color-bg-neutral-solid: var(--seed-color-bg-neutral-solid);
124
+ --color-bg-neutral-weak: var(--seed-color-bg-neutral-weak);
125
+ --color-bg-neutral-inverted-pressed: var(--seed-color-bg-neutral-inverted-pressed);
126
+ --color-bg-neutral-solid-muted: var(--seed-color-bg-neutral-solid-muted);
127
+ --color-bg-neutral-solid-muted-pressed: var(--seed-color-bg-neutral-solid-muted-pressed);
128
+ --color-bg-neutral-weak-pressed: var(--seed-color-bg-neutral-weak-pressed);
129
+ --color-bg-overlay-muted: var(--seed-color-bg-overlay-muted);
130
+ --color-bg-positive-solid: var(--seed-color-bg-positive-solid);
131
+ --color-bg-positive-weak: var(--seed-color-bg-positive-weak);
132
+ --color-bg-positive-solid-pressed: var(--seed-color-bg-positive-solid-pressed);
133
+ --color-bg-positive-weak-pressed: var(--seed-color-bg-positive-weak-pressed);
134
+ --color-bg-warning-solid: var(--seed-color-bg-warning-solid);
135
+ --color-bg-warning-weak: var(--seed-color-bg-warning-weak);
136
+ --color-bg-warning-weak-pressed: var(--seed-color-bg-warning-weak-pressed);
137
+ --color-stroke-brand: var(--seed-color-stroke-brand);
138
+ --color-stroke-control: var(--seed-color-stroke-control);
139
+ --color-stroke-critical: var(--seed-color-stroke-critical);
140
+ --color-stroke-field: var(--seed-color-stroke-field);
141
+ --color-stroke-informative: var(--seed-color-stroke-informative);
142
+ --color-stroke-neutral: var(--seed-color-stroke-neutral);
143
+ --color-stroke-positive: var(--seed-color-stroke-positive);
144
+ --color-stroke-field-focused: var(--seed-color-stroke-field-focused);
145
+ --color-stroke-neutral-muted: var(--seed-color-stroke-neutral-muted);
146
+ --color-stroke-on-image: var(--seed-color-stroke-on-image);
147
+ --color-manner-temp-l1-bg: var(--seed-color-manner-temp-l1-bg);
148
+ --color-manner-temp-l1-text: var(--seed-color-manner-temp-l1-text);
149
+ --color-manner-temp-l2-bg: var(--seed-color-manner-temp-l2-bg);
150
+ --color-manner-temp-l2-text: var(--seed-color-manner-temp-l2-text);
151
+ --color-manner-temp-l3-bg: var(--seed-color-manner-temp-l3-bg);
152
+ --color-manner-temp-l3-text: var(--seed-color-manner-temp-l3-text);
153
+ --color-manner-temp-l4-bg: var(--seed-color-manner-temp-l4-bg);
154
+ --color-manner-temp-l4-text: var(--seed-color-manner-temp-l4-text);
155
+ --color-manner-temp-l5-bg: var(--seed-color-manner-temp-l5-bg);
156
+ --color-manner-temp-l5-text: var(--seed-color-manner-temp-l5-text);
157
+ --color-manner-temp-l6-bg: var(--seed-color-manner-temp-l6-bg);
158
+ --color-manner-temp-l6-text: var(--seed-color-manner-temp-l6-text);
159
+ --dimension-x0_5: var(--seed-dimension-x0_5);
160
+ --dimension-x1: var(--seed-dimension-x1);
161
+ --dimension-x1_5: var(--seed-dimension-x1_5);
162
+ --dimension-x2: var(--seed-dimension-x2);
163
+ --dimension-x2_5: var(--seed-dimension-x2_5);
164
+ --dimension-x3: var(--seed-dimension-x3);
165
+ --dimension-x3_5: var(--seed-dimension-x3_5);
166
+ --dimension-x4: var(--seed-dimension-x4);
167
+ --dimension-x4_5: var(--seed-dimension-x4_5);
168
+ --dimension-x5: var(--seed-dimension-x5);
169
+ --dimension-x6: var(--seed-dimension-x6);
170
+ --dimension-x7: var(--seed-dimension-x7);
171
+ --dimension-x8: var(--seed-dimension-x8);
172
+ --dimension-x9: var(--seed-dimension-x9);
173
+ --dimension-x10: var(--seed-dimension-x10);
174
+ --dimension-x12: var(--seed-dimension-x12);
175
+ --dimension-x13: var(--seed-dimension-x13);
176
+ --dimension-x14: var(--seed-dimension-x14);
177
+ --dimension-x16: var(--seed-dimension-x16);
178
+ --dimension-spacing-x-between-chips: var(--seed-dimension-spacing-x-between-chips);
179
+ --dimension-spacing-x-global-gutter: var(--seed-dimension-spacing-x-global-gutter);
180
+ --dimension-spacing-y-component-default: var(--seed-dimension-spacing-y-component-default);
181
+ --dimension-spacing-y-nav-to-title: var(--seed-dimension-spacing-y-nav-to-title);
182
+ --dimension-spacing-y-screen-bottom: var(--seed-dimension-spacing-y-screen-bottom);
183
+ --dimension-spacing-y-between-text: var(--seed-dimension-spacing-y-between-text);
184
+ --duration-d1: var(--seed-duration-d1);
185
+ --duration-d2: var(--seed-duration-d2);
186
+ --duration-d3: var(--seed-duration-d3);
187
+ --duration-d4: var(--seed-duration-d4);
188
+ --duration-d5: var(--seed-duration-d5);
189
+ --duration-d6: var(--seed-duration-d6);
190
+ --font-size-t1: var(--seed-font-size-t1);
191
+ --font-size-t2: var(--seed-font-size-t2);
192
+ --font-size-t3: var(--seed-font-size-t3);
193
+ --font-size-t4: var(--seed-font-size-t4);
194
+ --font-size-t5: var(--seed-font-size-t5);
195
+ --font-size-t6: var(--seed-font-size-t6);
196
+ --font-size-t7: var(--seed-font-size-t7);
197
+ --font-size-t8: var(--seed-font-size-t8);
198
+ --font-size-t9: var(--seed-font-size-t9);
199
+ --font-size-t10: var(--seed-font-size-t10);
200
+ --font-size-t2-static: var(--seed-font-size-t2-static);
201
+ --font-size-t5-static: var(--seed-font-size-t5-static);
202
+ --font-size-t6-static: var(--seed-font-size-t6-static);
203
+ --font-weight-regular: var(--seed-font-weight-regular);
204
+ --font-weight-medium: var(--seed-font-weight-medium);
205
+ --font-weight-bold: var(--seed-font-weight-bold);
206
+ --gradient-shimmer: var(--seed-gradient-shimmer);
207
+ --line-height-t1: var(--seed-line-height-t1);
208
+ --line-height-t2: var(--seed-line-height-t2);
209
+ --line-height-t3: var(--seed-line-height-t3);
210
+ --line-height-t4: var(--seed-line-height-t4);
211
+ --line-height-t5: var(--seed-line-height-t5);
212
+ --line-height-t6: var(--seed-line-height-t6);
213
+ --line-height-t7: var(--seed-line-height-t7);
214
+ --line-height-t8: var(--seed-line-height-t8);
215
+ --line-height-t9: var(--seed-line-height-t9);
216
+ --line-height-t10: var(--seed-line-height-t10);
217
+ --radius-r0_5: var(--seed-radius-r0_5);
218
+ --radius-r1: var(--seed-radius-r1);
219
+ --radius-r1_5: var(--seed-radius-r1_5);
220
+ --radius-r2: var(--seed-radius-r2);
221
+ --radius-r2_5: var(--seed-radius-r2_5);
222
+ --radius-r3: var(--seed-radius-r3);
223
+ --radius-r3_5: var(--seed-radius-r3_5);
224
+ --radius-r4: var(--seed-radius-r4);
225
+ --radius-r5: var(--seed-radius-r5);
226
+ --radius-r6: var(--seed-radius-r6);
227
+ --radius-full: var(--seed-radius-full);
228
+ --timing-function-linear: var(--seed-timing-function-linear);
229
+ --timing-function-easing: var(--seed-timing-function-easing);
230
+ --timing-function-enter: var(--seed-timing-function-enter);
231
+ --timing-function-exit: var(--seed-timing-function-exit);
232
+ --timing-function-enter-expressive: var(--seed-timing-function-enter-expressive);
233
+ --timing-function-exit-expressive: var(--seed-timing-function-exit-expressive);
234
+ }
235
+
236
+ @utility screen-title {
237
+ font-size: var(--seed-font-size-t10);
238
+ line-height: var(--seed-line-height-t10);
239
+ font-weight: var(--seed-font-weight-bold);
240
+ }
241
+
242
+ @utility article-body {
243
+ font-size: var(--seed-font-size-t5);
244
+ line-height: var(--seed-line-height-t6);
245
+ font-weight: var(--seed-font-weight-regular);
246
+ }
247
+
248
+ @utility t1-regular {
249
+ font-size: var(--seed-font-size-t1);
250
+ line-height: var(--seed-line-height-t1);
251
+ font-weight: var(--seed-font-weight-regular);
252
+ }
253
+
254
+ @utility t1-medium {
255
+ font-size: var(--seed-font-size-t1);
256
+ line-height: var(--seed-line-height-t1);
257
+ font-weight: var(--seed-font-weight-medium);
258
+ }
259
+
260
+ @utility t1-bold {
261
+ font-size: var(--seed-font-size-t1);
262
+ line-height: var(--seed-line-height-t1);
263
+ font-weight: var(--seed-font-weight-bold);
264
+ }
265
+
266
+ @utility t2-regular {
267
+ font-size: var(--seed-font-size-t2);
268
+ line-height: var(--seed-line-height-t2);
269
+ font-weight: var(--seed-font-weight-regular);
270
+ }
271
+
272
+ @utility t2-medium {
273
+ font-size: var(--seed-font-size-t2);
274
+ line-height: var(--seed-line-height-t2);
275
+ font-weight: var(--seed-font-weight-medium);
276
+ }
277
+
278
+ @utility t2-bold {
279
+ font-size: var(--seed-font-size-t2);
280
+ line-height: var(--seed-line-height-t2);
281
+ font-weight: var(--seed-font-weight-bold);
282
+ }
283
+
284
+ @utility t3-regular {
285
+ font-size: var(--seed-font-size-t3);
286
+ line-height: var(--seed-line-height-t3);
287
+ font-weight: var(--seed-font-weight-regular);
288
+ }
289
+
290
+ @utility t3-medium {
291
+ font-size: var(--seed-font-size-t3);
292
+ line-height: var(--seed-line-height-t3);
293
+ font-weight: var(--seed-font-weight-medium);
294
+ }
295
+
296
+ @utility t3-bold {
297
+ font-size: var(--seed-font-size-t3);
298
+ line-height: var(--seed-line-height-t3);
299
+ font-weight: var(--seed-font-weight-bold);
300
+ }
301
+
302
+ @utility t4-regular {
303
+ font-size: var(--seed-font-size-t4);
304
+ line-height: var(--seed-line-height-t4);
305
+ font-weight: var(--seed-font-weight-regular);
306
+ }
307
+
308
+ @utility t4-medium {
309
+ font-size: var(--seed-font-size-t4);
310
+ line-height: var(--seed-line-height-t4);
311
+ font-weight: var(--seed-font-weight-medium);
312
+ }
313
+
314
+ @utility t4-bold {
315
+ font-size: var(--seed-font-size-t4);
316
+ line-height: var(--seed-line-height-t4);
317
+ font-weight: var(--seed-font-weight-bold);
318
+ }
319
+
320
+ @utility t5-regular {
321
+ font-size: var(--seed-font-size-t5);
322
+ line-height: var(--seed-line-height-t5);
323
+ font-weight: var(--seed-font-weight-regular);
324
+ }
325
+
326
+ @utility t5-medium {
327
+ font-size: var(--seed-font-size-t5);
328
+ line-height: var(--seed-line-height-t5);
329
+ font-weight: var(--seed-font-weight-medium);
330
+ }
331
+
332
+ @utility t5-bold {
333
+ font-size: var(--seed-font-size-t5);
334
+ line-height: var(--seed-line-height-t5);
335
+ font-weight: var(--seed-font-weight-bold);
336
+ }
337
+
338
+ @utility t6-regular {
339
+ font-size: var(--seed-font-size-t6);
340
+ line-height: var(--seed-line-height-t6);
341
+ font-weight: var(--seed-font-weight-regular);
342
+ }
343
+
344
+ @utility t6-medium {
345
+ font-size: var(--seed-font-size-t6);
346
+ line-height: var(--seed-line-height-t6);
347
+ font-weight: var(--seed-font-weight-medium);
348
+ }
349
+
350
+ @utility t6-bold {
351
+ font-size: var(--seed-font-size-t6);
352
+ line-height: var(--seed-line-height-t6);
353
+ font-weight: var(--seed-font-weight-bold);
354
+ }
355
+
356
+ @utility t7-regular {
357
+ font-size: var(--seed-font-size-t7);
358
+ line-height: var(--seed-line-height-t7);
359
+ font-weight: var(--seed-font-weight-regular);
360
+ }
361
+
362
+ @utility t7-medium {
363
+ font-size: var(--seed-font-size-t7);
364
+ line-height: var(--seed-line-height-t7);
365
+ font-weight: var(--seed-font-weight-medium);
366
+ }
367
+
368
+ @utility t7-bold {
369
+ font-size: var(--seed-font-size-t7);
370
+ line-height: var(--seed-line-height-t7);
371
+ font-weight: var(--seed-font-weight-bold);
372
+ }
373
+
374
+ @utility t8-bold {
375
+ font-size: var(--seed-font-size-t8);
376
+ line-height: var(--seed-line-height-t8);
377
+ font-weight: var(--seed-font-weight-bold);
378
+ }
379
+
380
+ @utility t9-bold {
381
+ font-size: var(--seed-font-size-t9);
382
+ line-height: var(--seed-line-height-t9);
383
+ font-weight: var(--seed-font-weight-bold);
384
+ }
385
+
386
+ @utility t10-bold {
387
+ font-size: var(--seed-font-size-t10);
388
+ line-height: var(--seed-line-height-t10);
389
+ font-weight: var(--seed-font-weight-bold);
390
+ }
391
+
392
+ @utility size-* {
393
+ width: var(--dimension- --value(--dimension-*, *));
394
+ height: var(--dimension- --value(--dimension-*, *));
395
+ }
396
+
397
+ @utility w-* {
398
+ width: var(--dimension- --value(--dimension-*, *));
399
+ }
400
+
401
+ @utility h-* {
402
+ height: var(--dimension- --value(--dimension-*, *));
403
+ }
404
+
405
+ @utility p-* {
406
+ padding: var(--dimension- --value(--dimension-*, *));
407
+ }
408
+
409
+ @utility pt-* {
410
+ paddingTop: var(--dimension- --value(--dimension-*, *));
411
+ }
412
+
413
+ @utility pb-* {
414
+ paddingBottom: var(--dimension- --value(--dimension-*, *));
415
+ }
416
+
417
+ @utility pl-* {
418
+ paddingLeft: var(--dimension- --value(--dimension-*, *));
419
+ }
420
+
421
+ @utility pr-* {
422
+ paddingRight: var(--dimension- --value(--dimension-*, *));
423
+ }
424
+
425
+ @utility px-* {
426
+ paddingLeft: var(--dimension- --value(--dimension-*, *));
427
+ paddingRight: var(--dimension- --value(--dimension-*, *));
428
+ }
429
+
430
+ @utility py-* {
431
+ paddingTop: var(--dimension- --value(--dimension-*, *));
432
+ paddingBottom: var(--dimension- --value(--dimension-*, *));
433
+ }
434
+
435
+ @utility m-* {
436
+ margin: var(--dimension- --value(--dimension-*, *));
437
+ }
438
+
439
+ @utility mt-* {
440
+ marginTop: var(--dimension- --value(--dimension-*, *));
441
+ }
442
+
443
+ @utility mb-* {
444
+ marginBottom: var(--dimension- --value(--dimension-*, *));
445
+ }
446
+
447
+ @utility ml-* {
448
+ marginLeft: var(--dimension- --value(--dimension-*, *));
449
+ }
450
+
451
+ @utility mr-* {
452
+ marginRight: var(--dimension- --value(--dimension-*, *));
453
+ }
454
+
455
+ @utility mx-* {
456
+ marginLeft: var(--dimension- --value(--dimension-*, *));
457
+ marginRight: var(--dimension- --value(--dimension-*, *));
458
+ }
459
+
460
+ @utility my-* {
461
+ marginTop: var(--dimension- --value(--dimension-*, *));
462
+ marginBottom: var(--dimension- --value(--dimension-*, *));
463
+ }
464
+
465
+ @utility gap-* {
466
+ gap: var(--dimension- --value(--dimension-*, *));
467
+ }
468
+
469
+ @utility gap-x-* {
470
+ columnGap: var(--dimension- --value(--dimension-*, *));
471
+ }
472
+
473
+ @utility gap-y-* {
474
+ rowGap: var(--dimension- --value(--dimension-*, *));
475
+ }
476
+
477
+ @utility radius-* {
478
+ borderRadius: var(--radius- --value(--radius-*, *));
479
+ }
480
+
481
+ @utility text-size-* {
482
+ fontSize: var(--font-size- --value(--font-size-*, *));
483
+ }
484
+
485
+ @utility leading-* {
486
+ lineHeight: var(--line-height- --value(--line-height-*, *));
487
+ }
488
+
489
+ @utility font-* {
490
+ fontWeight: var(--font-weight- --value(--font-weight-*, *));
491
+ }
492
+
493
+ @utility duration-* {
494
+ transitionDuration: var(--duration- --value(--duration-*, *));
495
+ }
496
+
497
+ @utility easing-* {
498
+ transitionTimingFunction: var(--timing-function- --value(--timing-function-*, *));
499
+ }
package/package.json ADDED
@@ -0,0 +1,31 @@
1
+ {
2
+ "name": "@seed-design/tailwind4-theme",
3
+ "version": "0.0.12",
4
+ "description": "SEED 디자인 토큰을 Tailwind CSS 4.0에서 사용하기 위한 플러그인",
5
+ "main": "index.css",
6
+ "files": [
7
+ "index.css",
8
+ "README.md"
9
+ ],
10
+ "scripts": {
11
+ "rootage:generate": "rootage tailwind4 ./"
12
+ },
13
+ "exports": {
14
+ ".": "./index.css"
15
+ },
16
+ "peerDependencies": {
17
+ "tailwindcss": "^4.0.0"
18
+ },
19
+ "keywords": [
20
+ "tailwindcss",
21
+ "tailwind",
22
+ "css",
23
+ "plugin",
24
+ "seed-design",
25
+ "design-system"
26
+ ],
27
+ "license": "MIT",
28
+ "publishConfig": {
29
+ "access": "public"
30
+ }
31
+ }