@askrjs/themes 0.0.3 → 0.0.6

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 (607) hide show
  1. package/README.md +78 -0
  2. package/THEMING.md +50 -8
  3. package/dist/{_internal → components/_internal}/box-layout.js +4 -3
  4. package/dist/components/_internal/box-layout.js.map +1 -0
  5. package/dist/components/_internal/classes.js.map +1 -0
  6. package/dist/components/_internal/jsx.js.map +1 -0
  7. package/dist/components/_internal/layout.d.ts +6 -28
  8. package/dist/{_internal → components/_internal}/layout.js +7 -16
  9. package/dist/components/_internal/layout.js.map +1 -0
  10. package/dist/{_internal → components/_internal}/merge-props.js +5 -0
  11. package/dist/components/_internal/merge-props.js.map +1 -0
  12. package/dist/components/_internal/pathname.js +39 -0
  13. package/dist/components/_internal/pathname.js.map +1 -0
  14. package/dist/components/_internal/style.js +41 -0
  15. package/dist/components/_internal/style.js.map +1 -0
  16. package/dist/components/alert/alert.d.ts +7 -0
  17. package/dist/components/alert/alert.js +65 -0
  18. package/dist/components/alert/alert.js.map +1 -0
  19. package/dist/components/alert/alert.types.d.ts +22 -0
  20. package/dist/components/alert/index.d.ts +2 -0
  21. package/dist/components/aspect-ratio/aspect-ratio.d.ts +8 -3
  22. package/dist/components/aspect-ratio/aspect-ratio.js +33 -0
  23. package/dist/components/aspect-ratio/aspect-ratio.js.map +1 -0
  24. package/dist/components/aspect-ratio/aspect-ratio.types.d.ts +18 -12
  25. package/dist/components/aspect-ratio/index.d.ts +2 -2
  26. package/dist/components/badge/badge.a11y.d.ts +13 -9
  27. package/dist/components/badge/badge.d.ts +8 -3
  28. package/dist/{badge → components/badge}/badge.js +5 -0
  29. package/dist/components/badge/badge.js.map +1 -0
  30. package/dist/components/badge/badge.types.d.ts +18 -12
  31. package/dist/components/badge/index.d.ts +3 -3
  32. package/dist/components/block/block.a11y.d.ts +20 -0
  33. package/dist/components/block/block.d.ts +9 -0
  34. package/dist/components/block/block.js +66 -0
  35. package/dist/components/block/block.js.map +1 -0
  36. package/dist/components/block/block.types.d.ts +38 -0
  37. package/dist/components/block/index.d.ts +3 -0
  38. package/dist/components/box/box.a11y.d.ts +13 -9
  39. package/dist/components/box/box.d.ts +9 -4
  40. package/dist/{box → components/box}/box.js +3 -2
  41. package/dist/components/box/box.js.map +1 -0
  42. package/dist/components/box/box.types.d.ts +67 -61
  43. package/dist/components/box/index.d.ts +3 -3
  44. package/dist/components/breadcrumb/breadcrumb.a11y.d.ts +13 -9
  45. package/dist/components/breadcrumb/breadcrumb.a11y.js +15 -0
  46. package/dist/components/breadcrumb/breadcrumb.a11y.js.map +1 -0
  47. package/dist/components/breadcrumb/breadcrumb.d.ts +18 -13
  48. package/dist/components/breadcrumb/breadcrumb.js.map +1 -0
  49. package/dist/components/breadcrumb/breadcrumb.types.d.ts +64 -58
  50. package/dist/components/breadcrumb/index.d.ts +3 -3
  51. package/dist/components/button-group/button-group.d.ts +7 -0
  52. package/dist/components/button-group/button-group.js +20 -0
  53. package/dist/components/button-group/button-group.js.map +1 -0
  54. package/dist/components/button-group/button-group.types.d.ts +14 -0
  55. package/dist/components/button-group/index.d.ts +2 -0
  56. package/dist/components/card/card.d.ts +13 -7
  57. package/dist/components/card/card.js +95 -0
  58. package/dist/components/card/card.js.map +1 -0
  59. package/dist/components/card/card.types.d.ts +32 -24
  60. package/dist/components/card/index.d.ts +2 -2
  61. package/dist/components/close/close.d.ts +7 -0
  62. package/dist/components/close/close.js +22 -0
  63. package/dist/components/close/close.js.map +1 -0
  64. package/dist/components/close/close.types.d.ts +10 -0
  65. package/dist/components/close/index.d.ts +2 -0
  66. package/dist/components/container/container.a11y.d.ts +18 -15
  67. package/dist/components/container/container.d.ts +8 -3
  68. package/dist/{container → components/container}/container.js +10 -10
  69. package/dist/components/container/container.js.map +1 -0
  70. package/dist/components/container/container.types.d.ts +25 -26
  71. package/dist/components/container/index.d.ts +3 -3
  72. package/dist/components/empty-state/empty-state.d.ts +7 -2
  73. package/dist/components/empty-state/empty-state.js.map +1 -0
  74. package/dist/components/empty-state/empty-state.types.d.ts +15 -8
  75. package/dist/components/empty-state/index.d.ts +2 -2
  76. package/dist/components/field/field.d.ts +9 -0
  77. package/dist/components/field/field.js +41 -0
  78. package/dist/components/field/field.js.map +1 -0
  79. package/dist/components/field/field.types.d.ts +20 -0
  80. package/dist/components/field/index.d.ts +2 -0
  81. package/dist/components/flex/flex.a11y.d.ts +21 -17
  82. package/dist/components/flex/flex.d.ts +9 -4
  83. package/dist/{flex → components/flex}/flex.js +3 -2
  84. package/dist/components/flex/flex.js.map +1 -0
  85. package/dist/components/flex/flex.types.d.ts +38 -37
  86. package/dist/components/flex/index.d.ts +3 -3
  87. package/dist/components/header/header.a11y.d.ts +13 -9
  88. package/dist/components/header/header.a11y.js +12 -0
  89. package/dist/components/header/header.a11y.js.map +1 -0
  90. package/dist/components/header/header.d.ts +7 -2
  91. package/dist/components/header/header.js.map +1 -0
  92. package/dist/components/header/header.types.d.ts +8 -4
  93. package/dist/components/inline/index.d.ts +8 -6
  94. package/dist/components/inline/index.js.map +1 -0
  95. package/dist/components/input-group/index.d.ts +2 -0
  96. package/dist/components/input-group/input-group.d.ts +9 -0
  97. package/dist/components/input-group/input-group.js +39 -0
  98. package/dist/components/input-group/input-group.js.map +1 -0
  99. package/dist/components/input-group/input-group.types.d.ts +26 -0
  100. package/dist/components/list-group/index.d.ts +2 -0
  101. package/dist/components/list-group/list-group.d.ts +9 -0
  102. package/dist/components/list-group/list-group.js +43 -0
  103. package/dist/components/list-group/list-group.js.map +1 -0
  104. package/dist/components/list-group/list-group.types.d.ts +32 -0
  105. package/dist/components/nav/index.d.ts +2 -0
  106. package/dist/components/nav/nav.d.ts +13 -0
  107. package/dist/components/nav/nav.js +113 -0
  108. package/dist/components/nav/nav.js.map +1 -0
  109. package/dist/components/nav/nav.types.d.ts +56 -0
  110. package/dist/components/navbar/index.d.ts +5 -2
  111. package/dist/components/navbar/navbar-panel.js +48 -0
  112. package/dist/components/navbar/navbar-panel.js.map +1 -0
  113. package/dist/components/navbar/navbar.context.js +13 -0
  114. package/dist/components/navbar/navbar.context.js.map +1 -0
  115. package/dist/components/navbar/navbar.d.ts +45 -7
  116. package/dist/components/navbar/navbar.js +221 -0
  117. package/dist/components/navbar/navbar.js.map +1 -0
  118. package/dist/components/navbar/navbar.render.js +26 -0
  119. package/dist/components/navbar/navbar.render.js.map +1 -0
  120. package/dist/components/navbar/navbar.shared.js +18 -0
  121. package/dist/components/navbar/navbar.shared.js.map +1 -0
  122. package/dist/components/navbar/navbar.types.d.ts +29 -22
  123. package/dist/components/overlays/dropdown-content.d.ts +8 -0
  124. package/dist/components/overlays/dropdown-content.js +18 -0
  125. package/dist/components/overlays/dropdown-content.js.map +1 -0
  126. package/dist/components/pagination/index.d.ts +2 -0
  127. package/dist/components/pagination/pagination.d.ts +11 -0
  128. package/dist/components/pagination/pagination.js +95 -0
  129. package/dist/components/pagination/pagination.js.map +1 -0
  130. package/dist/components/pagination/pagination.types.d.ts +40 -0
  131. package/dist/components/section/index.d.ts +3 -3
  132. package/dist/components/section/section.a11y.d.ts +14 -10
  133. package/dist/components/section/section.d.ts +8 -3
  134. package/dist/{section → components/section}/section.js +3 -2
  135. package/dist/components/section/section.js.map +1 -0
  136. package/dist/components/section/section.types.d.ts +20 -14
  137. package/dist/components/separator/index.d.ts +3 -3
  138. package/dist/components/separator/separator.a11y.d.ts +13 -9
  139. package/dist/components/separator/separator.a11y.js +15 -0
  140. package/dist/components/separator/separator.a11y.js.map +1 -0
  141. package/dist/components/separator/separator.d.ts +8 -3
  142. package/dist/components/separator/separator.js.map +1 -0
  143. package/dist/components/separator/separator.types.d.ts +19 -13
  144. package/dist/components/shell/index.d.ts +3 -0
  145. package/dist/components/shell/shell-nav.types.d.ts +7 -0
  146. package/dist/components/shell/shell-panel.js +54 -0
  147. package/dist/components/shell/shell-panel.js.map +1 -0
  148. package/dist/components/shell/shell-responsive.js +110 -0
  149. package/dist/components/shell/shell-responsive.js.map +1 -0
  150. package/dist/components/shell/shell.a11y.d.ts +23 -0
  151. package/dist/components/shell/shell.a11y.js +23 -0
  152. package/dist/components/shell/shell.a11y.js.map +1 -0
  153. package/dist/components/shell/shell.d.ts +13 -0
  154. package/dist/components/shell/shell.js +69 -0
  155. package/dist/components/shell/shell.js.map +1 -0
  156. package/dist/components/shell/shell.types.d.ts +58 -0
  157. package/dist/components/sidebar/sidebar-panel.d.ts +7 -0
  158. package/dist/components/sidebar/sidebar-panel.js +59 -0
  159. package/dist/components/sidebar/sidebar-panel.js.map +1 -0
  160. package/dist/components/sidebar/sidebar-toggle.d.ts +7 -0
  161. package/dist/components/sidebar/sidebar-toggle.js +8 -0
  162. package/dist/components/sidebar/sidebar-toggle.js.map +1 -0
  163. package/dist/components/sidebar/sidebar.context.js +21 -0
  164. package/dist/components/sidebar/sidebar.context.js.map +1 -0
  165. package/dist/components/sidebar/sidebar.d.ts +7 -0
  166. package/dist/components/sidebar/sidebar.js +228 -0
  167. package/dist/components/sidebar/sidebar.js.map +1 -0
  168. package/dist/components/sidebar/sidebar.shared.js +12 -0
  169. package/dist/components/sidebar/sidebar.shared.js.map +1 -0
  170. package/dist/components/sidebar/sidebar.types.d.ts +30 -0
  171. package/dist/components/skeleton/index.d.ts +3 -3
  172. package/dist/components/skeleton/skeleton.a11y.d.ts +12 -8
  173. package/dist/components/skeleton/skeleton.d.ts +8 -3
  174. package/dist/components/skeleton/skeleton.js.map +1 -0
  175. package/dist/components/skeleton/skeleton.types.d.ts +16 -10
  176. package/dist/components/spacer/index.d.ts +3 -3
  177. package/dist/components/spacer/spacer.a11y.d.ts +16 -12
  178. package/dist/components/spacer/spacer.d.ts +8 -3
  179. package/dist/{spacer → components/spacer}/spacer.js +3 -1
  180. package/dist/components/spacer/spacer.js.map +1 -0
  181. package/dist/components/spacer/spacer.types.d.ts +23 -21
  182. package/dist/components/spinner/index.d.ts +2 -2
  183. package/dist/components/spinner/spinner.d.ts +7 -2
  184. package/dist/components/spinner/spinner.js.map +1 -0
  185. package/dist/components/spinner/spinner.types.d.ts +9 -4
  186. package/dist/components/stack/index.d.ts +3 -3
  187. package/dist/components/stack/stack.a11y.d.ts +17 -13
  188. package/dist/components/stack/stack.d.ts +8 -3
  189. package/dist/components/stack/stack.js.map +1 -0
  190. package/dist/components/stack/stack.types.d.ts +19 -13
  191. package/dist/components/theme/index.d.ts +1 -2
  192. package/dist/components/theme/theme.d.ts +41 -34
  193. package/dist/{theme → components/theme}/theme.js +33 -4
  194. package/dist/components/theme/theme.js.map +1 -0
  195. package/dist/controls.d.ts +10 -0
  196. package/dist/controls.js +7 -0
  197. package/dist/feedback.d.ts +5 -0
  198. package/dist/feedback.js +4 -0
  199. package/dist/layouts.d.ts +25 -0
  200. package/dist/layouts.js +11 -0
  201. package/dist/navs.d.ts +15 -0
  202. package/dist/navs.js +9 -0
  203. package/dist/overlays.d.ts +3 -0
  204. package/dist/overlays.js +4 -0
  205. package/dist/shells.d.ts +16 -0
  206. package/dist/shells.js +11 -0
  207. package/dist/surfaces.d.ts +16 -0
  208. package/dist/surfaces.js +9 -0
  209. package/dist/theme.d.ts +2 -0
  210. package/dist/theme.js +3 -0
  211. package/dist/themes/default/index.css +3191 -812
  212. package/package.json +63 -24
  213. package/src/components/_internal/box-layout.ts +8 -0
  214. package/src/components/_internal/jsx.ts +91 -16
  215. package/src/components/_internal/layout.ts +5 -17
  216. package/src/components/_internal/merge-props.ts +9 -0
  217. package/src/components/_internal/pathname.ts +67 -0
  218. package/src/components/_internal/style.ts +51 -0
  219. package/src/components/alert/alert.tsx +84 -0
  220. package/src/components/alert/alert.types.ts +20 -0
  221. package/src/components/alert/index.ts +2 -0
  222. package/src/components/aspect-ratio/aspect-ratio.tsx +10 -24
  223. package/src/components/aspect-ratio/aspect-ratio.types.ts +2 -1
  224. package/src/components/badge/badge.tsx +6 -0
  225. package/src/components/badge/badge.types.ts +2 -1
  226. package/src/components/block/block.a11y.ts +17 -0
  227. package/src/components/block/block.tsx +71 -0
  228. package/src/components/block/block.types.ts +60 -0
  229. package/src/components/block/index.ts +11 -0
  230. package/src/components/box/box.tsx +3 -2
  231. package/src/components/box/box.types.ts +2 -1
  232. package/src/components/breadcrumb/breadcrumb.types.ts +2 -1
  233. package/src/components/button-group/button-group.tsx +32 -0
  234. package/src/components/button-group/button-group.types.ts +12 -0
  235. package/src/components/button-group/index.ts +2 -0
  236. package/src/components/card/card.tsx +72 -43
  237. package/src/components/card/card.types.ts +6 -1
  238. package/src/components/card/index.ts +10 -1
  239. package/src/components/close/close.tsx +19 -0
  240. package/src/components/close/close.types.ts +7 -0
  241. package/src/components/close/index.ts +2 -0
  242. package/src/components/container/container.a11y.ts +0 -1
  243. package/src/components/container/container.tsx +13 -23
  244. package/src/components/container/container.types.ts +3 -4
  245. package/src/components/empty-state/empty-state.types.ts +3 -0
  246. package/src/components/field/field.tsx +36 -0
  247. package/src/components/field/field.types.ts +19 -0
  248. package/src/components/field/index.ts +2 -0
  249. package/src/components/flex/flex.tsx +4 -2
  250. package/src/components/flex/flex.types.ts +2 -1
  251. package/src/components/input-group/index.ts +7 -0
  252. package/src/components/input-group/input-group.tsx +57 -0
  253. package/src/components/input-group/input-group.types.ts +26 -0
  254. package/src/components/list-group/index.ts +7 -0
  255. package/src/components/list-group/list-group.tsx +74 -0
  256. package/src/components/list-group/list-group.types.ts +32 -0
  257. package/src/components/nav/index.ts +14 -0
  258. package/src/components/nav/nav.tsx +203 -0
  259. package/src/components/nav/nav.types.ts +68 -0
  260. package/src/components/navbar/index.ts +9 -2
  261. package/src/components/navbar/navbar-panel.tsx +67 -0
  262. package/src/components/navbar/navbar.context.ts +22 -0
  263. package/src/components/navbar/navbar.render.tsx +32 -0
  264. package/src/components/navbar/navbar.shared.ts +21 -0
  265. package/src/components/navbar/navbar.tsx +252 -99
  266. package/src/components/navbar/navbar.types.ts +36 -22
  267. package/src/components/overlays/dropdown-content.tsx +28 -0
  268. package/src/components/pagination/index.ts +8 -0
  269. package/src/components/pagination/pagination.tsx +158 -0
  270. package/src/components/pagination/pagination.types.ts +41 -0
  271. package/src/components/section/section.tsx +3 -2
  272. package/src/components/section/section.types.ts +2 -1
  273. package/src/components/separator/separator.types.ts +2 -1
  274. package/src/components/shell/index.ts +16 -0
  275. package/src/components/shell/shell-nav.types.ts +3 -0
  276. package/src/components/shell/shell-panel.tsx +85 -0
  277. package/src/components/shell/shell-responsive.tsx +212 -0
  278. package/src/components/shell/shell.a11y.ts +20 -0
  279. package/src/components/shell/shell.tsx +74 -0
  280. package/src/components/shell/shell.types.ts +71 -0
  281. package/src/components/sidebar/index.ts +5 -0
  282. package/src/components/sidebar/sidebar-panel.tsx +76 -0
  283. package/src/components/sidebar/sidebar-toggle.tsx +5 -0
  284. package/src/components/sidebar/sidebar.context.ts +40 -0
  285. package/src/components/sidebar/sidebar.shared.ts +12 -0
  286. package/src/components/sidebar/sidebar.tsx +355 -0
  287. package/src/components/sidebar/sidebar.types.ts +35 -0
  288. package/src/components/skeleton/skeleton.types.ts +2 -1
  289. package/src/components/spacer/spacer.tsx +4 -1
  290. package/src/components/spacer/spacer.types.ts +3 -2
  291. package/src/components/stack/stack.types.ts +2 -1
  292. package/src/components/theme/index.ts +10 -1
  293. package/src/components/theme/theme.tsx +15 -4
  294. package/src/controls.ts +18 -0
  295. package/src/feedback.ts +6 -0
  296. package/src/layouts.ts +19 -0
  297. package/src/navs.ts +26 -0
  298. package/src/overlays.ts +90 -0
  299. package/src/shells.ts +13 -0
  300. package/src/surfaces.ts +23 -0
  301. package/src/theme.ts +21 -0
  302. package/src/themes/default/index.css +13 -3
  303. package/src/themes/default/styles/actions/button-group.css +74 -0
  304. package/src/themes/default/styles/actions/button.css +48 -8
  305. package/src/themes/default/styles/actions/toggle-group.css +19 -12
  306. package/src/themes/default/styles/actions/toggle.css +16 -10
  307. package/src/themes/default/styles/base/icon.css +2 -0
  308. package/src/themes/default/styles/base/reset.css +28 -0
  309. package/src/themes/default/styles/base/typography.css +37 -17
  310. package/src/themes/default/styles/base/utilities.css +56 -39
  311. package/src/themes/default/styles/disclosure/accordion.css +22 -14
  312. package/src/themes/default/styles/disclosure/collapsible.css +22 -11
  313. package/src/themes/default/styles/display/alert.css +109 -0
  314. package/src/themes/default/styles/display/avatar.css +9 -4
  315. package/src/themes/default/styles/display/badge.css +12 -3
  316. package/src/themes/default/styles/display/card.css +16 -4
  317. package/src/themes/default/styles/display/coverage.css +93 -15
  318. package/src/themes/default/styles/display/list-group.css +84 -0
  319. package/src/themes/default/styles/display/progress-circle.css +3 -2
  320. package/src/themes/default/styles/display/progress.css +8 -5
  321. package/src/themes/default/styles/display/scroll-area.css +15 -0
  322. package/src/themes/default/styles/display/separator.css +4 -4
  323. package/src/themes/default/styles/display/skeleton.css +25 -2
  324. package/src/themes/default/styles/display/spinner.css +1 -1
  325. package/src/themes/default/styles/display/table.css +7 -4
  326. package/src/themes/default/styles/display/virtual-list.css +29 -0
  327. package/src/themes/default/styles/display/virtual-table.css +68 -0
  328. package/src/themes/default/styles/forms/checkbox.css +2 -1
  329. package/src/themes/default/styles/forms/field.css +22 -0
  330. package/src/themes/default/styles/forms/form.css +1 -1
  331. package/src/themes/default/styles/forms/input-group.css +202 -0
  332. package/src/themes/default/styles/forms/input.css +22 -6
  333. package/src/themes/default/styles/forms/label.css +2 -0
  334. package/src/themes/default/styles/forms/radio-group.css +22 -13
  335. package/src/themes/default/styles/forms/select.css +71 -26
  336. package/src/themes/default/styles/forms/slider.css +32 -16
  337. package/src/themes/default/styles/forms/switch.css +2 -1
  338. package/src/themes/default/styles/forms/textarea.css +35 -6
  339. package/src/themes/default/styles/layout/aspect-ratio.css +3 -1
  340. package/src/themes/default/styles/layout/block.css +23 -0
  341. package/src/themes/default/styles/layout/layout.css +1 -1
  342. package/src/themes/default/styles/layout/patterns.css +155 -3
  343. package/src/themes/default/styles/layout/responsive-layout.css +142 -121
  344. package/src/themes/default/styles/navigation/breadcrumb.css +7 -1
  345. package/src/themes/default/styles/navigation/menu.css +150 -7
  346. package/src/themes/default/styles/navigation/menubar.css +194 -28
  347. package/src/themes/default/styles/navigation/nav.css +231 -0
  348. package/src/themes/default/styles/navigation/pagination.css +91 -0
  349. package/src/themes/default/styles/overlays/alert-dialog.css +1 -1
  350. package/src/themes/default/styles/overlays/dialog.css +42 -10
  351. package/src/themes/default/styles/overlays/dropdown.css +160 -0
  352. package/src/themes/default/styles/overlays/hover-card.css +28 -3
  353. package/src/themes/default/styles/overlays/popover.css +50 -6
  354. package/src/themes/default/styles/overlays/toast.css +66 -17
  355. package/src/themes/default/styles/overlays/tooltip.css +45 -18
  356. package/src/themes/default/styles/shell/header.css +18 -3
  357. package/src/themes/default/styles/shell/navbar.css +434 -73
  358. package/src/themes/default/styles/shell/sidebar.css +830 -0
  359. package/src/themes/default/styles/shell/theme.css +7 -5
  360. package/src/themes/default/tokens.css +186 -123
  361. package/src/themes/presets/calico.css +46 -0
  362. package/src/themes/presets/ginger.css +46 -0
  363. package/src/themes/presets/index.css +5 -0
  364. package/src/themes/presets/tabby.css +46 -0
  365. package/src/themes/presets/torty.css +49 -0
  366. package/src/themes/presets/tuxedo.css +49 -0
  367. package/templates/theme/index.css +14 -4
  368. package/templates/theme/styles/actions/button-group.css +74 -0
  369. package/templates/theme/styles/actions/button.css +48 -8
  370. package/templates/theme/styles/actions/toggle-group.css +19 -12
  371. package/templates/theme/styles/actions/toggle.css +16 -10
  372. package/templates/theme/styles/base/icon.css +2 -0
  373. package/templates/theme/styles/base/reset.css +28 -0
  374. package/templates/theme/styles/base/typography.css +37 -17
  375. package/templates/theme/styles/disclosure/accordion.css +22 -14
  376. package/templates/theme/styles/disclosure/collapsible.css +22 -11
  377. package/templates/theme/styles/display/alert.css +109 -0
  378. package/templates/theme/styles/display/avatar.css +9 -4
  379. package/templates/theme/styles/display/badge.css +12 -3
  380. package/templates/theme/styles/display/card.css +16 -4
  381. package/templates/theme/styles/display/coverage.css +194 -14
  382. package/templates/theme/styles/display/list-group.css +84 -0
  383. package/templates/theme/styles/display/progress-circle.css +3 -2
  384. package/templates/theme/styles/display/progress.css +8 -5
  385. package/templates/theme/styles/display/scroll-area.css +15 -0
  386. package/templates/theme/styles/display/separator.css +4 -4
  387. package/templates/theme/styles/display/skeleton.css +25 -2
  388. package/templates/theme/styles/display/spinner.css +1 -1
  389. package/templates/theme/styles/display/table.css +7 -4
  390. package/templates/theme/styles/display/virtual-list.css +29 -0
  391. package/templates/theme/styles/display/virtual-table.css +68 -0
  392. package/templates/theme/styles/forms/checkbox.css +2 -1
  393. package/templates/theme/styles/forms/field.css +22 -0
  394. package/templates/theme/styles/forms/form.css +1 -1
  395. package/templates/theme/styles/forms/input-group.css +202 -0
  396. package/templates/theme/styles/forms/input.css +22 -6
  397. package/templates/theme/styles/forms/label.css +2 -0
  398. package/templates/theme/styles/forms/radio-group.css +22 -13
  399. package/templates/theme/styles/forms/select.css +71 -26
  400. package/templates/theme/styles/forms/slider.css +32 -16
  401. package/templates/theme/styles/forms/switch.css +2 -1
  402. package/templates/theme/styles/forms/textarea.css +35 -6
  403. package/templates/theme/styles/layout/aspect-ratio.css +3 -1
  404. package/templates/theme/styles/layout/block.css +23 -0
  405. package/templates/theme/styles/layout/patterns.css +155 -3
  406. package/templates/theme/styles/layout/responsive-layout.css +142 -121
  407. package/templates/theme/styles/navigation/breadcrumb.css +22 -8
  408. package/templates/theme/styles/navigation/menu.css +150 -7
  409. package/templates/theme/styles/navigation/menubar.css +194 -28
  410. package/templates/theme/styles/navigation/nav.css +231 -0
  411. package/templates/theme/styles/navigation/pagination.css +91 -0
  412. package/templates/theme/styles/overlays/alert-dialog.css +1 -1
  413. package/templates/theme/styles/overlays/dialog.css +42 -10
  414. package/templates/theme/styles/overlays/dropdown.css +160 -0
  415. package/templates/theme/styles/overlays/hover-card.css +28 -3
  416. package/templates/theme/styles/overlays/popover.css +50 -6
  417. package/templates/theme/styles/overlays/toast.css +66 -17
  418. package/templates/theme/styles/overlays/tooltip.css +45 -18
  419. package/templates/theme/styles/shell/header.css +18 -3
  420. package/templates/theme/styles/shell/navbar.css +434 -73
  421. package/templates/theme/styles/shell/sidebar.css +809 -0
  422. package/templates/theme/styles/shell/theme.css +7 -5
  423. package/templates/theme/tokens.css +186 -123
  424. package/dist/_internal/box-layout.js.map +0 -1
  425. package/dist/_internal/classes.js.map +0 -1
  426. package/dist/_internal/jsx.js.map +0 -1
  427. package/dist/_internal/layout.d.ts +0 -9
  428. package/dist/_internal/layout.js.map +0 -1
  429. package/dist/_internal/merge-props.js.map +0 -1
  430. package/dist/accessible-icon/accessible-icon.d.ts +0 -7
  431. package/dist/accessible-icon/accessible-icon.js +0 -20
  432. package/dist/accessible-icon/accessible-icon.js.map +0 -1
  433. package/dist/accessible-icon/accessible-icon.types.d.ts +0 -9
  434. package/dist/aspect-ratio/aspect-ratio.d.ts +0 -8
  435. package/dist/aspect-ratio/aspect-ratio.js +0 -36
  436. package/dist/aspect-ratio/aspect-ratio.js.map +0 -1
  437. package/dist/aspect-ratio/aspect-ratio.types.d.ts +0 -20
  438. package/dist/aspect-ratio/index.d.ts +0 -2
  439. package/dist/badge/badge.d.ts +0 -8
  440. package/dist/badge/badge.js.map +0 -1
  441. package/dist/badge/badge.types.d.ts +0 -20
  442. package/dist/badge/index.d.ts +0 -2
  443. package/dist/box/box.d.ts +0 -9
  444. package/dist/box/box.js.map +0 -1
  445. package/dist/box/box.types.d.ts +0 -71
  446. package/dist/box/index.d.ts +0 -2
  447. package/dist/breadcrumb/breadcrumb.d.ts +0 -18
  448. package/dist/breadcrumb/breadcrumb.js.map +0 -1
  449. package/dist/breadcrumb/breadcrumb.types.d.ts +0 -64
  450. package/dist/breadcrumb/index.d.ts +0 -2
  451. package/dist/card/card.d.ts +0 -12
  452. package/dist/card/card.js +0 -68
  453. package/dist/card/card.js.map +0 -1
  454. package/dist/card/card.types.d.ts +0 -37
  455. package/dist/card/index.d.ts +0 -2
  456. package/dist/components/_internal/box-layout.d.ts +0 -7
  457. package/dist/components/_internal/classes.d.ts +0 -1
  458. package/dist/components/_internal/jsx.d.ts +0 -8
  459. package/dist/components/_internal/merge-props.d.ts +0 -1
  460. package/dist/components/_internal/style.d.ts +0 -1
  461. package/dist/components/accessible-icon/accessible-icon.d.ts +0 -2
  462. package/dist/components/accessible-icon/accessible-icon.types.d.ts +0 -5
  463. package/dist/components/accessible-icon/index.d.ts +0 -2
  464. package/dist/components/grid/grid.a11y.d.ts +0 -21
  465. package/dist/components/grid/grid.d.ts +0 -4
  466. package/dist/components/grid/grid.types.d.ts +0 -37
  467. package/dist/components/grid/index.d.ts +0 -3
  468. package/dist/components/header/index.d.ts +0 -3
  469. package/dist/components/index.d.ts +0 -49
  470. package/dist/components/index.js +0 -28
  471. package/dist/components/logos/create-logo.d.ts +0 -5
  472. package/dist/components/logos/github-logo.d.ts +0 -4
  473. package/dist/components/logos/google-logo.d.ts +0 -4
  474. package/dist/components/logos/index.d.ts +0 -5
  475. package/dist/components/logos/microsoft-logo.d.ts +0 -4
  476. package/dist/components/logos/types.d.ts +0 -14
  477. package/dist/components/sidebar-layout/index.d.ts +0 -3
  478. package/dist/components/sidebar-layout/sidebar-layout.a11y.d.ts +0 -15
  479. package/dist/components/sidebar-layout/sidebar-layout.d.ts +0 -2
  480. package/dist/components/sidebar-layout/sidebar-layout.types.d.ts +0 -20
  481. package/dist/components/topbar-layout/index.d.ts +0 -3
  482. package/dist/components/topbar-layout/topbar-layout.a11y.d.ts +0 -13
  483. package/dist/components/topbar-layout/topbar-layout.d.ts +0 -2
  484. package/dist/components/topbar-layout/topbar-layout.types.d.ts +0 -12
  485. package/dist/container/container.d.ts +0 -8
  486. package/dist/container/container.js.map +0 -1
  487. package/dist/container/container.types.d.ts +0 -28
  488. package/dist/container/index.d.ts +0 -2
  489. package/dist/empty-state/empty-state.d.ts +0 -7
  490. package/dist/empty-state/empty-state.js.map +0 -1
  491. package/dist/empty-state/empty-state.types.d.ts +0 -13
  492. package/dist/flex/flex.d.ts +0 -9
  493. package/dist/flex/flex.js.map +0 -1
  494. package/dist/flex/flex.types.d.ts +0 -41
  495. package/dist/flex/index.d.ts +0 -2
  496. package/dist/grid/grid.d.ts +0 -9
  497. package/dist/grid/grid.js +0 -115
  498. package/dist/grid/grid.js.map +0 -1
  499. package/dist/grid/grid.types.d.ts +0 -40
  500. package/dist/grid/index.d.ts +0 -2
  501. package/dist/header/header.d.ts +0 -7
  502. package/dist/header/header.js.map +0 -1
  503. package/dist/header/header.types.d.ts +0 -9
  504. package/dist/inline/index.d.ts +0 -7
  505. package/dist/inline/index.js.map +0 -1
  506. package/dist/logos/create-logo.d.ts +0 -1
  507. package/dist/logos/create-logo.js +0 -75
  508. package/dist/logos/create-logo.js.map +0 -1
  509. package/dist/logos/github-logo.d.ts +0 -18
  510. package/dist/logos/github-logo.js +0 -9
  511. package/dist/logos/github-logo.js.map +0 -1
  512. package/dist/logos/google-logo.d.ts +0 -18
  513. package/dist/logos/google-logo.js +0 -23
  514. package/dist/logos/google-logo.js.map +0 -1
  515. package/dist/logos/index.d.ts +0 -4
  516. package/dist/logos/microsoft-logo.d.ts +0 -18
  517. package/dist/logos/microsoft-logo.js +0 -35
  518. package/dist/logos/microsoft-logo.js.map +0 -1
  519. package/dist/logos/types.d.ts +0 -16
  520. package/dist/navbar/index.d.ts +0 -2
  521. package/dist/navbar/navbar.d.ts +0 -12
  522. package/dist/navbar/navbar.js +0 -103
  523. package/dist/navbar/navbar.js.map +0 -1
  524. package/dist/navbar/navbar.types.d.ts +0 -31
  525. package/dist/section/index.d.ts +0 -2
  526. package/dist/section/section.d.ts +0 -8
  527. package/dist/section/section.js.map +0 -1
  528. package/dist/section/section.types.d.ts +0 -22
  529. package/dist/separator/index.d.ts +0 -2
  530. package/dist/separator/separator.d.ts +0 -8
  531. package/dist/separator/separator.js.map +0 -1
  532. package/dist/separator/separator.types.d.ts +0 -21
  533. package/dist/sidebar-layout/index.d.ts +0 -2
  534. package/dist/sidebar-layout/sidebar-layout.d.ts +0 -7
  535. package/dist/sidebar-layout/sidebar-layout.js +0 -51
  536. package/dist/sidebar-layout/sidebar-layout.js.map +0 -1
  537. package/dist/sidebar-layout/sidebar-layout.types.d.ts +0 -20
  538. package/dist/skeleton/index.d.ts +0 -2
  539. package/dist/skeleton/skeleton.d.ts +0 -8
  540. package/dist/skeleton/skeleton.js.map +0 -1
  541. package/dist/skeleton/skeleton.types.d.ts +0 -18
  542. package/dist/spacer/index.d.ts +0 -2
  543. package/dist/spacer/spacer.d.ts +0 -8
  544. package/dist/spacer/spacer.js.map +0 -1
  545. package/dist/spacer/spacer.types.d.ts +0 -25
  546. package/dist/spinner/index.d.ts +0 -2
  547. package/dist/spinner/spinner.d.ts +0 -7
  548. package/dist/spinner/spinner.js.map +0 -1
  549. package/dist/spinner/spinner.types.d.ts +0 -10
  550. package/dist/stack/index.d.ts +0 -2
  551. package/dist/stack/stack.d.ts +0 -8
  552. package/dist/stack/stack.js.map +0 -1
  553. package/dist/stack/stack.types.d.ts +0 -21
  554. package/dist/theme/index.d.ts +0 -1
  555. package/dist/theme/theme.d.ts +0 -44
  556. package/dist/theme/theme.js.map +0 -1
  557. package/dist/topbar-layout/index.d.ts +0 -2
  558. package/dist/topbar-layout/topbar-layout.d.ts +0 -7
  559. package/dist/topbar-layout/topbar-layout.js +0 -37
  560. package/dist/topbar-layout/topbar-layout.js.map +0 -1
  561. package/dist/topbar-layout/topbar-layout.types.d.ts +0 -13
  562. package/src/askr-compat.d.ts +0 -110
  563. package/src/askr-router.d.ts +0 -16
  564. package/src/components/accessible-icon/accessible-icon.tsx +0 -18
  565. package/src/components/accessible-icon/accessible-icon.types.ts +0 -5
  566. package/src/components/accessible-icon/index.ts +0 -2
  567. package/src/components/grid/grid.a11y.ts +0 -22
  568. package/src/components/grid/grid.tsx +0 -172
  569. package/src/components/grid/grid.types.ts +0 -45
  570. package/src/components/grid/index.ts +0 -10
  571. package/src/components/index.ts +0 -108
  572. package/src/components/logos/create-logo.tsx +0 -103
  573. package/src/components/logos/github-logo.tsx +0 -13
  574. package/src/components/logos/google-logo.tsx +0 -34
  575. package/src/components/logos/index.ts +0 -5
  576. package/src/components/logos/microsoft-logo.tsx +0 -10
  577. package/src/components/logos/types.ts +0 -24
  578. package/src/components/sidebar-layout/index.ts +0 -6
  579. package/src/components/sidebar-layout/sidebar-layout.a11y.ts +0 -16
  580. package/src/components/sidebar-layout/sidebar-layout.tsx +0 -59
  581. package/src/components/sidebar-layout/sidebar-layout.types.ts +0 -22
  582. package/src/components/topbar-layout/index.ts +0 -3
  583. package/src/components/topbar-layout/topbar-layout.a11y.ts +0 -14
  584. package/src/components/topbar-layout/topbar-layout.tsx +0 -39
  585. package/src/components/topbar-layout/topbar-layout.types.ts +0 -13
  586. package/src/themes/default/styles/layout/dashboard-layout.css +0 -15
  587. package/src/themes/default/styles/layout/docs-layout.css +0 -10
  588. package/src/themes/default/styles/layout/sidebar.css +0 -10
  589. package/src/themes/default/styles/navigation/navigation-menu.css +0 -90
  590. package/src/themes/default/styles/navigation/tabs.css +0 -61
  591. package/src/themes/default/styles/overlays/dropdown-menu.css +0 -109
  592. package/templates/theme/styles/layout/dashboard-layout.css +0 -16
  593. package/templates/theme/styles/layout/docs-layout.css +0 -11
  594. package/templates/theme/styles/layout/sidebar.css +0 -11
  595. package/templates/theme/styles/navigation/navigation-menu.css +0 -90
  596. package/templates/theme/styles/navigation/tabs.css +0 -61
  597. package/templates/theme/styles/overlays/dropdown-menu.css +0 -109
  598. /package/dist/{_internal → components/_internal}/classes.js +0 -0
  599. /package/dist/{_internal → components/_internal}/jsx.js +0 -0
  600. /package/dist/{breadcrumb → components/breadcrumb}/breadcrumb.js +0 -0
  601. /package/dist/{empty-state → components/empty-state}/empty-state.js +0 -0
  602. /package/dist/{header → components/header}/header.js +0 -0
  603. /package/dist/{inline → components/inline}/index.js +0 -0
  604. /package/dist/{separator → components/separator}/separator.js +0 -0
  605. /package/dist/{skeleton → components/skeleton}/skeleton.js +0 -0
  606. /package/dist/{spinner → components/spinner}/spinner.js +0 -0
  607. /package/dist/{stack → components/stack}/stack.js +0 -0
package/src/themes/default/styles/shell/theme.css CHANGED
@@ -14,16 +14,18 @@
14
14
 
15
15
  :where([data-slot="theme-picker"]) {
16
16
  display: inline-flex;
17
- min-height: 2.5rem;
18
- min-width: 8rem;
19
- padding-inline: 0.85rem 2.1rem;
20
- border: 1px solid color-mix(in srgb, var(--ak-color-border) 84%, white 16%);
17
+ min-block-size: var(--ak-density-control-height-md);
18
+ min-inline-size: min(8rem, 100%);
19
+ max-inline-size: 100%;
20
+ padding-inline: var(--ak-density-control-padding-x-md) 2.1rem;
21
+ border: 1px solid color-mix(in srgb, var(--ak-color-border) 84%, var(--ak-color-surface) 16%);
21
22
  border-radius: var(--ak-radius-md);
22
23
  background: var(--ak-color-surface);
23
24
  color: var(--ak-color-text);
24
25
  font: inherit;
25
26
  font-size: var(--ak-font-size-sm);
26
27
  line-height: 1;
28
+ text-overflow: ellipsis;
27
29
  box-shadow: var(--ak-shadow-sm);
28
30
  }
29
31
 
@@ -31,5 +33,5 @@
31
33
  outline: none;
32
34
  box-shadow:
33
35
  0 0 0 1px var(--ak-color-surface),
34
- 0 0 0 4px var(--ak-color-focus-ring);
36
+ 0 0 0 calc(var(--ak-focus-ring-width) + 1px) var(--ak-color-focus-ring);
35
37
  }
package/src/themes/default/tokens.css CHANGED
@@ -18,8 +18,8 @@
18
18
  --ak-font-size-xl: 1.25rem;
19
19
  --ak-font-size-2xl: 1.5rem;
20
20
  --ak-font-size-3xl: 1.75rem;
21
- --ak-font-size-heading: clamp(1.2rem, 1.05rem + 0.72vw, 1.75rem);
22
- --ak-font-size-display: clamp(2.2rem, 1.55rem + 2.35vw, 3.55rem);
21
+ --ak-font-size-heading: clamp(1.25rem, 1.08rem + 0.62vw, 1.75rem);
22
+ --ak-font-size-display: clamp(2.35rem, 1.7rem + 2.05vw, 3.65rem);
23
23
 
24
24
  --ak-font-weight-light: 300;
25
25
  --ak-font-weight-regular: 400;
@@ -28,8 +28,8 @@
28
28
  --ak-font-weight-bold: 700;
29
29
 
30
30
  --ak-line-height-tight: 1.15;
31
- --ak-line-height-normal: 1.55;
32
- --ak-line-height-relaxed: 1.7;
31
+ --ak-line-height-normal: 1.5;
32
+ --ak-line-height-relaxed: 1.68;
33
33
 
34
34
  --ak-type-1-size: 0.75rem;
35
35
  --ak-type-1-line-height: 1rem;
@@ -52,13 +52,14 @@
52
52
  --ak-type-7-size: 2rem;
53
53
  --ak-type-7-line-height: 2.35rem;
54
54
  --ak-type-7-letter-spacing: -0.03em;
55
- --ak-type-8-size: 2.75rem;
56
- --ak-type-8-line-height: 2.95rem;
57
- --ak-type-8-letter-spacing: -0.04em;
58
- --ak-type-9-size: 4.75rem;
59
- --ak-type-9-line-height: 4.65rem;
60
- --ak-type-9-letter-spacing: -0.055em;
61
-
55
+ --ak-type-8-size: 2.625rem;
56
+ --ak-type-8-line-height: 2.85rem;
57
+ --ak-type-8-letter-spacing: -0.032em;
58
+ --ak-type-9-size: 4.25rem;
59
+ --ak-type-9-line-height: 4.2rem;
60
+ --ak-type-9-letter-spacing: -0.045em;
61
+
62
+ /* Semantic spacing is the authored scale. Numeric steps are compatibility aliases. */
62
63
  --ak-space-xs: 0.25rem;
63
64
  --ak-space-sm: 0.5rem;
64
65
  --ak-space-md: 0.875rem;
@@ -66,28 +67,29 @@
66
67
  --ak-space-xl: 1.5rem;
67
68
  --ak-space-2xl: 2.25rem;
68
69
  --ak-space-3xl: 3.5rem;
69
- --ak-space-1: 0.25rem;
70
- --ak-space-2: 0.5rem;
70
+ --ak-space-1: var(--ak-space-xs);
71
+ --ak-space-2: var(--ak-space-sm);
71
72
  --ak-space-3: 0.75rem;
72
- --ak-space-4: 1rem;
73
- --ak-space-5: 1.5rem;
74
- --ak-space-6: 2rem;
73
+ --ak-space-4: var(--ak-space-md);
74
+ --ak-space-5: var(--ak-space-xl);
75
+ --ak-space-6: var(--ak-space-2xl);
75
76
  --ak-space-7: 2.5rem;
76
- --ak-space-8: 3rem;
77
+ --ak-space-8: var(--ak-space-3xl);
77
78
  --ak-space-9: 4rem;
78
79
 
79
80
  --ak-radius-sm: 6px;
80
81
  --ak-radius-md: 8px;
81
- --ak-radius-lg: 12px;
82
- --ak-radius-xl: 18px;
82
+ --ak-radius-lg: 10px;
83
+ --ak-radius-xl: 14px;
83
84
  --ak-radius-round: 9999px;
84
85
 
85
86
  --ak-border-width-sm: 1px;
86
87
  --ak-border-width-md: 2px;
87
- --ak-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 0 0 1px rgba(15, 23, 42, 0.03);
88
- --ak-shadow-md: 0 10px 30px -18px rgba(15, 23, 42, 0.18), 0 2px 8px rgba(15, 23, 42, 0.06);
89
- --ak-shadow-lg: 0 24px 64px -32px rgba(15, 23, 42, 0.24), 0 8px 24px rgba(15, 23, 42, 0.08);
90
- --ak-focus-ring-width: 3px;
88
+ --ak-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08), 0 1px 1px rgba(15, 23, 42, 0.04);
89
+ --ak-shadow-md: 0 16px 36px -24px rgba(15, 23, 42, 0.36), 0 4px 12px -8px rgba(15, 23, 42, 0.18);
90
+ --ak-shadow-lg:
91
+ 0 28px 72px -36px rgba(15, 23, 42, 0.48), 0 12px 30px -18px rgba(15, 23, 42, 0.28);
92
+ --ak-focus-ring-width: 2px;
91
93
  --ak-focus-ring-offset: 2px;
92
94
  --ak-duration-fast: 160ms;
93
95
  --ak-duration-normal: 220ms;
@@ -113,16 +115,18 @@
113
115
  --ak-layout-sidebar-width-lg: 20rem;
114
116
  --ak-layout-sidebar-width-xl: 23rem;
115
117
  --ak-layout-sidebar-width: 17rem;
118
+ --ak-layout-sidebar-rail-width: 4.5rem;
119
+ --ak-layout-mobile-drawer-width: 22rem;
116
120
  --ak-layout-content-max-width: 80rem;
117
121
  --ak-layout-page-gutter: clamp(1rem, 0.7rem + 1.25vw, 1.75rem);
118
- --ak-layout-panel-padding: clamp(1rem, 0.88rem + 0.55vw, 1.35rem);
122
+ --ak-layout-panel-padding: clamp(0.9rem, 0.78rem + 0.45vw, 1.2rem);
119
123
  --ak-container-inline-size: 100%;
120
124
  --ak-density-control-height-sm: 2rem;
121
- --ak-density-control-height-md: 2.5rem;
122
- --ak-density-control-height-lg: 2.9rem;
123
- --ak-density-control-padding-x-sm: 0.8rem;
124
- --ak-density-control-padding-x-md: 1rem;
125
- --ak-density-control-padding-x-lg: 1.15rem;
125
+ --ak-density-control-height-md: 2.375rem;
126
+ --ak-density-control-height-lg: 2.75rem;
127
+ --ak-density-control-padding-x-sm: 0.75rem;
128
+ --ak-density-control-padding-x-md: 0.95rem;
129
+ --ak-density-control-padding-x-lg: 1.1rem;
126
130
  --ak-container-1: 30rem;
127
131
  --ak-container-2: 42rem;
128
132
  --ak-container-3: 58rem;
@@ -140,6 +144,57 @@
140
144
  --ak-z-popover: 1500;
141
145
  --ak-z-toast: 1550;
142
146
  --ak-z-tooltip: 1600;
147
+
148
+ --ak-dark-color-primary: #60a5fa;
149
+ --ak-dark-color-primary-hover: #7ab8ff;
150
+ --ak-dark-color-primary-active: #4d92ef;
151
+ --ak-dark-color-primary-soft: rgba(96, 165, 250, 0.2);
152
+ --ak-dark-color-primary-ink: #dcedff;
153
+
154
+ --ak-dark-color-text: #edf3ff;
155
+ --ak-dark-color-text-muted: #a9b7cc;
156
+ --ak-dark-color-text-subtle: #8090a8;
157
+ --ak-dark-color-text-inverse: #0e1320;
158
+
159
+ --ak-dark-color-bg: #0f1420;
160
+ --ak-dark-color-surface: #171d2b;
161
+ --ak-dark-color-surface-muted: #20283a;
162
+ --ak-dark-color-surface-raised: #263249;
163
+ --ak-dark-color-surface-overlay: rgba(23, 29, 43, 0.88);
164
+
165
+ --ak-dark-color-border-subtle: #2a3449;
166
+ --ak-dark-color-border: #38445c;
167
+ --ak-dark-color-border-strong: #59698a;
168
+
169
+ --ak-dark-color-success: #4ade80;
170
+ --ak-dark-color-success-soft: rgba(74, 222, 128, 0.18);
171
+ --ak-dark-color-success-ink: #dcfce7;
172
+ --ak-dark-color-warning: #fbbf24;
173
+ --ak-dark-color-warning-soft: rgba(251, 191, 36, 0.18);
174
+ --ak-dark-color-warning-ink: #fef3c7;
175
+ --ak-dark-color-danger: #fb7185;
176
+ --ak-dark-color-danger-soft: rgba(251, 113, 133, 0.18);
177
+ --ak-dark-color-danger-ink: #ffe4e6;
178
+ --ak-dark-color-info: #38bdf8;
179
+ --ak-dark-color-info-soft: rgba(56, 189, 248, 0.18);
180
+ --ak-dark-color-info-ink: #e0f2fe;
181
+
182
+ --ak-dark-color-link: var(--ak-dark-color-primary);
183
+ --ak-dark-color-link-hover: var(--ak-dark-color-primary-hover);
184
+ --ak-dark-color-focus-ring: rgba(96, 165, 250, 0.22);
185
+ --ak-dark-color-disabled-bg: #1e2737;
186
+ --ak-dark-color-disabled-surface: #171d2b;
187
+ --ak-dark-color-disabled-border: #2f3b50;
188
+ --ak-dark-color-disabled-text: #74849d;
189
+ --ak-dark-color-selected: rgba(110, 168, 254, 0.15);
190
+ --ak-dark-color-selected-border: #60a5fa;
191
+ --ak-dark-color-hover: rgba(237, 243, 255, 0.06);
192
+ --ak-dark-color-active: rgba(237, 243, 255, 0.12);
193
+ --ak-dark-color-backdrop: rgba(2, 6, 12, 0.66);
194
+
195
+ --ak-dark-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(255, 255, 255, 0.03);
196
+ --ak-dark-shadow-md: 0 16px 40px -24px rgba(0, 0, 0, 0.64), 0 4px 14px -8px rgba(0, 0, 0, 0.42);
197
+ --ak-dark-shadow-lg: 0 30px 78px -38px rgba(0, 0, 0, 0.72), 0 14px 34px -20px rgba(0, 0, 0, 0.52);
143
198
  }
144
199
 
145
200
  :root,
@@ -178,8 +233,8 @@
178
233
  --ak-color-info-soft: rgba(14, 165, 233, 0.16);
179
234
  --ak-color-info-ink: #0c4a6e;
180
235
 
181
- --ak-color-link: var(--ak-color-primary);
182
- --ak-color-link-hover: var(--ak-color-primary-hover);
236
+ --ak-color-link: #1d4ed8;
237
+ --ak-color-link-hover: #1e40af;
183
238
  --ak-color-focus-ring: rgba(37, 99, 235, 0.18);
184
239
  --ak-color-disabled-bg: #ecf0f7;
185
240
  --ak-color-disabled-surface: #f7f9fc;
@@ -198,52 +253,56 @@
198
253
  }
199
254
 
200
255
  [data-theme="dark"] {
201
- --ak-color-primary: #60a5fa;
202
- --ak-color-primary-hover: #7ab8ff;
203
- --ak-color-primary-active: #4d92ef;
204
- --ak-color-primary-soft: rgba(96, 165, 250, 0.2);
205
- --ak-color-primary-ink: #dcedff;
206
-
207
- --ak-color-text: #edf3ff;
208
- --ak-color-text-muted: #a9b7cc;
209
- --ak-color-text-subtle: #8090a8;
210
- --ak-color-text-inverse: #0e1320;
211
-
212
- --ak-color-bg: #0f1420;
213
- --ak-color-surface: #171d2b;
214
- --ak-color-surface-muted: #20283a;
215
- --ak-color-surface-raised: #263249;
216
- --ak-color-surface-overlay: rgba(23, 29, 43, 0.88);
217
-
218
- --ak-color-border-subtle: #2a3449;
219
- --ak-color-border: #38445c;
220
- --ak-color-border-strong: #59698a;
221
-
222
- --ak-color-success: #4ade80;
223
- --ak-color-success-soft: rgba(74, 222, 128, 0.18);
224
- --ak-color-success-ink: #dcfce7;
225
- --ak-color-warning: #fbbf24;
226
- --ak-color-warning-soft: rgba(251, 191, 36, 0.18);
227
- --ak-color-warning-ink: #fef3c7;
228
- --ak-color-danger: #fb7185;
229
- --ak-color-danger-soft: rgba(251, 113, 133, 0.18);
230
- --ak-color-danger-ink: #ffe4e6;
231
- --ak-color-info: #38bdf8;
232
- --ak-color-info-soft: rgba(56, 189, 248, 0.18);
233
- --ak-color-info-ink: #e0f2fe;
234
-
235
- --ak-color-link: var(--ak-color-primary);
236
- --ak-color-link-hover: var(--ak-color-primary-hover);
237
- --ak-color-focus-ring: rgba(96, 165, 250, 0.22);
238
- --ak-color-disabled-bg: #1e2737;
239
- --ak-color-disabled-surface: #171d2b;
240
- --ak-color-disabled-border: #2f3b50;
241
- --ak-color-disabled-text: #74849d;
242
- --ak-color-selected: rgba(110, 168, 254, 0.15);
243
- --ak-color-selected-border: #60a5fa;
244
- --ak-color-hover: rgba(237, 243, 255, 0.06);
245
- --ak-color-active: rgba(237, 243, 255, 0.12);
246
- --ak-color-backdrop: rgba(2, 6, 12, 0.66);
256
+ --ak-color-primary: var(--ak-dark-color-primary);
257
+ --ak-color-primary-hover: var(--ak-dark-color-primary-hover);
258
+ --ak-color-primary-active: var(--ak-dark-color-primary-active);
259
+ --ak-color-primary-soft: var(--ak-dark-color-primary-soft);
260
+ --ak-color-primary-ink: var(--ak-dark-color-primary-ink);
261
+
262
+ --ak-color-text: var(--ak-dark-color-text);
263
+ --ak-color-text-muted: var(--ak-dark-color-text-muted);
264
+ --ak-color-text-subtle: var(--ak-dark-color-text-subtle);
265
+ --ak-color-text-inverse: var(--ak-dark-color-text-inverse);
266
+
267
+ --ak-color-bg: var(--ak-dark-color-bg);
268
+ --ak-color-surface: var(--ak-dark-color-surface);
269
+ --ak-color-surface-muted: var(--ak-dark-color-surface-muted);
270
+ --ak-color-surface-raised: var(--ak-dark-color-surface-raised);
271
+ --ak-color-surface-overlay: var(--ak-dark-color-surface-overlay);
272
+
273
+ --ak-color-border-subtle: var(--ak-dark-color-border-subtle);
274
+ --ak-color-border: var(--ak-dark-color-border);
275
+ --ak-color-border-strong: var(--ak-dark-color-border-strong);
276
+
277
+ --ak-color-success: var(--ak-dark-color-success);
278
+ --ak-color-success-soft: var(--ak-dark-color-success-soft);
279
+ --ak-color-success-ink: var(--ak-dark-color-success-ink);
280
+ --ak-color-warning: var(--ak-dark-color-warning);
281
+ --ak-color-warning-soft: var(--ak-dark-color-warning-soft);
282
+ --ak-color-warning-ink: var(--ak-dark-color-warning-ink);
283
+ --ak-color-danger: var(--ak-dark-color-danger);
284
+ --ak-color-danger-soft: var(--ak-dark-color-danger-soft);
285
+ --ak-color-danger-ink: var(--ak-dark-color-danger-ink);
286
+ --ak-color-info: var(--ak-dark-color-info);
287
+ --ak-color-info-soft: var(--ak-dark-color-info-soft);
288
+ --ak-color-info-ink: var(--ak-dark-color-info-ink);
289
+
290
+ --ak-color-link: var(--ak-dark-color-link);
291
+ --ak-color-link-hover: var(--ak-dark-color-link-hover);
292
+ --ak-color-focus-ring: var(--ak-dark-color-focus-ring);
293
+ --ak-color-disabled-bg: var(--ak-dark-color-disabled-bg);
294
+ --ak-color-disabled-surface: var(--ak-dark-color-disabled-surface);
295
+ --ak-color-disabled-border: var(--ak-dark-color-disabled-border);
296
+ --ak-color-disabled-text: var(--ak-dark-color-disabled-text);
297
+ --ak-color-selected: var(--ak-dark-color-selected);
298
+ --ak-color-selected-border: var(--ak-dark-color-selected-border);
299
+ --ak-color-hover: var(--ak-dark-color-hover);
300
+ --ak-color-active: var(--ak-dark-color-active);
301
+ --ak-color-backdrop: var(--ak-dark-color-backdrop);
302
+
303
+ --ak-shadow-sm: var(--ak-dark-shadow-sm);
304
+ --ak-shadow-md: var(--ak-dark-shadow-md);
305
+ --ak-shadow-lg: var(--ak-dark-shadow-lg);
247
306
 
248
307
  --ak-color-fg: var(--ak-color-text);
249
308
  --ak-color-muted: var(--ak-color-text-muted);
@@ -261,52 +320,56 @@
261
320
 
262
321
  @media (prefers-color-scheme: dark) {
263
322
  :root:not([data-theme]) {
264
- --ak-color-primary: #60a5fa;
265
- --ak-color-primary-hover: #7ab8ff;
266
- --ak-color-primary-active: #4d92ef;
267
- --ak-color-primary-soft: rgba(96, 165, 250, 0.2);
268
- --ak-color-primary-ink: #dcedff;
269
-
270
- --ak-color-text: #edf3ff;
271
- --ak-color-text-muted: #a9b7cc;
272
- --ak-color-text-subtle: #8090a8;
273
- --ak-color-text-inverse: #0e1320;
274
-
275
- --ak-color-bg: #0f1420;
276
- --ak-color-surface: #171d2b;
277
- --ak-color-surface-muted: #20283a;
278
- --ak-color-surface-raised: #263249;
279
- --ak-color-surface-overlay: rgba(23, 29, 43, 0.88);
280
-
281
- --ak-color-border-subtle: #2a3449;
282
- --ak-color-border: #38445c;
283
- --ak-color-border-strong: #59698a;
284
-
285
- --ak-color-success: #4ade80;
286
- --ak-color-success-soft: rgba(74, 222, 128, 0.18);
287
- --ak-color-success-ink: #dcfce7;
288
- --ak-color-warning: #fbbf24;
289
- --ak-color-warning-soft: rgba(251, 191, 36, 0.18);
290
- --ak-color-warning-ink: #fef3c7;
291
- --ak-color-danger: #fb7185;
292
- --ak-color-danger-soft: rgba(251, 113, 133, 0.18);
293
- --ak-color-danger-ink: #ffe4e6;
294
- --ak-color-info: #38bdf8;
295
- --ak-color-info-soft: rgba(56, 189, 248, 0.18);
296
- --ak-color-info-ink: #e0f2fe;
297
-
298
- --ak-color-link: var(--ak-color-primary);
299
- --ak-color-link-hover: var(--ak-color-primary-hover);
300
- --ak-color-focus-ring: rgba(96, 165, 250, 0.22);
301
- --ak-color-disabled-bg: #1e2737;
302
- --ak-color-disabled-surface: #171d2b;
303
- --ak-color-disabled-border: #2f3b50;
304
- --ak-color-disabled-text: #74849d;
305
- --ak-color-selected: rgba(110, 168, 254, 0.15);
306
- --ak-color-selected-border: #60a5fa;
307
- --ak-color-hover: rgba(237, 243, 255, 0.06);
308
- --ak-color-active: rgba(237, 243, 255, 0.12);
309
- --ak-color-backdrop: rgba(2, 6, 12, 0.66);
323
+ --ak-color-primary: var(--ak-dark-color-primary);
324
+ --ak-color-primary-hover: var(--ak-dark-color-primary-hover);
325
+ --ak-color-primary-active: var(--ak-dark-color-primary-active);
326
+ --ak-color-primary-soft: var(--ak-dark-color-primary-soft);
327
+ --ak-color-primary-ink: var(--ak-dark-color-primary-ink);
328
+
329
+ --ak-color-text: var(--ak-dark-color-text);
330
+ --ak-color-text-muted: var(--ak-dark-color-text-muted);
331
+ --ak-color-text-subtle: var(--ak-dark-color-text-subtle);
332
+ --ak-color-text-inverse: var(--ak-dark-color-text-inverse);
333
+
334
+ --ak-color-bg: var(--ak-dark-color-bg);
335
+ --ak-color-surface: var(--ak-dark-color-surface);
336
+ --ak-color-surface-muted: var(--ak-dark-color-surface-muted);
337
+ --ak-color-surface-raised: var(--ak-dark-color-surface-raised);
338
+ --ak-color-surface-overlay: var(--ak-dark-color-surface-overlay);
339
+
340
+ --ak-color-border-subtle: var(--ak-dark-color-border-subtle);
341
+ --ak-color-border: var(--ak-dark-color-border);
342
+ --ak-color-border-strong: var(--ak-dark-color-border-strong);
343
+
344
+ --ak-color-success: var(--ak-dark-color-success);
345
+ --ak-color-success-soft: var(--ak-dark-color-success-soft);
346
+ --ak-color-success-ink: var(--ak-dark-color-success-ink);
347
+ --ak-color-warning: var(--ak-dark-color-warning);
348
+ --ak-color-warning-soft: var(--ak-dark-color-warning-soft);
349
+ --ak-color-warning-ink: var(--ak-dark-color-warning-ink);
350
+ --ak-color-danger: var(--ak-dark-color-danger);
351
+ --ak-color-danger-soft: var(--ak-dark-color-danger-soft);
352
+ --ak-color-danger-ink: var(--ak-dark-color-danger-ink);
353
+ --ak-color-info: var(--ak-dark-color-info);
354
+ --ak-color-info-soft: var(--ak-dark-color-info-soft);
355
+ --ak-color-info-ink: var(--ak-dark-color-info-ink);
356
+
357
+ --ak-color-link: var(--ak-dark-color-link);
358
+ --ak-color-link-hover: var(--ak-dark-color-link-hover);
359
+ --ak-color-focus-ring: var(--ak-dark-color-focus-ring);
360
+ --ak-color-disabled-bg: var(--ak-dark-color-disabled-bg);
361
+ --ak-color-disabled-surface: var(--ak-dark-color-disabled-surface);
362
+ --ak-color-disabled-border: var(--ak-dark-color-disabled-border);
363
+ --ak-color-disabled-text: var(--ak-dark-color-disabled-text);
364
+ --ak-color-selected: var(--ak-dark-color-selected);
365
+ --ak-color-selected-border: var(--ak-dark-color-selected-border);
366
+ --ak-color-hover: var(--ak-dark-color-hover);
367
+ --ak-color-active: var(--ak-dark-color-active);
368
+ --ak-color-backdrop: var(--ak-dark-color-backdrop);
369
+
370
+ --ak-shadow-sm: var(--ak-dark-shadow-sm);
371
+ --ak-shadow-md: var(--ak-dark-shadow-md);
372
+ --ak-shadow-lg: var(--ak-dark-shadow-lg);
310
373
 
311
374
  --ak-color-fg: var(--ak-color-text);
312
375
  --ak-color-muted: var(--ak-color-text-muted);
package/src/themes/presets/calico.css ADDED
@@ -0,0 +1,46 @@
1
+ [data-theme="calico"] {
2
+ --ak-color-primary: #315f9f;
3
+ --ak-color-primary-hover: #274f86;
4
+ --ak-color-primary-active: #1f416f;
5
+ --ak-color-primary-soft: #dce9fb;
6
+ --ak-color-primary-ink: #1f416f;
7
+ --ak-color-text: #252b35;
8
+ --ak-color-text-muted: #626d7a;
9
+ --ak-color-text-subtle: #929ca8;
10
+ --ak-color-text-inverse: #ffffff;
11
+ --ak-color-bg: #f6f5f1;
12
+ --ak-color-surface: #fffdf8;
13
+ --ak-color-surface-muted: #eef1ed;
14
+ --ak-color-surface-raised: #ffffff;
15
+ --ak-color-surface-overlay: rgba(255, 253, 248, 0.9);
16
+ --ak-color-border-subtle: #e4dfd6;
17
+ --ak-color-border: #d4cabd;
18
+ --ak-color-border-strong: #aa9a88;
19
+ --ak-color-success: #39845b;
20
+ --ak-color-success-soft: rgba(57, 132, 91, 0.16);
21
+ --ak-color-success-ink: #22583b;
22
+ --ak-color-warning: #b7791f;
23
+ --ak-color-warning-soft: rgba(183, 121, 31, 0.17);
24
+ --ak-color-warning-ink: #74430f;
25
+ --ak-color-danger: #ba3f4a;
26
+ --ak-color-danger-soft: rgba(186, 63, 74, 0.15);
27
+ --ak-color-danger-ink: #7b2230;
28
+ --ak-color-info: #315f9f;
29
+ --ak-color-info-soft: rgba(49, 95, 159, 0.16);
30
+ --ak-color-info-ink: #1f416f;
31
+ --ak-color-link: #274f86;
32
+ --ak-color-link-hover: #1f416f;
33
+ --ak-color-focus-ring: rgba(49, 95, 159, 0.22);
34
+ --ak-color-disabled-bg: #ece7df;
35
+ --ak-color-disabled-surface: #f8f4ef;
36
+ --ak-color-disabled-border: #ddd4c9;
37
+ --ak-color-disabled-text: #a0968a;
38
+ --ak-color-selected: #dfeafa;
39
+ --ak-color-selected-border: #8eacd8;
40
+ --ak-color-hover: rgba(49, 95, 159, 0.07);
41
+ --ak-color-active: rgba(49, 95, 159, 0.13);
42
+ --ak-color-backdrop: rgba(34, 37, 44, 0.46);
43
+ --ak-color-fg: var(--ak-color-text);
44
+ --ak-color-muted: var(--ak-color-text-muted);
45
+ color-scheme: light;
46
+ }
package/src/themes/presets/ginger.css ADDED
@@ -0,0 +1,46 @@
1
+ [data-theme="ginger"] {
2
+ --ak-color-primary: #c65f1a;
3
+ --ak-color-primary-hover: #a94c12;
4
+ --ak-color-primary-active: #8f3d0d;
5
+ --ak-color-primary-soft: #ffe2c5;
6
+ --ak-color-primary-ink: #74300c;
7
+ --ak-color-text: #2e251f;
8
+ --ak-color-text-muted: #6f5d51;
9
+ --ak-color-text-subtle: #9a887b;
10
+ --ak-color-text-inverse: #fff7ef;
11
+ --ak-color-bg: #fbf2e8;
12
+ --ak-color-surface: #fff8f1;
13
+ --ak-color-surface-muted: #f6e6d5;
14
+ --ak-color-surface-raised: #fffbf7;
15
+ --ak-color-surface-overlay: rgba(255, 248, 241, 0.9);
16
+ --ak-color-border-subtle: #eed7c2;
17
+ --ak-color-border: #dfbea1;
18
+ --ak-color-border-strong: #c79466;
19
+ --ak-color-success: #3f8f55;
20
+ --ak-color-success-soft: rgba(63, 143, 85, 0.16);
21
+ --ak-color-success-ink: #225f35;
22
+ --ak-color-warning: #bd7b10;
23
+ --ak-color-warning-soft: rgba(189, 123, 16, 0.18);
24
+ --ak-color-warning-ink: #704005;
25
+ --ak-color-danger: #c43f39;
26
+ --ak-color-danger-soft: rgba(196, 63, 57, 0.15);
27
+ --ak-color-danger-ink: #85221f;
28
+ --ak-color-info: #247f9a;
29
+ --ak-color-info-soft: rgba(36, 127, 154, 0.16);
30
+ --ak-color-info-ink: #15576b;
31
+ --ak-color-link: #a94c12;
32
+ --ak-color-link-hover: #8f3d0d;
33
+ --ak-color-focus-ring: rgba(198, 95, 26, 0.22);
34
+ --ak-color-disabled-bg: #f0e1d3;
35
+ --ak-color-disabled-surface: #f8eee4;
36
+ --ak-color-disabled-border: #e2ccba;
37
+ --ak-color-disabled-text: #aa9584;
38
+ --ak-color-selected: #ffe0bf;
39
+ --ak-color-selected-border: #df9b5c;
40
+ --ak-color-hover: rgba(198, 95, 26, 0.08);
41
+ --ak-color-active: rgba(198, 95, 26, 0.14);
42
+ --ak-color-backdrop: rgba(48, 34, 23, 0.46);
43
+ --ak-color-fg: var(--ak-color-text);
44
+ --ak-color-muted: var(--ak-color-text-muted);
45
+ color-scheme: light;
46
+ }
package/src/themes/presets/index.css ADDED
@@ -0,0 +1,5 @@
1
+ @import "./tabby.css";
2
+ @import "./ginger.css";
3
+ @import "./tuxedo.css";
4
+ @import "./calico.css";
5
+ @import "./torty.css";
package/src/themes/presets/tabby.css ADDED
@@ -0,0 +1,46 @@
1
+ [data-theme="tabby"] {
2
+ --ak-color-primary: #8a5a32;
3
+ --ak-color-primary-hover: #734727;
4
+ --ak-color-primary-active: #5f351d;
5
+ --ak-color-primary-soft: #f3dfc9;
6
+ --ak-color-primary-ink: #5a351d;
7
+ --ak-color-text: #2f2923;
8
+ --ak-color-text-muted: #6d6258;
9
+ --ak-color-text-subtle: #9a8d80;
10
+ --ak-color-text-inverse: #fffaf4;
11
+ --ak-color-bg: #f8f3ec;
12
+ --ak-color-surface: #fffaf4;
13
+ --ak-color-surface-muted: #f1e7da;
14
+ --ak-color-surface-raised: #fffdf9;
15
+ --ak-color-surface-overlay: rgba(255, 250, 244, 0.9);
16
+ --ak-color-border-subtle: #eadccd;
17
+ --ak-color-border: #dac7b3;
18
+ --ak-color-border-strong: #b99f84;
19
+ --ak-color-success: #3f8f5a;
20
+ --ak-color-success-soft: rgba(63, 143, 90, 0.16);
21
+ --ak-color-success-ink: #23623a;
22
+ --ak-color-warning: #b7791f;
23
+ --ak-color-warning-soft: rgba(183, 121, 31, 0.17);
24
+ --ak-color-warning-ink: #74430f;
25
+ --ak-color-danger: #c2413d;
26
+ --ak-color-danger-soft: rgba(194, 65, 61, 0.15);
27
+ --ak-color-danger-ink: #842522;
28
+ --ak-color-info: #2f7f9f;
29
+ --ak-color-info-soft: rgba(47, 127, 159, 0.16);
30
+ --ak-color-info-ink: #1f586f;
31
+ --ak-color-link: #754a29;
32
+ --ak-color-link-hover: #5f351d;
33
+ --ak-color-focus-ring: rgba(138, 90, 50, 0.22);
34
+ --ak-color-disabled-bg: #eee4d8;
35
+ --ak-color-disabled-surface: #f7efe6;
36
+ --ak-color-disabled-border: #ddcebd;
37
+ --ak-color-disabled-text: #a79787;
38
+ --ak-color-selected: #f1ddc6;
39
+ --ak-color-selected-border: #c59f78;
40
+ --ak-color-hover: rgba(138, 90, 50, 0.08);
41
+ --ak-color-active: rgba(138, 90, 50, 0.14);
42
+ --ak-color-backdrop: rgba(45, 35, 26, 0.46);
43
+ --ak-color-fg: var(--ak-color-text);
44
+ --ak-color-muted: var(--ak-color-text-muted);
45
+ color-scheme: light;
46
+ }
package/src/themes/presets/torty.css ADDED
@@ -0,0 +1,49 @@
1
+ [data-theme="torty"] {
2
+ --ak-color-primary: #d19a4a;
3
+ --ak-color-primary-hover: #e0ad62;
4
+ --ak-color-primary-active: #b97f2d;
5
+ --ak-color-primary-soft: rgba(209, 154, 74, 0.2);
6
+ --ak-color-primary-ink: #ffefd4;
7
+ --ak-color-text: #f1eadf;
8
+ --ak-color-text-muted: #c6b8a7;
9
+ --ak-color-text-subtle: #958777;
10
+ --ak-color-text-inverse: #201914;
11
+ --ak-color-bg: #201914;
12
+ --ak-color-surface: #2a211b;
13
+ --ak-color-surface-muted: #352a22;
14
+ --ak-color-surface-raised: #403228;
15
+ --ak-color-surface-overlay: rgba(42, 33, 27, 0.9);
16
+ --ak-color-border-subtle: #46372b;
17
+ --ak-color-border: #5b4838;
18
+ --ak-color-border-strong: #88705a;
19
+ --ak-color-success: #95d39c;
20
+ --ak-color-success-soft: rgba(149, 211, 156, 0.18);
21
+ --ak-color-success-ink: #e5fbe8;
22
+ --ak-color-warning: #f0c36e;
23
+ --ak-color-warning-soft: rgba(240, 195, 110, 0.18);
24
+ --ak-color-warning-ink: #fff2d3;
25
+ --ak-color-danger: #ee8b82;
26
+ --ak-color-danger-soft: rgba(238, 139, 130, 0.18);
27
+ --ak-color-danger-ink: #ffe3df;
28
+ --ak-color-info: #83c7d8;
29
+ --ak-color-info-soft: rgba(131, 199, 216, 0.18);
30
+ --ak-color-info-ink: #dff7fd;
31
+ --ak-color-link: #e0ad62;
32
+ --ak-color-link-hover: #f0c36e;
33
+ --ak-color-focus-ring: rgba(209, 154, 74, 0.24);
34
+ --ak-color-disabled-bg: #2f261f;
35
+ --ak-color-disabled-surface: #2a211b;
36
+ --ak-color-disabled-border: #4a3b2f;
37
+ --ak-color-disabled-text: #87796a;
38
+ --ak-color-selected: rgba(209, 154, 74, 0.16);
39
+ --ak-color-selected-border: #d19a4a;
40
+ --ak-color-hover: rgba(241, 234, 223, 0.07);
41
+ --ak-color-active: rgba(241, 234, 223, 0.13);
42
+ --ak-color-backdrop: rgba(13, 9, 6, 0.68);
43
+ --ak-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(255, 255, 255, 0.025);
44
+ --ak-shadow-md: 0 16px 40px -24px rgba(0, 0, 0, 0.68), 0 4px 14px -8px rgba(0, 0, 0, 0.46);
45
+ --ak-shadow-lg: 0 30px 78px -38px rgba(0, 0, 0, 0.76), 0 14px 34px -20px rgba(0, 0, 0, 0.56);
46
+ --ak-color-fg: var(--ak-color-text);
47
+ --ak-color-muted: var(--ak-color-text-muted);
48
+ color-scheme: dark;
49
+ }
package/src/themes/presets/tuxedo.css ADDED
@@ -0,0 +1,49 @@
1
+ [data-theme="tuxedo"] {
2
+ --ak-color-primary: #f8fafc;
3
+ --ak-color-primary-hover: #e5e7eb;
4
+ --ak-color-primary-active: #cbd5e1;
5
+ --ak-color-primary-soft: rgba(248, 250, 252, 0.16);
6
+ --ak-color-primary-ink: #ffffff;
7
+ --ak-color-text: #f8fafc;
8
+ --ak-color-text-muted: #b7c0cc;
9
+ --ak-color-text-subtle: #85909e;
10
+ --ak-color-text-inverse: #090b0f;
11
+ --ak-color-bg: #090b0f;
12
+ --ak-color-surface: #11141a;
13
+ --ak-color-surface-muted: #1a1f27;
14
+ --ak-color-surface-raised: #202630;
15
+ --ak-color-surface-overlay: rgba(17, 20, 26, 0.9);
16
+ --ak-color-border-subtle: #252b35;
17
+ --ak-color-border: #373f4d;
18
+ --ak-color-border-strong: #636f80;
19
+ --ak-color-success: #7dd3a2;
20
+ --ak-color-success-soft: rgba(125, 211, 162, 0.18);
21
+ --ak-color-success-ink: #d8fbe7;
22
+ --ak-color-warning: #f4c76b;
23
+ --ak-color-warning-soft: rgba(244, 199, 107, 0.18);
24
+ --ak-color-warning-ink: #fff1cc;
25
+ --ak-color-danger: #f28b86;
26
+ --ak-color-danger-soft: rgba(242, 139, 134, 0.18);
27
+ --ak-color-danger-ink: #ffe0de;
28
+ --ak-color-info: #8bc9f2;
29
+ --ak-color-info-soft: rgba(139, 201, 242, 0.18);
30
+ --ak-color-info-ink: #dff2ff;
31
+ --ak-color-link: #f8fafc;
32
+ --ak-color-link-hover: #dbeafe;
33
+ --ak-color-focus-ring: rgba(248, 250, 252, 0.22);
34
+ --ak-color-disabled-bg: #171b22;
35
+ --ak-color-disabled-surface: #11141a;
36
+ --ak-color-disabled-border: #2a303a;
37
+ --ak-color-disabled-text: #747f8f;
38
+ --ak-color-selected: rgba(248, 250, 252, 0.13);
39
+ --ak-color-selected-border: #e5e7eb;
40
+ --ak-color-hover: rgba(248, 250, 252, 0.07);
41
+ --ak-color-active: rgba(248, 250, 252, 0.13);
42
+ --ak-color-backdrop: rgba(0, 0, 0, 0.68);
43
+ --ak-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.36), 0 0 0 1px rgba(255, 255, 255, 0.03);
44
+ --ak-shadow-md: 0 16px 40px -24px rgba(0, 0, 0, 0.7), 0 4px 14px -8px rgba(0, 0, 0, 0.48);
45
+ --ak-shadow-lg: 0 30px 78px -38px rgba(0, 0, 0, 0.78), 0 14px 34px -20px rgba(0, 0, 0, 0.58);
46
+ --ak-color-fg: var(--ak-color-text);
47
+ --ak-color-muted: var(--ak-color-text-muted);
48
+ color-scheme: dark;
49
+ }