@react-fabric/core 1.0.0-beta.5 → 1.0.0-beta.51

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 (373) hide show
  1. package/{src/components/actionLabel/ActionLabel.module.css → css/components/_actionLabel.css} +4 -4
  2. package/{src/overlays/alert/Alert.module.css → css/components/_alert.css} +3 -3
  3. package/{src/components/animations/Animations.module.css → css/components/_animations.css} +9 -9
  4. package/{src/components/avatar/Avatar.module.css → css/components/_avatar.css} +11 -11
  5. package/{src/components/badge/Badge.module.css → css/components/_badge.css} +19 -17
  6. package/{src/components/breadcrumbs/Breadcrumbs.module.css → css/components/_breadcrumbs.css} +49 -44
  7. package/{src/components/button/Button.module.css → css/components/_button.css} +69 -79
  8. package/{src/components/card/Card.module.css → css/components/_card.css} +50 -28
  9. package/{src/components/chip/Chip.module.css → css/components/_chip.css} +14 -10
  10. package/{src/components/collapsable/Collapsable.module.css → css/components/_collapsable.css} +3 -3
  11. package/css/components/_divider.css +38 -0
  12. package/{src/components/dropdown/Dropdown.module.css → css/components/_dropdown.css} +2 -2
  13. package/{src/overlays/flyout/Flyout.module.css → css/components/_flyout.css} +6 -6
  14. package/{src/components/icon/Icon.module.css → css/components/_icon.css} +8 -5
  15. package/{src/components/media/Media.module.css → css/components/_media.css} +17 -17
  16. package/{src/components/menu/Menu.module.css → css/components/_menu.css} +19 -20
  17. package/{src/overlays/message/Message.module.css → css/components/_message.css} +2 -2
  18. package/{src/components/meter/Meter.module.css → css/components/_meter.css} +10 -10
  19. package/{src/overlays/modal/Modal.module.css → css/components/_modal.css} +6 -6
  20. package/{src/components/panel/Panel.module.css → css/components/_panel.css} +17 -17
  21. package/{src/components/progress/Progress.module.css → css/components/_progress.css} +7 -10
  22. package/{src/components/tabpanel/TabPanel.module.css → css/components/_tabPanel.css} +73 -84
  23. package/{src/overlays/toast/Toast.module.css → css/components/_toast.css} +2 -2
  24. package/css/components/_tooltip.css +29 -0
  25. package/{src/core/content/Content.module.css → css/components/index.css} +25 -18
  26. package/{src/core/aside/Aside.module.css → css/core/_aside.css} +56 -42
  27. package/{src/core/section/Section.module.css → css/core/_content.css} +5 -3
  28. package/{src/core/boundary/ErrorBoundary.module.css → css/core/_errorboundary.css} +9 -9
  29. package/{src/core/headfoot/HeadFoot.module.css → css/core/_headfoot.css} +4 -10
  30. package/{src/core/page/Page.module.css → css/core/_page.css} +10 -14
  31. package/{src/core/responsive/Responsive.module.css → css/core/_responsive.css} +10 -10
  32. package/css/core/_section.css +28 -0
  33. package/{src/core/theme/Theme.module.css → css/core/_theme.css} +3 -3
  34. package/{src/typography/Typography.module.css → css/core/_typography.css} +14 -12
  35. package/{src/core/viewport/Viewport.module.css → css/core/_viewport.css} +7 -3
  36. package/css/core/index.css +33 -0
  37. package/css/reset/_gradients.css +8 -8
  38. package/css/reset/_reset.css +42 -224
  39. package/css/reset/_text.css +14 -29
  40. package/css/reset/_theme.css +331 -52
  41. package/css/reset/index.css +4 -4
  42. package/css/styles.css +7 -6
  43. package/css/theme/_colors.css +320 -0
  44. package/css/theme/_utilities.css +530 -0
  45. package/css/theme/index.css +45 -0
  46. package/dist/cjs/components/actionLabel/ActionLabel.js +3 -3
  47. package/dist/cjs/components/animations/Animations.js +29 -18
  48. package/dist/cjs/components/avatar/Avatar.js +10 -13
  49. package/dist/cjs/components/avatar/AvatarGroup.js +3 -3
  50. package/dist/cjs/components/badge/Badge.js +5 -5
  51. package/dist/cjs/components/breadcrumbs/Breadcrumbs.js +10 -8
  52. package/dist/cjs/components/button/Button.js +18 -14
  53. package/dist/cjs/components/button/ButtonGroup.js +4 -3
  54. package/dist/cjs/components/button/ConfirmButton.js +10 -3
  55. package/dist/cjs/components/button/ToggleButtonGroup.js +3 -3
  56. package/dist/cjs/components/callout/Callout.js +16 -4
  57. package/dist/cjs/components/card/Card.js +14 -10
  58. package/dist/cjs/components/card/CardCover.js +10 -5
  59. package/dist/cjs/components/card/FlipContent.js +35 -0
  60. package/dist/cjs/components/chip/Chip.js +11 -7
  61. package/dist/cjs/components/collapsable/Collapsable.js +6 -6
  62. package/dist/cjs/components/divider/Divider.js +11 -7
  63. package/dist/cjs/components/dropdown/Dropdown.js +6 -9
  64. package/dist/cjs/components/dropdown/DropdownTool.js +4 -3
  65. package/dist/cjs/components/empty/EmptyContent.js +8 -5
  66. package/dist/cjs/components/icon/Icon.js +17 -15
  67. package/dist/cjs/components/media/Media.js +116 -75
  68. package/dist/cjs/components/menu/ContextMenu.js +30 -10
  69. package/dist/cjs/components/menu/Menu.js +44 -21
  70. package/dist/cjs/components/menu/MenuItem.js +30 -16
  71. package/dist/cjs/components/meter/Meter.js +2 -3
  72. package/dist/cjs/components/navigator/Navigator.js +26 -13
  73. package/dist/cjs/components/panel/Panel.js +10 -9
  74. package/dist/cjs/components/panel/PanelGroup.js +1 -2
  75. package/dist/cjs/components/progress/ProgressBar.js +10 -9
  76. package/dist/cjs/components/progress/ProgressCircle.js +9 -7
  77. package/dist/cjs/components/tabpanel/Tab.js +58 -38
  78. package/dist/cjs/components/tabpanel/TabPanel.js +20 -16
  79. package/dist/cjs/context/Global.js +3 -0
  80. package/dist/cjs/context/NotificationCenter.js +3 -3
  81. package/dist/cjs/core/aside/Aside.js +11 -10
  82. package/dist/cjs/core/boundary/ErrorBoundary.js +6 -7
  83. package/dist/cjs/core/boundary/ErrorIcon.js +1 -2
  84. package/dist/cjs/core/content/Content.js +9 -7
  85. package/dist/cjs/core/headfoot/HeadFoot.js +2 -20
  86. package/dist/cjs/core/page/Page.js +16 -30
  87. package/dist/cjs/core/responsive/Responsive.js +5 -5
  88. package/dist/cjs/core/section/Section.js +1 -2
  89. package/dist/cjs/core/theme/ThemeProvider.js +11 -9
  90. package/dist/cjs/core/viewport/Viewport.js +4 -2
  91. package/dist/cjs/hooks/useDebounce.js +1 -1
  92. package/dist/cjs/hooks/useEffectDebugger.js +2 -2
  93. package/dist/cjs/hooks/useNavigator.js +6 -4
  94. package/dist/cjs/hooks/useResizeObserver.js +1 -1
  95. package/dist/cjs/hotkeys/HotKeyLabel.js +1 -1
  96. package/dist/cjs/hotkeys/HotKeyWrapper.js +3 -1
  97. package/dist/cjs/index.js +8 -2
  98. package/dist/cjs/overlays/alert/Alert.js +20 -14
  99. package/dist/cjs/overlays/flyout/Flyout.js +49 -60
  100. package/dist/cjs/overlays/message/Message.js +6 -3
  101. package/dist/cjs/overlays/modal/Modal.js +16 -12
  102. package/dist/cjs/overlays/toast/Toast.js +17 -9
  103. package/dist/cjs/overlays/tooltip/Tooltip.js +24 -11
  104. package/dist/cjs/types/icons.js +6 -1
  105. package/dist/cjs/typography/Abbr.js +4 -5
  106. package/dist/cjs/typography/{Link.js → Anchor.js} +5 -4
  107. package/dist/cjs/typography/Mark.js +2 -3
  108. package/dist/cjs/typography/Text.js +3 -4
  109. package/dist/cjs/typography/Title.js +3 -3
  110. package/dist/cjs/utils/cloneElement.js +47 -0
  111. package/dist/cjs/utils/getColor.js +1 -18
  112. package/dist/esm/components/actionLabel/ActionLabel.js +3 -3
  113. package/dist/esm/components/animations/Animations.js +30 -19
  114. package/dist/esm/components/avatar/Avatar.js +11 -14
  115. package/dist/esm/components/avatar/AvatarGroup.js +3 -3
  116. package/dist/esm/components/badge/Badge.js +5 -5
  117. package/dist/esm/components/breadcrumbs/Breadcrumbs.js +10 -8
  118. package/dist/esm/components/button/Button.js +18 -14
  119. package/dist/esm/components/button/ButtonGroup.js +5 -4
  120. package/dist/esm/components/button/ConfirmButton.js +10 -3
  121. package/dist/esm/components/button/ToggleButtonGroup.js +4 -4
  122. package/dist/esm/components/callout/Callout.js +16 -4
  123. package/dist/esm/components/card/Card.js +15 -11
  124. package/dist/esm/components/card/CardCover.js +10 -5
  125. package/dist/esm/components/card/FlipContent.js +35 -0
  126. package/dist/esm/components/chip/Chip.js +12 -8
  127. package/dist/esm/components/collapsable/Collapsable.js +6 -6
  128. package/dist/esm/components/divider/Divider.js +12 -8
  129. package/dist/esm/components/dropdown/Dropdown.js +6 -9
  130. package/dist/esm/components/dropdown/DropdownTool.js +4 -3
  131. package/dist/esm/components/empty/EmptyContent.js +8 -5
  132. package/dist/esm/components/icon/Icon.js +17 -15
  133. package/dist/esm/components/media/Media.js +117 -76
  134. package/dist/esm/components/menu/ContextMenu.js +32 -12
  135. package/dist/esm/components/menu/Menu.js +46 -23
  136. package/dist/esm/components/menu/MenuItem.js +24 -10
  137. package/dist/esm/components/meter/Meter.js +2 -3
  138. package/dist/esm/components/navigator/Navigator.js +26 -13
  139. package/dist/esm/components/panel/Panel.js +10 -9
  140. package/dist/esm/components/panel/PanelGroup.js +1 -2
  141. package/dist/esm/components/progress/ProgressBar.js +10 -9
  142. package/dist/esm/components/progress/ProgressCircle.js +9 -7
  143. package/dist/esm/components/tabpanel/Tab.js +59 -39
  144. package/dist/esm/components/tabpanel/TabPanel.js +20 -16
  145. package/dist/esm/context/Global.js +3 -0
  146. package/dist/esm/context/NotificationCenter.js +3 -3
  147. package/dist/esm/core/aside/Aside.js +11 -10
  148. package/dist/esm/core/boundary/ErrorBoundary.js +6 -7
  149. package/dist/esm/core/boundary/ErrorIcon.js +1 -2
  150. package/dist/esm/core/content/Content.js +9 -7
  151. package/dist/esm/core/headfoot/HeadFoot.js +2 -20
  152. package/dist/esm/core/page/Page.js +16 -30
  153. package/dist/esm/core/responsive/Responsive.js +5 -5
  154. package/dist/esm/core/section/Section.js +1 -2
  155. package/dist/esm/core/theme/ThemeProvider.js +11 -9
  156. package/dist/esm/core/viewport/Viewport.js +4 -2
  157. package/dist/esm/hooks/useDebounce.js +1 -1
  158. package/dist/esm/hooks/useEffectDebugger.js +2 -2
  159. package/dist/esm/hooks/useNavigator.js +7 -5
  160. package/dist/esm/hooks/useResizeObserver.js +1 -1
  161. package/dist/esm/hotkeys/HotKeyLabel.js +1 -1
  162. package/dist/esm/hotkeys/HotKeyWrapper.js +3 -1
  163. package/dist/esm/index.js +4 -1
  164. package/dist/esm/overlays/alert/Alert.js +21 -15
  165. package/dist/esm/overlays/flyout/Flyout.js +52 -63
  166. package/dist/esm/overlays/message/Message.js +7 -4
  167. package/dist/esm/overlays/modal/Modal.js +17 -13
  168. package/dist/esm/overlays/toast/Toast.js +18 -10
  169. package/dist/esm/overlays/tooltip/Tooltip.js +24 -11
  170. package/dist/esm/types/icons.js +6 -1
  171. package/dist/esm/typography/Abbr.js +4 -5
  172. package/dist/esm/typography/{Link.js → Anchor.js} +6 -5
  173. package/dist/esm/typography/Mark.js +2 -3
  174. package/dist/esm/typography/Text.js +4 -5
  175. package/dist/esm/typography/Title.js +4 -4
  176. package/dist/esm/utils/cloneElement.js +47 -0
  177. package/dist/esm/utils/getColor.js +2 -16
  178. package/dist/types/components/actionLabel/ActionLabel.d.ts +2 -2
  179. package/dist/types/components/animations/Animations.d.ts +5 -5
  180. package/dist/types/components/avatar/Avatar.d.ts +3 -3
  181. package/dist/types/components/badge/Badge.d.ts +5 -1
  182. package/dist/types/components/breadcrumbs/Breadcrumbs.d.ts +2 -2
  183. package/dist/types/components/button/Button.d.ts +7 -5
  184. package/dist/types/components/button/ButtonGroup.d.ts +2 -2
  185. package/dist/types/components/button/ConfirmButton.d.ts +6 -1
  186. package/dist/types/components/callout/Callout.d.ts +4 -3
  187. package/dist/types/components/card/Card.d.ts +8 -4
  188. package/dist/types/components/card/FlipContent.d.ts +7 -0
  189. package/dist/types/components/chip/Chip.d.ts +3 -3
  190. package/dist/types/components/collapsable/Collapsable.d.ts +7 -3
  191. package/dist/types/components/divider/Divider.d.ts +11 -7
  192. package/dist/types/components/dropdown/DropdownTool.d.ts +2 -1
  193. package/dist/types/components/empty/EmptyContent.d.ts +6 -2
  194. package/dist/types/components/icon/Icon.d.ts +5 -4
  195. package/dist/types/components/index.d.ts +2 -1
  196. package/dist/types/components/media/Media.d.ts +2 -2
  197. package/dist/types/components/menu/ContextMenu.d.ts +2 -1
  198. package/dist/types/components/menu/MenuItem.d.ts +1 -1
  199. package/dist/types/components/menu/types.d.ts +3 -2
  200. package/dist/types/components/navigator/Navigator.d.ts +7 -4
  201. package/dist/types/components/panel/Panel.d.ts +0 -1
  202. package/dist/types/components/progress/ProgressBar.d.ts +3 -3
  203. package/dist/types/components/progress/ProgressCircle.d.ts +3 -3
  204. package/dist/types/components/tabpanel/Tab.d.ts +5 -5
  205. package/dist/types/components/tabpanel/TabPanel.d.ts +10 -1
  206. package/dist/types/core/boundary/ErrorBoundary.d.ts +1 -1
  207. package/dist/types/core/content/Content.d.ts +3 -2
  208. package/dist/types/core/headfoot/HeadFoot.d.ts +1 -9
  209. package/dist/types/core/page/Page.d.ts +3 -3
  210. package/dist/types/core/responsive/Responsive.d.ts +6 -2
  211. package/dist/types/core/theme/ThemeProvider.d.ts +4 -4
  212. package/dist/types/hooks/useOverlayService.d.ts +3 -5
  213. package/dist/types/hooks/useResize.d.ts +1 -1
  214. package/dist/types/hooks/useResizeObserver.d.ts +1 -1
  215. package/dist/types/index.d.ts +3 -0
  216. package/dist/types/overlays/alert/Alert.d.ts +2 -3
  217. package/dist/types/overlays/flyout/Flyout.d.ts +3 -2
  218. package/dist/types/overlays/message/Message.d.ts +2 -3
  219. package/dist/types/overlays/modal/Modal.d.ts +12 -3
  220. package/dist/types/overlays/toast/Toast.d.ts +2 -3
  221. package/dist/types/overlays/tooltip/Tooltip.d.ts +2 -2
  222. package/dist/types/types/icons.d.ts +6 -1
  223. package/dist/types/types/index.d.ts +26 -6
  224. package/dist/types/typography/Abbr.d.ts +6 -3
  225. package/dist/types/typography/Anchor.d.ts +25 -0
  226. package/dist/types/typography/Mark.d.ts +2 -3
  227. package/dist/types/typography/index.d.ts +1 -1
  228. package/dist/types/utils/cloneElement.d.ts +2 -0
  229. package/dist/types/utils/getColor.d.ts +1 -4
  230. package/dist/types/utils/index.d.ts +1 -0
  231. package/package.json +11 -13
  232. package/src/components/actionLabel/ActionLabel.tsx +15 -6
  233. package/src/components/animations/Animations.tsx +29 -23
  234. package/src/components/avatar/Avatar.tsx +74 -88
  235. package/src/components/avatar/AvatarGroup.tsx +4 -4
  236. package/src/components/badge/Badge.tsx +11 -7
  237. package/src/components/breadcrumbs/Breadcrumbs.tsx +13 -9
  238. package/src/components/button/Button.tsx +27 -22
  239. package/src/components/button/ButtonGroup.tsx +7 -7
  240. package/src/components/button/ConfirmButton.tsx +19 -6
  241. package/src/components/button/ToggleButtonGroup.tsx +5 -5
  242. package/src/components/callout/Callout.tsx +28 -12
  243. package/src/components/card/Card.tsx +30 -15
  244. package/src/components/card/CardCover.tsx +11 -6
  245. package/src/components/card/FlipContent.tsx +69 -0
  246. package/src/components/chip/Chip.tsx +19 -13
  247. package/src/components/collapsable/Collapsable.tsx +12 -7
  248. package/src/components/divider/Divider.tsx +23 -16
  249. package/src/components/dropdown/Dropdown.tsx +6 -11
  250. package/src/components/dropdown/DropdownTool.tsx +5 -3
  251. package/src/components/empty/EmptyContent.tsx +21 -6
  252. package/src/components/icon/Icon.tsx +58 -67
  253. package/src/components/index.ts +2 -1
  254. package/src/components/media/Media.tsx +141 -106
  255. package/src/components/menu/ContextMenu.tsx +36 -11
  256. package/src/components/menu/Menu.tsx +56 -30
  257. package/src/components/menu/MenuItem.tsx +19 -9
  258. package/src/components/menu/types.ts +3 -2
  259. package/src/components/meter/Meter.tsx +2 -3
  260. package/src/components/navigator/Navigator.tsx +36 -7
  261. package/src/components/panel/Panel.tsx +10 -9
  262. package/src/components/panel/PanelGroup.tsx +1 -2
  263. package/src/components/progress/ProgressBar.tsx +13 -14
  264. package/src/components/progress/ProgressCircle.tsx +10 -13
  265. package/src/components/tabpanel/Tab.tsx +81 -64
  266. package/src/components/tabpanel/TabPanel.tsx +34 -12
  267. package/src/context/Global.tsx +4 -0
  268. package/src/context/NotificationCenter.tsx +3 -3
  269. package/src/core/aside/Aside.tsx +11 -10
  270. package/src/core/boundary/ErrorBoundary.tsx +8 -7
  271. package/src/core/boundary/ErrorIcon.tsx +1 -2
  272. package/src/core/content/Content.tsx +17 -12
  273. package/src/core/headfoot/HeadFoot.tsx +2 -35
  274. package/src/core/page/Page.tsx +18 -5
  275. package/src/core/responsive/Responsive.tsx +14 -7
  276. package/src/core/section/Section.tsx +1 -2
  277. package/src/core/theme/ThemeProvider.tsx +14 -13
  278. package/src/core/viewport/Viewport.tsx +1 -2
  279. package/src/hooks/useDebounce.ts +1 -1
  280. package/src/hooks/useEffectDebugger.ts +1 -2
  281. package/src/hooks/useNavigator.tsx +10 -5
  282. package/src/hooks/useOverlayService.tsx +12 -6
  283. package/src/hooks/useResize.ts +1 -1
  284. package/src/hooks/useResizeObserver.ts +13 -9
  285. package/src/hotkeys/HotKeyLabel.tsx +1 -1
  286. package/src/hotkeys/HotKeyWrapper.tsx +3 -1
  287. package/src/index.ts +4 -0
  288. package/src/overlays/alert/Alert.tsx +28 -32
  289. package/src/overlays/flyout/Flyout.tsx +71 -84
  290. package/src/overlays/message/Message.tsx +10 -7
  291. package/src/overlays/modal/Modal.tsx +37 -15
  292. package/src/overlays/toast/Toast.tsx +18 -27
  293. package/src/overlays/tooltip/Tooltip.tsx +43 -18
  294. package/src/types/icons.ts +13 -2
  295. package/src/types/index.ts +268 -27
  296. package/src/typography/Abbr.tsx +16 -10
  297. package/src/typography/{Link.tsx → Anchor.tsx} +8 -13
  298. package/src/typography/Mark.tsx +4 -9
  299. package/src/typography/Text.tsx +4 -12
  300. package/src/typography/Title.tsx +2 -6
  301. package/src/typography/index.ts +1 -1
  302. package/src/{overlays/tooltip/Tooltip.module.css → utils/cloneElement.ts} +21 -27
  303. package/src/utils/getColor.ts +1 -17
  304. package/src/utils/index.ts +1 -0
  305. package/css/index.js +0 -250
  306. package/css/tailwind/colors.ts +0 -158
  307. package/dist/cjs/components/actionLabel/ActionLabel.module.css +0 -1
  308. package/dist/cjs/components/animations/Animations.module.css +0 -1
  309. package/dist/cjs/components/avatar/Avatar.module.css +0 -1
  310. package/dist/cjs/components/badge/Badge.module.css +0 -1
  311. package/dist/cjs/components/breadcrumbs/Breadcrumbs.module.css +0 -1
  312. package/dist/cjs/components/button/Button.module.css +0 -1
  313. package/dist/cjs/components/card/Card.module.css +0 -1
  314. package/dist/cjs/components/chip/Chip.module.css +0 -1
  315. package/dist/cjs/components/collapsable/Collapsable.module.css +0 -1
  316. package/dist/cjs/components/dropdown/Dropdown.module.css +0 -1
  317. package/dist/cjs/components/icon/Icon.module.css +0 -1
  318. package/dist/cjs/components/media/Media.module.css +0 -1
  319. package/dist/cjs/components/menu/Menu.module.css +0 -1
  320. package/dist/cjs/components/meter/Meter.module.css +0 -1
  321. package/dist/cjs/components/panel/Panel.module.css +0 -1
  322. package/dist/cjs/components/progress/Progress.module.css +0 -1
  323. package/dist/cjs/components/tabpanel/TabPanel.module.css +0 -1
  324. package/dist/cjs/core/aside/Aside.module.css +0 -1
  325. package/dist/cjs/core/boundary/ErrorBoundary.module.css +0 -1
  326. package/dist/cjs/core/content/Content.module.css +0 -1
  327. package/dist/cjs/core/headfoot/HeadFoot.module.css +0 -1
  328. package/dist/cjs/core/page/Page.module.css +0 -1
  329. package/dist/cjs/core/responsive/Responsive.module.css +0 -1
  330. package/dist/cjs/core/section/Section.module.css +0 -1
  331. package/dist/cjs/core/theme/Theme.module.css +0 -1
  332. package/dist/cjs/core/viewport/Viewport.module.css +0 -1
  333. package/dist/cjs/overlays/alert/Alert.module.css +0 -1
  334. package/dist/cjs/overlays/flyout/Flyout.module.css +0 -1
  335. package/dist/cjs/overlays/message/Message.module.css +0 -1
  336. package/dist/cjs/overlays/modal/Modal.module.css +0 -1
  337. package/dist/cjs/overlays/toast/Toast.module.css +0 -1
  338. package/dist/cjs/overlays/tooltip/Tooltip.module.css +0 -1
  339. package/dist/cjs/typography/Typography.module.css +0 -1
  340. package/dist/esm/components/actionLabel/ActionLabel.module.css +0 -1
  341. package/dist/esm/components/animations/Animations.module.css +0 -1
  342. package/dist/esm/components/avatar/Avatar.module.css +0 -1
  343. package/dist/esm/components/badge/Badge.module.css +0 -1
  344. package/dist/esm/components/breadcrumbs/Breadcrumbs.module.css +0 -1
  345. package/dist/esm/components/button/Button.module.css +0 -1
  346. package/dist/esm/components/card/Card.module.css +0 -1
  347. package/dist/esm/components/chip/Chip.module.css +0 -1
  348. package/dist/esm/components/collapsable/Collapsable.module.css +0 -1
  349. package/dist/esm/components/dropdown/Dropdown.module.css +0 -1
  350. package/dist/esm/components/icon/Icon.module.css +0 -1
  351. package/dist/esm/components/media/Media.module.css +0 -1
  352. package/dist/esm/components/menu/Menu.module.css +0 -1
  353. package/dist/esm/components/meter/Meter.module.css +0 -1
  354. package/dist/esm/components/panel/Panel.module.css +0 -1
  355. package/dist/esm/components/progress/Progress.module.css +0 -1
  356. package/dist/esm/components/tabpanel/TabPanel.module.css +0 -1
  357. package/dist/esm/core/aside/Aside.module.css +0 -1
  358. package/dist/esm/core/boundary/ErrorBoundary.module.css +0 -1
  359. package/dist/esm/core/content/Content.module.css +0 -1
  360. package/dist/esm/core/headfoot/HeadFoot.module.css +0 -1
  361. package/dist/esm/core/page/Page.module.css +0 -1
  362. package/dist/esm/core/responsive/Responsive.module.css +0 -1
  363. package/dist/esm/core/section/Section.module.css +0 -1
  364. package/dist/esm/core/theme/Theme.module.css +0 -1
  365. package/dist/esm/core/viewport/Viewport.module.css +0 -1
  366. package/dist/esm/overlays/alert/Alert.module.css +0 -1
  367. package/dist/esm/overlays/flyout/Flyout.module.css +0 -1
  368. package/dist/esm/overlays/message/Message.module.css +0 -1
  369. package/dist/esm/overlays/modal/Modal.module.css +0 -1
  370. package/dist/esm/overlays/toast/Toast.module.css +0 -1
  371. package/dist/esm/overlays/tooltip/Tooltip.module.css +0 -1
  372. package/dist/esm/typography/Typography.module.css +0 -1
  373. package/dist/types/typography/Link.d.ts +0 -25
package/css/reset/_theme.css CHANGED
@@ -21,55 +21,12 @@
21
21
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
22
22
  */
23
23
 
24
- @layer colors {
25
- [data-color-scheme="light"] {
26
- --fabric-bg: theme(colors.white);
27
- --fabric-text: theme(colors.black);
28
- --fabric-input: color-mix(in lab, var(--fabric-bg) 90%, #fff);
29
- --fabric-input-focus: #fff;
30
- --fabric-shadow: #8ba0b0;
31
-
32
- color-scheme: light;
33
- }
34
-
35
- [data-color-scheme="dark"] {
36
- --fabric-bg: theme(colors.black);
37
- --fabric-text: theme(colors.white);
38
- --fabric-input: color-mix(in lab, var(--fabric-bg) 80%, #0a1218);
39
- --fabric-input-focus: color-mix(in lab, var(--fabric-bg) 60%, #0a1218);
40
- --fabric-shadow: #010101;
41
-
42
- color-scheme: dark;
43
- }
44
- }
45
-
46
- @layer reset {
24
+ @layer theme {
47
25
  :root {
48
- --black: theme(colors.black);
49
- --white: theme(colors.white);
50
- --scarlet: theme(colors.scarlet.DEFAULT);
51
- --pumpkin: theme(colors.pumpkin.DEFAULT);
52
- --marigold: theme(colors.marigold.DEFAULT);
53
- --avacado: theme(colors.avacado.DEFAULT);
54
- --jade: theme(colors.jade.DEFAULT);
55
- --denim: theme(colors.denim.DEFAULT);
56
- --iris: theme(colors.iris.DEFAULT);
57
- --lilac: theme(colors.lilac.DEFAULT);
58
- --coral: theme(colors.coral.DEFAULT);
59
- --wood: theme(colors.wood.DEFAULT);
60
- --silver: theme(colors.silver.DEFAULT);
61
- --steel: theme(colors.steel.DEFAULT);
62
- --olive: theme(colors.olive.DEFAULT);
63
- --sand: theme(colors.sand.DEFAULT);
64
- --info: theme(colors.info.DEFAULT);
65
- --danger: theme(colors.danger.DEFAULT);
66
- --success: theme(colors.success.DEFAULT);
67
- --warning: theme(colors.warning.DEFAULT);
68
-
69
26
  /* app default primary */
70
- --primary: theme(colors.denim.DEFAULT);
71
- --accent: theme(colors.jade.DEFAULT);
72
- --tint: theme(colors.silver.DEFAULT);
27
+ --color-primary: var(--color-denim-500);
28
+ --color-accent: var(--color-jade-500);
29
+ --color-tint: var(--color-silver-500);
73
30
 
74
31
  /* default rounding */
75
32
  --rounding: 0.25rem;
@@ -85,11 +42,6 @@
85
42
  --z-notifications: 60;
86
43
  }
87
44
 
88
- [data-color-scheme] {
89
- color: color-mix(in lab, var(--fabric-text) 95%, var(--tint));
90
- background-color: color-mix(in lab, var(--fabric-bg) 92%, var(--tint));
91
- }
92
-
93
45
  [data-rounding="sm"] {
94
46
  /* default rounding */
95
47
  --rounding: 2px;
@@ -107,4 +59,331 @@
107
59
  --rounding: 9999px;
108
60
  --rounding-cap: 0.5rem;
109
61
  }
62
+
63
+ [data-color-scheme="light"] {
64
+ --fabric-bg: var(--color-white);
65
+ --fabric-text: var(--color-black);
66
+ --fabric-input: color-mix(in lab, var(--fabric-bg) 90%, #fff);
67
+ --fabric-input-focus: #fff;
68
+ --fabric-shadow: #8ba0b0;
69
+
70
+ color-scheme: light;
71
+ }
72
+
73
+ [data-color-scheme="dark"] {
74
+ --fabric-bg: var(--color-black);
75
+ --fabric-text: var(--color-white);
76
+ --fabric-input: color-mix(in lab, var(--fabric-bg) 80%, #0a1218);
77
+ --fabric-input-focus: color-mix(in lab, var(--fabric-bg) 60%, #0a1218);
78
+ --fabric-shadow: #010101;
79
+
80
+ color-scheme: dark;
81
+ }
110
82
  }
83
+
84
+ @layer theme {
85
+ [data-color-scheme] {
86
+ /* primary */
87
+ --color-primary-50: color-mix(in oklab, var(--color-primary) 10%, var(--fabric-bg));
88
+ --color-primary-100: color-mix(in oklab, var(--color-primary) 27%, var(--fabric-bg));
89
+ --color-primary-200: color-mix(in oklab, var(--color-primary) 45%, var(--fabric-bg));
90
+ --color-primary-300: color-mix(in oklab, var(--color-primary) 62%, var(--fabric-bg));
91
+ --color-primary-400: color-mix(in oklab, var(--color-primary) 80%, var(--fabric-bg));
92
+ --color-primary-500: var(--color-primary);
93
+ --color-primary-600: color-mix(in oklab, var(--color-primary) 80%, var(--fabric-text));
94
+ --color-primary-700: color-mix(in oklab, var(--color-primary) 62%, var(--fabric-text));
95
+ --color-primary-800: color-mix(in oklab, var(--color-primary) 45%, var(--fabric-text));
96
+ --color-primary-900: color-mix(in oklab, var(--color-primary) 27%, var(--fabric-text));
97
+ --color-primary-950: color-mix(in oklab, var(--color-primary) 10%, var(--fabric-text));
98
+
99
+ /* accent */
100
+ --color-accent-50: color-mix(in oklab, var(--color-accent) 10%, var(--fabric-bg));
101
+ --color-accent-100: color-mix(in oklab, var(--color-accent) 27%, var(--fabric-bg));
102
+ --color-accent-200: color-mix(in oklab, var(--color-accent) 45%, var(--fabric-bg));
103
+ --color-accent-300: color-mix(in oklab, var(--color-accent) 62%, var(--fabric-bg));
104
+ --color-accent-400: color-mix(in oklab, var(--color-accent) 80%, var(--fabric-bg));
105
+ --color-accent-500: var(--color-accent);
106
+ --color-accent-600: color-mix(in oklab, var(--color-accent) 80%, var(--fabric-text));
107
+ --color-accent-700: color-mix(in oklab, var(--color-accent) 62%, var(--fabric-text));
108
+ --color-accent-800: color-mix(in oklab, var(--color-accent) 45%, var(--fabric-text));
109
+ --color-accent-900: color-mix(in oklab, var(--color-accent) 27%, var(--fabric-text));
110
+ --color-accent-950: color-mix(in oklab, var(--color-accent) 10%, var(--fabric-text));
111
+
112
+ /* tint */
113
+ --color-tint-50: color-mix(in oklab, var(--color-tint) 10%, var(--fabric-bg));
114
+ --color-tint-100: color-mix(in oklab, var(--color-tint) 27%, var(--fabric-bg));
115
+ --color-tint-200: color-mix(in oklab, var(--color-tint) 45%, var(--fabric-bg));
116
+ --color-tint-300: color-mix(in oklab, var(--color-tint) 62%, var(--fabric-bg));
117
+ --color-tint-400: color-mix(in oklab, var(--color-tint) 80%, var(--fabric-bg));
118
+ --color-tint-500: var(--color-tint);
119
+ --color-tint-600: color-mix(in oklab, var(--color-tint) 80%, var(--fabric-text));
120
+ --color-tint-700: color-mix(in oklab, var(--color-tint) 62%, var(--fabric-text));
121
+ --color-tint-800: color-mix(in oklab, var(--color-tint) 45%, var(--fabric-text));
122
+ --color-tint-900: color-mix(in oklab, var(--color-tint) 27%, var(--fabric-text));
123
+ --color-tint-950: color-mix(in oklab, var(--color-tint) 10%, var(--fabric-text));
124
+
125
+ /* silver */
126
+ --color-silver-50: color-mix(in oklab, var(--color-silver) 10%, var(--fabric-bg));
127
+ --color-silver-100: color-mix(in oklab, var(--color-silver) 27%, var(--fabric-bg));
128
+ --color-silver-200: color-mix(in oklab, var(--color-silver) 45%, var(--fabric-bg));
129
+ --color-silver-300: color-mix(in oklab, var(--color-silver) 62%, var(--fabric-bg));
130
+ --color-silver-400: color-mix(in oklab, var(--color-silver) 80%, var(--fabric-bg));
131
+ --color-silver-500: var(--color-silver);
132
+ --color-silver-600: color-mix(in oklab, var(--color-silver) 80%, var(--fabric-text));
133
+ --color-silver-700: color-mix(in oklab, var(--color-silver) 62%, var(--fabric-text));
134
+ --color-silver-800: color-mix(in oklab, var(--color-silver) 45%, var(--fabric-text));
135
+ --color-silver-900: color-mix(in oklab, var(--color-silver) 27%, var(--fabric-text));
136
+ --color-silver-950: color-mix(in oklab, var(--color-silver) 10%, var(--fabric-text));
137
+
138
+ /* steel */
139
+ --color-steel-50: color-mix(in oklab, var(--color-steel) 10%, var(--fabric-bg));
140
+ --color-steel-100: color-mix(in oklab, var(--color-steel) 27%, var(--fabric-bg));
141
+ --color-steel-200: color-mix(in oklab, var(--color-steel) 45%, var(--fabric-bg));
142
+ --color-steel-300: color-mix(in oklab, var(--color-steel) 62%, var(--fabric-bg));
143
+ --color-steel-400: color-mix(in oklab, var(--color-steel) 80%, var(--fabric-bg));
144
+ --color-steel-500: var(--color-steel);
145
+ --color-steel-600: color-mix(in oklab, var(--color-steel) 80%, var(--fabric-text));
146
+ --color-steel-700: color-mix(in oklab, var(--color-steel) 62%, var(--fabric-text));
147
+ --color-steel-800: color-mix(in oklab, var(--color-steel) 45%, var(--fabric-text));
148
+ --color-steel-900: color-mix(in oklab, var(--color-steel) 27%, var(--fabric-text));
149
+ --color-steel-950: color-mix(in oklab, var(--color-steel) 10%, var(--fabric-text));
150
+
151
+ /* olive */
152
+ --color-olive-50: color-mix(in oklab, var(--color-olive) 10%, var(--fabric-bg));
153
+ --color-olive-100: color-mix(in oklab, var(--color-olive) 27%, var(--fabric-bg));
154
+ --color-olive-200: color-mix(in oklab, var(--color-olive) 45%, var(--fabric-bg));
155
+ --color-olive-300: color-mix(in oklab, var(--color-olive) 62%, var(--fabric-bg));
156
+ --color-olive-400: color-mix(in oklab, var(--color-olive) 80%, var(--fabric-bg));
157
+ --color-olive-500: var(--color-olive);
158
+ --color-olive-600: color-mix(in oklab, var(--color-olive) 80%, var(--fabric-text));
159
+ --color-olive-700: color-mix(in oklab, var(--color-olive) 62%, var(--fabric-text));
160
+ --color-olive-800: color-mix(in oklab, var(--color-olive) 45%, var(--fabric-text));
161
+ --color-olive-900: color-mix(in oklab, var(--color-olive) 27%, var(--fabric-text));
162
+ --color-olive-950: color-mix(in oklab, var(--color-olive) 10%, var(--fabric-text));
163
+
164
+ /* sand */
165
+ --color-sand-50: color-mix(in oklab, var(--color-sand) 10%, var(--fabric-bg));
166
+ --color-sand-100: color-mix(in oklab, var(--color-sand) 27%, var(--fabric-bg));
167
+ --color-sand-200: color-mix(in oklab, var(--color-sand) 45%, var(--fabric-bg));
168
+ --color-sand-300: color-mix(in oklab, var(--color-sand) 62%, var(--fabric-bg));
169
+ --color-sand-400: color-mix(in oklab, var(--color-sand) 80%, var(--fabric-bg));
170
+ --color-sand-500: var(--color-sand);
171
+ --color-sand-600: color-mix(in oklab, var(--color-sand) 80%, var(--fabric-text));
172
+ --color-sand-700: color-mix(in oklab, var(--color-sand) 62%, var(--fabric-text));
173
+ --color-sand-800: color-mix(in oklab, var(--color-sand) 45%, var(--fabric-text));
174
+ --color-sand-900: color-mix(in oklab, var(--color-sand) 27%, var(--fabric-text));
175
+ --color-sand-950: color-mix(in oklab, var(--color-sand) 10%, var(--fabric-text));
176
+
177
+ /* info */
178
+ --color-info-50: color-mix(in oklab, var(--color-info) 10%, var(--fabric-bg));
179
+ --color-info-100: color-mix(in oklab, var(--color-info) 27%, var(--fabric-bg));
180
+ --color-info-200: color-mix(in oklab, var(--color-info) 45%, var(--fabric-bg));
181
+ --color-info-300: color-mix(in oklab, var(--color-info) 62%, var(--fabric-bg));
182
+ --color-info-400: color-mix(in oklab, var(--color-info) 80%, var(--fabric-bg));
183
+ --color-info-500: var(--color-info);
184
+ --color-info-600: color-mix(in oklab, var(--color-info) 80%, var(--fabric-text));
185
+ --color-info-700: color-mix(in oklab, var(--color-info) 62%, var(--fabric-text));
186
+ --color-info-800: color-mix(in oklab, var(--color-info) 45%, var(--fabric-text));
187
+ --color-info-900: color-mix(in oklab, var(--color-info) 27%, var(--fabric-text));
188
+ --color-info-950: color-mix(in oklab, var(--color-info) 10%, var(--fabric-text));
189
+
190
+ /* danger */
191
+ --color-danger-50: color-mix(in oklab, var(--color-danger) 10%, var(--fabric-bg));
192
+ --color-danger-100: color-mix(in oklab, var(--color-danger) 27%, var(--fabric-bg));
193
+ --color-danger-200: color-mix(in oklab, var(--color-danger) 45%, var(--fabric-bg));
194
+ --color-danger-300: color-mix(in oklab, var(--color-danger) 62%, var(--fabric-bg));
195
+ --color-danger-400: color-mix(in oklab, var(--color-danger) 80%, var(--fabric-bg));
196
+ --color-danger-500: var(--color-danger);
197
+ --color-danger-600: color-mix(in oklab, var(--color-danger) 80%, var(--fabric-text));
198
+ --color-danger-700: color-mix(in oklab, var(--color-danger) 62%, var(--fabric-text));
199
+ --color-danger-800: color-mix(in oklab, var(--color-danger) 45%, var(--fabric-text));
200
+ --color-danger-900: color-mix(in oklab, var(--color-danger) 27%, var(--fabric-text));
201
+ --color-danger-950: color-mix(in oklab, var(--color-danger) 10%, var(--fabric-text));
202
+
203
+ /* success */
204
+ --color-success-50: color-mix(in oklab, var(--color-success) 10%, var(--fabric-bg));
205
+ --color-success-100: color-mix(in oklab, var(--color-success) 27%, var(--fabric-bg));
206
+ --color-success-200: color-mix(in oklab, var(--color-success) 45%, var(--fabric-bg));
207
+ --color-success-300: color-mix(in oklab, var(--color-success) 62%, var(--fabric-bg));
208
+ --color-success-400: color-mix(in oklab, var(--color-success) 80%, var(--fabric-bg));
209
+ --color-success-500: var(--color-success);
210
+ --color-success-600: color-mix(in oklab, var(--color-success) 80%, var(--fabric-text));
211
+ --color-success-700: color-mix(in oklab, var(--color-success) 62%, var(--fabric-text));
212
+ --color-success-800: color-mix(in oklab, var(--color-success) 45%, var(--fabric-text));
213
+ --color-success-900: color-mix(in oklab, var(--color-success) 27%, var(--fabric-text));
214
+ --color-success-950: color-mix(in oklab, var(--color-success) 10%, var(--fabric-text));
215
+
216
+ /* warning */
217
+ --color-warning-50: color-mix(in oklab, var(--color-warning) 10%, var(--fabric-bg));
218
+ --color-warning-100: color-mix(in oklab, var(--color-warning) 27%, var(--fabric-bg));
219
+ --color-warning-200: color-mix(in oklab, var(--color-warning) 45%, var(--fabric-bg));
220
+ --color-warning-300: color-mix(in oklab, var(--color-warning) 62%, var(--fabric-bg));
221
+ --color-warning-400: color-mix(in oklab, var(--color-warning) 80%, var(--fabric-bg));
222
+ --color-warning-500: var(--color-warning);
223
+ --color-warning-600: color-mix(in oklab, var(--color-warning) 80%, var(--fabric-text));
224
+ --color-warning-700: color-mix(in oklab, var(--color-warning) 62%, var(--fabric-text));
225
+ --color-warning-800: color-mix(in oklab, var(--color-warning) 45%, var(--fabric-text));
226
+ --color-warning-900: color-mix(in oklab, var(--color-warning) 27%, var(--fabric-text));
227
+ --color-warning-950: color-mix(in oklab, var(--color-warning) 10%, var(--fabric-text));
228
+
229
+ /* scarlet */
230
+ --color-scarlet-50: color-mix(in oklab, var(--color-scarlet) 10%, var(--fabric-bg));
231
+ --color-scarlet-100: color-mix(in oklab, var(--color-scarlet) 27%, var(--fabric-bg));
232
+ --color-scarlet-200: color-mix(in oklab, var(--color-scarlet) 45%, var(--fabric-bg));
233
+ --color-scarlet-300: color-mix(in oklab, var(--color-scarlet) 62%, var(--fabric-bg));
234
+ --color-scarlet-400: color-mix(in oklab, var(--color-scarlet) 80%, var(--fabric-bg));
235
+ --color-scarlet-500: var(--color-scarlet);
236
+ --color-scarlet-600: color-mix(in oklab, var(--color-scarlet) 80%, var(--fabric-text));
237
+ --color-scarlet-700: color-mix(in oklab, var(--color-scarlet) 62%, var(--fabric-text));
238
+ --color-scarlet-800: color-mix(in oklab, var(--color-scarlet) 45%, var(--fabric-text));
239
+ --color-scarlet-900: color-mix(in oklab, var(--color-scarlet) 27%, var(--fabric-text));
240
+ --color-scarlet-950: color-mix(in oklab, var(--color-scarlet) 10%, var(--fabric-text));
241
+
242
+ /* pumpkin */
243
+ --color-pumpkin-50: color-mix(in oklab, var(--color-pumpkin) 10%, var(--fabric-bg));
244
+ --color-pumpkin-100: color-mix(in oklab, var(--color-pumpkin) 27%, var(--fabric-bg));
245
+ --color-pumpkin-200: color-mix(in oklab, var(--color-pumpkin) 45%, var(--fabric-bg));
246
+ --color-pumpkin-300: color-mix(in oklab, var(--color-pumpkin) 62%, var(--fabric-bg));
247
+ --color-pumpkin-400: color-mix(in oklab, var(--color-pumpkin) 80%, var(--fabric-bg));
248
+ --color-pumpkin-500: var(--color-pumpkin);
249
+ --color-pumpkin-600: color-mix(in oklab, var(--color-pumpkin) 80%, var(--fabric-text));
250
+ --color-pumpkin-700: color-mix(in oklab, var(--color-pumpkin) 62%, var(--fabric-text));
251
+ --color-pumpkin-800: color-mix(in oklab, var(--color-pumpkin) 45%, var(--fabric-text));
252
+ --color-pumpkin-900: color-mix(in oklab, var(--color-pumpkin) 27%, var(--fabric-text));
253
+ --color-pumpkin-950: color-mix(in oklab, var(--color-pumpkin) 10%, var(--fabric-text));
254
+
255
+ /* marigold */
256
+ --color-marigold-50: color-mix(in oklab, var(--color-marigold) 10%, var(--fabric-bg));
257
+ --color-marigold-100: color-mix(in oklab, var(--color-marigold) 27%, var(--fabric-bg));
258
+ --color-marigold-200: color-mix(in oklab, var(--color-marigold) 45%, var(--fabric-bg));
259
+ --color-marigold-300: color-mix(in oklab, var(--color-marigold) 62%, var(--fabric-bg));
260
+ --color-marigold-400: color-mix(in oklab, var(--color-marigold) 80%, var(--fabric-bg));
261
+ --color-marigold-500: var(--color-marigold);
262
+ --color-marigold-600: color-mix(in oklab, var(--color-marigold) 80%, var(--fabric-text));
263
+ --color-marigold-700: color-mix(in oklab, var(--color-marigold) 62%, var(--fabric-text));
264
+ --color-marigold-800: color-mix(in oklab, var(--color-marigold) 45%, var(--fabric-text));
265
+ --color-marigold-900: color-mix(in oklab, var(--color-marigold) 27%, var(--fabric-text));
266
+ --color-marigold-950: color-mix(in oklab, var(--color-marigold) 10%, var(--fabric-text));
267
+
268
+ /* avacado */
269
+ --color-avacado-50: color-mix(in oklab, var(--color-avacado) 10%, var(--fabric-bg));
270
+ --color-avacado-100: color-mix(in oklab, var(--color-avacado) 27%, var(--fabric-bg));
271
+ --color-avacado-200: color-mix(in oklab, var(--color-avacado) 45%, var(--fabric-bg));
272
+ --color-avacado-300: color-mix(in oklab, var(--color-avacado) 62%, var(--fabric-bg));
273
+ --color-avacado-400: color-mix(in oklab, var(--color-avacado) 80%, var(--fabric-bg));
274
+ --color-avacado-500: var(--color-avacado);
275
+ --color-avacado-600: color-mix(in oklab, var(--color-avacado) 80%, var(--fabric-text));
276
+ --color-avacado-700: color-mix(in oklab, var(--color-avacado) 62%, var(--fabric-text));
277
+ --color-avacado-800: color-mix(in oklab, var(--color-avacado) 45%, var(--fabric-text));
278
+ --color-avacado-900: color-mix(in oklab, var(--color-avacado) 27%, var(--fabric-text));
279
+ --color-avacado-950: color-mix(in oklab, var(--color-avacado) 10%, var(--fabric-text));
280
+
281
+ /* jade */
282
+ --color-jade-50: color-mix(in oklab, var(--color-jade) 10%, var(--fabric-bg));
283
+ --color-jade-100: color-mix(in oklab, var(--color-jade) 27%, var(--fabric-bg));
284
+ --color-jade-200: color-mix(in oklab, var(--color-jade) 45%, var(--fabric-bg));
285
+ --color-jade-300: color-mix(in oklab, var(--color-jade) 62%, var(--fabric-bg));
286
+ --color-jade-400: color-mix(in oklab, var(--color-jade) 80%, var(--fabric-bg));
287
+ --color-jade-500: var(--color-jade);
288
+ --color-jade-600: color-mix(in oklab, var(--color-jade) 80%, var(--fabric-text));
289
+ --color-jade-700: color-mix(in oklab, var(--color-jade) 62%, var(--fabric-text));
290
+ --color-jade-800: color-mix(in oklab, var(--color-jade) 45%, var(--fabric-text));
291
+ --color-jade-900: color-mix(in oklab, var(--color-jade) 27%, var(--fabric-text));
292
+ --color-jade-950: color-mix(in oklab, var(--color-jade) 10%, var(--fabric-text));
293
+
294
+ /* denim */
295
+ --color-denim-50: color-mix(in oklab, var(--color-denim) 10%, var(--fabric-bg));
296
+ --color-denim-100: color-mix(in oklab, var(--color-denim) 27%, var(--fabric-bg));
297
+ --color-denim-200: color-mix(in oklab, var(--color-denim) 45%, var(--fabric-bg));
298
+ --color-denim-300: color-mix(in oklab, var(--color-denim) 62%, var(--fabric-bg));
299
+ --color-denim-400: color-mix(in oklab, var(--color-denim) 80%, var(--fabric-bg));
300
+ --color-denim-500: var(--color-denim);
301
+ --color-denim-600: color-mix(in oklab, var(--color-denim) 80%, var(--fabric-text));
302
+ --color-denim-700: color-mix(in oklab, var(--color-denim) 62%, var(--fabric-text));
303
+ --color-denim-800: color-mix(in oklab, var(--color-denim) 45%, var(--fabric-text));
304
+ --color-denim-900: color-mix(in oklab, var(--color-denim) 27%, var(--fabric-text));
305
+ --color-denim-950: color-mix(in oklab, var(--color-denim) 10%, var(--fabric-text));
306
+
307
+ /* iris */
308
+ --color-iris-50: color-mix(in oklab, var(--color-iris) 10%, var(--fabric-bg));
309
+ --color-iris-100: color-mix(in oklab, var(--color-iris) 27%, var(--fabric-bg));
310
+ --color-iris-200: color-mix(in oklab, var(--color-iris) 45%, var(--fabric-bg));
311
+ --color-iris-300: color-mix(in oklab, var(--color-iris) 62%, var(--fabric-bg));
312
+ --color-iris-400: color-mix(in oklab, var(--color-iris) 80%, var(--fabric-bg));
313
+ --color-iris-500: var(--color-iris);
314
+ --color-iris-600: color-mix(in oklab, var(--color-iris) 80%, var(--fabric-text));
315
+ --color-iris-700: color-mix(in oklab, var(--color-iris) 62%, var(--fabric-text));
316
+ --color-iris-800: color-mix(in oklab, var(--color-iris) 45%, var(--fabric-text));
317
+ --color-iris-900: color-mix(in oklab, var(--color-iris) 27%, var(--fabric-text));
318
+ --color-iris-950: color-mix(in oklab, var(--color-iris) 10%, var(--fabric-text));
319
+
320
+ /* lilac */
321
+ --color-lilac-50: color-mix(in oklab, var(--color-lilac) 10%, var(--fabric-bg));
322
+ --color-lilac-100: color-mix(in oklab, var(--color-lilac) 27%, var(--fabric-bg));
323
+ --color-lilac-200: color-mix(in oklab, var(--color-lilac) 45%, var(--fabric-bg));
324
+ --color-lilac-300: color-mix(in oklab, var(--color-lilac) 62%, var(--fabric-bg));
325
+ --color-lilac-400: color-mix(in oklab, var(--color-lilac) 80%, var(--fabric-bg));
326
+ --color-lilac-500: var(--color-lilac);
327
+ --color-lilac-600: color-mix(in oklab, var(--color-lilac) 80%, var(--fabric-text));
328
+ --color-lilac-700: color-mix(in oklab, var(--color-lilac) 62%, var(--fabric-text));
329
+ --color-lilac-800: color-mix(in oklab, var(--color-lilac) 45%, var(--fabric-text));
330
+ --color-lilac-900: color-mix(in oklab, var(--color-lilac) 27%, var(--fabric-text));
331
+ --color-lilac-950: color-mix(in oklab, var(--color-lilac) 10%, var(--fabric-text));
332
+
333
+ /* coral */
334
+ --color-coral-50: color-mix(in oklab, var(--color-coral) 10%, var(--fabric-bg));
335
+ --color-coral-100: color-mix(in oklab, var(--color-coral) 27%, var(--fabric-bg));
336
+ --color-coral-200: color-mix(in oklab, var(--color-coral) 45%, var(--fabric-bg));
337
+ --color-coral-300: color-mix(in oklab, var(--color-coral) 62%, var(--fabric-bg));
338
+ --color-coral-400: color-mix(in oklab, var(--color-coral) 80%, var(--fabric-bg));
339
+ --color-coral-500: var(--color-coral);
340
+ --color-coral-600: color-mix(in oklab, var(--color-coral) 80%, var(--fabric-text));
341
+ --color-coral-700: color-mix(in oklab, var(--color-coral) 62%, var(--fabric-text));
342
+ --color-coral-800: color-mix(in oklab, var(--color-coral) 45%, var(--fabric-text));
343
+ --color-coral-900: color-mix(in oklab, var(--color-coral) 27%, var(--fabric-text));
344
+ --color-coral-950: color-mix(in oklab, var(--color-coral) 10%, var(--fabric-text));
345
+
346
+ /* wood */
347
+ --color-wood-50: color-mix(in oklab, var(--color-wood) 10%, var(--fabric-bg));
348
+ --color-wood-100: color-mix(in oklab, var(--color-wood) 27%, var(--fabric-bg));
349
+ --color-wood-200: color-mix(in oklab, var(--color-wood) 45%, var(--fabric-bg));
350
+ --color-wood-300: color-mix(in oklab, var(--color-wood) 62%, var(--fabric-bg));
351
+ --color-wood-400: color-mix(in oklab, var(--color-wood) 80%, var(--fabric-bg));
352
+ --color-wood-500: var(--color-wood);
353
+ --color-wood-600: color-mix(in oklab, var(--color-wood) 80%, var(--fabric-text));
354
+ --color-wood-700: color-mix(in oklab, var(--color-wood) 62%, var(--fabric-text));
355
+ --color-wood-800: color-mix(in oklab, var(--color-wood) 45%, var(--fabric-text));
356
+ --color-wood-900: color-mix(in oklab, var(--color-wood) 27%, var(--fabric-text));
357
+ --color-wood-950: color-mix(in oklab, var(--color-wood) 10%, var(--fabric-text));
358
+
359
+ /* bg */
360
+ --bg-color-base: color-mix(in oklab, var(--fabric-bg) 99%, var(--color-tint));
361
+ --bg-color-content: color-mix(in lab, var(--fabric-bg) 97%, var(--color-tint));
362
+ --bg-color-dimmed: color-mix(in oklab, var(--fabric-bg) 90%, var(--color-tint));
363
+ --bg-color-muted: color-mix(in oklab, var(--fabric-bg) 80%, var(--color-tint));
364
+ --bg-color-gray: color-mix(in oklab, var(--fabric-bg) 50%, var(--color-tint));
365
+ --bg-color-dark: color-mix(in oklab, var(--color-black) 90%, var(--color-tint));
366
+ --bg-color-light: color-mix(in oklab, var(--color-white) 90%, var(--color-tint));
367
+ --bg-color-invert: color-mix(in oklab, var(--fabric-bg) 5%, var(--fabric-text));
368
+
369
+ /* text */
370
+ --text-color-base: color-mix(in oklab, var(--fabric-text) 95%, var(--color-tint));
371
+ --text-color-dimmed: color-mix(in oklab, var(--fabric-text) 65%, var(--color-tint));
372
+ --text-color-muted: color-mix(in oklab, var(--fabric-text) 45%, var(--color-tint));
373
+ --text-color-gray: color-mix(in oklab, var(--fabric-text) 50%, var(--color-tint));
374
+ --text-color-dark: color-mix(in oklab, var(--color-black) 75%, var(--color-tint));
375
+ --text-color-light: color-mix(in oklab, var(--color-white) 75%, var(--color-tint));
376
+ --text-color-invert: color-mix(in oklab, var(--fabric-text) 5%, var(--fabric-bg));
377
+
378
+ /* borders */
379
+ --border-color-base: color-mix(in oklab, var(--fabric-bg) 65%, var(--color-tint));
380
+ --border-color-dimmed: color-mix(in oklab, var(--fabric-bg) 72%, var(--color-tint));
381
+ --border-color-muted: color-mix(in oklab, var(--fabric-bg) 80%, var(--color-tint));
382
+ --border-color-gray: var(--color-tint);
383
+ --border-color-dark: color-mix(in oklab, var(--color-black) 75%, var(--color-tint));
384
+ --border-color-light: color-mix(in oklab, var(--color-white) 75%, var(--color-tint));
385
+
386
+ color: color-mix(in lab, var(--fabric-text) 95%, var(--color-tint));
387
+ background-color: color-mix(in lab, var(--fabric-bg) 92%, var(--color-tint));
388
+ }
389
+ }
package/css/reset/index.css CHANGED
@@ -21,7 +21,7 @@
21
21
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
22
22
  */
23
23
 
24
- @import url("./_theme.css");
25
- @import url("./_reset.css");
26
- @import url("./_text.css");
27
- @import url("./_gradients.css");
24
+ @import "./_theme.css";
25
+ @import "./_reset.css";
26
+ @import "./_text.css";
27
+ @import "./_gradients.css";
package/css/styles.css CHANGED
@@ -21,11 +21,12 @@
21
21
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
22
22
  */
23
23
 
24
- @layer colors, reset, comp, util, var;
24
+ @import "tailwindcss";
25
25
 
26
- @import url("tailwindcss/base") layer(reset);
27
- @import url("tailwindcss/components") layer(comp);
28
- @import url("tailwindcss/utilities") layer(util);
29
- @import url("tailwindcss/variants") layer(var);
26
+ @import "./theme/index.css";
27
+ @import "./reset/index.css";
30
28
 
31
- @import url("./reset/index.css");
29
+ @import "./core/index.css";
30
+ @import "./components/index.css";
31
+
32
+ @source "../../";