@seed-design/css 2.7.0 → 2.8.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.
Files changed (19) hide show
  1. package/all.css +7 -0
  2. package/all.layered.css +7 -0
  3. package/all.layered.min.css +1 -1
  4. package/all.min.css +1 -1
  5. package/base.css +1 -0
  6. package/base.layered.css +1 -0
  7. package/base.layered.min.css +1 -1
  8. package/base.min.css +1 -1
  9. package/package.json +1 -1
  10. package/recipes/wheel-picker-public.css +2 -0
  11. package/recipes/wheel-picker-public.layered.css +3 -0
  12. package/recipes/wheel-picker.css +2 -0
  13. package/recipes/wheel-picker.layered.css +3 -0
  14. package/vars/component/top-navigation-icon-button.d.ts +10 -1
  15. package/vars/component/top-navigation-icon-button.mjs +10 -1
  16. package/vars/component/top-navigation-text-button.d.ts +10 -1
  17. package/vars/component/top-navigation-text-button.mjs +10 -1
  18. package/vars/component/top-navigation.d.ts +11 -4
  19. package/vars/component/top-navigation.mjs +10 -4
package/recipes/wheel-picker-public.layered.css CHANGED
@@ -64,6 +64,9 @@
64
64
  outline: var(--seed-dimension-x0_5) solid transparent;
65
65
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
66
66
  border-radius: var(--seed-radius-r2);
67
+ }
68
+
69
+ .seed-wheel-picker-public__column:not([data-wheel-picker-pointer-focus]) :is([aria-selected="true"], [data-selected]) {
67
70
  transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
68
71
  }
69
72
 
package/recipes/wheel-picker.css CHANGED
@@ -51,6 +51,8 @@
51
51
  outline: var(--seed-dimension-x0_5) solid transparent;
52
52
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
53
53
  border-radius: var(--seed-wheel-picker-selection-indicator-corner-radius, 0);
54
+ }
55
+ .seed-wheel-picker__column:not([data-wheel-picker-pointer-focus]) :is([aria-selected=true], [data-selected]) {
54
56
  transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
55
57
  }
56
58
  .seed-wheel-picker__column.seed-wheel-picker__column:is(:focus-visible, [data-focus-visible]):not([data-wheel-picker-pointer-focus]) :is([aria-selected=true], [data-selected]) {
package/recipes/wheel-picker.layered.css CHANGED
@@ -60,6 +60,9 @@
60
60
  outline: var(--seed-dimension-x0_5) solid transparent;
61
61
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
62
62
  border-radius: var(--seed-wheel-picker-selection-indicator-corner-radius, 0);
63
+ }
64
+
65
+ .seed-wheel-picker__column:not([data-wheel-picker-pointer-focus]) :is([aria-selected="true"], [data-selected]) {
63
66
  transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
64
67
  }
65
68
 
package/vars/component/top-navigation-icon-button.d.ts CHANGED
@@ -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": {
package/vars/component/top-navigation-icon-button.mjs CHANGED
@@ -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": {
package/vars/component/top-navigation-text-button.d.ts CHANGED
@@ -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": {
package/vars/component/top-navigation-text-button.mjs CHANGED
@@ -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": {
package/vars/component/top-navigation.d.ts CHANGED
@@ -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
- "paddingX": "var(--seed-dimension-x4)"
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": "16px"
25
+ "paddingLeft": "var(--seed-dimension-x1_5)"
19
26
  }
20
27
  }
21
28
  },
package/vars/component/top-navigation.mjs CHANGED
@@ -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
- "paddingX": "var(--seed-dimension-x4)"
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": "16px"
23
+ "paddingLeft": "var(--seed-dimension-x1_5)"
18
24
  }
19
25
  }
20
26
  },