@seed-design/css 2.7.0 → 2.8.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 +1 -0
- package/all.layered.css +1 -0
- package/all.layered.min.css +1 -1
- package/all.min.css +1 -1
- package/base.css +1 -0
- package/base.layered.css +1 -0
- package/base.layered.min.css +1 -1
- package/base.min.css +1 -1
- package/package.json +1 -1
- package/vars/component/top-navigation-icon-button.d.ts +10 -1
- package/vars/component/top-navigation-icon-button.mjs +10 -1
- package/vars/component/top-navigation-text-button.d.ts +10 -1
- package/vars/component/top-navigation-text-button.mjs +10 -1
- package/vars/component/top-navigation.d.ts +11 -4
- package/vars/component/top-navigation.mjs +10 -4
|
@@ -2,11 +2,20 @@ export declare const vars: {
|
|
|
2
2
|
"base": {
|
|
3
3
|
"enabled": {
|
|
4
4
|
"root": {
|
|
5
|
-
"size": "44px"
|
|
5
|
+
"size": "44px",
|
|
6
|
+
"cornerRadius": "var(--seed-radius-r2)",
|
|
7
|
+
"color": "var(--seed-color-bg-transparent)",
|
|
8
|
+
"colorDuration": "var(--seed-duration-color-transition)",
|
|
9
|
+
"colorTimingFunction": "var(--seed-timing-function-easing)"
|
|
6
10
|
},
|
|
7
11
|
"icon": {
|
|
8
12
|
"size": "24px"
|
|
9
13
|
}
|
|
14
|
+
},
|
|
15
|
+
"pressed": {
|
|
16
|
+
"root": {
|
|
17
|
+
"color": "var(--seed-color-bg-transparent-pressed)"
|
|
18
|
+
}
|
|
10
19
|
}
|
|
11
20
|
},
|
|
12
21
|
"toneLayer": {
|
|
@@ -2,11 +2,20 @@ export const vars = {
|
|
|
2
2
|
"base": {
|
|
3
3
|
"enabled": {
|
|
4
4
|
"root": {
|
|
5
|
-
"size": "44px"
|
|
5
|
+
"size": "44px",
|
|
6
|
+
"cornerRadius": "var(--seed-radius-r2)",
|
|
7
|
+
"color": "var(--seed-color-bg-transparent)",
|
|
8
|
+
"colorDuration": "var(--seed-duration-color-transition)",
|
|
9
|
+
"colorTimingFunction": "var(--seed-timing-function-easing)"
|
|
6
10
|
},
|
|
7
11
|
"icon": {
|
|
8
12
|
"size": "24px"
|
|
9
13
|
}
|
|
14
|
+
},
|
|
15
|
+
"pressed": {
|
|
16
|
+
"root": {
|
|
17
|
+
"color": "var(--seed-color-bg-transparent-pressed)"
|
|
18
|
+
}
|
|
10
19
|
}
|
|
11
20
|
},
|
|
12
21
|
"toneLayer": {
|
|
@@ -3,7 +3,11 @@ export declare const vars: {
|
|
|
3
3
|
"enabled": {
|
|
4
4
|
"root": {
|
|
5
5
|
"height": "44px",
|
|
6
|
-
"paddingX": "var(--seed-dimension-x2_5)"
|
|
6
|
+
"paddingX": "var(--seed-dimension-x2_5)",
|
|
7
|
+
"cornerRadius": "var(--seed-radius-r2)",
|
|
8
|
+
"color": "var(--seed-color-bg-transparent)",
|
|
9
|
+
"colorDuration": "var(--seed-duration-color-transition)",
|
|
10
|
+
"colorTimingFunction": "var(--seed-timing-function-easing)"
|
|
7
11
|
},
|
|
8
12
|
"label": {
|
|
9
13
|
"fontSize": "var(--seed-font-size-t5)",
|
|
@@ -14,6 +18,11 @@ export declare const vars: {
|
|
|
14
18
|
"maxLineHeightScale": "1.2",
|
|
15
19
|
"minLineHeightScale": "1"
|
|
16
20
|
}
|
|
21
|
+
},
|
|
22
|
+
"pressed": {
|
|
23
|
+
"root": {
|
|
24
|
+
"color": "var(--seed-color-bg-transparent-pressed)"
|
|
25
|
+
}
|
|
17
26
|
}
|
|
18
27
|
},
|
|
19
28
|
"toneLayer": {
|
|
@@ -3,7 +3,11 @@ export const vars = {
|
|
|
3
3
|
"enabled": {
|
|
4
4
|
"root": {
|
|
5
5
|
"height": "44px",
|
|
6
|
-
"paddingX": "var(--seed-dimension-x2_5)"
|
|
6
|
+
"paddingX": "var(--seed-dimension-x2_5)",
|
|
7
|
+
"cornerRadius": "var(--seed-radius-r2)",
|
|
8
|
+
"color": "var(--seed-color-bg-transparent)",
|
|
9
|
+
"colorDuration": "var(--seed-duration-color-transition)",
|
|
10
|
+
"colorTimingFunction": "var(--seed-timing-function-easing)"
|
|
7
11
|
},
|
|
8
12
|
"label": {
|
|
9
13
|
"fontSize": "var(--seed-font-size-t5)",
|
|
@@ -14,6 +18,11 @@ export const vars = {
|
|
|
14
18
|
"maxLineHeightScale": "1.2",
|
|
15
19
|
"minLineHeightScale": "1"
|
|
16
20
|
}
|
|
21
|
+
},
|
|
22
|
+
"pressed": {
|
|
23
|
+
"root": {
|
|
24
|
+
"color": "var(--seed-color-bg-transparent-pressed)"
|
|
25
|
+
}
|
|
17
26
|
}
|
|
18
27
|
},
|
|
19
28
|
"toneLayer": {
|
|
@@ -1,21 +1,28 @@
|
|
|
1
1
|
export declare const vars: {
|
|
2
|
+
"base": {
|
|
3
|
+
"enabled": {
|
|
4
|
+
"root": {
|
|
5
|
+
"paddingX": "var(--seed-dimension-x1_5)"
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
},
|
|
2
9
|
"themeIos": {
|
|
3
10
|
"enabled": {
|
|
4
11
|
"root": {
|
|
5
12
|
"height": "44px",
|
|
6
|
-
|
|
13
|
+
/** main과 left/right 영역 간 최소 간격입니다. */
|
|
14
|
+
"titleMinGap": "var(--seed-dimension-x2)"
|
|
7
15
|
}
|
|
8
16
|
}
|
|
9
17
|
},
|
|
10
18
|
"themeAndroid": {
|
|
11
19
|
"enabled": {
|
|
12
20
|
"root": {
|
|
13
|
-
"height": "56px"
|
|
14
|
-
"paddingX": "var(--seed-dimension-x4)"
|
|
21
|
+
"height": "56px"
|
|
15
22
|
},
|
|
16
23
|
/** title과 subtitle을 포함하는 영역입니다. */
|
|
17
24
|
"main": {
|
|
18
|
-
"paddingLeft": "
|
|
25
|
+
"paddingLeft": "var(--seed-dimension-x1_5)"
|
|
19
26
|
}
|
|
20
27
|
}
|
|
21
28
|
},
|
|
@@ -1,20 +1,26 @@
|
|
|
1
1
|
export const vars = {
|
|
2
|
+
"base": {
|
|
3
|
+
"enabled": {
|
|
4
|
+
"root": {
|
|
5
|
+
"paddingX": "var(--seed-dimension-x1_5)"
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
},
|
|
2
9
|
"themeIos": {
|
|
3
10
|
"enabled": {
|
|
4
11
|
"root": {
|
|
5
12
|
"height": "44px",
|
|
6
|
-
"
|
|
13
|
+
"titleMinGap": "var(--seed-dimension-x2)"
|
|
7
14
|
}
|
|
8
15
|
}
|
|
9
16
|
},
|
|
10
17
|
"themeAndroid": {
|
|
11
18
|
"enabled": {
|
|
12
19
|
"root": {
|
|
13
|
-
"height": "56px"
|
|
14
|
-
"paddingX": "var(--seed-dimension-x4)"
|
|
20
|
+
"height": "56px"
|
|
15
21
|
},
|
|
16
22
|
"main": {
|
|
17
|
-
"paddingLeft": "
|
|
23
|
+
"paddingLeft": "var(--seed-dimension-x1_5)"
|
|
18
24
|
}
|
|
19
25
|
}
|
|
20
26
|
},
|