@seed-design/css 1.1.4 → 1.1.6

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 (54) hide show
  1. package/all.css +71 -47
  2. package/all.min.css +1 -1
  3. package/base.css +5 -0
  4. package/base.min.css +1 -1
  5. package/package.json +1 -1
  6. package/recipes/action-button.css +11 -11
  7. package/recipes/bottom-sheet-handle.css +1 -1
  8. package/recipes/checkmark.css +3 -2
  9. package/recipes/chip-tabs.css +4 -3
  10. package/recipes/chip.css +5 -5
  11. package/recipes/contextual-floating-button.css +1 -1
  12. package/recipes/floating-action-button.css +1 -1
  13. package/recipes/input-button.css +17 -7
  14. package/recipes/list-item.css +5 -5
  15. package/recipes/radiomark.css +3 -2
  16. package/recipes/reaction-button.css +7 -6
  17. package/recipes/segmented-control.css +1 -1
  18. package/recipes/select-box.css +3 -1
  19. package/recipes/text-input.css +1 -1
  20. package/recipes/toggle-button.css +1 -1
  21. package/vars/color/bg.d.ts +3 -1
  22. package/vars/color/bg.mjs +3 -1
  23. package/vars/component/action-button.d.ts +11 -11
  24. package/vars/component/action-button.mjs +11 -11
  25. package/vars/component/bottom-sheet-handle.d.ts +1 -1
  26. package/vars/component/bottom-sheet-handle.mjs +1 -1
  27. package/vars/component/checkmark.d.ts +10 -2
  28. package/vars/component/checkmark.mjs +10 -2
  29. package/vars/component/chip-tab.d.ts +5 -2
  30. package/vars/component/chip-tab.mjs +5 -2
  31. package/vars/component/chip.d.ts +7 -7
  32. package/vars/component/chip.mjs +7 -7
  33. package/vars/component/contextual-floating-button.d.ts +1 -1
  34. package/vars/component/contextual-floating-button.mjs +1 -1
  35. package/vars/component/floating-action-button.d.ts +1 -1
  36. package/vars/component/floating-action-button.mjs +1 -1
  37. package/vars/component/input-button.d.ts +16 -4
  38. package/vars/component/input-button.mjs +16 -4
  39. package/vars/component/list-item.d.ts +3 -2
  40. package/vars/component/list-item.mjs +3 -2
  41. package/vars/component/radiomark.d.ts +4 -1
  42. package/vars/component/radiomark.mjs +4 -1
  43. package/vars/component/reaction-button.d.ts +8 -6
  44. package/vars/component/reaction-button.mjs +8 -6
  45. package/vars/component/segmented-control-item.d.ts +2 -2
  46. package/vars/component/segmented-control-item.mjs +2 -2
  47. package/vars/component/select-box.d.ts +5 -2
  48. package/vars/component/select-box.mjs +5 -2
  49. package/vars/component/text-input.d.ts +1 -1
  50. package/vars/component/text-input.mjs +1 -1
  51. package/vars/component/toggle-button.d.ts +1 -1
  52. package/vars/component/toggle-button.mjs +1 -1
  53. package/vars/duration.d.ts +2 -1
  54. package/vars/duration.mjs +2 -1
package/vars/component/reaction-button.d.ts CHANGED
@@ -2,8 +2,10 @@ export declare const vars: {
2
2
  "base": {
3
3
  "enabled": {
4
4
  "root": {
5
- "color": "var(--seed-color-bg-neutral-weak)",
6
- "colorDuration": "var(--seed-duration-d4)",
5
+ "strokeColor": "var(--seed-color-stroke-neutral-muted)",
6
+ "strokeWidth": "1px",
7
+ "color": "var(--seed-color-bg-transparent)",
8
+ "colorDuration": "var(--seed-duration-color-transition)",
7
9
  "colorTimingFunction": "var(--seed-timing-function-easing)"
8
10
  },
9
11
  "label": {
@@ -24,12 +26,12 @@ export declare const vars: {
24
26
  },
25
27
  "pressed": {
26
28
  "root": {
27
- "color": "var(--seed-color-bg-neutral-weak-pressed)"
29
+ "color": "var(--seed-color-bg-transparent-pressed)"
28
30
  }
29
31
  },
30
32
  "selected": {
31
33
  "root": {
32
- "color": "var(--seed-color-bg-layer-default)",
34
+ "color": "var(--seed-color-bg-transparent)",
33
35
  "strokeColor": "var(--seed-color-stroke-brand-weak)",
34
36
  "strokeWidth": "1px"
35
37
  },
@@ -49,7 +51,7 @@ export declare const vars: {
49
51
  },
50
52
  "selectedPressed": {
51
53
  "root": {
52
- "color": "var(--seed-color-bg-layer-default-pressed)"
54
+ "color": "var(--seed-color-bg-transparent-pressed)"
53
55
  }
54
56
  },
55
57
  "disabled": {
@@ -74,7 +76,7 @@ export declare const vars: {
74
76
  },
75
77
  "selectedLoading": {
76
78
  "root": {
77
- "color": "var(--seed-color-bg-layer-default-pressed)",
79
+ "color": "var(--seed-color-bg-transparent-pressed)",
78
80
  "strokeWidth": "1px"
79
81
  }
80
82
  }
package/vars/component/reaction-button.mjs CHANGED
@@ -2,8 +2,10 @@ export const vars = {
2
2
  "base": {
3
3
  "enabled": {
4
4
  "root": {
5
- "color": "var(--seed-color-bg-neutral-weak)",
6
- "colorDuration": "var(--seed-duration-d4)",
5
+ "strokeColor": "var(--seed-color-stroke-neutral-muted)",
6
+ "strokeWidth": "1px",
7
+ "color": "var(--seed-color-bg-transparent)",
8
+ "colorDuration": "var(--seed-duration-color-transition)",
7
9
  "colorTimingFunction": "var(--seed-timing-function-easing)"
8
10
  },
9
11
  "label": {
@@ -24,12 +26,12 @@ export const vars = {
24
26
  },
25
27
  "pressed": {
26
28
  "root": {
27
- "color": "var(--seed-color-bg-neutral-weak-pressed)"
29
+ "color": "var(--seed-color-bg-transparent-pressed)"
28
30
  }
29
31
  },
30
32
  "selected": {
31
33
  "root": {
32
- "color": "var(--seed-color-bg-layer-default)",
34
+ "color": "var(--seed-color-bg-transparent)",
33
35
  "strokeColor": "var(--seed-color-stroke-brand-weak)",
34
36
  "strokeWidth": "1px"
35
37
  },
@@ -49,7 +51,7 @@ export const vars = {
49
51
  },
50
52
  "selectedPressed": {
51
53
  "root": {
52
- "color": "var(--seed-color-bg-layer-default-pressed)"
54
+ "color": "var(--seed-color-bg-transparent-pressed)"
53
55
  }
54
56
  },
55
57
  "disabled": {
@@ -74,7 +76,7 @@ export const vars = {
74
76
  },
75
77
  "selectedLoading": {
76
78
  "root": {
77
- "color": "var(--seed-color-bg-layer-default-pressed)",
79
+ "color": "var(--seed-color-bg-transparent-pressed)",
78
80
  "strokeWidth": "1px"
79
81
  }
80
82
  }
package/vars/component/segmented-control-item.d.ts CHANGED
@@ -8,7 +8,7 @@ export declare const vars: {
8
8
  "paddingY": "var(--seed-dimension-x1_5)",
9
9
  "cornerRadius": "var(--seed-radius-full)",
10
10
  "gap": "var(--seed-dimension-x1_5)",
11
- "colorDuration": "var(--seed-duration-d4)",
11
+ "colorDuration": "var(--seed-duration-color-transition)",
12
12
  "colorTimingFunction": "var(--seed-timing-function-easing)"
13
13
  },
14
14
  "label": {
@@ -16,7 +16,7 @@ export declare const vars: {
16
16
  "lineHeight": "var(--seed-line-height-t5)",
17
17
  "fontWeight": "var(--seed-font-weight-bold)",
18
18
  "color": "var(--seed-color-fg-neutral-subtle)",
19
- "colorDuration": "var(--seed-duration-d4)",
19
+ "colorDuration": "var(--seed-duration-color-transition)",
20
20
  "colorTimingFunction": "var(--seed-timing-function-easing)"
21
21
  }
22
22
  },
package/vars/component/segmented-control-item.mjs CHANGED
@@ -8,7 +8,7 @@ export const vars = {
8
8
  "paddingY": "var(--seed-dimension-x1_5)",
9
9
  "cornerRadius": "var(--seed-radius-full)",
10
10
  "gap": "var(--seed-dimension-x1_5)",
11
- "colorDuration": "var(--seed-duration-d4)",
11
+ "colorDuration": "var(--seed-duration-color-transition)",
12
12
  "colorTimingFunction": "var(--seed-timing-function-easing)"
13
13
  },
14
14
  "label": {
@@ -16,7 +16,7 @@ export const vars = {
16
16
  "lineHeight": "var(--seed-line-height-t5)",
17
17
  "fontWeight": "var(--seed-font-weight-bold)",
18
18
  "color": "var(--seed-color-fg-neutral-subtle)",
19
- "colorDuration": "var(--seed-duration-d4)",
19
+ "colorDuration": "var(--seed-duration-color-transition)",
20
20
  "colorTimingFunction": "var(--seed-timing-function-easing)"
21
21
  }
22
22
  },
package/vars/component/select-box.d.ts CHANGED
@@ -2,12 +2,15 @@ export declare const vars: {
2
2
  "base": {
3
3
  "enabled": {
4
4
  "root": {
5
+ "colorTransitionDuration": "var(--seed-duration-color-transition)",
6
+ "colorTransitionTimingFunction": "var(--seed-timing-function-easing)",
5
7
  "paddingX": "var(--seed-dimension-x4)",
6
8
  "paddingY": "var(--seed-dimension-x5)",
7
9
  "gap": "var(--seed-dimension-x2_5)",
8
10
  "strokeWidth": "1px",
9
11
  "strokeColor": "var(--seed-color-stroke-neutral-muted)",
10
- "cornerRadius": "var(--seed-radius-r3)"
12
+ "cornerRadius": "var(--seed-radius-r3)",
13
+ "color": "var(--seed-color-bg-transparent)"
11
14
  },
12
15
  "content": {
13
16
  "gap": "var(--seed-dimension-x0_5)"
@@ -27,7 +30,7 @@ export declare const vars: {
27
30
  },
28
31
  "enabledPressed": {
29
32
  "root": {
30
- "color": "var(--seed-color-bg-layer-default-pressed)"
33
+ "color": "var(--seed-color-bg-transparent-pressed)"
31
34
  }
32
35
  },
33
36
  "enabledSelected": {
package/vars/component/select-box.mjs CHANGED
@@ -2,12 +2,15 @@ export const vars = {
2
2
  "base": {
3
3
  "enabled": {
4
4
  "root": {
5
+ "colorTransitionDuration": "var(--seed-duration-color-transition)",
6
+ "colorTransitionTimingFunction": "var(--seed-timing-function-easing)",
5
7
  "paddingX": "var(--seed-dimension-x4)",
6
8
  "paddingY": "var(--seed-dimension-x5)",
7
9
  "gap": "var(--seed-dimension-x2_5)",
8
10
  "strokeWidth": "1px",
9
11
  "strokeColor": "var(--seed-color-stroke-neutral-muted)",
10
- "cornerRadius": "var(--seed-radius-r3)"
12
+ "cornerRadius": "var(--seed-radius-r3)",
13
+ "color": "var(--seed-color-bg-transparent)"
11
14
  },
12
15
  "content": {
13
16
  "gap": "var(--seed-dimension-x0_5)"
@@ -27,7 +30,7 @@ export const vars = {
27
30
  },
28
31
  "enabledPressed": {
29
32
  "root": {
30
- "color": "var(--seed-color-bg-layer-default-pressed)"
33
+ "color": "var(--seed-color-bg-transparent-pressed)"
31
34
  }
32
35
  },
33
36
  "enabledSelected": {
package/vars/component/text-input.d.ts CHANGED
@@ -3,7 +3,7 @@ export declare const vars: {
3
3
  "enabled": {
4
4
  "root": {
5
5
  "strokeColor": "var(--seed-color-stroke-neutral-weak)",
6
- "strokeColorDuration": "var(--seed-duration-d3)",
6
+ "strokeColorDuration": "var(--seed-duration-color-transition)",
7
7
  "strokeColorTimingFunction": "var(--seed-timing-function-easing)",
8
8
  "strokeWidthDuration": "var(--seed-duration-d3)",
9
9
  "strokeWidthTimingFunction": "var(--seed-timing-function-easing)"
package/vars/component/text-input.mjs CHANGED
@@ -3,7 +3,7 @@ export const vars = {
3
3
  "enabled": {
4
4
  "root": {
5
5
  "strokeColor": "var(--seed-color-stroke-neutral-weak)",
6
- "strokeColorDuration": "var(--seed-duration-d3)",
6
+ "strokeColorDuration": "var(--seed-duration-color-transition)",
7
7
  "strokeColorTimingFunction": "var(--seed-timing-function-easing)",
8
8
  "strokeWidthDuration": "var(--seed-duration-d3)",
9
9
  "strokeWidthTimingFunction": "var(--seed-timing-function-easing)"
package/vars/component/toggle-button.d.ts CHANGED
@@ -2,7 +2,7 @@ export declare const vars: {
2
2
  "base": {
3
3
  "enabled": {
4
4
  "root": {
5
- "colorDuration": "var(--seed-duration-d4)",
5
+ "colorDuration": "var(--seed-duration-color-transition)",
6
6
  "colorTimingFunction": "var(--seed-timing-function-easing)"
7
7
  },
8
8
  "label": {
package/vars/component/toggle-button.mjs CHANGED
@@ -2,7 +2,7 @@ export const vars = {
2
2
  "base": {
3
3
  "enabled": {
4
4
  "root": {
5
- "colorDuration": "var(--seed-duration-d4)",
5
+ "colorDuration": "var(--seed-duration-color-transition)",
6
6
  "colorTimingFunction": "var(--seed-timing-function-easing)"
7
7
  },
8
8
  "label": {
package/vars/duration.d.ts CHANGED
@@ -3,4 +3,5 @@ export declare const d2 = "var(--seed-duration-d2)";
3
3
  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
- export declare const d6 = "var(--seed-duration-d6)";
6
+ export declare const d6 = "var(--seed-duration-d6)";
7
+ export declare const colorTransition = "var(--seed-duration-color-transition)";
package/vars/duration.mjs CHANGED
@@ -3,4 +3,5 @@ export const d2 = "var(--seed-duration-d2)";
3
3
  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
- export const d6 = "var(--seed-duration-d6)";
6
+ export const d6 = "var(--seed-duration-d6)";
7
+ export const colorTransition = "var(--seed-duration-color-transition)";