@seed-design/tailwind4-theme 0.0.21 → 0.0.41
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 +16 -0
- package/index.css +102 -8
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -81,11 +81,27 @@ yarn add @seed-design/tailwind4-theme
|
|
|
81
81
|
<button className="radius-r8">매우 둥근 버튼</button>
|
|
82
82
|
```
|
|
83
83
|
|
|
84
|
+
### 그라데이션 유틸리티
|
|
85
|
+
```jsx
|
|
86
|
+
// 방향성 그라데이션 배경
|
|
87
|
+
<div className="bg-shimmer-neutral-to-r">우측으로 그라데이션</div>
|
|
88
|
+
<div className="bg-shimmer-magic-to-b">아래로 그라데이션</div>
|
|
89
|
+
<div className="bg-shimmer-neutral-to-tr">우측 상단으로 그라데이션</div>
|
|
90
|
+
|
|
91
|
+
// 임의 각도 그라데이션 (새로 추가)
|
|
92
|
+
<div className="bg-gradient-shimmer-neutral-45deg">45도 각도 그라데이션</div>
|
|
93
|
+
<div className="bg-gradient-glow-magic-120deg">120도 각도 그라데이션</div>
|
|
94
|
+
<div className="bg-gradient-highlight-magic-270deg">270도 각도 그라데이션</div>
|
|
95
|
+
|
|
96
|
+
```
|
|
97
|
+
|
|
84
98
|
## 지원하는 토큰
|
|
85
99
|
|
|
86
100
|
이 패키지는 모든 SEED 디자인 토큰을 Tailwind CSS 4.0의 테마 변수로 제공합니다:
|
|
87
101
|
|
|
88
102
|
- 색상 (fg-*, bg-*, stroke-*, palette-*)
|
|
103
|
+
- 그라데이션 (bg-gradient-{gradient-stops-name}-to-t, bg-gradient-{gradient-stops-name}-to-r, bg-gradient-{gradient-stops-name}-to-b, bg-gradient-{gradient-stops-name}-to-l, bg-gradient-{gradient-stops-name}-to-tr, bg-gradient-{gradient-stops-name}-to-br, bg-gradient-{gradient-stops-name}-to-bl, bg-gradient-{gradient-stops-name}-to-tl)
|
|
104
|
+
- 그라데이션 임의 각도 (bg-gradient-{gradient-stops-name}-45deg, bg-gradient-{gradient-stops-name}-120deg, bg-gradient-{gradient-stops-name}-270deg 등)
|
|
89
105
|
- 크기 (dimension-x*)
|
|
90
106
|
- 여백 (p-x*, m-x*, gap-x*)
|
|
91
107
|
- 반경 (radius-r*)
|
package/index.css
CHANGED
|
@@ -66,11 +66,27 @@
|
|
|
66
66
|
--color-palette-red-1000: var(--seed-color-palette-red-1000);
|
|
67
67
|
--color-palette-static-black: var(--seed-color-palette-static-black);
|
|
68
68
|
--color-palette-static-white: var(--seed-color-palette-static-white);
|
|
69
|
-
--color-palette-static-black-alpha-
|
|
69
|
+
--color-palette-static-black-alpha-100: var(--seed-color-palette-static-black-alpha-100);
|
|
70
70
|
--color-palette-static-black-alpha-200: var(--seed-color-palette-static-black-alpha-200);
|
|
71
|
+
--color-palette-static-black-alpha-300: var(--seed-color-palette-static-black-alpha-300);
|
|
72
|
+
--color-palette-static-black-alpha-400: var(--seed-color-palette-static-black-alpha-400);
|
|
71
73
|
--color-palette-static-black-alpha-500: var(--seed-color-palette-static-black-alpha-500);
|
|
74
|
+
--color-palette-static-black-alpha-600: var(--seed-color-palette-static-black-alpha-600);
|
|
75
|
+
--color-palette-static-black-alpha-700: var(--seed-color-palette-static-black-alpha-700);
|
|
76
|
+
--color-palette-static-black-alpha-800: var(--seed-color-palette-static-black-alpha-800);
|
|
77
|
+
--color-palette-static-black-alpha-900: var(--seed-color-palette-static-black-alpha-900);
|
|
78
|
+
--color-palette-static-black-alpha-1000: var(--seed-color-palette-static-black-alpha-1000);
|
|
79
|
+
--color-palette-static-white-alpha-50: var(--seed-color-palette-static-white-alpha-50);
|
|
80
|
+
--color-palette-static-white-alpha-100: var(--seed-color-palette-static-white-alpha-100);
|
|
72
81
|
--color-palette-static-white-alpha-200: var(--seed-color-palette-static-white-alpha-200);
|
|
82
|
+
--color-palette-static-white-alpha-300: var(--seed-color-palette-static-white-alpha-300);
|
|
83
|
+
--color-palette-static-white-alpha-400: var(--seed-color-palette-static-white-alpha-400);
|
|
84
|
+
--color-palette-static-white-alpha-500: var(--seed-color-palette-static-white-alpha-500);
|
|
85
|
+
--color-palette-static-white-alpha-600: var(--seed-color-palette-static-white-alpha-600);
|
|
86
|
+
--color-palette-static-white-alpha-700: var(--seed-color-palette-static-white-alpha-700);
|
|
73
87
|
--color-palette-static-white-alpha-800: var(--seed-color-palette-static-white-alpha-800);
|
|
88
|
+
--color-palette-static-white-alpha-900: var(--seed-color-palette-static-white-alpha-900);
|
|
89
|
+
--color-palette-static-white-alpha-1000: var(--seed-color-palette-static-white-alpha-1000);
|
|
74
90
|
--color-palette-yellow-100: var(--seed-color-palette-yellow-100);
|
|
75
91
|
--color-palette-yellow-200: var(--seed-color-palette-yellow-200);
|
|
76
92
|
--color-palette-yellow-300: var(--seed-color-palette-yellow-300);
|
|
@@ -85,13 +101,11 @@
|
|
|
85
101
|
--color-fg-critical: var(--seed-color-fg-critical);
|
|
86
102
|
--color-fg-disabled: var(--seed-color-fg-disabled);
|
|
87
103
|
--color-fg-informative: var(--seed-color-fg-informative);
|
|
88
|
-
--color-fg-magic: var(--seed-color-fg-magic);
|
|
89
104
|
--color-fg-neutral: var(--seed-color-fg-neutral);
|
|
90
105
|
--color-fg-placeholder: var(--seed-color-fg-placeholder);
|
|
91
106
|
--color-fg-positive: var(--seed-color-fg-positive);
|
|
92
107
|
--color-fg-critical-contrast: var(--seed-color-fg-critical-contrast);
|
|
93
108
|
--color-fg-informative-contrast: var(--seed-color-fg-informative-contrast);
|
|
94
|
-
--color-fg-magic-contrast: var(--seed-color-fg-magic-contrast);
|
|
95
109
|
--color-fg-neutral-inverted: var(--seed-color-fg-neutral-inverted);
|
|
96
110
|
--color-fg-neutral-muted: var(--seed-color-fg-neutral-muted);
|
|
97
111
|
--color-fg-neutral-subtle: var(--seed-color-fg-neutral-subtle);
|
|
@@ -100,6 +114,7 @@
|
|
|
100
114
|
--color-bg-disabled: var(--seed-color-bg-disabled);
|
|
101
115
|
--color-bg-overlay: var(--seed-color-bg-overlay);
|
|
102
116
|
--color-bg-brand-solid: var(--seed-color-bg-brand-solid);
|
|
117
|
+
--color-bg-magic-weak: var(--seed-color-bg-magic-weak);
|
|
103
118
|
--color-bg-brand-solid-pressed: var(--seed-color-bg-brand-solid-pressed);
|
|
104
119
|
--color-bg-critical-solid: var(--seed-color-bg-critical-solid);
|
|
105
120
|
--color-bg-critical-weak: var(--seed-color-bg-critical-weak);
|
|
@@ -115,10 +130,6 @@
|
|
|
115
130
|
--color-bg-layer-floating: var(--seed-color-bg-layer-floating);
|
|
116
131
|
--color-bg-layer-default-pressed: var(--seed-color-bg-layer-default-pressed);
|
|
117
132
|
--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
133
|
--color-bg-neutral-inverted: var(--seed-color-bg-neutral-inverted);
|
|
123
134
|
--color-bg-neutral-solid: var(--seed-color-bg-neutral-solid);
|
|
124
135
|
--color-bg-neutral-weak: var(--seed-color-bg-neutral-weak);
|
|
@@ -203,7 +214,12 @@
|
|
|
203
214
|
--font-weight-regular: var(--seed-font-weight-regular);
|
|
204
215
|
--font-weight-medium: var(--seed-font-weight-medium);
|
|
205
216
|
--font-weight-bold: var(--seed-font-weight-bold);
|
|
206
|
-
--gradient-shimmer: var(--seed-gradient-shimmer);
|
|
217
|
+
--gradient-shimmer-neutral: var(--seed-gradient-shimmer-neutral);
|
|
218
|
+
--gradient-shimmer-magic: var(--seed-gradient-shimmer-magic);
|
|
219
|
+
--gradient-fade-neutral: var(--seed-gradient-fade-neutral);
|
|
220
|
+
--gradient-glow-magic: var(--seed-gradient-glow-magic);
|
|
221
|
+
--gradient-glow-magic-pressed: var(--seed-gradient-glow-magic-pressed);
|
|
222
|
+
--gradient-highlight-magic: var(--seed-gradient-highlight-magic);
|
|
207
223
|
--line-height-t1: var(--seed-line-height-t1);
|
|
208
224
|
--line-height-t2: var(--seed-line-height-t2);
|
|
209
225
|
--line-height-t3: var(--seed-line-height-t3);
|
|
@@ -231,6 +247,60 @@
|
|
|
231
247
|
--timing-function-exit: var(--seed-timing-function-exit);
|
|
232
248
|
--timing-function-enter-expressive: var(--seed-timing-function-enter-expressive);
|
|
233
249
|
--timing-function-exit-expressive: var(--seed-timing-function-exit-expressive);
|
|
250
|
+
--gradient-stops-shimmer-neutral: #FFFFFF00 0.00%, #FFFFFF66 46.00%, #FFFFFF66 54.00%, #FFFFFF00 100.00%;
|
|
251
|
+
--gradient-stops-shimmer-magic: #FEF0E700 0.00%, #FEF0E78A 46.00%, #FEF0E78A 54.00%, #FEF0E700 100.00%;
|
|
252
|
+
--gradient-stops-fade-neutral: #FFFFFF 0.00%, #FFFFFF00 100.00%;
|
|
253
|
+
--gradient-stops-glow-magic: #FEF6F7 0.00%, #FEF0E7 80.00%, #F9F7F5 100.00%;
|
|
254
|
+
--gradient-stops-glow-magic-pressed: #FBF0F2 0.00%, #FFE8DB 80.00%, #F5F2EF 100.00%;
|
|
255
|
+
--gradient-stops-highlight-magic: #FF6600 20.00%, #D25ACA 80.00%;
|
|
256
|
+
--gradient-shimmer-neutral-to-t: linear-gradient(to top, #FFFFFF00 0.00%, #FFFFFF66 46.00%, #FFFFFF66 54.00%, #FFFFFF00 100.00%);
|
|
257
|
+
--gradient-shimmer-neutral-to-tr: linear-gradient(to top right, #FFFFFF00 0.00%, #FFFFFF66 46.00%, #FFFFFF66 54.00%, #FFFFFF00 100.00%);
|
|
258
|
+
--gradient-shimmer-neutral-to-r: linear-gradient(to right, #FFFFFF00 0.00%, #FFFFFF66 46.00%, #FFFFFF66 54.00%, #FFFFFF00 100.00%);
|
|
259
|
+
--gradient-shimmer-neutral-to-br: linear-gradient(to bottom right, #FFFFFF00 0.00%, #FFFFFF66 46.00%, #FFFFFF66 54.00%, #FFFFFF00 100.00%);
|
|
260
|
+
--gradient-shimmer-neutral-to-b: linear-gradient(to bottom, #FFFFFF00 0.00%, #FFFFFF66 46.00%, #FFFFFF66 54.00%, #FFFFFF00 100.00%);
|
|
261
|
+
--gradient-shimmer-neutral-to-bl: linear-gradient(to bottom left, #FFFFFF00 0.00%, #FFFFFF66 46.00%, #FFFFFF66 54.00%, #FFFFFF00 100.00%);
|
|
262
|
+
--gradient-shimmer-neutral-to-l: linear-gradient(to left, #FFFFFF00 0.00%, #FFFFFF66 46.00%, #FFFFFF66 54.00%, #FFFFFF00 100.00%);
|
|
263
|
+
--gradient-shimmer-neutral-to-tl: linear-gradient(to top left, #FFFFFF00 0.00%, #FFFFFF66 46.00%, #FFFFFF66 54.00%, #FFFFFF00 100.00%);
|
|
264
|
+
--gradient-shimmer-magic-to-t: linear-gradient(to top, #FEF0E700 0.00%, #FEF0E78A 46.00%, #FEF0E78A 54.00%, #FEF0E700 100.00%);
|
|
265
|
+
--gradient-shimmer-magic-to-tr: linear-gradient(to top right, #FEF0E700 0.00%, #FEF0E78A 46.00%, #FEF0E78A 54.00%, #FEF0E700 100.00%);
|
|
266
|
+
--gradient-shimmer-magic-to-r: linear-gradient(to right, #FEF0E700 0.00%, #FEF0E78A 46.00%, #FEF0E78A 54.00%, #FEF0E700 100.00%);
|
|
267
|
+
--gradient-shimmer-magic-to-br: linear-gradient(to bottom right, #FEF0E700 0.00%, #FEF0E78A 46.00%, #FEF0E78A 54.00%, #FEF0E700 100.00%);
|
|
268
|
+
--gradient-shimmer-magic-to-b: linear-gradient(to bottom, #FEF0E700 0.00%, #FEF0E78A 46.00%, #FEF0E78A 54.00%, #FEF0E700 100.00%);
|
|
269
|
+
--gradient-shimmer-magic-to-bl: linear-gradient(to bottom left, #FEF0E700 0.00%, #FEF0E78A 46.00%, #FEF0E78A 54.00%, #FEF0E700 100.00%);
|
|
270
|
+
--gradient-shimmer-magic-to-l: linear-gradient(to left, #FEF0E700 0.00%, #FEF0E78A 46.00%, #FEF0E78A 54.00%, #FEF0E700 100.00%);
|
|
271
|
+
--gradient-shimmer-magic-to-tl: linear-gradient(to top left, #FEF0E700 0.00%, #FEF0E78A 46.00%, #FEF0E78A 54.00%, #FEF0E700 100.00%);
|
|
272
|
+
--gradient-fade-neutral-to-t: linear-gradient(to top, #FFFFFF 0.00%, #FFFFFF00 100.00%);
|
|
273
|
+
--gradient-fade-neutral-to-tr: linear-gradient(to top right, #FFFFFF 0.00%, #FFFFFF00 100.00%);
|
|
274
|
+
--gradient-fade-neutral-to-r: linear-gradient(to right, #FFFFFF 0.00%, #FFFFFF00 100.00%);
|
|
275
|
+
--gradient-fade-neutral-to-br: linear-gradient(to bottom right, #FFFFFF 0.00%, #FFFFFF00 100.00%);
|
|
276
|
+
--gradient-fade-neutral-to-b: linear-gradient(to bottom, #FFFFFF 0.00%, #FFFFFF00 100.00%);
|
|
277
|
+
--gradient-fade-neutral-to-bl: linear-gradient(to bottom left, #FFFFFF 0.00%, #FFFFFF00 100.00%);
|
|
278
|
+
--gradient-fade-neutral-to-l: linear-gradient(to left, #FFFFFF 0.00%, #FFFFFF00 100.00%);
|
|
279
|
+
--gradient-fade-neutral-to-tl: linear-gradient(to top left, #FFFFFF 0.00%, #FFFFFF00 100.00%);
|
|
280
|
+
--gradient-glow-magic-to-t: linear-gradient(to top, #FEF6F7 0.00%, #FEF0E7 80.00%, #F9F7F5 100.00%);
|
|
281
|
+
--gradient-glow-magic-to-tr: linear-gradient(to top right, #FEF6F7 0.00%, #FEF0E7 80.00%, #F9F7F5 100.00%);
|
|
282
|
+
--gradient-glow-magic-to-r: linear-gradient(to right, #FEF6F7 0.00%, #FEF0E7 80.00%, #F9F7F5 100.00%);
|
|
283
|
+
--gradient-glow-magic-to-br: linear-gradient(to bottom right, #FEF6F7 0.00%, #FEF0E7 80.00%, #F9F7F5 100.00%);
|
|
284
|
+
--gradient-glow-magic-to-b: linear-gradient(to bottom, #FEF6F7 0.00%, #FEF0E7 80.00%, #F9F7F5 100.00%);
|
|
285
|
+
--gradient-glow-magic-to-bl: linear-gradient(to bottom left, #FEF6F7 0.00%, #FEF0E7 80.00%, #F9F7F5 100.00%);
|
|
286
|
+
--gradient-glow-magic-to-l: linear-gradient(to left, #FEF6F7 0.00%, #FEF0E7 80.00%, #F9F7F5 100.00%);
|
|
287
|
+
--gradient-glow-magic-to-tl: linear-gradient(to top left, #FEF6F7 0.00%, #FEF0E7 80.00%, #F9F7F5 100.00%);
|
|
288
|
+
--gradient-glow-magic-pressed-to-t: linear-gradient(to top, #FBF0F2 0.00%, #FFE8DB 80.00%, #F5F2EF 100.00%);
|
|
289
|
+
--gradient-glow-magic-pressed-to-tr: linear-gradient(to top right, #FBF0F2 0.00%, #FFE8DB 80.00%, #F5F2EF 100.00%);
|
|
290
|
+
--gradient-glow-magic-pressed-to-r: linear-gradient(to right, #FBF0F2 0.00%, #FFE8DB 80.00%, #F5F2EF 100.00%);
|
|
291
|
+
--gradient-glow-magic-pressed-to-br: linear-gradient(to bottom right, #FBF0F2 0.00%, #FFE8DB 80.00%, #F5F2EF 100.00%);
|
|
292
|
+
--gradient-glow-magic-pressed-to-b: linear-gradient(to bottom, #FBF0F2 0.00%, #FFE8DB 80.00%, #F5F2EF 100.00%);
|
|
293
|
+
--gradient-glow-magic-pressed-to-bl: linear-gradient(to bottom left, #FBF0F2 0.00%, #FFE8DB 80.00%, #F5F2EF 100.00%);
|
|
294
|
+
--gradient-glow-magic-pressed-to-l: linear-gradient(to left, #FBF0F2 0.00%, #FFE8DB 80.00%, #F5F2EF 100.00%);
|
|
295
|
+
--gradient-glow-magic-pressed-to-tl: linear-gradient(to top left, #FBF0F2 0.00%, #FFE8DB 80.00%, #F5F2EF 100.00%);
|
|
296
|
+
--gradient-highlight-magic-to-t: linear-gradient(to top, #FF6600 20.00%, #D25ACA 80.00%);
|
|
297
|
+
--gradient-highlight-magic-to-tr: linear-gradient(to top right, #FF6600 20.00%, #D25ACA 80.00%);
|
|
298
|
+
--gradient-highlight-magic-to-r: linear-gradient(to right, #FF6600 20.00%, #D25ACA 80.00%);
|
|
299
|
+
--gradient-highlight-magic-to-br: linear-gradient(to bottom right, #FF6600 20.00%, #D25ACA 80.00%);
|
|
300
|
+
--gradient-highlight-magic-to-b: linear-gradient(to bottom, #FF6600 20.00%, #D25ACA 80.00%);
|
|
301
|
+
--gradient-highlight-magic-to-bl: linear-gradient(to bottom left, #FF6600 20.00%, #D25ACA 80.00%);
|
|
302
|
+
--gradient-highlight-magic-to-l: linear-gradient(to left, #FF6600 20.00%, #D25ACA 80.00%);
|
|
303
|
+
--gradient-highlight-magic-to-tl: linear-gradient(to top left, #FF6600 20.00%, #D25ACA 80.00%);
|
|
234
304
|
}
|
|
235
305
|
|
|
236
306
|
@utility screen-title {
|
|
@@ -496,4 +566,28 @@
|
|
|
496
566
|
|
|
497
567
|
@utility easing-* {
|
|
498
568
|
transitionTimingFunction: var(--timing-function- --value(--timing-function-*, *));
|
|
569
|
+
}
|
|
570
|
+
|
|
571
|
+
@utility bg-gradient-shimmer-neutral-* {
|
|
572
|
+
background-image: linear-gradient(--value(*, angle), var(--gradient-stops-shimmer-neutral));
|
|
573
|
+
}
|
|
574
|
+
|
|
575
|
+
@utility bg-gradient-shimmer-magic-* {
|
|
576
|
+
background-image: linear-gradient(--value(*, angle), var(--gradient-stops-shimmer-magic));
|
|
577
|
+
}
|
|
578
|
+
|
|
579
|
+
@utility bg-gradient-fade-neutral-* {
|
|
580
|
+
background-image: linear-gradient(--value(*, angle), var(--gradient-stops-fade-neutral));
|
|
581
|
+
}
|
|
582
|
+
|
|
583
|
+
@utility bg-gradient-glow-magic-* {
|
|
584
|
+
background-image: linear-gradient(--value(*, angle), var(--gradient-stops-glow-magic));
|
|
585
|
+
}
|
|
586
|
+
|
|
587
|
+
@utility bg-gradient-glow-magic-pressed-* {
|
|
588
|
+
background-image: linear-gradient(--value(*, angle), var(--gradient-stops-glow-magic-pressed));
|
|
589
|
+
}
|
|
590
|
+
|
|
591
|
+
@utility bg-gradient-highlight-magic-* {
|
|
592
|
+
background-image: linear-gradient(--value(*, angle), var(--gradient-stops-highlight-magic));
|
|
499
593
|
}
|