@seed-design/css 0.2.3 → 0.2.5

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 (41) hide show
  1. package/all.css +119 -67
  2. package/all.min.css +1 -1
  3. package/base.css +2 -2
  4. package/base.min.css +1 -1
  5. package/package.json +1 -1
  6. package/recipes/badge.css +1 -1
  7. package/recipes/checkbox.css +2 -2
  8. package/recipes/checkbox.d.ts +2 -2
  9. package/recipes/checkbox.mjs +3 -3
  10. package/recipes/checkmark.css +34 -31
  11. package/recipes/checkmark.d.ts +4 -0
  12. package/recipes/checkmark.mjs +23 -2
  13. package/recipes/page-banner.css +5 -5
  14. package/recipes/radio.css +2 -2
  15. package/recipes/radio.d.ts +2 -2
  16. package/recipes/radio.mjs +3 -3
  17. package/recipes/radiomark.css +19 -7
  18. package/recipes/radiomark.d.ts +4 -0
  19. package/recipes/radiomark.mjs +5 -0
  20. package/recipes/segmented-control.css +18 -9
  21. package/recipes/switch.css +15 -7
  22. package/recipes/switch.d.ts +4 -0
  23. package/recipes/switch.mjs +5 -0
  24. package/vars/component/badge.d.ts +1 -1
  25. package/vars/component/badge.mjs +1 -1
  26. package/vars/component/checkbox.d.ts +2 -2
  27. package/vars/component/checkbox.mjs +2 -2
  28. package/vars/component/checkmark.d.ts +57 -23
  29. package/vars/component/checkmark.mjs +57 -23
  30. package/vars/component/page-banner.d.ts +5 -5
  31. package/vars/component/page-banner.mjs +5 -5
  32. package/vars/component/radio.d.ts +2 -2
  33. package/vars/component/radio.mjs +2 -2
  34. package/vars/component/radiomark.d.ts +32 -11
  35. package/vars/component/radiomark.mjs +32 -11
  36. package/vars/component/segmented-control-item.d.ts +21 -6
  37. package/vars/component/segmented-control-item.mjs +21 -6
  38. package/vars/component/segmented-control.d.ts +3 -1
  39. package/vars/component/segmented-control.mjs +3 -1
  40. package/vars/component/switch.d.ts +28 -10
  41. package/vars/component/switch.mjs +28 -10
package/vars/component/segmented-control-item.mjs CHANGED
@@ -2,16 +2,22 @@ export const vars = {
2
2
  "base": {
3
3
  "enabled": {
4
4
  "root": {
5
- "height": "var(--seed-dimension-x8)",
5
+ "minWidth": "86px",
6
+ "minHeight": "34px",
7
+ "paddingX": "var(--seed-dimension-x6)",
8
+ "paddingY": "var(--seed-dimension-x1_5)",
6
9
  "cornerRadius": "var(--seed-radius-full)",
7
- "paddingX": "var(--seed-dimension-x4)",
8
- "minWidth": "86px"
10
+ "gap": "var(--seed-dimension-x1_5)",
11
+ "colorDuration": "var(--seed-duration-d4)",
12
+ "colorTimingFunction": "var(--seed-timing-function-easing)"
9
13
  },
10
14
  "label": {
11
15
  "fontSize": "var(--seed-font-size-t5)",
12
16
  "lineHeight": "var(--seed-line-height-t5)",
13
- "fontWeight": "var(--seed-font-weight-medium)",
14
- "color": "var(--seed-color-fg-neutral-muted)"
17
+ "fontWeight": "var(--seed-font-weight-bold)",
18
+ "color": "var(--seed-color-fg-neutral-subtle)",
19
+ "colorDuration": "var(--seed-duration-d4)",
20
+ "colorTimingFunction": "var(--seed-timing-function-easing)"
15
21
  }
16
22
  },
17
23
  "pressed": {
@@ -21,14 +27,23 @@ export const vars = {
21
27
  },
22
28
  "selected": {
23
29
  "label": {
24
- "fontWeight": "var(--seed-font-weight-bold)",
25
30
  "color": "var(--seed-color-fg-neutral)"
26
31
  }
27
32
  },
33
+ "selectedPressed": {
34
+ "root": {
35
+ "color": "var(--seed-color-palette-gray-100)"
36
+ }
37
+ },
28
38
  "disabled": {
29
39
  "label": {
30
40
  "color": "var(--seed-color-fg-disabled)"
31
41
  }
42
+ },
43
+ "disabledSelected": {
44
+ "root": {
45
+ "color": "var(--seed-color-bg-disabled)"
46
+ }
32
47
  }
33
48
  }
34
49
  }
package/vars/component/segmented-control.d.ts CHANGED
@@ -7,8 +7,10 @@ export declare const vars: {
7
7
  "color": "var(--seed-color-bg-neutral-weak)"
8
8
  },
9
9
  "indicator": {
10
- "color": "var(--seed-color-bg-layer-default)",
10
+ "color": "var(--seed-color-palette-gray-00)",
11
11
  "cornerRadius": "var(--seed-radius-full)",
12
+ "strokeWidth": "1px",
13
+ "strokeColor": "var(--seed-color-stroke-neutral-muted)",
12
14
  "shadow": "0px 1px 6px 0px #0000000d",
13
15
  "transformDuration": "var(--seed-duration-d4)",
14
16
  "transformTimingFunction": "var(--seed-timing-function-easing)"
package/vars/component/segmented-control.mjs CHANGED
@@ -7,8 +7,10 @@ export const vars = {
7
7
  "color": "var(--seed-color-bg-neutral-weak)"
8
8
  },
9
9
  "indicator": {
10
- "color": "var(--seed-color-bg-layer-default)",
10
+ "color": "var(--seed-color-palette-gray-00)",
11
11
  "cornerRadius": "var(--seed-radius-full)",
12
+ "strokeWidth": "1px",
13
+ "strokeColor": "var(--seed-color-stroke-neutral-muted)",
12
14
  "shadow": "0px 1px 6px 0px #0000000d",
13
15
  "transformDuration": "var(--seed-duration-d4)",
14
16
  "transformTimingFunction": "var(--seed-timing-function-easing)"
package/vars/component/switch.d.ts CHANGED
@@ -6,7 +6,6 @@ export declare const vars: {
6
6
  "cornerRadius": "var(--seed-radius-full)"
7
7
  },
8
8
  "thumb": {
9
- "color": "var(--seed-color-palette-static-white)",
10
9
  "cornerRadius": "var(--seed-radius-full)"
11
10
  },
12
11
  "label": {
@@ -14,11 +13,6 @@ export declare const vars: {
14
13
  "fontWeight": "var(--seed-font-weight-medium)"
15
14
  }
16
15
  },
17
- "enabledSelected": {
18
- "control": {
19
- "color": "var(--seed-color-bg-brand-solid)"
20
- }
21
- },
22
16
  "disabled": {
23
17
  "control": {
24
18
  "opacity": "0.38"
@@ -28,6 +22,30 @@ export declare const vars: {
28
22
  }
29
23
  }
30
24
  },
25
+ "toneBrand": {
26
+ "enabled": {
27
+ "thumb": {
28
+ "color": "var(--seed-color-palette-static-white)"
29
+ }
30
+ },
31
+ "enabledSelected": {
32
+ "control": {
33
+ "color": "var(--seed-color-bg-brand-solid)"
34
+ }
35
+ }
36
+ },
37
+ "toneNeutral": {
38
+ "enabled": {
39
+ "thumb": {
40
+ "color": "var(--seed-color-fg-neutral-inverted)"
41
+ }
42
+ },
43
+ "enabledSelected": {
44
+ "control": {
45
+ "color": "var(--seed-color-bg-neutral-inverted)"
46
+ }
47
+ }
48
+ },
31
49
  "size32": {
32
50
  "enabled": {
33
51
  "root": {
@@ -37,12 +55,12 @@ export declare const vars: {
37
55
  "control": {
38
56
  "height": "32px",
39
57
  "width": "52px",
40
- "paddingX": "2px",
41
- "paddingY": "2px"
58
+ "paddingX": "3px",
59
+ "paddingY": "3px"
42
60
  },
43
61
  "thumb": {
44
- "height": "28px",
45
- "width": "28px",
62
+ "height": "26px",
63
+ "width": "26px",
46
64
  "shadow": "0px 3px 8px 0px #00000026, 0px 1px 3px 0px #0000000f"
47
65
  },
48
66
  "label": {
package/vars/component/switch.mjs CHANGED
@@ -6,7 +6,6 @@ export const vars = {
6
6
  "cornerRadius": "var(--seed-radius-full)"
7
7
  },
8
8
  "thumb": {
9
- "color": "var(--seed-color-palette-static-white)",
10
9
  "cornerRadius": "var(--seed-radius-full)"
11
10
  },
12
11
  "label": {
@@ -14,11 +13,6 @@ export const vars = {
14
13
  "fontWeight": "var(--seed-font-weight-medium)"
15
14
  }
16
15
  },
17
- "enabledSelected": {
18
- "control": {
19
- "color": "var(--seed-color-bg-brand-solid)"
20
- }
21
- },
22
16
  "disabled": {
23
17
  "control": {
24
18
  "opacity": "0.38"
@@ -28,6 +22,30 @@ export const vars = {
28
22
  }
29
23
  }
30
24
  },
25
+ "toneBrand": {
26
+ "enabled": {
27
+ "thumb": {
28
+ "color": "var(--seed-color-palette-static-white)"
29
+ }
30
+ },
31
+ "enabledSelected": {
32
+ "control": {
33
+ "color": "var(--seed-color-bg-brand-solid)"
34
+ }
35
+ }
36
+ },
37
+ "toneNeutral": {
38
+ "enabled": {
39
+ "thumb": {
40
+ "color": "var(--seed-color-fg-neutral-inverted)"
41
+ }
42
+ },
43
+ "enabledSelected": {
44
+ "control": {
45
+ "color": "var(--seed-color-bg-neutral-inverted)"
46
+ }
47
+ }
48
+ },
31
49
  "size32": {
32
50
  "enabled": {
33
51
  "root": {
@@ -37,12 +55,12 @@ export const vars = {
37
55
  "control": {
38
56
  "height": "32px",
39
57
  "width": "52px",
40
- "paddingX": "2px",
41
- "paddingY": "2px"
58
+ "paddingX": "3px",
59
+ "paddingY": "3px"
42
60
  },
43
61
  "thumb": {
44
- "height": "28px",
45
- "width": "28px",
62
+ "height": "26px",
63
+ "width": "26px",
46
64
  "shadow": "0px 3px 8px 0px #00000026, 0px 1px 3px 0px #0000000f"
47
65
  },
48
66
  "label": {