@seed-design/lynx-css 0.4.0 → 0.4.1
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/package.json +1 -1
- package/vars/component/floating-action-button.d.ts +1 -1
- package/vars/component/floating-action-button.mjs +1 -1
- package/vars/component/image-frame-reaction-button.d.ts +3 -2
- package/vars/component/image-frame-reaction-button.mjs +3 -2
- package/vars/component/side-panel-close-button.d.ts +6 -2
- package/vars/component/side-panel-close-button.mjs +6 -2
- package/vars/component/side-panel.d.ts +7 -4
- package/vars/component/side-panel.mjs +6 -4
package/package.json
CHANGED
|
@@ -10,9 +10,10 @@ export declare const vars: {
|
|
|
10
10
|
},
|
|
11
11
|
/** lineIcon 아래에 내려가는 하트 아이콘입니다. */
|
|
12
12
|
"fillIcon": {
|
|
13
|
-
"gradient": "var(--seed-color-palette-static-black-alpha-
|
|
13
|
+
"gradient": "var(--seed-color-palette-static-black-alpha-600) 0%, var(--seed-color-palette-static-black-alpha-600) 100%",
|
|
14
14
|
/** 보이는 버튼 크기입니다. */
|
|
15
|
-
"size": "var(--seed-dimension-x6)"
|
|
15
|
+
"size": "var(--seed-dimension-x6)",
|
|
16
|
+
"shadow": "0px 2px 4px 0px #00000026"
|
|
16
17
|
},
|
|
17
18
|
/** fillIcon 위로 올라가는 하트 아이콘입니다. */
|
|
18
19
|
"lineIcon": {
|
|
@@ -6,8 +6,9 @@ export const vars = {
|
|
|
6
6
|
"targetSize": "var(--seed-dimension-x10)"
|
|
7
7
|
},
|
|
8
8
|
"fillIcon": {
|
|
9
|
-
"gradient": "var(--seed-color-palette-static-black-alpha-
|
|
10
|
-
"size": "var(--seed-dimension-x6)"
|
|
9
|
+
"gradient": "var(--seed-color-palette-static-black-alpha-600) 0%, var(--seed-color-palette-static-black-alpha-600) 100%",
|
|
10
|
+
"size": "var(--seed-dimension-x6)",
|
|
11
|
+
"shadow": "0px 2px 4px 0px #00000026"
|
|
11
12
|
},
|
|
12
13
|
"lineIcon": {
|
|
13
14
|
"color": "var(--seed-color-palette-static-white)",
|
|
@@ -4,8 +4,9 @@ export declare const vars: {
|
|
|
4
4
|
"root": {
|
|
5
5
|
"color": "var(--seed-color-bg-transparent)",
|
|
6
6
|
"cornerRadius": "var(--seed-radius-r3)",
|
|
7
|
-
"
|
|
8
|
-
"
|
|
7
|
+
"size": "52px",
|
|
8
|
+
"colorDuration": "var(--seed-duration-color-transition)",
|
|
9
|
+
"colorTimingFunction": "var(--seed-timing-function-easing)"
|
|
9
10
|
},
|
|
10
11
|
"icon": {
|
|
11
12
|
"color": "var(--seed-color-fg-neutral-subtle)",
|
|
@@ -15,6 +16,9 @@ export declare const vars: {
|
|
|
15
16
|
}
|
|
16
17
|
},
|
|
17
18
|
"pressed": {
|
|
19
|
+
"root": {
|
|
20
|
+
"color": "var(--seed-color-bg-transparent-pressed)"
|
|
21
|
+
},
|
|
18
22
|
"icon": {
|
|
19
23
|
"color": "var(--seed-color-fg-neutral)"
|
|
20
24
|
}
|
|
@@ -4,8 +4,9 @@ export const vars = {
|
|
|
4
4
|
"root": {
|
|
5
5
|
"color": "var(--seed-color-bg-transparent)",
|
|
6
6
|
"cornerRadius": "var(--seed-radius-r3)",
|
|
7
|
-
"
|
|
8
|
-
"
|
|
7
|
+
"size": "52px",
|
|
8
|
+
"colorDuration": "var(--seed-duration-color-transition)",
|
|
9
|
+
"colorTimingFunction": "var(--seed-timing-function-easing)"
|
|
9
10
|
},
|
|
10
11
|
"icon": {
|
|
11
12
|
"color": "var(--seed-color-fg-neutral-subtle)",
|
|
@@ -15,6 +16,9 @@ export const vars = {
|
|
|
15
16
|
}
|
|
16
17
|
},
|
|
17
18
|
"pressed": {
|
|
19
|
+
"root": {
|
|
20
|
+
"color": "var(--seed-color-bg-transparent-pressed)"
|
|
21
|
+
},
|
|
18
22
|
"icon": {
|
|
19
23
|
"color": "var(--seed-color-fg-neutral)"
|
|
20
24
|
}
|
|
@@ -27,14 +27,16 @@ export declare const vars: {
|
|
|
27
27
|
/** 이 값은 상단 safe-area inset과 합산하여 적용합니다. */
|
|
28
28
|
"paddingTop": "var(--seed-dimension-x6)",
|
|
29
29
|
/** body의 하단 padding이며, 동시에 하단 scroll fog 그라데이션의 높이로도 사용됩니다. */
|
|
30
|
-
"paddingBottom": "var(--seed-dimension-x4)"
|
|
30
|
+
"paddingBottom": "var(--seed-dimension-x4)",
|
|
31
|
+
/** closeButton이 표시되는 경우 paddingRight에 추가되는 여백입니다. */
|
|
32
|
+
"closeButtonGap": "var(--seed-dimension-x1_5)"
|
|
31
33
|
},
|
|
32
34
|
"body": {
|
|
33
35
|
"paddingX": "var(--seed-dimension-x6)",
|
|
34
36
|
/** body의 하단 padding이며, 동시에 하단 scroll fog 그라데이션의 높이로도 사용됩니다. */
|
|
35
37
|
"paddingBottom": "var(--seed-dimension-x12)",
|
|
36
|
-
"
|
|
37
|
-
"
|
|
38
|
+
"strokeDuration": "var(--seed-duration-color-transition)",
|
|
39
|
+
"strokeTimingFunction": "var(--seed-timing-function-easing)"
|
|
38
40
|
},
|
|
39
41
|
"footer": {
|
|
40
42
|
"paddingX": "var(--seed-dimension-x6)",
|
|
@@ -62,8 +64,9 @@ export declare const vars: {
|
|
|
62
64
|
},
|
|
63
65
|
"scrolled": {
|
|
64
66
|
"body": {
|
|
67
|
+
"strokeWidth": "1px",
|
|
65
68
|
/** 본문이 스크롤된(scrolled) 상태에서 body 상단에 나타나는 divider의 색상입니다. */
|
|
66
|
-
"
|
|
69
|
+
"strokeColor": "var(--seed-color-stroke-neutral-muted)"
|
|
67
70
|
}
|
|
68
71
|
}
|
|
69
72
|
},
|
|
@@ -23,13 +23,14 @@ export const vars = {
|
|
|
23
23
|
"minHeight": "70px",
|
|
24
24
|
"paddingX": "var(--seed-dimension-x6)",
|
|
25
25
|
"paddingTop": "var(--seed-dimension-x6)",
|
|
26
|
-
"paddingBottom": "var(--seed-dimension-x4)"
|
|
26
|
+
"paddingBottom": "var(--seed-dimension-x4)",
|
|
27
|
+
"closeButtonGap": "var(--seed-dimension-x1_5)"
|
|
27
28
|
},
|
|
28
29
|
"body": {
|
|
29
30
|
"paddingX": "var(--seed-dimension-x6)",
|
|
30
31
|
"paddingBottom": "var(--seed-dimension-x12)",
|
|
31
|
-
"
|
|
32
|
-
"
|
|
32
|
+
"strokeDuration": "var(--seed-duration-color-transition)",
|
|
33
|
+
"strokeTimingFunction": "var(--seed-timing-function-easing)"
|
|
33
34
|
},
|
|
34
35
|
"footer": {
|
|
35
36
|
"paddingX": "var(--seed-dimension-x6)",
|
|
@@ -55,7 +56,8 @@ export const vars = {
|
|
|
55
56
|
},
|
|
56
57
|
"scrolled": {
|
|
57
58
|
"body": {
|
|
58
|
-
"
|
|
59
|
+
"strokeWidth": "1px",
|
|
60
|
+
"strokeColor": "var(--seed-color-stroke-neutral-muted)"
|
|
59
61
|
}
|
|
60
62
|
}
|
|
61
63
|
},
|