@seed-design/css 0.2.4 → 1.0.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 (55) hide show
  1. package/all.css +206 -115
  2. package/all.min.css +1 -1
  3. package/base.css +39 -23
  4. package/base.min.css +1 -1
  5. package/package.json +2 -1
  6. package/recipes/help-bubble.css +6 -7
  7. package/recipes/list-header.css +19 -0
  8. package/recipes/list-header.d.ts +22 -0
  9. package/recipes/list-header.mjs +29 -0
  10. package/recipes/manner-temp-badge.css +17 -1
  11. package/recipes/manner-temp-badge.d.ts +1 -1
  12. package/recipes/manner-temp-badge.mjs +5 -1
  13. package/recipes/manner-temp.css +13 -2
  14. package/recipes/manner-temp.d.ts +1 -1
  15. package/recipes/manner-temp.mjs +5 -1
  16. package/recipes/segmented-control.css +18 -9
  17. package/recipes/snackbar.css +12 -6
  18. package/recipes/snackbar.d.ts +1 -1
  19. package/recipes/snackbar.mjs +4 -0
  20. package/recipes/switch-mark.css +66 -0
  21. package/recipes/switch-mark.d.ts +28 -0
  22. package/recipes/switch-mark.mjs +49 -0
  23. package/recipes/switch.css +6 -71
  24. package/recipes/switch.d.ts +1 -5
  25. package/recipes/switch.mjs +0 -13
  26. package/vars/color/manner-temp/index.d.ts +5 -1
  27. package/vars/color/manner-temp/index.mjs +5 -1
  28. package/vars/color/manner-temp/l10.d.ts +2 -0
  29. package/vars/color/manner-temp/l10.mjs +2 -0
  30. package/vars/color/manner-temp/l7.d.ts +2 -0
  31. package/vars/color/manner-temp/l7.mjs +2 -0
  32. package/vars/color/manner-temp/l8.d.ts +2 -0
  33. package/vars/color/manner-temp/l8.mjs +2 -0
  34. package/vars/color/manner-temp/l9.d.ts +2 -0
  35. package/vars/color/manner-temp/l9.mjs +2 -0
  36. package/vars/component/help-bubble.d.ts +5 -6
  37. package/vars/component/help-bubble.mjs +5 -6
  38. package/vars/component/index.d.ts +2 -0
  39. package/vars/component/index.mjs +2 -0
  40. package/vars/component/list-header.d.ts +29 -0
  41. package/vars/component/list-header.mjs +29 -0
  42. package/vars/component/manner-temp-badge.d.ts +41 -1
  43. package/vars/component/manner-temp-badge.mjs +41 -1
  44. package/vars/component/manner-temp.d.ts +29 -4
  45. package/vars/component/manner-temp.mjs +29 -4
  46. package/vars/component/segmented-control-item.d.ts +21 -6
  47. package/vars/component/segmented-control-item.mjs +21 -6
  48. package/vars/component/segmented-control.d.ts +3 -1
  49. package/vars/component/segmented-control.mjs +3 -1
  50. package/vars/component/snackbar.d.ts +9 -5
  51. package/vars/component/snackbar.mjs +9 -5
  52. package/vars/component/switch-mark.d.ts +86 -0
  53. package/vars/component/switch-mark.mjs +86 -0
  54. package/vars/component/switch.d.ts +3 -69
  55. package/vars/component/switch.mjs +3 -69
package/vars/component/manner-temp.d.ts CHANGED
@@ -1,16 +1,13 @@
1
1
  export declare const vars: {
2
2
  "base": {
3
3
  "enabled": {
4
- "root": {
5
- "gap": "var(--seed-dimension-x1)"
6
- },
7
4
  "label": {
8
5
  "fontSize": "var(--seed-font-size-t5)",
9
6
  "lineHeight": "var(--seed-line-height-t5)",
10
7
  "fontWeight": "var(--seed-font-weight-bold)"
11
8
  },
12
9
  "emote": {
13
- "size": "var(--seed-dimension-x6)"
10
+ "size": "var(--seed-dimension-x8)"
14
11
  }
15
12
  }
16
13
  },
@@ -55,5 +52,33 @@ export declare const vars: {
55
52
  "color": "var(--seed-color-manner-temp-l6-text)"
56
53
  }
57
54
  }
55
+ },
56
+ "levelL7": {
57
+ "enabled": {
58
+ "label": {
59
+ "color": "var(--seed-color-manner-temp-l7-text)"
60
+ }
61
+ }
62
+ },
63
+ "levelL8": {
64
+ "enabled": {
65
+ "label": {
66
+ "color": "var(--seed-color-manner-temp-l8-text)"
67
+ }
68
+ }
69
+ },
70
+ "levelL9": {
71
+ "enabled": {
72
+ "label": {
73
+ "color": "var(--seed-color-manner-temp-l9-text)"
74
+ }
75
+ }
76
+ },
77
+ "levelL10": {
78
+ "enabled": {
79
+ "label": {
80
+ "color": "var(--seed-color-manner-temp-l10-text)"
81
+ }
82
+ }
58
83
  }
59
84
  }
package/vars/component/manner-temp.mjs CHANGED
@@ -1,16 +1,13 @@
1
1
  export const vars = {
2
2
  "base": {
3
3
  "enabled": {
4
- "root": {
5
- "gap": "var(--seed-dimension-x1)"
6
- },
7
4
  "label": {
8
5
  "fontSize": "var(--seed-font-size-t5)",
9
6
  "lineHeight": "var(--seed-line-height-t5)",
10
7
  "fontWeight": "var(--seed-font-weight-bold)"
11
8
  },
12
9
  "emote": {
13
- "size": "var(--seed-dimension-x6)"
10
+ "size": "var(--seed-dimension-x8)"
14
11
  }
15
12
  }
16
13
  },
@@ -55,5 +52,33 @@ export const vars = {
55
52
  "color": "var(--seed-color-manner-temp-l6-text)"
56
53
  }
57
54
  }
55
+ },
56
+ "levelL7": {
57
+ "enabled": {
58
+ "label": {
59
+ "color": "var(--seed-color-manner-temp-l7-text)"
60
+ }
61
+ }
62
+ },
63
+ "levelL8": {
64
+ "enabled": {
65
+ "label": {
66
+ "color": "var(--seed-color-manner-temp-l8-text)"
67
+ }
68
+ }
69
+ },
70
+ "levelL9": {
71
+ "enabled": {
72
+ "label": {
73
+ "color": "var(--seed-color-manner-temp-l9-text)"
74
+ }
75
+ }
76
+ },
77
+ "levelL10": {
78
+ "enabled": {
79
+ "label": {
80
+ "color": "var(--seed-color-manner-temp-l10-text)"
81
+ }
82
+ }
58
83
  }
59
84
  }
package/vars/component/segmented-control-item.d.ts CHANGED
@@ -2,16 +2,22 @@ export declare 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 declare 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-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/snackbar.d.ts CHANGED
@@ -8,13 +8,12 @@ export declare const vars: {
8
8
  "offsetTimingFunction": "var(--seed-timing-function-easing)"
9
9
  },
10
10
  "root": {
11
- "color": "var(--seed-color-bg-neutral-solid)",
11
+ "color": "var(--seed-color-bg-neutral-inverted)",
12
12
  "cornerRadius": "var(--seed-radius-r2)",
13
13
  "minHeight": "44px",
14
14
  "maxWidth": "560px",
15
- "paddingX": "var(--seed-dimension-x4)",
15
+ "paddingX": "var(--seed-dimension-x2_5)",
16
16
  "paddingY": "var(--seed-dimension-x2_5)",
17
- "gap": "var(--seed-dimension-x2)",
18
17
  "enterOpacity": "0",
19
18
  "enterScale": "0.8",
20
19
  "enterDuration": "var(--seed-duration-d3)",
@@ -24,14 +23,19 @@ export declare const vars: {
24
23
  "exitDuration": "var(--seed-duration-d2)",
25
24
  "exitTimingFunction": "var(--seed-timing-function-exit)"
26
25
  },
26
+ "content": {
27
+ "paddingX": "var(--seed-dimension-x1_5)",
28
+ "gap": "var(--seed-dimension-x2_5)"
29
+ },
27
30
  "message": {
28
- "color": "var(--seed-color-palette-static-white)",
31
+ "color": "var(--seed-color-fg-neutral-inverted)",
29
32
  "fontSize": "var(--seed-font-size-t4)",
30
33
  "lineHeight": "var(--seed-line-height-t4)",
31
34
  "fontWeight": "var(--seed-font-weight-regular)"
32
35
  },
33
36
  "prefixIcon": {
34
- "size": "24px"
37
+ "size": "24px",
38
+ "paddingRight": "var(--seed-dimension-x0_5)"
35
39
  },
36
40
  "actionButton": {
37
41
  "targetPaddingX": "var(--seed-dimension-x2)",
package/vars/component/snackbar.mjs CHANGED
@@ -8,13 +8,12 @@ export const vars = {
8
8
  "offsetTimingFunction": "var(--seed-timing-function-easing)"
9
9
  },
10
10
  "root": {
11
- "color": "var(--seed-color-bg-neutral-solid)",
11
+ "color": "var(--seed-color-bg-neutral-inverted)",
12
12
  "cornerRadius": "var(--seed-radius-r2)",
13
13
  "minHeight": "44px",
14
14
  "maxWidth": "560px",
15
- "paddingX": "var(--seed-dimension-x4)",
15
+ "paddingX": "var(--seed-dimension-x2_5)",
16
16
  "paddingY": "var(--seed-dimension-x2_5)",
17
- "gap": "var(--seed-dimension-x2)",
18
17
  "enterOpacity": "0",
19
18
  "enterScale": "0.8",
20
19
  "enterDuration": "var(--seed-duration-d3)",
@@ -24,14 +23,19 @@ export const vars = {
24
23
  "exitDuration": "var(--seed-duration-d2)",
25
24
  "exitTimingFunction": "var(--seed-timing-function-exit)"
26
25
  },
26
+ "content": {
27
+ "paddingX": "var(--seed-dimension-x1_5)",
28
+ "gap": "var(--seed-dimension-x2_5)"
29
+ },
27
30
  "message": {
28
- "color": "var(--seed-color-palette-static-white)",
31
+ "color": "var(--seed-color-fg-neutral-inverted)",
29
32
  "fontSize": "var(--seed-font-size-t4)",
30
33
  "lineHeight": "var(--seed-line-height-t4)",
31
34
  "fontWeight": "var(--seed-font-weight-regular)"
32
35
  },
33
36
  "prefixIcon": {
34
- "size": "24px"
37
+ "size": "24px",
38
+ "paddingRight": "var(--seed-dimension-x0_5)"
35
39
  },
36
40
  "actionButton": {
37
41
  "targetPaddingX": "var(--seed-dimension-x2)",
package/vars/component/switch-mark.d.ts ADDED
@@ -0,0 +1,86 @@
1
+ export declare const vars: {
2
+ "base": {
3
+ "enabled": {
4
+ "root": {
5
+ "color": "var(--seed-color-palette-gray-600)",
6
+ "cornerRadius": "var(--seed-radius-full)"
7
+ },
8
+ "thumb": {
9
+ "cornerRadius": "var(--seed-radius-full)"
10
+ }
11
+ },
12
+ "disabled": {
13
+ "root": {
14
+ "opacity": "0.38"
15
+ }
16
+ }
17
+ },
18
+ "toneBrand": {
19
+ "enabled": {
20
+ "thumb": {
21
+ "color": "var(--seed-color-palette-static-white)"
22
+ }
23
+ },
24
+ "enabledSelected": {
25
+ "root": {
26
+ "color": "var(--seed-color-bg-brand-solid)"
27
+ }
28
+ }
29
+ },
30
+ "toneNeutral": {
31
+ "enabled": {
32
+ "thumb": {
33
+ "color": "var(--seed-color-fg-neutral-inverted)"
34
+ }
35
+ },
36
+ "enabledSelected": {
37
+ "root": {
38
+ "color": "var(--seed-color-bg-neutral-inverted)"
39
+ }
40
+ }
41
+ },
42
+ "size32": {
43
+ "enabled": {
44
+ "root": {
45
+ "height": "32px",
46
+ "width": "52px",
47
+ "paddingX": "3px",
48
+ "paddingY": "3px"
49
+ },
50
+ "thumb": {
51
+ "height": "26px",
52
+ "width": "26px",
53
+ "shadow": "0px 3px 8px 0px #00000026, 0px 1px 3px 0px #0000000f"
54
+ }
55
+ }
56
+ },
57
+ "size24": {
58
+ "enabled": {
59
+ "root": {
60
+ "height": "24px",
61
+ "width": "38px",
62
+ "paddingX": "2px",
63
+ "paddingY": "2px"
64
+ },
65
+ "thumb": {
66
+ "height": "20px",
67
+ "width": "20px",
68
+ "shadow": "0px 3px 8px 0px #00000026, 0px 1px 3px 0px #0000000f"
69
+ }
70
+ }
71
+ },
72
+ "size16": {
73
+ "enabled": {
74
+ "root": {
75
+ "height": "16px",
76
+ "width": "26px",
77
+ "paddingX": "2px",
78
+ "paddingY": "2px"
79
+ },
80
+ "thumb": {
81
+ "height": "12px",
82
+ "width": "12px"
83
+ }
84
+ }
85
+ }
86
+ }
package/vars/component/switch-mark.mjs ADDED
@@ -0,0 +1,86 @@
1
+ export const vars = {
2
+ "base": {
3
+ "enabled": {
4
+ "root": {
5
+ "color": "var(--seed-color-palette-gray-600)",
6
+ "cornerRadius": "var(--seed-radius-full)"
7
+ },
8
+ "thumb": {
9
+ "cornerRadius": "var(--seed-radius-full)"
10
+ }
11
+ },
12
+ "disabled": {
13
+ "root": {
14
+ "opacity": "0.38"
15
+ }
16
+ }
17
+ },
18
+ "toneBrand": {
19
+ "enabled": {
20
+ "thumb": {
21
+ "color": "var(--seed-color-palette-static-white)"
22
+ }
23
+ },
24
+ "enabledSelected": {
25
+ "root": {
26
+ "color": "var(--seed-color-bg-brand-solid)"
27
+ }
28
+ }
29
+ },
30
+ "toneNeutral": {
31
+ "enabled": {
32
+ "thumb": {
33
+ "color": "var(--seed-color-fg-neutral-inverted)"
34
+ }
35
+ },
36
+ "enabledSelected": {
37
+ "root": {
38
+ "color": "var(--seed-color-bg-neutral-inverted)"
39
+ }
40
+ }
41
+ },
42
+ "size32": {
43
+ "enabled": {
44
+ "root": {
45
+ "height": "32px",
46
+ "width": "52px",
47
+ "paddingX": "3px",
48
+ "paddingY": "3px"
49
+ },
50
+ "thumb": {
51
+ "height": "26px",
52
+ "width": "26px",
53
+ "shadow": "0px 3px 8px 0px #00000026, 0px 1px 3px 0px #0000000f"
54
+ }
55
+ }
56
+ },
57
+ "size24": {
58
+ "enabled": {
59
+ "root": {
60
+ "height": "24px",
61
+ "width": "38px",
62
+ "paddingX": "2px",
63
+ "paddingY": "2px"
64
+ },
65
+ "thumb": {
66
+ "height": "20px",
67
+ "width": "20px",
68
+ "shadow": "0px 3px 8px 0px #00000026, 0px 1px 3px 0px #0000000f"
69
+ }
70
+ }
71
+ },
72
+ "size16": {
73
+ "enabled": {
74
+ "root": {
75
+ "height": "16px",
76
+ "width": "26px",
77
+ "paddingX": "2px",
78
+ "paddingY": "2px"
79
+ },
80
+ "thumb": {
81
+ "height": "12px",
82
+ "width": "12px"
83
+ }
84
+ }
85
+ }
86
+ }
package/vars/component/switch.d.ts CHANGED
@@ -1,68 +1,23 @@
1
1
  export declare const vars: {
2
2
  "base": {
3
3
  "enabled": {
4
- "control": {
5
- "color": "var(--seed-color-palette-gray-600)",
6
- "cornerRadius": "var(--seed-radius-full)"
7
- },
8
- "thumb": {
9
- "cornerRadius": "var(--seed-radius-full)"
10
- },
11
4
  "label": {
12
5
  "color": "var(--seed-color-fg-neutral)",
13
6
  "fontWeight": "var(--seed-font-weight-medium)"
14
7
  }
15
8
  },
16
9
  "disabled": {
17
- "control": {
18
- "opacity": "0.38"
19
- },
20
10
  "label": {
21
11
  "color": "var(--seed-color-fg-disabled)"
22
12
  }
23
13
  }
24
14
  },
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
- },
49
15
  "size32": {
50
16
  "enabled": {
51
17
  "root": {
52
- "height": "32px",
18
+ "height": "var(--seed-dimension-x8)",
53
19
  "gap": "var(--seed-dimension-x2_5)"
54
20
  },
55
- "control": {
56
- "height": "32px",
57
- "width": "52px",
58
- "paddingX": "3px",
59
- "paddingY": "3px"
60
- },
61
- "thumb": {
62
- "height": "26px",
63
- "width": "26px",
64
- "shadow": "0px 3px 8px 0px #00000026, 0px 1px 3px 0px #0000000f"
65
- },
66
21
  "label": {
67
22
  "fontSize": "var(--seed-font-size-t5)",
68
23
  "lineHeight": "var(--seed-line-height-t5)"
@@ -72,20 +27,9 @@ export declare const vars: {
72
27
  "size24": {
73
28
  "enabled": {
74
29
  "root": {
75
- "height": "24px",
30
+ "height": "var(--seed-dimension-x6)",
76
31
  "gap": "var(--seed-dimension-x2)"
77
32
  },
78
- "control": {
79
- "height": "24px",
80
- "width": "38px",
81
- "paddingX": "2px",
82
- "paddingY": "2px"
83
- },
84
- "thumb": {
85
- "height": "20px",
86
- "width": "20px",
87
- "shadow": "0px 3px 8px 0px #00000026, 0px 1px 3px 0px #0000000f"
88
- },
89
33
  "label": {
90
34
  "fontSize": "var(--seed-font-size-t4)",
91
35
  "lineHeight": "var(--seed-line-height-t4)"
@@ -95,19 +39,9 @@ export declare const vars: {
95
39
  "size16": {
96
40
  "enabled": {
97
41
  "root": {
98
- "height": "24px",
42
+ "height": "var(--seed-dimension-x6)",
99
43
  "gap": "var(--seed-dimension-x1_5)"
100
44
  },
101
- "control": {
102
- "height": "16px",
103
- "width": "26px",
104
- "paddingX": "2px",
105
- "paddingY": "2px"
106
- },
107
- "thumb": {
108
- "height": "12px",
109
- "width": "12px"
110
- },
111
45
  "label": {
112
46
  "fontSize": "var(--seed-font-size-t3)",
113
47
  "lineHeight": "var(--seed-line-height-t3)"