@seed-design/tailwind3-plugin 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.
Files changed (7) hide show
  1. package/README.md +15 -0
  2. package/lib/index.cjs +98 -10
  3. package/lib/index.d.cts +3 -0
  4. package/lib/index.d.ts +3 -0
  5. package/lib/index.js +98 -10
  6. package/package.json +1 -1
  7. package/src/index.ts +116 -24
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: {
@@ -92,11 +113,27 @@ var plugin__default = /*#__PURE__*/_interopDefault(plugin);
92
113
  "palette-red-1000": "var(--seed-color-palette-red-1000)",
93
114
  "palette-static-black": "var(--seed-color-palette-static-black)",
94
115
  "palette-static-white": "var(--seed-color-palette-static-white)",
95
- "palette-static-black-alpha-50": "var(--seed-color-palette-static-black-alpha-50)",
116
+ "palette-static-black-alpha-100": "var(--seed-color-palette-static-black-alpha-100)",
96
117
  "palette-static-black-alpha-200": "var(--seed-color-palette-static-black-alpha-200)",
118
+ "palette-static-black-alpha-300": "var(--seed-color-palette-static-black-alpha-300)",
119
+ "palette-static-black-alpha-400": "var(--seed-color-palette-static-black-alpha-400)",
97
120
  "palette-static-black-alpha-500": "var(--seed-color-palette-static-black-alpha-500)",
121
+ "palette-static-black-alpha-600": "var(--seed-color-palette-static-black-alpha-600)",
122
+ "palette-static-black-alpha-700": "var(--seed-color-palette-static-black-alpha-700)",
123
+ "palette-static-black-alpha-800": "var(--seed-color-palette-static-black-alpha-800)",
124
+ "palette-static-black-alpha-900": "var(--seed-color-palette-static-black-alpha-900)",
125
+ "palette-static-black-alpha-1000": "var(--seed-color-palette-static-black-alpha-1000)",
126
+ "palette-static-white-alpha-50": "var(--seed-color-palette-static-white-alpha-50)",
127
+ "palette-static-white-alpha-100": "var(--seed-color-palette-static-white-alpha-100)",
98
128
  "palette-static-white-alpha-200": "var(--seed-color-palette-static-white-alpha-200)",
129
+ "palette-static-white-alpha-300": "var(--seed-color-palette-static-white-alpha-300)",
130
+ "palette-static-white-alpha-400": "var(--seed-color-palette-static-white-alpha-400)",
131
+ "palette-static-white-alpha-500": "var(--seed-color-palette-static-white-alpha-500)",
132
+ "palette-static-white-alpha-600": "var(--seed-color-palette-static-white-alpha-600)",
133
+ "palette-static-white-alpha-700": "var(--seed-color-palette-static-white-alpha-700)",
99
134
  "palette-static-white-alpha-800": "var(--seed-color-palette-static-white-alpha-800)",
135
+ "palette-static-white-alpha-900": "var(--seed-color-palette-static-white-alpha-900)",
136
+ "palette-static-white-alpha-1000": "var(--seed-color-palette-static-white-alpha-1000)",
100
137
  "palette-yellow-100": "var(--seed-color-palette-yellow-100)",
101
138
  "palette-yellow-200": "var(--seed-color-palette-yellow-200)",
102
139
  "palette-yellow-300": "var(--seed-color-palette-yellow-300)",
@@ -111,13 +148,11 @@ var plugin__default = /*#__PURE__*/_interopDefault(plugin);
111
148
  "fg-critical": "var(--seed-color-fg-critical)",
112
149
  "fg-disabled": "var(--seed-color-fg-disabled)",
113
150
  "fg-informative": "var(--seed-color-fg-informative)",
114
- "fg-magic": "var(--seed-color-fg-magic)",
115
151
  "fg-neutral": "var(--seed-color-fg-neutral)",
116
152
  "fg-placeholder": "var(--seed-color-fg-placeholder)",
117
153
  "fg-positive": "var(--seed-color-fg-positive)",
118
154
  "fg-critical-contrast": "var(--seed-color-fg-critical-contrast)",
119
155
  "fg-informative-contrast": "var(--seed-color-fg-informative-contrast)",
120
- "fg-magic-contrast": "var(--seed-color-fg-magic-contrast)",
121
156
  "fg-neutral-inverted": "var(--seed-color-fg-neutral-inverted)",
122
157
  "fg-neutral-muted": "var(--seed-color-fg-neutral-muted)",
123
158
  "fg-neutral-subtle": "var(--seed-color-fg-neutral-subtle)",
@@ -126,6 +161,7 @@ var plugin__default = /*#__PURE__*/_interopDefault(plugin);
126
161
  "bg-disabled": "var(--seed-color-bg-disabled)",
127
162
  "bg-overlay": "var(--seed-color-bg-overlay)",
128
163
  "bg-brand-solid": "var(--seed-color-bg-brand-solid)",
164
+ "bg-magic-weak": "var(--seed-color-bg-magic-weak)",
129
165
  "bg-brand-solid-pressed": "var(--seed-color-bg-brand-solid-pressed)",
130
166
  "bg-critical-solid": "var(--seed-color-bg-critical-solid)",
131
167
  "bg-critical-weak": "var(--seed-color-bg-critical-weak)",
@@ -141,10 +177,6 @@ var plugin__default = /*#__PURE__*/_interopDefault(plugin);
141
177
  "bg-layer-floating": "var(--seed-color-bg-layer-floating)",
142
178
  "bg-layer-default-pressed": "var(--seed-color-bg-layer-default-pressed)",
143
179
  "bg-layer-floating-pressed": "var(--seed-color-bg-layer-floating-pressed)",
144
- "bg-magic-solid": "var(--seed-color-bg-magic-solid)",
145
- "bg-magic-weak": "var(--seed-color-bg-magic-weak)",
146
- "bg-magic-solid-pressed": "var(--seed-color-bg-magic-solid-pressed)",
147
- "bg-magic-weak-pressed": "var(--seed-color-bg-magic-weak-pressed)",
148
180
  "bg-neutral-inverted": "var(--seed-color-bg-neutral-inverted)",
149
181
  "bg-neutral-solid": "var(--seed-color-bg-neutral-solid)",
150
182
  "bg-neutral-weak": "var(--seed-color-bg-neutral-weak)",
@@ -181,7 +213,63 @@ var plugin__default = /*#__PURE__*/_interopDefault(plugin);
181
213
  "manner-temp-l5-bg": "var(--seed-color-manner-temp-l5-bg)",
182
214
  "manner-temp-l5-text": "var(--seed-color-manner-temp-l5-text)",
183
215
  "manner-temp-l6-bg": "var(--seed-color-manner-temp-l6-bg)",
184
- "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%)"
185
273
  },
186
274
  typography: {
187
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: {
@@ -86,11 +107,27 @@ import plugin from 'tailwindcss/plugin';
86
107
  "palette-red-1000": "var(--seed-color-palette-red-1000)",
87
108
  "palette-static-black": "var(--seed-color-palette-static-black)",
88
109
  "palette-static-white": "var(--seed-color-palette-static-white)",
89
- "palette-static-black-alpha-50": "var(--seed-color-palette-static-black-alpha-50)",
110
+ "palette-static-black-alpha-100": "var(--seed-color-palette-static-black-alpha-100)",
90
111
  "palette-static-black-alpha-200": "var(--seed-color-palette-static-black-alpha-200)",
112
+ "palette-static-black-alpha-300": "var(--seed-color-palette-static-black-alpha-300)",
113
+ "palette-static-black-alpha-400": "var(--seed-color-palette-static-black-alpha-400)",
91
114
  "palette-static-black-alpha-500": "var(--seed-color-palette-static-black-alpha-500)",
115
+ "palette-static-black-alpha-600": "var(--seed-color-palette-static-black-alpha-600)",
116
+ "palette-static-black-alpha-700": "var(--seed-color-palette-static-black-alpha-700)",
117
+ "palette-static-black-alpha-800": "var(--seed-color-palette-static-black-alpha-800)",
118
+ "palette-static-black-alpha-900": "var(--seed-color-palette-static-black-alpha-900)",
119
+ "palette-static-black-alpha-1000": "var(--seed-color-palette-static-black-alpha-1000)",
120
+ "palette-static-white-alpha-50": "var(--seed-color-palette-static-white-alpha-50)",
121
+ "palette-static-white-alpha-100": "var(--seed-color-palette-static-white-alpha-100)",
92
122
  "palette-static-white-alpha-200": "var(--seed-color-palette-static-white-alpha-200)",
123
+ "palette-static-white-alpha-300": "var(--seed-color-palette-static-white-alpha-300)",
124
+ "palette-static-white-alpha-400": "var(--seed-color-palette-static-white-alpha-400)",
125
+ "palette-static-white-alpha-500": "var(--seed-color-palette-static-white-alpha-500)",
126
+ "palette-static-white-alpha-600": "var(--seed-color-palette-static-white-alpha-600)",
127
+ "palette-static-white-alpha-700": "var(--seed-color-palette-static-white-alpha-700)",
93
128
  "palette-static-white-alpha-800": "var(--seed-color-palette-static-white-alpha-800)",
129
+ "palette-static-white-alpha-900": "var(--seed-color-palette-static-white-alpha-900)",
130
+ "palette-static-white-alpha-1000": "var(--seed-color-palette-static-white-alpha-1000)",
94
131
  "palette-yellow-100": "var(--seed-color-palette-yellow-100)",
95
132
  "palette-yellow-200": "var(--seed-color-palette-yellow-200)",
96
133
  "palette-yellow-300": "var(--seed-color-palette-yellow-300)",
@@ -105,13 +142,11 @@ import plugin from 'tailwindcss/plugin';
105
142
  "fg-critical": "var(--seed-color-fg-critical)",
106
143
  "fg-disabled": "var(--seed-color-fg-disabled)",
107
144
  "fg-informative": "var(--seed-color-fg-informative)",
108
- "fg-magic": "var(--seed-color-fg-magic)",
109
145
  "fg-neutral": "var(--seed-color-fg-neutral)",
110
146
  "fg-placeholder": "var(--seed-color-fg-placeholder)",
111
147
  "fg-positive": "var(--seed-color-fg-positive)",
112
148
  "fg-critical-contrast": "var(--seed-color-fg-critical-contrast)",
113
149
  "fg-informative-contrast": "var(--seed-color-fg-informative-contrast)",
114
- "fg-magic-contrast": "var(--seed-color-fg-magic-contrast)",
115
150
  "fg-neutral-inverted": "var(--seed-color-fg-neutral-inverted)",
116
151
  "fg-neutral-muted": "var(--seed-color-fg-neutral-muted)",
117
152
  "fg-neutral-subtle": "var(--seed-color-fg-neutral-subtle)",
@@ -120,6 +155,7 @@ import plugin from 'tailwindcss/plugin';
120
155
  "bg-disabled": "var(--seed-color-bg-disabled)",
121
156
  "bg-overlay": "var(--seed-color-bg-overlay)",
122
157
  "bg-brand-solid": "var(--seed-color-bg-brand-solid)",
158
+ "bg-magic-weak": "var(--seed-color-bg-magic-weak)",
123
159
  "bg-brand-solid-pressed": "var(--seed-color-bg-brand-solid-pressed)",
124
160
  "bg-critical-solid": "var(--seed-color-bg-critical-solid)",
125
161
  "bg-critical-weak": "var(--seed-color-bg-critical-weak)",
@@ -135,10 +171,6 @@ import plugin from 'tailwindcss/plugin';
135
171
  "bg-layer-floating": "var(--seed-color-bg-layer-floating)",
136
172
  "bg-layer-default-pressed": "var(--seed-color-bg-layer-default-pressed)",
137
173
  "bg-layer-floating-pressed": "var(--seed-color-bg-layer-floating-pressed)",
138
- "bg-magic-solid": "var(--seed-color-bg-magic-solid)",
139
- "bg-magic-weak": "var(--seed-color-bg-magic-weak)",
140
- "bg-magic-solid-pressed": "var(--seed-color-bg-magic-solid-pressed)",
141
- "bg-magic-weak-pressed": "var(--seed-color-bg-magic-weak-pressed)",
142
174
  "bg-neutral-inverted": "var(--seed-color-bg-neutral-inverted)",
143
175
  "bg-neutral-solid": "var(--seed-color-bg-neutral-solid)",
144
176
  "bg-neutral-weak": "var(--seed-color-bg-neutral-weak)",
@@ -175,7 +207,63 @@ import plugin from 'tailwindcss/plugin';
175
207
  "manner-temp-l5-bg": "var(--seed-color-manner-temp-l5-bg)",
176
208
  "manner-temp-l5-text": "var(--seed-color-manner-temp-l5-text)",
177
209
  "manner-temp-l6-bg": "var(--seed-color-manner-temp-l6-bg)",
178
- "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%)"
179
267
  },
180
268
  typography: {
181
269
  "screen-title": {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seed-design/tailwind3-plugin",
3
- "version": "0.0.21",
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: {
@@ -92,11 +117,27 @@ export default plugin(
92
117
  "palette-red-1000": "var(--seed-color-palette-red-1000)",
93
118
  "palette-static-black": "var(--seed-color-palette-static-black)",
94
119
  "palette-static-white": "var(--seed-color-palette-static-white)",
95
- "palette-static-black-alpha-50": "var(--seed-color-palette-static-black-alpha-50)",
120
+ "palette-static-black-alpha-100": "var(--seed-color-palette-static-black-alpha-100)",
96
121
  "palette-static-black-alpha-200": "var(--seed-color-palette-static-black-alpha-200)",
122
+ "palette-static-black-alpha-300": "var(--seed-color-palette-static-black-alpha-300)",
123
+ "palette-static-black-alpha-400": "var(--seed-color-palette-static-black-alpha-400)",
97
124
  "palette-static-black-alpha-500": "var(--seed-color-palette-static-black-alpha-500)",
125
+ "palette-static-black-alpha-600": "var(--seed-color-palette-static-black-alpha-600)",
126
+ "palette-static-black-alpha-700": "var(--seed-color-palette-static-black-alpha-700)",
127
+ "palette-static-black-alpha-800": "var(--seed-color-palette-static-black-alpha-800)",
128
+ "palette-static-black-alpha-900": "var(--seed-color-palette-static-black-alpha-900)",
129
+ "palette-static-black-alpha-1000": "var(--seed-color-palette-static-black-alpha-1000)",
130
+ "palette-static-white-alpha-50": "var(--seed-color-palette-static-white-alpha-50)",
131
+ "palette-static-white-alpha-100": "var(--seed-color-palette-static-white-alpha-100)",
98
132
  "palette-static-white-alpha-200": "var(--seed-color-palette-static-white-alpha-200)",
133
+ "palette-static-white-alpha-300": "var(--seed-color-palette-static-white-alpha-300)",
134
+ "palette-static-white-alpha-400": "var(--seed-color-palette-static-white-alpha-400)",
135
+ "palette-static-white-alpha-500": "var(--seed-color-palette-static-white-alpha-500)",
136
+ "palette-static-white-alpha-600": "var(--seed-color-palette-static-white-alpha-600)",
137
+ "palette-static-white-alpha-700": "var(--seed-color-palette-static-white-alpha-700)",
99
138
  "palette-static-white-alpha-800": "var(--seed-color-palette-static-white-alpha-800)",
139
+ "palette-static-white-alpha-900": "var(--seed-color-palette-static-white-alpha-900)",
140
+ "palette-static-white-alpha-1000": "var(--seed-color-palette-static-white-alpha-1000)",
100
141
  "palette-yellow-100": "var(--seed-color-palette-yellow-100)",
101
142
  "palette-yellow-200": "var(--seed-color-palette-yellow-200)",
102
143
  "palette-yellow-300": "var(--seed-color-palette-yellow-300)",
@@ -111,13 +152,11 @@ export default plugin(
111
152
  "fg-critical": "var(--seed-color-fg-critical)",
112
153
  "fg-disabled": "var(--seed-color-fg-disabled)",
113
154
  "fg-informative": "var(--seed-color-fg-informative)",
114
- "fg-magic": "var(--seed-color-fg-magic)",
115
155
  "fg-neutral": "var(--seed-color-fg-neutral)",
116
156
  "fg-placeholder": "var(--seed-color-fg-placeholder)",
117
157
  "fg-positive": "var(--seed-color-fg-positive)",
118
158
  "fg-critical-contrast": "var(--seed-color-fg-critical-contrast)",
119
159
  "fg-informative-contrast": "var(--seed-color-fg-informative-contrast)",
120
- "fg-magic-contrast": "var(--seed-color-fg-magic-contrast)",
121
160
  "fg-neutral-inverted": "var(--seed-color-fg-neutral-inverted)",
122
161
  "fg-neutral-muted": "var(--seed-color-fg-neutral-muted)",
123
162
  "fg-neutral-subtle": "var(--seed-color-fg-neutral-subtle)",
@@ -126,6 +165,7 @@ export default plugin(
126
165
  "bg-disabled": "var(--seed-color-bg-disabled)",
127
166
  "bg-overlay": "var(--seed-color-bg-overlay)",
128
167
  "bg-brand-solid": "var(--seed-color-bg-brand-solid)",
168
+ "bg-magic-weak": "var(--seed-color-bg-magic-weak)",
129
169
  "bg-brand-solid-pressed": "var(--seed-color-bg-brand-solid-pressed)",
130
170
  "bg-critical-solid": "var(--seed-color-bg-critical-solid)",
131
171
  "bg-critical-weak": "var(--seed-color-bg-critical-weak)",
@@ -141,10 +181,6 @@ export default plugin(
141
181
  "bg-layer-floating": "var(--seed-color-bg-layer-floating)",
142
182
  "bg-layer-default-pressed": "var(--seed-color-bg-layer-default-pressed)",
143
183
  "bg-layer-floating-pressed": "var(--seed-color-bg-layer-floating-pressed)",
144
- "bg-magic-solid": "var(--seed-color-bg-magic-solid)",
145
- "bg-magic-weak": "var(--seed-color-bg-magic-weak)",
146
- "bg-magic-solid-pressed": "var(--seed-color-bg-magic-solid-pressed)",
147
- "bg-magic-weak-pressed": "var(--seed-color-bg-magic-weak-pressed)",
148
184
  "bg-neutral-inverted": "var(--seed-color-bg-neutral-inverted)",
149
185
  "bg-neutral-solid": "var(--seed-color-bg-neutral-solid)",
150
186
  "bg-neutral-weak": "var(--seed-color-bg-neutral-weak)",
@@ -181,7 +217,63 @@ export default plugin(
181
217
  "manner-temp-l5-bg": "var(--seed-color-manner-temp-l5-bg)",
182
218
  "manner-temp-l5-text": "var(--seed-color-manner-temp-l5-text)",
183
219
  "manner-temp-l6-bg": "var(--seed-color-manner-temp-l6-bg)",
184
- "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%)"
185
277
  },
186
278
  typography: {
187
279
  "screen-title": {
@@ -403,7 +495,7 @@ export default plugin(
403
495
  "enter-expressive": "var(--seed-timing-function-enter-expressive)",
404
496
  "exit-expressive": "var(--seed-timing-function-exit-expressive)"
405
497
  },
406
- }
407
- }
408
- }
498
+ },
499
+ },
500
+ },
409
501
  );