@seed-design/tailwind3-plugin 0.0.39 → 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.
Files changed (7) hide show
  1. package/README.md +15 -0
  2. package/lib/index.cjs +81 -9
  3. package/lib/index.d.cts +3 -0
  4. package/lib/index.d.ts +3 -0
  5. package/lib/index.js +81 -9
  6. package/package.json +1 -1
  7. package/src/index.ts +99 -23
package/README.md CHANGED
@@ -89,11 +89,26 @@ SEED 디자인 시스템의 모든 디자인 토큰은 다음과 같은 유틸
89
89
  <button className="radius-r8">매우 둥근 버튼</button>
90
90
  ```
91
91
 
92
+ ### 그라데이션 유틸리티
93
+ ```jsx
94
+ // 방향성 그라데이션 배경
95
+ <div className="bg-shimmer-neutral-to-r">우측으로 그라데이션</div>
96
+ <div className="bg-shimmer-magic-to-b">아래로 그라데이션</div>
97
+ <div className="bg-shimmer-neutral-to-tr">우측 상단으로 그라데이션</div>
98
+
99
+ // 임의 각도 그라데이션 (새로 추가)
100
+ <div className="bg-gradient-shimmer-neutral-[45deg]">45도 각도 그라데이션</div>
101
+ <div className="bg-gradient-glow-magic-[120deg]">120도 각도 그라데이션</div>
102
+ <div className="bg-gradient-highlight-magic-[270deg]">270도 각도 그라데이션</div>
103
+ ```
104
+
92
105
  ## 지원하는 토큰
93
106
 
94
107
  이 플러그인은 다음과 같은 SEED 디자인 토큰을 지원합니다:
95
108
 
96
109
  - 색상 (fg-*, bg-*, stroke-*, palette-*)
110
+ - 그라데이션 (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)
111
+ - 그라데이션 임의 각도 (bg-gradient-{gradient-stops-name}-45deg, bg-gradient-{gradient-stops-name}-120deg, bg-gradient-{gradient-stops-name}-270deg 등)
97
112
  - 크기 (dimension-x*)
98
113
  - 여백 (p-x*, m-x*, gap-x*)
99
114
  - 반경 (radius-r*)
package/lib/index.cjs CHANGED
@@ -13,18 +13,39 @@ var plugin__default = /*#__PURE__*/_interopDefault(plugin);
13
13
  * 예시:
14
14
  * - 색상: bg-bg-layer-basement, text-fg-brand, border-stroke-divider
15
15
  * - 타이포그래피: t1-regular, t1-bold, screen-title
16
+ * - 그라데이션:
17
+ * * bg-gradient-shimmer-neutral-to-r (방향성 포함)
18
+ * * bg-gradient-shimmer-neutral-[45deg] (임의 각도)
16
19
  *
17
20
  * 모든 토큰은 CSS 변수를 사용하여 다크 모드와 자동 호환됩니다.
18
- */ var index = plugin__default.default(({ theme, addComponents })=>{
21
+ */ var index = plugin__default.default(({ theme, addComponents, matchUtilities })=>{
19
22
  // typography 유틸리티
20
23
  const typography = theme("typography");
21
24
  if (typography) {
22
- // matchUtilities 대신 addComponents 사용
23
25
  addComponents(Object.entries(typography).reduce((acc, [key, value])=>{
24
26
  acc[`.${key}`] = value;
25
27
  return acc;
26
28
  }, {}));
27
29
  }
30
+ // gradient arbitrary value 지원
31
+ const gradientStopsForArbitrary = {
32
+ "shimmer-neutral": "#FFFFFF00 0.00%, #FFFFFF66 46.00%, #FFFFFF66 54.00%, #FFFFFF00 100.00%",
33
+ "shimmer-magic": "#FEF0E700 0.00%, #FEF0E78A 46.00%, #FEF0E78A 54.00%, #FEF0E700 100.00%",
34
+ "fade-neutral": "#FFFFFF 0.00%, #FFFFFF00 100.00%",
35
+ "glow-magic": "#FEF6F7 0.00%, #FEF0E7 80.00%, #F9F7F5 100.00%",
36
+ "glow-magic-pressed": "#FBF0F2 0.00%, #FFE8DB 80.00%, #F5F2EF 100.00%",
37
+ "highlight-magic": "#FF6600 20.00%, #D25ACA 80.00%"
38
+ };
39
+ Object.entries(gradientStopsForArbitrary).forEach(([gradientName, colorStops])=>{
40
+ matchUtilities({
41
+ [`bg-gradient-${gradientName}`]: (value)=>({
42
+ backgroundImage: `linear-gradient(${value}, ${colorStops})`
43
+ })
44
+ }, {
45
+ type: 'any',
46
+ values: {}
47
+ });
48
+ });
28
49
  }, {
29
50
  theme: {
30
51
  extend: {
@@ -127,13 +148,11 @@ var plugin__default = /*#__PURE__*/_interopDefault(plugin);
127
148
  "fg-critical": "var(--seed-color-fg-critical)",
128
149
  "fg-disabled": "var(--seed-color-fg-disabled)",
129
150
  "fg-informative": "var(--seed-color-fg-informative)",
130
- "fg-magic": "var(--seed-color-fg-magic)",
131
151
  "fg-neutral": "var(--seed-color-fg-neutral)",
132
152
  "fg-placeholder": "var(--seed-color-fg-placeholder)",
133
153
  "fg-positive": "var(--seed-color-fg-positive)",
134
154
  "fg-critical-contrast": "var(--seed-color-fg-critical-contrast)",
135
155
  "fg-informative-contrast": "var(--seed-color-fg-informative-contrast)",
136
- "fg-magic-contrast": "var(--seed-color-fg-magic-contrast)",
137
156
  "fg-neutral-inverted": "var(--seed-color-fg-neutral-inverted)",
138
157
  "fg-neutral-muted": "var(--seed-color-fg-neutral-muted)",
139
158
  "fg-neutral-subtle": "var(--seed-color-fg-neutral-subtle)",
@@ -142,6 +161,7 @@ var plugin__default = /*#__PURE__*/_interopDefault(plugin);
142
161
  "bg-disabled": "var(--seed-color-bg-disabled)",
143
162
  "bg-overlay": "var(--seed-color-bg-overlay)",
144
163
  "bg-brand-solid": "var(--seed-color-bg-brand-solid)",
164
+ "bg-magic-weak": "var(--seed-color-bg-magic-weak)",
145
165
  "bg-brand-solid-pressed": "var(--seed-color-bg-brand-solid-pressed)",
146
166
  "bg-critical-solid": "var(--seed-color-bg-critical-solid)",
147
167
  "bg-critical-weak": "var(--seed-color-bg-critical-weak)",
@@ -157,10 +177,6 @@ var plugin__default = /*#__PURE__*/_interopDefault(plugin);
157
177
  "bg-layer-floating": "var(--seed-color-bg-layer-floating)",
158
178
  "bg-layer-default-pressed": "var(--seed-color-bg-layer-default-pressed)",
159
179
  "bg-layer-floating-pressed": "var(--seed-color-bg-layer-floating-pressed)",
160
- "bg-magic-solid": "var(--seed-color-bg-magic-solid)",
161
- "bg-magic-weak": "var(--seed-color-bg-magic-weak)",
162
- "bg-magic-solid-pressed": "var(--seed-color-bg-magic-solid-pressed)",
163
- "bg-magic-weak-pressed": "var(--seed-color-bg-magic-weak-pressed)",
164
180
  "bg-neutral-inverted": "var(--seed-color-bg-neutral-inverted)",
165
181
  "bg-neutral-solid": "var(--seed-color-bg-neutral-solid)",
166
182
  "bg-neutral-weak": "var(--seed-color-bg-neutral-weak)",
@@ -197,7 +213,63 @@ var plugin__default = /*#__PURE__*/_interopDefault(plugin);
197
213
  "manner-temp-l5-bg": "var(--seed-color-manner-temp-l5-bg)",
198
214
  "manner-temp-l5-text": "var(--seed-color-manner-temp-l5-text)",
199
215
  "manner-temp-l6-bg": "var(--seed-color-manner-temp-l6-bg)",
200
- "manner-temp-l6-text": "var(--seed-color-manner-temp-l6-text)"
216
+ "manner-temp-l6-text": "var(--seed-color-manner-temp-l6-text)",
217
+ "gradient-stops-shimmer-neutral": "#FFFFFF00 0.00%, #FFFFFF66 46.00%, #FFFFFF66 54.00%, #FFFFFF00 100.00%",
218
+ "gradient-stops-shimmer-magic": "#FEF0E700 0.00%, #FEF0E78A 46.00%, #FEF0E78A 54.00%, #FEF0E700 100.00%",
219
+ "gradient-stops-fade-neutral": "#FFFFFF 0.00%, #FFFFFF00 100.00%",
220
+ "gradient-stops-glow-magic": "#FEF6F7 0.00%, #FEF0E7 80.00%, #F9F7F5 100.00%",
221
+ "gradient-stops-glow-magic-pressed": "#FBF0F2 0.00%, #FFE8DB 80.00%, #F5F2EF 100.00%",
222
+ "gradient-stops-highlight-magic": "#FF6600 20.00%, #D25ACA 80.00%"
223
+ },
224
+ backgroundImage: {
225
+ "shimmer-neutral-to-t": "linear-gradient(to top, #FFFFFF00 0.00%, #FFFFFF66 46.00%, #FFFFFF66 54.00%, #FFFFFF00 100.00%)",
226
+ "shimmer-neutral-to-tr": "linear-gradient(to top right, #FFFFFF00 0.00%, #FFFFFF66 46.00%, #FFFFFF66 54.00%, #FFFFFF00 100.00%)",
227
+ "shimmer-neutral-to-r": "linear-gradient(to right, #FFFFFF00 0.00%, #FFFFFF66 46.00%, #FFFFFF66 54.00%, #FFFFFF00 100.00%)",
228
+ "shimmer-neutral-to-br": "linear-gradient(to bottom right, #FFFFFF00 0.00%, #FFFFFF66 46.00%, #FFFFFF66 54.00%, #FFFFFF00 100.00%)",
229
+ "shimmer-neutral-to-b": "linear-gradient(to bottom, #FFFFFF00 0.00%, #FFFFFF66 46.00%, #FFFFFF66 54.00%, #FFFFFF00 100.00%)",
230
+ "shimmer-neutral-to-bl": "linear-gradient(to bottom left, #FFFFFF00 0.00%, #FFFFFF66 46.00%, #FFFFFF66 54.00%, #FFFFFF00 100.00%)",
231
+ "shimmer-neutral-to-l": "linear-gradient(to left, #FFFFFF00 0.00%, #FFFFFF66 46.00%, #FFFFFF66 54.00%, #FFFFFF00 100.00%)",
232
+ "shimmer-neutral-to-tl": "linear-gradient(to top left, #FFFFFF00 0.00%, #FFFFFF66 46.00%, #FFFFFF66 54.00%, #FFFFFF00 100.00%)",
233
+ "shimmer-magic-to-t": "linear-gradient(to top, #FEF0E700 0.00%, #FEF0E78A 46.00%, #FEF0E78A 54.00%, #FEF0E700 100.00%)",
234
+ "shimmer-magic-to-tr": "linear-gradient(to top right, #FEF0E700 0.00%, #FEF0E78A 46.00%, #FEF0E78A 54.00%, #FEF0E700 100.00%)",
235
+ "shimmer-magic-to-r": "linear-gradient(to right, #FEF0E700 0.00%, #FEF0E78A 46.00%, #FEF0E78A 54.00%, #FEF0E700 100.00%)",
236
+ "shimmer-magic-to-br": "linear-gradient(to bottom right, #FEF0E700 0.00%, #FEF0E78A 46.00%, #FEF0E78A 54.00%, #FEF0E700 100.00%)",
237
+ "shimmer-magic-to-b": "linear-gradient(to bottom, #FEF0E700 0.00%, #FEF0E78A 46.00%, #FEF0E78A 54.00%, #FEF0E700 100.00%)",
238
+ "shimmer-magic-to-bl": "linear-gradient(to bottom left, #FEF0E700 0.00%, #FEF0E78A 46.00%, #FEF0E78A 54.00%, #FEF0E700 100.00%)",
239
+ "shimmer-magic-to-l": "linear-gradient(to left, #FEF0E700 0.00%, #FEF0E78A 46.00%, #FEF0E78A 54.00%, #FEF0E700 100.00%)",
240
+ "shimmer-magic-to-tl": "linear-gradient(to top left, #FEF0E700 0.00%, #FEF0E78A 46.00%, #FEF0E78A 54.00%, #FEF0E700 100.00%)",
241
+ "fade-neutral-to-t": "linear-gradient(to top, #FFFFFF 0.00%, #FFFFFF00 100.00%)",
242
+ "fade-neutral-to-tr": "linear-gradient(to top right, #FFFFFF 0.00%, #FFFFFF00 100.00%)",
243
+ "fade-neutral-to-r": "linear-gradient(to right, #FFFFFF 0.00%, #FFFFFF00 100.00%)",
244
+ "fade-neutral-to-br": "linear-gradient(to bottom right, #FFFFFF 0.00%, #FFFFFF00 100.00%)",
245
+ "fade-neutral-to-b": "linear-gradient(to bottom, #FFFFFF 0.00%, #FFFFFF00 100.00%)",
246
+ "fade-neutral-to-bl": "linear-gradient(to bottom left, #FFFFFF 0.00%, #FFFFFF00 100.00%)",
247
+ "fade-neutral-to-l": "linear-gradient(to left, #FFFFFF 0.00%, #FFFFFF00 100.00%)",
248
+ "fade-neutral-to-tl": "linear-gradient(to top left, #FFFFFF 0.00%, #FFFFFF00 100.00%)",
249
+ "glow-magic-to-t": "linear-gradient(to top, #FEF6F7 0.00%, #FEF0E7 80.00%, #F9F7F5 100.00%)",
250
+ "glow-magic-to-tr": "linear-gradient(to top right, #FEF6F7 0.00%, #FEF0E7 80.00%, #F9F7F5 100.00%)",
251
+ "glow-magic-to-r": "linear-gradient(to right, #FEF6F7 0.00%, #FEF0E7 80.00%, #F9F7F5 100.00%)",
252
+ "glow-magic-to-br": "linear-gradient(to bottom right, #FEF6F7 0.00%, #FEF0E7 80.00%, #F9F7F5 100.00%)",
253
+ "glow-magic-to-b": "linear-gradient(to bottom, #FEF6F7 0.00%, #FEF0E7 80.00%, #F9F7F5 100.00%)",
254
+ "glow-magic-to-bl": "linear-gradient(to bottom left, #FEF6F7 0.00%, #FEF0E7 80.00%, #F9F7F5 100.00%)",
255
+ "glow-magic-to-l": "linear-gradient(to left, #FEF6F7 0.00%, #FEF0E7 80.00%, #F9F7F5 100.00%)",
256
+ "glow-magic-to-tl": "linear-gradient(to top left, #FEF6F7 0.00%, #FEF0E7 80.00%, #F9F7F5 100.00%)",
257
+ "glow-magic-pressed-to-t": "linear-gradient(to top, #FBF0F2 0.00%, #FFE8DB 80.00%, #F5F2EF 100.00%)",
258
+ "glow-magic-pressed-to-tr": "linear-gradient(to top right, #FBF0F2 0.00%, #FFE8DB 80.00%, #F5F2EF 100.00%)",
259
+ "glow-magic-pressed-to-r": "linear-gradient(to right, #FBF0F2 0.00%, #FFE8DB 80.00%, #F5F2EF 100.00%)",
260
+ "glow-magic-pressed-to-br": "linear-gradient(to bottom right, #FBF0F2 0.00%, #FFE8DB 80.00%, #F5F2EF 100.00%)",
261
+ "glow-magic-pressed-to-b": "linear-gradient(to bottom, #FBF0F2 0.00%, #FFE8DB 80.00%, #F5F2EF 100.00%)",
262
+ "glow-magic-pressed-to-bl": "linear-gradient(to bottom left, #FBF0F2 0.00%, #FFE8DB 80.00%, #F5F2EF 100.00%)",
263
+ "glow-magic-pressed-to-l": "linear-gradient(to left, #FBF0F2 0.00%, #FFE8DB 80.00%, #F5F2EF 100.00%)",
264
+ "glow-magic-pressed-to-tl": "linear-gradient(to top left, #FBF0F2 0.00%, #FFE8DB 80.00%, #F5F2EF 100.00%)",
265
+ "highlight-magic-to-t": "linear-gradient(to top, #FF6600 20.00%, #D25ACA 80.00%)",
266
+ "highlight-magic-to-tr": "linear-gradient(to top right, #FF6600 20.00%, #D25ACA 80.00%)",
267
+ "highlight-magic-to-r": "linear-gradient(to right, #FF6600 20.00%, #D25ACA 80.00%)",
268
+ "highlight-magic-to-br": "linear-gradient(to bottom right, #FF6600 20.00%, #D25ACA 80.00%)",
269
+ "highlight-magic-to-b": "linear-gradient(to bottom, #FF6600 20.00%, #D25ACA 80.00%)",
270
+ "highlight-magic-to-bl": "linear-gradient(to bottom left, #FF6600 20.00%, #D25ACA 80.00%)",
271
+ "highlight-magic-to-l": "linear-gradient(to left, #FF6600 20.00%, #D25ACA 80.00%)",
272
+ "highlight-magic-to-tl": "linear-gradient(to top left, #FF6600 20.00%, #D25ACA 80.00%)"
201
273
  },
202
274
  typography: {
203
275
  "screen-title": {
package/lib/index.d.cts CHANGED
@@ -6,6 +6,9 @@ import * as tailwindcss_types_config from 'tailwindcss/types/config';
6
6
  * 예시:
7
7
  * - 색상: bg-bg-layer-basement, text-fg-brand, border-stroke-divider
8
8
  * - 타이포그래피: t1-regular, t1-bold, screen-title
9
+ * - 그라데이션:
10
+ * * bg-gradient-shimmer-neutral-to-r (방향성 포함)
11
+ * * bg-gradient-shimmer-neutral-[45deg] (임의 각도)
9
12
  *
10
13
  * 모든 토큰은 CSS 변수를 사용하여 다크 모드와 자동 호환됩니다.
11
14
  */
package/lib/index.d.ts CHANGED
@@ -6,6 +6,9 @@ import * as tailwindcss_types_config from 'tailwindcss/types/config';
6
6
  * 예시:
7
7
  * - 색상: bg-bg-layer-basement, text-fg-brand, border-stroke-divider
8
8
  * - 타이포그래피: t1-regular, t1-bold, screen-title
9
+ * - 그라데이션:
10
+ * * bg-gradient-shimmer-neutral-to-r (방향성 포함)
11
+ * * bg-gradient-shimmer-neutral-[45deg] (임의 각도)
9
12
  *
10
13
  * 모든 토큰은 CSS 변수를 사용하여 다크 모드와 자동 호환됩니다.
11
14
  */
package/lib/index.js CHANGED
@@ -7,18 +7,39 @@ import plugin from 'tailwindcss/plugin';
7
7
  * 예시:
8
8
  * - 색상: bg-bg-layer-basement, text-fg-brand, border-stroke-divider
9
9
  * - 타이포그래피: t1-regular, t1-bold, screen-title
10
+ * - 그라데이션:
11
+ * * bg-gradient-shimmer-neutral-to-r (방향성 포함)
12
+ * * bg-gradient-shimmer-neutral-[45deg] (임의 각도)
10
13
  *
11
14
  * 모든 토큰은 CSS 변수를 사용하여 다크 모드와 자동 호환됩니다.
12
- */ var index = plugin(({ theme, addComponents })=>{
15
+ */ var index = plugin(({ theme, addComponents, matchUtilities })=>{
13
16
  // typography 유틸리티
14
17
  const typography = theme("typography");
15
18
  if (typography) {
16
- // matchUtilities 대신 addComponents 사용
17
19
  addComponents(Object.entries(typography).reduce((acc, [key, value])=>{
18
20
  acc[`.${key}`] = value;
19
21
  return acc;
20
22
  }, {}));
21
23
  }
24
+ // gradient arbitrary value 지원
25
+ const gradientStopsForArbitrary = {
26
+ "shimmer-neutral": "#FFFFFF00 0.00%, #FFFFFF66 46.00%, #FFFFFF66 54.00%, #FFFFFF00 100.00%",
27
+ "shimmer-magic": "#FEF0E700 0.00%, #FEF0E78A 46.00%, #FEF0E78A 54.00%, #FEF0E700 100.00%",
28
+ "fade-neutral": "#FFFFFF 0.00%, #FFFFFF00 100.00%",
29
+ "glow-magic": "#FEF6F7 0.00%, #FEF0E7 80.00%, #F9F7F5 100.00%",
30
+ "glow-magic-pressed": "#FBF0F2 0.00%, #FFE8DB 80.00%, #F5F2EF 100.00%",
31
+ "highlight-magic": "#FF6600 20.00%, #D25ACA 80.00%"
32
+ };
33
+ Object.entries(gradientStopsForArbitrary).forEach(([gradientName, colorStops])=>{
34
+ matchUtilities({
35
+ [`bg-gradient-${gradientName}`]: (value)=>({
36
+ backgroundImage: `linear-gradient(${value}, ${colorStops})`
37
+ })
38
+ }, {
39
+ type: 'any',
40
+ values: {}
41
+ });
42
+ });
22
43
  }, {
23
44
  theme: {
24
45
  extend: {
@@ -121,13 +142,11 @@ import plugin from 'tailwindcss/plugin';
121
142
  "fg-critical": "var(--seed-color-fg-critical)",
122
143
  "fg-disabled": "var(--seed-color-fg-disabled)",
123
144
  "fg-informative": "var(--seed-color-fg-informative)",
124
- "fg-magic": "var(--seed-color-fg-magic)",
125
145
  "fg-neutral": "var(--seed-color-fg-neutral)",
126
146
  "fg-placeholder": "var(--seed-color-fg-placeholder)",
127
147
  "fg-positive": "var(--seed-color-fg-positive)",
128
148
  "fg-critical-contrast": "var(--seed-color-fg-critical-contrast)",
129
149
  "fg-informative-contrast": "var(--seed-color-fg-informative-contrast)",
130
- "fg-magic-contrast": "var(--seed-color-fg-magic-contrast)",
131
150
  "fg-neutral-inverted": "var(--seed-color-fg-neutral-inverted)",
132
151
  "fg-neutral-muted": "var(--seed-color-fg-neutral-muted)",
133
152
  "fg-neutral-subtle": "var(--seed-color-fg-neutral-subtle)",
@@ -136,6 +155,7 @@ import plugin from 'tailwindcss/plugin';
136
155
  "bg-disabled": "var(--seed-color-bg-disabled)",
137
156
  "bg-overlay": "var(--seed-color-bg-overlay)",
138
157
  "bg-brand-solid": "var(--seed-color-bg-brand-solid)",
158
+ "bg-magic-weak": "var(--seed-color-bg-magic-weak)",
139
159
  "bg-brand-solid-pressed": "var(--seed-color-bg-brand-solid-pressed)",
140
160
  "bg-critical-solid": "var(--seed-color-bg-critical-solid)",
141
161
  "bg-critical-weak": "var(--seed-color-bg-critical-weak)",
@@ -151,10 +171,6 @@ import plugin from 'tailwindcss/plugin';
151
171
  "bg-layer-floating": "var(--seed-color-bg-layer-floating)",
152
172
  "bg-layer-default-pressed": "var(--seed-color-bg-layer-default-pressed)",
153
173
  "bg-layer-floating-pressed": "var(--seed-color-bg-layer-floating-pressed)",
154
- "bg-magic-solid": "var(--seed-color-bg-magic-solid)",
155
- "bg-magic-weak": "var(--seed-color-bg-magic-weak)",
156
- "bg-magic-solid-pressed": "var(--seed-color-bg-magic-solid-pressed)",
157
- "bg-magic-weak-pressed": "var(--seed-color-bg-magic-weak-pressed)",
158
174
  "bg-neutral-inverted": "var(--seed-color-bg-neutral-inverted)",
159
175
  "bg-neutral-solid": "var(--seed-color-bg-neutral-solid)",
160
176
  "bg-neutral-weak": "var(--seed-color-bg-neutral-weak)",
@@ -191,7 +207,63 @@ import plugin from 'tailwindcss/plugin';
191
207
  "manner-temp-l5-bg": "var(--seed-color-manner-temp-l5-bg)",
192
208
  "manner-temp-l5-text": "var(--seed-color-manner-temp-l5-text)",
193
209
  "manner-temp-l6-bg": "var(--seed-color-manner-temp-l6-bg)",
194
- "manner-temp-l6-text": "var(--seed-color-manner-temp-l6-text)"
210
+ "manner-temp-l6-text": "var(--seed-color-manner-temp-l6-text)",
211
+ "gradient-stops-shimmer-neutral": "#FFFFFF00 0.00%, #FFFFFF66 46.00%, #FFFFFF66 54.00%, #FFFFFF00 100.00%",
212
+ "gradient-stops-shimmer-magic": "#FEF0E700 0.00%, #FEF0E78A 46.00%, #FEF0E78A 54.00%, #FEF0E700 100.00%",
213
+ "gradient-stops-fade-neutral": "#FFFFFF 0.00%, #FFFFFF00 100.00%",
214
+ "gradient-stops-glow-magic": "#FEF6F7 0.00%, #FEF0E7 80.00%, #F9F7F5 100.00%",
215
+ "gradient-stops-glow-magic-pressed": "#FBF0F2 0.00%, #FFE8DB 80.00%, #F5F2EF 100.00%",
216
+ "gradient-stops-highlight-magic": "#FF6600 20.00%, #D25ACA 80.00%"
217
+ },
218
+ backgroundImage: {
219
+ "shimmer-neutral-to-t": "linear-gradient(to top, #FFFFFF00 0.00%, #FFFFFF66 46.00%, #FFFFFF66 54.00%, #FFFFFF00 100.00%)",
220
+ "shimmer-neutral-to-tr": "linear-gradient(to top right, #FFFFFF00 0.00%, #FFFFFF66 46.00%, #FFFFFF66 54.00%, #FFFFFF00 100.00%)",
221
+ "shimmer-neutral-to-r": "linear-gradient(to right, #FFFFFF00 0.00%, #FFFFFF66 46.00%, #FFFFFF66 54.00%, #FFFFFF00 100.00%)",
222
+ "shimmer-neutral-to-br": "linear-gradient(to bottom right, #FFFFFF00 0.00%, #FFFFFF66 46.00%, #FFFFFF66 54.00%, #FFFFFF00 100.00%)",
223
+ "shimmer-neutral-to-b": "linear-gradient(to bottom, #FFFFFF00 0.00%, #FFFFFF66 46.00%, #FFFFFF66 54.00%, #FFFFFF00 100.00%)",
224
+ "shimmer-neutral-to-bl": "linear-gradient(to bottom left, #FFFFFF00 0.00%, #FFFFFF66 46.00%, #FFFFFF66 54.00%, #FFFFFF00 100.00%)",
225
+ "shimmer-neutral-to-l": "linear-gradient(to left, #FFFFFF00 0.00%, #FFFFFF66 46.00%, #FFFFFF66 54.00%, #FFFFFF00 100.00%)",
226
+ "shimmer-neutral-to-tl": "linear-gradient(to top left, #FFFFFF00 0.00%, #FFFFFF66 46.00%, #FFFFFF66 54.00%, #FFFFFF00 100.00%)",
227
+ "shimmer-magic-to-t": "linear-gradient(to top, #FEF0E700 0.00%, #FEF0E78A 46.00%, #FEF0E78A 54.00%, #FEF0E700 100.00%)",
228
+ "shimmer-magic-to-tr": "linear-gradient(to top right, #FEF0E700 0.00%, #FEF0E78A 46.00%, #FEF0E78A 54.00%, #FEF0E700 100.00%)",
229
+ "shimmer-magic-to-r": "linear-gradient(to right, #FEF0E700 0.00%, #FEF0E78A 46.00%, #FEF0E78A 54.00%, #FEF0E700 100.00%)",
230
+ "shimmer-magic-to-br": "linear-gradient(to bottom right, #FEF0E700 0.00%, #FEF0E78A 46.00%, #FEF0E78A 54.00%, #FEF0E700 100.00%)",
231
+ "shimmer-magic-to-b": "linear-gradient(to bottom, #FEF0E700 0.00%, #FEF0E78A 46.00%, #FEF0E78A 54.00%, #FEF0E700 100.00%)",
232
+ "shimmer-magic-to-bl": "linear-gradient(to bottom left, #FEF0E700 0.00%, #FEF0E78A 46.00%, #FEF0E78A 54.00%, #FEF0E700 100.00%)",
233
+ "shimmer-magic-to-l": "linear-gradient(to left, #FEF0E700 0.00%, #FEF0E78A 46.00%, #FEF0E78A 54.00%, #FEF0E700 100.00%)",
234
+ "shimmer-magic-to-tl": "linear-gradient(to top left, #FEF0E700 0.00%, #FEF0E78A 46.00%, #FEF0E78A 54.00%, #FEF0E700 100.00%)",
235
+ "fade-neutral-to-t": "linear-gradient(to top, #FFFFFF 0.00%, #FFFFFF00 100.00%)",
236
+ "fade-neutral-to-tr": "linear-gradient(to top right, #FFFFFF 0.00%, #FFFFFF00 100.00%)",
237
+ "fade-neutral-to-r": "linear-gradient(to right, #FFFFFF 0.00%, #FFFFFF00 100.00%)",
238
+ "fade-neutral-to-br": "linear-gradient(to bottom right, #FFFFFF 0.00%, #FFFFFF00 100.00%)",
239
+ "fade-neutral-to-b": "linear-gradient(to bottom, #FFFFFF 0.00%, #FFFFFF00 100.00%)",
240
+ "fade-neutral-to-bl": "linear-gradient(to bottom left, #FFFFFF 0.00%, #FFFFFF00 100.00%)",
241
+ "fade-neutral-to-l": "linear-gradient(to left, #FFFFFF 0.00%, #FFFFFF00 100.00%)",
242
+ "fade-neutral-to-tl": "linear-gradient(to top left, #FFFFFF 0.00%, #FFFFFF00 100.00%)",
243
+ "glow-magic-to-t": "linear-gradient(to top, #FEF6F7 0.00%, #FEF0E7 80.00%, #F9F7F5 100.00%)",
244
+ "glow-magic-to-tr": "linear-gradient(to top right, #FEF6F7 0.00%, #FEF0E7 80.00%, #F9F7F5 100.00%)",
245
+ "glow-magic-to-r": "linear-gradient(to right, #FEF6F7 0.00%, #FEF0E7 80.00%, #F9F7F5 100.00%)",
246
+ "glow-magic-to-br": "linear-gradient(to bottom right, #FEF6F7 0.00%, #FEF0E7 80.00%, #F9F7F5 100.00%)",
247
+ "glow-magic-to-b": "linear-gradient(to bottom, #FEF6F7 0.00%, #FEF0E7 80.00%, #F9F7F5 100.00%)",
248
+ "glow-magic-to-bl": "linear-gradient(to bottom left, #FEF6F7 0.00%, #FEF0E7 80.00%, #F9F7F5 100.00%)",
249
+ "glow-magic-to-l": "linear-gradient(to left, #FEF6F7 0.00%, #FEF0E7 80.00%, #F9F7F5 100.00%)",
250
+ "glow-magic-to-tl": "linear-gradient(to top left, #FEF6F7 0.00%, #FEF0E7 80.00%, #F9F7F5 100.00%)",
251
+ "glow-magic-pressed-to-t": "linear-gradient(to top, #FBF0F2 0.00%, #FFE8DB 80.00%, #F5F2EF 100.00%)",
252
+ "glow-magic-pressed-to-tr": "linear-gradient(to top right, #FBF0F2 0.00%, #FFE8DB 80.00%, #F5F2EF 100.00%)",
253
+ "glow-magic-pressed-to-r": "linear-gradient(to right, #FBF0F2 0.00%, #FFE8DB 80.00%, #F5F2EF 100.00%)",
254
+ "glow-magic-pressed-to-br": "linear-gradient(to bottom right, #FBF0F2 0.00%, #FFE8DB 80.00%, #F5F2EF 100.00%)",
255
+ "glow-magic-pressed-to-b": "linear-gradient(to bottom, #FBF0F2 0.00%, #FFE8DB 80.00%, #F5F2EF 100.00%)",
256
+ "glow-magic-pressed-to-bl": "linear-gradient(to bottom left, #FBF0F2 0.00%, #FFE8DB 80.00%, #F5F2EF 100.00%)",
257
+ "glow-magic-pressed-to-l": "linear-gradient(to left, #FBF0F2 0.00%, #FFE8DB 80.00%, #F5F2EF 100.00%)",
258
+ "glow-magic-pressed-to-tl": "linear-gradient(to top left, #FBF0F2 0.00%, #FFE8DB 80.00%, #F5F2EF 100.00%)",
259
+ "highlight-magic-to-t": "linear-gradient(to top, #FF6600 20.00%, #D25ACA 80.00%)",
260
+ "highlight-magic-to-tr": "linear-gradient(to top right, #FF6600 20.00%, #D25ACA 80.00%)",
261
+ "highlight-magic-to-r": "linear-gradient(to right, #FF6600 20.00%, #D25ACA 80.00%)",
262
+ "highlight-magic-to-br": "linear-gradient(to bottom right, #FF6600 20.00%, #D25ACA 80.00%)",
263
+ "highlight-magic-to-b": "linear-gradient(to bottom, #FF6600 20.00%, #D25ACA 80.00%)",
264
+ "highlight-magic-to-bl": "linear-gradient(to bottom left, #FF6600 20.00%, #D25ACA 80.00%)",
265
+ "highlight-magic-to-l": "linear-gradient(to left, #FF6600 20.00%, #D25ACA 80.00%)",
266
+ "highlight-magic-to-tl": "linear-gradient(to top left, #FF6600 20.00%, #D25ACA 80.00%)"
195
267
  },
196
268
  typography: {
197
269
  "screen-title": {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seed-design/tailwind3-plugin",
3
- "version": "0.0.39",
3
+ "version": "0.0.41",
4
4
  "description": "Tailwind3 CSS plugin for Seed Design tokens",
5
5
  "repository": {
6
6
  "type": "git",
package/src/index.ts CHANGED
@@ -7,23 +7,48 @@ import plugin from "tailwindcss/plugin";
7
7
  * 예시:
8
8
  * - 색상: bg-bg-layer-basement, text-fg-brand, border-stroke-divider
9
9
  * - 타이포그래피: t1-regular, t1-bold, screen-title
10
+ * - 그라데이션:
11
+ * * bg-gradient-shimmer-neutral-to-r (방향성 포함)
12
+ * * bg-gradient-shimmer-neutral-[45deg] (임의 각도)
10
13
  *
11
14
  * 모든 토큰은 CSS 변수를 사용하여 다크 모드와 자동 호환됩니다.
12
15
  */
13
16
  export default plugin(
14
- ({ theme, addComponents }) => {
15
- // typography 유틸리티
16
- const typography = theme("typography");
17
- if (typography) {
18
- // matchUtilities 대신 addComponents 사용
19
- addComponents(
20
- Object.entries(typography).reduce((acc, [key, value]) => {
21
- acc[`.${key}`] = value;
22
- return acc;
23
- }, {})
24
- );
25
- }
26
-
17
+ ({ theme, addComponents, matchUtilities }) => {
18
+ // typography 유틸리티
19
+ const typography = theme("typography");
20
+ if (typography) {
21
+ addComponents(
22
+ Object.entries(typography).reduce((acc, [key, value]) => {
23
+ acc[`.${key}`] = value;
24
+ return acc;
25
+ }, {})
26
+ );
27
+ }
28
+
29
+ // gradient arbitrary value 지원
30
+ const gradientStopsForArbitrary = {
31
+ "shimmer-neutral": "#FFFFFF00 0.00%, #FFFFFF66 46.00%, #FFFFFF66 54.00%, #FFFFFF00 100.00%",
32
+ "shimmer-magic": "#FEF0E700 0.00%, #FEF0E78A 46.00%, #FEF0E78A 54.00%, #FEF0E700 100.00%",
33
+ "fade-neutral": "#FFFFFF 0.00%, #FFFFFF00 100.00%",
34
+ "glow-magic": "#FEF6F7 0.00%, #FEF0E7 80.00%, #F9F7F5 100.00%",
35
+ "glow-magic-pressed": "#FBF0F2 0.00%, #FFE8DB 80.00%, #F5F2EF 100.00%",
36
+ "highlight-magic": "#FF6600 20.00%, #D25ACA 80.00%"
37
+ };
38
+
39
+ Object.entries(gradientStopsForArbitrary).forEach(([gradientName, colorStops]) => {
40
+ matchUtilities(
41
+ {
42
+ [`bg-gradient-${gradientName}`]: (value) => ({
43
+ backgroundImage: `linear-gradient(${value}, ${colorStops})`
44
+ })
45
+ },
46
+ {
47
+ type: 'any',
48
+ values: {}
49
+ }
50
+ );
51
+ });
27
52
  },
28
53
  {
29
54
  theme: {
@@ -127,13 +152,11 @@ export default plugin(
127
152
  "fg-critical": "var(--seed-color-fg-critical)",
128
153
  "fg-disabled": "var(--seed-color-fg-disabled)",
129
154
  "fg-informative": "var(--seed-color-fg-informative)",
130
- "fg-magic": "var(--seed-color-fg-magic)",
131
155
  "fg-neutral": "var(--seed-color-fg-neutral)",
132
156
  "fg-placeholder": "var(--seed-color-fg-placeholder)",
133
157
  "fg-positive": "var(--seed-color-fg-positive)",
134
158
  "fg-critical-contrast": "var(--seed-color-fg-critical-contrast)",
135
159
  "fg-informative-contrast": "var(--seed-color-fg-informative-contrast)",
136
- "fg-magic-contrast": "var(--seed-color-fg-magic-contrast)",
137
160
  "fg-neutral-inverted": "var(--seed-color-fg-neutral-inverted)",
138
161
  "fg-neutral-muted": "var(--seed-color-fg-neutral-muted)",
139
162
  "fg-neutral-subtle": "var(--seed-color-fg-neutral-subtle)",
@@ -142,6 +165,7 @@ export default plugin(
142
165
  "bg-disabled": "var(--seed-color-bg-disabled)",
143
166
  "bg-overlay": "var(--seed-color-bg-overlay)",
144
167
  "bg-brand-solid": "var(--seed-color-bg-brand-solid)",
168
+ "bg-magic-weak": "var(--seed-color-bg-magic-weak)",
145
169
  "bg-brand-solid-pressed": "var(--seed-color-bg-brand-solid-pressed)",
146
170
  "bg-critical-solid": "var(--seed-color-bg-critical-solid)",
147
171
  "bg-critical-weak": "var(--seed-color-bg-critical-weak)",
@@ -157,10 +181,6 @@ export default plugin(
157
181
  "bg-layer-floating": "var(--seed-color-bg-layer-floating)",
158
182
  "bg-layer-default-pressed": "var(--seed-color-bg-layer-default-pressed)",
159
183
  "bg-layer-floating-pressed": "var(--seed-color-bg-layer-floating-pressed)",
160
- "bg-magic-solid": "var(--seed-color-bg-magic-solid)",
161
- "bg-magic-weak": "var(--seed-color-bg-magic-weak)",
162
- "bg-magic-solid-pressed": "var(--seed-color-bg-magic-solid-pressed)",
163
- "bg-magic-weak-pressed": "var(--seed-color-bg-magic-weak-pressed)",
164
184
  "bg-neutral-inverted": "var(--seed-color-bg-neutral-inverted)",
165
185
  "bg-neutral-solid": "var(--seed-color-bg-neutral-solid)",
166
186
  "bg-neutral-weak": "var(--seed-color-bg-neutral-weak)",
@@ -197,7 +217,63 @@ export default plugin(
197
217
  "manner-temp-l5-bg": "var(--seed-color-manner-temp-l5-bg)",
198
218
  "manner-temp-l5-text": "var(--seed-color-manner-temp-l5-text)",
199
219
  "manner-temp-l6-bg": "var(--seed-color-manner-temp-l6-bg)",
200
- "manner-temp-l6-text": "var(--seed-color-manner-temp-l6-text)"
220
+ "manner-temp-l6-text": "var(--seed-color-manner-temp-l6-text)",
221
+ "gradient-stops-shimmer-neutral": "#FFFFFF00 0.00%, #FFFFFF66 46.00%, #FFFFFF66 54.00%, #FFFFFF00 100.00%",
222
+ "gradient-stops-shimmer-magic": "#FEF0E700 0.00%, #FEF0E78A 46.00%, #FEF0E78A 54.00%, #FEF0E700 100.00%",
223
+ "gradient-stops-fade-neutral": "#FFFFFF 0.00%, #FFFFFF00 100.00%",
224
+ "gradient-stops-glow-magic": "#FEF6F7 0.00%, #FEF0E7 80.00%, #F9F7F5 100.00%",
225
+ "gradient-stops-glow-magic-pressed": "#FBF0F2 0.00%, #FFE8DB 80.00%, #F5F2EF 100.00%",
226
+ "gradient-stops-highlight-magic": "#FF6600 20.00%, #D25ACA 80.00%"
227
+ },
228
+ backgroundImage: {
229
+ "shimmer-neutral-to-t": "linear-gradient(to top, #FFFFFF00 0.00%, #FFFFFF66 46.00%, #FFFFFF66 54.00%, #FFFFFF00 100.00%)",
230
+ "shimmer-neutral-to-tr": "linear-gradient(to top right, #FFFFFF00 0.00%, #FFFFFF66 46.00%, #FFFFFF66 54.00%, #FFFFFF00 100.00%)",
231
+ "shimmer-neutral-to-r": "linear-gradient(to right, #FFFFFF00 0.00%, #FFFFFF66 46.00%, #FFFFFF66 54.00%, #FFFFFF00 100.00%)",
232
+ "shimmer-neutral-to-br": "linear-gradient(to bottom right, #FFFFFF00 0.00%, #FFFFFF66 46.00%, #FFFFFF66 54.00%, #FFFFFF00 100.00%)",
233
+ "shimmer-neutral-to-b": "linear-gradient(to bottom, #FFFFFF00 0.00%, #FFFFFF66 46.00%, #FFFFFF66 54.00%, #FFFFFF00 100.00%)",
234
+ "shimmer-neutral-to-bl": "linear-gradient(to bottom left, #FFFFFF00 0.00%, #FFFFFF66 46.00%, #FFFFFF66 54.00%, #FFFFFF00 100.00%)",
235
+ "shimmer-neutral-to-l": "linear-gradient(to left, #FFFFFF00 0.00%, #FFFFFF66 46.00%, #FFFFFF66 54.00%, #FFFFFF00 100.00%)",
236
+ "shimmer-neutral-to-tl": "linear-gradient(to top left, #FFFFFF00 0.00%, #FFFFFF66 46.00%, #FFFFFF66 54.00%, #FFFFFF00 100.00%)",
237
+ "shimmer-magic-to-t": "linear-gradient(to top, #FEF0E700 0.00%, #FEF0E78A 46.00%, #FEF0E78A 54.00%, #FEF0E700 100.00%)",
238
+ "shimmer-magic-to-tr": "linear-gradient(to top right, #FEF0E700 0.00%, #FEF0E78A 46.00%, #FEF0E78A 54.00%, #FEF0E700 100.00%)",
239
+ "shimmer-magic-to-r": "linear-gradient(to right, #FEF0E700 0.00%, #FEF0E78A 46.00%, #FEF0E78A 54.00%, #FEF0E700 100.00%)",
240
+ "shimmer-magic-to-br": "linear-gradient(to bottom right, #FEF0E700 0.00%, #FEF0E78A 46.00%, #FEF0E78A 54.00%, #FEF0E700 100.00%)",
241
+ "shimmer-magic-to-b": "linear-gradient(to bottom, #FEF0E700 0.00%, #FEF0E78A 46.00%, #FEF0E78A 54.00%, #FEF0E700 100.00%)",
242
+ "shimmer-magic-to-bl": "linear-gradient(to bottom left, #FEF0E700 0.00%, #FEF0E78A 46.00%, #FEF0E78A 54.00%, #FEF0E700 100.00%)",
243
+ "shimmer-magic-to-l": "linear-gradient(to left, #FEF0E700 0.00%, #FEF0E78A 46.00%, #FEF0E78A 54.00%, #FEF0E700 100.00%)",
244
+ "shimmer-magic-to-tl": "linear-gradient(to top left, #FEF0E700 0.00%, #FEF0E78A 46.00%, #FEF0E78A 54.00%, #FEF0E700 100.00%)",
245
+ "fade-neutral-to-t": "linear-gradient(to top, #FFFFFF 0.00%, #FFFFFF00 100.00%)",
246
+ "fade-neutral-to-tr": "linear-gradient(to top right, #FFFFFF 0.00%, #FFFFFF00 100.00%)",
247
+ "fade-neutral-to-r": "linear-gradient(to right, #FFFFFF 0.00%, #FFFFFF00 100.00%)",
248
+ "fade-neutral-to-br": "linear-gradient(to bottom right, #FFFFFF 0.00%, #FFFFFF00 100.00%)",
249
+ "fade-neutral-to-b": "linear-gradient(to bottom, #FFFFFF 0.00%, #FFFFFF00 100.00%)",
250
+ "fade-neutral-to-bl": "linear-gradient(to bottom left, #FFFFFF 0.00%, #FFFFFF00 100.00%)",
251
+ "fade-neutral-to-l": "linear-gradient(to left, #FFFFFF 0.00%, #FFFFFF00 100.00%)",
252
+ "fade-neutral-to-tl": "linear-gradient(to top left, #FFFFFF 0.00%, #FFFFFF00 100.00%)",
253
+ "glow-magic-to-t": "linear-gradient(to top, #FEF6F7 0.00%, #FEF0E7 80.00%, #F9F7F5 100.00%)",
254
+ "glow-magic-to-tr": "linear-gradient(to top right, #FEF6F7 0.00%, #FEF0E7 80.00%, #F9F7F5 100.00%)",
255
+ "glow-magic-to-r": "linear-gradient(to right, #FEF6F7 0.00%, #FEF0E7 80.00%, #F9F7F5 100.00%)",
256
+ "glow-magic-to-br": "linear-gradient(to bottom right, #FEF6F7 0.00%, #FEF0E7 80.00%, #F9F7F5 100.00%)",
257
+ "glow-magic-to-b": "linear-gradient(to bottom, #FEF6F7 0.00%, #FEF0E7 80.00%, #F9F7F5 100.00%)",
258
+ "glow-magic-to-bl": "linear-gradient(to bottom left, #FEF6F7 0.00%, #FEF0E7 80.00%, #F9F7F5 100.00%)",
259
+ "glow-magic-to-l": "linear-gradient(to left, #FEF6F7 0.00%, #FEF0E7 80.00%, #F9F7F5 100.00%)",
260
+ "glow-magic-to-tl": "linear-gradient(to top left, #FEF6F7 0.00%, #FEF0E7 80.00%, #F9F7F5 100.00%)",
261
+ "glow-magic-pressed-to-t": "linear-gradient(to top, #FBF0F2 0.00%, #FFE8DB 80.00%, #F5F2EF 100.00%)",
262
+ "glow-magic-pressed-to-tr": "linear-gradient(to top right, #FBF0F2 0.00%, #FFE8DB 80.00%, #F5F2EF 100.00%)",
263
+ "glow-magic-pressed-to-r": "linear-gradient(to right, #FBF0F2 0.00%, #FFE8DB 80.00%, #F5F2EF 100.00%)",
264
+ "glow-magic-pressed-to-br": "linear-gradient(to bottom right, #FBF0F2 0.00%, #FFE8DB 80.00%, #F5F2EF 100.00%)",
265
+ "glow-magic-pressed-to-b": "linear-gradient(to bottom, #FBF0F2 0.00%, #FFE8DB 80.00%, #F5F2EF 100.00%)",
266
+ "glow-magic-pressed-to-bl": "linear-gradient(to bottom left, #FBF0F2 0.00%, #FFE8DB 80.00%, #F5F2EF 100.00%)",
267
+ "glow-magic-pressed-to-l": "linear-gradient(to left, #FBF0F2 0.00%, #FFE8DB 80.00%, #F5F2EF 100.00%)",
268
+ "glow-magic-pressed-to-tl": "linear-gradient(to top left, #FBF0F2 0.00%, #FFE8DB 80.00%, #F5F2EF 100.00%)",
269
+ "highlight-magic-to-t": "linear-gradient(to top, #FF6600 20.00%, #D25ACA 80.00%)",
270
+ "highlight-magic-to-tr": "linear-gradient(to top right, #FF6600 20.00%, #D25ACA 80.00%)",
271
+ "highlight-magic-to-r": "linear-gradient(to right, #FF6600 20.00%, #D25ACA 80.00%)",
272
+ "highlight-magic-to-br": "linear-gradient(to bottom right, #FF6600 20.00%, #D25ACA 80.00%)",
273
+ "highlight-magic-to-b": "linear-gradient(to bottom, #FF6600 20.00%, #D25ACA 80.00%)",
274
+ "highlight-magic-to-bl": "linear-gradient(to bottom left, #FF6600 20.00%, #D25ACA 80.00%)",
275
+ "highlight-magic-to-l": "linear-gradient(to left, #FF6600 20.00%, #D25ACA 80.00%)",
276
+ "highlight-magic-to-tl": "linear-gradient(to top left, #FF6600 20.00%, #D25ACA 80.00%)"
201
277
  },
202
278
  typography: {
203
279
  "screen-title": {
@@ -419,7 +495,7 @@ export default plugin(
419
495
  "enter-expressive": "var(--seed-timing-function-enter-expressive)",
420
496
  "exit-expressive": "var(--seed-timing-function-exit-expressive)"
421
497
  },
422
- }
423
- }
424
- }
498
+ },
499
+ },
500
+ },
425
501
  );