@seed-design/css 2.6.2 → 2.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/all.css +62 -61
- package/all.layered.css +62 -61
- package/all.layered.min.css +1 -1
- package/all.min.css +1 -1
- package/base.css +59 -56
- package/base.layered.css +59 -56
- package/base.layered.min.css +1 -1
- package/base.min.css +1 -1
- package/package.json +1 -1
- package/recipes/scroll-fog.css +2 -4
- package/recipes/scroll-fog.layered.css +3 -5
- package/theming/index.cjs +41 -5
- package/theming/index.mjs +41 -5
- package/vars/component/callout.d.ts +6 -2
- package/vars/component/callout.mjs +6 -2
- package/vars/component/image-frame-reaction-button.d.ts +26 -2
- package/vars/component/image-frame-reaction-button.mjs +26 -2
- package/vars/component/page-banner.d.ts +6 -2
- package/vars/component/page-banner.mjs +6 -2
- package/vars/component/scroll-fog.d.ts +69 -2
- package/vars/component/scroll-fog.mjs +69 -2
- package/vars/component/skeleton.d.ts +6 -2
- package/vars/component/skeleton.mjs +6 -2
- package/vars/component/top-navigation.d.ts +13 -1
- package/vars/component/top-navigation.mjs +13 -1
- package/vars/gradient.d.ts +2 -0
- package/vars/gradient.mjs +1 -0
|
@@ -6,7 +6,19 @@ export const vars = {
|
|
|
6
6
|
"targetSize": "var(--seed-dimension-x10)"
|
|
7
7
|
},
|
|
8
8
|
"fillIcon": {
|
|
9
|
-
"gradient":
|
|
9
|
+
"gradient": {
|
|
10
|
+
"serialized": "var(--seed-color-palette-static-black-alpha-600) 0%, var(--seed-color-palette-static-black-alpha-600) 100%",
|
|
11
|
+
"stops": [
|
|
12
|
+
{
|
|
13
|
+
"color": "var(--seed-color-palette-static-black-alpha-600)",
|
|
14
|
+
"position": 0
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"color": "var(--seed-color-palette-static-black-alpha-600)",
|
|
18
|
+
"position": 1
|
|
19
|
+
}
|
|
20
|
+
]
|
|
21
|
+
},
|
|
10
22
|
"size": "var(--seed-dimension-x6)",
|
|
11
23
|
"shadow": "0px 2px 4px 0px #00000026"
|
|
12
24
|
},
|
|
@@ -17,7 +29,19 @@ export const vars = {
|
|
|
17
29
|
},
|
|
18
30
|
"selected": {
|
|
19
31
|
"fillIcon": {
|
|
20
|
-
"gradient":
|
|
32
|
+
"gradient": {
|
|
33
|
+
"serialized": "#FF9A56 0%, #FF6600 100%",
|
|
34
|
+
"stops": [
|
|
35
|
+
{
|
|
36
|
+
"color": "#FF9A56",
|
|
37
|
+
"position": 0
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
"color": "#FF6600",
|
|
41
|
+
"position": 1
|
|
42
|
+
}
|
|
43
|
+
]
|
|
44
|
+
}
|
|
21
45
|
},
|
|
22
46
|
"lineIcon": {
|
|
23
47
|
"color": "var(--seed-color-bg-transparent)"
|
|
@@ -353,7 +353,9 @@ export declare const vars: {
|
|
|
353
353
|
"toneMagicVariantWeak": {
|
|
354
354
|
"enabled": {
|
|
355
355
|
"root": {
|
|
356
|
-
"gradient":
|
|
356
|
+
"gradient": {
|
|
357
|
+
"serialized": "var(--seed-gradient-glow-magic)"
|
|
358
|
+
}
|
|
357
359
|
},
|
|
358
360
|
/** 아이콘은 Fill 타입 사용을 권장합니다. */
|
|
359
361
|
"prefixIcon": {
|
|
@@ -374,7 +376,9 @@ export declare const vars: {
|
|
|
374
376
|
},
|
|
375
377
|
"pressed": {
|
|
376
378
|
"root": {
|
|
377
|
-
"gradient":
|
|
379
|
+
"gradient": {
|
|
380
|
+
"serialized": "var(--seed-gradient-glow-magic-pressed)"
|
|
381
|
+
}
|
|
378
382
|
}
|
|
379
383
|
}
|
|
380
384
|
}
|
|
@@ -308,7 +308,9 @@ export const vars = {
|
|
|
308
308
|
"toneMagicVariantWeak": {
|
|
309
309
|
"enabled": {
|
|
310
310
|
"root": {
|
|
311
|
-
"gradient":
|
|
311
|
+
"gradient": {
|
|
312
|
+
"serialized": "var(--seed-gradient-glow-magic)"
|
|
313
|
+
}
|
|
312
314
|
},
|
|
313
315
|
"prefixIcon": {
|
|
314
316
|
"color": "var(--seed-color-fg-neutral)"
|
|
@@ -328,7 +330,9 @@ export const vars = {
|
|
|
328
330
|
},
|
|
329
331
|
"pressed": {
|
|
330
332
|
"root": {
|
|
331
|
-
"gradient":
|
|
333
|
+
"gradient": {
|
|
334
|
+
"serialized": "var(--seed-gradient-glow-magic-pressed)"
|
|
335
|
+
}
|
|
332
336
|
}
|
|
333
337
|
}
|
|
334
338
|
}
|
|
@@ -2,8 +2,75 @@ export declare const vars: {
|
|
|
2
2
|
"base": {
|
|
3
3
|
"enabled": {
|
|
4
4
|
"root": {
|
|
5
|
-
"
|
|
6
|
-
|
|
5
|
+
"gradient": {
|
|
6
|
+
"serialized": "var(--seed-gradient-fade-mask)",
|
|
7
|
+
"stops": [
|
|
8
|
+
{
|
|
9
|
+
"color": "#00000000",
|
|
10
|
+
"position": 0
|
|
11
|
+
},
|
|
12
|
+
{
|
|
13
|
+
"color": "#00000003",
|
|
14
|
+
"position": 0.08
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"color": "#00000005",
|
|
18
|
+
"position": 0.16
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
"color": "#0000000d",
|
|
22
|
+
"position": 0.22
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"color": "#00000014",
|
|
26
|
+
"position": 0.29
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"color": "#00000021",
|
|
30
|
+
"position": 0.35
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
"color": "#0000002e",
|
|
34
|
+
"position": 0.41
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"color": "#00000040",
|
|
38
|
+
"position": 0.47
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"color": "#00000052",
|
|
42
|
+
"position": 0.53
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
"color": "#00000066",
|
|
46
|
+
"position": 0.59
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
"color": "#0000007a",
|
|
50
|
+
"position": 0.65
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"color": "#00000094",
|
|
54
|
+
"position": 0.71
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
"color": "#000000ab",
|
|
58
|
+
"position": 0.78
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
"color": "#000000c7",
|
|
62
|
+
"position": 0.84
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"color": "#000000e3",
|
|
66
|
+
"position": 0.92
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
"color": "#000000ff",
|
|
70
|
+
"position": 1
|
|
71
|
+
}
|
|
72
|
+
]
|
|
73
|
+
},
|
|
7
74
|
"size": "20px"
|
|
8
75
|
}
|
|
9
76
|
}
|
|
@@ -2,8 +2,75 @@ export const vars = {
|
|
|
2
2
|
"base": {
|
|
3
3
|
"enabled": {
|
|
4
4
|
"root": {
|
|
5
|
-
"
|
|
6
|
-
|
|
5
|
+
"gradient": {
|
|
6
|
+
"serialized": "var(--seed-gradient-fade-mask)",
|
|
7
|
+
"stops": [
|
|
8
|
+
{
|
|
9
|
+
"color": "#00000000",
|
|
10
|
+
"position": 0
|
|
11
|
+
},
|
|
12
|
+
{
|
|
13
|
+
"color": "#00000003",
|
|
14
|
+
"position": 0.08
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"color": "#00000005",
|
|
18
|
+
"position": 0.16
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
"color": "#0000000d",
|
|
22
|
+
"position": 0.22
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"color": "#00000014",
|
|
26
|
+
"position": 0.29
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"color": "#00000021",
|
|
30
|
+
"position": 0.35
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
"color": "#0000002e",
|
|
34
|
+
"position": 0.41
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"color": "#00000040",
|
|
38
|
+
"position": 0.47
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"color": "#00000052",
|
|
42
|
+
"position": 0.53
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
"color": "#00000066",
|
|
46
|
+
"position": 0.59
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
"color": "#0000007a",
|
|
50
|
+
"position": 0.65
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"color": "#00000094",
|
|
54
|
+
"position": 0.71
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
"color": "#000000ab",
|
|
58
|
+
"position": 0.78
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
"color": "#000000c7",
|
|
62
|
+
"position": 0.84
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"color": "#000000e3",
|
|
66
|
+
"position": 0.92
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
"color": "#000000ff",
|
|
70
|
+
"position": 1
|
|
71
|
+
}
|
|
72
|
+
]
|
|
73
|
+
},
|
|
7
74
|
"size": "20px"
|
|
8
75
|
}
|
|
9
76
|
}
|
|
@@ -56,7 +56,9 @@ export declare const vars: {
|
|
|
56
56
|
"color": "var(--seed-color-palette-gray-200)"
|
|
57
57
|
},
|
|
58
58
|
"shimmer": {
|
|
59
|
-
"gradient":
|
|
59
|
+
"gradient": {
|
|
60
|
+
"serialized": "var(--seed-gradient-shimmer-neutral)"
|
|
61
|
+
}
|
|
60
62
|
}
|
|
61
63
|
}
|
|
62
64
|
},
|
|
@@ -69,7 +71,9 @@ export declare const vars: {
|
|
|
69
71
|
"color": "var(--seed-color-bg-magic-weak)"
|
|
70
72
|
},
|
|
71
73
|
"shimmer": {
|
|
72
|
-
"gradient":
|
|
74
|
+
"gradient": {
|
|
75
|
+
"serialized": "var(--seed-gradient-shimmer-magic)"
|
|
76
|
+
}
|
|
73
77
|
}
|
|
74
78
|
}
|
|
75
79
|
}
|
|
@@ -41,7 +41,9 @@ export const vars = {
|
|
|
41
41
|
"color": "var(--seed-color-palette-gray-200)"
|
|
42
42
|
},
|
|
43
43
|
"shimmer": {
|
|
44
|
-
"gradient":
|
|
44
|
+
"gradient": {
|
|
45
|
+
"serialized": "var(--seed-gradient-shimmer-neutral)"
|
|
46
|
+
}
|
|
45
47
|
}
|
|
46
48
|
}
|
|
47
49
|
},
|
|
@@ -51,7 +53,9 @@ export const vars = {
|
|
|
51
53
|
"color": "var(--seed-color-bg-magic-weak)"
|
|
52
54
|
},
|
|
53
55
|
"shimmer": {
|
|
54
|
-
"gradient":
|
|
56
|
+
"gradient": {
|
|
57
|
+
"serialized": "var(--seed-gradient-shimmer-magic)"
|
|
58
|
+
}
|
|
55
59
|
}
|
|
56
60
|
}
|
|
57
61
|
}
|
|
@@ -58,7 +58,19 @@ export declare const vars: {
|
|
|
58
58
|
"toneTransparentGradientTrue": {
|
|
59
59
|
"enabled": {
|
|
60
60
|
"root": {
|
|
61
|
-
"gradient":
|
|
61
|
+
"gradient": {
|
|
62
|
+
"serialized": "#00000059 0%, #00000000 100%",
|
|
63
|
+
"stops": [
|
|
64
|
+
{
|
|
65
|
+
"color": "#00000059",
|
|
66
|
+
"position": 0
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
"color": "#00000000",
|
|
70
|
+
"position": 1
|
|
71
|
+
}
|
|
72
|
+
]
|
|
73
|
+
},
|
|
62
74
|
/** gradient가 표시될 때 하단 아래로 gradient가 확장되는 길이입니다. */
|
|
63
75
|
"bleedBottom": "var(--seed-dimension-x5)"
|
|
64
76
|
}
|
|
@@ -51,7 +51,19 @@ export const vars = {
|
|
|
51
51
|
"toneTransparentGradientTrue": {
|
|
52
52
|
"enabled": {
|
|
53
53
|
"root": {
|
|
54
|
-
"gradient":
|
|
54
|
+
"gradient": {
|
|
55
|
+
"serialized": "#00000059 0%, #00000000 100%",
|
|
56
|
+
"stops": [
|
|
57
|
+
{
|
|
58
|
+
"color": "#00000059",
|
|
59
|
+
"position": 0
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
"color": "#00000000",
|
|
63
|
+
"position": 1
|
|
64
|
+
}
|
|
65
|
+
]
|
|
66
|
+
},
|
|
55
67
|
"bleedBottom": "var(--seed-dimension-x5)"
|
|
56
68
|
}
|
|
57
69
|
}
|
package/vars/gradient.d.ts
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
/** 콘텐츠를 부드럽게 가리는 마스크용 불투명도(alpha) easing 곡선입니다. Figma에 없는 개발 전용 토큰입니다. */
|
|
2
|
+
export declare const fadeMask = "var(--seed-gradient-fade-mask)";
|
|
1
3
|
/** 반짝이는 것처럼 느껴지는 배경에 쓰이는 ai 컬러입니다. */
|
|
2
4
|
export declare const glowMagic = "var(--seed-gradient-glow-magic)";
|
|
3
5
|
/** 반짝이는 것처럼 느껴지는 배경에 쓰이는 ai 컬러의 pressed컬러입니다. */
|
package/vars/gradient.mjs
CHANGED