@seed-design/css 1.2.10 → 1.2.12

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 (34) hide show
  1. package/all.css +17 -556
  2. package/all.layered.css +17 -556
  3. package/all.layered.min.css +1 -1
  4. package/all.min.css +1 -1
  5. package/base.css +2 -0
  6. package/base.layered.css +2 -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/app-bar-main.css +0 -103
  11. package/recipes/app-bar-main.layered.css +0 -100
  12. package/recipes/app-bar.css +3 -279
  13. package/recipes/app-bar.d.ts +1 -1
  14. package/recipes/app-bar.layered.css +3 -266
  15. package/recipes/app-bar.layered.mjs +4 -0
  16. package/recipes/app-bar.mjs +4 -0
  17. package/recipes/app-screen.css +0 -203
  18. package/recipes/app-screen.layered.css +0 -190
  19. package/recipes/chip.css +9 -0
  20. package/recipes/chip.layered.css +12 -0
  21. package/recipes/chip.layered.mjs +12 -0
  22. package/recipes/chip.mjs +12 -0
  23. package/vars/component/chip.d.ts +21 -1
  24. package/vars/component/chip.mjs +21 -1
  25. package/vars/component/list-item.d.ts +8 -3
  26. package/vars/component/list-item.mjs +6 -3
  27. package/vars/component/top-navigation-text-button.d.ts +10 -1
  28. package/vars/component/top-navigation-text-button.mjs +9 -1
  29. package/vars/component/top-navigation.d.ts +24 -4
  30. package/vars/component/top-navigation.mjs +17 -4
  31. package/vars/duration.d.ts +2 -1
  32. package/vars/duration.mjs +2 -1
  33. package/vars/timing-function.d.ts +2 -1
  34. package/vars/timing-function.mjs +2 -1
package/vars/component/top-navigation.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  export declare const vars: {
2
- "themeCupertino": {
2
+ "themeIos": {
3
3
  "enabled": {
4
4
  "root": {
5
5
  "height": "44px",
@@ -19,6 +19,9 @@ export declare const vars: {
19
19
  }
20
20
  }
21
21
  },
22
+ /**
23
+ * color를 $color.bg.layer-basement 등으로 변경하여 사용할 수 있습니다.
24
+ */
22
25
  "toneLayer": {
23
26
  "enabled": {
24
27
  "root": {
@@ -34,9 +37,6 @@ export declare const vars: {
34
37
  },
35
38
  "toneTransparent": {
36
39
  "enabled": {
37
- "root": {
38
- "color": "#00000000"
39
- },
40
40
  "title": {
41
41
  "color": "var(--seed-color-palette-static-white)"
42
42
  },
@@ -45,6 +45,25 @@ export declare const vars: {
45
45
  }
46
46
  }
47
47
  },
48
+ /**
49
+ * - `gradient=false`: false로 사용하는 것을 권장하지 않습니다. gradient 없이 사용하면 Top Navigation의 콘텐츠 가독성을 직접 확보해야 합니다. 스크린 배경 색상이 Top Navigation에 보이기를 원하는 경우 tone=layer를 사용하세요.
50
+ */
51
+ "toneTransparentGradientFalse": {
52
+ "enabled": {
53
+ "root": {
54
+ "color": "#00000000"
55
+ }
56
+ }
57
+ },
58
+ "toneTransparentGradientTrue": {
59
+ "enabled": {
60
+ "root": {
61
+ "gradient": "#00000059 0%, #00000000 100%",
62
+ /** gradient가 표시될 때 하단 아래로 gradient가 확장되는 길이입니다. */
63
+ "bleedBottom": "var(--seed-dimension-x5)"
64
+ }
65
+ }
66
+ },
48
67
  "dividerTrue": {
49
68
  "enabled": {
50
69
  "root": {
@@ -53,6 +72,7 @@ export declare const vars: {
53
72
  }
54
73
  }
55
74
  },
75
+ "dividerFalse": {},
56
76
  "titleLayoutTitleOnly": {
57
77
  "enabled": {
58
78
  "title": {
package/vars/component/top-navigation.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  export const vars = {
2
- "themeCupertino": {
2
+ "themeIos": {
3
3
  "enabled": {
4
4
  "root": {
5
5
  "height": "44px",
@@ -33,9 +33,6 @@ export const vars = {
33
33
  },
34
34
  "toneTransparent": {
35
35
  "enabled": {
36
- "root": {
37
- "color": "#00000000"
38
- },
39
36
  "title": {
40
37
  "color": "var(--seed-color-palette-static-white)"
41
38
  },
@@ -44,6 +41,21 @@ export const vars = {
44
41
  }
45
42
  }
46
43
  },
44
+ "toneTransparentGradientFalse": {
45
+ "enabled": {
46
+ "root": {
47
+ "color": "#00000000"
48
+ }
49
+ }
50
+ },
51
+ "toneTransparentGradientTrue": {
52
+ "enabled": {
53
+ "root": {
54
+ "gradient": "#00000059 0%, #00000000 100%",
55
+ "bleedBottom": "var(--seed-dimension-x5)"
56
+ }
57
+ }
58
+ },
47
59
  "dividerTrue": {
48
60
  "enabled": {
49
61
  "root": {
@@ -52,6 +64,7 @@ export const vars = {
52
64
  }
53
65
  }
54
66
  },
67
+ "dividerFalse": {},
55
68
  "titleLayoutTitleOnly": {
56
69
  "enabled": {
57
70
  "title": {
package/vars/duration.d.ts CHANGED
@@ -4,4 +4,5 @@ export declare const d3 = "var(--seed-duration-d3)";
4
4
  export declare const d4 = "var(--seed-duration-d4)";
5
5
  export declare const d5 = "var(--seed-duration-d5)";
6
6
  export declare const d6 = "var(--seed-duration-d6)";
7
- export declare const colorTransition = "var(--seed-duration-color-transition)";
7
+ export declare const colorTransition = "var(--seed-duration-color-transition)";
8
+ export declare const pressedScale = "var(--seed-duration-pressed-scale)";
package/vars/duration.mjs CHANGED
@@ -4,4 +4,5 @@ export const d3 = "var(--seed-duration-d3)";
4
4
  export const d4 = "var(--seed-duration-d4)";
5
5
  export const d5 = "var(--seed-duration-d5)";
6
6
  export const d6 = "var(--seed-duration-d6)";
7
- export const colorTransition = "var(--seed-duration-color-transition)";
7
+ export const colorTransition = "var(--seed-duration-color-transition)";
8
+ export const pressedScale = "var(--seed-duration-pressed-scale)";
package/vars/timing-function.d.ts CHANGED
@@ -3,4 +3,5 @@ export declare const easing = "var(--seed-timing-function-easing)";
3
3
  export declare const enter = "var(--seed-timing-function-enter)";
4
4
  export declare const exit = "var(--seed-timing-function-exit)";
5
5
  export declare const enterExpressive = "var(--seed-timing-function-enter-expressive)";
6
- export declare const exitExpressive = "var(--seed-timing-function-exit-expressive)";
6
+ export declare const exitExpressive = "var(--seed-timing-function-exit-expressive)";
7
+ export declare const pressedScale = "var(--seed-timing-function-pressed-scale)";
package/vars/timing-function.mjs CHANGED
@@ -3,4 +3,5 @@ export const easing = "var(--seed-timing-function-easing)";
3
3
  export const enter = "var(--seed-timing-function-enter)";
4
4
  export const exit = "var(--seed-timing-function-exit)";
5
5
  export const enterExpressive = "var(--seed-timing-function-enter-expressive)";
6
- export const exitExpressive = "var(--seed-timing-function-exit-expressive)";
6
+ export const exitExpressive = "var(--seed-timing-function-exit-expressive)";
7
+ export const pressedScale = "var(--seed-timing-function-pressed-scale)";