@mcp-b/react-components 0.1.1 → 0.1.3

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 (203) hide show
  1. package/dist/Button-QCM8ZKgR.d.ts +98 -0
  2. package/dist/CodeBlock-CttHhWcb.js +356 -0
  3. package/dist/CodeBlock-V6pgafSS.d.ts +174 -0
  4. package/dist/Select-CRsKCJ9x.d.ts +200 -0
  5. package/dist/class-names-9UtZwb0J.js +12 -0
  6. package/dist/components/Accordion.d.ts +81 -0
  7. package/dist/components/Accordion.js +97 -0
  8. package/dist/components/AgentConnection.d.ts +69 -0
  9. package/dist/components/AgentConnection.js +176 -0
  10. package/dist/components/AlertDialog.d.ts +148 -0
  11. package/dist/components/AlertDialog.js +141 -0
  12. package/dist/components/Artifact.d.ts +128 -0
  13. package/dist/components/Artifact.js +115 -0
  14. package/dist/components/Autocomplete.d.ts +186 -0
  15. package/dist/components/Autocomplete.js +186 -0
  16. package/dist/components/Avatar.d.ts +134 -0
  17. package/dist/components/Avatar.js +118 -0
  18. package/dist/components/Badge.d.ts +68 -0
  19. package/dist/components/Badge.js +108 -0
  20. package/dist/components/Button.d.ts +2 -0
  21. package/dist/components/Button.js +73 -0
  22. package/dist/components/Card.d.ts +87 -0
  23. package/dist/components/Card.js +81 -0
  24. package/dist/components/ChainOfThought.d.ts +153 -0
  25. package/dist/components/ChainOfThought.js +157 -0
  26. package/dist/components/Checkbox.d.ts +35 -0
  27. package/dist/components/Checkbox.js +47 -0
  28. package/dist/components/CheckboxGroup.d.ts +76 -0
  29. package/dist/components/CheckboxGroup.js +69 -0
  30. package/dist/components/CodeBlock.d.ts +2 -0
  31. package/dist/components/CodeBlock.js +2 -0
  32. package/dist/components/Collapsible.d.ts +127 -0
  33. package/dist/components/Collapsible.js +103 -0
  34. package/dist/components/Combobox.d.ts +177 -0
  35. package/dist/components/Combobox.js +179 -0
  36. package/dist/components/Commit.d.ts +265 -0
  37. package/dist/components/Commit.js +282 -0
  38. package/dist/components/Context.d.ts +129 -0
  39. package/dist/components/Context.js +309 -0
  40. package/dist/components/ContextMenu.d.ts +282 -0
  41. package/dist/components/ContextMenu.js +270 -0
  42. package/dist/components/Conversation.d.ts +166 -0
  43. package/dist/components/Conversation.js +202 -0
  44. package/dist/components/Dialog.d.ts +120 -0
  45. package/dist/components/Dialog.js +114 -0
  46. package/dist/components/EnvironmentVariables.d.ts +176 -0
  47. package/dist/components/EnvironmentVariables.js +221 -0
  48. package/dist/components/Field.d.ts +281 -0
  49. package/dist/components/Field.js +274 -0
  50. package/dist/components/Fieldset.d.ts +93 -0
  51. package/dist/components/Fieldset.js +81 -0
  52. package/dist/components/FileTree.d.ts +116 -0
  53. package/dist/components/FileTree.js +310 -0
  54. package/dist/components/Form.d.ts +94 -0
  55. package/dist/components/Form.js +88 -0
  56. package/dist/components/GithubMotionMark.d.ts +13 -0
  57. package/dist/components/GithubMotionMark.js +23 -0
  58. package/dist/components/Input.d.ts +33 -0
  59. package/dist/components/Input.js +27 -0
  60. package/dist/components/Label.d.ts +44 -0
  61. package/dist/components/Label.js +41 -0
  62. package/dist/components/Menu.d.ts +395 -0
  63. package/dist/components/Menu.js +338 -0
  64. package/dist/components/Menubar.d.ts +331 -0
  65. package/dist/components/Menubar.js +299 -0
  66. package/dist/components/Message.d.ts +216 -0
  67. package/dist/components/Message.js +245 -0
  68. package/dist/components/Meter.d.ts +151 -0
  69. package/dist/components/Meter.js +121 -0
  70. package/dist/components/ModelSelector.d.ts +198 -0
  71. package/dist/components/ModelSelector.js +306 -0
  72. package/dist/components/NaniteScene.d.ts +33 -0
  73. package/dist/components/NaniteScene.js +405 -0
  74. package/dist/components/NavigationMenu.d.ts +256 -0
  75. package/dist/components/NavigationMenu.js +228 -0
  76. package/dist/components/NumberField.d.ts +159 -0
  77. package/dist/components/NumberField.js +123 -0
  78. package/dist/components/Popover.d.ts +278 -0
  79. package/dist/components/Popover.js +245 -0
  80. package/dist/components/PreviewCard.d.ts +156 -0
  81. package/dist/components/PreviewCard.js +156 -0
  82. package/dist/components/PricingPage.d.ts +209 -0
  83. package/dist/components/PricingPage.js +506 -0
  84. package/dist/components/Progress.d.ts +58 -0
  85. package/dist/components/Progress.js +51 -0
  86. package/dist/components/PromptInput.d.ts +399 -0
  87. package/dist/components/PromptInput.js +737 -0
  88. package/dist/components/Queue.d.ts +241 -0
  89. package/dist/components/Queue.js +225 -0
  90. package/dist/components/RadioGroup.d.ts +78 -0
  91. package/dist/components/RadioGroup.js +72 -0
  92. package/dist/components/Reasoning.d.ts +88 -0
  93. package/dist/components/Reasoning.js +187 -0
  94. package/dist/components/ScrollArea.d.ts +160 -0
  95. package/dist/components/ScrollArea.js +145 -0
  96. package/dist/components/Select.d.ts +2 -0
  97. package/dist/components/Select.js +260 -0
  98. package/dist/components/Separator.d.ts +45 -0
  99. package/dist/components/Separator.js +40 -0
  100. package/dist/components/Shell.d.ts +163 -0
  101. package/dist/components/Shell.js +137 -0
  102. package/dist/components/Slider.d.ts +120 -0
  103. package/dist/components/Slider.js +115 -0
  104. package/dist/components/Sources.d.ts +91 -0
  105. package/dist/components/Sources.js +121 -0
  106. package/dist/components/Stepper.d.ts +190 -0
  107. package/dist/components/Stepper.js +315 -0
  108. package/dist/components/Switch.d.ts +57 -0
  109. package/dist/components/Switch.js +55 -0
  110. package/dist/components/Tabs.d.ts +84 -0
  111. package/dist/components/Tabs.js +78 -0
  112. package/dist/components/Task.d.ts +100 -0
  113. package/dist/components/Task.js +120 -0
  114. package/dist/components/Terminal.d.ts +118 -0
  115. package/dist/components/Terminal.js +234 -0
  116. package/dist/components/TestResults.d.ts +236 -0
  117. package/dist/components/TestResults.js +346 -0
  118. package/dist/components/Toast.d.ts +192 -0
  119. package/dist/components/Toast.js +163 -0
  120. package/dist/components/Toggle.d.ts +69 -0
  121. package/dist/components/Toggle.js +66 -0
  122. package/dist/components/ToggleGroup.d.ts +69 -0
  123. package/dist/components/ToggleGroup.js +99 -0
  124. package/dist/components/Tool.d.ts +119 -0
  125. package/dist/components/Tool.js +192 -0
  126. package/dist/components/Toolbar.d.ts +162 -0
  127. package/dist/components/Toolbar.js +126 -0
  128. package/dist/components/Tooltip.d.ts +81 -0
  129. package/dist/components/Tooltip.js +74 -0
  130. package/dist/components/WebPreview.d.ts +143 -0
  131. package/dist/components/WebPreview.js +280 -0
  132. package/dist/components/useStickToBottom.d.ts +30 -0
  133. package/dist/components/useStickToBottom.js +95 -0
  134. package/dist/copy-button-BIATcZWZ.d.ts +16 -0
  135. package/dist/copy-button-BNgclDrO.js +43 -0
  136. package/dist/icons-BsWc8g4E.js +221 -0
  137. package/dist/styles/accordion.css +10 -10
  138. package/dist/styles/agent-connection.css +18 -17
  139. package/dist/styles/alert-dialog.css +48 -29
  140. package/dist/styles/artifact.css +10 -10
  141. package/dist/styles/autocomplete.css +25 -24
  142. package/dist/styles/avatar.css +96 -6
  143. package/dist/styles/badge.css +78 -14
  144. package/dist/styles/base.css +9 -9
  145. package/dist/styles/button.css +57 -38
  146. package/dist/styles/card.css +57 -10
  147. package/dist/styles/chain-of-thought.css +47 -33
  148. package/dist/styles/checkbox.css +24 -10
  149. package/dist/styles/code-block.css +22 -15
  150. package/dist/styles/collapsible.css +14 -12
  151. package/dist/styles/combobox.css +26 -25
  152. package/dist/styles/commit.css +49 -24
  153. package/dist/styles/context-menu.css +70 -16
  154. package/dist/styles/context.css +15 -15
  155. package/dist/styles/conversation.css +12 -12
  156. package/dist/styles/dialog.css +52 -16
  157. package/dist/styles/environment-variables.css +19 -19
  158. package/dist/styles/field.css +184 -22
  159. package/dist/styles/fieldset.css +5 -4
  160. package/dist/styles/file-tree.css +17 -17
  161. package/dist/styles/index.css.d.ts +1 -0
  162. package/dist/styles/input.css +45 -11
  163. package/dist/styles/label.css +21 -4
  164. package/dist/styles/menu.css +55 -32
  165. package/dist/styles/menubar.css +80 -28
  166. package/dist/styles/message.css +22 -13
  167. package/dist/styles/meter.css +8 -8
  168. package/dist/styles/model-selector.css +33 -21
  169. package/dist/styles/navigation-menu.css +26 -24
  170. package/dist/styles/number-field.css +20 -18
  171. package/dist/styles/popover.css +38 -28
  172. package/dist/styles/preview-card.css +15 -13
  173. package/dist/styles/pricing-page.css +53 -53
  174. package/dist/styles/progress.css +7 -7
  175. package/dist/styles/prompt-input.css +73 -24
  176. package/dist/styles/queue.css +58 -32
  177. package/dist/styles/radio.css +26 -11
  178. package/dist/styles/reasoning.css +15 -11
  179. package/dist/styles/scroll-area.css +6 -6
  180. package/dist/styles/scrollbars.css +4 -4
  181. package/dist/styles/select.css +84 -25
  182. package/dist/styles/separator.css +1 -1
  183. package/dist/styles/shell.css +21 -20
  184. package/dist/styles/slider.css +35 -11
  185. package/dist/styles/sources.css +20 -20
  186. package/dist/styles/stepper.css +22 -22
  187. package/dist/styles/switch.css +29 -13
  188. package/dist/styles/tabs.css +23 -16
  189. package/dist/styles/task.css +27 -23
  190. package/dist/styles/terminal.css +16 -13
  191. package/dist/styles/test-results.css +79 -32
  192. package/dist/styles/toast.css +26 -25
  193. package/dist/styles/toggle-group.css +12 -12
  194. package/dist/styles/toggle.css +29 -11
  195. package/dist/styles/tool.css +54 -32
  196. package/dist/styles/toolbar.css +30 -28
  197. package/dist/styles/tooltip.css +10 -8
  198. package/dist/styles/web-preview.css +37 -21
  199. package/dist/utils/structured-code.d.ts +10 -0
  200. package/dist/utils/structured-code.js +81 -0
  201. package/package.json +17 -8
  202. package/dist/index.d.ts +0 -7236
  203. package/dist/index.js +0 -8945
package/dist/styles/meter.css CHANGED
@@ -10,27 +10,27 @@
10
10
  width: 100%;
11
11
  height: 0.5rem;
12
12
  overflow: hidden;
13
- background-color: var(--sigvelo-neutral-fill-softer);
14
- border-radius: var(--sigvelo-border-radius-pill);
13
+ background-color: var(--sigvelo-color-neutral-bg-subtle);
14
+ border-radius: var(--sigvelo-radius-full);
15
15
  }
16
16
 
17
17
  .meter__indicator {
18
18
  height: 100%;
19
- background-color: var(--sigvelo-primary-fill-mid);
20
- border-radius: var(--sigvelo-border-radius-pill);
19
+ background-color: var(--sigvelo-color-primary-bg);
20
+ border-radius: var(--sigvelo-radius-full);
21
21
  transition: width 300ms ease;
22
22
  }
23
23
 
24
24
  .meter__label {
25
- font-family: var(--sigvelo-font-family);
25
+ font-family: var(--sigvelo-font-sans);
26
26
  font-size: 0.875rem;
27
27
  font-weight: var(--sigvelo-font-weight-semibold);
28
- color: var(--sigvelo-text-body);
28
+ color: var(--sigvelo-color-text);
29
29
  }
30
30
 
31
31
  .meter__value {
32
- font-family: var(--sigvelo-font-family);
32
+ font-family: var(--sigvelo-font-sans);
33
33
  font-size: 0.875rem;
34
34
  font-weight: var(--sigvelo-font-weight-semibold);
35
- color: var(--sigvelo-text-muted);
35
+ color: var(--sigvelo-color-text-muted);
36
36
  }
package/dist/styles/model-selector.css CHANGED
@@ -1,6 +1,6 @@
1
1
  .model-selector {
2
2
  display: inline-block;
3
- font-family: var(--sigvelo-font-family);
3
+ font-family: var(--sigvelo-font-sans);
4
4
  }
5
5
 
6
6
  .model-selector__trigger {
@@ -11,7 +11,19 @@
11
11
 
12
12
  .model-selector__trigger-chevron {
13
13
  display: inline-flex;
14
- color: var(--sigvelo-text-muted);
14
+ color: var(--sigvelo-color-text-muted);
15
+ }
16
+
17
+ .model-selector__title {
18
+ position: absolute;
19
+ width: 1px;
20
+ height: 1px;
21
+ padding: 0;
22
+ margin: -1px;
23
+ overflow: hidden;
24
+ white-space: nowrap;
25
+ border: 0;
26
+ clip: rect(0 0 0 0);
15
27
  }
16
28
 
17
29
  .model-selector__dialog {
@@ -21,8 +33,8 @@
21
33
  max-height: min(32rem, calc(100vh - 4rem));
22
34
  padding: 0;
23
35
  overflow: hidden;
24
- font-family: var(--sigvelo-font-family);
25
- color: var(--sigvelo-text-body);
36
+ font-family: var(--sigvelo-font-sans);
37
+ color: var(--sigvelo-color-text);
26
38
  }
27
39
 
28
40
  .model-selector__search {
@@ -32,12 +44,12 @@
32
44
  padding-block: 0.75rem;
33
45
  padding-inline: 1rem;
34
46
  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
35
- var(--sigvelo-neutral-stroke-softer);
47
+ var(--sigvelo-color-neutral-border-subtle);
36
48
  }
37
49
 
38
50
  .model-selector__search-icon {
39
51
  display: inline-flex;
40
- color: var(--sigvelo-text-muted);
52
+ color: var(--sigvelo-color-text-muted);
41
53
  }
42
54
 
43
55
  .model-selector__input {
@@ -47,13 +59,13 @@
47
59
  border: none;
48
60
  outline: none;
49
61
  background-color: transparent;
50
- color: var(--sigvelo-text-body);
62
+ color: var(--sigvelo-color-text);
51
63
  font-family: inherit;
52
64
  font-size: 0.875rem;
53
65
  }
54
66
 
55
67
  .model-selector__input::placeholder {
56
- color: var(--sigvelo-text-muted);
68
+ color: var(--sigvelo-color-text-muted);
57
69
  }
58
70
 
59
71
  .model-selector__input::-webkit-search-cancel-button {
@@ -78,7 +90,7 @@
78
90
  font-weight: var(--sigvelo-font-weight-bold);
79
91
  text-transform: uppercase;
80
92
  letter-spacing: 0.05em;
81
- color: var(--sigvelo-text-muted);
93
+ color: var(--sigvelo-color-text-muted);
82
94
  }
83
95
 
84
96
  .model-selector__item {
@@ -90,7 +102,7 @@
90
102
  padding-inline: 1rem;
91
103
  background-color: transparent;
92
104
  border: none;
93
- color: var(--sigvelo-text-body);
105
+ color: var(--sigvelo-color-text);
94
106
  font-family: inherit;
95
107
  font-size: 0.875rem;
96
108
  text-align: start;
@@ -100,13 +112,13 @@
100
112
 
101
113
  .model-selector__item:hover:not([data-disabled]),
102
114
  .model-selector__item:focus-visible {
103
- background-color: var(--sigvelo-neutral-fill-softer);
115
+ background-color: var(--sigvelo-color-neutral-bg-subtle);
104
116
  outline: none;
105
117
  }
106
118
 
107
119
  .model-selector__item[data-selected] {
108
- background-color: var(--sigvelo-primary-fill-softer);
109
- color: var(--sigvelo-primary-text-colorful);
120
+ background-color: var(--sigvelo-color-primary-bg-subtle);
121
+ color: var(--sigvelo-color-primary-text);
110
122
  font-weight: var(--sigvelo-font-weight-semibold);
111
123
  }
112
124
 
@@ -115,7 +127,7 @@
115
127
  padding-inline: 1rem;
116
128
  text-align: center;
117
129
  font-size: 0.8125rem;
118
- color: var(--sigvelo-text-muted);
130
+ color: var(--sigvelo-color-text-muted);
119
131
  }
120
132
 
121
133
  /* Hide empty state when any group sibling has visible items. */
@@ -127,7 +139,7 @@
127
139
  margin: 0.25rem 0;
128
140
  border: none;
129
141
  border-block-start: var(--sigvelo-border-style) var(--sigvelo-border-width)
130
- var(--sigvelo-neutral-stroke-softer);
142
+ var(--sigvelo-color-neutral-border-subtle);
131
143
  }
132
144
 
133
145
  .model-selector__logo {
@@ -137,7 +149,7 @@
137
149
  width: 1.25rem;
138
150
  height: 1.25rem;
139
151
  flex-shrink: 0;
140
- color: var(--sigvelo-text-body);
152
+ color: var(--sigvelo-color-text);
141
153
  }
142
154
 
143
155
  .model-selector__logo-group {
@@ -157,13 +169,13 @@
157
169
  .model-selector__shortcut {
158
170
  padding-block: 0.0625rem;
159
171
  padding-inline: 0.375rem;
160
- font-family: var(--sigvelo-font-family-code);
172
+ font-family: var(--sigvelo-font-mono);
161
173
  font-size: 0.6875rem;
162
- color: var(--sigvelo-text-muted);
163
- background-color: var(--sigvelo-neutral-fill-softer);
174
+ color: var(--sigvelo-color-text-muted);
175
+ background-color: var(--sigvelo-color-neutral-bg-subtle);
164
176
  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
165
- var(--sigvelo-neutral-stroke-softer);
166
- border-radius: var(--sigvelo-border-radius-sm);
177
+ var(--sigvelo-color-neutral-border-subtle);
178
+ border-radius: var(--sigvelo-radius-sm);
167
179
  }
168
180
 
169
181
  @media (forced-colors: active) {
package/dist/styles/navigation-menu.css CHANGED
@@ -22,13 +22,13 @@
22
22
  gap: 0.25rem;
23
23
  padding-block: 0.5rem;
24
24
  padding-inline: 0.75rem;
25
- font-family: var(--sigvelo-font-family);
25
+ font-family: var(--sigvelo-font-sans);
26
26
  font-size: 0.875rem;
27
27
  font-weight: var(--sigvelo-font-weight-semibold);
28
- color: var(--sigvelo-text-body);
28
+ color: var(--sigvelo-color-text);
29
29
  background-color: transparent;
30
30
  border: none;
31
- border-radius: var(--sigvelo-border-radius-sm);
31
+ border-radius: var(--sigvelo-radius-sm);
32
32
  cursor: pointer;
33
33
  transition:
34
34
  background-color 150ms ease,
@@ -36,19 +36,19 @@
36
36
  }
37
37
 
38
38
  .navigation-menu__trigger:hover {
39
- background-color: var(--sigvelo-neutral-fill-softer);
40
- color: var(--sigvelo-neutral-text-on-soft);
39
+ background-color: var(--sigvelo-color-neutral-bg-subtle);
40
+ color: var(--sigvelo-color-neutral-text-on-subtle);
41
41
  }
42
42
 
43
43
  .navigation-menu__trigger:focus-visible {
44
44
  outline: none;
45
45
  box-shadow:
46
- 0 0 0 2px var(--sigvelo-background-color),
47
- 0 0 0 4px var(--sigvelo-focus-color);
46
+ 0 0 0 2px var(--sigvelo-color-canvas),
47
+ 0 0 0 4px var(--sigvelo-color-focus);
48
48
  }
49
49
 
50
50
  .navigation-menu__trigger[data-popup-open] {
51
- background-color: var(--sigvelo-neutral-fill-softer);
51
+ background-color: var(--sigvelo-color-neutral-bg-subtle);
52
52
  }
53
53
 
54
54
  .navigation-menu__icon {
@@ -70,31 +70,31 @@
70
70
  display: block;
71
71
  padding-block: 0.5rem;
72
72
  padding-inline: 0.75rem;
73
- font-family: var(--sigvelo-font-family);
73
+ font-family: var(--sigvelo-font-sans);
74
74
  font-size: 0.875rem;
75
- color: var(--sigvelo-text-body);
75
+ color: var(--sigvelo-color-text);
76
76
  text-decoration: none;
77
- border-radius: var(--sigvelo-border-radius-sm);
77
+ border-radius: var(--sigvelo-radius-sm);
78
78
  transition:
79
79
  background-color 150ms ease,
80
80
  color 150ms ease;
81
81
  }
82
82
 
83
83
  .navigation-menu__link:hover {
84
- background-color: var(--sigvelo-neutral-fill-softer);
85
- color: var(--sigvelo-neutral-text-on-soft);
84
+ background-color: var(--sigvelo-color-neutral-bg-subtle);
85
+ color: var(--sigvelo-color-neutral-text-on-subtle);
86
86
  }
87
87
 
88
88
  .navigation-menu__link:focus-visible {
89
89
  outline: none;
90
90
  box-shadow:
91
- 0 0 0 2px var(--sigvelo-background-color),
92
- 0 0 0 4px var(--sigvelo-focus-color);
91
+ 0 0 0 2px var(--sigvelo-color-canvas),
92
+ 0 0 0 4px var(--sigvelo-color-focus);
93
93
  }
94
94
 
95
95
  .navigation-menu__link[data-active] {
96
96
  font-weight: var(--sigvelo-font-weight-bold);
97
- color: var(--sigvelo-primary-fill-mid);
97
+ color: var(--sigvelo-color-primary-bg);
98
98
  }
99
99
 
100
100
  .navigation-menu__positioner {
@@ -103,13 +103,14 @@
103
103
 
104
104
  .navigation-menu__popup {
105
105
  min-width: 200px;
106
- background-color: var(--sigvelo-paper-color);
107
- color: var(--sigvelo-text-body);
108
- border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-neutral-stroke-soft);
109
- border-radius: var(--sigvelo-border-radius-md);
106
+ background-color: var(--sigvelo-color-surface);
107
+ color: var(--sigvelo-color-text);
108
+ border: var(--sigvelo-border-style) var(--sigvelo-border-width)
109
+ var(--sigvelo-color-neutral-border-muted);
110
+ border-radius: var(--sigvelo-radius-md);
110
111
  box-shadow:
111
- 0 10px 15px -3px color-mix(in oklab, var(--sigvelo-text-body), transparent 90%),
112
- 0 4px 6px -4px color-mix(in oklab, var(--sigvelo-text-body), transparent 90%);
112
+ 0 10px 15px -3px color-mix(in oklab, var(--sigvelo-color-text), transparent 90%),
113
+ 0 4px 6px -4px color-mix(in oklab, var(--sigvelo-color-text), transparent 90%);
113
114
  animation: navigation-menu-enter 150ms ease;
114
115
  overflow: hidden;
115
116
  }
@@ -149,8 +150,9 @@
149
150
  width: 10px;
150
151
  height: 10px;
151
152
  transform: rotate(45deg);
152
- background-color: var(--sigvelo-paper-color);
153
- border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-neutral-stroke-soft);
153
+ background-color: var(--sigvelo-color-surface);
154
+ border: var(--sigvelo-border-style) var(--sigvelo-border-width)
155
+ var(--sigvelo-color-neutral-border-muted);
154
156
  border-right: none;
155
157
  border-bottom: none;
156
158
  }
package/dist/styles/number-field.css CHANGED
@@ -15,13 +15,14 @@
15
15
  height: 2.5rem;
16
16
  padding-block: 0.5rem;
17
17
  padding-inline: 0.75rem;
18
- font-family: var(--sigvelo-font-family);
18
+ font-family: var(--sigvelo-font-sans);
19
19
  font-size: 0.875rem;
20
20
  line-height: 1.25;
21
21
  text-align: center;
22
- color: var(--sigvelo-text-body);
23
- background-color: var(--sigvelo-background-color);
24
- border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-neutral-stroke-soft);
22
+ color: var(--sigvelo-color-text);
23
+ background-color: var(--sigvelo-color-canvas);
24
+ border: var(--sigvelo-border-style) var(--sigvelo-border-width)
25
+ var(--sigvelo-color-neutral-border-muted);
25
26
  border-inline: none;
26
27
  transition:
27
28
  border-color 150ms ease,
@@ -30,7 +31,7 @@
30
31
 
31
32
  .number-field__input:focus-visible {
32
33
  outline: none;
33
- border-color: var(--sigvelo-focus-color);
34
+ border-color: var(--sigvelo-color-focus);
34
35
  z-index: 1;
35
36
  }
36
37
 
@@ -40,7 +41,7 @@
40
41
  }
41
42
 
42
43
  .number-field__input[data-invalid] {
43
- border-color: var(--sigvelo-destructive-fill-mid);
44
+ border-color: var(--sigvelo-color-danger-bg);
44
45
  }
45
46
 
46
47
  .number-field__decrement,
@@ -50,12 +51,13 @@
50
51
  justify-content: center;
51
52
  width: 2.5rem;
52
53
  height: 2.5rem;
53
- font-family: var(--sigvelo-font-family);
54
+ font-family: var(--sigvelo-font-sans);
54
55
  font-size: 1rem;
55
56
  font-weight: var(--sigvelo-font-weight-semibold);
56
- color: var(--sigvelo-text-body);
57
- background-color: var(--sigvelo-background-color);
58
- border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-neutral-stroke-soft);
57
+ color: var(--sigvelo-color-text);
58
+ background-color: var(--sigvelo-color-canvas);
59
+ border: var(--sigvelo-border-style) var(--sigvelo-border-width)
60
+ var(--sigvelo-color-neutral-border-muted);
59
61
  cursor: pointer;
60
62
  user-select: none;
61
63
  transition:
@@ -64,27 +66,27 @@
64
66
  }
65
67
 
66
68
  .number-field__decrement {
67
- border-start-start-radius: var(--sigvelo-border-radius-md);
68
- border-end-start-radius: var(--sigvelo-border-radius-md);
69
+ border-start-start-radius: var(--sigvelo-radius-md);
70
+ border-end-start-radius: var(--sigvelo-radius-md);
69
71
  }
70
72
 
71
73
  .number-field__increment {
72
- border-start-end-radius: var(--sigvelo-border-radius-md);
73
- border-end-end-radius: var(--sigvelo-border-radius-md);
74
+ border-start-end-radius: var(--sigvelo-radius-md);
75
+ border-end-end-radius: var(--sigvelo-radius-md);
74
76
  }
75
77
 
76
78
  .number-field__decrement:hover,
77
79
  .number-field__increment:hover {
78
- background-color: var(--sigvelo-neutral-fill-softer);
79
- color: var(--sigvelo-neutral-text-on-soft);
80
+ background-color: var(--sigvelo-color-neutral-bg-subtle);
81
+ color: var(--sigvelo-color-neutral-text-on-subtle);
80
82
  }
81
83
 
82
84
  .number-field__decrement:focus-visible,
83
85
  .number-field__increment:focus-visible {
84
86
  outline: none;
85
87
  box-shadow:
86
- 0 0 0 2px var(--sigvelo-background-color),
87
- 0 0 0 4px var(--sigvelo-focus-color);
88
+ 0 0 0 2px var(--sigvelo-color-canvas),
89
+ 0 0 0 4px var(--sigvelo-color-focus);
88
90
  z-index: 1;
89
91
  }
90
92
 
package/dist/styles/popover.css CHANGED
@@ -4,14 +4,15 @@
4
4
  justify-content: center;
5
5
  padding-block: 0.5rem;
6
6
  padding-inline: 1rem;
7
- font-family: var(--sigvelo-font-family);
7
+ font-family: var(--sigvelo-font-sans);
8
8
  font-size: 0.875rem;
9
9
  font-weight: var(--sigvelo-font-weight-semibold);
10
10
  line-height: 1.25;
11
- color: var(--sigvelo-text-body);
12
- background-color: var(--sigvelo-background-color);
13
- border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-neutral-stroke-soft);
14
- border-radius: var(--sigvelo-border-radius-md);
11
+ color: var(--sigvelo-color-text);
12
+ background-color: var(--sigvelo-color-canvas);
13
+ border: var(--sigvelo-border-style) var(--sigvelo-border-width)
14
+ var(--sigvelo-color-neutral-border-muted);
15
+ border-radius: var(--sigvelo-radius-md);
15
16
  cursor: pointer;
16
17
  transition:
17
18
  background-color 150ms ease,
@@ -19,22 +20,22 @@
19
20
  }
20
21
 
21
22
  .popover__trigger:hover {
22
- background-color: var(--sigvelo-neutral-fill-softer);
23
- color: var(--sigvelo-neutral-text-on-soft);
23
+ background-color: var(--sigvelo-color-neutral-bg-subtle);
24
+ color: var(--sigvelo-color-neutral-text-on-subtle);
24
25
  }
25
26
 
26
27
  .popover__trigger:focus-visible {
27
28
  outline: none;
28
29
  box-shadow:
29
- 0 0 0 2px var(--sigvelo-background-color),
30
- 0 0 0 4px var(--sigvelo-focus-color);
30
+ 0 0 0 2px var(--sigvelo-color-canvas),
31
+ 0 0 0 4px var(--sigvelo-color-focus);
31
32
  }
32
33
 
33
34
  .popover__backdrop {
34
35
  position: fixed;
35
36
  inset: 0;
36
37
  z-index: 50;
37
- background-color: color-mix(in oklab, var(--sigvelo-text-body), transparent 50%);
38
+ background-color: color-mix(in oklab, var(--sigvelo-color-text), transparent 50%);
38
39
  transition: opacity 150ms ease;
39
40
  }
40
41
 
@@ -52,13 +53,14 @@
52
53
  min-width: 12rem;
53
54
  max-width: 20rem;
54
55
  padding: 1rem;
55
- font-family: var(--sigvelo-font-family);
56
- background-color: var(--sigvelo-background-color);
57
- border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-neutral-stroke-soft);
58
- border-radius: var(--sigvelo-border-radius-md);
56
+ font-family: var(--sigvelo-font-sans);
57
+ background-color: var(--sigvelo-color-canvas);
58
+ border: var(--sigvelo-border-style) var(--sigvelo-border-width)
59
+ var(--sigvelo-color-neutral-border-muted);
60
+ border-radius: var(--sigvelo-radius-md);
59
61
  box-shadow:
60
- 0 10px 15px -3px color-mix(in oklab, var(--sigvelo-text-body), transparent 90%),
61
- 0 4px 6px -4px color-mix(in oklab, var(--sigvelo-text-body), transparent 90%);
62
+ 0 10px 15px -3px color-mix(in oklab, var(--sigvelo-color-text), transparent 90%),
63
+ 0 4px 6px -4px color-mix(in oklab, var(--sigvelo-color-text), transparent 90%);
62
64
  outline: none;
63
65
  transform-origin: var(--transform-origin);
64
66
  transition:
@@ -75,8 +77,9 @@
75
77
  .popover__arrow {
76
78
  width: 0.75rem;
77
79
  height: 0.75rem;
78
- background-color: var(--sigvelo-background-color);
79
- border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-neutral-stroke-soft);
80
+ background-color: var(--sigvelo-color-canvas);
81
+ border: var(--sigvelo-border-style) var(--sigvelo-border-width)
82
+ var(--sigvelo-color-neutral-border-muted);
80
83
  transform: rotate(45deg);
81
84
  }
82
85
 
@@ -105,14 +108,20 @@
105
108
  font-size: 0.875rem;
106
109
  font-weight: var(--sigvelo-font-weight-bold);
107
110
  line-height: 1.25;
108
- color: var(--sigvelo-text-body);
111
+ color: var(--sigvelo-color-text);
109
112
  }
110
113
 
111
114
  .popover__description {
112
115
  margin: 0;
113
116
  font-size: 0.875rem;
114
117
  line-height: 1.5;
115
- color: var(--sigvelo-text-muted);
118
+ color: var(--sigvelo-color-text-muted);
119
+ }
120
+
121
+ .popover__header {
122
+ display: grid;
123
+ gap: 0.5rem;
124
+ margin-block-end: 0.75rem;
116
125
  }
117
126
 
118
127
  .popover__close {
@@ -122,13 +131,14 @@
122
131
  padding-block: 0.25rem;
123
132
  padding-inline: 0.5rem;
124
133
  margin-block-start: 0.75rem;
125
- font-family: var(--sigvelo-font-family);
134
+ font-family: var(--sigvelo-font-sans);
126
135
  font-size: 0.75rem;
127
136
  font-weight: var(--sigvelo-font-weight-semibold);
128
- color: var(--sigvelo-text-muted);
137
+ color: var(--sigvelo-color-text-muted);
129
138
  background-color: transparent;
130
- border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-neutral-stroke-soft);
131
- border-radius: var(--sigvelo-border-radius-sm);
139
+ border: var(--sigvelo-border-style) var(--sigvelo-border-width)
140
+ var(--sigvelo-color-neutral-border-muted);
141
+ border-radius: var(--sigvelo-radius-sm);
132
142
  cursor: pointer;
133
143
  transition:
134
144
  background-color 150ms ease,
@@ -136,13 +146,13 @@
136
146
  }
137
147
 
138
148
  .popover__close:hover {
139
- background-color: var(--sigvelo-neutral-fill-softer);
140
- color: var(--sigvelo-neutral-text-on-soft);
149
+ background-color: var(--sigvelo-color-neutral-bg-subtle);
150
+ color: var(--sigvelo-color-neutral-text-on-subtle);
141
151
  }
142
152
 
143
153
  .popover__close:focus-visible {
144
154
  outline: none;
145
155
  box-shadow:
146
- 0 0 0 2px var(--sigvelo-background-color),
147
- 0 0 0 4px var(--sigvelo-focus-color);
156
+ 0 0 0 2px var(--sigvelo-color-canvas),
157
+ 0 0 0 4px var(--sigvelo-color-focus);
148
158
  }
package/dist/styles/preview-card.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .preview-card__trigger {
2
- color: var(--sigvelo-primary-fill-mid);
2
+ color: var(--sigvelo-color-primary-bg);
3
3
  text-decoration: underline;
4
4
  text-underline-offset: 2px;
5
5
  cursor: pointer;
@@ -7,15 +7,15 @@
7
7
  }
8
8
 
9
9
  .preview-card__trigger:hover {
10
- color: color-mix(in oklab, var(--sigvelo-primary-fill-mid), transparent 20%);
10
+ color: color-mix(in oklab, var(--sigvelo-color-primary-bg), transparent 20%);
11
11
  }
12
12
 
13
13
  .preview-card__trigger:focus-visible {
14
14
  outline: none;
15
15
  box-shadow:
16
- 0 0 0 2px var(--sigvelo-background-color),
17
- 0 0 0 4px var(--sigvelo-focus-color);
18
- border-radius: var(--sigvelo-border-radius-sm);
16
+ 0 0 0 2px var(--sigvelo-color-canvas),
17
+ 0 0 0 4px var(--sigvelo-color-focus);
18
+ border-radius: var(--sigvelo-radius-sm);
19
19
  }
20
20
 
21
21
  .preview-card__backdrop {
@@ -32,13 +32,14 @@
32
32
  min-width: 200px;
33
33
  max-width: 320px;
34
34
  padding: 1rem;
35
- background-color: var(--sigvelo-paper-color);
36
- color: var(--sigvelo-text-body);
37
- border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-neutral-stroke-soft);
38
- border-radius: var(--sigvelo-border-radius-md);
35
+ background-color: var(--sigvelo-color-surface);
36
+ color: var(--sigvelo-color-text);
37
+ border: var(--sigvelo-border-style) var(--sigvelo-border-width)
38
+ var(--sigvelo-color-neutral-border-muted);
39
+ border-radius: var(--sigvelo-radius-md);
39
40
  box-shadow:
40
- 0 10px 15px -3px color-mix(in oklab, var(--sigvelo-text-body), transparent 90%),
41
- 0 4px 6px -4px color-mix(in oklab, var(--sigvelo-text-body), transparent 90%);
41
+ 0 10px 15px -3px color-mix(in oklab, var(--sigvelo-color-text), transparent 90%),
42
+ 0 4px 6px -4px color-mix(in oklab, var(--sigvelo-color-text), transparent 90%);
42
43
  animation: preview-card-enter 150ms ease;
43
44
  }
44
45
 
@@ -72,8 +73,9 @@
72
73
  width: 10px;
73
74
  height: 10px;
74
75
  transform: rotate(45deg);
75
- background-color: var(--sigvelo-paper-color);
76
- border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-neutral-stroke-soft);
76
+ background-color: var(--sigvelo-color-surface);
77
+ border: var(--sigvelo-border-style) var(--sigvelo-border-width)
78
+ var(--sigvelo-color-neutral-border-muted);
77
79
  border-right: none;
78
80
  border-bottom: none;
79
81
  }