@seed-design/lynx-css 0.9.3 → 0.10.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 +872 -89
- package/all.min.css +1 -1
- package/base.css +2 -0
- package/base.min.css +1 -1
- package/package.json +1 -1
- package/recipes/manner-temp-badge.css +78 -0
- package/recipes/manner-temp-badge.d.ts +24 -0
- package/recipes/manner-temp-badge.mjs +51 -0
- package/recipes/manner-temp.css +52 -0
- package/recipes/manner-temp.d.ts +24 -0
- package/recipes/manner-temp.mjs +55 -0
- package/recipes/notification-badge-positioner.css +29 -0
- package/recipes/notification-badge-positioner.d.ts +26 -0
- package/recipes/notification-badge-positioner.mjs +51 -0
- package/recipes/notification-badge.css +33 -0
- package/recipes/notification-badge.d.ts +27 -0
- package/recipes/notification-badge.mjs +43 -0
- package/recipes/page-banner.css +357 -0
- package/recipes/page-banner.d.ts +36 -0
- package/recipes/page-banner.mjs +194 -0
- package/recipes/segmented-control.css +91 -0
- package/recipes/segmented-control.d.ts +36 -0
- package/recipes/segmented-control.mjs +75 -0
- package/recipes/select-box-checkmark.css +33 -0
- package/recipes/select-box-checkmark.d.ts +32 -0
- package/recipes/select-box-checkmark.mjs +63 -0
- package/recipes/select-box-group.css +10 -0
- package/recipes/select-box-group.d.ts +22 -0
- package/recipes/select-box-group.mjs +29 -0
- package/recipes/select-box.css +145 -0
- package/recipes/select-box.d.ts +40 -0
- package/recipes/select-box.mjs +108 -0
- 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