@seed-design/css 2.6.2 → 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.
Files changed (31) hide show
  1. package/all.css +63 -61
  2. package/all.layered.css +63 -61
  3. package/all.layered.min.css +1 -1
  4. package/all.min.css +1 -1
  5. package/base.css +60 -56
  6. package/base.layered.css +60 -56
  7. package/base.layered.min.css +1 -1
  8. package/base.min.css +1 -1
  9. package/package.json +1 -1
  10. package/recipes/scroll-fog.css +2 -4
  11. package/recipes/scroll-fog.layered.css +3 -5
  12. package/theming/index.cjs +41 -5
  13. package/theming/index.mjs +41 -5
  14. package/vars/component/callout.d.ts +6 -2
  15. package/vars/component/callout.mjs +6 -2
  16. package/vars/component/image-frame-reaction-button.d.ts +26 -2
  17. package/vars/component/image-frame-reaction-button.mjs +26 -2
  18. package/vars/component/page-banner.d.ts +6 -2
  19. package/vars/component/page-banner.mjs +6 -2
  20. package/vars/component/scroll-fog.d.ts +69 -2
  21. package/vars/component/scroll-fog.mjs +69 -2
  22. package/vars/component/skeleton.d.ts +6 -2
  23. package/vars/component/skeleton.mjs +6 -2
  24. package/vars/component/top-navigation-icon-button.d.ts +10 -1
  25. package/vars/component/top-navigation-icon-button.mjs +10 -1
  26. package/vars/component/top-navigation-text-button.d.ts +10 -1
  27. package/vars/component/top-navigation-text-button.mjs +10 -1
  28. package/vars/component/top-navigation.d.ts +24 -5
  29. package/vars/component/top-navigation.mjs +23 -5
  30. package/vars/gradient.d.ts +2 -0
  31. package/vars/gradient.mjs +1 -0
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
  },
@@ -58,7 +65,19 @@ export declare const vars: {
58
65
  "toneTransparentGradientTrue": {
59
66
  "enabled": {
60
67
  "root": {
61
- "gradient": "#00000059 0%, #00000000 100%",
68
+ "gradient": {
69
+ "serialized": "#00000059 0%, #00000000 100%",
70
+ "stops": [
71
+ {
72
+ "color": "#00000059",
73
+ "position": 0
74
+ },
75
+ {
76
+ "color": "#00000000",
77
+ "position": 1
78
+ }
79
+ ]
80
+ },
62
81
  /** gradient가 표시될 때 하단 아래로 gradient가 확장되는 길이입니다. */
63
82
  "bleedBottom": "var(--seed-dimension-x5)"
64
83
  }
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
  },
@@ -51,7 +57,19 @@ export const vars = {
51
57
  "toneTransparentGradientTrue": {
52
58
  "enabled": {
53
59
  "root": {
54
- "gradient": "#00000059 0%, #00000000 100%",
60
+ "gradient": {
61
+ "serialized": "#00000059 0%, #00000000 100%",
62
+ "stops": [
63
+ {
64
+ "color": "#00000059",
65
+ "position": 0
66
+ },
67
+ {
68
+ "color": "#00000000",
69
+ "position": 1
70
+ }
71
+ ]
72
+ },
55
73
  "bleedBottom": "var(--seed-dimension-x5)"
56
74
  }
57
75
  }
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
@@ -1,3 +1,4 @@
1
+ export const fadeMask = "var(--seed-gradient-fade-mask)";
1
2
  export const glowMagic = "var(--seed-gradient-glow-magic)";
2
3
  export const glowMagicPressed = "var(--seed-gradient-glow-magic-pressed)";
3
4
  export const highlightMagic = "var(--seed-gradient-highlight-magic)";