@exem-ui/tailwindcss4 0.3.2-next.20260728024650 → 0.3.2-next.20260819010838

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 (4) hide show
  1. package/README.en.md +13 -0
  2. package/README.md +13 -0
  3. package/dist/theme.strict.css +458 -0
  4. package/package.json +4 -1
package/README.en.md CHANGED
@@ -66,6 +66,19 @@ That's it! Now use Exem design tokens as Tailwind utilities:
66
66
  </div>
67
67
  ```
68
68
 
69
+ ### Strict mode
70
+
71
+ `/strict` includes a reset for Tailwind's default colors, border radii, shadows, font sizes and weights, and breakpoints. This leaves Exem tokens as the available values in those areas.
72
+
73
+ ```css
74
+ @import "tailwindcss";
75
+ @import "@exem-ui/core/css";
76
+ @import "@exem-ui/tailwindcss4/strict";
77
+ @import "@exem-ui/react/styles";
78
+ ```
79
+
80
+ Static utilities that use CSS keywords directly, such as `rounded-full`, `rounded-none`, `bg-transparent`, and `bg-inherit`, are independent of `@theme` namespaces and remain available in strict mode. Apply ESLint rules as well to restrict them together with arbitrary values such as `text-[13px]`, `rounded-[20px]`, and `min-[640px]`.
81
+
69
82
  ## v3 vs v4
70
83
 
71
84
  | | @exem-ui/tailwindcss3 | @exem-ui/tailwindcss4 |
package/README.md CHANGED
@@ -77,6 +77,19 @@ CSS 엔트리 파일에 아래 import를 추가합니다:
77
77
  </div>
78
78
  ```
79
79
 
80
+ ### Tailwind 기본 토큰 없이 Exem 토큰 사용하기
81
+
82
+ `/strict`에는 Tailwind가 기본 제공하는 색상, 모서리, 그림자, 글자 크기·굵기, 반응형 기준을 초기화하는 reset이 포함되어 있습니다. 따라서 해당 영역에서는 Exem 토큰만 사용할 수 있습니다.
83
+
84
+ ```css
85
+ @import "tailwindcss";
86
+ @import "@exem-ui/core/css";
87
+ @import "@exem-ui/tailwindcss4/strict";
88
+ @import "@exem-ui/react/styles";
89
+ ```
90
+
91
+ `rounded-full`, `rounded-none`, `bg-transparent`, `bg-inherit`처럼 CSS 키워드를 직접 쓰는 정적 유틸리티는 `@theme` namespace와 무관하므로 strict 모드에서도 사용할 수 있습니다. `text-[13px]`, `rounded-[20px]`, `min-[640px]` 같은 arbitrary 값과 함께 제한하려면 ESLint 규칙을 적용해야 합니다.
92
+
80
93
  ### 왜 react/styles가 필요한가
81
94
 
82
95
  Tailwind v4는 `node_modules`를 기본 스캔 대상에서 제외합니다. `@exem-ui/react` 컴포넌트 내부에서 사용하는 `rounded-full`, `shrink-0` 같은 표준 Tailwind 클래스를 인식하지 못해 CSS가 누락됩니다.
package/dist/theme.strict.css ADDED
@@ -0,0 +1,458 @@
1
+ @theme {
2
+ --color-*: initial;
3
+ --radius-*: initial;
4
+ --shadow-*: initial;
5
+ --text-*: initial;
6
+ --font-weight-*: initial;
7
+ --breakpoint-*: initial;
8
+ }
9
+
10
+ /**
11
+ * Exem Design System - Tailwind CSS 4 Theme
12
+ * Auto-generated file. Do not edit directly.
13
+ *
14
+ * @exem-ui/core/css (global.css)를 함께 import해야 합니다.
15
+ *
16
+ * @example
17
+ * ```css
18
+ * @import "tailwindcss";
19
+ * @import "@exem-ui/core/css";
20
+ * @import "@exem-ui/tailwindcss4";
21
+ * ```
22
+ */
23
+
24
+ /* ──────────── Colors ──────────── */
25
+ /* @theme inline: global.css의 --color-* 변수와 네이밍 충돌 방지 */
26
+ /* TW4는 유틸리티 클래스에 var() 참조를 직접 삽입 */
27
+ @theme inline {
28
+ --color-mono-light: var(--color-mono-light);
29
+ --color-mono-dark: var(--color-mono-dark);
30
+ --color-gray-00: var(--color-gray-00);
31
+ --color-gray-01: var(--color-gray-01);
32
+ --color-gray-02: var(--color-gray-02);
33
+ --color-gray-03: var(--color-gray-03);
34
+ --color-gray-04: var(--color-gray-04);
35
+ --color-gray-05: var(--color-gray-05);
36
+ --color-gray-06: var(--color-gray-06);
37
+ --color-gray-07: var(--color-gray-07);
38
+ --color-gray-08: var(--color-gray-08);
39
+ --color-gray-09: var(--color-gray-09);
40
+ --color-gray-10: var(--color-gray-10);
41
+ --color-red-00: var(--color-red-00);
42
+ --color-red-01: var(--color-red-01);
43
+ --color-red-02: var(--color-red-02);
44
+ --color-red-03: var(--color-red-03);
45
+ --color-red-04: var(--color-red-04);
46
+ --color-red-05: var(--color-red-05);
47
+ --color-red-06: var(--color-red-06);
48
+ --color-red-07: var(--color-red-07);
49
+ --color-red-08: var(--color-red-08);
50
+ --color-red-09: var(--color-red-09);
51
+ --color-red-10: var(--color-red-10);
52
+ --color-orange-00: var(--color-orange-00);
53
+ --color-orange-01: var(--color-orange-01);
54
+ --color-orange-02: var(--color-orange-02);
55
+ --color-orange-03: var(--color-orange-03);
56
+ --color-orange-04: var(--color-orange-04);
57
+ --color-orange-05: var(--color-orange-05);
58
+ --color-orange-06: var(--color-orange-06);
59
+ --color-orange-07: var(--color-orange-07);
60
+ --color-orange-08: var(--color-orange-08);
61
+ --color-orange-09: var(--color-orange-09);
62
+ --color-orange-10: var(--color-orange-10);
63
+ --color-amber-00: var(--color-amber-00);
64
+ --color-amber-01: var(--color-amber-01);
65
+ --color-amber-02: var(--color-amber-02);
66
+ --color-amber-03: var(--color-amber-03);
67
+ --color-amber-04: var(--color-amber-04);
68
+ --color-amber-05: var(--color-amber-05);
69
+ --color-amber-06: var(--color-amber-06);
70
+ --color-amber-07: var(--color-amber-07);
71
+ --color-amber-08: var(--color-amber-08);
72
+ --color-amber-09: var(--color-amber-09);
73
+ --color-amber-10: var(--color-amber-10);
74
+ --color-yellow-00: var(--color-yellow-00);
75
+ --color-yellow-01: var(--color-yellow-01);
76
+ --color-yellow-02: var(--color-yellow-02);
77
+ --color-yellow-03: var(--color-yellow-03);
78
+ --color-yellow-04: var(--color-yellow-04);
79
+ --color-yellow-05: var(--color-yellow-05);
80
+ --color-yellow-06: var(--color-yellow-06);
81
+ --color-yellow-07: var(--color-yellow-07);
82
+ --color-yellow-08: var(--color-yellow-08);
83
+ --color-yellow-09: var(--color-yellow-09);
84
+ --color-yellow-10: var(--color-yellow-10);
85
+ --color-lime-00: var(--color-lime-00);
86
+ --color-lime-01: var(--color-lime-01);
87
+ --color-lime-02: var(--color-lime-02);
88
+ --color-lime-03: var(--color-lime-03);
89
+ --color-lime-04: var(--color-lime-04);
90
+ --color-lime-05: var(--color-lime-05);
91
+ --color-lime-06: var(--color-lime-06);
92
+ --color-lime-07: var(--color-lime-07);
93
+ --color-lime-08: var(--color-lime-08);
94
+ --color-lime-09: var(--color-lime-09);
95
+ --color-lime-10: var(--color-lime-10);
96
+ --color-green-00: var(--color-green-00);
97
+ --color-green-01: var(--color-green-01);
98
+ --color-green-02: var(--color-green-02);
99
+ --color-green-03: var(--color-green-03);
100
+ --color-green-04: var(--color-green-04);
101
+ --color-green-05: var(--color-green-05);
102
+ --color-green-06: var(--color-green-06);
103
+ --color-green-07: var(--color-green-07);
104
+ --color-green-08: var(--color-green-08);
105
+ --color-green-09: var(--color-green-09);
106
+ --color-green-10: var(--color-green-10);
107
+ --color-emerald-00: var(--color-emerald-00);
108
+ --color-emerald-01: var(--color-emerald-01);
109
+ --color-emerald-02: var(--color-emerald-02);
110
+ --color-emerald-03: var(--color-emerald-03);
111
+ --color-emerald-04: var(--color-emerald-04);
112
+ --color-emerald-05: var(--color-emerald-05);
113
+ --color-emerald-06: var(--color-emerald-06);
114
+ --color-emerald-07: var(--color-emerald-07);
115
+ --color-emerald-08: var(--color-emerald-08);
116
+ --color-emerald-09: var(--color-emerald-09);
117
+ --color-emerald-10: var(--color-emerald-10);
118
+ --color-teal-00: var(--color-teal-00);
119
+ --color-teal-01: var(--color-teal-01);
120
+ --color-teal-02: var(--color-teal-02);
121
+ --color-teal-03: var(--color-teal-03);
122
+ --color-teal-04: var(--color-teal-04);
123
+ --color-teal-05: var(--color-teal-05);
124
+ --color-teal-06: var(--color-teal-06);
125
+ --color-teal-07: var(--color-teal-07);
126
+ --color-teal-08: var(--color-teal-08);
127
+ --color-teal-09: var(--color-teal-09);
128
+ --color-teal-10: var(--color-teal-10);
129
+ --color-cyan-00: var(--color-cyan-00);
130
+ --color-cyan-01: var(--color-cyan-01);
131
+ --color-cyan-02: var(--color-cyan-02);
132
+ --color-cyan-03: var(--color-cyan-03);
133
+ --color-cyan-04: var(--color-cyan-04);
134
+ --color-cyan-05: var(--color-cyan-05);
135
+ --color-cyan-06: var(--color-cyan-06);
136
+ --color-cyan-07: var(--color-cyan-07);
137
+ --color-cyan-08: var(--color-cyan-08);
138
+ --color-cyan-09: var(--color-cyan-09);
139
+ --color-cyan-10: var(--color-cyan-10);
140
+ --color-sky-00: var(--color-sky-00);
141
+ --color-sky-01: var(--color-sky-01);
142
+ --color-sky-02: var(--color-sky-02);
143
+ --color-sky-03: var(--color-sky-03);
144
+ --color-sky-04: var(--color-sky-04);
145
+ --color-sky-05: var(--color-sky-05);
146
+ --color-sky-06: var(--color-sky-06);
147
+ --color-sky-07: var(--color-sky-07);
148
+ --color-sky-08: var(--color-sky-08);
149
+ --color-sky-09: var(--color-sky-09);
150
+ --color-sky-10: var(--color-sky-10);
151
+ --color-blue-00: var(--color-blue-00);
152
+ --color-blue-01: var(--color-blue-01);
153
+ --color-blue-02: var(--color-blue-02);
154
+ --color-blue-03: var(--color-blue-03);
155
+ --color-blue-04: var(--color-blue-04);
156
+ --color-blue-05: var(--color-blue-05);
157
+ --color-blue-06: var(--color-blue-06);
158
+ --color-blue-07: var(--color-blue-07);
159
+ --color-blue-08: var(--color-blue-08);
160
+ --color-blue-09: var(--color-blue-09);
161
+ --color-blue-10: var(--color-blue-10);
162
+ --color-indigo-00: var(--color-indigo-00);
163
+ --color-indigo-01: var(--color-indigo-01);
164
+ --color-indigo-02: var(--color-indigo-02);
165
+ --color-indigo-03: var(--color-indigo-03);
166
+ --color-indigo-04: var(--color-indigo-04);
167
+ --color-indigo-05: var(--color-indigo-05);
168
+ --color-indigo-06: var(--color-indigo-06);
169
+ --color-indigo-07: var(--color-indigo-07);
170
+ --color-indigo-08: var(--color-indigo-08);
171
+ --color-indigo-09: var(--color-indigo-09);
172
+ --color-indigo-10: var(--color-indigo-10);
173
+ --color-violet-00: var(--color-violet-00);
174
+ --color-violet-01: var(--color-violet-01);
175
+ --color-violet-02: var(--color-violet-02);
176
+ --color-violet-03: var(--color-violet-03);
177
+ --color-violet-04: var(--color-violet-04);
178
+ --color-violet-05: var(--color-violet-05);
179
+ --color-violet-06: var(--color-violet-06);
180
+ --color-violet-07: var(--color-violet-07);
181
+ --color-violet-08: var(--color-violet-08);
182
+ --color-violet-09: var(--color-violet-09);
183
+ --color-violet-10: var(--color-violet-10);
184
+ --color-purple-00: var(--color-purple-00);
185
+ --color-purple-01: var(--color-purple-01);
186
+ --color-purple-02: var(--color-purple-02);
187
+ --color-purple-03: var(--color-purple-03);
188
+ --color-purple-04: var(--color-purple-04);
189
+ --color-purple-05: var(--color-purple-05);
190
+ --color-purple-06: var(--color-purple-06);
191
+ --color-purple-07: var(--color-purple-07);
192
+ --color-purple-08: var(--color-purple-08);
193
+ --color-purple-09: var(--color-purple-09);
194
+ --color-purple-10: var(--color-purple-10);
195
+ --color-fuchsia-00: var(--color-fuchsia-00);
196
+ --color-fuchsia-01: var(--color-fuchsia-01);
197
+ --color-fuchsia-02: var(--color-fuchsia-02);
198
+ --color-fuchsia-03: var(--color-fuchsia-03);
199
+ --color-fuchsia-04: var(--color-fuchsia-04);
200
+ --color-fuchsia-05: var(--color-fuchsia-05);
201
+ --color-fuchsia-06: var(--color-fuchsia-06);
202
+ --color-fuchsia-07: var(--color-fuchsia-07);
203
+ --color-fuchsia-08: var(--color-fuchsia-08);
204
+ --color-fuchsia-09: var(--color-fuchsia-09);
205
+ --color-fuchsia-10: var(--color-fuchsia-10);
206
+ --color-pink-00: var(--color-pink-00);
207
+ --color-pink-01: var(--color-pink-01);
208
+ --color-pink-02: var(--color-pink-02);
209
+ --color-pink-03: var(--color-pink-03);
210
+ --color-pink-04: var(--color-pink-04);
211
+ --color-pink-05: var(--color-pink-05);
212
+ --color-pink-06: var(--color-pink-06);
213
+ --color-pink-07: var(--color-pink-07);
214
+ --color-pink-08: var(--color-pink-08);
215
+ --color-pink-09: var(--color-pink-09);
216
+ --color-pink-10: var(--color-pink-10);
217
+ --color-rose-00: var(--color-rose-00);
218
+ --color-rose-01: var(--color-rose-01);
219
+ --color-rose-02: var(--color-rose-02);
220
+ --color-rose-03: var(--color-rose-03);
221
+ --color-rose-04: var(--color-rose-04);
222
+ --color-rose-05: var(--color-rose-05);
223
+ --color-rose-06: var(--color-rose-06);
224
+ --color-rose-07: var(--color-rose-07);
225
+ --color-rose-08: var(--color-rose-08);
226
+ --color-rose-09: var(--color-rose-09);
227
+ --color-rose-10: var(--color-rose-10);
228
+ --color-text-primary: var(--color-text-primary);
229
+ --color-text-secondary: var(--color-text-secondary);
230
+ --color-text-tertiary: var(--color-text-tertiary);
231
+ --color-text-disabled: var(--color-text-disabled);
232
+ --color-text-inverse: var(--color-text-inverse);
233
+ --color-text-inverse-disabled: var(--color-text-inverse-disabled);
234
+ --color-text-static-light: var(--color-text-static-light);
235
+ --color-text-static-dark: var(--color-text-static-dark);
236
+ --color-text-inverse-subtle: var(--color-text-inverse-subtle);
237
+ --color-text-accent: var(--color-text-accent);
238
+ --color-text-accent-disabled: var(--color-text-accent-disabled);
239
+ --color-text-success: var(--color-text-success);
240
+ --color-text-success-disabled: var(--color-text-success-disabled);
241
+ --color-text-warning: var(--color-text-warning);
242
+ --color-text-warning-disabled: var(--color-text-warning-disabled);
243
+ --color-text-critical: var(--color-text-critical);
244
+ --color-text-critical-disabled: var(--color-text-critical-disabled);
245
+ --color-text-link: var(--color-text-link);
246
+ --color-border-primary: var(--color-border-primary);
247
+ --color-border-secondary: var(--color-border-secondary);
248
+ --color-border-hovered: var(--color-border-hovered);
249
+ --color-border-focused: var(--color-border-focused);
250
+ --color-border-disabled: var(--color-border-disabled);
251
+ --color-border-accent: var(--color-border-accent);
252
+ --color-border-accent-disabled: var(--color-border-accent-disabled);
253
+ --color-border-success: var(--color-border-success);
254
+ --color-border-success-disabled: var(--color-border-success-disabled);
255
+ --color-border-warning: var(--color-border-warning);
256
+ --color-border-warning-disabled: var(--color-border-warning-disabled);
257
+ --color-border-critical: var(--color-border-critical);
258
+ --color-border-critical-disabled: var(--color-border-critical-disabled);
259
+ --color-icon-primary: var(--color-icon-primary);
260
+ --color-icon-secondary: var(--color-icon-secondary);
261
+ --color-icon-tertiary: var(--color-icon-tertiary);
262
+ --color-icon-disabled: var(--color-icon-disabled);
263
+ --color-icon-inverse: var(--color-icon-inverse);
264
+ --color-icon-inverse-disabled: var(--color-icon-inverse-disabled);
265
+ --color-icon-static-light: var(--color-icon-static-light);
266
+ --color-icon-static-dark: var(--color-icon-static-dark);
267
+ --color-icon-accent: var(--color-icon-accent);
268
+ --color-icon-accent-disabled: var(--color-icon-accent-disabled);
269
+ --color-icon-success: var(--color-icon-success);
270
+ --color-icon-success-disabled: var(--color-icon-success-disabled);
271
+ --color-icon-warning: var(--color-icon-warning);
272
+ --color-icon-warning-disabled: var(--color-icon-warning-disabled);
273
+ --color-icon-critical: var(--color-icon-critical);
274
+ --color-icon-critical-disabled: var(--color-icon-critical-disabled);
275
+ --color-solid-primary-default: var(--color-solid-primary-default);
276
+ --color-solid-primary-hovered: var(--color-solid-primary-hovered);
277
+ --color-solid-primary-disabled: var(--color-solid-primary-disabled);
278
+ --color-solid-accent-default: var(--color-solid-accent-default);
279
+ --color-solid-accent-hovered: var(--color-solid-accent-hovered);
280
+ --color-solid-accent-disabled: var(--color-solid-accent-disabled);
281
+ --color-solid-success-default: var(--color-solid-success-default);
282
+ --color-solid-success-hovered: var(--color-solid-success-hovered);
283
+ --color-solid-success-disabled: var(--color-solid-success-disabled);
284
+ --color-solid-warning-default: var(--color-solid-warning-default);
285
+ --color-solid-warning-hovered: var(--color-solid-warning-hovered);
286
+ --color-solid-warning-disabled: var(--color-solid-warning-disabled);
287
+ --color-solid-critical-default: var(--color-solid-critical-default);
288
+ --color-solid-critical-hovered: var(--color-solid-critical-hovered);
289
+ --color-solid-critical-disabled: var(--color-solid-critical-disabled);
290
+ --color-elevation-elevation-0: var(--color-elevation-elevation-0);
291
+ --color-elevation-elevation-1: var(--color-elevation-elevation-1);
292
+ --color-elevation-elevation-2: var(--color-elevation-elevation-2);
293
+ --color-elevation-elevation-3: var(--color-elevation-elevation-3);
294
+ --color-elevation-elevation-4: var(--color-elevation-elevation-4);
295
+ --color-elevation-elevation-5: var(--color-elevation-elevation-5);
296
+ --color-elevation-elevation-6: var(--color-elevation-elevation-6);
297
+ --color-elevation-accent-0: var(--color-elevation-accent-0);
298
+ --color-elevation-accent-1: var(--color-elevation-accent-1);
299
+ --color-elevation-success-0: var(--color-elevation-success-0);
300
+ --color-elevation-success-1: var(--color-elevation-success-1);
301
+ --color-elevation-warning-0: var(--color-elevation-warning-0);
302
+ --color-elevation-warning-1: var(--color-elevation-warning-1);
303
+ --color-elevation-critical-0: var(--color-elevation-critical-0);
304
+ --color-elevation-critical-1: var(--color-elevation-critical-1);
305
+ --color-component-dim: var(--color-component-dim);
306
+ --color-component-scroll: var(--color-component-scroll);
307
+ --color-component-segmentedOption: var(--color-component-segmentedOption);
308
+ --color-component-tooltip: var(--color-component-tooltip);
309
+ --color-component-toast: var(--color-component-toast);
310
+ --color-component-tag: var(--color-component-tag);
311
+ --color-chart-axis-line: var(--color-chart-axis-line);
312
+ --color-chart-tick: var(--color-chart-tick);
313
+ --color-chart-label: var(--color-chart-label);
314
+ --color-tint-background-mono: var(--color-tint-background-mono);
315
+ --color-tint-background-sky: var(--color-tint-background-sky);
316
+ --color-tint-background-red: var(--color-tint-background-red);
317
+ --color-tint-background-orange: var(--color-tint-background-orange);
318
+ --color-tint-background-amber: var(--color-tint-background-amber);
319
+ --color-tint-background-yellow: var(--color-tint-background-yellow);
320
+ --color-tint-background-lime: var(--color-tint-background-lime);
321
+ --color-tint-background-green: var(--color-tint-background-green);
322
+ --color-tint-background-emerald: var(--color-tint-background-emerald);
323
+ --color-tint-background-teal: var(--color-tint-background-teal);
324
+ --color-tint-background-cyan: var(--color-tint-background-cyan);
325
+ --color-tint-background-blue: var(--color-tint-background-blue);
326
+ --color-tint-background-indigo: var(--color-tint-background-indigo);
327
+ --color-tint-background-violet: var(--color-tint-background-violet);
328
+ --color-tint-background-purple: var(--color-tint-background-purple);
329
+ --color-tint-background-fuchsia: var(--color-tint-background-fuchsia);
330
+ --color-tint-background-pink: var(--color-tint-background-pink);
331
+ --color-tint-background-rose: var(--color-tint-background-rose);
332
+ --color-tint-foreground-mono: var(--color-tint-foreground-mono);
333
+ --color-tint-foreground-sky: var(--color-tint-foreground-sky);
334
+ --color-tint-foreground-red: var(--color-tint-foreground-red);
335
+ --color-tint-foreground-orange: var(--color-tint-foreground-orange);
336
+ --color-tint-foreground-amber: var(--color-tint-foreground-amber);
337
+ --color-tint-foreground-yellow: var(--color-tint-foreground-yellow);
338
+ --color-tint-foreground-lime: var(--color-tint-foreground-lime);
339
+ --color-tint-foreground-green: var(--color-tint-foreground-green);
340
+ --color-tint-foreground-emerald: var(--color-tint-foreground-emerald);
341
+ --color-tint-foreground-teal: var(--color-tint-foreground-teal);
342
+ --color-tint-foreground-cyan: var(--color-tint-foreground-cyan);
343
+ --color-tint-foreground-blue: var(--color-tint-foreground-blue);
344
+ --color-tint-foreground-indigo: var(--color-tint-foreground-indigo);
345
+ --color-tint-foreground-violet: var(--color-tint-foreground-violet);
346
+ --color-tint-foreground-purple: var(--color-tint-foreground-purple);
347
+ --color-tint-foreground-fuchsia: var(--color-tint-foreground-fuchsia);
348
+ --color-tint-foreground-pink: var(--color-tint-foreground-pink);
349
+ --color-tint-foreground-rose: var(--color-tint-foreground-rose);
350
+ --color-background-primary: var(--color-background-primary);
351
+ --color-background-secondary: var(--color-background-secondary);
352
+ --color-background-overlay: var(--color-background-overlay);
353
+ }
354
+
355
+ /* ──────────── Border Radius ──────────── */
356
+ @theme inline {
357
+ --radius-weak: var(--radius-weak);
358
+ --radius-medium: var(--radius-medium);
359
+ --radius-strong: var(--radius-strong);
360
+ --radius-hard: var(--radius-hard);
361
+ }
362
+
363
+ /* ──────────── Box Shadow ──────────── */
364
+ @theme inline {
365
+ --shadow-weak: var(--shadow-weak);
366
+ --shadow-medium: var(--shadow-medium);
367
+ --shadow-strong: var(--shadow-strong);
368
+ --shadow-hard: var(--shadow-hard);
369
+ }
370
+
371
+ /* ──────────── Breakpoints ──────────── */
372
+ /* TW4 기본 브레이크포인트(sm:640px, md:768px 등)를 초기화하고 디자인 시스템 값으로 교체 */
373
+ @theme {
374
+ --breakpoint-*: initial;
375
+ --breakpoint-md: 1200px;
376
+ --breakpoint-lg: 1600px;
377
+ --breakpoint-xl: 1920px;
378
+ }
379
+
380
+ /* ──────────── Typography ──────────── */
381
+ /* font-size 전용 — line-height는 font-* 유틸리티에서 관리 */
382
+ @theme {
383
+ --text-header-1: 28px;
384
+ --text-header-2: 24px;
385
+ --text-title-1: 20px;
386
+ --text-title-2: 18px;
387
+ --text-body-1: 16px;
388
+ --text-body-2: 14px;
389
+ --text-body-3: 12px;
390
+ --text-caption: 11px;
391
+ --text-code-1: 16px;
392
+ --text-code-2: 14px;
393
+ --text-code-3: 12px;
394
+ }
395
+
396
+ @utility text-code-1 {
397
+ font-size: var(--text-code-1);
398
+ font-family: 'JetBrains Mono', monospace;
399
+ }
400
+ @utility text-code-2 {
401
+ font-size: var(--text-code-2);
402
+ font-family: 'JetBrains Mono', monospace;
403
+ }
404
+ @utility text-code-3 {
405
+ font-size: var(--text-code-3);
406
+ font-family: 'JetBrains Mono', monospace;
407
+ }
408
+
409
+ /* ──────────── Font Style ──────────── */
410
+ /* font-* 유틸리티: fontWeight + lineHeight 복합 지정 */
411
+ @utility font-regular {
412
+ font-weight: 400;
413
+ line-height: 140%;
414
+ }
415
+ @utility font-medium {
416
+ font-weight: 500;
417
+ line-height: 140%;
418
+ }
419
+ @utility font-semibold {
420
+ font-weight: 600;
421
+ line-height: 140%;
422
+ }
423
+ @utility font-bold {
424
+ font-weight: 700;
425
+ line-height: 140%;
426
+ }
427
+ @utility font-readable {
428
+ font-weight: 400;
429
+ line-height: 160%;
430
+ }
431
+
432
+ /* ──────────── Gradient Utilities ──────────── */
433
+ /* bg-gradient-exem-logo-{direction} */
434
+ @utility bg-gradient-exem-logo-to-right {
435
+ background-image: linear-gradient(to right, #FF470E 0%, #3E81F6 50%, #FFE100 100%);
436
+ }
437
+ @utility bg-gradient-exem-logo-to-left {
438
+ background-image: linear-gradient(to left, #FF470E 0%, #3E81F6 50%, #FFE100 100%);
439
+ }
440
+ @utility bg-gradient-exem-logo-to-top {
441
+ background-image: linear-gradient(to top, #FF470E 0%, #3E81F6 50%, #FFE100 100%);
442
+ }
443
+ @utility bg-gradient-exem-logo-to-bottom {
444
+ background-image: linear-gradient(to bottom, #FF470E 0%, #3E81F6 50%, #FFE100 100%);
445
+ }
446
+ @utility bg-gradient-exem-logo-to-top-right {
447
+ background-image: linear-gradient(to top right, #FF470E 0%, #3E81F6 50%, #FFE100 100%);
448
+ }
449
+ @utility bg-gradient-exem-logo-to-top-left {
450
+ background-image: linear-gradient(to top left, #FF470E 0%, #3E81F6 50%, #FFE100 100%);
451
+ }
452
+ @utility bg-gradient-exem-logo-to-bottom-right {
453
+ background-image: linear-gradient(to bottom right, #FF470E 0%, #3E81F6 50%, #FFE100 100%);
454
+ }
455
+ @utility bg-gradient-exem-logo-to-bottom-left {
456
+ background-image: linear-gradient(to bottom left, #FF470E 0%, #3E81F6 50%, #FFE100 100%);
457
+ }
458
+
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@exem-ui/tailwindcss4",
3
- "version": "0.3.2-next.20260728024650",
3
+ "version": "0.3.2-next.20260819010838",
4
4
  "description": "Exem Design System - Tailwind CSS 4 Theme (CSS-first)",
5
5
  "author": "Exem Design Team",
6
6
  "license": "Apache-2.0",
@@ -8,6 +8,9 @@
8
8
  "exports": {
9
9
  ".": {
10
10
  "default": "./dist/theme.css"
11
+ },
12
+ "./strict": {
13
+ "default": "./dist/theme.strict.css"
11
14
  }
12
15
  },
13
16
  "sideEffects": [