zabi-components 8.0.0 → 9.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (456) hide show
  1. package/CHANGELOG.md +2935 -0
  2. package/README.md +243 -10
  3. package/THEME.md +162 -332
  4. package/THEMING.md +1419 -259
  5. package/dist/atoms/ActionPanel.svelte +15 -5
  6. package/dist/atoms/Avatar.svelte +120 -0
  7. package/dist/atoms/Avatar.svelte.d.ts +46 -0
  8. package/dist/atoms/Badge.svelte +71 -13
  9. package/dist/atoms/Badge.svelte.d.ts +8 -2
  10. package/dist/atoms/Block.svelte +74 -0
  11. package/dist/atoms/Block.svelte.d.ts +29 -0
  12. package/dist/atoms/Button.svelte +217 -30
  13. package/dist/atoms/Button.svelte.d.ts +33 -4
  14. package/dist/atoms/Card.svelte +182 -26
  15. package/dist/atoms/Card.svelte.d.ts +55 -3
  16. package/dist/atoms/CardHeader.svelte +16 -4
  17. package/dist/atoms/Checkbox.svelte +81 -21
  18. package/dist/atoms/Checkbox.svelte.d.ts +31 -2
  19. package/dist/atoms/Chip.svelte +351 -0
  20. package/dist/atoms/Chip.svelte.d.ts +57 -0
  21. package/dist/atoms/CodeBlock.svelte +20 -2
  22. package/dist/atoms/CodeBlock.svelte.d.ts +4 -0
  23. package/dist/atoms/CodeField.svelte +385 -0
  24. package/dist/atoms/CodeField.svelte.d.ts +61 -0
  25. package/dist/atoms/ColorPicker.svelte +260 -49
  26. package/dist/atoms/ColorPicker.svelte.d.ts +3 -0
  27. package/dist/atoms/Container.svelte +16 -8
  28. package/dist/atoms/DateField.svelte +145 -0
  29. package/dist/atoms/DateField.svelte.d.ts +81 -0
  30. package/dist/atoms/FieldMessages.svelte +69 -0
  31. package/dist/atoms/FieldMessages.svelte.d.ts +23 -0
  32. package/dist/atoms/FloatingActionButton.svelte +176 -0
  33. package/dist/atoms/FloatingActionButton.svelte.d.ts +51 -0
  34. package/dist/atoms/Heading.svelte +63 -5
  35. package/dist/atoms/Heading.svelte.d.ts +14 -0
  36. package/dist/atoms/IconButton.svelte +294 -26
  37. package/dist/atoms/IconButton.svelte.d.ts +62 -4
  38. package/dist/atoms/Input.svelte +259 -53
  39. package/dist/atoms/Input.svelte.d.ts +33 -2
  40. package/dist/atoms/List.svelte +5 -1
  41. package/dist/atoms/ListItem.svelte +70 -13
  42. package/dist/atoms/ListItem.svelte.d.ts +11 -0
  43. package/dist/atoms/PickerField.svelte +239 -0
  44. package/dist/atoms/PickerField.svelte.d.ts +67 -0
  45. package/dist/atoms/Progress.svelte +99 -19
  46. package/dist/atoms/Progress.svelte.d.ts +15 -1
  47. package/dist/atoms/Radio.svelte +51 -3
  48. package/dist/atoms/Radio.svelte.d.ts +30 -2
  49. package/dist/atoms/Rating.svelte +620 -0
  50. package/dist/atoms/Rating.svelte.d.ts +77 -0
  51. package/dist/atoms/Select.svelte +438 -98
  52. package/dist/atoms/Select.svelte.d.ts +61 -3
  53. package/dist/atoms/SelectionControl.svelte +193 -23
  54. package/dist/atoms/SelectionControl.svelte.d.ts +29 -3
  55. package/dist/atoms/Skeleton.svelte +114 -18
  56. package/dist/atoms/Skeleton.svelte.d.ts +30 -3
  57. package/dist/atoms/SkeletonGroup.svelte +43 -0
  58. package/dist/atoms/SkeletonGroup.svelte.d.ts +20 -0
  59. package/dist/atoms/Slider.svelte +344 -0
  60. package/dist/atoms/Slider.svelte.d.ts +40 -0
  61. package/dist/atoms/Sparkline.svelte +109 -0
  62. package/dist/atoms/Sparkline.svelte.d.ts +27 -0
  63. package/dist/atoms/SpeechBubble.svelte +187 -0
  64. package/dist/atoms/SpeechBubble.svelte.d.ts +33 -0
  65. package/dist/atoms/Spinner.svelte +57 -0
  66. package/dist/atoms/Spinner.svelte.d.ts +19 -0
  67. package/dist/atoms/Stat.svelte +72 -0
  68. package/dist/atoms/Stat.svelte.d.ts +19 -0
  69. package/dist/atoms/Table.svelte +151 -6
  70. package/dist/atoms/Table.svelte.d.ts +15 -3
  71. package/dist/atoms/TemporalField.svelte +472 -0
  72. package/dist/atoms/TemporalField.svelte.d.ts +48 -0
  73. package/dist/atoms/Text.svelte +23 -11
  74. package/dist/atoms/Text.svelte.d.ts +6 -3
  75. package/dist/atoms/Textarea.svelte +150 -44
  76. package/dist/atoms/Textarea.svelte.d.ts +35 -2
  77. package/dist/atoms/ThemeToggle.svelte +223 -44
  78. package/dist/atoms/ThemeToggle.svelte.d.ts +26 -3
  79. package/dist/atoms/TimeColumn.svelte +150 -0
  80. package/dist/atoms/TimeColumn.svelte.d.ts +25 -0
  81. package/dist/atoms/TimeField.svelte +151 -0
  82. package/dist/atoms/TimeField.svelte.d.ts +85 -0
  83. package/dist/atoms/Toast.svelte +22 -8
  84. package/dist/atoms/Toast.svelte.d.ts +2 -0
  85. package/dist/atoms/Toggle.svelte +98 -14
  86. package/dist/atoms/Toggle.svelte.d.ts +26 -2
  87. package/dist/atoms/Tooltip.svelte +528 -24
  88. package/dist/atoms/Tooltip.svelte.d.ts +18 -0
  89. package/dist/atoms/ZabiStringsProvider.svelte +45 -0
  90. package/dist/atoms/ZabiStringsProvider.svelte.d.ts +27 -0
  91. package/dist/atoms/index.d.ts +38 -0
  92. package/dist/atoms/index.js +29 -0
  93. package/dist/atoms/selection-control.styles.d.ts +47 -5
  94. package/dist/atoms/selection-control.styles.js +52 -10
  95. package/dist/components/atoms/index.d.ts +38 -0
  96. package/dist/components/atoms/index.d.ts.map +1 -1
  97. package/dist/components/atoms/selection-control.styles.d.ts +47 -5
  98. package/dist/components/atoms/selection-control.styles.d.ts.map +1 -1
  99. package/dist/components/index.d.ts +104 -2
  100. package/dist/components/index.d.ts.map +1 -1
  101. package/dist/components/map.d.ts +11 -0
  102. package/dist/components/map.d.ts.map +1 -0
  103. package/dist/components/molecules/index.d.ts +51 -0
  104. package/dist/components/molecules/index.d.ts.map +1 -1
  105. package/dist/components/molecules/toast-store.d.ts +83 -7
  106. package/dist/components/molecules/toast-store.d.ts.map +1 -1
  107. package/dist/components/organisms/index.d.ts +10 -0
  108. package/dist/components/organisms/index.d.ts.map +1 -1
  109. package/dist/components/types/variants.d.ts +24 -1
  110. package/dist/components/types/variants.d.ts.map +1 -1
  111. package/dist/components/util/app-shell.d.ts +79 -0
  112. package/dist/components/util/app-shell.d.ts.map +1 -0
  113. package/dist/components/util/avatar.d.ts +39 -0
  114. package/dist/components/util/avatar.d.ts.map +1 -0
  115. package/dist/components/util/bottom-sheet.d.ts +30 -0
  116. package/dist/components/util/bottom-sheet.d.ts.map +1 -0
  117. package/dist/components/util/bottom-tab-bar.d.ts +41 -0
  118. package/dist/components/util/bottom-tab-bar.d.ts.map +1 -0
  119. package/dist/components/util/calendar.d.ts +56 -0
  120. package/dist/components/util/calendar.d.ts.map +1 -0
  121. package/dist/components/util/chart.d.ts +140 -0
  122. package/dist/components/util/chart.d.ts.map +1 -0
  123. package/dist/components/util/chip.d.ts +66 -0
  124. package/dist/components/util/chip.d.ts.map +1 -0
  125. package/dist/components/util/cn.d.ts.map +1 -1
  126. package/dist/components/util/code-field.d.ts +63 -0
  127. package/dist/components/util/code-field.d.ts.map +1 -0
  128. package/dist/components/util/collapsible.d.ts +64 -0
  129. package/dist/components/util/collapsible.d.ts.map +1 -0
  130. package/dist/components/util/confirm-dialog.d.ts +12 -0
  131. package/dist/components/util/confirm-dialog.d.ts.map +1 -0
  132. package/dist/components/util/date.d.ts +96 -0
  133. package/dist/components/util/date.d.ts.map +1 -0
  134. package/dist/components/util/display-voice.d.ts +10 -0
  135. package/dist/components/util/display-voice.d.ts.map +1 -0
  136. package/dist/components/util/drawer.d.ts +13 -0
  137. package/dist/components/util/drawer.d.ts.map +1 -0
  138. package/dist/components/util/dropdown.d.ts +47 -0
  139. package/dist/components/util/dropdown.d.ts.map +1 -0
  140. package/dist/components/util/field-control.d.ts +30 -0
  141. package/dist/components/util/field-control.d.ts.map +1 -0
  142. package/dist/components/util/field.d.ts +45 -0
  143. package/dist/components/util/field.d.ts.map +1 -0
  144. package/dist/components/util/fit-in-viewport.d.ts +201 -0
  145. package/dist/components/util/fit-in-viewport.d.ts.map +1 -0
  146. package/dist/components/util/focus-utils.d.ts +77 -2
  147. package/dist/components/util/focus-utils.d.ts.map +1 -1
  148. package/dist/components/util/hydration.d.ts +45 -0
  149. package/dist/components/util/hydration.d.ts.map +1 -0
  150. package/dist/components/util/keyboard-inset.d.ts +18 -0
  151. package/dist/components/util/keyboard-inset.d.ts.map +1 -0
  152. package/dist/components/util/map-view.d.ts +144 -0
  153. package/dist/components/util/map-view.d.ts.map +1 -0
  154. package/dist/components/util/media-grid.d.ts +51 -0
  155. package/dist/components/util/media-grid.d.ts.map +1 -0
  156. package/dist/components/util/media.d.ts +6 -0
  157. package/dist/components/util/media.d.ts.map +1 -0
  158. package/dist/components/util/overlay-chrome.d.ts +53 -0
  159. package/dist/components/util/overlay-chrome.d.ts.map +1 -0
  160. package/dist/components/util/overlay.d.ts +72 -0
  161. package/dist/components/util/overlay.d.ts.map +1 -0
  162. package/dist/components/util/photo.d.ts +234 -0
  163. package/dist/components/util/photo.d.ts.map +1 -0
  164. package/dist/components/util/portal.d.ts +23 -0
  165. package/dist/components/util/portal.d.ts.map +1 -0
  166. package/dist/components/util/progress.d.ts +19 -0
  167. package/dist/components/util/progress.d.ts.map +1 -0
  168. package/dist/components/util/pull-to-refresh.d.ts +27 -0
  169. package/dist/components/util/pull-to-refresh.d.ts.map +1 -0
  170. package/dist/components/util/radio-keys.d.ts +25 -0
  171. package/dist/components/util/radio-keys.d.ts.map +1 -0
  172. package/dist/components/util/rating.d.ts +23 -0
  173. package/dist/components/util/rating.d.ts.map +1 -0
  174. package/dist/components/util/ready-made-strings.d.ts +77 -0
  175. package/dist/components/util/ready-made-strings.d.ts.map +1 -0
  176. package/dist/components/util/scroll-edge.d.ts +33 -0
  177. package/dist/components/util/scroll-edge.d.ts.map +1 -0
  178. package/dist/components/util/scroll-padding.d.ts +20 -0
  179. package/dist/components/util/scroll-padding.d.ts.map +1 -0
  180. package/dist/components/util/segmented-control.d.ts +16 -0
  181. package/dist/components/util/segmented-control.d.ts.map +1 -0
  182. package/dist/components/util/select.d.ts +41 -0
  183. package/dist/components/util/select.d.ts.map +1 -0
  184. package/dist/components/util/sheet-drag.d.ts +84 -0
  185. package/dist/components/util/sheet-drag.d.ts.map +1 -0
  186. package/dist/components/util/sidebar.d.ts +63 -0
  187. package/dist/components/util/sidebar.d.ts.map +1 -0
  188. package/dist/components/util/skeleton.d.ts +15 -0
  189. package/dist/components/util/skeleton.d.ts.map +1 -0
  190. package/dist/components/util/sliding-indicator.d.ts +25 -0
  191. package/dist/components/util/sliding-indicator.d.ts.map +1 -0
  192. package/dist/components/util/sortable-list.d.ts +65 -0
  193. package/dist/components/util/sortable-list.d.ts.map +1 -0
  194. package/dist/components/util/stepper.d.ts +40 -0
  195. package/dist/components/util/stepper.d.ts.map +1 -0
  196. package/dist/components/util/swipeable-list-item.d.ts +36 -0
  197. package/dist/components/util/swipeable-list-item.d.ts.map +1 -0
  198. package/dist/components/util/temporal-field.d.ts +89 -0
  199. package/dist/components/util/temporal-field.d.ts.map +1 -0
  200. package/dist/components/util/theme-mode.d.ts +80 -0
  201. package/dist/components/util/theme-mode.d.ts.map +1 -0
  202. package/dist/components/util/toaster.d.ts +133 -0
  203. package/dist/components/util/toaster.d.ts.map +1 -0
  204. package/dist/components/util/tone-surface.d.ts +34 -0
  205. package/dist/components/util/tone-surface.d.ts.map +1 -0
  206. package/dist/components/util/tooltip.d.ts +10 -0
  207. package/dist/components/util/tooltip.d.ts.map +1 -0
  208. package/dist/components/util/top-navbar.d.ts +35 -0
  209. package/dist/components/util/top-navbar.d.ts.map +1 -0
  210. package/dist/components/util/touch-target.d.ts +31 -0
  211. package/dist/components/util/touch-target.d.ts.map +1 -0
  212. package/dist/components/util/zabi-strings.d.ts +142 -0
  213. package/dist/components/util/zabi-strings.d.ts.map +1 -0
  214. package/dist/create-theme/cli.js +173 -0
  215. package/dist/create-theme/index.d.ts +190 -0
  216. package/dist/create-theme/index.js +1034 -0
  217. package/dist/create-theme/lib/ramp-math.js +128 -0
  218. package/dist/create-theme/lib/resolve.js +238 -0
  219. package/dist/create-theme/theme-data.js +2644 -0
  220. package/dist/index.d.ts +104 -2
  221. package/dist/index.js +75 -2
  222. package/dist/map.d.ts +10 -0
  223. package/dist/map.js +9 -0
  224. package/dist/molecules/Alert.svelte +63 -16
  225. package/dist/molecules/Alert.svelte.d.ts +14 -1
  226. package/dist/molecules/AppBar.svelte +674 -0
  227. package/dist/molecules/AppBar.svelte.d.ts +131 -0
  228. package/dist/molecules/AvatarGroup.svelte +116 -0
  229. package/dist/molecules/AvatarGroup.svelte.d.ts +40 -0
  230. package/dist/molecules/BarChart.svelte +381 -0
  231. package/dist/molecules/BarChart.svelte.d.ts +45 -0
  232. package/dist/molecules/BottomSheet.svelte +608 -0
  233. package/dist/molecules/BottomSheet.svelte.d.ts +109 -0
  234. package/dist/molecules/BottomTabBar.svelte +403 -0
  235. package/dist/molecules/BottomTabBar.svelte.d.ts +98 -0
  236. package/dist/molecules/Calendar.svelte +597 -0
  237. package/dist/molecules/Calendar.svelte.d.ts +72 -0
  238. package/dist/molecules/ChipGroup.svelte +325 -0
  239. package/dist/molecules/ChipGroup.svelte.d.ts +41 -0
  240. package/dist/molecules/Collapsible.svelte +347 -0
  241. package/dist/molecules/Collapsible.svelte.d.ts +61 -0
  242. package/dist/molecules/CollapsibleGroup.svelte +136 -0
  243. package/dist/molecules/CollapsibleGroup.svelte.d.ts +14 -0
  244. package/dist/molecules/ComponentDemo.svelte +16 -4
  245. package/dist/molecules/ComponentDemo.svelte.d.ts +3 -0
  246. package/dist/molecules/ConfirmDialog.svelte +257 -0
  247. package/dist/molecules/ConfirmDialog.svelte.d.ts +58 -0
  248. package/dist/molecules/ContactForm.svelte +34 -17
  249. package/dist/molecules/ContactForm.svelte.d.ts +8 -0
  250. package/dist/molecules/Drawer.svelte +415 -0
  251. package/dist/molecules/Drawer.svelte.d.ts +55 -0
  252. package/dist/molecules/Dropdown.svelte +517 -48
  253. package/dist/molecules/Dropdown.svelte.d.ts +47 -6
  254. package/dist/molecules/DropdownItem.svelte +122 -0
  255. package/dist/molecules/DropdownItem.svelte.d.ts +28 -0
  256. package/dist/molecules/EmptyState.svelte +55 -10
  257. package/dist/molecules/EmptyState.svelte.d.ts +8 -0
  258. package/dist/molecules/FormField.svelte +9 -1
  259. package/dist/molecules/FormField.svelte.d.ts +2 -0
  260. package/dist/molecules/Header.svelte +1 -1
  261. package/dist/molecules/ImageUpload.svelte +492 -69
  262. package/dist/molecules/ImageUpload.svelte.d.ts +82 -2
  263. package/dist/molecules/LineChart.svelte +459 -0
  264. package/dist/molecules/LineChart.svelte.d.ts +53 -0
  265. package/dist/molecules/MapView.svelte +565 -0
  266. package/dist/molecules/MapView.svelte.d.ts +88 -0
  267. package/dist/molecules/MediaGrid.svelte +527 -0
  268. package/dist/molecules/MediaGrid.svelte.d.ts +77 -0
  269. package/dist/molecules/Modal.svelte +293 -72
  270. package/dist/molecules/Modal.svelte.d.ts +51 -2
  271. package/dist/molecules/NavigationMenuContent.svelte +58 -1
  272. package/dist/molecules/NavigationMenuItem.svelte +0 -1
  273. package/dist/molecules/NavigationMenuLink.svelte +1 -1
  274. package/dist/molecules/NavigationMenuList.svelte +10 -3
  275. package/dist/molecules/NavigationMenuTrigger.svelte +2 -2
  276. package/dist/molecules/Page.svelte +32 -2
  277. package/dist/molecules/Page.svelte.d.ts +11 -0
  278. package/dist/molecules/PhotoGrid.svelte +523 -0
  279. package/dist/molecules/PhotoGrid.svelte.d.ts +73 -0
  280. package/dist/molecules/PhotoViewer.svelte +1213 -0
  281. package/dist/molecules/PhotoViewer.svelte.d.ts +74 -0
  282. package/dist/molecules/PieChart.svelte +421 -0
  283. package/dist/molecules/PieChart.svelte.d.ts +51 -0
  284. package/dist/molecules/PropsTable.svelte +22 -10
  285. package/dist/molecules/PropsTable.svelte.d.ts +3 -0
  286. package/dist/molecules/PullToRefresh.svelte +263 -0
  287. package/dist/molecules/PullToRefresh.svelte.d.ts +52 -0
  288. package/dist/molecules/RadioGroup.svelte +72 -18
  289. package/dist/molecules/RadioGroup.svelte.d.ts +19 -3
  290. package/dist/molecules/Section.svelte +1 -1
  291. package/dist/molecules/SegmentedControl.svelte +456 -0
  292. package/dist/molecules/SegmentedControl.svelte.d.ts +40 -0
  293. package/dist/molecules/SidebarBrandHeader.svelte +11 -1
  294. package/dist/molecules/SidebarBrandHeader.svelte.d.ts +3 -0
  295. package/dist/molecules/SidebarFooter.svelte +30 -7
  296. package/dist/molecules/SidebarFooter.svelte.d.ts +3 -0
  297. package/dist/molecules/SidebarNavSection.svelte +1 -1
  298. package/dist/molecules/SlideUp.svelte +220 -61
  299. package/dist/molecules/SlideUp.svelte.d.ts +26 -0
  300. package/dist/molecules/SortableList.svelte +633 -0
  301. package/dist/molecules/SortableList.svelte.d.ts +69 -0
  302. package/dist/molecules/Stepper.svelte +562 -0
  303. package/dist/molecules/Stepper.svelte.d.ts +39 -0
  304. package/dist/molecules/StickyActionBar.svelte +250 -0
  305. package/dist/molecules/StickyActionBar.svelte.d.ts +78 -0
  306. package/dist/molecules/SwipeableListItem.svelte +334 -0
  307. package/dist/molecules/SwipeableListItem.svelte.d.ts +54 -0
  308. package/dist/molecules/Tabs.svelte +310 -9
  309. package/dist/molecules/Tabs.svelte.d.ts +7 -0
  310. package/dist/molecules/Toaster.svelte +514 -5
  311. package/dist/molecules/Toaster.svelte.d.ts +153 -2
  312. package/dist/molecules/ToasterToast.svelte +495 -77
  313. package/dist/molecules/ToasterToast.svelte.d.ts +15 -0
  314. package/dist/molecules/UnsavedChangesBar.svelte +223 -0
  315. package/dist/molecules/UnsavedChangesBar.svelte.d.ts +43 -0
  316. package/dist/molecules/index.d.ts +51 -0
  317. package/dist/molecules/index.js +31 -0
  318. package/dist/molecules/toast-store.d.ts +83 -7
  319. package/dist/molecules/toast-store.js +25 -1
  320. package/dist/organisms/AppNavigation.svelte +440 -0
  321. package/dist/organisms/AppNavigation.svelte.d.ts +72 -0
  322. package/dist/organisms/AppShell.svelte +696 -0
  323. package/dist/organisms/AppShell.svelte.d.ts +157 -0
  324. package/dist/organisms/AppShellHeaderPart.svelte +163 -0
  325. package/dist/organisms/AppShellHeaderPart.svelte.d.ts +57 -0
  326. package/dist/organisms/SidebarAccountPanel.svelte +107 -12
  327. package/dist/organisms/SidebarAccountPanel.svelte.d.ts +19 -0
  328. package/dist/organisms/SidebarNavigation.svelte +111 -43
  329. package/dist/organisms/SidebarNavigation.svelte.d.ts +29 -1
  330. package/dist/organisms/SidebarPanel.svelte +34 -17
  331. package/dist/organisms/SidebarPanel.svelte.d.ts +1 -0
  332. package/dist/organisms/SidebarShell.svelte +164 -14
  333. package/dist/organisms/SidebarShell.svelte.d.ts +56 -2
  334. package/dist/organisms/TopNavbar.svelte +353 -39
  335. package/dist/organisms/TopNavbar.svelte.d.ts +47 -0
  336. package/dist/organisms/TopNavbarSheetContent.svelte +145 -0
  337. package/dist/organisms/TopNavbarSheetContent.svelte.d.ts +24 -0
  338. package/dist/organisms/index.d.ts +10 -0
  339. package/dist/organisms/index.js +7 -0
  340. package/dist/types/components.d.ts +21 -1
  341. package/dist/types/components.d.ts.map +1 -1
  342. package/dist/types/index.d.ts +1093 -26
  343. package/dist/types/index.d.ts.map +1 -1
  344. package/dist/types/variants.ts +28 -1
  345. package/dist/util/app-shell.d.ts +78 -0
  346. package/dist/util/app-shell.js +97 -0
  347. package/dist/util/avatar.d.ts +38 -0
  348. package/dist/util/avatar.js +52 -0
  349. package/dist/util/bottom-sheet.d.ts +29 -0
  350. package/dist/util/bottom-sheet.js +43 -0
  351. package/dist/util/bottom-tab-bar.d.ts +40 -0
  352. package/dist/util/bottom-tab-bar.js +54 -0
  353. package/dist/util/calendar.d.ts +55 -0
  354. package/dist/util/calendar.js +74 -0
  355. package/dist/util/chart.d.ts +139 -0
  356. package/dist/util/chart.js +305 -0
  357. package/dist/util/chip.d.ts +65 -0
  358. package/dist/util/chip.js +58 -0
  359. package/dist/util/cn.js +28 -2
  360. package/dist/util/code-field.d.ts +62 -0
  361. package/dist/util/code-field.js +112 -0
  362. package/dist/util/collapsible.d.ts +63 -0
  363. package/dist/util/collapsible.js +23 -0
  364. package/dist/util/confirm-dialog.d.ts +11 -0
  365. package/dist/util/confirm-dialog.js +2 -0
  366. package/dist/util/date.d.ts +95 -0
  367. package/dist/util/date.js +237 -0
  368. package/dist/util/display-voice.d.ts +9 -0
  369. package/dist/util/display-voice.js +9 -0
  370. package/dist/util/drawer.d.ts +12 -0
  371. package/dist/util/drawer.js +7 -0
  372. package/dist/util/dropdown.d.ts +46 -0
  373. package/dist/util/dropdown.js +21 -0
  374. package/dist/util/field-control.d.ts +29 -0
  375. package/dist/util/field-control.js +32 -0
  376. package/dist/util/field.d.ts +44 -0
  377. package/dist/util/field.js +38 -0
  378. package/dist/util/fit-in-viewport.d.ts +200 -0
  379. package/dist/util/fit-in-viewport.js +399 -0
  380. package/dist/util/focus-utils.d.ts +77 -2
  381. package/dist/util/focus-utils.js +186 -9
  382. package/dist/util/hydration.d.ts +44 -0
  383. package/dist/util/hydration.js +58 -0
  384. package/dist/util/keyboard-inset.d.ts +17 -0
  385. package/dist/util/keyboard-inset.js +53 -0
  386. package/dist/util/map-view.d.ts +143 -0
  387. package/dist/util/map-view.js +121 -0
  388. package/dist/util/media-grid.d.ts +50 -0
  389. package/dist/util/media-grid.js +81 -0
  390. package/dist/util/media.d.ts +5 -0
  391. package/dist/util/media.js +10 -0
  392. package/dist/util/overlay-chrome.d.ts +52 -0
  393. package/dist/util/overlay-chrome.js +56 -0
  394. package/dist/util/overlay.d.ts +71 -0
  395. package/dist/util/overlay.js +240 -0
  396. package/dist/util/photo.d.ts +233 -0
  397. package/dist/util/photo.js +209 -0
  398. package/dist/util/portal.d.ts +22 -0
  399. package/dist/util/portal.js +50 -0
  400. package/dist/util/progress.d.ts +18 -0
  401. package/dist/util/progress.js +17 -0
  402. package/dist/util/pull-to-refresh.d.ts +26 -0
  403. package/dist/util/pull-to-refresh.js +30 -0
  404. package/dist/util/radio-keys.d.ts +24 -0
  405. package/dist/util/radio-keys.js +49 -0
  406. package/dist/util/rating.d.ts +22 -0
  407. package/dist/util/rating.js +26 -0
  408. package/dist/util/ready-made-strings.d.ts +76 -0
  409. package/dist/util/ready-made-strings.js +67 -0
  410. package/dist/util/scroll-edge.d.ts +32 -0
  411. package/dist/util/scroll-edge.js +87 -0
  412. package/dist/util/scroll-padding.d.ts +19 -0
  413. package/dist/util/scroll-padding.js +44 -0
  414. package/dist/util/segmented-control.d.ts +15 -0
  415. package/dist/util/segmented-control.js +1 -0
  416. package/dist/util/select.d.ts +40 -0
  417. package/dist/util/select.js +63 -0
  418. package/dist/util/sheet-drag.d.ts +83 -0
  419. package/dist/util/sheet-drag.js +311 -0
  420. package/dist/util/sidebar.d.ts +62 -0
  421. package/dist/util/sidebar.js +38 -0
  422. package/dist/util/skeleton.d.ts +14 -0
  423. package/dist/util/skeleton.js +22 -0
  424. package/dist/util/sliding-indicator.d.ts +24 -0
  425. package/dist/util/sliding-indicator.js +44 -0
  426. package/dist/util/sortable-list.d.ts +64 -0
  427. package/dist/util/sortable-list.js +53 -0
  428. package/dist/util/stepper.d.ts +39 -0
  429. package/dist/util/stepper.js +38 -0
  430. package/dist/util/swipeable-list-item.d.ts +35 -0
  431. package/dist/util/swipeable-list-item.js +32 -0
  432. package/dist/util/temporal-field.d.ts +88 -0
  433. package/dist/util/temporal-field.js +136 -0
  434. package/dist/util/theme-mode.d.ts +79 -0
  435. package/dist/util/theme-mode.js +121 -0
  436. package/dist/util/toaster.d.ts +132 -0
  437. package/dist/util/toaster.js +130 -0
  438. package/dist/util/tone-surface.d.ts +33 -0
  439. package/dist/util/tone-surface.js +35 -0
  440. package/dist/util/tooltip.d.ts +9 -0
  441. package/dist/util/tooltip.js +18 -0
  442. package/dist/util/top-navbar.d.ts +34 -0
  443. package/dist/util/top-navbar.js +28 -0
  444. package/dist/util/touch-target.d.ts +30 -0
  445. package/dist/util/touch-target.js +30 -0
  446. package/dist/util/zabi-strings.d.ts +141 -0
  447. package/dist/util/zabi-strings.js +105 -0
  448. package/dist/zabi-components-colors.css +11 -2
  449. package/dist/zabi-components-theme-dark-only.css +870 -258
  450. package/dist/zabi-components-theme-dark.css +870 -258
  451. package/dist/zabi-components-theme-only.css +2419 -368
  452. package/dist/zabi-components-theme.css +2419 -368
  453. package/dist/zabi-components.css +6032 -711
  454. package/docs/lucide-icons.md +40 -17
  455. package/docs/theme-imports.md +81 -11
  456. package/package.json +45 -8
@@ -0,0 +1,105 @@
1
+ /**
2
+ * The library's words, set once for a whole app.
3
+ *
4
+ * Every component says its English defaults unless it is told otherwise, one
5
+ * `strings` object or one prop at a time. An app in another language then has
6
+ * to remember every one of them, and a forgotten prop paints English. With
7
+ * `<ZabiStringsProvider strings={…}>` at the root, every component under it
8
+ * falls back to the app's words instead:
9
+ *
10
+ * 1. the built-in English default,
11
+ * 2. the provider's entry for the component (or `common`, for a
12
+ * single-text prop),
13
+ * 3. the instance's own `strings`,
14
+ * 4. the instance's single-text props.
15
+ *
16
+ * Later wins. Outside a provider nothing changes.
17
+ *
18
+ * It is Svelte context, not a module-level store: on a server it belongs to
19
+ * the request being rendered, so two languages can be served at once, and a
20
+ * provider inside another merges over it for its own part of the page. An
21
+ * overlay rendered in `<body>` still reads the provider it was written under:
22
+ * context follows the component tree, not the DOM.
23
+ */
24
+ import { getContext, setContext } from "svelte";
25
+ export const DEFAULT_ZABI_COMMON_STRINGS = {
26
+ close: "Close",
27
+ back: "Back",
28
+ expand: "Expand",
29
+ collapse: "Collapse",
30
+ required: "(required)",
31
+ showPassword: "Show password",
32
+ search: "Search...",
33
+ confirm: "Confirm",
34
+ cancel: "Cancel",
35
+ };
36
+ export const DEFAULT_TOAST_TEXTS = { closeLabel: "Close notification" };
37
+ export const DEFAULT_ALERT_TEXTS = { closeLabel: "Dismiss alert" };
38
+ export const DEFAULT_CODE_BLOCK_TEXTS = {
39
+ copyLabel: "Copy code to clipboard",
40
+ copiedLabel: "Code copied to clipboard",
41
+ };
42
+ export const DEFAULT_IMAGE_UPLOAD_TEXTS = {
43
+ placeholder: "No image selected",
44
+ browseText: "Click to choose a file",
45
+ changeText: "Change",
46
+ removeText: "Remove",
47
+ selectedText: "Image selected",
48
+ removedText: "Image removed",
49
+ errorTitle: "Image upload failed",
50
+ errorRecovery: "Recovery action: try another file or retry upload.",
51
+ };
52
+ export const DEFAULT_UNSAVED_CHANGES_BAR_TEXTS = {
53
+ message: "You have unsaved changes",
54
+ label: "Unsaved changes",
55
+ saveLabel: "Save",
56
+ discardLabel: "Discard",
57
+ };
58
+ const KEY = Symbol("zabi-strings");
59
+ const NONE = {};
60
+ /** `over` on top of `under`, entry by entry: an inner provider only replaces the words it gives. */
61
+ export function mergeZabiStrings(under, over) {
62
+ if (!under)
63
+ return over ?? NONE;
64
+ if (!over)
65
+ return under;
66
+ const merged = { ...under };
67
+ for (const [key, words] of Object.entries(over)) {
68
+ if (words)
69
+ merged[key] = { ...(merged[key] ?? {}), ...words };
70
+ }
71
+ return merged;
72
+ }
73
+ /** For `ZabiStringsProvider`: the provider above this one, if any. Call while the component initialises. */
74
+ export function outerZabiStrings() {
75
+ return getContext(KEY);
76
+ }
77
+ /** For `ZabiStringsProvider`: makes `context` what everything below reads. */
78
+ export function provideZabiStrings(context) {
79
+ setContext(KEY, context);
80
+ }
81
+ /**
82
+ * The words of the provider this component is under, for app code that wants
83
+ * the same words elsewhere. Call it while the component initialises, and read
84
+ * `current` where the words are used (in the markup, or a `$derived`), so a
85
+ * change of language is followed. Outside a provider `current` is empty.
86
+ */
87
+ export function getZabiStrings() {
88
+ return outerZabiStrings() ?? { current: NONE };
89
+ }
90
+ /**
91
+ * A component's own entry: `zabiStringsFor("select")` returns a function that
92
+ * gives the provider's words for Select now, or undefined. Call it while the
93
+ * component initialises; call what it returns inside a `$derived`.
94
+ */
95
+ export function zabiStringsFor(key) {
96
+ const context = outerZabiStrings();
97
+ return () => context?.current[key];
98
+ }
99
+ /** The common words with their defaults filled in, the same way. */
100
+ export function zabiCommonStrings() {
101
+ const context = outerZabiStrings();
102
+ return () => context?.current.common
103
+ ? { ...DEFAULT_ZABI_COMMON_STRINGS, ...context.current.common }
104
+ : DEFAULT_ZABI_COMMON_STRINGS;
105
+ }
@@ -1,3 +1,12 @@
1
1
  /* zabi-components-colors — generated from src/app.css; edit app.css */
2
- :root{--zabi-base-50:#fafafa;--zabi-base-75:#f7f7f7;--zabi-base-100:#f4f4f5;--zabi-base-150:#ececee;--zabi-base-200:#e4e4e7;--zabi-base-250:#dcdcdf;--zabi-base-300:#d4d4d8;--zabi-base-350:#babac1;--zabi-base-400:#a1a1aa;--zabi-base-450:#898992;--zabi-base-500:#71717a;--zabi-base-550:#61616a;--zabi-base-600:#52525b;--zabi-base-650:#484850;--zabi-base-700:#3f3f46;--zabi-base-750:#333338;--zabi-base-800:#27272a;--zabi-base-850:#1f1f22;--zabi-base-900:#18181b;--zabi-base-925:#101013;--zabi-base-950:#09090b;--font-family-sans:'Nunito Sans', ui-sans-serif, system-ui, sans-serif;--zabi-brand-50:#f4f6ff;--zabi-brand-100:#e9eeff;--zabi-brand-200:#d3dcff;--zabi-brand-300:#b5c6ff;--zabi-brand-400:#92a9ff;--zabi-brand-500:#6d87f1;--zabi-brand-600:#4f68da;--zabi-brand-700:#3c52ba;--zabi-brand-800:#2b3e95;--zabi-brand-900:#1c2c6d;--zabi-brand-950:#111d49;--color-brand-50:var(--zabi-brand-50);--color-brand-100:var(--zabi-brand-100);--color-brand-200:var(--zabi-brand-200);--color-brand-300:var(--zabi-brand-300);--color-brand-400:var(--zabi-brand-400);--color-brand-500:var(--zabi-brand-500);--color-brand-600:var(--zabi-brand-600);--color-brand-700:var(--zabi-brand-700);--color-brand-800:var(--zabi-brand-800);--color-brand-900:var(--zabi-brand-900);--color-brand-950:var(--zabi-brand-950);--zabi-citron-50:#f6f7ef;--zabi-citron-100:#edefdf;--zabi-citron-200:#dcdfbf;--zabi-citron-300:#c5ca95;--zabi-citron-400:#aab063;--zabi-citron-500:#8c9027;--zabi-citron-600:#707400;--zabi-citron-700:#5a5d00;--zabi-citron-800:#454700;--zabi-citron-900:#313200;--zabi-citron-950:#202100;--color-citron-50:var(--zabi-citron-50);--color-citron-100:var(--zabi-citron-100);--color-citron-200:var(--zabi-citron-200);--color-citron-300:var(--zabi-citron-300);--color-citron-400:var(--zabi-citron-400);--color-citron-500:var(--zabi-citron-500);--color-citron-600:var(--zabi-citron-600);--color-citron-700:var(--zabi-citron-700);--color-citron-800:var(--zabi-citron-800);--color-citron-900:var(--zabi-citron-900);--color-citron-950:var(--zabi-citron-950);--zabi-pine-50:#f0f8f5;--zabi-pine-100:#e2f1eb;--zabi-pine-200:#c5e4d7;--zabi-pine-300:#9fd1bd;--zabi-pine-400:#70ba9e;--zabi-pine-500:#399c7a;--zabi-pine-600:#00805e;--zabi-pine-700:#00674a;--zabi-pine-800:#004f37;--zabi-pine-900:#003826;--zabi-pine-950:#002518;--color-pine-50:var(--zabi-pine-50);--color-pine-100:var(--zabi-pine-100);--color-pine-200:var(--zabi-pine-200);--color-pine-300:var(--zabi-pine-300);--color-pine-400:var(--zabi-pine-400);--color-pine-500:var(--zabi-pine-500);--color-pine-600:var(--zabi-pine-600);--color-pine-700:var(--zabi-pine-700);--color-pine-800:var(--zabi-pine-800);--color-pine-900:var(--zabi-pine-900);--color-pine-950:var(--zabi-pine-950);--zabi-iris-50:#f6f6fd;--zabi-iris-100:#ecedfb;--zabi-iris-200:#dadbf6;--zabi-iris-300:#c1c4ef;--zabi-iris-400:#a5a7e2;--zabi-iris-500:#8486cd;--zabi-iris-600:#6969b4;--zabi-iris-700:#535397;--zabi-iris-800:#3f3f78;--zabi-iris-900:#2c2c58;--zabi-iris-950:#1d1d3a;--color-iris-50:var(--zabi-iris-50);--color-iris-100:var(--zabi-iris-100);--color-iris-200:var(--zabi-iris-200);--color-iris-300:var(--zabi-iris-300);--color-iris-400:var(--zabi-iris-400);--color-iris-500:var(--zabi-iris-500);--color-iris-600:var(--zabi-iris-600);--color-iris-700:var(--zabi-iris-700);--color-iris-800:var(--zabi-iris-800);--color-iris-900:var(--zabi-iris-900);--color-iris-950:var(--zabi-iris-950);--zabi-warning-50:#fbf6ed;--zabi-warning-100:#f7ecda;--zabi-warning-200:#f1d9b6;--zabi-warning-300:#e8bf87;--zabi-warning-400:#db9e4c;--zabi-warning-500:#c17b00;--zabi-warning-600:#9e6000;--zabi-warning-700:#824c00;--zabi-warning-800:#663800;--zabi-warning-900:#4b2600;--zabi-warning-950:#341800;--color-warning-50:var(--zabi-warning-50);--color-warning-100:var(--zabi-warning-100);--color-warning-200:var(--zabi-warning-200);--color-warning-300:var(--zabi-warning-300);--color-warning-400:var(--zabi-warning-400);--color-warning-500:var(--zabi-warning-500);--color-warning-600:var(--zabi-warning-600);--color-warning-700:var(--zabi-warning-700);--color-warning-800:var(--zabi-warning-800);--color-warning-900:var(--zabi-warning-900);--color-warning-950:var(--zabi-warning-950);--zabi-error-50:#fff4f3;--zabi-error-100:#ffe9e6;--zabi-error-200:#ffd2cd;--zabi-error-300:#ffb2ab;--zabi-error-400:#ff877d;--zabi-error-500:#ed564e;--zabi-error-600:#d22828;--zabi-error-700:#b20912;--zabi-error-800:#8c0006;--zabi-error-900:#660002;--zabi-error-950:#460202;--color-error-50:var(--zabi-error-50);--color-error-100:var(--zabi-error-100);--color-error-200:var(--zabi-error-200);--color-error-300:var(--zabi-error-300);--color-error-400:var(--zabi-error-400);--color-error-500:var(--zabi-error-500);--color-error-600:var(--zabi-error-600);--color-error-700:var(--zabi-error-700);--color-error-800:var(--zabi-error-800);--color-error-900:var(--zabi-error-900);--color-error-950:var(--zabi-error-950);--color-base-50:var(--zabi-base-50);--color-base-75:var(--zabi-base-75);--color-base-100:var(--zabi-base-100);--color-base-150:var(--zabi-base-150);--color-base-200:var(--zabi-base-200);--color-base-250:var(--zabi-base-250);--color-base-300:var(--zabi-base-300);--color-base-350:var(--zabi-base-350);--color-base-400:var(--zabi-base-400);--color-base-450:var(--zabi-base-450);--color-base-500:var(--zabi-base-500);--color-base-550:var(--zabi-base-550);--color-base-600:var(--zabi-base-600);--color-base-650:var(--zabi-base-650);--color-base-700:var(--zabi-base-700);--color-base-750:var(--zabi-base-750);--color-base-800:var(--zabi-base-800);--color-base-850:var(--zabi-base-850);--color-base-900:var(--zabi-base-900);--color-base-925:var(--zabi-base-925);--color-base-950:var(--zabi-base-950);--color-surface-base:var(--color-base-100);--color-surface-raised:#ffffff;--color-surface-elevated:var(--color-base-50);--color-surface-overlay:#ffffff;--color-surface-overlay-hover:var(--color-base-100);--color-border-overlay:transparent;--color-background:var(--color-surface-base);--color-background-secondary:var(--color-base-50);--color-background-tertiary:var(--color-base-100);--color-page:var(--color-base-100);--color-page-secondary:var(--color-base-200);--color-card:var(--color-surface-raised);--color-card-hover:var(--color-base-100);--color-card-active:var(--color-base-100);--color-card-elevated:var(--color-surface-overlay);--color-surface-1:var(--color-surface-raised);--color-surface-2:var(--color-surface-elevated);--color-surface-3:var(--color-base-75);--color-surface-4:var(--color-base-100);--color-control-track:var(--color-base-400);--color-control-track-hover:var(--color-base-450);--color-control-track-active:var(--color-base-500);--color-surface-hover:rgba(9, 9, 11, 0.06);--color-surface-active:rgba(9, 9, 11, 0.11);--color-overlay:rgba(0, 0, 0, 0.5);--color-input:var(--color-surface-raised);--color-input-border:var(--color-base-350);--color-input-hover:var(--color-base-150);--color-input-focus:var(--color-surface-raised);--color-input-disabled:var(--color-base-100);--color-headline:var(--color-base-900);--color-body:var(--color-base-800);--color-description:var(--color-base-600);--color-caption:var(--color-base-550);--color-input-placeholder:var(--color-base-500);--color-label:var(--color-base-700);--color-link:var(--color-brand-700);--color-link-hover:var(--color-brand-800);--color-nav-menu-item:var(--color-body);--color-nav-menu-item-hover:var(--color-headline);--color-nav-menu-item-active:var(--color-link);--color-nav-menu-hover:var(--color-surface-hover);--color-nav-menu-active:var(--color-action-primary-subtle);--color-nav-menu-active-hover:var(--color-action-primary-subtle-hover);--color-nav-menu-focus:var(--color-brand-500);--color-success-text:var(--color-pine-700);--color-warning-text:var(--color-warning-700);--color-neutral-text:var(--color-base-700);--color-energetic-text:var(--color-citron-700);--color-error-text:var(--color-error-700);--color-inverse:var(--color-base-100);--color-disabled:var(--color-base-400);--color-border:var(--color-base-300);--color-border-weak:var(--color-base-300);--color-border-medium:var(--color-base-400);--color-border-strong:var(--color-base-500);--color-focus:var(--color-brand-500);--color-focus-weak:var(--color-brand-600);--color-focus-medium:var(--color-brand-700);--color-focus-strong:var(--color-brand-800);--color-focus-ring:var(--color-focus);--color-focus-ring-offset:var(--color-card);--color-primary:var(--color-brand-600);--color-primary-weak:var(--color-brand-700);--color-primary-medium:var(--color-brand-800);--color-primary-strong:var(--color-brand-900);--color-secondary:var(--color-base-600);--color-secondary-weak:var(--color-base-700);--color-secondary-medium:var(--color-base-800);--color-secondary-strong:var(--color-base-900);--color-success:var(--color-pine-600);--color-success-weak:var(--color-pine-700);--color-success-medium:var(--color-pine-800);--color-success-strong:var(--color-pine-900);--color-success-subtle:var(--color-pine-100);--color-success-border:var(--color-pine-200);--color-warning:var(--color-warning-600);--color-warning-weak:var(--color-warning-700);--color-warning-medium:var(--color-warning-800);--color-warning-strong:var(--color-warning-900);--color-warning-subtle:var(--color-warning-100);--color-warning-border:var(--color-warning-200);--color-error:var(--color-error-600);--color-error-weak:var(--color-error-700);--color-error-medium:var(--color-error-800);--color-error-strong:var(--color-error-900);--color-error-subtle:var(--color-error-100);--color-error-border:var(--color-error-200);--color-energetic:var(--color-citron-600);--color-energetic-weak:var(--color-citron-700);--color-energetic-medium:var(--color-citron-800);--color-energetic-strong:var(--color-citron-900);--color-energetic-subtle:var(--color-citron-100);--color-energetic-border:var(--color-citron-200);--color-neutral:var(--color-base-550);--color-neutral-weak:var(--color-base-600);--color-neutral-medium:var(--color-base-700);--color-neutral-strong:var(--color-base-900);--color-neutral-subtle:var(--color-base-200);--color-neutral-border:var(--color-base-200);--color-info:var(--color-iris-600);--color-info-weak:var(--color-iris-700);--color-info-medium:var(--color-iris-800);--color-info-strong:var(--color-iris-900);--color-info-active:var(--color-iris-400);--color-info-subtle:var(--color-iris-100);--color-info-border:var(--color-iris-200);--color-info-text:var(--color-iris-700);--color-action-primary:var(--color-brand-600);--color-action-primary-hover:var(--color-brand-700);--color-action-primary-active:var(--color-brand-800);--color-action-primary-subtle:var(--color-brand-100);--color-action-primary-subtle-hover:var(--color-brand-200);--color-action-primary-text:#ffffff;--color-action-secondary:rgba(9, 9, 11, 0.07);--color-action-secondary-hover:rgba(9, 9, 11, 0.12);--color-action-secondary-active:rgba(9, 9, 11, 0.17);--color-action-secondary-subtle:var(--color-base-100);--color-action-secondary-subtle-hover:var(--color-base-200);--color-action-secondary-text:var(--color-headline);--color-action-disabled:var(--color-base-200);--color-action-disabled-text:var(--color-base-500);--color-action-disabled-border:var(--color-base-250);--color-action-danger:var(--color-error-600);--color-action-danger-hover:var(--color-error-700);--color-action-danger-active:var(--color-error-800);--color-action-danger-subtle:var(--color-error-100);--color-action-danger-subtle-hover:var(--color-error-200);--color-action-danger-text:var(--color-error-50);--shadow-color:0 0 0;--shadow-opacity:0.1;--shadow-sm:0 1px 3px 0 rgb(var(--shadow-color) / var(--shadow-opacity)), 0 1px 2px -1px rgb(var(--shadow-color) / var(--shadow-opacity));--shadow-md:0 4px 6px -1px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 2px 4px -2px rgb(var(--shadow-color) / var(--shadow-opacity));--shadow-lg:0 10px 15px -3px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 4px 6px -4px rgb(var(--shadow-color) / var(--shadow-opacity));--shadow-xl:0 20px 25px -5px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 8px 10px -6px rgb(var(--shadow-color) / var(--shadow-opacity));--spacing-xs:0.25rem;--spacing-sm:0.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-2xl:3rem;--max-width-xs:20rem;--max-width-sm:24rem;--max-width-md:28rem;--max-width-lg:32rem;--max-width-xl:36rem;--max-width-2xl:42rem;--width-xs:20rem;--width-sm:24rem;--width-md:28rem;--width-lg:32rem;--width-xl:36rem;--width-2xl:42rem;--min-width-xs:20rem;--min-width-sm:24rem;--min-width-md:28rem;--min-width-lg:32rem;--min-width-xl:36rem;--min-width-2xl:42rem;--radius-control:0.5rem;--radius-container:0.75rem;--radius-overlay:1rem;--radius-pill:9999px;--radius-sm:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-xl:0.75rem;--control-height-sm:2rem;--control-height-md:2.5rem;--control-height-lg:3rem;--z-dropdown:1000;--z-sticky:1020;--z-fixed:1030;--z-modal-backdrop:1040;--z-modal:1050;--z-popover:1060;--z-tooltip:1070;--z-toast:1080;--color-tooltip-bg:var(--color-base-800);--color-tooltip-fg:var(--color-base-50);}
3
- .dark{--zabi-base-50:#fafafa;--zabi-base-75:#f7f7f7;--zabi-base-100:#f4f4f5;--zabi-base-150:#ececee;--zabi-base-200:#e4e4e7;--zabi-base-250:#dcdcdf;--zabi-base-300:#d4d4d8;--zabi-base-350:#babac1;--zabi-base-400:#a1a1aa;--zabi-base-450:#898992;--zabi-base-500:#71717a;--zabi-base-550:#61616a;--zabi-base-600:#52525b;--zabi-base-650:#484850;--zabi-base-700:#3f3f46;--zabi-base-750:#333338;--zabi-base-800:#27272a;--zabi-base-850:#1f1f22;--zabi-base-900:#18181b;--zabi-base-925:#101013;--zabi-base-950:#09090b;--zabi-brand-50:#f4f6ff;--zabi-brand-100:#e9eeff;--zabi-brand-200:#d3dcff;--zabi-brand-300:#b5c6ff;--zabi-brand-400:#92a9ff;--zabi-brand-500:#6d87f1;--zabi-brand-600:#4f68da;--zabi-brand-700:#3c52ba;--zabi-brand-800:#2b3e95;--zabi-brand-900:#1c2c6d;--zabi-brand-950:#111d49;--color-brand-50:var(--zabi-brand-950);--color-brand-100:var(--zabi-brand-900);--color-brand-200:var(--zabi-brand-800);--color-brand-300:var(--zabi-brand-700);--color-brand-400:var(--zabi-brand-600);--color-brand-500:var(--zabi-brand-500);--color-brand-600:var(--zabi-brand-400);--color-brand-700:var(--zabi-brand-300);--color-brand-800:var(--zabi-brand-200);--color-brand-900:var(--zabi-brand-100);--color-brand-950:var(--zabi-brand-50);--zabi-citron-50:#f6f7ef;--zabi-citron-100:#edefdf;--zabi-citron-200:#dcdfbf;--zabi-citron-300:#c5ca95;--zabi-citron-400:#aab063;--zabi-citron-500:#8c9027;--zabi-citron-600:#707400;--zabi-citron-700:#5a5d00;--zabi-citron-800:#454700;--zabi-citron-900:#313200;--zabi-citron-950:#202100;--color-citron-50:var(--zabi-citron-950);--color-citron-100:var(--zabi-citron-900);--color-citron-200:var(--zabi-citron-800);--color-citron-300:var(--zabi-citron-700);--color-citron-400:var(--zabi-citron-600);--color-citron-500:var(--zabi-citron-500);--color-citron-600:var(--zabi-citron-400);--color-citron-700:var(--zabi-citron-300);--color-citron-800:var(--zabi-citron-200);--color-citron-900:var(--zabi-citron-100);--color-citron-950:var(--zabi-citron-50);--zabi-pine-50:#f0f8f5;--zabi-pine-100:#e2f1eb;--zabi-pine-200:#c5e4d7;--zabi-pine-300:#9fd1bd;--zabi-pine-400:#70ba9e;--zabi-pine-500:#399c7a;--zabi-pine-600:#00805e;--zabi-pine-700:#00674a;--zabi-pine-800:#004f37;--zabi-pine-900:#003826;--zabi-pine-950:#002518;--color-pine-50:var(--zabi-pine-950);--color-pine-100:var(--zabi-pine-900);--color-pine-200:var(--zabi-pine-800);--color-pine-300:var(--zabi-pine-700);--color-pine-400:var(--zabi-pine-600);--color-pine-500:var(--zabi-pine-500);--color-pine-600:var(--zabi-pine-400);--color-pine-700:var(--zabi-pine-300);--color-pine-800:var(--zabi-pine-200);--color-pine-900:var(--zabi-pine-100);--color-pine-950:var(--zabi-pine-50);--zabi-iris-50:#f6f6fd;--zabi-iris-100:#ecedfb;--zabi-iris-200:#dadbf6;--zabi-iris-300:#c1c4ef;--zabi-iris-400:#a5a7e2;--zabi-iris-500:#8486cd;--zabi-iris-600:#6969b4;--zabi-iris-700:#535397;--zabi-iris-800:#3f3f78;--zabi-iris-900:#2c2c58;--zabi-iris-950:#1d1d3a;--color-iris-50:var(--zabi-iris-950);--color-iris-100:var(--zabi-iris-900);--color-iris-200:var(--zabi-iris-800);--color-iris-300:var(--zabi-iris-700);--color-iris-400:var(--zabi-iris-600);--color-iris-500:var(--zabi-iris-500);--color-iris-600:var(--zabi-iris-400);--color-iris-700:var(--zabi-iris-300);--color-iris-800:var(--zabi-iris-200);--color-iris-900:var(--zabi-iris-100);--color-iris-950:var(--zabi-iris-50);--zabi-warning-50:#fbf6ed;--zabi-warning-100:#f7ecda;--zabi-warning-200:#f1d9b6;--zabi-warning-300:#e8bf87;--zabi-warning-400:#db9e4c;--zabi-warning-500:#c17b00;--zabi-warning-600:#9e6000;--zabi-warning-700:#824c00;--zabi-warning-800:#663800;--zabi-warning-900:#4b2600;--zabi-warning-950:#341800;--color-warning-50:var(--zabi-warning-950);--color-warning-100:var(--zabi-warning-900);--color-warning-200:var(--zabi-warning-800);--color-warning-300:var(--zabi-warning-700);--color-warning-400:var(--zabi-warning-600);--color-warning-500:var(--zabi-warning-500);--color-warning-600:var(--zabi-warning-400);--color-warning-700:var(--zabi-warning-300);--color-warning-800:var(--zabi-warning-200);--color-warning-900:var(--zabi-warning-100);--color-warning-950:var(--zabi-warning-50);--zabi-error-50:#fff4f3;--zabi-error-100:#ffe9e6;--zabi-error-200:#ffd2cd;--zabi-error-300:#ffb2ab;--zabi-error-400:#ff877d;--zabi-error-500:#ed564e;--zabi-error-600:#d22828;--zabi-error-700:#b20912;--zabi-error-800:#8c0006;--zabi-error-900:#660002;--zabi-error-950:#460202;--color-error-50:var(--zabi-error-950);--color-error-100:var(--zabi-error-900);--color-error-200:var(--zabi-error-800);--color-error-300:var(--zabi-error-700);--color-error-400:var(--zabi-error-600);--color-error-500:var(--zabi-error-500);--color-error-600:var(--zabi-error-400);--color-error-700:var(--zabi-error-300);--color-error-800:var(--zabi-error-200);--color-error-900:var(--zabi-error-100);--color-error-950:var(--zabi-error-50);--color-base-50:#09090b;--color-base-75:#101013;--color-base-100:#18181b;--color-base-150:#1f1f22;--color-base-200:#27272a;--color-base-250:#333338;--color-base-300:#3f3f46;--color-base-350:#484850;--color-base-400:#52525b;--color-base-450:#61616a;--color-base-500:#71717a;--color-base-550:#898992;--color-base-600:#a1a1aa;--color-base-650:#babac1;--color-base-700:#d4d4d8;--color-base-750:#dcdcdf;--color-base-800:#e4e4e7;--color-base-850:#ececee;--color-base-900:#f4f4f5;--color-base-925:#f7f7f7;--color-base-950:#fafafa;--color-surface-base:#18181b;--color-surface-raised:#262629;--color-surface-elevated:#363638;--color-surface-overlay:#454547;--color-surface-overlay-hover:#52525b;--color-neutral-subtle:var(--color-base-300);--color-border-overlay:var(--color-base-450);--color-background:var(--color-surface-base);--color-card:var(--color-surface-raised);--color-card-hover:var(--color-surface-elevated);--color-card-active:var(--color-surface-overlay);--color-card-elevated:var(--color-surface-elevated);--color-surface-1:var(--color-surface-raised);--color-surface-2:var(--color-surface-elevated);--color-surface-3:var(--color-surface-overlay);--color-surface-4:var(--color-base-400);--color-description:var(--color-base-700);--color-caption:var(--color-base-650);--color-surface-hover:rgba(250, 250, 250, 0.08);--color-surface-active:rgba(250, 250, 250, 0.14);--color-overlay:rgba(0, 0, 0, 0.7);--color-input:var(--color-base-150);--color-input-border:var(--color-base-300);--color-input-hover:var(--color-base-200);--color-input-focus:var(--color-base-150);--color-input-disabled:var(--color-base-100);--color-input-placeholder:var(--color-base-500);--color-neutral:var(--color-base-600);--color-action-primary-text:var(--zabi-brand-950);--color-action-secondary:rgba(250, 250, 250, 0.09);--color-action-secondary-hover:rgba(250, 250, 250, 0.15);--color-action-secondary-active:rgba(250, 250, 250, 0.21);--color-action-danger:var(--color-error-600);--color-action-danger-hover:var(--color-error-700);--color-action-danger-active:var(--color-error-800);--color-action-danger-subtle:var(--color-error-100);--color-action-danger-subtle-hover:var(--color-error-200);--color-action-danger-text:var(--color-error-50);--shadow-opacity:0.3;--shadow-sm:0 1px 3px 0 rgb(var(--shadow-color) / var(--shadow-opacity)), 0 1px 2px -1px rgb(var(--shadow-color) / var(--shadow-opacity));--shadow-md:0 4px 6px -1px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 2px 4px -2px rgb(var(--shadow-color) / var(--shadow-opacity));--shadow-lg:0 10px 15px -3px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 4px 6px -4px rgb(var(--shadow-color) / var(--shadow-opacity));--shadow-xl:0 20px 25px -5px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 8px 10px -6px rgb(var(--shadow-color) / var(--shadow-opacity));}
2
+ :root{--zabi-base-50:#fafafa;--zabi-base-75:#f7f7f7;--zabi-base-100:#f4f4f5;--zabi-base-150:#ececee;--zabi-base-200:#e4e4e7;--zabi-base-250:#dcdcdf;--zabi-base-300:#d4d4d8;--zabi-base-350:#babac1;--zabi-base-400:#a1a1aa;--zabi-base-450:#898992;--zabi-base-500:#71717a;--zabi-base-550:#61616a;--zabi-base-600:#52525b;--zabi-base-650:#484850;--zabi-base-700:#3f3f46;--zabi-base-750:#333338;--zabi-base-800:#27272a;--zabi-base-850:#1f1f22;--zabi-base-900:#18181b;--zabi-base-925:#101013;--zabi-base-950:#09090b;--font-family-sans:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-family-heading:var(--font-family-sans);--font-family-display:var(--font-family-heading);--font-family-mono:ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;--font-sans:var(--font-family-sans);--font-mono:var(--font-family-mono);--font-heading:var(--font-family-heading);--font-display:var(--font-family-display);--font-weight-regular:400;--font-weight-normal:var(--font-weight-regular);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--zabi-brand-50:#f4f6ff;--zabi-brand-100:#e9eeff;--zabi-brand-200:#d3dcff;--zabi-brand-300:#b5c6ff;--zabi-brand-400:#92a9ff;--zabi-brand-500:#6d87f1;--zabi-brand-600:#4f68da;--zabi-brand-700:#3c52ba;--zabi-brand-800:#2b3e95;--zabi-brand-900:#1c2c6d;--zabi-brand-950:#111d49;--color-brand-50:var(--zabi-brand-50);--color-brand-100:var(--zabi-brand-100);--color-brand-200:var(--zabi-brand-200);--color-brand-300:var(--zabi-brand-300);--color-brand-400:var(--zabi-brand-400);--color-brand-500:var(--zabi-brand-500);--color-brand-600:var(--zabi-brand-600);--color-brand-700:var(--zabi-brand-700);--color-brand-800:var(--zabi-brand-800);--color-brand-900:var(--zabi-brand-900);--color-brand-950:var(--zabi-brand-950);--zabi-citron-50:#f4f8ee;--zabi-citron-100:#e9f0de;--zabi-citron-200:#d4e2bd;--zabi-citron-300:#b9ce92;--zabi-citron-400:#99b55e;--zabi-citron-500:#769619;--zabi-citron-600:#5d7900;--zabi-citron-700:#4a6100;--zabi-citron-800:#384a00;--zabi-citron-900:#273500;--zabi-citron-950:#192300;--color-citron-50:var(--zabi-citron-50);--color-citron-100:var(--zabi-citron-100);--color-citron-200:var(--zabi-citron-200);--color-citron-300:var(--zabi-citron-300);--color-citron-400:var(--zabi-citron-400);--color-citron-500:var(--zabi-citron-500);--color-citron-600:var(--zabi-citron-600);--color-citron-700:var(--zabi-citron-700);--color-citron-800:var(--zabi-citron-800);--color-citron-900:var(--zabi-citron-900);--color-citron-950:var(--zabi-citron-950);--zabi-accent-50:var(--zabi-citron-50);--zabi-accent-100:var(--zabi-citron-100);--zabi-accent-200:var(--zabi-citron-200);--zabi-accent-300:var(--zabi-citron-300);--zabi-accent-400:var(--zabi-citron-400);--zabi-accent-500:var(--zabi-citron-500);--zabi-accent-600:var(--zabi-citron-600);--zabi-accent-700:var(--zabi-citron-700);--zabi-accent-800:var(--zabi-citron-800);--zabi-accent-900:var(--zabi-citron-900);--zabi-accent-950:var(--zabi-citron-950);--color-accent-50:var(--zabi-accent-50);--color-accent-100:var(--zabi-accent-100);--color-accent-200:var(--zabi-accent-200);--color-accent-300:var(--zabi-accent-300);--color-accent-400:var(--zabi-accent-400);--color-accent-500:var(--zabi-accent-500);--color-accent-600:var(--zabi-accent-600);--color-accent-700:var(--zabi-accent-700);--color-accent-800:var(--zabi-accent-800);--color-accent-900:var(--zabi-accent-900);--color-accent-950:var(--zabi-accent-950);--zabi-pine-50:#f0f9f3;--zabi-pine-100:#e1f2e8;--zabi-pine-200:#c3e5d0;--zabi-pine-300:#9cd3b2;--zabi-pine-400:#6cbb8e;--zabi-pine-500:#319e67;--zabi-pine-600:#00804b;--zabi-pine-700:#00683b;--zabi-pine-800:#00502b;--zabi-pine-900:#00391c;--zabi-pine-950:#002610;--color-pine-50:var(--zabi-pine-50);--color-pine-100:var(--zabi-pine-100);--color-pine-200:var(--zabi-pine-200);--color-pine-300:var(--zabi-pine-300);--color-pine-400:var(--zabi-pine-400);--color-pine-500:var(--zabi-pine-500);--color-pine-600:var(--zabi-pine-600);--color-pine-700:var(--zabi-pine-700);--color-pine-800:var(--zabi-pine-800);--color-pine-900:var(--zabi-pine-900);--color-pine-950:var(--zabi-pine-950);--zabi-iris-50:#f6f6fd;--zabi-iris-100:#ecedfb;--zabi-iris-200:#dadbf6;--zabi-iris-300:#c1c4ef;--zabi-iris-400:#a5a7e2;--zabi-iris-500:#8486cd;--zabi-iris-600:#6969b4;--zabi-iris-700:#535397;--zabi-iris-800:#3f3f78;--zabi-iris-900:#2c2c58;--zabi-iris-950:#1d1d3a;--color-iris-50:var(--zabi-iris-50);--color-iris-100:var(--zabi-iris-100);--color-iris-200:var(--zabi-iris-200);--color-iris-300:var(--zabi-iris-300);--color-iris-400:var(--zabi-iris-400);--color-iris-500:var(--zabi-iris-500);--color-iris-600:var(--zabi-iris-600);--color-iris-700:var(--zabi-iris-700);--color-iris-800:var(--zabi-iris-800);--color-iris-900:var(--zabi-iris-900);--color-iris-950:var(--zabi-iris-950);--zabi-warning-50:#fdf5ec;--zabi-warning-100:#fbebda;--zabi-warning-200:#f6d7b4;--zabi-warning-300:#efbc84;--zabi-warning-400:#e49a44;--zabi-warning-500:#c67800;--zabi-warning-600:#a05f00;--zabi-warning-700:#834b00;--zabi-warning-800:#663800;--zabi-warning-900:#4b2700;--zabi-warning-950:#331800;--color-warning-50:var(--zabi-warning-50);--color-warning-100:var(--zabi-warning-100);--color-warning-200:var(--zabi-warning-200);--color-warning-300:var(--zabi-warning-300);--color-warning-400:var(--zabi-warning-400);--color-warning-500:var(--zabi-warning-500);--color-warning-600:var(--zabi-warning-600);--color-warning-700:var(--zabi-warning-700);--color-warning-800:var(--zabi-warning-800);--color-warning-900:var(--zabi-warning-900);--color-warning-950:var(--zabi-warning-950);--zabi-error-50:#fff4f3;--zabi-error-100:#ffe9e6;--zabi-error-200:#ffd2cd;--zabi-error-300:#ffb2ab;--zabi-error-400:#ff877d;--zabi-error-500:#ed564e;--zabi-error-600:#d22828;--zabi-error-700:#b20912;--zabi-error-800:#8c0006;--zabi-error-900:#660002;--zabi-error-950:#460202;--color-error-50:var(--zabi-error-50);--color-error-100:var(--zabi-error-100);--color-error-200:var(--zabi-error-200);--color-error-300:var(--zabi-error-300);--color-error-400:var(--zabi-error-400);--color-error-500:var(--zabi-error-500);--color-error-600:var(--zabi-error-600);--color-error-700:var(--zabi-error-700);--color-error-800:var(--zabi-error-800);--color-error-900:var(--zabi-error-900);--color-error-950:var(--zabi-error-950);--color-base-50:var(--zabi-base-50);--color-base-75:var(--zabi-base-75);--color-base-100:var(--zabi-base-100);--color-base-150:var(--zabi-base-150);--color-base-200:var(--zabi-base-200);--color-base-250:var(--zabi-base-250);--color-base-300:var(--zabi-base-300);--color-base-350:var(--zabi-base-350);--color-base-400:var(--zabi-base-400);--color-base-450:var(--zabi-base-450);--color-base-500:var(--zabi-base-500);--color-base-550:var(--zabi-base-550);--color-base-600:var(--zabi-base-600);--color-base-650:var(--zabi-base-650);--color-base-700:var(--zabi-base-700);--color-base-750:var(--zabi-base-750);--color-base-800:var(--zabi-base-800);--color-base-850:var(--zabi-base-850);--color-base-900:var(--zabi-base-900);--color-base-925:var(--zabi-base-925);--color-base-950:var(--zabi-base-950);--color-surface-base:var(--color-base-50);--color-surface-raised:#ffffff;--color-surface-elevated:var(--color-base-100);--color-surface-overlay:#ffffff;--color-surface-chrome:var(--color-surface-base);--color-bar:var(--color-surface-chrome);--color-bar-border:color-mix(in srgb, var(--color-headline) 10%, transparent);--color-bar-brand:var(--color-action-primary);--color-tabbar-active:var(--color-nav-menu-active);--color-surface-inset:var(--color-base-100);--color-surface-overlay-hover:var(--color-base-150);--color-border-overlay:rgba(9, 9, 11, 0.1);--color-background:var(--color-surface-base);--color-background-secondary:var(--color-base-100);--color-background-tertiary:var(--color-base-150);--color-page:var(--color-surface-base);--color-page-secondary:var(--color-base-200);--color-card:var(--color-surface-raised);--color-card-hover:var(--color-base-150);--color-card-active:var(--color-base-200);--color-card-elevated:var(--color-surface-overlay);--color-card-tint:var(--color-brand-100);--color-card-flat:var(--color-card);--color-card-flat-hover:var(--color-card-hover);--color-card-flat-active:var(--color-card-active);--color-surface-1:var(--color-surface-raised);--color-surface-2:var(--color-surface-elevated);--color-surface-3:var(--color-base-75);--color-surface-4:var(--color-base-100);--color-control-track:var(--color-base-400);--color-control-track-hover:var(--color-base-450);--color-control-track-active:var(--color-base-500);--color-toggle-track:var(--color-base-200);--color-toggle-track-hover:var(--color-base-250);--color-toggle-track-active:var(--color-base-300);--color-toggle-track-border:var(--color-input-border);--color-toggle-knob:var(--color-base-500);--color-toggle-knob-checked:var(--color-action-primary-text);--color-progress-fill:var(--color-action-primary);--color-progress-track:var(--color-input);--color-progress-track-border:var(--color-input-border);--color-surface-hover:rgba(9, 9, 11, 0.09);--color-surface-active:rgba(9, 9, 11, 0.15);--color-overlay:rgba(0, 0, 0, 0.5);--color-input:var(--color-surface-raised);--color-input-border:var(--color-base-500);--color-input-border-hover:var(--color-base-550);--color-input-hover:var(--color-base-100);--color-input-active:color-mix(in srgb, var(--zabi-base-900) 12%, var(--color-input));--color-input-focus:var(--color-surface-raised);--color-input-disabled:var(--color-base-150);--color-input-solid:var(--color-input);--color-input-solid-hover:var(--color-input-hover);--color-input-solid-focus:var(--color-input-focus);--color-input-solid-active:var(--color-input-active);--color-headline:var(--color-base-900);--color-body:var(--color-base-800);--color-description:var(--color-base-600);--color-caption:var(--color-base-550);--color-input-placeholder:var(--color-base-550);--color-label:var(--color-base-700);--color-link:var(--color-brand-700);--color-link-hover:var(--color-brand-800);--color-nav-menu-item:var(--color-body);--color-nav-menu-item-hover:var(--color-headline);--color-nav-menu-item-active:var(--color-link);--color-nav-menu-hover:var(--color-surface-hover);--color-nav-menu-active:var(--color-action-primary-subtle);--color-nav-menu-active-hover:var(--color-action-primary-subtle-hover);--color-nav-menu-focus:var(--color-focus);--color-success-text:var(--color-pine-700);--color-warning-text:var(--color-warning-700);--color-neutral-text:var(--color-base-700);--color-energetic-text:var(--color-citron-700);--color-error-text:var(--color-error-700);--color-inverse:var(--color-base-100);--color-disabled:var(--color-base-400);--color-border:var(--color-base-300);--color-border-weak:var(--color-base-300);--color-border-medium:var(--color-base-400);--color-border-strong:var(--color-base-500);--color-control-border:var(--color-base-500);--color-segment-thumb:var(--color-surface-raised);--color-segment-thumb-text:var(--color-headline);--color-segment-thumb-border:var(--color-control-border);--color-focus:var(--color-brand-600);--color-focus-weak:var(--color-brand-700);--color-focus-medium:var(--color-brand-800);--color-focus-strong:var(--color-brand-900);--color-focus-ring:var(--color-focus);--color-focus-ring-offset:var(--color-card);--color-focus-ring-muted:var(--color-base-500);--color-focus-ring-danger:var(--color-error);--color-primary:var(--color-brand-600);--color-primary-weak:var(--color-brand-700);--color-primary-medium:var(--color-brand-800);--color-primary-strong:var(--color-brand-900);--color-secondary:var(--color-base-600);--color-secondary-weak:var(--color-base-700);--color-secondary-medium:var(--color-base-800);--color-secondary-strong:var(--color-base-900);--color-success:var(--color-pine-600);--color-success-weak:var(--color-pine-700);--color-success-medium:var(--color-pine-800);--color-success-strong:var(--color-pine-900);--color-success-subtle:var(--color-pine-100);--color-success-border:var(--color-pine-200);--color-warning:var(--color-warning-600);--color-warning-weak:var(--color-warning-700);--color-warning-medium:var(--color-warning-800);--color-warning-strong:var(--color-warning-900);--color-warning-subtle:var(--color-warning-100);--color-warning-border:var(--color-warning-200);--color-error:var(--color-error-600);--color-error-weak:var(--color-error-700);--color-error-medium:var(--color-error-800);--color-error-strong:var(--color-error-900);--color-error-subtle:var(--color-error-100);--color-error-border:var(--color-error-200);--color-energetic:var(--color-citron-600);--color-energetic-weak:var(--color-citron-700);--color-energetic-medium:var(--color-citron-800);--color-energetic-strong:var(--color-citron-900);--color-energetic-subtle:var(--color-citron-100);--color-energetic-border:var(--color-citron-200);--color-accent:var(--color-accent-600);--color-accent-hover:var(--color-accent-700);--color-accent-active:var(--color-accent-800);--color-accent-subtle:var(--color-accent-100);--color-accent-border:var(--color-accent-200);--color-accent-text:var(--color-accent-700);--zabi-on-accent:#ffffff;--zabi-on-accent-dark:var(--zabi-accent-950);--color-on-accent:var(--zabi-on-accent);--color-neutral:var(--color-base-550);--color-neutral-weak:var(--color-base-600);--color-neutral-medium:var(--color-base-700);--color-neutral-strong:var(--color-base-900);--color-neutral-subtle:var(--color-base-200);--color-neutral-border:var(--color-base-250);--color-info:var(--color-iris-600);--color-info-weak:var(--color-iris-700);--color-info-medium:var(--color-iris-800);--color-info-strong:var(--color-iris-900);--color-info-active:var(--color-iris-400);--color-info-subtle:var(--color-iris-100);--color-info-border:var(--color-iris-200);--color-info-text:var(--color-iris-700);--color-action-primary:var(--color-brand-600);--color-action-primary-hover:var(--color-brand-700);--color-action-primary-active:var(--color-brand-800);--color-action-primary-subtle:var(--color-brand-100);--color-action-primary-subtle-hover:var(--color-brand-200);--color-action-primary-border:var(--color-brand-200);--color-action-primary-subtle-active:color-mix(in srgb, var(--color-brand-300) 50%, var(--color-brand-200));--zabi-on-brand:#ffffff;--zabi-on-brand-dark:var(--zabi-on-brand);--color-on-brand:var(--zabi-on-brand);--color-action-primary-text:var(--color-on-brand);--color-action-secondary:rgba(9, 9, 11, 0.1);--color-action-secondary-hover:rgba(9, 9, 11, 0.15);--color-action-secondary-active:rgba(9, 9, 11, 0.2);--color-action-secondary-subtle:var(--color-base-100);--color-action-secondary-subtle-hover:var(--color-base-200);--color-action-secondary-text:var(--color-headline);--color-action-tonal:var(--color-action-primary-subtle);--color-action-tonal-hover:var(--color-action-primary-subtle-hover);--color-action-tonal-active:color-mix(in srgb, var(--color-brand-300) 50%, var(--color-brand-200));--color-action-tonal-text:var(--color-brand-800);--color-chip:var(--color-base-200);--color-chip-hover:var(--color-base-300);--color-chip-active:var(--color-base-350);--color-chip-text:var(--color-headline);--color-chip-selected:var(--color-action-tonal);--color-chip-selected-hover:var(--color-action-tonal-hover);--color-chip-selected-active:var(--color-action-tonal-active);--color-chip-selected-text:var(--color-action-tonal-text);--color-action-outline-border:var(--color-input-border);--color-action-outline-border-hover:var(--color-input-border-hover);--color-action-disabled:var(--color-base-250);--color-action-disabled-text:var(--color-base-500);--color-action-disabled-border:var(--color-base-300);--color-action-danger:var(--color-error-600);--color-action-danger-hover:var(--color-error-700);--color-action-danger-active:var(--color-error-800);--color-action-danger-subtle:var(--color-error-100);--color-action-danger-subtle-hover:var(--color-error-200);--color-action-danger-subtle-active:color-mix(in srgb, var(--color-error-300) 50%, var(--color-error-200));--color-action-danger-text:var(--color-error-50);--shadow-color:24 24 27;--shadow-opacity:0.1;--shadow-opacity-contact:0.06;--shadow-sm:0 1px 2px 0 rgb(var(--shadow-color) / var(--shadow-opacity-contact)), 0 2px 6px -1px rgb(var(--shadow-color) / var(--shadow-opacity));--shadow-md:0 1px 3px 0 rgb(var(--shadow-color) / var(--shadow-opacity-contact)), 0 6px 14px -2px rgb(var(--shadow-color) / var(--shadow-opacity));--shadow-lg:0 1px 2px 0 rgb(var(--shadow-color) / var(--shadow-opacity-contact)), 0 10px 30px 0 rgb(var(--shadow-color) / var(--shadow-opacity));--shadow-xl:0 2px 4px 0 rgb(var(--shadow-color) / var(--shadow-opacity-contact)), 0 20px 50px -8px rgb(var(--shadow-color) / var(--shadow-opacity));--shadow-material:0 1px 2px 0 rgb(var(--shadow-color) / var(--shadow-opacity-contact)), 0 10px 30px 0 rgb(var(--shadow-color) / var(--shadow-opacity));--duration-fast:100ms;--duration-base:150ms;--duration-moderate:200ms;--duration-slow:300ms;--ease-standard:cubic-bezier(0.2, 0, 0, 1);--ease-out:cubic-bezier(0, 0, 0.2, 1);--ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);--default-transition-duration:var(--duration-base);--default-transition-timing-function:var(--ease-standard);--material-alpha-thin:58%;--material-alpha-regular:84%;--material-alpha-thick:88%;--color-material-thin:color-mix(in srgb, var(--color-surface-chrome) var(--material-alpha-thin), transparent);--color-material-regular:color-mix(in srgb, var(--color-surface-chrome) var(--material-alpha-regular), transparent);--color-material-thick:color-mix(in srgb, var(--color-surface-overlay) var(--material-alpha-thick), transparent);--material-blur-thin:16px;--material-blur-regular:24px;--material-blur-thick:32px;--material-saturate:180%;--material-backdrop-brightness:1;--material-filter-thin:blur(var(--material-blur-thin)) saturate(var(--material-saturate)) brightness(var(--material-backdrop-brightness));--material-filter-regular:blur(var(--material-blur-regular)) saturate(var(--material-saturate)) brightness(var(--material-backdrop-brightness));--material-filter-thick:blur(var(--material-blur-thick)) saturate(var(--material-saturate)) brightness(var(--material-backdrop-brightness));--color-material-highlight:color-mix(in srgb, var(--zabi-base-50) 60%, transparent);--color-material-rim:color-mix(in srgb, var(--zabi-base-900) 9%, transparent);--gradient-canvas-strength:55%;--color-canvas-wash-brand:color-mix(in srgb, var(--color-brand-300) var(--gradient-canvas-strength), transparent);--color-canvas-wash-accent:color-mix(in srgb, var(--color-accent-300) var(--gradient-canvas-strength), transparent);--gradient-canvas:radial-gradient(90% 46% at 8% 0%, var(--color-canvas-wash-brand), transparent 70%),
3
+ radial-gradient(80% 40% at 100% 4%, var(--color-canvas-wash-accent), transparent 70%);--gradient-control-top-strength:0%;--gradient-control-bottom-strength:14%;--gradient-control-accent-top-strength:var(--gradient-control-top-strength);--gradient-control-accent-bottom-strength:var(--gradient-control-bottom-strength);--color-control-gradient-start:color-mix(in srgb, var(--zabi-base-50) var(--gradient-control-top-strength), transparent);--color-control-gradient-end:color-mix(in srgb, var(--zabi-base-950) var(--gradient-control-bottom-strength), transparent);--gradient-control:linear-gradient(to bottom, var(--color-control-gradient-start), var(--color-control-gradient-end));--color-control-gradient-accent-start:color-mix(in srgb, var(--zabi-base-50) var(--gradient-control-accent-top-strength), transparent);--color-control-gradient-accent-end:color-mix(in srgb, var(--zabi-base-950) var(--gradient-control-accent-bottom-strength), transparent);--gradient-control-accent:linear-gradient(to bottom, var(--color-control-gradient-accent-start), var(--color-control-gradient-accent-end));--shadow-control-highlight:inset 0 1px 0 color-mix(in srgb, var(--zabi-base-50) 40%, transparent);--spacing-xs:0.25rem;--spacing-sm:0.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-2xl:3rem;--max-width-xs:20rem;--max-width-sm:24rem;--max-width-md:28rem;--max-width-lg:32rem;--max-width-xl:36rem;--max-width-2xl:42rem;--width-xs:20rem;--width-sm:24rem;--width-md:28rem;--width-lg:32rem;--width-xl:36rem;--width-2xl:42rem;--min-width-xs:20rem;--min-width-sm:24rem;--min-width-md:28rem;--min-width-lg:32rem;--min-width-xl:36rem;--min-width-2xl:42rem;--radius-control:0.5rem;--radius-container:0.75rem;--radius-overlay:1rem;--radius-pill:9999px;--radius-sm:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-xl:0.75rem;--control-height-sm:2rem;--control-height-md:2.5rem;--control-height-lg:3rem;--z-dropdown:1000;--z-sticky:1020;--z-fixed:1030;--z-modal-backdrop:1040;--z-modal:1050;--z-popover:1060;--z-tooltip:1070;--z-toast:1080;--color-tooltip-bg:var(--color-base-800);--color-tooltip-fg:var(--color-base-50);}
4
+ :root,[data-theme="light"]{color-scheme:light}
5
+ [data-theme="light"]{color-scheme:light}[data-theme="dark"]{color-scheme:dark}[data-theme="auto"]{color-scheme:light dark}
6
+ .dark,[data-theme="dark"]{--color-brand-50:var(--zabi-brand-950);--color-brand-100:var(--zabi-brand-900);--color-brand-200:var(--zabi-brand-800);--color-brand-300:var(--zabi-brand-700);--color-brand-400:var(--zabi-brand-600);--color-brand-500:var(--zabi-brand-500);--color-brand-600:var(--zabi-brand-400);--color-brand-700:var(--zabi-brand-300);--color-brand-800:var(--zabi-brand-200);--color-brand-900:var(--zabi-brand-100);--color-brand-950:var(--zabi-brand-50);--color-citron-50:var(--zabi-citron-950);--color-citron-100:var(--zabi-citron-900);--color-citron-200:var(--zabi-citron-800);--color-citron-300:var(--zabi-citron-700);--color-citron-400:var(--zabi-citron-600);--color-citron-500:var(--zabi-citron-500);--color-citron-600:var(--zabi-citron-400);--color-citron-700:var(--zabi-citron-300);--color-citron-800:var(--zabi-citron-200);--color-citron-900:var(--zabi-citron-100);--color-citron-950:var(--zabi-citron-50);--color-accent-50:var(--zabi-accent-950);--color-accent-100:var(--zabi-accent-900);--color-accent-200:var(--zabi-accent-800);--color-accent-300:var(--zabi-accent-700);--color-accent-400:var(--zabi-accent-600);--color-accent-500:var(--zabi-accent-500);--color-accent-600:var(--zabi-accent-400);--color-accent-700:var(--zabi-accent-300);--color-accent-800:var(--zabi-accent-200);--color-accent-900:var(--zabi-accent-100);--color-accent-950:var(--zabi-accent-50);--color-pine-50:var(--zabi-pine-950);--color-pine-100:var(--zabi-pine-900);--color-pine-200:var(--zabi-pine-800);--color-pine-300:var(--zabi-pine-700);--color-pine-400:var(--zabi-pine-600);--color-pine-500:var(--zabi-pine-500);--color-pine-600:var(--zabi-pine-400);--color-pine-700:var(--zabi-pine-300);--color-pine-800:var(--zabi-pine-200);--color-pine-900:var(--zabi-pine-100);--color-pine-950:var(--zabi-pine-50);--color-iris-50:var(--zabi-iris-950);--color-iris-100:var(--zabi-iris-900);--color-iris-200:var(--zabi-iris-800);--color-iris-300:var(--zabi-iris-700);--color-iris-400:var(--zabi-iris-600);--color-iris-500:var(--zabi-iris-500);--color-iris-600:var(--zabi-iris-400);--color-iris-700:var(--zabi-iris-300);--color-iris-800:var(--zabi-iris-200);--color-iris-900:var(--zabi-iris-100);--color-iris-950:var(--zabi-iris-50);--color-warning-50:var(--zabi-warning-950);--color-warning-100:var(--zabi-warning-900);--color-warning-200:var(--zabi-warning-800);--color-warning-300:var(--zabi-warning-700);--color-warning-400:var(--zabi-warning-600);--color-warning-500:var(--zabi-warning-500);--color-warning-600:var(--zabi-warning-400);--color-warning-700:var(--zabi-warning-300);--color-warning-800:var(--zabi-warning-200);--color-warning-900:var(--zabi-warning-100);--color-warning-950:var(--zabi-warning-50);--color-error-50:var(--zabi-error-950);--color-error-100:var(--zabi-error-900);--color-error-200:var(--zabi-error-800);--color-error-300:var(--zabi-error-700);--color-error-400:var(--zabi-error-600);--color-error-500:var(--zabi-error-500);--color-error-600:var(--zabi-error-400);--color-error-700:var(--zabi-error-300);--color-error-800:var(--zabi-error-200);--color-error-900:var(--zabi-error-100);--color-error-950:var(--zabi-error-50);--color-base-50:var(--zabi-base-950);--color-base-75:var(--zabi-base-925);--color-base-100:var(--zabi-base-900);--color-base-150:var(--zabi-base-850);--color-base-200:var(--zabi-base-800);--color-base-250:var(--zabi-base-750);--color-base-300:var(--zabi-base-700);--color-base-350:var(--zabi-base-650);--color-base-400:var(--zabi-base-600);--color-base-450:var(--zabi-base-550);--color-base-500:var(--zabi-base-500);--color-base-550:var(--zabi-base-450);--color-base-600:var(--zabi-base-400);--color-base-650:var(--zabi-base-350);--color-base-700:var(--zabi-base-300);--color-base-750:var(--zabi-base-250);--color-base-800:var(--zabi-base-200);--color-base-850:var(--zabi-base-150);--color-base-900:var(--zabi-base-100);--color-base-925:var(--zabi-base-75);--color-base-950:var(--zabi-base-50);--color-surface-base:var(--zabi-base-900);--color-surface-raised:var(--zabi-base-850);--color-surface-elevated:var(--zabi-base-800);--color-surface-overlay:var(--zabi-base-800);--color-surface-overlay-hover:var(--zabi-base-750);--color-surface-inset:var(--zabi-base-900);--color-surface-chrome:var(--color-surface-base);--color-bar:var(--color-surface-chrome);--color-bar-border:color-mix(in srgb, var(--color-headline) 10%, transparent);--color-bar-brand:var(--color-action-primary);--color-tabbar-active:var(--color-nav-menu-active);--color-neutral-subtle:var(--color-base-300);--color-neutral-border:var(--color-base-200);--color-border-overlay:var(--color-base-450);--color-background:var(--color-surface-base);--color-background-tertiary:var(--color-base-100);--color-page:var(--color-surface-base);--color-card:var(--color-surface-raised);--color-card-hover:var(--color-surface-elevated);--color-card-active:var(--color-surface-overlay-hover);--color-card-elevated:var(--color-surface-elevated);--color-card-tint:color-mix(in srgb, var(--zabi-brand-500) 8%, var(--color-surface-raised));--color-card-flat:color-mix(in srgb, var(--zabi-base-50) 7%, transparent);--color-card-flat-hover:color-mix(in srgb, var(--zabi-base-50) 11%, transparent);--color-card-flat-active:color-mix(in srgb, var(--zabi-base-50) 15%, transparent);--color-surface-1:var(--color-surface-raised);--color-surface-2:var(--color-surface-elevated);--color-surface-3:var(--color-surface-overlay);--color-surface-4:var(--color-surface-overlay-hover);--color-description:var(--color-base-700);--color-caption:var(--color-base-650);--color-surface-hover:rgba(250, 250, 250, 0.08);--color-surface-active:rgba(250, 250, 250, 0.14);--color-overlay:rgba(0, 0, 0, 0.7);--color-input:color-mix(in srgb, var(--zabi-base-50) 7%, transparent);--color-input-solid:var(--color-surface-inset);--color-input-solid-hover:var(--color-base-200);--color-input-solid-focus:var(--color-base-150);--color-input-solid-active:color-mix(in srgb, var(--zabi-base-50) 10%, var(--color-surface-inset));--color-progress-fill:var(--color-action-primary);--color-progress-track:var(--color-base-75);--color-progress-track-border:var(--color-input-border);--color-input-border:var(--color-base-500);--color-input-border-hover:var(--color-input-border);--color-border:var(--color-base-250);--color-border-weak:var(--color-base-250);--color-toggle-track:var(--color-base-300);--color-toggle-track-hover:var(--color-base-350);--color-toggle-track-active:var(--color-base-400);--color-toggle-track-border:var(--color-input-border);--color-toggle-knob:var(--color-base-700);--color-toggle-knob-checked:var(--color-action-primary-text);--color-input-hover:color-mix(in srgb, var(--zabi-base-50) 10%, transparent);--color-input-active:color-mix(in srgb, var(--zabi-base-50) 15%, transparent);--color-input-focus:color-mix(in srgb, var(--zabi-base-50) 7%, transparent);--color-input-disabled:var(--color-base-75);--color-input-placeholder:color-mix(in srgb, var(--zabi-base-350) 40%, var(--zabi-base-400));--color-control-border:var(--color-base-600);--color-segment-thumb:var(--color-base-400);--color-segment-thumb-text:var(--color-headline);--color-segment-thumb-border:var(--color-control-border);--color-focus:var(--color-brand-600);--color-focus-weak:var(--color-brand-700);--color-focus-medium:var(--color-brand-800);--color-focus-strong:var(--color-brand-900);--color-focus-ring-muted:var(--color-base-600);--color-success-subtle:color-mix(in srgb, var(--zabi-pine-500) 16%, var(--color-surface-raised));--color-success-border:color-mix(in srgb, var(--zabi-pine-500) 36%, var(--color-surface-raised));--color-warning-subtle:color-mix(in srgb, var(--zabi-warning-500) 16%, var(--color-surface-raised));--color-warning-border:color-mix(in srgb, var(--zabi-warning-500) 36%, var(--color-surface-raised));--color-error-subtle:color-mix(in srgb, var(--zabi-error-500) 16%, var(--color-surface-raised));--color-error-border:color-mix(in srgb, var(--zabi-error-500) 36%, var(--color-surface-raised));--color-energetic-subtle:color-mix(in srgb, var(--zabi-citron-500) 16%, var(--color-surface-raised));--color-energetic-border:color-mix(in srgb, var(--zabi-citron-500) 36%, var(--color-surface-raised));--color-accent-subtle:color-mix(in srgb, var(--zabi-accent-500) 16%, var(--color-surface-raised));--color-accent-border:color-mix(in srgb, var(--zabi-accent-500) 36%, var(--color-surface-raised));--color-on-accent:var(--zabi-on-accent-dark);--color-info-subtle:color-mix(in srgb, var(--zabi-iris-500) 16%, var(--color-surface-raised));--color-info-border:color-mix(in srgb, var(--zabi-iris-500) 36%, var(--color-surface-raised));--color-neutral:var(--color-base-600);--color-action-primary:var(--zabi-brand-600);--color-action-primary-hover:var(--zabi-brand-700);--color-action-primary-active:var(--zabi-brand-800);--color-on-brand:var(--zabi-on-brand-dark);--color-action-primary-text:var(--color-on-brand);--color-action-primary-subtle:var(--color-brand-100);--color-action-primary-subtle-hover:var(--color-brand-200);--color-action-primary-border:var(--color-brand-200);--color-action-primary-subtle-active:color-mix(in srgb, var(--color-brand-300) 50%, var(--color-brand-200));--color-action-secondary:rgba(250, 250, 250, 0.09);--color-action-secondary-hover:rgba(250, 250, 250, 0.15);--color-action-secondary-active:rgba(250, 250, 250, 0.21);--color-action-tonal:var(--color-action-primary-subtle);--color-action-tonal-hover:var(--color-action-primary-subtle-hover);--color-action-tonal-active:color-mix(in srgb, var(--color-brand-300) 50%, var(--color-brand-200));--color-action-tonal-text:var(--color-brand-800);--color-chip:var(--zabi-base-750);--color-chip-hover:var(--zabi-base-700);--color-chip-active:var(--zabi-base-650);--color-chip-text:var(--color-headline);--color-chip-selected:var(--color-action-tonal);--color-chip-selected-hover:var(--color-action-tonal-hover);--color-chip-selected-active:var(--color-action-tonal-active);--color-chip-selected-text:var(--color-action-tonal-text);--color-action-outline-border:var(--color-input-border);--color-action-outline-border-hover:var(--color-input-border-hover);--color-action-disabled:var(--color-base-200);--color-action-disabled-border:var(--color-base-250);--color-action-danger:var(--zabi-error-600);--color-action-danger-hover:var(--zabi-error-700);--color-action-danger-active:var(--zabi-error-800);--color-action-danger-subtle:var(--color-error-subtle);--color-action-danger-subtle-hover:color-mix(in srgb, var(--zabi-error-500) 20%, var(--color-surface-raised));--color-action-danger-subtle-active:color-mix(in srgb, var(--zabi-error-500) 32%, var(--color-surface-raised));--color-action-danger-text:var(--zabi-error-50);--shadow-color:0 0 0;--shadow-opacity:0.5;--shadow-opacity-contact:0.4;--shadow-sm:0 1px 2px 0 rgb(var(--shadow-color) / var(--shadow-opacity-contact)), 0 2px 6px -1px rgb(var(--shadow-color) / var(--shadow-opacity));--shadow-md:0 1px 3px 0 rgb(var(--shadow-color) / var(--shadow-opacity-contact)), 0 6px 14px -2px rgb(var(--shadow-color) / var(--shadow-opacity));--shadow-lg:0 1px 2px 0 rgb(var(--shadow-color) / var(--shadow-opacity-contact)), 0 10px 30px 0 rgb(var(--shadow-color) / var(--shadow-opacity));--shadow-xl:0 2px 4px 0 rgb(var(--shadow-color) / var(--shadow-opacity-contact)), 0 20px 50px -8px rgb(var(--shadow-color) / var(--shadow-opacity));--shadow-material:0 1px 2px 0 rgb(var(--shadow-color) / var(--shadow-opacity-contact)), 0 10px 30px 0 rgb(var(--shadow-color) / var(--shadow-opacity));--material-backdrop-brightness:0.6;--material-alpha-thin:60%;--material-alpha-regular:68%;--material-alpha-thick:72%;--material-filter-thin:blur(var(--material-blur-thin)) saturate(var(--material-saturate)) brightness(var(--material-backdrop-brightness));--material-filter-regular:blur(var(--material-blur-regular)) saturate(var(--material-saturate)) brightness(var(--material-backdrop-brightness));--material-filter-thick:blur(var(--material-blur-thick)) saturate(var(--material-saturate)) brightness(var(--material-backdrop-brightness));--color-material-highlight:color-mix(in srgb, var(--zabi-base-50) 14%, transparent);--color-material-rim:color-mix(in srgb, var(--zabi-base-50) 14%, transparent);--gradient-canvas-strength:25%;--gradient-control-top-strength:0%;--gradient-control-bottom-strength:14%;--gradient-control-accent-top-strength:22%;--gradient-control-accent-bottom-strength:6%;--shadow-control-highlight:inset 0 1px 0 color-mix(in srgb, var(--zabi-base-50) 25%, transparent);color-scheme:dark;}
7
+ @media (prefers-color-scheme: dark){[data-theme="auto"]{--color-brand-50:var(--zabi-brand-950);--color-brand-100:var(--zabi-brand-900);--color-brand-200:var(--zabi-brand-800);--color-brand-300:var(--zabi-brand-700);--color-brand-400:var(--zabi-brand-600);--color-brand-500:var(--zabi-brand-500);--color-brand-600:var(--zabi-brand-400);--color-brand-700:var(--zabi-brand-300);--color-brand-800:var(--zabi-brand-200);--color-brand-900:var(--zabi-brand-100);--color-brand-950:var(--zabi-brand-50);--color-citron-50:var(--zabi-citron-950);--color-citron-100:var(--zabi-citron-900);--color-citron-200:var(--zabi-citron-800);--color-citron-300:var(--zabi-citron-700);--color-citron-400:var(--zabi-citron-600);--color-citron-500:var(--zabi-citron-500);--color-citron-600:var(--zabi-citron-400);--color-citron-700:var(--zabi-citron-300);--color-citron-800:var(--zabi-citron-200);--color-citron-900:var(--zabi-citron-100);--color-citron-950:var(--zabi-citron-50);--color-accent-50:var(--zabi-accent-950);--color-accent-100:var(--zabi-accent-900);--color-accent-200:var(--zabi-accent-800);--color-accent-300:var(--zabi-accent-700);--color-accent-400:var(--zabi-accent-600);--color-accent-500:var(--zabi-accent-500);--color-accent-600:var(--zabi-accent-400);--color-accent-700:var(--zabi-accent-300);--color-accent-800:var(--zabi-accent-200);--color-accent-900:var(--zabi-accent-100);--color-accent-950:var(--zabi-accent-50);--color-pine-50:var(--zabi-pine-950);--color-pine-100:var(--zabi-pine-900);--color-pine-200:var(--zabi-pine-800);--color-pine-300:var(--zabi-pine-700);--color-pine-400:var(--zabi-pine-600);--color-pine-500:var(--zabi-pine-500);--color-pine-600:var(--zabi-pine-400);--color-pine-700:var(--zabi-pine-300);--color-pine-800:var(--zabi-pine-200);--color-pine-900:var(--zabi-pine-100);--color-pine-950:var(--zabi-pine-50);--color-iris-50:var(--zabi-iris-950);--color-iris-100:var(--zabi-iris-900);--color-iris-200:var(--zabi-iris-800);--color-iris-300:var(--zabi-iris-700);--color-iris-400:var(--zabi-iris-600);--color-iris-500:var(--zabi-iris-500);--color-iris-600:var(--zabi-iris-400);--color-iris-700:var(--zabi-iris-300);--color-iris-800:var(--zabi-iris-200);--color-iris-900:var(--zabi-iris-100);--color-iris-950:var(--zabi-iris-50);--color-warning-50:var(--zabi-warning-950);--color-warning-100:var(--zabi-warning-900);--color-warning-200:var(--zabi-warning-800);--color-warning-300:var(--zabi-warning-700);--color-warning-400:var(--zabi-warning-600);--color-warning-500:var(--zabi-warning-500);--color-warning-600:var(--zabi-warning-400);--color-warning-700:var(--zabi-warning-300);--color-warning-800:var(--zabi-warning-200);--color-warning-900:var(--zabi-warning-100);--color-warning-950:var(--zabi-warning-50);--color-error-50:var(--zabi-error-950);--color-error-100:var(--zabi-error-900);--color-error-200:var(--zabi-error-800);--color-error-300:var(--zabi-error-700);--color-error-400:var(--zabi-error-600);--color-error-500:var(--zabi-error-500);--color-error-600:var(--zabi-error-400);--color-error-700:var(--zabi-error-300);--color-error-800:var(--zabi-error-200);--color-error-900:var(--zabi-error-100);--color-error-950:var(--zabi-error-50);--color-base-50:var(--zabi-base-950);--color-base-75:var(--zabi-base-925);--color-base-100:var(--zabi-base-900);--color-base-150:var(--zabi-base-850);--color-base-200:var(--zabi-base-800);--color-base-250:var(--zabi-base-750);--color-base-300:var(--zabi-base-700);--color-base-350:var(--zabi-base-650);--color-base-400:var(--zabi-base-600);--color-base-450:var(--zabi-base-550);--color-base-500:var(--zabi-base-500);--color-base-550:var(--zabi-base-450);--color-base-600:var(--zabi-base-400);--color-base-650:var(--zabi-base-350);--color-base-700:var(--zabi-base-300);--color-base-750:var(--zabi-base-250);--color-base-800:var(--zabi-base-200);--color-base-850:var(--zabi-base-150);--color-base-900:var(--zabi-base-100);--color-base-925:var(--zabi-base-75);--color-base-950:var(--zabi-base-50);--color-surface-base:var(--zabi-base-900);--color-surface-raised:var(--zabi-base-850);--color-surface-elevated:var(--zabi-base-800);--color-surface-overlay:var(--zabi-base-800);--color-surface-overlay-hover:var(--zabi-base-750);--color-surface-inset:var(--zabi-base-900);--color-surface-chrome:var(--color-surface-base);--color-bar:var(--color-surface-chrome);--color-bar-border:color-mix(in srgb, var(--color-headline) 10%, transparent);--color-bar-brand:var(--color-action-primary);--color-tabbar-active:var(--color-nav-menu-active);--color-neutral-subtle:var(--color-base-300);--color-neutral-border:var(--color-base-200);--color-border-overlay:var(--color-base-450);--color-background:var(--color-surface-base);--color-background-tertiary:var(--color-base-100);--color-page:var(--color-surface-base);--color-card:var(--color-surface-raised);--color-card-hover:var(--color-surface-elevated);--color-card-active:var(--color-surface-overlay-hover);--color-card-elevated:var(--color-surface-elevated);--color-card-tint:color-mix(in srgb, var(--zabi-brand-500) 8%, var(--color-surface-raised));--color-card-flat:color-mix(in srgb, var(--zabi-base-50) 7%, transparent);--color-card-flat-hover:color-mix(in srgb, var(--zabi-base-50) 11%, transparent);--color-card-flat-active:color-mix(in srgb, var(--zabi-base-50) 15%, transparent);--color-surface-1:var(--color-surface-raised);--color-surface-2:var(--color-surface-elevated);--color-surface-3:var(--color-surface-overlay);--color-surface-4:var(--color-surface-overlay-hover);--color-description:var(--color-base-700);--color-caption:var(--color-base-650);--color-surface-hover:rgba(250, 250, 250, 0.08);--color-surface-active:rgba(250, 250, 250, 0.14);--color-overlay:rgba(0, 0, 0, 0.7);--color-input:color-mix(in srgb, var(--zabi-base-50) 7%, transparent);--color-input-solid:var(--color-surface-inset);--color-input-solid-hover:var(--color-base-200);--color-input-solid-focus:var(--color-base-150);--color-input-solid-active:color-mix(in srgb, var(--zabi-base-50) 10%, var(--color-surface-inset));--color-progress-fill:var(--color-action-primary);--color-progress-track:var(--color-base-75);--color-progress-track-border:var(--color-input-border);--color-input-border:var(--color-base-500);--color-input-border-hover:var(--color-input-border);--color-border:var(--color-base-250);--color-border-weak:var(--color-base-250);--color-toggle-track:var(--color-base-300);--color-toggle-track-hover:var(--color-base-350);--color-toggle-track-active:var(--color-base-400);--color-toggle-track-border:var(--color-input-border);--color-toggle-knob:var(--color-base-700);--color-toggle-knob-checked:var(--color-action-primary-text);--color-input-hover:color-mix(in srgb, var(--zabi-base-50) 10%, transparent);--color-input-active:color-mix(in srgb, var(--zabi-base-50) 15%, transparent);--color-input-focus:color-mix(in srgb, var(--zabi-base-50) 7%, transparent);--color-input-disabled:var(--color-base-75);--color-input-placeholder:color-mix(in srgb, var(--zabi-base-350) 40%, var(--zabi-base-400));--color-control-border:var(--color-base-600);--color-segment-thumb:var(--color-base-400);--color-segment-thumb-text:var(--color-headline);--color-segment-thumb-border:var(--color-control-border);--color-focus:var(--color-brand-600);--color-focus-weak:var(--color-brand-700);--color-focus-medium:var(--color-brand-800);--color-focus-strong:var(--color-brand-900);--color-focus-ring-muted:var(--color-base-600);--color-success-subtle:color-mix(in srgb, var(--zabi-pine-500) 16%, var(--color-surface-raised));--color-success-border:color-mix(in srgb, var(--zabi-pine-500) 36%, var(--color-surface-raised));--color-warning-subtle:color-mix(in srgb, var(--zabi-warning-500) 16%, var(--color-surface-raised));--color-warning-border:color-mix(in srgb, var(--zabi-warning-500) 36%, var(--color-surface-raised));--color-error-subtle:color-mix(in srgb, var(--zabi-error-500) 16%, var(--color-surface-raised));--color-error-border:color-mix(in srgb, var(--zabi-error-500) 36%, var(--color-surface-raised));--color-energetic-subtle:color-mix(in srgb, var(--zabi-citron-500) 16%, var(--color-surface-raised));--color-energetic-border:color-mix(in srgb, var(--zabi-citron-500) 36%, var(--color-surface-raised));--color-accent-subtle:color-mix(in srgb, var(--zabi-accent-500) 16%, var(--color-surface-raised));--color-accent-border:color-mix(in srgb, var(--zabi-accent-500) 36%, var(--color-surface-raised));--color-on-accent:var(--zabi-on-accent-dark);--color-info-subtle:color-mix(in srgb, var(--zabi-iris-500) 16%, var(--color-surface-raised));--color-info-border:color-mix(in srgb, var(--zabi-iris-500) 36%, var(--color-surface-raised));--color-neutral:var(--color-base-600);--color-action-primary:var(--zabi-brand-600);--color-action-primary-hover:var(--zabi-brand-700);--color-action-primary-active:var(--zabi-brand-800);--color-on-brand:var(--zabi-on-brand-dark);--color-action-primary-text:var(--color-on-brand);--color-action-primary-subtle:var(--color-brand-100);--color-action-primary-subtle-hover:var(--color-brand-200);--color-action-primary-border:var(--color-brand-200);--color-action-primary-subtle-active:color-mix(in srgb, var(--color-brand-300) 50%, var(--color-brand-200));--color-action-secondary:rgba(250, 250, 250, 0.09);--color-action-secondary-hover:rgba(250, 250, 250, 0.15);--color-action-secondary-active:rgba(250, 250, 250, 0.21);--color-action-tonal:var(--color-action-primary-subtle);--color-action-tonal-hover:var(--color-action-primary-subtle-hover);--color-action-tonal-active:color-mix(in srgb, var(--color-brand-300) 50%, var(--color-brand-200));--color-action-tonal-text:var(--color-brand-800);--color-chip:var(--zabi-base-750);--color-chip-hover:var(--zabi-base-700);--color-chip-active:var(--zabi-base-650);--color-chip-text:var(--color-headline);--color-chip-selected:var(--color-action-tonal);--color-chip-selected-hover:var(--color-action-tonal-hover);--color-chip-selected-active:var(--color-action-tonal-active);--color-chip-selected-text:var(--color-action-tonal-text);--color-action-outline-border:var(--color-input-border);--color-action-outline-border-hover:var(--color-input-border-hover);--color-action-disabled:var(--color-base-200);--color-action-disabled-border:var(--color-base-250);--color-action-danger:var(--zabi-error-600);--color-action-danger-hover:var(--zabi-error-700);--color-action-danger-active:var(--zabi-error-800);--color-action-danger-subtle:var(--color-error-subtle);--color-action-danger-subtle-hover:color-mix(in srgb, var(--zabi-error-500) 20%, var(--color-surface-raised));--color-action-danger-subtle-active:color-mix(in srgb, var(--zabi-error-500) 32%, var(--color-surface-raised));--color-action-danger-text:var(--zabi-error-50);--shadow-color:0 0 0;--shadow-opacity:0.5;--shadow-opacity-contact:0.4;--shadow-sm:0 1px 2px 0 rgb(var(--shadow-color) / var(--shadow-opacity-contact)), 0 2px 6px -1px rgb(var(--shadow-color) / var(--shadow-opacity));--shadow-md:0 1px 3px 0 rgb(var(--shadow-color) / var(--shadow-opacity-contact)), 0 6px 14px -2px rgb(var(--shadow-color) / var(--shadow-opacity));--shadow-lg:0 1px 2px 0 rgb(var(--shadow-color) / var(--shadow-opacity-contact)), 0 10px 30px 0 rgb(var(--shadow-color) / var(--shadow-opacity));--shadow-xl:0 2px 4px 0 rgb(var(--shadow-color) / var(--shadow-opacity-contact)), 0 20px 50px -8px rgb(var(--shadow-color) / var(--shadow-opacity));--shadow-material:0 1px 2px 0 rgb(var(--shadow-color) / var(--shadow-opacity-contact)), 0 10px 30px 0 rgb(var(--shadow-color) / var(--shadow-opacity));--material-backdrop-brightness:0.6;--material-alpha-thin:60%;--material-alpha-regular:68%;--material-alpha-thick:72%;--material-filter-thin:blur(var(--material-blur-thin)) saturate(var(--material-saturate)) brightness(var(--material-backdrop-brightness));--material-filter-regular:blur(var(--material-blur-regular)) saturate(var(--material-saturate)) brightness(var(--material-backdrop-brightness));--material-filter-thick:blur(var(--material-blur-thick)) saturate(var(--material-saturate)) brightness(var(--material-backdrop-brightness));--color-material-highlight:color-mix(in srgb, var(--zabi-base-50) 14%, transparent);--color-material-rim:color-mix(in srgb, var(--zabi-base-50) 14%, transparent);--gradient-canvas-strength:25%;--gradient-control-top-strength:0%;--gradient-control-bottom-strength:14%;--gradient-control-accent-top-strength:22%;--gradient-control-accent-bottom-strength:6%;--shadow-control-highlight:inset 0 1px 0 color-mix(in srgb, var(--zabi-base-50) 25%, transparent);color-scheme:dark;}}
8
+ @media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) { :root:root { --color-material-thin: var(--color-surface-chrome); --color-material-regular: var(--color-surface-chrome); --color-material-thick: var(--color-surface-overlay); --material-filter-thin: none; --material-filter-regular: none; --material-filter-thick: none; } }
9
+ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root:root { --color-material-thin: var(--color-surface-chrome); --color-material-regular: var(--color-surface-chrome); --color-material-thick: var(--color-surface-overlay); --material-filter-thin: none; --material-filter-regular: none; --material-filter-thick: none; } }
10
+ [data-materials="opaque"][data-materials="opaque"] { --color-material-thin: var(--color-surface-chrome); --color-material-regular: var(--color-surface-chrome); --color-material-thick: var(--color-surface-overlay); --material-filter-thin: none; --material-filter-regular: none; --material-filter-thick: none; }
11
+ @supports (transition-timing-function: linear(0, 1)) { :root { --ease-spring: linear(0, 0.14, 0.409, 0.668, 0.859, 0.974, 1.029, 1.046, 1.041, 1.03, 1.017, 1.008, 1.002, 0.999, 0.998, 0.998, 1); } }
12
+ @media (prefers-reduced-motion: reduce) { :root:root { --duration-fast: 0s; --duration-base: 0s; --duration-moderate: 0s; --duration-slow: 0s; --ease-spring: var(--ease-standard); } }