@react-fabric/core 1.0.0-beta.4 → 1.0.0-beta.41

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