@seed-design/tailwind4-theme 2.4.1 → 2.5.0
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 +20 -12
- package/index.css +109 -70
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -16,7 +16,6 @@ bun add @seed-design/tailwind4-theme @seed-design/lynx-css tailwindcss@4
|
|
|
16
16
|
|
|
17
17
|
웹 CSS peer 범위는 `^2.7.0`입니다. 이 버전부터 theme이 참조하는 `--seed-gradient-fade-mask` 토큰을 제공합니다.
|
|
18
18
|
|
|
19
|
-
Lynx peer 범위는 토큰 제공을 확인한 `@seed-design/lynx-css@^0.11.0`입니다. 더 낮은 버전의 호환성을 의미하지는 않습니다.
|
|
20
19
|
Lynx의 전체 설정과 제한사항은 [Lynx Tailwind 가이드](https://seed-design.io/lynx/getting-started/styling/tailwind-css-4)를 참고하세요. 아래 예제는 웹 기준입니다.
|
|
21
20
|
|
|
22
21
|
## 사용 방법
|
|
@@ -53,7 +52,7 @@ Lynx의 전체 설정과 제한사항은 [Lynx Tailwind 가이드](https://seed-
|
|
|
53
52
|
<div className="bg-palette-gray-100">회색 배경</div>
|
|
54
53
|
|
|
55
54
|
// 테두리 색상
|
|
56
|
-
<div className="border border-stroke-brand">브랜드 테두리</div>
|
|
55
|
+
<div className="border border-stroke-brand-solid">브랜드 테두리</div>
|
|
57
56
|
<div className="border border-palette-red-500">팔레트 테두리</div>
|
|
58
57
|
```
|
|
59
58
|
|
|
@@ -85,30 +84,39 @@ Lynx의 전체 설정과 제한사항은 [Lynx Tailwind 가이드](https://seed-
|
|
|
85
84
|
```jsx
|
|
86
85
|
<div className="radius-r2">표준 둥근 모서리</div>
|
|
87
86
|
<div className="radius-r4">큰 둥근 모서리</div>
|
|
88
|
-
<button className="radius-
|
|
87
|
+
<button className="radius-full">매우 둥근 버튼</button>
|
|
89
88
|
```
|
|
90
89
|
|
|
91
90
|
### 그라데이션 유틸리티
|
|
91
|
+
|
|
92
|
+
파운데이션의 `fade-mask`, `glow-magic`, `glow-magic-pressed`, `highlight-magic`, `highlight-magic-pressed`, `shimmer-magic`, `shimmer-neutral`을 지원합니다.
|
|
93
|
+
|
|
92
94
|
```jsx
|
|
93
|
-
//
|
|
95
|
+
// 8방향: t, tr, r, br, b, bl, l, tl. 두 이름 모두 지원합니다.
|
|
94
96
|
<div className="bg-shimmer-neutral-to-r">우측으로 그라데이션</div>
|
|
95
|
-
<div className="bg-shimmer-
|
|
96
|
-
<div className="bg-
|
|
97
|
+
<div className="bg-gradient-shimmer-neutral-to-r">같은 우측 그라데이션</div>
|
|
98
|
+
<div className="bg-gradient-fade-mask-to-b">아래로 fade 배경</div>
|
|
97
99
|
|
|
98
|
-
//
|
|
99
|
-
<div className="bg-gradient-
|
|
100
|
-
<div className="bg-gradient-glow-magic-120deg">120도 각도 그라데이션</div>
|
|
101
|
-
<div className="bg-gradient-highlight-magic-270deg">270도 각도 그라데이션</div>
|
|
100
|
+
// 각도는 대괄호 문법을 사용합니다.
|
|
101
|
+
<div className="bg-gradient-glow-magic-[120deg]">120도 그라데이션</div>
|
|
102
102
|
|
|
103
|
+
// 소수, 음수, 다른 angle 단위도 사용할 수 있습니다.
|
|
104
|
+
<div className="bg-gradient-shimmer-neutral-[45.5deg]">45.5도</div>
|
|
105
|
+
<div className="bg-gradient-highlight-magic-[-45deg]">-45도</div>
|
|
106
|
+
<div className="bg-gradient-glow-magic-[0.25turn]">0.25회전</div>
|
|
103
107
|
```
|
|
104
108
|
|
|
109
|
+
`bg-gradient-{token}-45deg`처럼 대괄호 없는 각도 표기는 지원하지 않습니다. `bg-gradient-{token}-[45deg]`를 사용하세요.
|
|
110
|
+
|
|
111
|
+
그라데이션은 토큰 CSS의 `--seed-gradient-*`를 참조하므로 light/dark 모드에 맞는 색상 stop을 사용합니다. `fade-mask`는 두 모드에서 같은 16개 alpha stop을 사용합니다. 위 클래스는 모두 `background-image`이며, `fade-mask` 클래스가 요소에 마스크를 적용하는 것은 아닙니다.
|
|
112
|
+
|
|
105
113
|
## 지원하는 토큰
|
|
106
114
|
|
|
107
115
|
이 패키지는 모든 SEED 디자인 토큰을 Tailwind CSS 4.0의 테마 변수로 제공합니다:
|
|
108
116
|
|
|
109
117
|
- 색상 (fg-*, bg-*, stroke-*, palette-*)
|
|
110
|
-
- 그라데이션 (bg-
|
|
111
|
-
- 그라데이션 임의 각도 (bg-gradient-{
|
|
118
|
+
- 그라데이션 방향 (`bg-{token}-to-{direction}`, `bg-gradient-{token}-to-{direction}`)
|
|
119
|
+
- 그라데이션 임의 각도 (`bg-gradient-{token}-[<angle>]`)
|
|
112
120
|
- 크기 (dimension-x*)
|
|
113
121
|
- 여백 (p-x*, m-x*, gap-x*)
|
|
114
122
|
- 반경 (radius-r*)
|
package/index.css
CHANGED
|
@@ -321,69 +321,80 @@
|
|
|
321
321
|
--timing-function-enter-expressive: var(--seed-timing-function-enter-expressive);
|
|
322
322
|
--timing-function-exit-expressive: var(--seed-timing-function-exit-expressive);
|
|
323
323
|
--timing-function-pressed-scale: var(--seed-timing-function-pressed-scale);
|
|
324
|
-
--gradient-stops-fade-mask: #00000000 0.00%, #00000003 8.00%, #00000005 16.00%, #0000000d 22.00%, #00000014 29.00%, #00000021 35.00%, #0000002e 41.00%, #00000040 47.00%, #00000052 53.00%, #00000066 59.00%, #0000007a 65.00%, #00000094 71.00%, #000000ab 78.00%, #000000c7 84.00%, #000000e3 92.00%, #000000ff 100.00
|
|
325
|
-
--gradient-stops-glow-magic: #fef6f7 0.00%, #fef0e7 80.00%, #f9f7f5 100.00
|
|
326
|
-
--gradient-stops-glow-magic-pressed: #fbf0f2 0.00%, #ffe8db 80.00%, #f5f2ef 100.00
|
|
327
|
-
--gradient-stops-highlight-magic: #ff6600 20.00%, #d25aca 100.00
|
|
328
|
-
--gradient-stops-highlight-magic-pressed: #e14f00 20.00%, #ae58bf 100.00
|
|
329
|
-
--gradient-stops-shimmer-magic: #fff9f500 0.00%, #fff9f5cc 46.00%, #fff9f5cc 54.00%, #fff9f500 100.00
|
|
330
|
-
--gradient-stops-shimmer-neutral: #ffffff00 0.00%, #ffffffab 46.00%, #ffffffab 54.00%, #ffffff00 100.00
|
|
331
|
-
--gradient-fade-mask-to-t: linear-gradient(to top, #00000000 0.00%, #00000003 8.00%, #00000005 16.00%, #0000000d 22.00%, #00000014 29.00%, #00000021 35.00%, #0000002e 41.00%, #00000040 47.00%, #00000052 53.00%, #00000066 59.00%, #0000007a 65.00%, #00000094 71.00%, #000000ab 78.00%, #000000c7 84.00%, #000000e3 92.00%, #000000ff 100.00%);
|
|
332
|
-
--gradient-fade-mask-to-tr: linear-gradient(to top right, #00000000 0.00%, #00000003 8.00%, #00000005 16.00%, #0000000d 22.00%, #00000014 29.00%, #00000021 35.00%, #0000002e 41.00%, #00000040 47.00%, #00000052 53.00%, #00000066 59.00%, #0000007a 65.00%, #00000094 71.00%, #000000ab 78.00%, #000000c7 84.00%, #000000e3 92.00%, #000000ff 100.00%);
|
|
333
|
-
--gradient-fade-mask-to-r: linear-gradient(to right, #00000000 0.00%, #00000003 8.00%, #00000005 16.00%, #0000000d 22.00%, #00000014 29.00%, #00000021 35.00%, #0000002e 41.00%, #00000040 47.00%, #00000052 53.00%, #00000066 59.00%, #0000007a 65.00%, #00000094 71.00%, #000000ab 78.00%, #000000c7 84.00%, #000000e3 92.00%, #000000ff 100.00%);
|
|
334
|
-
--gradient-fade-mask-to-br: linear-gradient(to bottom right, #00000000 0.00%, #00000003 8.00%, #00000005 16.00%, #0000000d 22.00%, #00000014 29.00%, #00000021 35.00%, #0000002e 41.00%, #00000040 47.00%, #00000052 53.00%, #00000066 59.00%, #0000007a 65.00%, #00000094 71.00%, #000000ab 78.00%, #000000c7 84.00%, #000000e3 92.00%, #000000ff 100.00%);
|
|
335
|
-
--gradient-fade-mask-to-b: linear-gradient(to bottom, #00000000 0.00%, #00000003 8.00%, #00000005 16.00%, #0000000d 22.00%, #00000014 29.00%, #00000021 35.00%, #0000002e 41.00%, #00000040 47.00%, #00000052 53.00%, #00000066 59.00%, #0000007a 65.00%, #00000094 71.00%, #000000ab 78.00%, #000000c7 84.00%, #000000e3 92.00%, #000000ff 100.00%);
|
|
336
|
-
--gradient-fade-mask-to-bl: linear-gradient(to bottom left, #00000000 0.00%, #00000003 8.00%, #00000005 16.00%, #0000000d 22.00%, #00000014 29.00%, #00000021 35.00%, #0000002e 41.00%, #00000040 47.00%, #00000052 53.00%, #00000066 59.00%, #0000007a 65.00%, #00000094 71.00%, #000000ab 78.00%, #000000c7 84.00%, #000000e3 92.00%, #000000ff 100.00%);
|
|
337
|
-
--gradient-fade-mask-to-l: linear-gradient(to left, #00000000 0.00%, #00000003 8.00%, #00000005 16.00%, #0000000d 22.00%, #00000014 29.00%, #00000021 35.00%, #0000002e 41.00%, #00000040 47.00%, #00000052 53.00%, #00000066 59.00%, #0000007a 65.00%, #00000094 71.00%, #000000ab 78.00%, #000000c7 84.00%, #000000e3 92.00%, #000000ff 100.00%);
|
|
338
|
-
--gradient-fade-mask-to-tl: linear-gradient(to top left, #00000000 0.00%, #00000003 8.00%, #00000005 16.00%, #0000000d 22.00%, #00000014 29.00%, #00000021 35.00%, #0000002e 41.00%, #00000040 47.00%, #00000052 53.00%, #00000066 59.00%, #0000007a 65.00%, #00000094 71.00%, #000000ab 78.00%, #000000c7 84.00%, #000000e3 92.00%, #000000ff 100.00%);
|
|
339
|
-
--gradient-glow-magic-to-t: linear-gradient(to top, #fef6f7 0.00%, #fef0e7 80.00%, #f9f7f5 100.00%);
|
|
340
|
-
--gradient-glow-magic-to-tr: linear-gradient(to top right, #fef6f7 0.00%, #fef0e7 80.00%, #f9f7f5 100.00%);
|
|
341
|
-
--gradient-glow-magic-to-r: linear-gradient(to right, #fef6f7 0.00%, #fef0e7 80.00%, #f9f7f5 100.00%);
|
|
342
|
-
--gradient-glow-magic-to-br: linear-gradient(to bottom right, #fef6f7 0.00%, #fef0e7 80.00%, #f9f7f5 100.00%);
|
|
343
|
-
--gradient-glow-magic-to-b: linear-gradient(to bottom, #fef6f7 0.00%, #fef0e7 80.00%, #f9f7f5 100.00%);
|
|
344
|
-
--gradient-glow-magic-to-bl: linear-gradient(to bottom left, #fef6f7 0.00%, #fef0e7 80.00%, #f9f7f5 100.00%);
|
|
345
|
-
--gradient-glow-magic-to-l: linear-gradient(to left, #fef6f7 0.00%, #fef0e7 80.00%, #f9f7f5 100.00%);
|
|
346
|
-
--gradient-glow-magic-to-tl: linear-gradient(to top left, #fef6f7 0.00%, #fef0e7 80.00%, #f9f7f5 100.00%);
|
|
347
|
-
--gradient-glow-magic-pressed-to-t: linear-gradient(to top, #fbf0f2 0.00%, #ffe8db 80.00%, #f5f2ef 100.00%);
|
|
348
|
-
--gradient-glow-magic-pressed-to-tr: linear-gradient(to top right, #fbf0f2 0.00%, #ffe8db 80.00%, #f5f2ef 100.00%);
|
|
349
|
-
--gradient-glow-magic-pressed-to-r: linear-gradient(to right, #fbf0f2 0.00%, #ffe8db 80.00%, #f5f2ef 100.00%);
|
|
350
|
-
--gradient-glow-magic-pressed-to-br: linear-gradient(to bottom right, #fbf0f2 0.00%, #ffe8db 80.00%, #f5f2ef 100.00%);
|
|
351
|
-
--gradient-glow-magic-pressed-to-b: linear-gradient(to bottom, #fbf0f2 0.00%, #ffe8db 80.00%, #f5f2ef 100.00%);
|
|
352
|
-
--gradient-glow-magic-pressed-to-bl: linear-gradient(to bottom left, #fbf0f2 0.00%, #ffe8db 80.00%, #f5f2ef 100.00%);
|
|
353
|
-
--gradient-glow-magic-pressed-to-l: linear-gradient(to left, #fbf0f2 0.00%, #ffe8db 80.00%, #f5f2ef 100.00%);
|
|
354
|
-
--gradient-glow-magic-pressed-to-tl: linear-gradient(to top left, #fbf0f2 0.00%, #ffe8db 80.00%, #f5f2ef 100.00%);
|
|
355
|
-
--gradient-highlight-magic-to-t: linear-gradient(to top, #ff6600 20.00%, #d25aca 100.00%);
|
|
356
|
-
--gradient-highlight-magic-to-tr: linear-gradient(to top right, #ff6600 20.00%, #d25aca 100.00%);
|
|
357
|
-
--gradient-highlight-magic-to-r: linear-gradient(to right, #ff6600 20.00%, #d25aca 100.00%);
|
|
358
|
-
--gradient-highlight-magic-to-br: linear-gradient(to bottom right, #ff6600 20.00%, #d25aca 100.00%);
|
|
359
|
-
--gradient-highlight-magic-to-b: linear-gradient(to bottom, #ff6600 20.00%, #d25aca 100.00%);
|
|
360
|
-
--gradient-highlight-magic-to-bl: linear-gradient(to bottom left, #ff6600 20.00%, #d25aca 100.00%);
|
|
361
|
-
--gradient-highlight-magic-to-l: linear-gradient(to left, #ff6600 20.00%, #d25aca 100.00%);
|
|
362
|
-
--gradient-highlight-magic-to-tl: linear-gradient(to top left, #ff6600 20.00%, #d25aca 100.00%);
|
|
363
|
-
--gradient-highlight-magic-pressed-to-t: linear-gradient(to top, #e14f00 20.00%, #ae58bf 100.00%);
|
|
364
|
-
--gradient-highlight-magic-pressed-to-tr: linear-gradient(to top right, #e14f00 20.00%, #ae58bf 100.00%);
|
|
365
|
-
--gradient-highlight-magic-pressed-to-r: linear-gradient(to right, #e14f00 20.00%, #ae58bf 100.00%);
|
|
366
|
-
--gradient-highlight-magic-pressed-to-br: linear-gradient(to bottom right, #e14f00 20.00%, #ae58bf 100.00%);
|
|
367
|
-
--gradient-highlight-magic-pressed-to-b: linear-gradient(to bottom, #e14f00 20.00%, #ae58bf 100.00%);
|
|
368
|
-
--gradient-highlight-magic-pressed-to-bl: linear-gradient(to bottom left, #e14f00 20.00%, #ae58bf 100.00%);
|
|
369
|
-
--gradient-highlight-magic-pressed-to-l: linear-gradient(to left, #e14f00 20.00%, #ae58bf 100.00%);
|
|
370
|
-
--gradient-highlight-magic-pressed-to-tl: linear-gradient(to top left, #e14f00 20.00%, #ae58bf 100.00%);
|
|
371
|
-
--gradient-shimmer-magic-to-t: linear-gradient(to top, #fff9f500 0.00%, #fff9f5cc 46.00%, #fff9f5cc 54.00%, #fff9f500 100.00%);
|
|
372
|
-
--gradient-shimmer-magic-to-tr: linear-gradient(to top right, #fff9f500 0.00%, #fff9f5cc 46.00%, #fff9f5cc 54.00%, #fff9f500 100.00%);
|
|
373
|
-
--gradient-shimmer-magic-to-r: linear-gradient(to right, #fff9f500 0.00%, #fff9f5cc 46.00%, #fff9f5cc 54.00%, #fff9f500 100.00%);
|
|
374
|
-
--gradient-shimmer-magic-to-br: linear-gradient(to bottom right, #fff9f500 0.00%, #fff9f5cc 46.00%, #fff9f5cc 54.00%, #fff9f500 100.00%);
|
|
375
|
-
--gradient-shimmer-magic-to-b: linear-gradient(to bottom, #fff9f500 0.00%, #fff9f5cc 46.00%, #fff9f5cc 54.00%, #fff9f500 100.00%);
|
|
376
|
-
--gradient-shimmer-magic-to-bl: linear-gradient(to bottom left, #fff9f500 0.00%, #fff9f5cc 46.00%, #fff9f5cc 54.00%, #fff9f500 100.00%);
|
|
377
|
-
--gradient-shimmer-magic-to-l: linear-gradient(to left, #fff9f500 0.00%, #fff9f5cc 46.00%, #fff9f5cc 54.00%, #fff9f500 100.00%);
|
|
378
|
-
--gradient-shimmer-magic-to-tl: linear-gradient(to top left, #fff9f500 0.00%, #fff9f5cc 46.00%, #fff9f5cc 54.00%, #fff9f500 100.00%);
|
|
379
|
-
--gradient-shimmer-neutral-to-t: linear-gradient(to top, #ffffff00 0.00%, #ffffffab 46.00%, #ffffffab 54.00%, #ffffff00 100.00%);
|
|
380
|
-
--gradient-shimmer-neutral-to-tr: linear-gradient(to top right, #ffffff00 0.00%, #ffffffab 46.00%, #ffffffab 54.00%, #ffffff00 100.00%);
|
|
381
|
-
--gradient-shimmer-neutral-to-r: linear-gradient(to right, #ffffff00 0.00%, #ffffffab 46.00%, #ffffffab 54.00%, #ffffff00 100.00%);
|
|
382
|
-
--gradient-shimmer-neutral-to-br: linear-gradient(to bottom right, #ffffff00 0.00%, #ffffffab 46.00%, #ffffffab 54.00%, #ffffff00 100.00%);
|
|
383
|
-
--gradient-shimmer-neutral-to-b: linear-gradient(to bottom, #ffffff00 0.00%, #ffffffab 46.00%, #ffffffab 54.00%, #ffffff00 100.00%);
|
|
384
|
-
--gradient-shimmer-neutral-to-bl: linear-gradient(to bottom left, #ffffff00 0.00%, #ffffffab 46.00%, #ffffffab 54.00%, #ffffff00 100.00%);
|
|
385
|
-
--gradient-shimmer-neutral-to-l: linear-gradient(to left, #ffffff00 0.00%, #ffffffab 46.00%, #ffffffab 54.00%, #ffffff00 100.00%);
|
|
386
|
-
--gradient-shimmer-neutral-to-tl: linear-gradient(to top left, #ffffff00 0.00%, #ffffffab 46.00%, #ffffffab 54.00%, #ffffff00 100.00%);
|
|
324
|
+
--gradient-stops-fade-mask: var(--seed-gradient-fade-mask, #00000000 0.00%, #00000003 8.00%, #00000005 16.00%, #0000000d 22.00%, #00000014 29.00%, #00000021 35.00%, #0000002e 41.00%, #00000040 47.00%, #00000052 53.00%, #00000066 59.00%, #0000007a 65.00%, #00000094 71.00%, #000000ab 78.00%, #000000c7 84.00%, #000000e3 92.00%, #000000ff 100.00%);
|
|
325
|
+
--gradient-stops-glow-magic: var(--seed-gradient-glow-magic, #fef6f7 0.00%, #fef0e7 80.00%, #f9f7f5 100.00%);
|
|
326
|
+
--gradient-stops-glow-magic-pressed: var(--seed-gradient-glow-magic-pressed, #fbf0f2 0.00%, #ffe8db 80.00%, #f5f2ef 100.00%);
|
|
327
|
+
--gradient-stops-highlight-magic: var(--seed-gradient-highlight-magic, #ff6600 20.00%, #d25aca 100.00%);
|
|
328
|
+
--gradient-stops-highlight-magic-pressed: var(--seed-gradient-highlight-magic-pressed, #e14f00 20.00%, #ae58bf 100.00%);
|
|
329
|
+
--gradient-stops-shimmer-magic: var(--seed-gradient-shimmer-magic, #fff9f500 0.00%, #fff9f5cc 46.00%, #fff9f5cc 54.00%, #fff9f500 100.00%);
|
|
330
|
+
--gradient-stops-shimmer-neutral: var(--seed-gradient-shimmer-neutral, #ffffff00 0.00%, #ffffffab 46.00%, #ffffffab 54.00%, #ffffff00 100.00%);
|
|
331
|
+
--gradient-fade-mask-to-t: linear-gradient(to top, var(--seed-gradient-fade-mask, #00000000 0.00%, #00000003 8.00%, #00000005 16.00%, #0000000d 22.00%, #00000014 29.00%, #00000021 35.00%, #0000002e 41.00%, #00000040 47.00%, #00000052 53.00%, #00000066 59.00%, #0000007a 65.00%, #00000094 71.00%, #000000ab 78.00%, #000000c7 84.00%, #000000e3 92.00%, #000000ff 100.00%));
|
|
332
|
+
--gradient-fade-mask-to-tr: linear-gradient(to top right, var(--seed-gradient-fade-mask, #00000000 0.00%, #00000003 8.00%, #00000005 16.00%, #0000000d 22.00%, #00000014 29.00%, #00000021 35.00%, #0000002e 41.00%, #00000040 47.00%, #00000052 53.00%, #00000066 59.00%, #0000007a 65.00%, #00000094 71.00%, #000000ab 78.00%, #000000c7 84.00%, #000000e3 92.00%, #000000ff 100.00%));
|
|
333
|
+
--gradient-fade-mask-to-r: linear-gradient(to right, var(--seed-gradient-fade-mask, #00000000 0.00%, #00000003 8.00%, #00000005 16.00%, #0000000d 22.00%, #00000014 29.00%, #00000021 35.00%, #0000002e 41.00%, #00000040 47.00%, #00000052 53.00%, #00000066 59.00%, #0000007a 65.00%, #00000094 71.00%, #000000ab 78.00%, #000000c7 84.00%, #000000e3 92.00%, #000000ff 100.00%));
|
|
334
|
+
--gradient-fade-mask-to-br: linear-gradient(to bottom right, var(--seed-gradient-fade-mask, #00000000 0.00%, #00000003 8.00%, #00000005 16.00%, #0000000d 22.00%, #00000014 29.00%, #00000021 35.00%, #0000002e 41.00%, #00000040 47.00%, #00000052 53.00%, #00000066 59.00%, #0000007a 65.00%, #00000094 71.00%, #000000ab 78.00%, #000000c7 84.00%, #000000e3 92.00%, #000000ff 100.00%));
|
|
335
|
+
--gradient-fade-mask-to-b: linear-gradient(to bottom, var(--seed-gradient-fade-mask, #00000000 0.00%, #00000003 8.00%, #00000005 16.00%, #0000000d 22.00%, #00000014 29.00%, #00000021 35.00%, #0000002e 41.00%, #00000040 47.00%, #00000052 53.00%, #00000066 59.00%, #0000007a 65.00%, #00000094 71.00%, #000000ab 78.00%, #000000c7 84.00%, #000000e3 92.00%, #000000ff 100.00%));
|
|
336
|
+
--gradient-fade-mask-to-bl: linear-gradient(to bottom left, var(--seed-gradient-fade-mask, #00000000 0.00%, #00000003 8.00%, #00000005 16.00%, #0000000d 22.00%, #00000014 29.00%, #00000021 35.00%, #0000002e 41.00%, #00000040 47.00%, #00000052 53.00%, #00000066 59.00%, #0000007a 65.00%, #00000094 71.00%, #000000ab 78.00%, #000000c7 84.00%, #000000e3 92.00%, #000000ff 100.00%));
|
|
337
|
+
--gradient-fade-mask-to-l: linear-gradient(to left, var(--seed-gradient-fade-mask, #00000000 0.00%, #00000003 8.00%, #00000005 16.00%, #0000000d 22.00%, #00000014 29.00%, #00000021 35.00%, #0000002e 41.00%, #00000040 47.00%, #00000052 53.00%, #00000066 59.00%, #0000007a 65.00%, #00000094 71.00%, #000000ab 78.00%, #000000c7 84.00%, #000000e3 92.00%, #000000ff 100.00%));
|
|
338
|
+
--gradient-fade-mask-to-tl: linear-gradient(to top left, var(--seed-gradient-fade-mask, #00000000 0.00%, #00000003 8.00%, #00000005 16.00%, #0000000d 22.00%, #00000014 29.00%, #00000021 35.00%, #0000002e 41.00%, #00000040 47.00%, #00000052 53.00%, #00000066 59.00%, #0000007a 65.00%, #00000094 71.00%, #000000ab 78.00%, #000000c7 84.00%, #000000e3 92.00%, #000000ff 100.00%));
|
|
339
|
+
--gradient-glow-magic-to-t: linear-gradient(to top, var(--seed-gradient-glow-magic, #fef6f7 0.00%, #fef0e7 80.00%, #f9f7f5 100.00%));
|
|
340
|
+
--gradient-glow-magic-to-tr: linear-gradient(to top right, var(--seed-gradient-glow-magic, #fef6f7 0.00%, #fef0e7 80.00%, #f9f7f5 100.00%));
|
|
341
|
+
--gradient-glow-magic-to-r: linear-gradient(to right, var(--seed-gradient-glow-magic, #fef6f7 0.00%, #fef0e7 80.00%, #f9f7f5 100.00%));
|
|
342
|
+
--gradient-glow-magic-to-br: linear-gradient(to bottom right, var(--seed-gradient-glow-magic, #fef6f7 0.00%, #fef0e7 80.00%, #f9f7f5 100.00%));
|
|
343
|
+
--gradient-glow-magic-to-b: linear-gradient(to bottom, var(--seed-gradient-glow-magic, #fef6f7 0.00%, #fef0e7 80.00%, #f9f7f5 100.00%));
|
|
344
|
+
--gradient-glow-magic-to-bl: linear-gradient(to bottom left, var(--seed-gradient-glow-magic, #fef6f7 0.00%, #fef0e7 80.00%, #f9f7f5 100.00%));
|
|
345
|
+
--gradient-glow-magic-to-l: linear-gradient(to left, var(--seed-gradient-glow-magic, #fef6f7 0.00%, #fef0e7 80.00%, #f9f7f5 100.00%));
|
|
346
|
+
--gradient-glow-magic-to-tl: linear-gradient(to top left, var(--seed-gradient-glow-magic, #fef6f7 0.00%, #fef0e7 80.00%, #f9f7f5 100.00%));
|
|
347
|
+
--gradient-glow-magic-pressed-to-t: linear-gradient(to top, var(--seed-gradient-glow-magic-pressed, #fbf0f2 0.00%, #ffe8db 80.00%, #f5f2ef 100.00%));
|
|
348
|
+
--gradient-glow-magic-pressed-to-tr: linear-gradient(to top right, var(--seed-gradient-glow-magic-pressed, #fbf0f2 0.00%, #ffe8db 80.00%, #f5f2ef 100.00%));
|
|
349
|
+
--gradient-glow-magic-pressed-to-r: linear-gradient(to right, var(--seed-gradient-glow-magic-pressed, #fbf0f2 0.00%, #ffe8db 80.00%, #f5f2ef 100.00%));
|
|
350
|
+
--gradient-glow-magic-pressed-to-br: linear-gradient(to bottom right, var(--seed-gradient-glow-magic-pressed, #fbf0f2 0.00%, #ffe8db 80.00%, #f5f2ef 100.00%));
|
|
351
|
+
--gradient-glow-magic-pressed-to-b: linear-gradient(to bottom, var(--seed-gradient-glow-magic-pressed, #fbf0f2 0.00%, #ffe8db 80.00%, #f5f2ef 100.00%));
|
|
352
|
+
--gradient-glow-magic-pressed-to-bl: linear-gradient(to bottom left, var(--seed-gradient-glow-magic-pressed, #fbf0f2 0.00%, #ffe8db 80.00%, #f5f2ef 100.00%));
|
|
353
|
+
--gradient-glow-magic-pressed-to-l: linear-gradient(to left, var(--seed-gradient-glow-magic-pressed, #fbf0f2 0.00%, #ffe8db 80.00%, #f5f2ef 100.00%));
|
|
354
|
+
--gradient-glow-magic-pressed-to-tl: linear-gradient(to top left, var(--seed-gradient-glow-magic-pressed, #fbf0f2 0.00%, #ffe8db 80.00%, #f5f2ef 100.00%));
|
|
355
|
+
--gradient-highlight-magic-to-t: linear-gradient(to top, var(--seed-gradient-highlight-magic, #ff6600 20.00%, #d25aca 100.00%));
|
|
356
|
+
--gradient-highlight-magic-to-tr: linear-gradient(to top right, var(--seed-gradient-highlight-magic, #ff6600 20.00%, #d25aca 100.00%));
|
|
357
|
+
--gradient-highlight-magic-to-r: linear-gradient(to right, var(--seed-gradient-highlight-magic, #ff6600 20.00%, #d25aca 100.00%));
|
|
358
|
+
--gradient-highlight-magic-to-br: linear-gradient(to bottom right, var(--seed-gradient-highlight-magic, #ff6600 20.00%, #d25aca 100.00%));
|
|
359
|
+
--gradient-highlight-magic-to-b: linear-gradient(to bottom, var(--seed-gradient-highlight-magic, #ff6600 20.00%, #d25aca 100.00%));
|
|
360
|
+
--gradient-highlight-magic-to-bl: linear-gradient(to bottom left, var(--seed-gradient-highlight-magic, #ff6600 20.00%, #d25aca 100.00%));
|
|
361
|
+
--gradient-highlight-magic-to-l: linear-gradient(to left, var(--seed-gradient-highlight-magic, #ff6600 20.00%, #d25aca 100.00%));
|
|
362
|
+
--gradient-highlight-magic-to-tl: linear-gradient(to top left, var(--seed-gradient-highlight-magic, #ff6600 20.00%, #d25aca 100.00%));
|
|
363
|
+
--gradient-highlight-magic-pressed-to-t: linear-gradient(to top, var(--seed-gradient-highlight-magic-pressed, #e14f00 20.00%, #ae58bf 100.00%));
|
|
364
|
+
--gradient-highlight-magic-pressed-to-tr: linear-gradient(to top right, var(--seed-gradient-highlight-magic-pressed, #e14f00 20.00%, #ae58bf 100.00%));
|
|
365
|
+
--gradient-highlight-magic-pressed-to-r: linear-gradient(to right, var(--seed-gradient-highlight-magic-pressed, #e14f00 20.00%, #ae58bf 100.00%));
|
|
366
|
+
--gradient-highlight-magic-pressed-to-br: linear-gradient(to bottom right, var(--seed-gradient-highlight-magic-pressed, #e14f00 20.00%, #ae58bf 100.00%));
|
|
367
|
+
--gradient-highlight-magic-pressed-to-b: linear-gradient(to bottom, var(--seed-gradient-highlight-magic-pressed, #e14f00 20.00%, #ae58bf 100.00%));
|
|
368
|
+
--gradient-highlight-magic-pressed-to-bl: linear-gradient(to bottom left, var(--seed-gradient-highlight-magic-pressed, #e14f00 20.00%, #ae58bf 100.00%));
|
|
369
|
+
--gradient-highlight-magic-pressed-to-l: linear-gradient(to left, var(--seed-gradient-highlight-magic-pressed, #e14f00 20.00%, #ae58bf 100.00%));
|
|
370
|
+
--gradient-highlight-magic-pressed-to-tl: linear-gradient(to top left, var(--seed-gradient-highlight-magic-pressed, #e14f00 20.00%, #ae58bf 100.00%));
|
|
371
|
+
--gradient-shimmer-magic-to-t: linear-gradient(to top, var(--seed-gradient-shimmer-magic, #fff9f500 0.00%, #fff9f5cc 46.00%, #fff9f5cc 54.00%, #fff9f500 100.00%));
|
|
372
|
+
--gradient-shimmer-magic-to-tr: linear-gradient(to top right, var(--seed-gradient-shimmer-magic, #fff9f500 0.00%, #fff9f5cc 46.00%, #fff9f5cc 54.00%, #fff9f500 100.00%));
|
|
373
|
+
--gradient-shimmer-magic-to-r: linear-gradient(to right, var(--seed-gradient-shimmer-magic, #fff9f500 0.00%, #fff9f5cc 46.00%, #fff9f5cc 54.00%, #fff9f500 100.00%));
|
|
374
|
+
--gradient-shimmer-magic-to-br: linear-gradient(to bottom right, var(--seed-gradient-shimmer-magic, #fff9f500 0.00%, #fff9f5cc 46.00%, #fff9f5cc 54.00%, #fff9f500 100.00%));
|
|
375
|
+
--gradient-shimmer-magic-to-b: linear-gradient(to bottom, var(--seed-gradient-shimmer-magic, #fff9f500 0.00%, #fff9f5cc 46.00%, #fff9f5cc 54.00%, #fff9f500 100.00%));
|
|
376
|
+
--gradient-shimmer-magic-to-bl: linear-gradient(to bottom left, var(--seed-gradient-shimmer-magic, #fff9f500 0.00%, #fff9f5cc 46.00%, #fff9f5cc 54.00%, #fff9f500 100.00%));
|
|
377
|
+
--gradient-shimmer-magic-to-l: linear-gradient(to left, var(--seed-gradient-shimmer-magic, #fff9f500 0.00%, #fff9f5cc 46.00%, #fff9f5cc 54.00%, #fff9f500 100.00%));
|
|
378
|
+
--gradient-shimmer-magic-to-tl: linear-gradient(to top left, var(--seed-gradient-shimmer-magic, #fff9f500 0.00%, #fff9f5cc 46.00%, #fff9f5cc 54.00%, #fff9f500 100.00%));
|
|
379
|
+
--gradient-shimmer-neutral-to-t: linear-gradient(to top, var(--seed-gradient-shimmer-neutral, #ffffff00 0.00%, #ffffffab 46.00%, #ffffffab 54.00%, #ffffff00 100.00%));
|
|
380
|
+
--gradient-shimmer-neutral-to-tr: linear-gradient(to top right, var(--seed-gradient-shimmer-neutral, #ffffff00 0.00%, #ffffffab 46.00%, #ffffffab 54.00%, #ffffff00 100.00%));
|
|
381
|
+
--gradient-shimmer-neutral-to-r: linear-gradient(to right, var(--seed-gradient-shimmer-neutral, #ffffff00 0.00%, #ffffffab 46.00%, #ffffffab 54.00%, #ffffff00 100.00%));
|
|
382
|
+
--gradient-shimmer-neutral-to-br: linear-gradient(to bottom right, var(--seed-gradient-shimmer-neutral, #ffffff00 0.00%, #ffffffab 46.00%, #ffffffab 54.00%, #ffffff00 100.00%));
|
|
383
|
+
--gradient-shimmer-neutral-to-b: linear-gradient(to bottom, var(--seed-gradient-shimmer-neutral, #ffffff00 0.00%, #ffffffab 46.00%, #ffffffab 54.00%, #ffffff00 100.00%));
|
|
384
|
+
--gradient-shimmer-neutral-to-bl: linear-gradient(to bottom left, var(--seed-gradient-shimmer-neutral, #ffffff00 0.00%, #ffffffab 46.00%, #ffffffab 54.00%, #ffffff00 100.00%));
|
|
385
|
+
--gradient-shimmer-neutral-to-l: linear-gradient(to left, var(--seed-gradient-shimmer-neutral, #ffffff00 0.00%, #ffffffab 46.00%, #ffffffab 54.00%, #ffffff00 100.00%));
|
|
386
|
+
--gradient-shimmer-neutral-to-tl: linear-gradient(to top left, var(--seed-gradient-shimmer-neutral, #ffffff00 0.00%, #ffffffab 46.00%, #ffffffab 54.00%, #ffffff00 100.00%));
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
@theme inline {
|
|
390
|
+
--gradient-direction-to-t: to top;
|
|
391
|
+
--gradient-direction-to-tr: to top right;
|
|
392
|
+
--gradient-direction-to-r: to right;
|
|
393
|
+
--gradient-direction-to-br: to bottom right;
|
|
394
|
+
--gradient-direction-to-b: to bottom;
|
|
395
|
+
--gradient-direction-to-bl: to bottom left;
|
|
396
|
+
--gradient-direction-to-l: to left;
|
|
397
|
+
--gradient-direction-to-tl: to top left;
|
|
387
398
|
}
|
|
388
399
|
|
|
389
400
|
@utility screen-title {
|
|
@@ -1021,30 +1032,58 @@
|
|
|
1021
1032
|
box-shadow: --value(--shadow-*);
|
|
1022
1033
|
}
|
|
1023
1034
|
|
|
1035
|
+
@utility bg-fade-mask-to-* {
|
|
1036
|
+
background-image: linear-gradient(--value(--gradient-direction-to-*), var(--seed-gradient-fade-mask, #00000000 0.00%, #00000003 8.00%, #00000005 16.00%, #0000000d 22.00%, #00000014 29.00%, #00000021 35.00%, #0000002e 41.00%, #00000040 47.00%, #00000052 53.00%, #00000066 59.00%, #0000007a 65.00%, #00000094 71.00%, #000000ab 78.00%, #000000c7 84.00%, #000000e3 92.00%, #000000ff 100.00%));
|
|
1037
|
+
}
|
|
1038
|
+
|
|
1024
1039
|
@utility bg-gradient-fade-mask-* {
|
|
1025
|
-
background-image: linear-gradient(--value([angle]), var(--gradient-
|
|
1040
|
+
background-image: linear-gradient(--value(--gradient-direction-*, [angle]), var(--seed-gradient-fade-mask, #00000000 0.00%, #00000003 8.00%, #00000005 16.00%, #0000000d 22.00%, #00000014 29.00%, #00000021 35.00%, #0000002e 41.00%, #00000040 47.00%, #00000052 53.00%, #00000066 59.00%, #0000007a 65.00%, #00000094 71.00%, #000000ab 78.00%, #000000c7 84.00%, #000000e3 92.00%, #000000ff 100.00%));
|
|
1041
|
+
}
|
|
1042
|
+
|
|
1043
|
+
@utility bg-glow-magic-to-* {
|
|
1044
|
+
background-image: linear-gradient(--value(--gradient-direction-to-*), var(--seed-gradient-glow-magic, #fef6f7 0.00%, #fef0e7 80.00%, #f9f7f5 100.00%));
|
|
1026
1045
|
}
|
|
1027
1046
|
|
|
1028
1047
|
@utility bg-gradient-glow-magic-* {
|
|
1029
|
-
background-image: linear-gradient(--value([angle]), var(--gradient-
|
|
1048
|
+
background-image: linear-gradient(--value(--gradient-direction-*, [angle]), var(--seed-gradient-glow-magic, #fef6f7 0.00%, #fef0e7 80.00%, #f9f7f5 100.00%));
|
|
1049
|
+
}
|
|
1050
|
+
|
|
1051
|
+
@utility bg-glow-magic-pressed-to-* {
|
|
1052
|
+
background-image: linear-gradient(--value(--gradient-direction-to-*), var(--seed-gradient-glow-magic-pressed, #fbf0f2 0.00%, #ffe8db 80.00%, #f5f2ef 100.00%));
|
|
1030
1053
|
}
|
|
1031
1054
|
|
|
1032
1055
|
@utility bg-gradient-glow-magic-pressed-* {
|
|
1033
|
-
background-image: linear-gradient(--value([angle]), var(--gradient-
|
|
1056
|
+
background-image: linear-gradient(--value(--gradient-direction-*, [angle]), var(--seed-gradient-glow-magic-pressed, #fbf0f2 0.00%, #ffe8db 80.00%, #f5f2ef 100.00%));
|
|
1057
|
+
}
|
|
1058
|
+
|
|
1059
|
+
@utility bg-highlight-magic-to-* {
|
|
1060
|
+
background-image: linear-gradient(--value(--gradient-direction-to-*), var(--seed-gradient-highlight-magic, #ff6600 20.00%, #d25aca 100.00%));
|
|
1034
1061
|
}
|
|
1035
1062
|
|
|
1036
1063
|
@utility bg-gradient-highlight-magic-* {
|
|
1037
|
-
background-image: linear-gradient(--value([angle]), var(--gradient-
|
|
1064
|
+
background-image: linear-gradient(--value(--gradient-direction-*, [angle]), var(--seed-gradient-highlight-magic, #ff6600 20.00%, #d25aca 100.00%));
|
|
1065
|
+
}
|
|
1066
|
+
|
|
1067
|
+
@utility bg-highlight-magic-pressed-to-* {
|
|
1068
|
+
background-image: linear-gradient(--value(--gradient-direction-to-*), var(--seed-gradient-highlight-magic-pressed, #e14f00 20.00%, #ae58bf 100.00%));
|
|
1038
1069
|
}
|
|
1039
1070
|
|
|
1040
1071
|
@utility bg-gradient-highlight-magic-pressed-* {
|
|
1041
|
-
background-image: linear-gradient(--value([angle]), var(--gradient-
|
|
1072
|
+
background-image: linear-gradient(--value(--gradient-direction-*, [angle]), var(--seed-gradient-highlight-magic-pressed, #e14f00 20.00%, #ae58bf 100.00%));
|
|
1073
|
+
}
|
|
1074
|
+
|
|
1075
|
+
@utility bg-shimmer-magic-to-* {
|
|
1076
|
+
background-image: linear-gradient(--value(--gradient-direction-to-*), var(--seed-gradient-shimmer-magic, #fff9f500 0.00%, #fff9f5cc 46.00%, #fff9f5cc 54.00%, #fff9f500 100.00%));
|
|
1042
1077
|
}
|
|
1043
1078
|
|
|
1044
1079
|
@utility bg-gradient-shimmer-magic-* {
|
|
1045
|
-
background-image: linear-gradient(--value([angle]), var(--gradient-
|
|
1080
|
+
background-image: linear-gradient(--value(--gradient-direction-*, [angle]), var(--seed-gradient-shimmer-magic, #fff9f500 0.00%, #fff9f5cc 46.00%, #fff9f5cc 54.00%, #fff9f500 100.00%));
|
|
1081
|
+
}
|
|
1082
|
+
|
|
1083
|
+
@utility bg-shimmer-neutral-to-* {
|
|
1084
|
+
background-image: linear-gradient(--value(--gradient-direction-to-*), var(--seed-gradient-shimmer-neutral, #ffffff00 0.00%, #ffffffab 46.00%, #ffffffab 54.00%, #ffffff00 100.00%));
|
|
1046
1085
|
}
|
|
1047
1086
|
|
|
1048
1087
|
@utility bg-gradient-shimmer-neutral-* {
|
|
1049
|
-
background-image: linear-gradient(--value([angle]), var(--gradient-
|
|
1088
|
+
background-image: linear-gradient(--value(--gradient-direction-*, [angle]), var(--seed-gradient-shimmer-neutral, #ffffff00 0.00%, #ffffffab 46.00%, #ffffffab 54.00%, #ffffff00 100.00%));
|
|
1050
1089
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@seed-design/tailwind4-theme",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.5.0",
|
|
4
4
|
"description": "SEED 디자인 토큰을 Tailwind CSS 4.0에서 사용하기 위한 플러그인",
|
|
5
5
|
"main": "index.css",
|
|
6
6
|
"repository": {
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"peerDependencies": {
|
|
39
39
|
"@seed-design/css": "^2.7.0",
|
|
40
40
|
"tailwindcss": "4",
|
|
41
|
-
"@seed-design/lynx-css": "^0.11.0"
|
|
41
|
+
"@seed-design/lynx-css": "^0.11.0 || ^0.12.0 || ^0.13.0"
|
|
42
42
|
},
|
|
43
43
|
"peerDependenciesMeta": {
|
|
44
44
|
"@seed-design/css": {
|