@sabrenski/spire-ui 0.0.1

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 (237) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +233 -0
  3. package/dist/index.d.ts +4981 -0
  4. package/dist/spire-ui.css +1 -0
  5. package/dist/spire-ui.es.js +18403 -0
  6. package/dist/spire-ui.umd.js +45 -0
  7. package/package.json +83 -0
  8. package/src/components/Accordion/Accordion.test.ts +218 -0
  9. package/src/components/Accordion/AccordionContent.vue +112 -0
  10. package/src/components/Accordion/AccordionItem.vue +87 -0
  11. package/src/components/Accordion/AccordionRoot.vue +111 -0
  12. package/src/components/Accordion/AccordionTrigger.vue +125 -0
  13. package/src/components/Accordion/index.ts +11 -0
  14. package/src/components/Accordion/keys.ts +23 -0
  15. package/src/components/Avatar/Avatar.test.ts +181 -0
  16. package/src/components/Avatar/Avatar.vue +150 -0
  17. package/src/components/Avatar/index.ts +2 -0
  18. package/src/components/Badge/Badge.test.ts +141 -0
  19. package/src/components/Badge/Badge.vue +133 -0
  20. package/src/components/Badge/index.ts +2 -0
  21. package/src/components/BadgeContainer/BadgeContainer.test.ts +150 -0
  22. package/src/components/BadgeContainer/BadgeContainer.vue +90 -0
  23. package/src/components/BadgeContainer/index.ts +2 -0
  24. package/src/components/Breadcrumb/Breadcrumb.test.ts +342 -0
  25. package/src/components/Breadcrumb/BreadcrumbEllipsis.vue +96 -0
  26. package/src/components/Breadcrumb/BreadcrumbItem.vue +16 -0
  27. package/src/components/Breadcrumb/BreadcrumbLink.vue +67 -0
  28. package/src/components/Breadcrumb/BreadcrumbList.vue +20 -0
  29. package/src/components/Breadcrumb/BreadcrumbPage.vue +25 -0
  30. package/src/components/Breadcrumb/BreadcrumbRoot.vue +41 -0
  31. package/src/components/Breadcrumb/BreadcrumbSeparator.vue +63 -0
  32. package/src/components/Breadcrumb/index.ts +13 -0
  33. package/src/components/Breadcrumb/keys.ts +7 -0
  34. package/src/components/Button/Button.test.ts +231 -0
  35. package/src/components/Button/Button.vue +349 -0
  36. package/src/components/Button/index.ts +2 -0
  37. package/src/components/Callout/Callout.test.ts +260 -0
  38. package/src/components/Callout/Callout.vue +341 -0
  39. package/src/components/Callout/index.ts +2 -0
  40. package/src/components/Card/Card.test.ts +565 -0
  41. package/src/components/Card/Card.vue +209 -0
  42. package/src/components/Card/CardContent.vue +57 -0
  43. package/src/components/Card/CardFooter.vue +72 -0
  44. package/src/components/Card/CardHeader.vue +111 -0
  45. package/src/components/Card/CardImage.vue +124 -0
  46. package/src/components/Card/index.ts +14 -0
  47. package/src/components/Chart/BarChart.vue +208 -0
  48. package/src/components/Chart/BaseChart.vue +444 -0
  49. package/src/components/Chart/Chart.test.ts +359 -0
  50. package/src/components/Chart/DonutChart.vue +283 -0
  51. package/src/components/Chart/LineChart.vue +211 -0
  52. package/src/components/Chart/index.ts +20 -0
  53. package/src/components/Chart/useChartTheme.ts +192 -0
  54. package/src/components/Checkbox/Checkbox.test.ts +209 -0
  55. package/src/components/Checkbox/Checkbox.vue +285 -0
  56. package/src/components/Checkbox/index.ts +2 -0
  57. package/src/components/ChoiceChip/ChoiceChip.test.ts +142 -0
  58. package/src/components/ChoiceChip/ChoiceChip.vue +218 -0
  59. package/src/components/ChoiceChip/index.ts +2 -0
  60. package/src/components/ChoiceChipGroup/ChoiceChipGroup.test.ts +151 -0
  61. package/src/components/ChoiceChipGroup/ChoiceChipGroup.vue +70 -0
  62. package/src/components/ChoiceChipGroup/index.ts +2 -0
  63. package/src/components/ColorPicker/ColorArea.vue +159 -0
  64. package/src/components/ColorPicker/ColorPicker.test.ts +250 -0
  65. package/src/components/ColorPicker/ColorPicker.vue +339 -0
  66. package/src/components/ColorPicker/ColorSlider.vue +191 -0
  67. package/src/components/ColorPicker/index.ts +7 -0
  68. package/src/components/Combobox/Combobox.test.ts +891 -0
  69. package/src/components/Combobox/Combobox.vue +934 -0
  70. package/src/components/Combobox/index.ts +2 -0
  71. package/src/components/DataTable/DataTable.test.ts +1221 -0
  72. package/src/components/DataTable/DataTable.vue +1415 -0
  73. package/src/components/DataTable/index.ts +10 -0
  74. package/src/components/DatePicker/DatePicker.test.ts +625 -0
  75. package/src/components/DatePicker/DatePicker.vue +1586 -0
  76. package/src/components/DatePicker/index.ts +2 -0
  77. package/src/components/Drawer/Drawer.test.ts +336 -0
  78. package/src/components/Drawer/Drawer.vue +466 -0
  79. package/src/components/Drawer/index.ts +2 -0
  80. package/src/components/Dropdown/Dropdown.test.ts +607 -0
  81. package/src/components/Dropdown/Dropdown.vue +807 -0
  82. package/src/components/Dropdown/DropdownItem.vue +227 -0
  83. package/src/components/Dropdown/DropdownSeparator.vue +14 -0
  84. package/src/components/Dropdown/DropdownSub.vue +104 -0
  85. package/src/components/Dropdown/DropdownSubContent.vue +187 -0
  86. package/src/components/Dropdown/DropdownSubTrigger.vue +151 -0
  87. package/src/components/Dropdown/index.ts +14 -0
  88. package/src/components/EmptyState/EmptyState.test.ts +180 -0
  89. package/src/components/EmptyState/EmptyState.vue +137 -0
  90. package/src/components/EmptyState/index.ts +2 -0
  91. package/src/components/FileUpload/FileUpload.test.ts +1151 -0
  92. package/src/components/FileUpload/FileUpload.vue +1042 -0
  93. package/src/components/FileUpload/index.ts +2 -0
  94. package/src/components/Heading/Heading.test.ts +107 -0
  95. package/src/components/Heading/Heading.vue +67 -0
  96. package/src/components/Heading/index.ts +2 -0
  97. package/src/components/Icon/Icon.test.ts +157 -0
  98. package/src/components/Icon/Icon.vue +86 -0
  99. package/src/components/Icon/index.ts +2 -0
  100. package/src/components/Input/Input.test.ts +273 -0
  101. package/src/components/Input/Input.vue +388 -0
  102. package/src/components/Input/index.ts +2 -0
  103. package/src/components/Layout/Container.vue +67 -0
  104. package/src/components/Layout/Grid.vue +159 -0
  105. package/src/components/Layout/GridItem.vue +154 -0
  106. package/src/components/Layout/Layout.test.ts +202 -0
  107. package/src/components/Layout/Stack.vue +128 -0
  108. package/src/components/Layout/index.ts +9 -0
  109. package/src/components/Layout/keys.ts +7 -0
  110. package/src/components/Modal/Modal.test.ts +311 -0
  111. package/src/components/Modal/Modal.vue +336 -0
  112. package/src/components/Modal/index.ts +2 -0
  113. package/src/components/Pagination/Pagination.test.ts +303 -0
  114. package/src/components/Pagination/Pagination.vue +212 -0
  115. package/src/components/Pagination/index.ts +3 -0
  116. package/src/components/Pagination/utils.ts +86 -0
  117. package/src/components/Popover/Popover.test.ts +285 -0
  118. package/src/components/Popover/Popover.vue +441 -0
  119. package/src/components/Popover/index.ts +2 -0
  120. package/src/components/Progress/Progress.test.ts +361 -0
  121. package/src/components/Progress/Progress.vue +363 -0
  122. package/src/components/Progress/index.ts +7 -0
  123. package/src/components/Radio/Radio.test.ts +216 -0
  124. package/src/components/Radio/Radio.vue +214 -0
  125. package/src/components/Radio/index.ts +2 -0
  126. package/src/components/Rating/Rating.test.ts +319 -0
  127. package/src/components/Rating/Rating.vue +247 -0
  128. package/src/components/Rating/index.ts +2 -0
  129. package/src/components/SegmentedControl/SegmentedControl.test.ts +292 -0
  130. package/src/components/SegmentedControl/SegmentedControl.vue +288 -0
  131. package/src/components/SegmentedControl/index.ts +2 -0
  132. package/src/components/Select/Select.test.ts +589 -0
  133. package/src/components/Select/Select.vue +666 -0
  134. package/src/components/Select/index.ts +2 -0
  135. package/src/components/Sidebar/Sidebar.test.ts +301 -0
  136. package/src/components/Sidebar/SidebarGroup.vue +103 -0
  137. package/src/components/Sidebar/SidebarItem.vue +196 -0
  138. package/src/components/Sidebar/SidebarLayout.vue +42 -0
  139. package/src/components/Sidebar/SidebarRoot.vue +122 -0
  140. package/src/components/Sidebar/index.ts +11 -0
  141. package/src/components/Sidebar/keys.ts +14 -0
  142. package/src/components/Skeleton/Skeleton.test.ts +130 -0
  143. package/src/components/Skeleton/Skeleton.vue +104 -0
  144. package/src/components/Skeleton/index.ts +2 -0
  145. package/src/components/Slider/Slider.test.ts +416 -0
  146. package/src/components/Slider/Slider.vue +435 -0
  147. package/src/components/Slider/index.ts +2 -0
  148. package/src/components/Slider/utils.ts +91 -0
  149. package/src/components/Spinner/Spinner.test.ts +79 -0
  150. package/src/components/Spinner/Spinner.vue +159 -0
  151. package/src/components/Spinner/index.ts +2 -0
  152. package/src/components/SpireProvider/SpireProvider.vue +71 -0
  153. package/src/components/SpireProvider/index.ts +11 -0
  154. package/src/components/Stepper/Stepper.test.ts +221 -0
  155. package/src/components/Stepper/StepperContent.vue +51 -0
  156. package/src/components/Stepper/StepperItem.vue +89 -0
  157. package/src/components/Stepper/StepperRoot.vue +101 -0
  158. package/src/components/Stepper/StepperSeparator.vue +52 -0
  159. package/src/components/Stepper/StepperTrigger.vue +144 -0
  160. package/src/components/Stepper/index.ts +11 -0
  161. package/src/components/Stepper/keys.ts +27 -0
  162. package/src/components/Switch/Switch.test.ts +214 -0
  163. package/src/components/Switch/Switch.vue +235 -0
  164. package/src/components/Switch/index.ts +2 -0
  165. package/src/components/Tabs/Tabs.test.ts +363 -0
  166. package/src/components/Tabs/Tabs.vue +318 -0
  167. package/src/components/Tabs/index.ts +2 -0
  168. package/src/components/Text/Text.test.ts +154 -0
  169. package/src/components/Text/Text.vue +100 -0
  170. package/src/components/Text/index.ts +2 -0
  171. package/src/components/Textarea/Textarea.test.ts +432 -0
  172. package/src/components/Textarea/Textarea.vue +411 -0
  173. package/src/components/Textarea/index.ts +2 -0
  174. package/src/components/TimePicker/TimePicker.test.ts +352 -0
  175. package/src/components/TimePicker/TimePicker.vue +569 -0
  176. package/src/components/TimePicker/index.ts +2 -0
  177. package/src/components/Timeline/Timeline.test.ts +193 -0
  178. package/src/components/Timeline/Timeline.vue +111 -0
  179. package/src/components/Timeline/TimelineItem.vue +167 -0
  180. package/src/components/Timeline/index.ts +13 -0
  181. package/src/components/Timeline/keys.ts +21 -0
  182. package/src/components/Toast/ToastItem.test.ts +289 -0
  183. package/src/components/Toast/ToastItem.vue +370 -0
  184. package/src/components/Toast/ToastProvider.test.ts +158 -0
  185. package/src/components/Toast/ToastProvider.vue +181 -0
  186. package/src/components/Toast/index.ts +83 -0
  187. package/src/components/Toast/toastState.test.ts +165 -0
  188. package/src/components/Toast/toastState.ts +161 -0
  189. package/src/components/ToggleButton/ToggleButton.test.ts +166 -0
  190. package/src/components/ToggleButton/ToggleButton.vue +197 -0
  191. package/src/components/ToggleButton/index.ts +2 -0
  192. package/src/components/ToggleGroup/ToggleGroup.test.ts +181 -0
  193. package/src/components/ToggleGroup/ToggleGroup.vue +130 -0
  194. package/src/components/ToggleGroup/index.ts +2 -0
  195. package/src/components/Tooltip/Tooltip.test.ts +238 -0
  196. package/src/components/Tooltip/Tooltip.vue +217 -0
  197. package/src/components/Tooltip/index.ts +2 -0
  198. package/src/components/TreeView/TreeView.test.ts +357 -0
  199. package/src/components/TreeView/TreeView.vue +251 -0
  200. package/src/components/TreeView/TreeViewItem.vue +288 -0
  201. package/src/components/TreeView/index.ts +11 -0
  202. package/src/components/TreeView/keys.ts +35 -0
  203. package/src/composables/index.ts +12 -0
  204. package/src/composables/useClickOutside.ts +36 -0
  205. package/src/composables/useClipboard.ts +35 -0
  206. package/src/composables/useEventListener.ts +48 -0
  207. package/src/composables/useFocusTrap.ts +58 -0
  208. package/src/composables/useHoverReveal.ts +98 -0
  209. package/src/composables/useId.ts +10 -0
  210. package/src/composables/useMagnetic.ts +171 -0
  211. package/src/composables/useRelativePosition.ts +127 -0
  212. package/src/composables/useRipple.ts +146 -0
  213. package/src/composables/useScrollLock.ts +25 -0
  214. package/src/composables/useSpireConfig.ts +27 -0
  215. package/src/composables/useStagger.ts +224 -0
  216. package/src/config/icons.test.ts +115 -0
  217. package/src/config/icons.ts +170 -0
  218. package/src/index.ts +361 -0
  219. package/src/styles/depth.css +129 -0
  220. package/src/styles/effects.css +169 -0
  221. package/src/styles/fallback.css +152 -0
  222. package/src/styles/main.css +25 -0
  223. package/src/styles/mood.css +211 -0
  224. package/src/styles/motion.css +159 -0
  225. package/src/styles/reset.css +97 -0
  226. package/src/styles/theme.css +708 -0
  227. package/src/styles/tokens.css +183 -0
  228. package/src/utils/.gitkeep +0 -0
  229. package/src/utils/color.ts +277 -0
  230. package/src/utils/date.test.ts +522 -0
  231. package/src/utils/date.ts +380 -0
  232. package/src/utils/index.ts +23 -0
  233. package/src/utils/object.test.ts +80 -0
  234. package/src/utils/object.ts +25 -0
  235. package/src/utils/string.test.ts +64 -0
  236. package/src/utils/string.ts +32 -0
  237. package/src/utils/time.ts +156 -0
package/src/styles/theme.css ADDED
@@ -0,0 +1,708 @@
1
+ /* Semantic Layer - Warm Indigo Theme */
2
+
3
+ :root {
4
+ /* Backgrounds - warm cream tints */
5
+ --bg-primary: oklch(0.995 0.003 60);
6
+ --bg-secondary: var(--color-stone-50);
7
+ --bg-tertiary: var(--color-stone-100);
8
+ --bg-inverse: var(--color-stone-900);
9
+
10
+ /* Text - warm, not harsh black */
11
+ --text-primary: var(--color-stone-900);
12
+ --text-secondary: var(--color-stone-600);
13
+ --text-tertiary: var(--color-stone-500);
14
+ --text-disabled: var(--color-stone-400);
15
+ --text-inverse: var(--color-stone-50);
16
+
17
+ /* Borders */
18
+ --border-default: var(--color-stone-200);
19
+ --border-hover: var(--color-stone-300);
20
+ --border-focus: var(--color-primary-500);
21
+
22
+ /* Actions - Primary (Rich Indigo) */
23
+ --action-primary: var(--color-primary-600);
24
+ --action-primary-hover: var(--color-primary-700);
25
+ --action-primary-active: var(--color-primary-800);
26
+ --action-primary-text: var(--color-white);
27
+
28
+ /* Actions - Secondary */
29
+ --action-secondary: var(--color-stone-100);
30
+ --action-secondary-hover: var(--color-stone-200);
31
+ --action-secondary-active: var(--color-stone-300);
32
+ --action-secondary-text: var(--color-stone-700);
33
+
34
+ /* Actions - Destructive (Coral) */
35
+ --action-destructive: var(--color-coral-500);
36
+ --action-destructive-hover: var(--color-coral-600);
37
+ --action-destructive-active: var(--color-coral-700);
38
+ --action-destructive-text: var(--color-white);
39
+
40
+ /* Status - Success (Teal) */
41
+ --status-success: var(--color-teal-500);
42
+ --status-success-bg: var(--color-teal-50);
43
+ --status-success-text: var(--color-teal-700);
44
+
45
+ /* Status - Warning (Amber) */
46
+ --status-warning: var(--color-amber-500);
47
+ --status-warning-bg: var(--color-amber-50);
48
+ --status-warning-text: var(--color-amber-600);
49
+
50
+ /* Status - Error (Coral) */
51
+ --status-error: var(--color-coral-500);
52
+ --status-error-bg: var(--color-coral-50);
53
+ --status-error-text: var(--color-coral-700);
54
+
55
+ /* Status - Info (Indigo) */
56
+ --status-info: var(--color-primary-500);
57
+ --status-info-bg: var(--color-primary-50);
58
+ --status-info-text: var(--color-primary-700);
59
+
60
+ /* Focus Ring */
61
+ --ring-color: var(--color-primary-500);
62
+ --ring-offset: var(--bg-primary);
63
+
64
+ /* Badge - Subtle high-contrast pairing */
65
+ --badge-default-bg: var(--color-stone-100);
66
+ --badge-default-text: var(--color-stone-700);
67
+ --badge-default-border: var(--color-stone-200);
68
+
69
+ --badge-success-bg: var(--color-teal-50);
70
+ --badge-success-text: var(--color-teal-700);
71
+ --badge-success-border: var(--color-teal-100);
72
+
73
+ --badge-warning-bg: var(--color-amber-50);
74
+ --badge-warning-text: var(--color-amber-600);
75
+ --badge-warning-border: var(--color-amber-100);
76
+
77
+ --badge-danger-bg: var(--color-coral-50);
78
+ --badge-danger-text: var(--color-coral-700);
79
+ --badge-danger-border: var(--color-coral-100);
80
+
81
+ --badge-info-bg: var(--color-primary-50);
82
+ --badge-info-text: var(--color-primary-700);
83
+ --badge-info-border: var(--color-primary-100);
84
+
85
+ /* Avatar - Soft variant */
86
+ --avatar-soft-bg: var(--color-primary-50);
87
+ --avatar-soft-text: var(--color-primary-600);
88
+
89
+ /* Tooltip */
90
+ --tooltip-bg: var(--color-stone-900);
91
+ --tooltip-text: var(--color-stone-50);
92
+
93
+ /* Input */
94
+ --input-bg: var(--color-white);
95
+ --input-bg-disabled: var(--color-stone-100);
96
+ --input-text: var(--color-stone-900);
97
+ --input-text-disabled: var(--color-stone-400);
98
+ --input-placeholder: var(--color-stone-400);
99
+ --input-label: var(--color-stone-700);
100
+ --input-hint: var(--color-stone-500);
101
+ --input-error: var(--color-coral-600);
102
+ --input-icon: var(--color-stone-400);
103
+ --input-border: var(--color-stone-300);
104
+ --input-border-hover: var(--color-stone-400);
105
+ --input-border-focus: var(--color-primary-500);
106
+ --input-border-error: var(--color-coral-500);
107
+ --input-border-readonly: var(--color-stone-200);
108
+ --input-ring: oklch(0.585 0.233 275 / 0.2);
109
+ --input-ring-error: oklch(0.63 0.19 20 / 0.2);
110
+ --input-shadow: inset 0 1px 2px oklch(0 0 0 / calc(var(--depth-shadow-opacity, 0.05) * 0.4));
111
+ --input-shadow-focus: inset 0 1px 1px oklch(0 0 0 / calc(var(--depth-shadow-opacity, 0.05) * 0.2));
112
+
113
+ /* Switch */
114
+ --switch-track-off: var(--color-stone-300);
115
+ --switch-track-on: var(--color-primary-600);
116
+ --switch-thumb: var(--color-white);
117
+ --switch-spinner: var(--color-stone-400);
118
+
119
+ /* Checkbox */
120
+ --checkbox-bg: var(--color-white);
121
+ --checkbox-border: var(--color-stone-300);
122
+ --checkbox-border-hover: var(--color-stone-400);
123
+ --checkbox-checked-bg: var(--color-primary-600);
124
+ --checkbox-checked-hover: var(--color-primary-700);
125
+ --checkbox-check: var(--color-white);
126
+ --checkbox-label: var(--text-primary);
127
+ --checkbox-description: var(--text-secondary);
128
+
129
+ /* Radio */
130
+ --radio-bg: var(--color-white);
131
+ --radio-border: var(--color-stone-300);
132
+ --radio-border-hover: var(--color-stone-400);
133
+ --radio-checked: var(--color-primary-600);
134
+ --radio-checked-hover: var(--color-primary-700);
135
+ --radio-label: var(--text-primary);
136
+ --radio-description: var(--text-secondary);
137
+
138
+ /* Segmented Control */
139
+ --segmented-bg: var(--color-stone-100);
140
+ --segmented-glider: var(--color-white);
141
+ --segmented-text: var(--color-stone-600);
142
+ --segmented-text-hover: var(--color-stone-900);
143
+ --segmented-text-active: var(--color-stone-900);
144
+
145
+ /* Toggle Button */
146
+ --toggle-bg: var(--color-white);
147
+ --toggle-bg-hover: var(--color-stone-50);
148
+ --toggle-bg-pressed: var(--color-stone-100);
149
+ --toggle-bg-pressed-hover: var(--color-stone-150);
150
+ --toggle-border: var(--color-stone-200);
151
+ --toggle-border-hover: var(--color-stone-300);
152
+ --toggle-border-pressed: var(--color-stone-300);
153
+ --toggle-text: var(--color-stone-600);
154
+ --toggle-text-pressed: var(--color-stone-900);
155
+ --toggle-inset-shadow: oklch(0 0 0 / 0.06);
156
+
157
+ /* Choice Chip */
158
+ --chip-bg: transparent;
159
+ --chip-bg-hover: var(--color-stone-50);
160
+ --chip-bg-active: var(--color-stone-100);
161
+ --chip-bg-selected: var(--color-primary-50);
162
+ --chip-bg-selected-hover: var(--color-primary-100);
163
+ --chip-bg-selected-active: var(--color-indigo-150);
164
+ --chip-border: var(--color-stone-300);
165
+ --chip-border-hover: var(--color-stone-400);
166
+ --chip-border-active: var(--color-stone-400);
167
+ --chip-border-selected: var(--color-primary-500);
168
+ --chip-border-selected-hover: var(--color-primary-600);
169
+ --chip-border-selected-active: var(--color-primary-700);
170
+ --chip-text: var(--color-stone-700);
171
+ --chip-text-selected: var(--color-primary-700);
172
+
173
+ /* Toast */
174
+ --toast-bg: var(--color-white);
175
+ --toast-border: var(--color-stone-200);
176
+ --toast-title: var(--color-stone-900);
177
+ --toast-message: var(--color-stone-600);
178
+ --toast-close: var(--color-stone-400);
179
+ --toast-close-hover: var(--color-stone-600);
180
+ --toast-close-hover-bg: var(--color-stone-100);
181
+ --toast-success-icon: var(--color-teal-500);
182
+ --toast-success-progress: var(--color-teal-500);
183
+ --toast-error-icon: var(--color-coral-500);
184
+ --toast-error-progress: var(--color-coral-500);
185
+ --toast-warning-icon: var(--color-amber-500);
186
+ --toast-warning-progress: var(--color-amber-500);
187
+ --toast-info-icon: var(--color-primary-500);
188
+ --toast-info-progress: var(--color-primary-500);
189
+
190
+ /* Modal */
191
+ --modal-bg: var(--color-white);
192
+ --modal-border: var(--color-stone-200);
193
+ --modal-backdrop: oklch(0 0 0 / 0.5);
194
+ --modal-title: var(--color-stone-900);
195
+ --modal-text: var(--color-stone-700);
196
+ --modal-close: var(--color-stone-400);
197
+ --modal-close-hover: var(--color-stone-600);
198
+ --modal-close-hover-bg: var(--color-stone-100);
199
+
200
+ /* Tabs */
201
+ --tabs-border: var(--color-stone-200);
202
+ --tabs-text: var(--color-stone-500);
203
+ --tabs-text-hover: var(--color-stone-700);
204
+ --tabs-text-active: var(--color-primary-600);
205
+ --tabs-indicator: var(--color-primary-600);
206
+ --tabs-pill-bg: var(--color-stone-100);
207
+ --tabs-pill-indicator: var(--color-white);
208
+
209
+ /* Select */
210
+ --select-menu-bg: var(--color-white);
211
+ --select-menu-border: var(--color-stone-200);
212
+ --select-option-text: var(--color-stone-700);
213
+ --select-option-hover: var(--color-stone-100);
214
+ --select-option-selected: var(--color-primary-600);
215
+
216
+ /* Combobox */
217
+ --combobox-chip-bg: var(--color-stone-100);
218
+ --combobox-chip-text: var(--color-stone-700);
219
+ --combobox-chip-remove: var(--color-stone-400);
220
+ --combobox-chip-remove-hover: var(--color-stone-600);
221
+ --combobox-chip-marked-bg: var(--color-primary-100);
222
+ --combobox-chip-marked-border: var(--color-primary-400);
223
+ --combobox-match-bg: var(--color-amber-100);
224
+ --combobox-match-text: var(--color-amber-900);
225
+ --combobox-overflow-bg: var(--color-stone-200);
226
+ --combobox-overflow-text: var(--color-stone-600);
227
+
228
+ /* File Upload */
229
+ --file-upload-bg: var(--color-stone-50);
230
+ --file-upload-bg-hover: var(--color-stone-100);
231
+ --file-upload-border: var(--color-stone-300);
232
+ --file-upload-border-hover: var(--color-stone-400);
233
+ --file-upload-icon: var(--color-stone-400);
234
+ --file-upload-icon-bg: var(--color-stone-100);
235
+ --file-upload-active-bg: var(--color-primary-50);
236
+ --file-upload-active-border: var(--color-primary-500);
237
+ --file-upload-active-icon: var(--color-primary-600);
238
+ --file-upload-active-icon-bg: var(--color-primary-100);
239
+ --file-upload-error-bg: var(--color-coral-50);
240
+ --file-upload-error-border: var(--color-coral-500);
241
+ --file-upload-success-border: var(--color-teal-500);
242
+ --file-upload-file-bg: var(--color-white);
243
+ --file-upload-file-border: var(--color-stone-200);
244
+ --file-upload-progress-bg: var(--color-stone-200);
245
+ --file-upload-progress: var(--color-primary-500);
246
+ --file-upload-remove-hover-bg: var(--color-coral-50);
247
+ --file-upload-paste-bg: var(--color-teal-500);
248
+ --file-upload-paste-text: var(--color-white);
249
+
250
+ /* Card */
251
+ --card-bg: var(--color-white);
252
+ --card-bg-hover: var(--color-stone-50);
253
+ --card-border: var(--color-stone-200);
254
+ --card-border-hover: var(--color-stone-300);
255
+ --card-radius: var(--radius-xl);
256
+ --card-shadow: var(--shadow-md);
257
+ --card-shadow-hover: var(--shadow-lg);
258
+ --card-title: var(--color-stone-900);
259
+ --card-subtitle: var(--color-stone-500);
260
+ --card-text: var(--color-stone-700);
261
+ --card-footer-bg: var(--color-stone-50);
262
+ --card-footer-border: var(--color-stone-200);
263
+
264
+ /* DataTable */
265
+ --table-bg: var(--color-white);
266
+ --table-border: var(--color-stone-200);
267
+ --table-header-bg: var(--color-stone-50);
268
+ --table-header-text: var(--color-stone-700);
269
+ --table-cell-text: var(--color-stone-700);
270
+ --table-row-hover: var(--color-stone-50);
271
+ --table-row-selected: var(--color-primary-50);
272
+ --table-row-striped: var(--color-stone-50);
273
+ --table-sort-icon: var(--color-stone-400);
274
+ --table-sort-icon-active: var(--color-primary-600);
275
+ --table-empty-text: var(--color-stone-500);
276
+ --table-skeleton: var(--color-stone-200);
277
+
278
+ /* EmptyState */
279
+ --empty-state-icon: var(--color-stone-300);
280
+ --empty-state-icon-error: var(--color-coral-400);
281
+ --empty-state-title: var(--color-stone-900);
282
+ --empty-state-description: var(--color-stone-500);
283
+
284
+ /* Skeleton */
285
+ --skeleton-base: var(--color-stone-200);
286
+ --skeleton-highlight: var(--color-stone-100);
287
+
288
+ /* Dropdown */
289
+ --z-dropdown: 50;
290
+ --dropdown-bg: var(--color-white);
291
+ --dropdown-border: var(--color-stone-200);
292
+ --dropdown-item-text: var(--color-stone-700);
293
+ --dropdown-item-hover: var(--color-stone-100);
294
+ --dropdown-item-disabled: var(--color-stone-400);
295
+ --dropdown-item-danger: var(--color-coral-600);
296
+ --dropdown-item-danger-hover: var(--color-coral-50);
297
+ --dropdown-item-shortcut: var(--color-stone-400);
298
+ --dropdown-separator: var(--color-stone-200);
299
+
300
+ /* Breadcrumb */
301
+ --breadcrumb-link: var(--color-stone-500);
302
+ --breadcrumb-link-hover: var(--color-stone-900);
303
+ --breadcrumb-current: var(--color-stone-900);
304
+ --breadcrumb-separator: var(--color-stone-400);
305
+ --breadcrumb-ellipsis: var(--color-stone-500);
306
+ --breadcrumb-ellipsis-hover: var(--color-stone-900);
307
+ --breadcrumb-ellipsis-bg-hover: var(--color-stone-100);
308
+
309
+ /* Callout */
310
+ --callout-info-bg: var(--color-primary-50);
311
+ --callout-info-border: var(--color-primary-200);
312
+ --callout-info-text: var(--color-indigo-900);
313
+ --callout-info-icon: var(--color-primary-500);
314
+ --callout-info-accent: var(--color-primary-500);
315
+
316
+ --callout-success-bg: var(--color-teal-50);
317
+ --callout-success-border: var(--color-teal-200);
318
+ --callout-success-text: var(--color-teal-900);
319
+ --callout-success-icon: var(--color-teal-500);
320
+ --callout-success-accent: var(--color-teal-500);
321
+
322
+ --callout-warning-bg: var(--color-amber-50);
323
+ --callout-warning-border: var(--color-amber-200);
324
+ --callout-warning-text: var(--color-amber-900);
325
+ --callout-warning-icon: var(--color-amber-500);
326
+ --callout-warning-accent: var(--color-amber-500);
327
+
328
+ --callout-error-bg: var(--color-coral-50);
329
+ --callout-error-border: var(--color-coral-200);
330
+ --callout-error-text: var(--color-coral-900);
331
+ --callout-error-icon: var(--color-coral-500);
332
+ --callout-error-accent: var(--color-coral-500);
333
+
334
+ --callout-neutral-bg: var(--color-stone-100);
335
+ --callout-neutral-border: var(--color-stone-200);
336
+ --callout-neutral-text: var(--color-stone-900);
337
+ --callout-neutral-icon: var(--color-stone-500);
338
+ --callout-neutral-accent: var(--color-stone-400);
339
+
340
+ /* Progress */
341
+ --progress-track: var(--color-stone-200);
342
+ --progress-primary: var(--color-primary-600);
343
+ --progress-success: var(--color-teal-500);
344
+ --progress-warning: var(--color-amber-500);
345
+ --progress-error: var(--color-coral-500);
346
+ --progress-value-text: var(--color-stone-700);
347
+
348
+ /* Chart */
349
+ --chart-1: var(--color-primary-500);
350
+ --chart-2: var(--color-teal-500);
351
+ --chart-3: var(--color-amber-500);
352
+ --chart-4: var(--color-coral-500);
353
+ --chart-5: oklch(0.60 0.18 250);
354
+ --chart-6: oklch(0.65 0.20 310);
355
+ --chart-7: oklch(0.70 0.15 340);
356
+ --chart-8: oklch(0.65 0.15 200);
357
+ --chart-text: var(--text-primary);
358
+ --chart-text-muted: var(--text-secondary);
359
+ --chart-grid: var(--color-stone-200);
360
+ --chart-legend-text: var(--text-secondary);
361
+ --chart-tooltip-bg: var(--color-stone-900);
362
+ --chart-tooltip-text: var(--color-stone-50);
363
+ --chart-tooltip-border: transparent;
364
+ }
365
+
366
+ /* Dark Theme */
367
+ [data-theme='dark'] {
368
+ /* Backgrounds - deep warm darks */
369
+ --bg-primary: var(--color-stone-950);
370
+ --bg-secondary: var(--color-stone-900);
371
+ --bg-tertiary: var(--color-stone-800);
372
+ --bg-inverse: var(--color-stone-50);
373
+
374
+ /* Text */
375
+ --text-primary: var(--color-stone-50);
376
+ --text-secondary: var(--color-stone-300);
377
+ --text-tertiary: var(--color-stone-400);
378
+ --text-disabled: var(--color-stone-500);
379
+ --text-inverse: var(--color-stone-900);
380
+
381
+ /* Borders */
382
+ --border-default: var(--color-stone-800);
383
+ --border-hover: var(--color-stone-700);
384
+ --border-focus: var(--color-primary-400);
385
+
386
+ /* Actions - Primary (brighter in dark mode) */
387
+ --action-primary: var(--color-primary-500);
388
+ --action-primary-hover: var(--color-primary-400);
389
+ --action-primary-active: var(--color-primary-600);
390
+
391
+ /* Actions - Secondary */
392
+ --action-secondary: var(--color-stone-800);
393
+ --action-secondary-hover: var(--color-stone-700);
394
+ --action-secondary-active: var(--color-stone-600);
395
+ --action-secondary-text: var(--color-stone-200);
396
+
397
+ /* Actions - Destructive */
398
+ --action-destructive: var(--color-coral-500);
399
+ --action-destructive-hover: var(--color-coral-600);
400
+
401
+ /* Status backgrounds - darker in dark mode */
402
+ --status-success-bg: oklch(0.25 0.05 180);
403
+ --status-success-text: var(--color-teal-100);
404
+ --status-warning-bg: oklch(0.28 0.06 70);
405
+ --status-warning-text: var(--color-amber-100);
406
+ --status-error-bg: oklch(0.25 0.06 20);
407
+ --status-error-text: var(--color-coral-100);
408
+ --status-info-bg: oklch(0.25 0.06 275);
409
+ --status-info-text: var(--color-primary-100);
410
+
411
+ /* Focus Ring */
412
+ --ring-offset: var(--color-stone-950);
413
+
414
+ /* Badge - Dark mode subtle pairing */
415
+ --badge-default-bg: var(--color-stone-800);
416
+ --badge-default-text: var(--color-stone-200);
417
+ --badge-default-border: var(--color-stone-700);
418
+
419
+ --badge-success-bg: oklch(0.25 0.05 180);
420
+ --badge-success-text: var(--color-teal-100);
421
+ --badge-success-border: oklch(0.30 0.04 180);
422
+
423
+ --badge-warning-bg: oklch(0.28 0.06 70);
424
+ --badge-warning-text: var(--color-amber-100);
425
+ --badge-warning-border: oklch(0.33 0.05 70);
426
+
427
+ --badge-danger-bg: oklch(0.25 0.06 20);
428
+ --badge-danger-text: var(--color-coral-100);
429
+ --badge-danger-border: oklch(0.30 0.05 20);
430
+
431
+ --badge-info-bg: oklch(0.25 0.06 275);
432
+ --badge-info-text: var(--color-primary-100);
433
+ --badge-info-border: oklch(0.30 0.05 275);
434
+
435
+ /* Avatar - Soft variant (dark mode) */
436
+ --avatar-soft-bg: oklch(0.25 0.06 275);
437
+ --avatar-soft-text: var(--color-primary-200);
438
+
439
+ /* Tooltip (inverted in dark mode for contrast) */
440
+ --tooltip-bg: var(--color-stone-100);
441
+ --tooltip-text: var(--color-stone-900);
442
+
443
+ /* Input */
444
+ --input-bg: var(--color-stone-900);
445
+ --input-bg-disabled: var(--color-stone-800);
446
+ --input-text: var(--color-stone-50);
447
+ --input-text-disabled: var(--color-stone-500);
448
+ --input-placeholder: var(--color-stone-500);
449
+ --input-label: var(--color-stone-200);
450
+ --input-hint: var(--color-stone-400);
451
+ --input-error: var(--color-coral-500);
452
+ --input-icon: var(--color-stone-500);
453
+ --input-border: var(--color-stone-700);
454
+ --input-border-hover: var(--color-stone-600);
455
+ --input-border-focus: var(--color-primary-400);
456
+ --input-border-error: var(--color-coral-500);
457
+ --input-border-readonly: var(--color-stone-800);
458
+ --input-ring: oklch(0.673 0.182 275 / 0.25);
459
+ --input-ring-error: oklch(0.63 0.19 20 / 0.25);
460
+
461
+ /* Switch */
462
+ --switch-track-off: var(--color-stone-600);
463
+ --switch-track-on: var(--color-primary-500);
464
+ --switch-thumb: var(--color-white);
465
+ --switch-spinner: var(--color-stone-500);
466
+
467
+ /* Checkbox */
468
+ --checkbox-bg: var(--color-stone-900);
469
+ --checkbox-border: var(--color-stone-600);
470
+ --checkbox-border-hover: var(--color-stone-500);
471
+ --checkbox-checked-bg: var(--color-primary-500);
472
+ --checkbox-checked-hover: var(--color-primary-400);
473
+ --checkbox-check: var(--color-white);
474
+ --checkbox-label: var(--text-primary);
475
+ --checkbox-description: var(--text-secondary);
476
+
477
+ /* Radio */
478
+ --radio-bg: var(--color-stone-900);
479
+ --radio-border: var(--color-stone-600);
480
+ --radio-border-hover: var(--color-stone-500);
481
+ --radio-checked: var(--color-primary-500);
482
+ --radio-checked-hover: var(--color-primary-400);
483
+ --radio-label: var(--text-primary);
484
+ --radio-description: var(--text-secondary);
485
+
486
+ /* Segmented Control */
487
+ --segmented-bg: var(--color-stone-800);
488
+ --segmented-glider: var(--color-stone-700);
489
+ --segmented-text: var(--color-stone-400);
490
+ --segmented-text-hover: var(--color-stone-100);
491
+ --segmented-text-active: var(--color-stone-50);
492
+
493
+ /* Toggle Button */
494
+ --toggle-bg: var(--color-stone-800);
495
+ --toggle-bg-hover: var(--color-stone-750);
496
+ --toggle-bg-pressed: var(--color-stone-700);
497
+ --toggle-bg-pressed-hover: var(--color-stone-650);
498
+ --toggle-border: var(--color-stone-700);
499
+ --toggle-border-hover: var(--color-stone-600);
500
+ --toggle-border-pressed: var(--color-stone-600);
501
+ --toggle-text: var(--color-stone-400);
502
+ --toggle-text-pressed: var(--color-stone-100);
503
+ --toggle-inset-shadow: oklch(0 0 0 / 0.15);
504
+
505
+ /* Choice Chip */
506
+ --chip-bg: transparent;
507
+ --chip-bg-hover: var(--color-stone-800);
508
+ --chip-bg-active: var(--color-stone-700);
509
+ --chip-bg-selected: oklch(0.25 0.06 275);
510
+ --chip-bg-selected-hover: oklch(0.28 0.07 275);
511
+ --chip-bg-selected-active: oklch(0.22 0.05 275);
512
+ --chip-border: var(--color-stone-600);
513
+ --chip-border-hover: var(--color-stone-500);
514
+ --chip-border-active: var(--color-stone-500);
515
+ --chip-border-selected: var(--color-primary-400);
516
+ --chip-border-selected-hover: var(--color-indigo-300);
517
+ --chip-border-selected-active: var(--color-primary-200);
518
+ --chip-text: var(--color-stone-300);
519
+ --chip-text-selected: var(--color-primary-200);
520
+
521
+ /* Toast */
522
+ --toast-bg: var(--color-stone-800);
523
+ --toast-border: var(--color-stone-700);
524
+ --toast-title: var(--color-stone-100);
525
+ --toast-message: var(--color-stone-400);
526
+ --toast-close: var(--color-stone-500);
527
+ --toast-close-hover: var(--color-stone-300);
528
+ --toast-close-hover-bg: var(--color-stone-700);
529
+ --toast-success-icon: var(--color-teal-500);
530
+ --toast-success-progress: var(--color-teal-500);
531
+ --toast-error-icon: var(--color-coral-500);
532
+ --toast-error-progress: var(--color-coral-500);
533
+ --toast-warning-icon: var(--color-amber-500);
534
+ --toast-warning-progress: var(--color-amber-500);
535
+ --toast-info-icon: var(--color-primary-400);
536
+ --toast-info-progress: var(--color-primary-400);
537
+
538
+ /* Modal */
539
+ --modal-bg: var(--color-stone-900);
540
+ --modal-border: var(--color-stone-700);
541
+ --modal-backdrop: oklch(0 0 0 / 0.7);
542
+ --modal-title: var(--color-stone-100);
543
+ --modal-text: var(--color-stone-300);
544
+ --modal-close: var(--color-stone-500);
545
+ --modal-close-hover: var(--color-stone-300);
546
+ --modal-close-hover-bg: var(--color-stone-800);
547
+
548
+ /* Tabs */
549
+ --tabs-border: var(--color-stone-700);
550
+ --tabs-text: var(--color-stone-400);
551
+ --tabs-text-hover: var(--color-stone-200);
552
+ --tabs-text-active: var(--color-primary-400);
553
+ --tabs-indicator: var(--color-primary-400);
554
+ --tabs-pill-bg: var(--color-stone-800);
555
+ --tabs-pill-indicator: var(--color-stone-700);
556
+
557
+ /* Select */
558
+ --select-menu-bg: var(--color-stone-800);
559
+ --select-menu-border: var(--color-stone-700);
560
+ --select-option-text: var(--color-stone-200);
561
+ --select-option-hover: var(--color-stone-700);
562
+ --select-option-selected: var(--color-primary-400);
563
+
564
+ /* Combobox */
565
+ --combobox-chip-bg: var(--color-stone-700);
566
+ --combobox-chip-text: var(--color-stone-200);
567
+ --combobox-chip-remove: var(--color-stone-400);
568
+ --combobox-chip-remove-hover: var(--color-stone-200);
569
+ --combobox-chip-marked-bg: oklch(0.25 0.06 275);
570
+ --combobox-chip-marked-border: var(--color-primary-400);
571
+ --combobox-match-bg: oklch(0.35 0.08 70);
572
+ --combobox-match-text: var(--color-amber-200);
573
+ --combobox-overflow-bg: var(--color-stone-600);
574
+ --combobox-overflow-text: var(--color-stone-300);
575
+
576
+ /* File Upload */
577
+ --file-upload-bg: var(--color-stone-900);
578
+ --file-upload-bg-hover: var(--color-stone-800);
579
+ --file-upload-border: var(--color-stone-700);
580
+ --file-upload-border-hover: var(--color-stone-600);
581
+ --file-upload-icon: var(--color-stone-500);
582
+ --file-upload-icon-bg: var(--color-stone-800);
583
+ --file-upload-active-bg: oklch(0.20 0.04 275);
584
+ --file-upload-active-border: var(--color-primary-400);
585
+ --file-upload-active-icon: var(--color-primary-400);
586
+ --file-upload-active-icon-bg: oklch(0.25 0.06 275);
587
+ --file-upload-error-bg: oklch(0.20 0.04 20);
588
+ --file-upload-error-border: var(--color-coral-500);
589
+ --file-upload-success-border: var(--color-teal-500);
590
+ --file-upload-file-bg: var(--color-stone-800);
591
+ --file-upload-file-border: var(--color-stone-700);
592
+ --file-upload-progress-bg: var(--color-stone-700);
593
+ --file-upload-progress: var(--color-primary-400);
594
+ --file-upload-remove-hover-bg: oklch(0.25 0.04 20);
595
+ --file-upload-paste-bg: var(--color-teal-500);
596
+ --file-upload-paste-text: var(--color-white);
597
+
598
+ /* Card */
599
+ --card-bg: var(--color-stone-900);
600
+ --card-bg-hover: var(--color-stone-800);
601
+ --card-border: var(--color-stone-700);
602
+ --card-border-hover: var(--color-stone-600);
603
+ --card-title: var(--color-stone-100);
604
+ --card-subtitle: var(--color-stone-400);
605
+ --card-text: var(--color-stone-300);
606
+ --card-footer-bg: var(--color-stone-800);
607
+ --card-footer-border: var(--color-stone-700);
608
+
609
+ /* DataTable */
610
+ --table-bg: var(--color-stone-900);
611
+ --table-border: var(--color-stone-700);
612
+ --table-header-bg: var(--color-stone-800);
613
+ --table-header-text: var(--color-stone-300);
614
+ --table-cell-text: var(--color-stone-300);
615
+ --table-row-hover: var(--color-stone-800);
616
+ --table-row-selected: oklch(0.20 0.04 275);
617
+ --table-row-striped: var(--color-stone-850);
618
+ --table-sort-icon: var(--color-stone-500);
619
+ --table-sort-icon-active: var(--color-primary-400);
620
+ --table-empty-text: var(--color-stone-400);
621
+ --table-skeleton: var(--color-stone-700);
622
+
623
+ /* EmptyState */
624
+ --empty-state-icon: var(--color-stone-600);
625
+ --empty-state-icon-error: var(--color-coral-500);
626
+ --empty-state-title: var(--color-stone-100);
627
+ --empty-state-description: var(--color-stone-400);
628
+
629
+ /* Skeleton */
630
+ --skeleton-base: var(--color-stone-700);
631
+ --skeleton-highlight: var(--color-stone-600);
632
+
633
+ /* Dropdown */
634
+ --dropdown-bg: var(--color-stone-800);
635
+ --dropdown-border: var(--color-stone-700);
636
+ --dropdown-item-text: var(--color-stone-200);
637
+ --dropdown-item-hover: var(--color-stone-700);
638
+ --dropdown-item-disabled: var(--color-stone-500);
639
+ --dropdown-item-danger: var(--color-coral-400);
640
+ --dropdown-item-danger-hover: oklch(0.25 0.04 20);
641
+ --dropdown-item-shortcut: var(--color-stone-500);
642
+ --dropdown-separator: var(--color-stone-700);
643
+
644
+ /* Breadcrumb */
645
+ --breadcrumb-link: var(--color-stone-400);
646
+ --breadcrumb-link-hover: var(--color-stone-100);
647
+ --breadcrumb-current: var(--color-stone-100);
648
+ --breadcrumb-separator: var(--color-stone-500);
649
+ --breadcrumb-ellipsis: var(--color-stone-400);
650
+ --breadcrumb-ellipsis-hover: var(--color-stone-100);
651
+ --breadcrumb-ellipsis-bg-hover: var(--color-stone-700);
652
+
653
+ /* Callout */
654
+ --callout-info-bg: oklch(0.20 0.04 275);
655
+ --callout-info-border: oklch(0.30 0.06 275);
656
+ --callout-info-text: var(--color-primary-100);
657
+ --callout-info-icon: var(--color-primary-400);
658
+ --callout-info-accent: var(--color-primary-400);
659
+
660
+ --callout-success-bg: oklch(0.20 0.04 180);
661
+ --callout-success-border: oklch(0.30 0.05 180);
662
+ --callout-success-text: var(--color-teal-100);
663
+ --callout-success-icon: var(--color-teal-400);
664
+ --callout-success-accent: var(--color-teal-400);
665
+
666
+ --callout-warning-bg: oklch(0.22 0.05 70);
667
+ --callout-warning-border: oklch(0.32 0.06 70);
668
+ --callout-warning-text: var(--color-amber-100);
669
+ --callout-warning-icon: var(--color-amber-400);
670
+ --callout-warning-accent: var(--color-amber-400);
671
+
672
+ --callout-error-bg: oklch(0.20 0.04 20);
673
+ --callout-error-border: oklch(0.30 0.05 20);
674
+ --callout-error-text: var(--color-coral-100);
675
+ --callout-error-icon: var(--color-coral-400);
676
+ --callout-error-accent: var(--color-coral-400);
677
+
678
+ --callout-neutral-bg: var(--color-stone-800);
679
+ --callout-neutral-border: var(--color-stone-700);
680
+ --callout-neutral-text: var(--color-stone-100);
681
+ --callout-neutral-icon: var(--color-stone-400);
682
+ --callout-neutral-accent: var(--color-stone-500);
683
+
684
+ /* Progress */
685
+ --progress-track: var(--color-stone-700);
686
+ --progress-primary: var(--color-primary-500);
687
+ --progress-success: var(--color-teal-500);
688
+ --progress-warning: var(--color-amber-500);
689
+ --progress-error: var(--color-coral-500);
690
+ --progress-value-text: var(--color-stone-300);
691
+
692
+ /* Chart */
693
+ --chart-1: var(--color-primary-400);
694
+ --chart-2: var(--color-teal-400);
695
+ --chart-3: var(--color-amber-400);
696
+ --chart-4: var(--color-coral-400);
697
+ --chart-5: oklch(0.70 0.16 250);
698
+ --chart-6: oklch(0.75 0.18 310);
699
+ --chart-7: oklch(0.80 0.13 340);
700
+ --chart-8: oklch(0.75 0.13 200);
701
+ --chart-text: var(--text-primary);
702
+ --chart-text-muted: var(--text-secondary);
703
+ --chart-grid: var(--color-stone-700);
704
+ --chart-legend-text: var(--text-secondary);
705
+ --chart-tooltip-bg: var(--color-stone-100);
706
+ --chart-tooltip-text: var(--color-stone-900);
707
+ --chart-tooltip-border: var(--color-stone-200);
708
+ }