@seed-design/vars 0.0.1-alpha-20250210081704

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 (138) hide show
  1. package/README.md +2 -0
  2. package/lib/color/bg.d.ts +39 -0
  3. package/lib/color/bg.mjs +39 -0
  4. package/lib/color/fg.d.ts +17 -0
  5. package/lib/color/fg.mjs +17 -0
  6. package/lib/color/index.d.ts +5 -0
  7. package/lib/color/index.mjs +5 -0
  8. package/lib/color/manner-temp/index.d.ts +6 -0
  9. package/lib/color/manner-temp/index.mjs +6 -0
  10. package/lib/color/manner-temp/l1.d.ts +2 -0
  11. package/lib/color/manner-temp/l1.mjs +2 -0
  12. package/lib/color/manner-temp/l2.d.ts +2 -0
  13. package/lib/color/manner-temp/l2.mjs +2 -0
  14. package/lib/color/manner-temp/l3.d.ts +2 -0
  15. package/lib/color/manner-temp/l3.mjs +2 -0
  16. package/lib/color/manner-temp/l4.d.ts +2 -0
  17. package/lib/color/manner-temp/l4.mjs +2 -0
  18. package/lib/color/manner-temp/l5.d.ts +2 -0
  19. package/lib/color/manner-temp/l5.mjs +2 -0
  20. package/lib/color/manner-temp/l6.d.ts +2 -0
  21. package/lib/color/manner-temp/l6.mjs +2 -0
  22. package/lib/color/palette.d.ts +78 -0
  23. package/lib/color/palette.mjs +78 -0
  24. package/lib/color/stroke.d.ts +10 -0
  25. package/lib/color/stroke.mjs +10 -0
  26. package/lib/component/action-button.d.ts +491 -0
  27. package/lib/component/action-button.mjs +491 -0
  28. package/lib/component/action-chip.d.ts +128 -0
  29. package/lib/component/action-chip.mjs +128 -0
  30. package/lib/component/action-sheet-close-button.d.ts +23 -0
  31. package/lib/component/action-sheet-close-button.mjs +23 -0
  32. package/lib/component/action-sheet-item.d.ts +36 -0
  33. package/lib/component/action-sheet-item.mjs +36 -0
  34. package/lib/component/action-sheet.d.ts +45 -0
  35. package/lib/component/action-sheet.mjs +45 -0
  36. package/lib/component/avatar-stack.d.ts +60 -0
  37. package/lib/component/avatar-stack.mjs +60 -0
  38. package/lib/component/avatar.d.ts +83 -0
  39. package/lib/component/avatar.mjs +83 -0
  40. package/lib/component/badge.d.ts +223 -0
  41. package/lib/component/badge.mjs +223 -0
  42. package/lib/component/bottom-sheet.d.ts +61 -0
  43. package/lib/component/bottom-sheet.mjs +61 -0
  44. package/lib/component/callout.d.ts +185 -0
  45. package/lib/component/callout.mjs +185 -0
  46. package/lib/component/checkbox.d.ts +171 -0
  47. package/lib/component/checkbox.mjs +171 -0
  48. package/lib/component/chip-tab.d.ts +98 -0
  49. package/lib/component/chip-tab.mjs +98 -0
  50. package/lib/component/chip-tablist.d.ts +23 -0
  51. package/lib/component/chip-tablist.mjs +23 -0
  52. package/lib/component/control-chip.d.ts +156 -0
  53. package/lib/component/control-chip.mjs +156 -0
  54. package/lib/component/dialog.d.ts +49 -0
  55. package/lib/component/dialog.mjs +49 -0
  56. package/lib/component/expand-button.d.ts +41 -0
  57. package/lib/component/expand-button.mjs +41 -0
  58. package/lib/component/extended-action-sheet-close-button.d.ts +25 -0
  59. package/lib/component/extended-action-sheet-close-button.mjs +25 -0
  60. package/lib/component/extended-action-sheet-item.d.ts +46 -0
  61. package/lib/component/extended-action-sheet-item.mjs +46 -0
  62. package/lib/component/extended-action-sheet.d.ts +48 -0
  63. package/lib/component/extended-action-sheet.mjs +48 -0
  64. package/lib/component/extended-fab.d.ts +82 -0
  65. package/lib/component/extended-fab.mjs +82 -0
  66. package/lib/component/fab.d.ts +21 -0
  67. package/lib/component/fab.mjs +21 -0
  68. package/lib/component/help-bubble.d.ts +36 -0
  69. package/lib/component/help-bubble.mjs +36 -0
  70. package/lib/component/identity-placeholder.d.ts +12 -0
  71. package/lib/component/identity-placeholder.mjs +12 -0
  72. package/lib/component/index.d.ts +40 -0
  73. package/lib/component/index.mjs +40 -0
  74. package/lib/component/inline-banner.d.ts +211 -0
  75. package/lib/component/inline-banner.mjs +211 -0
  76. package/lib/component/manner-temp-badge.d.ts +77 -0
  77. package/lib/component/manner-temp-badge.mjs +77 -0
  78. package/lib/component/progress-circle.d.ts +67 -0
  79. package/lib/component/progress-circle.mjs +67 -0
  80. package/lib/component/radio.d.ts +77 -0
  81. package/lib/component/radio.mjs +77 -0
  82. package/lib/component/reaction-button.d.ts +134 -0
  83. package/lib/component/reaction-button.mjs +134 -0
  84. package/lib/component/segment.d.ts +34 -0
  85. package/lib/component/segment.mjs +34 -0
  86. package/lib/component/segmented-control-item.d.ts +34 -0
  87. package/lib/component/segmented-control-item.mjs +34 -0
  88. package/lib/component/segmented-control.d.ts +18 -0
  89. package/lib/component/segmented-control.mjs +18 -0
  90. package/lib/component/select-box-group.d.ts +9 -0
  91. package/lib/component/select-box-group.mjs +9 -0
  92. package/lib/component/select-box.d.ts +92 -0
  93. package/lib/component/select-box.mjs +92 -0
  94. package/lib/component/skeleton.d.ts +42 -0
  95. package/lib/component/skeleton.mjs +42 -0
  96. package/lib/component/snackbar.d.ts +58 -0
  97. package/lib/component/snackbar.mjs +58 -0
  98. package/lib/component/switch.d.ts +65 -0
  99. package/lib/component/switch.mjs +65 -0
  100. package/lib/component/tab.d.ts +53 -0
  101. package/lib/component/tab.mjs +53 -0
  102. package/lib/component/tablist.d.ts +51 -0
  103. package/lib/component/tablist.mjs +51 -0
  104. package/lib/component/text-button.d.ts +107 -0
  105. package/lib/component/text-button.mjs +107 -0
  106. package/lib/component/text-field.d.ts +295 -0
  107. package/lib/component/text-field.mjs +295 -0
  108. package/lib/component/toggle-button.d.ts +205 -0
  109. package/lib/component/toggle-button.mjs +205 -0
  110. package/lib/component/top-navigation.d.ts +86 -0
  111. package/lib/component/top-navigation.mjs +86 -0
  112. package/lib/component/typography.d.ts +209 -0
  113. package/lib/component/typography.mjs +209 -0
  114. package/lib/dimension/index.d.ts +22 -0
  115. package/lib/dimension/index.mjs +22 -0
  116. package/lib/dimension/spacing-x.d.ts +2 -0
  117. package/lib/dimension/spacing-x.mjs +2 -0
  118. package/lib/dimension/spacing-y.d.ts +2 -0
  119. package/lib/dimension/spacing-y.mjs +2 -0
  120. package/lib/duration.d.ts +6 -0
  121. package/lib/duration.mjs +6 -0
  122. package/lib/font-size.d.ts +13 -0
  123. package/lib/font-size.mjs +13 -0
  124. package/lib/font-weight.d.ts +3 -0
  125. package/lib/font-weight.mjs +3 -0
  126. package/lib/gradient.d.ts +1 -0
  127. package/lib/gradient.mjs +1 -0
  128. package/lib/index.d.ts +32 -0
  129. package/lib/index.mjs +1 -0
  130. package/lib/line-height.d.ts +10 -0
  131. package/lib/line-height.mjs +10 -0
  132. package/lib/radius.d.ts +11 -0
  133. package/lib/radius.mjs +11 -0
  134. package/lib/timing-function.d.ts +6 -0
  135. package/lib/timing-function.mjs +6 -0
  136. package/lib/vars.d.ts +9 -0
  137. package/lib/vars.mjs +9 -0
  138. package/package.json +43 -0
package/lib/component/select-box.d.ts ADDED
@@ -0,0 +1,92 @@
1
+ export declare const vars: {
2
+ "base": {
3
+ "enabled": {
4
+ "root": {
5
+ "paddingX": "var(--seed-v3-dimension-s4)",
6
+ "paddingY": "var(--seed-v3-dimension-s5)",
7
+ "gap": "var(--seed-v3-dimension-s2_5)",
8
+ "strokeWidth": "1px",
9
+ "strokeColor": "var(--seed-v3-color-stroke-neutral)",
10
+ "cornerRadius": "var(--seed-v3-radius-s3)"
11
+ },
12
+ "content": {
13
+ "gap": "var(--seed-v3-dimension-s0_5)"
14
+ },
15
+ "label": {
16
+ "color": "var(--seed-v3-color-fg-neutral)",
17
+ "fontWeight": "var(--seed-v3-font-weight-bold)",
18
+ "fontSize": "var(--seed-v3-font-size-s5)",
19
+ "lineHeight": "var(--seed-v3-line-height-s5)"
20
+ },
21
+ "description": {
22
+ "color": "var(--seed-v3-color-fg-neutral-muted)",
23
+ "fontWeight": "var(--seed-v3-font-weight-regular)",
24
+ "fontSize": "var(--seed-v3-font-size-s4)",
25
+ "lineHeight": "var(--seed-v3-line-height-s4)"
26
+ },
27
+ "checkboxControl": {
28
+ "size": "var(--seed-v3-dimension-s6)",
29
+ "color": "var(--seed-v3-color-bg-layer-default)",
30
+ "strokeWidth": "1px",
31
+ "strokeColor": "var(--seed-v3-color-stroke-control)",
32
+ "cornerRadius": "var(--seed-v3-radius-s1)"
33
+ },
34
+ "checkboxIcon": {
35
+ "size": "var(--seed-v3-dimension-s3_5)"
36
+ },
37
+ "radioControl": {
38
+ "size": "var(--seed-v3-dimension-s6)",
39
+ "color": "var(--seed-v3-color-bg-layer-default)",
40
+ "strokeWidth": "1px",
41
+ "strokeColor": "var(--seed-v3-color-stroke-control)",
42
+ "cornerRadius": "var(--seed-v3-radius-full)"
43
+ },
44
+ "radioIcon": {
45
+ "size": "var(--seed-v3-dimension-s2_5)",
46
+ "cornerRadius": "var(--seed-v3-radius-full)"
47
+ }
48
+ },
49
+ "enabledPressed": {
50
+ "root": {
51
+ "color": "var(--seed-v3-color-bg-layer-default-pressed)"
52
+ },
53
+ "checkboxControl": {
54
+ "color": "var(--seed-v3-color-bg-layer-default-pressed)"
55
+ },
56
+ "radioControl": {
57
+ "color": "var(--seed-v3-color-bg-layer-default-pressed)"
58
+ }
59
+ },
60
+ "enabledSelected": {
61
+ "root": {
62
+ "color": "var(--seed-v3-color-bg-neutral-weak)",
63
+ "strokeColor": "var(--seed-v3-color-stroke-control)"
64
+ },
65
+ "checkboxControl": {
66
+ "color": "var(--seed-v3-color-bg-brand-solid)",
67
+ "strokeWidth": "0"
68
+ },
69
+ "checkboxIcon": {
70
+ "color": "var(--seed-v3-color-palette-static-white)"
71
+ },
72
+ "radioControl": {
73
+ "color": "var(--seed-v3-color-bg-brand-solid)",
74
+ "strokeWidth": "0"
75
+ },
76
+ "radioIcon": {
77
+ "color": "var(--seed-v3-color-palette-static-white)"
78
+ }
79
+ },
80
+ "enabledSelectedPressed": {
81
+ "root": {
82
+ "color": "var(--seed-v3-color-bg-neutral-weak-pressed)"
83
+ },
84
+ "checkboxControl": {
85
+ "color": "var(--seed-v3-color-bg-brand-solid-pressed)"
86
+ },
87
+ "radioControl": {
88
+ "color": "var(--seed-v3-color-bg-brand-solid-pressed)"
89
+ }
90
+ }
91
+ }
92
+ }
package/lib/component/select-box.mjs ADDED
@@ -0,0 +1,92 @@
1
+ export const vars = {
2
+ "base": {
3
+ "enabled": {
4
+ "root": {
5
+ "paddingX": "var(--seed-v3-dimension-s4)",
6
+ "paddingY": "var(--seed-v3-dimension-s5)",
7
+ "gap": "var(--seed-v3-dimension-s2_5)",
8
+ "strokeWidth": "1px",
9
+ "strokeColor": "var(--seed-v3-color-stroke-neutral)",
10
+ "cornerRadius": "var(--seed-v3-radius-s3)"
11
+ },
12
+ "content": {
13
+ "gap": "var(--seed-v3-dimension-s0_5)"
14
+ },
15
+ "label": {
16
+ "color": "var(--seed-v3-color-fg-neutral)",
17
+ "fontWeight": "var(--seed-v3-font-weight-bold)",
18
+ "fontSize": "var(--seed-v3-font-size-s5)",
19
+ "lineHeight": "var(--seed-v3-line-height-s5)"
20
+ },
21
+ "description": {
22
+ "color": "var(--seed-v3-color-fg-neutral-muted)",
23
+ "fontWeight": "var(--seed-v3-font-weight-regular)",
24
+ "fontSize": "var(--seed-v3-font-size-s4)",
25
+ "lineHeight": "var(--seed-v3-line-height-s4)"
26
+ },
27
+ "checkboxControl": {
28
+ "size": "var(--seed-v3-dimension-s6)",
29
+ "color": "var(--seed-v3-color-bg-layer-default)",
30
+ "strokeWidth": "1px",
31
+ "strokeColor": "var(--seed-v3-color-stroke-control)",
32
+ "cornerRadius": "var(--seed-v3-radius-s1)"
33
+ },
34
+ "checkboxIcon": {
35
+ "size": "var(--seed-v3-dimension-s3_5)"
36
+ },
37
+ "radioControl": {
38
+ "size": "var(--seed-v3-dimension-s6)",
39
+ "color": "var(--seed-v3-color-bg-layer-default)",
40
+ "strokeWidth": "1px",
41
+ "strokeColor": "var(--seed-v3-color-stroke-control)",
42
+ "cornerRadius": "var(--seed-v3-radius-full)"
43
+ },
44
+ "radioIcon": {
45
+ "size": "var(--seed-v3-dimension-s2_5)",
46
+ "cornerRadius": "var(--seed-v3-radius-full)"
47
+ }
48
+ },
49
+ "enabledPressed": {
50
+ "root": {
51
+ "color": "var(--seed-v3-color-bg-layer-default-pressed)"
52
+ },
53
+ "checkboxControl": {
54
+ "color": "var(--seed-v3-color-bg-layer-default-pressed)"
55
+ },
56
+ "radioControl": {
57
+ "color": "var(--seed-v3-color-bg-layer-default-pressed)"
58
+ }
59
+ },
60
+ "enabledSelected": {
61
+ "root": {
62
+ "color": "var(--seed-v3-color-bg-neutral-weak)",
63
+ "strokeColor": "var(--seed-v3-color-stroke-control)"
64
+ },
65
+ "checkboxControl": {
66
+ "color": "var(--seed-v3-color-bg-brand-solid)",
67
+ "strokeWidth": "0"
68
+ },
69
+ "checkboxIcon": {
70
+ "color": "var(--seed-v3-color-palette-static-white)"
71
+ },
72
+ "radioControl": {
73
+ "color": "var(--seed-v3-color-bg-brand-solid)",
74
+ "strokeWidth": "0"
75
+ },
76
+ "radioIcon": {
77
+ "color": "var(--seed-v3-color-palette-static-white)"
78
+ }
79
+ },
80
+ "enabledSelectedPressed": {
81
+ "root": {
82
+ "color": "var(--seed-v3-color-bg-neutral-weak-pressed)"
83
+ },
84
+ "checkboxControl": {
85
+ "color": "var(--seed-v3-color-bg-brand-solid-pressed)"
86
+ },
87
+ "radioControl": {
88
+ "color": "var(--seed-v3-color-bg-brand-solid-pressed)"
89
+ }
90
+ }
91
+ }
92
+ }
package/lib/component/skeleton.d.ts ADDED
@@ -0,0 +1,42 @@
1
+ export declare const vars: {
2
+ "base": {
3
+ "enabled": {
4
+ "root": {
5
+ "color": "var(--seed-v3-color-palette-gray-200)"
6
+ },
7
+ "shimmer": {
8
+ "duration": "1.5s",
9
+ "timingFunction": "var(--seed-v3-timing-function-easing)",
10
+ "color": "var(--seed-v3-gradient-shimmer)"
11
+ }
12
+ }
13
+ },
14
+ "radius0": {
15
+ "enabled": {
16
+ "root": {
17
+ "cornerRadius": "0px"
18
+ }
19
+ }
20
+ },
21
+ "radius8": {
22
+ "enabled": {
23
+ "root": {
24
+ "cornerRadius": "8px"
25
+ }
26
+ }
27
+ },
28
+ "radius16": {
29
+ "enabled": {
30
+ "root": {
31
+ "cornerRadius": "16px"
32
+ }
33
+ }
34
+ },
35
+ "radiusFull": {
36
+ "enabled": {
37
+ "root": {
38
+ "cornerRadius": "var(--seed-v3-radius-full)"
39
+ }
40
+ }
41
+ }
42
+ }
package/lib/component/skeleton.mjs ADDED
@@ -0,0 +1,42 @@
1
+ export const vars = {
2
+ "base": {
3
+ "enabled": {
4
+ "root": {
5
+ "color": "var(--seed-v3-color-palette-gray-200)"
6
+ },
7
+ "shimmer": {
8
+ "duration": "1.5s",
9
+ "timingFunction": "var(--seed-v3-timing-function-easing)",
10
+ "color": "var(--seed-v3-gradient-shimmer)"
11
+ }
12
+ }
13
+ },
14
+ "radius0": {
15
+ "enabled": {
16
+ "root": {
17
+ "cornerRadius": "0px"
18
+ }
19
+ }
20
+ },
21
+ "radius8": {
22
+ "enabled": {
23
+ "root": {
24
+ "cornerRadius": "8px"
25
+ }
26
+ }
27
+ },
28
+ "radius16": {
29
+ "enabled": {
30
+ "root": {
31
+ "cornerRadius": "16px"
32
+ }
33
+ }
34
+ },
35
+ "radiusFull": {
36
+ "enabled": {
37
+ "root": {
38
+ "cornerRadius": "var(--seed-v3-radius-full)"
39
+ }
40
+ }
41
+ }
42
+ }
package/lib/component/snackbar.d.ts ADDED
@@ -0,0 +1,58 @@
1
+ export declare const vars: {
2
+ "base": {
3
+ "enabled": {
4
+ "region": {
5
+ "paddingX": "var(--seed-v3-dimension-s2)",
6
+ "paddingY": "var(--seed-v3-dimension-s2)",
7
+ "offsetDuration": "var(--seed-v3-duration-s4)",
8
+ "offsetTimingFunction": "var(--seed-v3-timing-function-easing)"
9
+ },
10
+ "root": {
11
+ "color": "var(--seed-v3-color-bg-neutral-solid)",
12
+ "cornerRadius": "var(--seed-v3-radius-s2)",
13
+ "minHeight": "44px",
14
+ "paddingX": "var(--seed-v3-dimension-s4)",
15
+ "paddingY": "var(--seed-v3-dimension-s2_5)",
16
+ "gap": "var(--seed-v3-dimension-s2)",
17
+ "enterOpacity": "0",
18
+ "enterDuration": "var(--seed-v3-duration-s4)",
19
+ "enterTimingFunction": "var(--seed-v3-timing-function-enter)",
20
+ "exitOpacity": "0",
21
+ "exitDuration": "var(--seed-v3-duration-s4)",
22
+ "exitTimingFunction": "var(--seed-v3-timing-function-exit)"
23
+ },
24
+ "message": {
25
+ "color": "var(--seed-v3-color-palette-static-white)",
26
+ "fontSize": "var(--seed-v3-font-size-s4)",
27
+ "lineHeight": "var(--seed-v3-line-height-s4)",
28
+ "fontWeight": "var(--seed-v3-font-weight-regular)"
29
+ },
30
+ "prefixIcon": {
31
+ "size": "24px"
32
+ },
33
+ "actionButton": {
34
+ "targetPaddingX": "var(--seed-v3-dimension-s2)",
35
+ "targetMinHeight": "44px",
36
+ "color": "var(--seed-v3-color-fg-brand)",
37
+ "fontSize": "var(--seed-v3-font-size-s4)",
38
+ "lineHeight": "var(--seed-v3-line-height-s4)",
39
+ "fontWeight": "var(--seed-v3-font-weight-bold)"
40
+ }
41
+ }
42
+ },
43
+ "variantDefault": {},
44
+ "variantPositive": {
45
+ "enabled": {
46
+ "prefixIcon": {
47
+ "color": "var(--seed-v3-color-fg-positive)"
48
+ }
49
+ }
50
+ },
51
+ "variantCritical": {
52
+ "enabled": {
53
+ "prefixIcon": {
54
+ "color": "var(--seed-v3-color-fg-critical)"
55
+ }
56
+ }
57
+ }
58
+ }
package/lib/component/snackbar.mjs ADDED
@@ -0,0 +1,58 @@
1
+ export const vars = {
2
+ "base": {
3
+ "enabled": {
4
+ "region": {
5
+ "paddingX": "var(--seed-v3-dimension-s2)",
6
+ "paddingY": "var(--seed-v3-dimension-s2)",
7
+ "offsetDuration": "var(--seed-v3-duration-s4)",
8
+ "offsetTimingFunction": "var(--seed-v3-timing-function-easing)"
9
+ },
10
+ "root": {
11
+ "color": "var(--seed-v3-color-bg-neutral-solid)",
12
+ "cornerRadius": "var(--seed-v3-radius-s2)",
13
+ "minHeight": "44px",
14
+ "paddingX": "var(--seed-v3-dimension-s4)",
15
+ "paddingY": "var(--seed-v3-dimension-s2_5)",
16
+ "gap": "var(--seed-v3-dimension-s2)",
17
+ "enterOpacity": "0",
18
+ "enterDuration": "var(--seed-v3-duration-s4)",
19
+ "enterTimingFunction": "var(--seed-v3-timing-function-enter)",
20
+ "exitOpacity": "0",
21
+ "exitDuration": "var(--seed-v3-duration-s4)",
22
+ "exitTimingFunction": "var(--seed-v3-timing-function-exit)"
23
+ },
24
+ "message": {
25
+ "color": "var(--seed-v3-color-palette-static-white)",
26
+ "fontSize": "var(--seed-v3-font-size-s4)",
27
+ "lineHeight": "var(--seed-v3-line-height-s4)",
28
+ "fontWeight": "var(--seed-v3-font-weight-regular)"
29
+ },
30
+ "prefixIcon": {
31
+ "size": "24px"
32
+ },
33
+ "actionButton": {
34
+ "targetPaddingX": "var(--seed-v3-dimension-s2)",
35
+ "targetMinHeight": "44px",
36
+ "color": "var(--seed-v3-color-fg-brand)",
37
+ "fontSize": "var(--seed-v3-font-size-s4)",
38
+ "lineHeight": "var(--seed-v3-line-height-s4)",
39
+ "fontWeight": "var(--seed-v3-font-weight-bold)"
40
+ }
41
+ }
42
+ },
43
+ "variantDefault": {},
44
+ "variantPositive": {
45
+ "enabled": {
46
+ "prefixIcon": {
47
+ "color": "var(--seed-v3-color-fg-positive)"
48
+ }
49
+ }
50
+ },
51
+ "variantCritical": {
52
+ "enabled": {
53
+ "prefixIcon": {
54
+ "color": "var(--seed-v3-color-fg-critical)"
55
+ }
56
+ }
57
+ }
58
+ }
package/lib/component/switch.d.ts ADDED
@@ -0,0 +1,65 @@
1
+ export declare const vars: {
2
+ "base": {
3
+ "enabled": {
4
+ "control": {
5
+ "color": "var(--seed-v3-color-palette-gray-600)",
6
+ "cornerRadius": "var(--seed-v3-radius-full)"
7
+ },
8
+ "thumb": {
9
+ "color": "var(--seed-v3-color-palette-static-white)",
10
+ "cornerRadius": "var(--seed-v3-radius-full)"
11
+ }
12
+ },
13
+ "enabledSelected": {
14
+ "control": {
15
+ "color": "var(--seed-v3-color-bg-brand-solid)"
16
+ }
17
+ },
18
+ "disabled": {
19
+ "root": {
20
+ "opacity": "0.38"
21
+ }
22
+ }
23
+ },
24
+ "sizeMedium": {
25
+ "enabled": {
26
+ "root": {
27
+ "height": "32px"
28
+ },
29
+ "control": {
30
+ "height": "32px",
31
+ "width": "52px",
32
+ "paddingX": "2px",
33
+ "paddingY": "2px"
34
+ },
35
+ "thumb": {
36
+ "height": "28px",
37
+ "width": "28px",
38
+ "shadow": "0px 3px 8px 0px #00000026, 0px 1px 3px 0px #0000000f"
39
+ }
40
+ }
41
+ },
42
+ "sizeSmall": {
43
+ "enabled": {
44
+ "root": {
45
+ "height": "24px",
46
+ "gap": "var(--seed-v3-dimension-s2)"
47
+ },
48
+ "control": {
49
+ "height": "16px",
50
+ "width": "26px",
51
+ "paddingX": "2px",
52
+ "paddingY": "2px"
53
+ },
54
+ "thumb": {
55
+ "height": "12px",
56
+ "width": "12px"
57
+ },
58
+ "label": {
59
+ "fontSize": "var(--seed-v3-font-size-s4)",
60
+ "lineHeight": "var(--seed-v3-line-height-s4)",
61
+ "fontWeight": "var(--seed-v3-font-weight-regular)"
62
+ }
63
+ }
64
+ }
65
+ }
package/lib/component/switch.mjs ADDED
@@ -0,0 +1,65 @@
1
+ export const vars = {
2
+ "base": {
3
+ "enabled": {
4
+ "control": {
5
+ "color": "var(--seed-v3-color-palette-gray-600)",
6
+ "cornerRadius": "var(--seed-v3-radius-full)"
7
+ },
8
+ "thumb": {
9
+ "color": "var(--seed-v3-color-palette-static-white)",
10
+ "cornerRadius": "var(--seed-v3-radius-full)"
11
+ }
12
+ },
13
+ "enabledSelected": {
14
+ "control": {
15
+ "color": "var(--seed-v3-color-bg-brand-solid)"
16
+ }
17
+ },
18
+ "disabled": {
19
+ "root": {
20
+ "opacity": "0.38"
21
+ }
22
+ }
23
+ },
24
+ "sizeMedium": {
25
+ "enabled": {
26
+ "root": {
27
+ "height": "32px"
28
+ },
29
+ "control": {
30
+ "height": "32px",
31
+ "width": "52px",
32
+ "paddingX": "2px",
33
+ "paddingY": "2px"
34
+ },
35
+ "thumb": {
36
+ "height": "28px",
37
+ "width": "28px",
38
+ "shadow": "0px 3px 8px 0px #00000026, 0px 1px 3px 0px #0000000f"
39
+ }
40
+ }
41
+ },
42
+ "sizeSmall": {
43
+ "enabled": {
44
+ "root": {
45
+ "height": "24px",
46
+ "gap": "var(--seed-v3-dimension-s2)"
47
+ },
48
+ "control": {
49
+ "height": "16px",
50
+ "width": "26px",
51
+ "paddingX": "2px",
52
+ "paddingY": "2px"
53
+ },
54
+ "thumb": {
55
+ "height": "12px",
56
+ "width": "12px"
57
+ },
58
+ "label": {
59
+ "fontSize": "var(--seed-v3-font-size-s4)",
60
+ "lineHeight": "var(--seed-v3-line-height-s4)",
61
+ "fontWeight": "var(--seed-v3-font-weight-regular)"
62
+ }
63
+ }
64
+ }
65
+ }
package/lib/component/tab.d.ts ADDED
@@ -0,0 +1,53 @@
1
+ export declare const vars: {
2
+ "base": {
3
+ "enabled": {
4
+ "label": {
5
+ "color": "var(--seed-v3-color-fg-neutral-subtle)"
6
+ },
7
+ "notification": {
8
+ "size": "var(--seed-v3-dimension-s1)",
9
+ "cornerRadius": "var(--seed-v3-radius-full)",
10
+ "color": "var(--seed-v3-color-bg-brand-solid)",
11
+ "marginLeft": "var(--seed-v3-dimension-s0_5)"
12
+ }
13
+ },
14
+ "selected": {
15
+ "label": {
16
+ "color": "var(--seed-v3-color-fg-neutral)"
17
+ }
18
+ },
19
+ "disabled": {
20
+ "label": {
21
+ "color": "var(--seed-v3-color-fg-disabled)"
22
+ }
23
+ }
24
+ },
25
+ "sizeMedium": {
26
+ "enabled": {
27
+ "root": {
28
+ "minHeight": "44px",
29
+ "paddingX": "var(--seed-v3-dimension-s2_5)",
30
+ "paddingY": "var(--seed-v3-dimension-s2_5)"
31
+ },
32
+ "label": {
33
+ "fontSize": "var(--seed-v3-font-size-s5)",
34
+ "lineHeight": "var(--seed-v3-line-height-s5)",
35
+ "fontWeight": "var(--seed-v3-font-weight-bold)"
36
+ }
37
+ }
38
+ },
39
+ "sizeSmall": {
40
+ "enabled": {
41
+ "root": {
42
+ "minHeight": "40px",
43
+ "paddingX": "var(--seed-v3-dimension-s2_5)",
44
+ "paddingY": "var(--seed-v3-dimension-s2_5)"
45
+ },
46
+ "label": {
47
+ "fontSize": "var(--seed-v3-font-size-s4)",
48
+ "lineHeight": "var(--seed-v3-line-height-s4)",
49
+ "fontWeight": "var(--seed-v3-font-weight-bold)"
50
+ }
51
+ }
52
+ }
53
+ }
package/lib/component/tab.mjs ADDED
@@ -0,0 +1,53 @@
1
+ export const vars = {
2
+ "base": {
3
+ "enabled": {
4
+ "label": {
5
+ "color": "var(--seed-v3-color-fg-neutral-subtle)"
6
+ },
7
+ "notification": {
8
+ "size": "var(--seed-v3-dimension-s1)",
9
+ "cornerRadius": "var(--seed-v3-radius-full)",
10
+ "color": "var(--seed-v3-color-bg-brand-solid)",
11
+ "marginLeft": "var(--seed-v3-dimension-s0_5)"
12
+ }
13
+ },
14
+ "selected": {
15
+ "label": {
16
+ "color": "var(--seed-v3-color-fg-neutral)"
17
+ }
18
+ },
19
+ "disabled": {
20
+ "label": {
21
+ "color": "var(--seed-v3-color-fg-disabled)"
22
+ }
23
+ }
24
+ },
25
+ "sizeMedium": {
26
+ "enabled": {
27
+ "root": {
28
+ "minHeight": "44px",
29
+ "paddingX": "var(--seed-v3-dimension-s2_5)",
30
+ "paddingY": "var(--seed-v3-dimension-s2_5)"
31
+ },
32
+ "label": {
33
+ "fontSize": "var(--seed-v3-font-size-s5)",
34
+ "lineHeight": "var(--seed-v3-line-height-s5)",
35
+ "fontWeight": "var(--seed-v3-font-weight-bold)"
36
+ }
37
+ }
38
+ },
39
+ "sizeSmall": {
40
+ "enabled": {
41
+ "root": {
42
+ "minHeight": "40px",
43
+ "paddingX": "var(--seed-v3-dimension-s2_5)",
44
+ "paddingY": "var(--seed-v3-dimension-s2_5)"
45
+ },
46
+ "label": {
47
+ "fontSize": "var(--seed-v3-font-size-s4)",
48
+ "lineHeight": "var(--seed-v3-line-height-s4)",
49
+ "fontWeight": "var(--seed-v3-font-weight-bold)"
50
+ }
51
+ }
52
+ }
53
+ }
package/lib/component/tablist.d.ts ADDED
@@ -0,0 +1,51 @@
1
+ export declare const vars: {
2
+ "base": {
3
+ "enabled": {
4
+ "root": {
5
+ "color": "var(--seed-v3-color-bg-layer-default)",
6
+ "strokeBottomWidth": "1px",
7
+ "strokeColor": "var(--seed-v3-color-stroke-neutral)"
8
+ },
9
+ "indicator": {
10
+ "height": "2px",
11
+ "color": "var(--seed-v3-color-fg-neutral)",
12
+ "transformDuration": "var(--seed-v3-duration-s4)",
13
+ "transformTimingFunction": "var(--seed-v3-timing-function-easing)"
14
+ }
15
+ }
16
+ },
17
+ "layoutHug": {
18
+ "enabled": {
19
+ "root": {
20
+ "paddingX": "var(--seed-v3-dimension-spacing-x-global-gutter)"
21
+ },
22
+ "indicator": {
23
+ "insetX": "0px"
24
+ }
25
+ }
26
+ },
27
+ "layoutFill": {
28
+ "enabled": {
29
+ "root": {
30
+ "paddingX": "0px"
31
+ },
32
+ "indicator": {
33
+ "insetX": "var(--seed-v3-dimension-spacing-x-global-gutter)"
34
+ }
35
+ }
36
+ },
37
+ "sizeSmall": {
38
+ "enabled": {
39
+ "root": {
40
+ "height": "40px"
41
+ }
42
+ }
43
+ },
44
+ "sizeMedium": {
45
+ "enabled": {
46
+ "root": {
47
+ "height": "44px"
48
+ }
49
+ }
50
+ }
51
+ }