@seed-design/react 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.
- package/lib/components/Text/Text.cjs +3 -1
- package/lib/components/Text/Text.d.ts.map +1 -1
- package/lib/components/Text/Text.js +3 -1
- package/lib/utils/styled.cjs +36 -1
- package/lib/utils/styled.d.ts +16 -2
- package/lib/utils/styled.d.ts.map +1 -1
- package/lib/utils/styled.js +36 -1
- package/package.json +4 -4
- package/src/components/Text/Text.tsx +3 -1
- package/src/utils/styled.tsx +84 -3
|
@@ -52,6 +52,7 @@ const Text = React.forwardRef(
|
|
|
52
52
|
lineHeight,
|
|
53
53
|
fontWeight,
|
|
54
54
|
maxLines,
|
|
55
|
+
textDecorationLine,
|
|
55
56
|
children,
|
|
56
57
|
className,
|
|
57
58
|
style,
|
|
@@ -61,9 +62,10 @@ const Text = React.forwardRef(
|
|
|
61
62
|
const textClassName = React.useMemo(
|
|
62
63
|
() => text.text({
|
|
63
64
|
textStyle,
|
|
65
|
+
textDecorationLine,
|
|
64
66
|
maxLines: mapMaxLines(maxLines)
|
|
65
67
|
}),
|
|
66
|
-
[textStyle, maxLines]
|
|
68
|
+
[textStyle, textDecorationLine, maxLines]
|
|
67
69
|
);
|
|
68
70
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
69
71
|
Comp,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,EAEL,KAAK,QAAQ,EACb,KAAK,UAAU,EACf,KAAK,UAAU,EACf,KAAK,aAAa,EAClB,KAAK,kBAAkB,EACxB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAoCpC,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,EACxC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACvC;;;OAGG;IACH,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAEhG;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,GAAG,kBAAkB,CAAC;IAE3C;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IAExB;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IAExB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC;AAYD,eAAO,MAAM,IAAI,
|
|
1
|
+
{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,EAEL,KAAK,QAAQ,EACb,KAAK,UAAU,EACf,KAAK,UAAU,EACf,KAAK,aAAa,EAClB,KAAK,kBAAkB,EACxB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAoCpC,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,EACxC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACvC;;;OAGG;IACH,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAEhG;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,GAAG,kBAAkB,CAAC;IAE3C;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IAExB;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IAExB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC;AAYD,eAAO,MAAM,IAAI,mFAmDhB,CAAC"}
|
|
@@ -48,6 +48,7 @@ const Text = forwardRef(
|
|
|
48
48
|
lineHeight,
|
|
49
49
|
fontWeight,
|
|
50
50
|
maxLines,
|
|
51
|
+
textDecorationLine,
|
|
51
52
|
children,
|
|
52
53
|
className,
|
|
53
54
|
style,
|
|
@@ -57,9 +58,10 @@ const Text = forwardRef(
|
|
|
57
58
|
const textClassName = useMemo(
|
|
58
59
|
() => text({
|
|
59
60
|
textStyle,
|
|
61
|
+
textDecorationLine,
|
|
60
62
|
maxLines: mapMaxLines(maxLines)
|
|
61
63
|
}),
|
|
62
|
-
[textStyle, maxLines]
|
|
64
|
+
[textStyle, textDecorationLine, maxLines]
|
|
63
65
|
);
|
|
64
66
|
return /* @__PURE__ */ jsx(
|
|
65
67
|
Comp,
|
package/lib/utils/styled.cjs
CHANGED
|
@@ -39,6 +39,33 @@ function handleRadius(radius) {
|
|
|
39
39
|
}
|
|
40
40
|
return vars.vars.$radius[radius] ?? radius;
|
|
41
41
|
}
|
|
42
|
+
function handleGradientDirection(direction) {
|
|
43
|
+
if (!direction) {
|
|
44
|
+
return void 0;
|
|
45
|
+
}
|
|
46
|
+
const directionMap = {
|
|
47
|
+
"to-r": "to right",
|
|
48
|
+
"to-l": "to left",
|
|
49
|
+
"to-t": "to top",
|
|
50
|
+
"to-b": "to bottom",
|
|
51
|
+
"to-tr": "to top right",
|
|
52
|
+
"to-tl": "to top left",
|
|
53
|
+
"to-br": "to bottom right",
|
|
54
|
+
"to-bl": "to bottom left"
|
|
55
|
+
};
|
|
56
|
+
return directionMap[direction] ?? direction;
|
|
57
|
+
}
|
|
58
|
+
function handleGradient(gradientToken, direction) {
|
|
59
|
+
if (!gradientToken || !direction) {
|
|
60
|
+
return void 0;
|
|
61
|
+
}
|
|
62
|
+
const colorStops = vars.vars.$gradient[gradientToken];
|
|
63
|
+
if (!colorStops) {
|
|
64
|
+
return void 0;
|
|
65
|
+
}
|
|
66
|
+
const mappedDirection = handleGradientDirection(direction);
|
|
67
|
+
return `linear-gradient(${mappedDirection}, ${colorStops})`;
|
|
68
|
+
}
|
|
42
69
|
function handleDisplay(display) {
|
|
43
70
|
if (!display) {
|
|
44
71
|
return void 0;
|
|
@@ -131,6 +158,10 @@ function useStyleProps(props) {
|
|
|
131
158
|
const {
|
|
132
159
|
background,
|
|
133
160
|
bg,
|
|
161
|
+
bgGradient,
|
|
162
|
+
backgroundGradient,
|
|
163
|
+
bgGradientDirection,
|
|
164
|
+
backgroundGradientDirection,
|
|
134
165
|
color,
|
|
135
166
|
borderColor,
|
|
136
167
|
borderWidth,
|
|
@@ -192,9 +223,13 @@ function useStyleProps(props) {
|
|
|
192
223
|
style,
|
|
193
224
|
...restProps
|
|
194
225
|
} = props;
|
|
226
|
+
const gradientValue = handleGradient(
|
|
227
|
+
bgGradient ?? backgroundGradient,
|
|
228
|
+
bgGradientDirection ?? backgroundGradientDirection
|
|
229
|
+
);
|
|
195
230
|
return {
|
|
196
231
|
style: {
|
|
197
|
-
"--seed-box-background": handleColor(background ?? bg),
|
|
232
|
+
"--seed-box-background": handleColor(background ?? bg) ?? gradientValue,
|
|
198
233
|
"--seed-box-color": handleColor(color),
|
|
199
234
|
"--seed-box-border-color": handleColor(borderColor),
|
|
200
235
|
"--seed-box-border-width": borderWidth !== void 0 ? `${borderWidth}px` : void 0,
|
package/lib/utils/styled.d.ts
CHANGED
|
@@ -1,13 +1,27 @@
|
|
|
1
|
-
import { ScopedColorBg, ScopedColorFg, ScopedColorPalette, ScopedColorStroke, Dimension, Radius, SpacingX, SpacingY } from '@seed-design/css/vars';
|
|
1
|
+
import { ScopedColorBg, ScopedColorFg, ScopedColorPalette, ScopedColorStroke, Dimension, Radius, SpacingX, SpacingY, Gradient } from '@seed-design/css/vars';
|
|
2
2
|
import { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react';
|
|
3
3
|
export declare function handleColor(color: string | undefined): any;
|
|
4
4
|
export declare function handleDimension(dimension: string | 0 | undefined): string | undefined;
|
|
5
5
|
export interface StyleProps {
|
|
6
|
-
background?: ScopedColorBg | ScopedColorPalette | (string & {});
|
|
7
6
|
/**
|
|
8
7
|
* Shorthand for `background`.
|
|
9
8
|
*/
|
|
10
9
|
bg?: ScopedColorBg | ScopedColorPalette | (string & {});
|
|
10
|
+
background?: ScopedColorBg | ScopedColorPalette | (string & {});
|
|
11
|
+
/**
|
|
12
|
+
* Shorthand for `backgroundGradient`.
|
|
13
|
+
*/
|
|
14
|
+
bgGradient?: Gradient;
|
|
15
|
+
backgroundGradient?: Gradient;
|
|
16
|
+
/**
|
|
17
|
+
* Shorthand for `backgroundGradientDirection`.
|
|
18
|
+
* e.g. `43deg`
|
|
19
|
+
*/
|
|
20
|
+
bgGradientDirection?: "to-r" | "to-l" | "to-t" | "to-b" | "to-tr" | "to-tl" | "to-br" | "to-bl" | (string & {});
|
|
21
|
+
/**
|
|
22
|
+
* e.g. `43deg`
|
|
23
|
+
*/
|
|
24
|
+
backgroundGradientDirection?: "to-r" | "to-l" | "to-t" | "to-b" | "to-tr" | "to-tl" | "to-br" | "to-bl" | (string & {});
|
|
11
25
|
color?: ScopedColorFg | ScopedColorPalette | (string & {});
|
|
12
26
|
borderColor?: ScopedColorStroke | ScopedColorPalette | (string & {});
|
|
13
27
|
borderWidth?: 0 | 1 | (string & {});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../src/utils/styled.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EACV,aAAa,EACb,aAAa,EACb,kBAAkB,EAClB,iBAAiB,EACjB,SAAS,EACT,MAAM,EACN,QAAQ,EACR,QAAQ,EACT,MAAM,uBAAuB,CAAC;AAI/B,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,OAOpD;AAED,wBAAgB,eAAe,CAAC,SAAS,EAAE,MAAM,GAAG,CAAC,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAiBrF;
|
|
1
|
+
{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../src/utils/styled.tsx"],"names":[],"mappings":"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"}
|
package/lib/utils/styled.js
CHANGED
|
@@ -35,6 +35,33 @@ function handleRadius(radius) {
|
|
|
35
35
|
}
|
|
36
36
|
return vars.$radius[radius] ?? radius;
|
|
37
37
|
}
|
|
38
|
+
function handleGradientDirection(direction) {
|
|
39
|
+
if (!direction) {
|
|
40
|
+
return void 0;
|
|
41
|
+
}
|
|
42
|
+
const directionMap = {
|
|
43
|
+
"to-r": "to right",
|
|
44
|
+
"to-l": "to left",
|
|
45
|
+
"to-t": "to top",
|
|
46
|
+
"to-b": "to bottom",
|
|
47
|
+
"to-tr": "to top right",
|
|
48
|
+
"to-tl": "to top left",
|
|
49
|
+
"to-br": "to bottom right",
|
|
50
|
+
"to-bl": "to bottom left"
|
|
51
|
+
};
|
|
52
|
+
return directionMap[direction] ?? direction;
|
|
53
|
+
}
|
|
54
|
+
function handleGradient(gradientToken, direction) {
|
|
55
|
+
if (!gradientToken || !direction) {
|
|
56
|
+
return void 0;
|
|
57
|
+
}
|
|
58
|
+
const colorStops = vars.$gradient[gradientToken];
|
|
59
|
+
if (!colorStops) {
|
|
60
|
+
return void 0;
|
|
61
|
+
}
|
|
62
|
+
const mappedDirection = handleGradientDirection(direction);
|
|
63
|
+
return `linear-gradient(${mappedDirection}, ${colorStops})`;
|
|
64
|
+
}
|
|
38
65
|
function handleDisplay(display) {
|
|
39
66
|
if (!display) {
|
|
40
67
|
return void 0;
|
|
@@ -127,6 +154,10 @@ function useStyleProps(props) {
|
|
|
127
154
|
const {
|
|
128
155
|
background,
|
|
129
156
|
bg,
|
|
157
|
+
bgGradient,
|
|
158
|
+
backgroundGradient,
|
|
159
|
+
bgGradientDirection,
|
|
160
|
+
backgroundGradientDirection,
|
|
130
161
|
color,
|
|
131
162
|
borderColor,
|
|
132
163
|
borderWidth,
|
|
@@ -188,9 +219,13 @@ function useStyleProps(props) {
|
|
|
188
219
|
style,
|
|
189
220
|
...restProps
|
|
190
221
|
} = props;
|
|
222
|
+
const gradientValue = handleGradient(
|
|
223
|
+
bgGradient ?? backgroundGradient,
|
|
224
|
+
bgGradientDirection ?? backgroundGradientDirection
|
|
225
|
+
);
|
|
191
226
|
return {
|
|
192
227
|
style: {
|
|
193
|
-
"--seed-box-background": handleColor(background ?? bg),
|
|
228
|
+
"--seed-box-background": handleColor(background ?? bg) ?? gradientValue,
|
|
194
229
|
"--seed-box-color": handleColor(color),
|
|
195
230
|
"--seed-box-border-color": handleColor(borderColor),
|
|
196
231
|
"--seed-box-border-width": borderWidth !== void 0 ? `${borderWidth}px` : void 0,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@seed-design/react",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.41",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "git+https://github.com/daangn/seed-design.git",
|
|
@@ -57,17 +57,17 @@
|
|
|
57
57
|
"clsx": "^2.1.1"
|
|
58
58
|
},
|
|
59
59
|
"peerDependencies": {
|
|
60
|
-
"@seed-design/css": "0.0.
|
|
60
|
+
"@seed-design/css": "0.0.41",
|
|
61
61
|
"react": ">=18.0.0",
|
|
62
62
|
"react-dom": ">=18.0.0"
|
|
63
63
|
},
|
|
64
64
|
"devDependencies": {
|
|
65
|
-
"@seed-design/css": "0.0.
|
|
65
|
+
"@seed-design/css": "0.0.41",
|
|
66
66
|
"@vitejs/plugin-react": "^4.4.1",
|
|
67
67
|
"globby": "^14.1.0",
|
|
68
68
|
"react": "^19.1.0",
|
|
69
69
|
"react-dom": "^19.1.0",
|
|
70
|
-
"vite": "^
|
|
70
|
+
"vite": "^7.0.0",
|
|
71
71
|
"vite-plugin-dts": "^4.5.3"
|
|
72
72
|
},
|
|
73
73
|
"publishConfig": {
|
|
@@ -104,6 +104,7 @@ export const Text = forwardRef<HTMLSpanElement, TextProps>(
|
|
|
104
104
|
lineHeight,
|
|
105
105
|
fontWeight,
|
|
106
106
|
maxLines,
|
|
107
|
+
textDecorationLine,
|
|
107
108
|
children,
|
|
108
109
|
className,
|
|
109
110
|
style,
|
|
@@ -116,9 +117,10 @@ export const Text = forwardRef<HTMLSpanElement, TextProps>(
|
|
|
116
117
|
() =>
|
|
117
118
|
text({
|
|
118
119
|
textStyle,
|
|
120
|
+
textDecorationLine,
|
|
119
121
|
maxLines: mapMaxLines(maxLines),
|
|
120
122
|
}),
|
|
121
|
-
[textStyle, maxLines],
|
|
123
|
+
[textStyle, textDecorationLine, maxLines],
|
|
122
124
|
);
|
|
123
125
|
|
|
124
126
|
return (
|
package/src/utils/styled.tsx
CHANGED
|
@@ -7,6 +7,7 @@ import type {
|
|
|
7
7
|
Radius,
|
|
8
8
|
SpacingX,
|
|
9
9
|
SpacingY,
|
|
10
|
+
Gradient,
|
|
10
11
|
} from "@seed-design/css/vars";
|
|
11
12
|
import { vars } from "@seed-design/css/vars";
|
|
12
13
|
import { forwardRef } from "react";
|
|
@@ -58,6 +59,41 @@ function handleRadius(radius: string | 0 | undefined) {
|
|
|
58
59
|
return vars.$radius[radius] ?? radius;
|
|
59
60
|
}
|
|
60
61
|
|
|
62
|
+
function handleGradientDirection(direction: string | undefined) {
|
|
63
|
+
if (!direction) {
|
|
64
|
+
return undefined;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
const directionMap: Record<string, string> = {
|
|
68
|
+
"to-r": "to right",
|
|
69
|
+
"to-l": "to left",
|
|
70
|
+
"to-t": "to top",
|
|
71
|
+
"to-b": "to bottom",
|
|
72
|
+
"to-tr": "to top right",
|
|
73
|
+
"to-tl": "to top left",
|
|
74
|
+
"to-br": "to bottom right",
|
|
75
|
+
"to-bl": "to bottom left",
|
|
76
|
+
};
|
|
77
|
+
|
|
78
|
+
return directionMap[direction] ?? direction;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
function handleGradient(gradientToken: string | undefined, direction: string | undefined) {
|
|
82
|
+
if (!gradientToken || !direction) {
|
|
83
|
+
return undefined;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
// @ts-ignore
|
|
87
|
+
const colorStops = vars.$gradient[gradientToken];
|
|
88
|
+
if (!colorStops) {
|
|
89
|
+
return undefined;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
const mappedDirection = handleGradientDirection(direction);
|
|
93
|
+
|
|
94
|
+
return `linear-gradient(${mappedDirection}, ${colorStops})`;
|
|
95
|
+
}
|
|
96
|
+
|
|
61
97
|
function handleDisplay(display: string | undefined) {
|
|
62
98
|
if (!display) {
|
|
63
99
|
return undefined;
|
|
@@ -161,13 +197,49 @@ function handleAlignItems(alignItems: string | undefined) {
|
|
|
161
197
|
}
|
|
162
198
|
|
|
163
199
|
export interface StyleProps {
|
|
164
|
-
background?: ScopedColorBg | ScopedColorPalette | (string & {});
|
|
165
|
-
|
|
166
200
|
/**
|
|
167
201
|
* Shorthand for `background`.
|
|
168
202
|
*/
|
|
169
203
|
bg?: ScopedColorBg | ScopedColorPalette | (string & {});
|
|
170
204
|
|
|
205
|
+
background?: ScopedColorBg | ScopedColorPalette | (string & {});
|
|
206
|
+
|
|
207
|
+
/**
|
|
208
|
+
* Shorthand for `backgroundGradient`.
|
|
209
|
+
*/
|
|
210
|
+
bgGradient?: Gradient;
|
|
211
|
+
|
|
212
|
+
backgroundGradient?: Gradient;
|
|
213
|
+
|
|
214
|
+
/**
|
|
215
|
+
* Shorthand for `backgroundGradientDirection`.
|
|
216
|
+
* e.g. `43deg`
|
|
217
|
+
*/
|
|
218
|
+
bgGradientDirection?:
|
|
219
|
+
| "to-r"
|
|
220
|
+
| "to-l"
|
|
221
|
+
| "to-t"
|
|
222
|
+
| "to-b"
|
|
223
|
+
| "to-tr"
|
|
224
|
+
| "to-tl"
|
|
225
|
+
| "to-br"
|
|
226
|
+
| "to-bl"
|
|
227
|
+
| (string & {});
|
|
228
|
+
|
|
229
|
+
/**
|
|
230
|
+
* e.g. `43deg`
|
|
231
|
+
*/
|
|
232
|
+
backgroundGradientDirection?:
|
|
233
|
+
| "to-r"
|
|
234
|
+
| "to-l"
|
|
235
|
+
| "to-t"
|
|
236
|
+
| "to-b"
|
|
237
|
+
| "to-tr"
|
|
238
|
+
| "to-tl"
|
|
239
|
+
| "to-br"
|
|
240
|
+
| "to-bl"
|
|
241
|
+
| (string & {});
|
|
242
|
+
|
|
171
243
|
color?: ScopedColorFg | ScopedColorPalette | (string & {});
|
|
172
244
|
|
|
173
245
|
borderColor?: ScopedColorStroke | ScopedColorPalette | (string & {});
|
|
@@ -426,6 +498,10 @@ export function useStyleProps<T extends UseStyleProps>(
|
|
|
426
498
|
const {
|
|
427
499
|
background,
|
|
428
500
|
bg,
|
|
501
|
+
bgGradient,
|
|
502
|
+
backgroundGradient,
|
|
503
|
+
bgGradientDirection,
|
|
504
|
+
backgroundGradientDirection,
|
|
429
505
|
color,
|
|
430
506
|
borderColor,
|
|
431
507
|
borderWidth,
|
|
@@ -488,9 +564,14 @@ export function useStyleProps<T extends UseStyleProps>(
|
|
|
488
564
|
...restProps
|
|
489
565
|
} = props;
|
|
490
566
|
|
|
567
|
+
const gradientValue = handleGradient(
|
|
568
|
+
bgGradient ?? backgroundGradient,
|
|
569
|
+
bgGradientDirection ?? backgroundGradientDirection,
|
|
570
|
+
);
|
|
571
|
+
|
|
491
572
|
return {
|
|
492
573
|
style: {
|
|
493
|
-
"--seed-box-background": handleColor(background ?? bg),
|
|
574
|
+
"--seed-box-background": handleColor(background ?? bg) ?? gradientValue,
|
|
494
575
|
"--seed-box-color": handleColor(color),
|
|
495
576
|
"--seed-box-border-color": handleColor(borderColor),
|
|
496
577
|
"--seed-box-border-width": borderWidth !== undefined ? `${borderWidth}px` : undefined,
|