@seed-design/css 0.0.38 → 0.0.41

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 (33) hide show
  1. package/all.css +98 -44
  2. package/all.min.css +1 -1
  3. package/base.css +64 -32
  4. package/base.min.css +1 -1
  5. package/package.json +1 -1
  6. package/recipes/action-button.css +3 -3
  7. package/recipes/callout.css +7 -7
  8. package/recipes/progress-circle.css +1 -1
  9. package/recipes/skeleton.css +12 -2
  10. package/recipes/skeleton.d.ts +4 -0
  11. package/recipes/skeleton.mjs +6 -1
  12. package/recipes/text.css +6 -0
  13. package/recipes/text.d.ts +4 -0
  14. package/recipes/text.mjs +6 -1
  15. package/recipes/toggle-button.css +1 -1
  16. package/vars/color/bg.d.ts +1 -4
  17. package/vars/color/bg.mjs +1 -4
  18. package/vars/color/fg.d.ts +0 -2
  19. package/vars/color/fg.mjs +0 -2
  20. package/vars/color/palette.d.ts +17 -1
  21. package/vars/color/palette.mjs +17 -1
  22. package/vars/component/action-button.d.ts +3 -3
  23. package/vars/component/action-button.mjs +3 -3
  24. package/vars/component/callout.d.ts +7 -7
  25. package/vars/component/callout.mjs +7 -7
  26. package/vars/component/progress-circle.d.ts +1 -1
  27. package/vars/component/progress-circle.mjs +1 -1
  28. package/vars/component/skeleton.d.ts +21 -5
  29. package/vars/component/skeleton.mjs +21 -5
  30. package/vars/component/toggle-button.d.ts +1 -1
  31. package/vars/component/toggle-button.mjs +1 -1
  32. package/vars/gradient.d.ts +6 -1
  33. package/vars/gradient.mjs +6 -1
package/vars/color/palette.mjs CHANGED
@@ -61,11 +61,27 @@ export const red900 = "var(--seed-color-palette-red-900)";
61
61
  export const red1000 = "var(--seed-color-palette-red-1000)";
62
62
  export const staticBlack = "var(--seed-color-palette-static-black)";
63
63
  export const staticWhite = "var(--seed-color-palette-static-white)";
64
- export const staticBlackAlpha50 = "var(--seed-color-palette-static-black-alpha-50)";
64
+ export const staticBlackAlpha100 = "var(--seed-color-palette-static-black-alpha-100)";
65
65
  export const staticBlackAlpha200 = "var(--seed-color-palette-static-black-alpha-200)";
66
+ export const staticBlackAlpha300 = "var(--seed-color-palette-static-black-alpha-300)";
67
+ export const staticBlackAlpha400 = "var(--seed-color-palette-static-black-alpha-400)";
66
68
  export const staticBlackAlpha500 = "var(--seed-color-palette-static-black-alpha-500)";
69
+ export const staticBlackAlpha600 = "var(--seed-color-palette-static-black-alpha-600)";
70
+ export const staticBlackAlpha700 = "var(--seed-color-palette-static-black-alpha-700)";
71
+ export const staticBlackAlpha800 = "var(--seed-color-palette-static-black-alpha-800)";
72
+ export const staticBlackAlpha900 = "var(--seed-color-palette-static-black-alpha-900)";
73
+ export const staticBlackAlpha1000 = "var(--seed-color-palette-static-black-alpha-1000)";
74
+ export const staticWhiteAlpha50 = "var(--seed-color-palette-static-white-alpha-50)";
75
+ export const staticWhiteAlpha100 = "var(--seed-color-palette-static-white-alpha-100)";
67
76
  export const staticWhiteAlpha200 = "var(--seed-color-palette-static-white-alpha-200)";
77
+ export const staticWhiteAlpha300 = "var(--seed-color-palette-static-white-alpha-300)";
78
+ export const staticWhiteAlpha400 = "var(--seed-color-palette-static-white-alpha-400)";
79
+ export const staticWhiteAlpha500 = "var(--seed-color-palette-static-white-alpha-500)";
80
+ export const staticWhiteAlpha600 = "var(--seed-color-palette-static-white-alpha-600)";
81
+ export const staticWhiteAlpha700 = "var(--seed-color-palette-static-white-alpha-700)";
68
82
  export const staticWhiteAlpha800 = "var(--seed-color-palette-static-white-alpha-800)";
83
+ export const staticWhiteAlpha900 = "var(--seed-color-palette-static-white-alpha-900)";
84
+ export const staticWhiteAlpha1000 = "var(--seed-color-palette-static-white-alpha-1000)";
69
85
  export const yellow100 = "var(--seed-color-palette-yellow-100)";
70
86
  export const yellow200 = "var(--seed-color-palette-yellow-200)";
71
87
  export const yellow300 = "var(--seed-color-palette-yellow-300)";
package/vars/component/action-button.d.ts CHANGED
@@ -28,7 +28,7 @@ export declare const vars: {
28
28
  "color": "var(--seed-color-palette-static-white)"
29
29
  },
30
30
  "progressCircle": {
31
- "trackColor": "var(--seed-color-palette-static-white-alpha-200)",
31
+ "trackColor": "var(--seed-color-palette-static-white-alpha-300)",
32
32
  "rangeColor": "var(--seed-color-palette-static-white)"
33
33
  }
34
34
  },
@@ -78,7 +78,7 @@ export declare const vars: {
78
78
  "color": "var(--seed-color-fg-neutral-inverted)"
79
79
  },
80
80
  "progressCircle": {
81
- "trackColor": "var(--seed-color-palette-static-white-alpha-200)",
81
+ "trackColor": "var(--seed-color-palette-static-white-alpha-300)",
82
82
  "rangeColor": "var(--seed-color-palette-static-white)"
83
83
  }
84
84
  },
@@ -178,7 +178,7 @@ export declare const vars: {
178
178
  "color": "var(--seed-color-palette-static-white)"
179
179
  },
180
180
  "progressCircle": {
181
- "trackColor": "var(--seed-color-palette-static-white-alpha-200)",
181
+ "trackColor": "var(--seed-color-palette-static-white-alpha-300)",
182
182
  "rangeColor": "var(--seed-color-palette-static-white)"
183
183
  }
184
184
  },
package/vars/component/action-button.mjs CHANGED
@@ -28,7 +28,7 @@ export const vars = {
28
28
  "color": "var(--seed-color-palette-static-white)"
29
29
  },
30
30
  "progressCircle": {
31
- "trackColor": "var(--seed-color-palette-static-white-alpha-200)",
31
+ "trackColor": "var(--seed-color-palette-static-white-alpha-300)",
32
32
  "rangeColor": "var(--seed-color-palette-static-white)"
33
33
  }
34
34
  },
@@ -78,7 +78,7 @@ export const vars = {
78
78
  "color": "var(--seed-color-fg-neutral-inverted)"
79
79
  },
80
80
  "progressCircle": {
81
- "trackColor": "var(--seed-color-palette-static-white-alpha-200)",
81
+ "trackColor": "var(--seed-color-palette-static-white-alpha-300)",
82
82
  "rangeColor": "var(--seed-color-palette-static-white)"
83
83
  }
84
84
  },
@@ -178,7 +178,7 @@ export const vars = {
178
178
  "color": "var(--seed-color-palette-static-white)"
179
179
  },
180
180
  "progressCircle": {
181
- "trackColor": "var(--seed-color-palette-static-white-alpha-200)",
181
+ "trackColor": "var(--seed-color-palette-static-white-alpha-300)",
182
182
  "rangeColor": "var(--seed-color-palette-static-white)"
183
183
  }
184
184
  },
package/vars/component/callout.d.ts CHANGED
@@ -143,27 +143,27 @@ export declare const vars: {
143
143
  "toneMagic": {
144
144
  "enabled": {
145
145
  "root": {
146
- "color": "var(--seed-color-bg-magic-weak)"
146
+ "color": "var(--seed-gradient-glow-magic)"
147
147
  },
148
148
  "prefixIcon": {
149
- "color": "var(--seed-color-fg-magic-contrast)"
149
+ "color": "var(--seed-color-fg-neutral)"
150
150
  },
151
151
  "title": {
152
- "color": "var(--seed-color-fg-magic-contrast)"
152
+ "color": "var(--seed-color-fg-neutral)"
153
153
  },
154
154
  "description": {
155
- "color": "var(--seed-color-fg-magic-contrast)"
155
+ "color": "var(--seed-color-fg-neutral)"
156
156
  },
157
157
  "link": {
158
- "color": "var(--seed-color-fg-magic-contrast)"
158
+ "color": "var(--seed-color-fg-neutral)"
159
159
  },
160
160
  "suffixIcon": {
161
- "color": "var(--seed-color-fg-magic-contrast)"
161
+ "color": "var(--seed-color-fg-neutral)"
162
162
  }
163
163
  },
164
164
  "pressed": {
165
165
  "root": {
166
- "color": "var(--seed-color-bg-magic-weak-pressed)"
166
+ "color": "var(--seed-gradient-glow-magic-pressed)"
167
167
  }
168
168
  }
169
169
  }
package/vars/component/callout.mjs CHANGED
@@ -143,27 +143,27 @@ export const vars = {
143
143
  "toneMagic": {
144
144
  "enabled": {
145
145
  "root": {
146
- "color": "var(--seed-color-bg-magic-weak)"
146
+ "color": "var(--seed-gradient-glow-magic)"
147
147
  },
148
148
  "prefixIcon": {
149
- "color": "var(--seed-color-fg-magic-contrast)"
149
+ "color": "var(--seed-color-fg-neutral)"
150
150
  },
151
151
  "title": {
152
- "color": "var(--seed-color-fg-magic-contrast)"
152
+ "color": "var(--seed-color-fg-neutral)"
153
153
  },
154
154
  "description": {
155
- "color": "var(--seed-color-fg-magic-contrast)"
155
+ "color": "var(--seed-color-fg-neutral)"
156
156
  },
157
157
  "link": {
158
- "color": "var(--seed-color-fg-magic-contrast)"
158
+ "color": "var(--seed-color-fg-neutral)"
159
159
  },
160
160
  "suffixIcon": {
161
- "color": "var(--seed-color-fg-magic-contrast)"
161
+ "color": "var(--seed-color-fg-neutral)"
162
162
  }
163
163
  },
164
164
  "pressed": {
165
165
  "root": {
166
- "color": "var(--seed-color-bg-magic-weak-pressed)"
166
+ "color": "var(--seed-gradient-glow-magic-pressed)"
167
167
  }
168
168
  }
169
169
  }
package/vars/component/progress-circle.d.ts CHANGED
@@ -57,7 +57,7 @@ export declare const vars: {
57
57
  "toneStaticWhite": {
58
58
  "enabled": {
59
59
  "track": {
60
- "color": "var(--seed-color-palette-static-white-alpha-200)"
60
+ "color": "var(--seed-color-palette-static-white-alpha-300)"
61
61
  },
62
62
  "range": {
63
63
  "color": "var(--seed-color-palette-static-white)"
package/vars/component/progress-circle.mjs CHANGED
@@ -57,7 +57,7 @@ export const vars = {
57
57
  "toneStaticWhite": {
58
58
  "enabled": {
59
59
  "track": {
60
- "color": "var(--seed-color-palette-static-white-alpha-200)"
60
+ "color": "var(--seed-color-palette-static-white-alpha-300)"
61
61
  },
62
62
  "range": {
63
63
  "color": "var(--seed-color-palette-static-white)"
package/vars/component/skeleton.d.ts CHANGED
@@ -1,13 +1,9 @@
1
1
  export declare const vars: {
2
2
  "base": {
3
3
  "enabled": {
4
- "root": {
5
- "color": "var(--seed-color-palette-gray-200)"
6
- },
7
4
  "shimmer": {
8
5
  "duration": "1.5s",
9
- "timingFunction": "var(--seed-timing-function-easing)",
10
- "color": "var(--seed-gradient-shimmer)"
6
+ "timingFunction": "var(--seed-timing-function-easing)"
11
7
  }
12
8
  }
13
9
  },
@@ -38,5 +34,25 @@ export declare const vars: {
38
34
  "cornerRadius": "var(--seed-radius-full)"
39
35
  }
40
36
  }
37
+ },
38
+ "toneNeutral": {
39
+ "enabled": {
40
+ "root": {
41
+ "color": "var(--seed-color-palette-gray-200)"
42
+ },
43
+ "shimmer": {
44
+ "color": "var(--seed-gradient-shimmer-neutral)"
45
+ }
46
+ }
47
+ },
48
+ "toneMagic": {
49
+ "enabled": {
50
+ "root": {
51
+ "color": "var(--seed-color-bg-magic-weak)"
52
+ },
53
+ "shimmer": {
54
+ "color": "var(--seed-gradient-shimmer-magic)"
55
+ }
56
+ }
41
57
  }
42
58
  }
package/vars/component/skeleton.mjs CHANGED
@@ -1,13 +1,9 @@
1
1
  export const vars = {
2
2
  "base": {
3
3
  "enabled": {
4
- "root": {
5
- "color": "var(--seed-color-palette-gray-200)"
6
- },
7
4
  "shimmer": {
8
5
  "duration": "1.5s",
9
- "timingFunction": "var(--seed-timing-function-easing)",
10
- "color": "var(--seed-gradient-shimmer)"
6
+ "timingFunction": "var(--seed-timing-function-easing)"
11
7
  }
12
8
  }
13
9
  },
@@ -38,5 +34,25 @@ export const vars = {
38
34
  "cornerRadius": "var(--seed-radius-full)"
39
35
  }
40
36
  }
37
+ },
38
+ "toneNeutral": {
39
+ "enabled": {
40
+ "root": {
41
+ "color": "var(--seed-color-palette-gray-200)"
42
+ },
43
+ "shimmer": {
44
+ "color": "var(--seed-gradient-shimmer-neutral)"
45
+ }
46
+ }
47
+ },
48
+ "toneMagic": {
49
+ "enabled": {
50
+ "root": {
51
+ "color": "var(--seed-color-bg-magic-weak)"
52
+ },
53
+ "shimmer": {
54
+ "color": "var(--seed-gradient-shimmer-magic)"
55
+ }
56
+ }
41
57
  }
42
58
  }
package/vars/component/toggle-button.d.ts CHANGED
@@ -25,7 +25,7 @@ export declare const vars: {
25
25
  "color": "var(--seed-color-palette-static-white)"
26
26
  },
27
27
  "progressCircle": {
28
- "trackColor": "var(--seed-color-palette-static-white-alpha-200)",
28
+ "trackColor": "var(--seed-color-palette-static-white-alpha-300)",
29
29
  "rangeColor": "var(--seed-color-palette-static-white)"
30
30
  }
31
31
  },
package/vars/component/toggle-button.mjs CHANGED
@@ -25,7 +25,7 @@ export const vars = {
25
25
  "color": "var(--seed-color-palette-static-white)"
26
26
  },
27
27
  "progressCircle": {
28
- "trackColor": "var(--seed-color-palette-static-white-alpha-200)",
28
+ "trackColor": "var(--seed-color-palette-static-white-alpha-300)",
29
29
  "rangeColor": "var(--seed-color-palette-static-white)"
30
30
  }
31
31
  },
package/vars/gradient.d.ts CHANGED
@@ -1 +1,6 @@
1
- export declare const shimmer = "var(--seed-gradient-shimmer)";
1
+ export declare const shimmerNeutral = "var(--seed-gradient-shimmer-neutral)";
2
+ export declare const shimmerMagic = "var(--seed-gradient-shimmer-magic)";
3
+ export declare const fadeNeutral = "var(--seed-gradient-fade-neutral)";
4
+ export declare const glowMagic = "var(--seed-gradient-glow-magic)";
5
+ export declare const glowMagicPressed = "var(--seed-gradient-glow-magic-pressed)";
6
+ export declare const highlightMagic = "var(--seed-gradient-highlight-magic)";
package/vars/gradient.mjs CHANGED
@@ -1 +1,6 @@
1
- export const shimmer = "var(--seed-gradient-shimmer)";
1
+ export const shimmerNeutral = "var(--seed-gradient-shimmer-neutral)";
2
+ export const shimmerMagic = "var(--seed-gradient-shimmer-magic)";
3
+ export const fadeNeutral = "var(--seed-gradient-fade-neutral)";
4
+ export const glowMagic = "var(--seed-gradient-glow-magic)";
5
+ export const glowMagicPressed = "var(--seed-gradient-glow-magic-pressed)";
6
+ export const highlightMagic = "var(--seed-gradient-highlight-magic)";