@react-fabric/core 1.0.0-beta.9 → 1.0.2

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 (592) 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/css/components/_animations.css +52 -0
  4. package/css/components/_avatar.css +89 -0
  5. package/css/components/_button.css +218 -0
  6. package/css/components/_buttonGroup.css +62 -0
  7. package/css/components/_callout.css +32 -0
  8. package/css/components/_card.css +167 -0
  9. package/css/components/_chip.css +125 -0
  10. package/css/components/_collapsable.css +32 -0
  11. package/{src/overlays/message/Message.module.css → css/components/_divider.css} +11 -10
  12. package/{src/components/dropdown/Dropdown.module.css → css/components/_dropdown.css} +3 -2
  13. package/{src/overlays/flyout/Flyout.module.css → css/components/_flyout.css} +15 -9
  14. package/css/components/_media.css +102 -0
  15. package/{src/components/menu/Menu.module.css → css/components/_menu.css} +21 -20
  16. package/{src/components/meter/Meter.module.css → css/components/_meter.css} +15 -20
  17. package/{src/overlays/modal/Modal.module.css → css/components/_modal.css} +9 -9
  18. package/{src/components/panel/Panel.module.css → css/components/_panel.css} +19 -19
  19. package/{src/components/progress/Progress.module.css → css/components/_progress.css} +7 -10
  20. package/css/components/_sonner.css +431 -0
  21. package/{src/components/tabpanel/TabPanel.module.css → css/components/_tabPanel.css} +125 -85
  22. package/css/components/_titlebar.css +48 -0
  23. package/css/components/index.css +47 -0
  24. package/css/core/_aside.css +176 -0
  25. package/css/core/_content.css +31 -0
  26. package/css/core/_errorboundary.css +55 -0
  27. package/css/core/_responsive.css +45 -0
  28. package/css/core/_typography.css +69 -0
  29. package/css/core/_viewport.css +33 -0
  30. package/{src/hooks/useClientService.tsx → css/core/index.css} +7 -7
  31. package/css/reset/_gradients.css +36 -33
  32. package/css/reset/_reset.css +206 -300
  33. package/css/reset/_text.css +31 -61
  34. package/css/reset/_theme.css +467 -81
  35. package/css/reset/index.css +23 -21
  36. package/css/styles.css +30 -23
  37. package/css/theme/_colors.css +445 -0
  38. package/css/theme/_utilities.css +528 -0
  39. package/css/theme/_variants.css +128 -0
  40. package/css/theme/index.css +55 -0
  41. package/dist/cjs/components/actionLabel/ActionLabel.js +25 -12
  42. package/dist/cjs/{overlays → components}/alert/Alert.js +76 -53
  43. package/dist/cjs/components/animations/Indicator.js +66 -0
  44. package/dist/cjs/components/animations/Loader.js +77 -0
  45. package/dist/cjs/components/animations/LoadingBars.js +37 -0
  46. package/dist/cjs/components/animations/LoadingLine.js +59 -0
  47. package/dist/cjs/components/animations/LoadingSpinner.js +37 -0
  48. package/dist/cjs/components/animations/Skeleton.js +88 -0
  49. package/dist/cjs/components/avatar/Avatar.js +41 -20
  50. package/dist/cjs/components/avatar/AvatarGroup.js +37 -16
  51. package/dist/cjs/components/badge/Badge.js +90 -68
  52. package/dist/cjs/components/button/Button.js +198 -136
  53. package/dist/cjs/components/button/ButtonGroup.js +86 -21
  54. package/dist/cjs/components/button/ConfirmButton.js +55 -41
  55. package/dist/cjs/components/button/ToggleButtonGroup.js +84 -32
  56. package/dist/cjs/components/callout/Callout.js +56 -25
  57. package/dist/cjs/components/card/Card.js +90 -42
  58. package/dist/cjs/components/card/CardCover.js +38 -27
  59. package/dist/cjs/components/card/FlipContent.js +47 -0
  60. package/dist/cjs/components/chip/Chip.js +80 -37
  61. package/dist/cjs/components/collapsable/Collapsable.js +62 -31
  62. package/dist/cjs/components/divider/Divider.js +58 -24
  63. package/dist/cjs/components/dropdown/Dropdown.js +92 -45
  64. package/dist/cjs/components/dropdown/DropdownTool.js +6 -7
  65. package/dist/cjs/components/effect/GlassEffect.js +259 -0
  66. package/dist/cjs/components/effect/MatteEffect.js +127 -0
  67. package/dist/cjs/components/effect/StyleEffect.js +43 -0
  68. package/dist/cjs/components/empty/EmptyContent.js +37 -49
  69. package/dist/cjs/components/flyout/Flyout.js +170 -0
  70. package/dist/cjs/components/hotkey/HotKey.js +42 -0
  71. package/dist/cjs/components/icon/Icon.js +81 -80
  72. package/dist/cjs/components/media/Media.js +154 -77
  73. package/dist/cjs/components/menu/ContextMenu.js +45 -20
  74. package/dist/cjs/components/menu/Menu.js +98 -38
  75. package/dist/cjs/components/menu/MenuItem.js +102 -74
  76. package/dist/cjs/components/meter/Meter.js +35 -12
  77. package/dist/cjs/components/modal/Modal.js +152 -0
  78. package/dist/cjs/components/navigator/Navigator.js +81 -36
  79. package/dist/cjs/components/panel/Panel.js +115 -60
  80. package/dist/cjs/components/panel/PanelGroup.js +42 -16
  81. package/dist/cjs/components/panel/PanelStack.js +47 -16
  82. package/dist/cjs/components/pillbox/Pillbox.js +118 -0
  83. package/dist/cjs/components/progress/ProgressBar.js +30 -14
  84. package/dist/cjs/components/progress/ProgressCircle.js +27 -11
  85. package/dist/cjs/components/tabpanel/Tab.js +53 -37
  86. package/dist/cjs/components/tabpanel/TabPanel.js +74 -28
  87. package/dist/cjs/components/titlebar/Titlebar.js +52 -0
  88. package/dist/cjs/components/tooltip/Tooltip.js +180 -0
  89. package/dist/cjs/context/Global.js +159 -80
  90. package/dist/cjs/context/ModalManager.js +60 -0
  91. package/dist/cjs/context/context.js +43 -0
  92. package/dist/cjs/core/areaToggle/AreaToggle.js +41 -0
  93. package/dist/cjs/core/aside/Aside.js +178 -83
  94. package/dist/cjs/core/boundary/ErrorBoundary.js +37 -34
  95. package/dist/cjs/core/boundary/ErrorIcon.js +32 -19
  96. package/dist/cjs/core/content/Content.js +26 -37
  97. package/dist/cjs/core/headfoot/HeadFoot.js +133 -35
  98. package/dist/cjs/core/layout/Layout.js +28 -0
  99. package/dist/cjs/core/responsive/Responsive.js +62 -26
  100. package/dist/cjs/core/theme/ThemeProvider.js +35 -41
  101. package/dist/cjs/core/viewport/Viewport.js +26 -22
  102. package/dist/cjs/hooks/useClientService.js +39 -18
  103. package/dist/cjs/hooks/useContextMenu.js +103 -0
  104. package/dist/cjs/hooks/useControlledValue.js +13 -7
  105. package/dist/cjs/hooks/useDebounce.js +37 -21
  106. package/dist/cjs/hooks/useEffectDebugger.js +79 -60
  107. package/dist/cjs/hooks/useIsDark.js +34 -26
  108. package/dist/cjs/hooks/useIsRtl.js +13 -3
  109. package/dist/cjs/hooks/useNavigator.js +12 -9
  110. package/dist/cjs/hooks/useNotificationService.js +199 -0
  111. package/dist/cjs/hooks/useOverlayService.js +82 -41
  112. package/dist/cjs/hooks/usePropState.js +41 -0
  113. package/dist/cjs/hooks/usePropToggle.js +32 -26
  114. package/dist/cjs/hooks/useResize.js +47 -38
  115. package/dist/cjs/hooks/useResizeObserver.js +26 -7
  116. package/dist/cjs/hooks/useStorage.js +29 -16
  117. package/dist/cjs/i18n/index.js +25 -23
  118. package/dist/cjs/index.js +142 -94
  119. package/dist/cjs/typography/Abbr.js +43 -20
  120. package/dist/cjs/typography/Anchor.js +39 -0
  121. package/dist/cjs/typography/Copy.js +28 -28
  122. package/dist/cjs/typography/Kbd.js +43 -0
  123. package/dist/cjs/typography/Mark.js +34 -17
  124. package/dist/cjs/typography/Text.js +36 -54
  125. package/dist/cjs/typography/Title.js +17 -40
  126. package/dist/cjs/utils/calculateDimensions.js +38 -23
  127. package/dist/cjs/utils/cloneElement.js +64 -0
  128. package/dist/cjs/{core/section/Section.js → utils/getBadgeProps.js} +25 -21
  129. package/dist/cjs/utils/getColor.js +42 -36
  130. package/dist/cjs/utils/getIconProps.js +63 -0
  131. package/dist/cjs/utils/getTooltipProps.js +66 -0
  132. package/dist/cjs/utils/nodeCheck.js +4 -4
  133. package/dist/esm/components/actionLabel/ActionLabel.js +25 -12
  134. package/dist/esm/{overlays → components}/alert/Alert.js +73 -50
  135. package/dist/esm/components/animations/Indicator.js +66 -0
  136. package/dist/esm/components/animations/Loader.js +77 -0
  137. package/dist/esm/components/animations/LoadingBars.js +37 -0
  138. package/dist/esm/components/animations/LoadingLine.js +59 -0
  139. package/dist/esm/components/animations/LoadingSpinner.js +37 -0
  140. package/dist/esm/components/animations/Skeleton.js +88 -0
  141. package/dist/esm/components/avatar/Avatar.js +42 -21
  142. package/dist/esm/components/avatar/AvatarGroup.js +37 -16
  143. package/dist/esm/components/badge/Badge.js +93 -70
  144. package/dist/esm/components/button/Button.js +199 -137
  145. package/dist/esm/components/button/ButtonGroup.js +87 -22
  146. package/dist/esm/components/button/ConfirmButton.js +58 -44
  147. package/dist/esm/components/button/ToggleButtonGroup.js +86 -34
  148. package/dist/esm/components/callout/Callout.js +56 -25
  149. package/dist/esm/components/card/Card.js +92 -44
  150. package/dist/esm/components/card/CardCover.js +38 -27
  151. package/dist/esm/components/card/FlipContent.js +47 -0
  152. package/dist/esm/components/chip/Chip.js +81 -38
  153. package/dist/esm/components/collapsable/Collapsable.js +63 -32
  154. package/dist/esm/components/divider/Divider.js +59 -25
  155. package/dist/esm/components/dropdown/Dropdown.js +95 -48
  156. package/dist/esm/components/dropdown/DropdownTool.js +6 -7
  157. package/dist/esm/components/effect/GlassEffect.js +259 -0
  158. package/dist/esm/components/effect/MatteEffect.js +127 -0
  159. package/dist/esm/components/effect/StyleEffect.js +43 -0
  160. package/dist/esm/components/empty/EmptyContent.js +38 -50
  161. package/dist/esm/components/flyout/Flyout.js +170 -0
  162. package/dist/esm/components/hotkey/HotKey.js +42 -0
  163. package/dist/esm/components/icon/Icon.js +83 -82
  164. package/dist/esm/components/media/Media.js +156 -79
  165. package/dist/esm/components/menu/ContextMenu.js +46 -21
  166. package/dist/esm/components/menu/Menu.js +101 -41
  167. package/dist/esm/components/menu/MenuItem.js +98 -70
  168. package/dist/esm/components/meter/Meter.js +36 -13
  169. package/dist/esm/components/modal/Modal.js +152 -0
  170. package/dist/esm/components/navigator/Navigator.js +81 -36
  171. package/dist/esm/components/panel/Panel.js +117 -62
  172. package/dist/esm/components/panel/PanelGroup.js +43 -17
  173. package/dist/esm/components/panel/PanelStack.js +48 -17
  174. package/dist/esm/components/pillbox/Pillbox.js +118 -0
  175. package/dist/esm/components/progress/ProgressBar.js +31 -15
  176. package/dist/esm/components/progress/ProgressCircle.js +28 -12
  177. package/dist/esm/components/tabpanel/Tab.js +54 -38
  178. package/dist/esm/components/tabpanel/TabPanel.js +75 -29
  179. package/dist/esm/components/titlebar/Titlebar.js +52 -0
  180. package/dist/esm/components/tooltip/Tooltip.js +180 -0
  181. package/dist/esm/context/Global.js +161 -78
  182. package/dist/esm/context/ModalManager.js +60 -0
  183. package/dist/esm/context/context.js +40 -0
  184. package/dist/esm/core/areaToggle/AreaToggle.js +41 -0
  185. package/dist/esm/core/aside/Aside.js +179 -84
  186. package/dist/esm/core/boundary/ErrorBoundary.js +38 -35
  187. package/dist/esm/core/boundary/ErrorIcon.js +32 -19
  188. package/dist/esm/core/content/Content.js +26 -37
  189. package/dist/esm/core/headfoot/HeadFoot.js +134 -36
  190. package/dist/esm/core/layout/Layout.js +28 -0
  191. package/dist/esm/core/responsive/Responsive.js +62 -26
  192. package/dist/esm/core/theme/ThemeProvider.js +36 -42
  193. package/dist/esm/core/viewport/Viewport.js +26 -22
  194. package/dist/esm/hooks/useClientService.js +39 -18
  195. package/dist/esm/hooks/useContextMenu.js +103 -0
  196. package/dist/esm/hooks/useControlledValue.js +14 -8
  197. package/dist/esm/hooks/useDebounce.js +37 -21
  198. package/dist/esm/hooks/useEffectDebugger.js +81 -62
  199. package/dist/esm/hooks/useIsDark.js +34 -26
  200. package/dist/esm/hooks/useIsRtl.js +13 -3
  201. package/dist/esm/hooks/useNavigator.js +13 -10
  202. package/dist/esm/hooks/useNotificationService.js +199 -0
  203. package/dist/esm/hooks/useOverlayService.js +83 -42
  204. package/dist/esm/hooks/usePropState.js +40 -0
  205. package/dist/esm/hooks/usePropToggle.js +33 -27
  206. package/dist/esm/hooks/useResize.js +48 -39
  207. package/dist/esm/hooks/useResizeObserver.js +27 -8
  208. package/dist/esm/hooks/useStorage.js +30 -17
  209. package/dist/esm/i18n/index.js +23 -21
  210. package/dist/esm/index.js +87 -44
  211. package/dist/esm/typography/Abbr.js +45 -22
  212. package/dist/esm/typography/Anchor.js +39 -0
  213. package/dist/esm/typography/Copy.js +28 -28
  214. package/dist/esm/typography/Kbd.js +43 -0
  215. package/dist/esm/typography/Mark.js +35 -18
  216. package/dist/esm/typography/Text.js +39 -57
  217. package/dist/esm/typography/Title.js +17 -40
  218. package/dist/esm/utils/calculateDimensions.js +38 -23
  219. package/dist/esm/utils/cloneElement.js +64 -0
  220. package/dist/esm/{core/section/Section.js → utils/getBadgeProps.js} +25 -21
  221. package/dist/esm/utils/getColor.js +43 -34
  222. package/dist/esm/utils/getIconProps.js +63 -0
  223. package/dist/esm/utils/getTooltipProps.js +66 -0
  224. package/dist/esm/utils/nodeCheck.js +4 -4
  225. package/dist/types/components/actionLabel/ActionLabel.d.ts +20 -7
  226. package/dist/types/components/alert/Alert.d.ts +74 -0
  227. package/dist/types/components/animations/Indicator.d.ts +57 -0
  228. package/dist/types/components/animations/Loader.d.ts +65 -0
  229. package/dist/types/components/animations/LoadingBars.d.ts +61 -0
  230. package/dist/types/components/animations/LoadingLine.d.ts +43 -0
  231. package/dist/types/components/animations/LoadingSpinner.d.ts +61 -0
  232. package/dist/types/components/animations/Skeleton.d.ts +61 -0
  233. package/dist/types/components/avatar/Avatar.d.ts +70 -19
  234. package/dist/types/components/avatar/AvatarGroup.d.ts +51 -14
  235. package/dist/types/components/badge/Badge.d.ts +64 -14
  236. package/dist/types/components/button/Button.d.ts +72 -55
  237. package/dist/types/components/button/ButtonGroup.d.ts +86 -24
  238. package/dist/types/components/button/ConfirmButton.d.ts +21 -7
  239. package/dist/types/components/button/ToggleButtonGroup.d.ts +88 -44
  240. package/dist/types/components/callout/Callout.d.ts +58 -7
  241. package/dist/types/components/card/Card.d.ts +66 -25
  242. package/dist/types/components/card/CardCover.d.ts +52 -7
  243. package/dist/types/components/card/FlipContent.d.ts +50 -0
  244. package/dist/types/components/chip/Chip.d.ts +72 -20
  245. package/dist/types/components/collapsable/Collapsable.d.ts +55 -15
  246. package/dist/types/components/divider/Divider.d.ts +25 -8
  247. package/dist/types/components/dropdown/Dropdown.d.ts +42 -9
  248. package/dist/types/components/dropdown/DropdownTool.d.ts +22 -4
  249. package/dist/types/components/effect/GlassEffect.d.ts +5 -0
  250. package/dist/types/components/effect/MatteEffect.d.ts +40 -0
  251. package/dist/types/components/effect/StyleEffect.d.ts +27 -0
  252. package/dist/types/components/empty/EmptyContent.d.ts +53 -9
  253. package/dist/types/components/flyout/Flyout.d.ts +60 -0
  254. package/dist/types/components/hotkey/HotKey.d.ts +41 -0
  255. package/dist/types/components/icon/Icon.d.ts +74 -24
  256. package/dist/types/components/media/Media.d.ts +72 -4
  257. package/dist/types/components/menu/ContextMenu.d.ts +22 -5
  258. package/dist/types/components/menu/Menu.d.ts +26 -2
  259. package/dist/types/components/menu/MenuItem.d.ts +19 -4
  260. package/dist/types/components/menu/types.d.ts +23 -14
  261. package/dist/types/components/meter/Meter.d.ts +23 -3
  262. package/dist/types/components/modal/Modal.d.ts +52 -0
  263. package/dist/types/components/navigator/Navigator.d.ts +30 -4
  264. package/dist/types/components/panel/Panel.d.ts +43 -23
  265. package/dist/types/components/panel/PanelGroup.d.ts +22 -3
  266. package/dist/types/components/panel/PanelStack.d.ts +28 -2
  267. package/dist/types/components/pillbox/Pillbox.d.ts +95 -0
  268. package/dist/types/components/progress/ProgressBar.d.ts +19 -4
  269. package/dist/types/components/progress/ProgressCircle.d.ts +18 -4
  270. package/dist/types/components/tabpanel/Tab.d.ts +42 -10
  271. package/dist/types/components/tabpanel/TabPanel.d.ts +47 -7
  272. package/dist/types/components/titlebar/Titlebar.d.ts +54 -0
  273. package/dist/types/components/tooltip/Tooltip.d.ts +76 -0
  274. package/dist/types/context/Global.d.ts +39 -69
  275. package/dist/types/context/ModalManager.d.ts +30 -0
  276. package/dist/types/context/context.d.ts +107 -0
  277. package/dist/types/core/areaToggle/AreaToggle.d.ts +33 -0
  278. package/dist/types/core/aside/Aside.d.ts +75 -20
  279. package/dist/types/core/boundary/ErrorBoundary.d.ts +43 -4
  280. package/dist/types/core/boundary/ErrorIcon.d.ts +38 -1
  281. package/dist/types/core/content/Content.d.ts +38 -6
  282. package/dist/types/core/headfoot/HeadFoot.d.ts +48 -14
  283. package/dist/types/core/layout/Layout.d.ts +38 -0
  284. package/dist/types/core/responsive/Responsive.d.ts +45 -15
  285. package/dist/types/core/theme/ThemeProvider.d.ts +35 -11
  286. package/dist/types/core/viewport/Viewport.d.ts +27 -3
  287. package/dist/types/hooks/useClientService.d.ts +43 -1
  288. package/dist/types/hooks/useContextMenu.d.ts +10 -0
  289. package/dist/types/hooks/useControlledValue.d.ts +28 -4
  290. package/dist/types/hooks/useDebounce.d.ts +38 -2
  291. package/dist/types/hooks/useEffectDebugger.d.ts +73 -4
  292. package/dist/types/hooks/useIsDark.d.ts +6 -0
  293. package/dist/types/hooks/useIsRtl.d.ts +35 -1
  294. package/dist/types/hooks/useNavigator.d.ts +37 -2
  295. package/dist/types/hooks/useNotificationService.d.ts +60 -0
  296. package/dist/types/hooks/useOverlayService.d.ts +28 -8
  297. package/dist/types/hooks/usePropState.d.ts +26 -0
  298. package/dist/types/hooks/usePropToggle.d.ts +41 -7
  299. package/dist/types/hooks/useResize.d.ts +46 -4
  300. package/dist/types/hooks/useResizeObserver.d.ts +45 -3
  301. package/dist/types/hooks/useStorage.d.ts +32 -2
  302. package/dist/types/i18n/index.d.ts +27 -3
  303. package/dist/types/index.d.ts +106 -18
  304. package/dist/types/types/colors.d.ts +29 -0
  305. package/dist/types/types/index.d.ts +216 -76
  306. package/dist/types/typography/Abbr.d.ts +51 -6
  307. package/dist/types/typography/Anchor.d.ts +41 -0
  308. package/dist/types/typography/Copy.d.ts +36 -2
  309. package/dist/types/typography/Kbd.d.ts +40 -0
  310. package/dist/types/typography/Mark.d.ts +44 -7
  311. package/dist/types/typography/Text.d.ts +40 -24
  312. package/dist/types/typography/Title.d.ts +37 -26
  313. package/dist/types/typography/types.d.ts +32 -0
  314. package/dist/types/utils/calculateDimensions.d.ts +50 -6
  315. package/dist/types/utils/cloneElement.d.ts +41 -0
  316. package/dist/types/utils/getBadgeProps.d.ts +16 -0
  317. package/dist/types/utils/getColor.d.ts +43 -4
  318. package/dist/types/utils/getIconProps.d.ts +45 -0
  319. package/dist/types/utils/getTooltipProps.d.ts +47 -0
  320. package/dist/types/utils/index.d.ts +28 -0
  321. package/dist/types/utils/nodeCheck.d.ts +1 -2
  322. package/package.json +30 -21
  323. package/src/components/actionLabel/ActionLabel.tsx +28 -39
  324. package/src/components/alert/Alert.tsx +261 -0
  325. package/src/components/animations/Indicator.tsx +75 -0
  326. package/src/components/animations/Loader.tsx +89 -0
  327. package/src/components/animations/LoadingBars.tsx +70 -0
  328. package/src/components/animations/LoadingLine.tsx +51 -0
  329. package/src/components/animations/LoadingSpinner.tsx +70 -0
  330. package/src/components/animations/Skeleton.tsx +100 -0
  331. package/src/components/avatar/Avatar.tsx +89 -70
  332. package/src/components/avatar/AvatarGroup.tsx +65 -74
  333. package/src/components/badge/Badge.tsx +141 -108
  334. package/src/components/button/Button.tsx +223 -238
  335. package/src/components/button/ButtonGroup.tsx +117 -77
  336. package/src/components/button/ConfirmButton.tsx +60 -90
  337. package/src/components/button/ToggleButtonGroup.tsx +134 -120
  338. package/src/components/callout/Callout.tsx +81 -59
  339. package/src/components/card/Card.tsx +131 -113
  340. package/src/components/card/CardCover.tsx +61 -61
  341. package/src/components/card/FlipContent.tsx +78 -0
  342. package/src/components/chip/Chip.tsx +139 -99
  343. package/src/components/collapsable/Collapsable.tsx +79 -77
  344. package/src/components/divider/Divider.tsx +74 -53
  345. package/src/components/dropdown/Dropdown.tsx +109 -106
  346. package/src/components/dropdown/DropdownTool.tsx +29 -12
  347. package/src/components/effect/GlassEffect.tsx +221 -0
  348. package/src/components/effect/MatteEffect.tsx +99 -0
  349. package/src/components/effect/StyleEffect.tsx +36 -0
  350. package/src/components/empty/EmptyContent.tsx +60 -99
  351. package/src/components/flyout/Flyout.tsx +257 -0
  352. package/src/components/hotkey/HotKey.tsx +57 -0
  353. package/src/components/icon/Icon.tsx +131 -130
  354. package/src/components/media/Media.tsx +184 -154
  355. package/src/components/menu/ContextMenu.tsx +56 -39
  356. package/src/components/menu/Menu.tsx +121 -84
  357. package/src/components/menu/MenuItem.tsx +87 -69
  358. package/src/components/menu/types.ts +23 -28
  359. package/src/components/meter/Meter.tsx +34 -17
  360. package/src/components/modal/Modal.tsx +226 -0
  361. package/src/components/navigator/Navigator.tsx +93 -38
  362. package/src/components/panel/Panel.tsx +123 -131
  363. package/src/components/panel/PanelGroup.tsx +49 -43
  364. package/src/components/panel/PanelStack.tsx +63 -62
  365. package/src/components/pillbox/Pillbox.tsx +208 -0
  366. package/src/components/progress/ProgressBar.tsx +33 -33
  367. package/src/components/progress/ProgressCircle.tsx +29 -37
  368. package/src/components/tabpanel/Tab.tsx +84 -73
  369. package/src/components/tabpanel/TabPanel.tsx +102 -51
  370. package/src/components/titlebar/Titlebar.tsx +115 -0
  371. package/src/components/tooltip/Tooltip.tsx +255 -0
  372. package/src/context/Global.tsx +148 -148
  373. package/src/context/ModalManager.tsx +68 -0
  374. package/src/context/context.ts +111 -0
  375. package/src/core/areaToggle/AreaToggle.tsx +45 -0
  376. package/src/core/aside/Aside.tsx +200 -155
  377. package/src/core/boundary/ErrorBoundary.tsx +50 -68
  378. package/src/core/boundary/ErrorIcon.tsx +34 -32
  379. package/src/core/content/Content.tsx +41 -50
  380. package/src/core/headfoot/HeadFoot.tsx +162 -81
  381. package/src/core/layout/Layout.tsx +54 -0
  382. package/src/core/responsive/Responsive.tsx +91 -98
  383. package/src/core/theme/ThemeProvider.tsx +45 -56
  384. package/src/core/viewport/Viewport.tsx +25 -27
  385. package/src/hooks/useClientService.ts +47 -0
  386. package/src/hooks/useContextMenu.tsx +131 -0
  387. package/src/hooks/useControlledValue.ts +47 -0
  388. package/src/hooks/useDebounce.ts +41 -24
  389. package/src/hooks/useEffectDebugger.ts +105 -94
  390. package/src/hooks/useIsDark.ts +10 -24
  391. package/src/hooks/useIsRtl.ts +32 -20
  392. package/src/hooks/useNavigator.tsx +41 -26
  393. package/src/hooks/useNotificationService.tsx +239 -0
  394. package/src/hooks/useOverlayService.tsx +67 -20
  395. package/src/hooks/usePropState.ts +52 -0
  396. package/src/hooks/usePropToggle.ts +54 -47
  397. package/src/hooks/useResize.ts +69 -45
  398. package/src/hooks/useResizeObserver.ts +59 -34
  399. package/src/hooks/useStorage.ts +40 -48
  400. package/src/i18n/index.ts +24 -25
  401. package/src/index.ts +115 -44
  402. package/src/types/colors.ts +49 -0
  403. package/src/types/global.d.ts +40 -17
  404. package/src/types/index.ts +243 -155
  405. package/src/typography/Abbr.tsx +62 -59
  406. package/src/typography/Anchor.tsx +63 -0
  407. package/src/typography/Copy.tsx +39 -29
  408. package/src/typography/Kbd.tsx +50 -0
  409. package/src/typography/Mark.tsx +56 -51
  410. package/src/typography/Text.tsx +57 -128
  411. package/src/typography/Title.tsx +36 -108
  412. package/src/typography/types.ts +27 -17
  413. package/src/utils/calculateDimensions.ts +50 -40
  414. package/src/utils/cloneElement.ts +61 -0
  415. package/src/{core/content/Content.module.css → utils/getBadgeProps.ts} +20 -15
  416. package/src/utils/getColor.ts +42 -36
  417. package/src/utils/getIconProps.ts +58 -0
  418. package/src/utils/getTooltipProps.ts +59 -0
  419. package/src/utils/index.ts +23 -17
  420. package/src/utils/nodeCheck.ts +4 -8
  421. package/css/flags.rect.css +0 -1607
  422. package/css/flags.wavy.css +0 -1606
  423. package/css/index.js +0 -250
  424. package/css/tailwind/colors.ts +0 -158
  425. package/dist/cjs/components/actionLabel/ActionLabel.module.css +0 -1
  426. package/dist/cjs/components/animations/Animations.js +0 -142
  427. package/dist/cjs/components/animations/Animations.module.css +0 -1
  428. package/dist/cjs/components/avatar/Avatar.module.css +0 -1
  429. package/dist/cjs/components/badge/Badge.module.css +0 -1
  430. package/dist/cjs/components/breadcrumbs/Breadcrumbs.js +0 -71
  431. package/dist/cjs/components/breadcrumbs/Breadcrumbs.module.css +0 -1
  432. package/dist/cjs/components/button/Button.module.css +0 -1
  433. package/dist/cjs/components/card/Card.module.css +0 -1
  434. package/dist/cjs/components/chip/Chip.module.css +0 -1
  435. package/dist/cjs/components/collapsable/Collapsable.module.css +0 -1
  436. package/dist/cjs/components/dropdown/Dropdown.module.css +0 -1
  437. package/dist/cjs/components/icon/Icon.module.css +0 -1
  438. package/dist/cjs/components/media/Media.module.css +0 -1
  439. package/dist/cjs/components/menu/Menu.module.css +0 -1
  440. package/dist/cjs/components/meter/Meter.module.css +0 -1
  441. package/dist/cjs/components/panel/Panel.module.css +0 -1
  442. package/dist/cjs/components/progress/Progress.module.css +0 -1
  443. package/dist/cjs/components/tabpanel/TabPanel.module.css +0 -1
  444. package/dist/cjs/context/NotificationCenter.js +0 -254
  445. package/dist/cjs/core/aside/Aside.module.css +0 -1
  446. package/dist/cjs/core/boundary/ErrorBoundary.module.css +0 -1
  447. package/dist/cjs/core/content/Content.module.css +0 -1
  448. package/dist/cjs/core/headfoot/HeadFoot.module.css +0 -1
  449. package/dist/cjs/core/page/Page.js +0 -66
  450. package/dist/cjs/core/page/Page.module.css +0 -1
  451. package/dist/cjs/core/responsive/Responsive.module.css +0 -1
  452. package/dist/cjs/core/section/Section.module.css +0 -1
  453. package/dist/cjs/core/theme/Theme.module.css +0 -1
  454. package/dist/cjs/core/viewport/Viewport.module.css +0 -1
  455. package/dist/cjs/hotkeys/HotKey.js +0 -47
  456. package/dist/cjs/hotkeys/HotKeyLabel.js +0 -52
  457. package/dist/cjs/hotkeys/HotKeyWrapper.js +0 -98
  458. package/dist/cjs/hotkeys/commons.js +0 -56
  459. package/dist/cjs/overlays/alert/Alert.module.css +0 -1
  460. package/dist/cjs/overlays/flyout/Flyout.js +0 -152
  461. package/dist/cjs/overlays/flyout/Flyout.module.css +0 -1
  462. package/dist/cjs/overlays/message/Message.js +0 -84
  463. package/dist/cjs/overlays/message/Message.module.css +0 -1
  464. package/dist/cjs/overlays/modal/Modal.js +0 -132
  465. package/dist/cjs/overlays/modal/Modal.module.css +0 -1
  466. package/dist/cjs/overlays/toast/Toast.js +0 -166
  467. package/dist/cjs/overlays/toast/Toast.module.css +0 -1
  468. package/dist/cjs/overlays/tooltip/Tooltip.js +0 -133
  469. package/dist/cjs/overlays/tooltip/Tooltip.module.css +0 -1
  470. package/dist/cjs/types/icons.js +0 -200
  471. package/dist/cjs/typography/Link.js +0 -55
  472. package/dist/cjs/typography/Typography.module.css +0 -1
  473. package/dist/cjs/typography/types.js +0 -42
  474. package/dist/esm/components/actionLabel/ActionLabel.module.css +0 -1
  475. package/dist/esm/components/animations/Animations.js +0 -138
  476. package/dist/esm/components/animations/Animations.module.css +0 -1
  477. package/dist/esm/components/avatar/Avatar.module.css +0 -1
  478. package/dist/esm/components/badge/Badge.module.css +0 -1
  479. package/dist/esm/components/breadcrumbs/Breadcrumbs.js +0 -71
  480. package/dist/esm/components/breadcrumbs/Breadcrumbs.module.css +0 -1
  481. package/dist/esm/components/button/Button.module.css +0 -1
  482. package/dist/esm/components/card/Card.module.css +0 -1
  483. package/dist/esm/components/chip/Chip.module.css +0 -1
  484. package/dist/esm/components/collapsable/Collapsable.module.css +0 -1
  485. package/dist/esm/components/dropdown/Dropdown.module.css +0 -1
  486. package/dist/esm/components/icon/Icon.module.css +0 -1
  487. package/dist/esm/components/media/Media.module.css +0 -1
  488. package/dist/esm/components/menu/Menu.module.css +0 -1
  489. package/dist/esm/components/meter/Meter.module.css +0 -1
  490. package/dist/esm/components/panel/Panel.module.css +0 -1
  491. package/dist/esm/components/progress/Progress.module.css +0 -1
  492. package/dist/esm/components/tabpanel/TabPanel.module.css +0 -1
  493. package/dist/esm/context/NotificationCenter.js +0 -254
  494. package/dist/esm/core/aside/Aside.module.css +0 -1
  495. package/dist/esm/core/boundary/ErrorBoundary.module.css +0 -1
  496. package/dist/esm/core/content/Content.module.css +0 -1
  497. package/dist/esm/core/headfoot/HeadFoot.module.css +0 -1
  498. package/dist/esm/core/page/Page.js +0 -66
  499. package/dist/esm/core/page/Page.module.css +0 -1
  500. package/dist/esm/core/responsive/Responsive.module.css +0 -1
  501. package/dist/esm/core/section/Section.module.css +0 -1
  502. package/dist/esm/core/theme/Theme.module.css +0 -1
  503. package/dist/esm/core/viewport/Viewport.module.css +0 -1
  504. package/dist/esm/hotkeys/HotKey.js +0 -47
  505. package/dist/esm/hotkeys/HotKeyLabel.js +0 -52
  506. package/dist/esm/hotkeys/HotKeyWrapper.js +0 -96
  507. package/dist/esm/hotkeys/commons.js +0 -56
  508. package/dist/esm/overlays/alert/Alert.module.css +0 -1
  509. package/dist/esm/overlays/flyout/Flyout.js +0 -152
  510. package/dist/esm/overlays/flyout/Flyout.module.css +0 -1
  511. package/dist/esm/overlays/message/Message.js +0 -84
  512. package/dist/esm/overlays/message/Message.module.css +0 -1
  513. package/dist/esm/overlays/modal/Modal.js +0 -132
  514. package/dist/esm/overlays/modal/Modal.module.css +0 -1
  515. package/dist/esm/overlays/toast/Toast.js +0 -166
  516. package/dist/esm/overlays/toast/Toast.module.css +0 -1
  517. package/dist/esm/overlays/tooltip/Tooltip.js +0 -132
  518. package/dist/esm/overlays/tooltip/Tooltip.module.css +0 -1
  519. package/dist/esm/types/icons.js +0 -202
  520. package/dist/esm/typography/Link.js +0 -55
  521. package/dist/esm/typography/Typography.module.css +0 -1
  522. package/dist/esm/typography/types.js +0 -41
  523. package/dist/types/components/animations/Animations.d.ts +0 -23
  524. package/dist/types/components/breadcrumbs/Breadcrumbs.d.ts +0 -17
  525. package/dist/types/components/index.d.ts +0 -33
  526. package/dist/types/context/NotificationCenter.d.ts +0 -11
  527. package/dist/types/core/index.d.ts +0 -9
  528. package/dist/types/core/page/Page.d.ts +0 -23
  529. package/dist/types/core/section/Section.d.ts +0 -7
  530. package/dist/types/hotkeys/HotKey.d.ts +0 -2
  531. package/dist/types/hotkeys/HotKeyLabel.d.ts +0 -2
  532. package/dist/types/hotkeys/HotKeyWrapper.d.ts +0 -11
  533. package/dist/types/hotkeys/commons.d.ts +0 -28
  534. package/dist/types/overlays/alert/Alert.d.ts +0 -41
  535. package/dist/types/overlays/flyout/Flyout.d.ts +0 -57
  536. package/dist/types/overlays/index.d.ts +0 -6
  537. package/dist/types/overlays/message/Message.d.ts +0 -21
  538. package/dist/types/overlays/modal/Modal.d.ts +0 -53
  539. package/dist/types/overlays/toast/Toast.d.ts +0 -33
  540. package/dist/types/overlays/tooltip/Tooltip.d.ts +0 -18
  541. package/dist/types/types/icons.d.ts +0 -197
  542. package/dist/types/typography/Link.d.ts +0 -25
  543. package/dist/types/typography/index.d.ts +0 -6
  544. package/src/components/animations/Animations.module.css +0 -253
  545. package/src/components/animations/Animations.tsx +0 -196
  546. package/src/components/avatar/Avatar.module.css +0 -90
  547. package/src/components/badge/Badge.module.css +0 -165
  548. package/src/components/breadcrumbs/Breadcrumbs.module.css +0 -189
  549. package/src/components/breadcrumbs/Breadcrumbs.tsx +0 -109
  550. package/src/components/button/Button.module.css +0 -375
  551. package/src/components/card/Card.module.css +0 -152
  552. package/src/components/chip/Chip.module.css +0 -118
  553. package/src/components/collapsable/Collapsable.module.css +0 -30
  554. package/src/components/icon/Icon.module.css +0 -71
  555. package/src/components/index.ts +0 -62
  556. package/src/components/media/Media.module.css +0 -112
  557. package/src/context/NotificationCenter.tsx +0 -223
  558. package/src/core/aside/Aside.module.css +0 -231
  559. package/src/core/boundary/ErrorBoundary.module.css +0 -65
  560. package/src/core/headfoot/HeadFoot.module.css +0 -38
  561. package/src/core/index.ts +0 -32
  562. package/src/core/page/Page.module.css +0 -46
  563. package/src/core/page/Page.tsx +0 -101
  564. package/src/core/responsive/Responsive.module.css +0 -85
  565. package/src/core/section/Section.module.css +0 -28
  566. package/src/core/section/Section.tsx +0 -54
  567. package/src/core/theme/Theme.module.css +0 -30
  568. package/src/core/viewport/Viewport.module.css +0 -32
  569. package/src/hooks/useControlledValue.tsx +0 -43
  570. package/src/hotkeys/HotKey.tsx +0 -39
  571. package/src/hotkeys/HotKeyLabel.tsx +0 -61
  572. package/src/hotkeys/HotKeyWrapper.tsx +0 -137
  573. package/src/hotkeys/commons.ts +0 -74
  574. package/src/overlays/alert/Alert.tsx +0 -252
  575. package/src/overlays/flyout/Flyout.tsx +0 -283
  576. package/src/overlays/index.ts +0 -29
  577. package/src/overlays/message/Message.tsx +0 -107
  578. package/src/overlays/modal/Modal.tsx +0 -244
  579. package/src/overlays/toast/Toast.module.css +0 -37
  580. package/src/overlays/toast/Toast.tsx +0 -216
  581. package/src/overlays/tooltip/Tooltip.module.css +0 -53
  582. package/src/overlays/tooltip/Tooltip.tsx +0 -200
  583. package/src/types/icons.ts +0 -426
  584. package/src/typography/Link.tsx +0 -113
  585. package/src/typography/Typography.module.css +0 -68
  586. package/src/typography/index.ts +0 -29
  587. /package/dist/cjs/i18n/{ar.json.js → ar/core.json.js} +0 -0
  588. /package/dist/cjs/i18n/{en.json.js → en/core.json.js} +0 -0
  589. /package/dist/esm/i18n/{ar.json.js → ar/core.json.js} +0 -0
  590. /package/dist/esm/i18n/{en.json.js → en/core.json.js} +0 -0
  591. /package/src/i18n/{ar.json → ar/core.json} +0 -0
  592. /package/src/i18n/{en.json → en/core.json} +0 -0
package/css/reset/_theme.css CHANGED
@@ -1,75 +1,34 @@
1
- /*
1
+ /**
2
2
  * React Fabric
3
- * @version: 1.0.0
3
+ * @version 1.0.0
4
+ * @license MIT
5
+ * @copyright 2024 Adarsh Pastakia
4
6
  *
7
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
8
+ * of this software and associated documentation files (the "Software"), to deal
9
+ * in the Software without restriction, including without limitation the rights
10
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
11
+ * copies of the Software, and to permit persons to whom the Software is
12
+ * furnished to do so, subject to the following conditions:
5
13
  *
6
- * The MIT License (MIT)
7
- * Copyright (c) 2024 Adarsh Pastakia
14
+ * The above copyright notice and this permission notice shall be included in all
15
+ * copies or substantial portions of the Software.
8
16
  *
9
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
10
- * and associated documentation files (the "Software"), to deal in the Software without restriction,
11
- * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
12
- * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
13
- * subject to the following conditions:
14
- *
15
- * The above copyright notice and this permission notice shall be included in all copies or substantial
16
- * portions of the Software.
17
- *
18
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
19
- * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
20
- * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
21
- * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
17
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
18
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
19
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
20
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
21
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
22
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
23
+ * SOFTWARE.
22
24
  */
23
25
 
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 {
26
+ @layer theme {
47
27
  :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
28
  /* app default primary */
70
- --primary: theme(colors.denim.DEFAULT);
71
- --accent: theme(colors.jade.DEFAULT);
72
- --tint: theme(colors.silver.DEFAULT);
29
+ --color-primary: var(--color-denim);
30
+ --color-secondary: var(--color-jade);
31
+ --color-tint: var(--color-silver);
73
32
 
74
33
  /* default rounding */
75
34
  --rounding: 0.25rem;
@@ -84,27 +43,454 @@
84
43
  --z-tooltip: 60;
85
44
  --z-notifications: 60;
86
45
  }
46
+ }
47
+
48
+ [data-rounding="sm"] {
49
+ /* default rounding */
50
+ --rounding: 2px;
51
+ --rounding-cap: 2px;
52
+ }
53
+
54
+ [data-rounding="md"] {
55
+ /* default rounding */
56
+ --rounding: 0.5rem;
57
+ --rounding-cap: 0.5rem;
58
+ }
87
59
 
60
+ [data-rounding="full"] {
61
+ /* default rounding */
62
+ --rounding: 9999px;
63
+ --rounding-cap: 1rem;
64
+ }
65
+
66
+ [data-color-scheme="light"] {
67
+ --fabric-bg: var(--color-white);
68
+ --fabric-text: var(--color-black);
69
+ --fabric-input: #fdfdfd;
70
+ --fabric-input-focus: #fff;
71
+ --fabric-shadow: #8ba0b0;
72
+
73
+ color-scheme: light;
74
+ }
75
+
76
+ [data-color-scheme="dark"] {
77
+ --fabric-bg: var(--color-black);
78
+ --fabric-text: var(--color-white);
79
+ --fabric-input: #141a1f;
80
+ --fabric-input-focus: #0a1218;
81
+ --fabric-shadow: #010101;
82
+
83
+ color-scheme: dark;
84
+ }
85
+
86
+ @layer base {
88
87
  [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
- }
88
+ /* bg */
89
+ --bg-color-content: color-mix(in oklab, var(--fabric-bg) 99%, var(--color-tint));
90
+ --bg-color-default: color-mix(in oklab, var(--fabric-bg) 97%, var(--color-tint));
91
+ --bg-color-dimmed: color-mix(in oklab, var(--fabric-bg) 92%, var(--color-tint));
92
+ --bg-color-muted: color-mix(in oklab, var(--fabric-bg) 85%, var(--color-tint));
93
+ --bg-color-dark: color-mix(in oklab, var(--color-black) 92%, var(--fabric-text));
94
+ --bg-color-light: color-mix(in oklab, var(--color-white) 92%, var(--fabric-text));
95
+ --bg-color-gray: color-mix(in oklab, var(--fabric-bg) 75%, var(--fabric-text));
96
+ --bg-color-invert: color-mix(in oklab, var(--fabric-bg) 5%, var(--fabric-text));
92
97
 
93
- [data-rounding="sm"] {
94
- /* default rounding */
95
- --rounding: 2px;
96
- --rounding-cap: 2px;
97
- }
98
+ /* text */
99
+ --text-color-default: color-mix(in oklab, var(--fabric-text) 95%, var(--color-tint));
100
+ --text-color-dimmed: color-mix(in oklab, var(--fabric-text) 65%, var(--color-tint));
101
+ --text-color-muted: color-mix(in oklab, var(--fabric-text) 55%, var(--fabric-bg));
102
+ --text-color-dark: color-mix(in oklab, var(--color-black) 92%, var(--fabric-bg));
103
+ --text-color-light: color-mix(in oklab, var(--color-white) 92%, var(--fabric-bg));
104
+ --text-color-gray: color-mix(in oklab, var(--fabric-text) 45%, var(--fabric-bg));
105
+ --text-color-invert: color-mix(in oklab, var(--fabric-text) 5%, var(--fabric-bg));
98
106
 
99
- [data-rounding="md"] {
100
- /* default rounding */
101
- --rounding: 0.5rem;
102
- --rounding-cap: 0.5rem;
103
- }
107
+ /* borders */
108
+ --border-color-default: color-mix(in oklab, var(--fabric-bg) 65%, var(--color-tint));
109
+ --border-color-bright: color-mix(in oklab, var(--fabric-bg) 50%, var(--color-tint));
110
+ --border-color-soft: color-mix(in oklab, var(--fabric-bg) 75%, var(--color-tint));
111
+ --border-color-gray: color-mix(in oklab, var(--fabric-bg) 45%, var(--color-tint));
112
+ --border-color-dark: color-mix(in oklab, var(--color-black) 85%, var(--color-tint));
113
+ --border-color-light: color-mix(in oklab, var(--color-white) 85%, var(--color-tint));
114
+ --border-color-invert: color-mix(in oklab, var(--fabric-text) 75%, var(--fabric-bg));
104
115
 
105
- [data-rounding="full"] {
106
- /* default rounding */
107
- --rounding: 9999px;
108
- --rounding-cap: 0.5rem;
116
+ /* primary */
117
+ --color-primary-50: color-mix(in var(--mix-space), var(--fabric-bg) 85%, var(--color-primary));
118
+ --color-primary-100: color-mix(in var(--mix-space), var(--fabric-bg) 72%, var(--color-primary));
119
+ --color-primary-200: color-mix(in var(--mix-space), var(--fabric-bg) 54%, var(--color-primary));
120
+ --color-primary-300: color-mix(in var(--mix-space), var(--fabric-bg) 36%, var(--color-primary));
121
+ --color-primary-400: color-mix(in var(--mix-space), var(--fabric-bg) 24%, var(--color-primary));
122
+ --color-primary-500: var(--color-primary);
123
+ --color-primary-600: color-mix(in var(--mix-space), var(--fabric-text) 24%, var(--color-primary));
124
+ --color-primary-700: color-mix(in var(--mix-space), var(--fabric-text) 36%, var(--color-primary));
125
+ --color-primary-800: color-mix(in var(--mix-space), var(--fabric-text) 54%, var(--color-primary));
126
+ --color-primary-900: color-mix(in var(--mix-space), var(--fabric-text) 72%, var(--color-primary));
127
+ --color-primary-950: color-mix(in var(--mix-space), var(--fabric-text) 85%, var(--color-primary));
128
+
129
+ /* secondary */
130
+ --color-secondary-50: color-mix(in var(--mix-space), var(--fabric-bg) 85%, var(--color-secondary));
131
+ --color-secondary-100: color-mix(in var(--mix-space), var(--fabric-bg) 72%, var(--color-secondary));
132
+ --color-secondary-200: color-mix(in var(--mix-space), var(--fabric-bg) 54%, var(--color-secondary));
133
+ --color-secondary-300: color-mix(in var(--mix-space), var(--fabric-bg) 36%, var(--color-secondary));
134
+ --color-secondary-400: color-mix(in var(--mix-space), var(--fabric-bg) 24%, var(--color-secondary));
135
+ --color-secondary-500: var(--color-secondary);
136
+ --color-secondary-600: color-mix(in var(--mix-space), var(--fabric-text) 24%, var(--color-secondary));
137
+ --color-secondary-700: color-mix(in var(--mix-space), var(--fabric-text) 36%, var(--color-secondary));
138
+ --color-secondary-800: color-mix(in var(--mix-space), var(--fabric-text) 54%, var(--color-secondary));
139
+ --color-secondary-900: color-mix(in var(--mix-space), var(--fabric-text) 72%, var(--color-secondary));
140
+ --color-secondary-950: color-mix(in var(--mix-space), var(--fabric-text) 85%, var(--color-secondary));
141
+
142
+ /* tint */
143
+ --color-tint-50: color-mix(in var(--mix-space), var(--fabric-bg) 96%, var(--color-tint));
144
+ --color-tint-100: color-mix(in var(--mix-space), var(--fabric-bg) 92%, var(--color-tint));
145
+ --color-tint-200: color-mix(in var(--mix-space), var(--fabric-bg) 80%, var(--color-tint));
146
+ --color-tint-300: color-mix(in var(--mix-space), var(--fabric-bg) 56%, var(--color-tint));
147
+ --color-tint-400: color-mix(in var(--mix-space), var(--fabric-bg) 24%, var(--color-tint));
148
+ --color-tint-500: var(--color-tint);
149
+ --color-tint-600: color-mix(in var(--mix-space), var(--fabric-text) 24%, var(--color-tint));
150
+ --color-tint-700: color-mix(in var(--mix-space), var(--fabric-text) 56%, var(--color-tint));
151
+ --color-tint-800: color-mix(in var(--mix-space), var(--fabric-text) 80%, var(--color-tint));
152
+ --color-tint-900: color-mix(in var(--mix-space), var(--fabric-text) 92%, var(--color-tint));
153
+ --color-tint-950: color-mix(in var(--mix-space), var(--fabric-text) 96%, var(--color-tint));
154
+
155
+ /* silver */
156
+ --color-silver-50: color-mix(in var(--mix-space), var(--fabric-bg) 96%, var(--color-silver));
157
+ --color-silver-100: color-mix(in var(--mix-space), var(--fabric-bg) 92%, var(--color-silver));
158
+ --color-silver-200: color-mix(in var(--mix-space), var(--fabric-bg) 80%, var(--color-silver));
159
+ --color-silver-300: color-mix(in var(--mix-space), var(--fabric-bg) 56%, var(--color-silver));
160
+ --color-silver-400: color-mix(in var(--mix-space), var(--fabric-bg) 24%, var(--color-silver));
161
+ --color-silver-500: var(--color-silver);
162
+ --color-silver-600: color-mix(in var(--mix-space), var(--fabric-text) 24%, var(--color-silver));
163
+ --color-silver-700: color-mix(in var(--mix-space), var(--fabric-text) 56%, var(--color-silver));
164
+ --color-silver-800: color-mix(in var(--mix-space), var(--fabric-text) 80%, var(--color-silver));
165
+ --color-silver-900: color-mix(in var(--mix-space), var(--fabric-text) 92%, var(--color-silver));
166
+ --color-silver-950: color-mix(in var(--mix-space), var(--fabric-text) 96%, var(--color-silver));
167
+
168
+ /* steel */
169
+ --color-steel-50: color-mix(in var(--mix-space), var(--fabric-bg) 96%, var(--color-steel));
170
+ --color-steel-100: color-mix(in var(--mix-space), var(--fabric-bg) 92%, var(--color-steel));
171
+ --color-steel-200: color-mix(in var(--mix-space), var(--fabric-bg) 80%, var(--color-steel));
172
+ --color-steel-300: color-mix(in var(--mix-space), var(--fabric-bg) 56%, var(--color-steel));
173
+ --color-steel-400: color-mix(in var(--mix-space), var(--fabric-bg) 24%, var(--color-steel));
174
+ --color-steel-500: var(--color-steel);
175
+ --color-steel-600: color-mix(in var(--mix-space), var(--fabric-text) 24%, var(--color-steel));
176
+ --color-steel-700: color-mix(in var(--mix-space), var(--fabric-text) 56%, var(--color-steel));
177
+ --color-steel-800: color-mix(in var(--mix-space), var(--fabric-text) 80%, var(--color-steel));
178
+ --color-steel-900: color-mix(in var(--mix-space), var(--fabric-text) 92%, var(--color-steel));
179
+ --color-steel-950: color-mix(in var(--mix-space), var(--fabric-text) 96%, var(--color-steel));
180
+
181
+ /* olive */
182
+ --color-olive-50: color-mix(in var(--mix-space), var(--fabric-bg) 96%, var(--color-olive));
183
+ --color-olive-100: color-mix(in var(--mix-space), var(--fabric-bg) 92%, var(--color-olive));
184
+ --color-olive-200: color-mix(in var(--mix-space), var(--fabric-bg) 80%, var(--color-olive));
185
+ --color-olive-300: color-mix(in var(--mix-space), var(--fabric-bg) 56%, var(--color-olive));
186
+ --color-olive-400: color-mix(in var(--mix-space), var(--fabric-bg) 24%, var(--color-olive));
187
+ --color-olive-500: var(--color-olive);
188
+ --color-olive-600: color-mix(in var(--mix-space), var(--fabric-text) 24%, var(--color-olive));
189
+ --color-olive-700: color-mix(in var(--mix-space), var(--fabric-text) 56%, var(--color-olive));
190
+ --color-olive-800: color-mix(in var(--mix-space), var(--fabric-text) 80%, var(--color-olive));
191
+ --color-olive-900: color-mix(in var(--mix-space), var(--fabric-text) 92%, var(--color-olive));
192
+ --color-olive-950: color-mix(in var(--mix-space), var(--fabric-text) 96%, var(--color-olive));
193
+
194
+ /* blush */
195
+ --color-blush-50: color-mix(in var(--mix-space), var(--fabric-bg) 96%, var(--color-blush));
196
+ --color-blush-100: color-mix(in var(--mix-space), var(--fabric-bg) 92%, var(--color-blush));
197
+ --color-blush-200: color-mix(in var(--mix-space), var(--fabric-bg) 80%, var(--color-blush));
198
+ --color-blush-300: color-mix(in var(--mix-space), var(--fabric-bg) 56%, var(--color-blush));
199
+ --color-blush-400: color-mix(in var(--mix-space), var(--fabric-bg) 24%, var(--color-blush));
200
+ --color-blush-500: var(--color-blush);
201
+ --color-blush-600: color-mix(in var(--mix-space), var(--fabric-text) 24%, var(--color-blush));
202
+ --color-blush-700: color-mix(in var(--mix-space), var(--fabric-text) 56%, var(--color-blush));
203
+ --color-blush-800: color-mix(in var(--mix-space), var(--fabric-text) 80%, var(--color-blush));
204
+ --color-blush-900: color-mix(in var(--mix-space), var(--fabric-text) 92%, var(--color-blush));
205
+ --color-blush-950: color-mix(in var(--mix-space), var(--fabric-text) 96%, var(--color-blush));
206
+
207
+ /* sand */
208
+ --color-sand-50: color-mix(in var(--mix-space), var(--fabric-bg) 96%, var(--color-sand));
209
+ --color-sand-100: color-mix(in var(--mix-space), var(--fabric-bg) 92%, var(--color-sand));
210
+ --color-sand-200: color-mix(in var(--mix-space), var(--fabric-bg) 80%, var(--color-sand));
211
+ --color-sand-300: color-mix(in var(--mix-space), var(--fabric-bg) 56%, var(--color-sand));
212
+ --color-sand-400: color-mix(in var(--mix-space), var(--fabric-bg) 24%, var(--color-sand));
213
+ --color-sand-500: var(--color-sand);
214
+ --color-sand-600: color-mix(in var(--mix-space), var(--fabric-text) 24%, var(--color-sand));
215
+ --color-sand-700: color-mix(in var(--mix-space), var(--fabric-text) 56%, var(--color-sand));
216
+ --color-sand-800: color-mix(in var(--mix-space), var(--fabric-text) 80%, var(--color-sand));
217
+ --color-sand-900: color-mix(in var(--mix-space), var(--fabric-text) 92%, var(--color-sand));
218
+ --color-sand-950: color-mix(in var(--mix-space), var(--fabric-text) 96%, var(--color-sand));
219
+
220
+ /* slate */
221
+ --color-slate-50: color-mix(in var(--mix-space), var(--fabric-bg) 96%, var(--color-slate));
222
+ --color-slate-100: color-mix(in var(--mix-space), var(--fabric-bg) 92%, var(--color-slate));
223
+ --color-slate-200: color-mix(in var(--mix-space), var(--fabric-bg) 80%, var(--color-slate));
224
+ --color-slate-300: color-mix(in var(--mix-space), var(--fabric-bg) 56%, var(--color-slate));
225
+ --color-slate-400: color-mix(in var(--mix-space), var(--fabric-bg) 24%, var(--color-slate));
226
+ --color-slate-500: var(--color-slate);
227
+ --color-slate-600: color-mix(in var(--mix-space), var(--fabric-text) 24%, var(--color-slate));
228
+ --color-slate-700: color-mix(in var(--mix-space), var(--fabric-text) 56%, var(--color-slate));
229
+ --color-slate-800: color-mix(in var(--mix-space), var(--fabric-text) 80%, var(--color-slate));
230
+ --color-slate-900: color-mix(in var(--mix-space), var(--fabric-text) 92%, var(--color-slate));
231
+ --color-slate-950: color-mix(in var(--mix-space), var(--fabric-text) 96%, var(--color-slate));
232
+
233
+ /* info */
234
+ --color-info-50: color-mix(in var(--mix-space), var(--fabric-bg) 85%, var(--color-info));
235
+ --color-info-100: color-mix(in var(--mix-space), var(--fabric-bg) 72%, var(--color-info));
236
+ --color-info-200: color-mix(in var(--mix-space), var(--fabric-bg) 54%, var(--color-info));
237
+ --color-info-300: color-mix(in var(--mix-space), var(--fabric-bg) 36%, var(--color-info));
238
+ --color-info-400: color-mix(in var(--mix-space), var(--fabric-bg) 24%, var(--color-info));
239
+ --color-info-500: var(--color-info);
240
+ --color-info-600: color-mix(in var(--mix-space), var(--fabric-text) 24%, var(--color-info));
241
+ --color-info-700: color-mix(in var(--mix-space), var(--fabric-text) 36%, var(--color-info));
242
+ --color-info-800: color-mix(in var(--mix-space), var(--fabric-text) 54%, var(--color-info));
243
+ --color-info-900: color-mix(in var(--mix-space), var(--fabric-text) 72%, var(--color-info));
244
+ --color-info-950: color-mix(in var(--mix-space), var(--fabric-text) 85%, var(--color-info));
245
+
246
+ /* danger */
247
+ --color-danger-50: color-mix(in var(--mix-space), var(--fabric-bg) 85%, var(--color-danger));
248
+ --color-danger-100: color-mix(in var(--mix-space), var(--fabric-bg) 72%, var(--color-danger));
249
+ --color-danger-200: color-mix(in var(--mix-space), var(--fabric-bg) 54%, var(--color-danger));
250
+ --color-danger-300: color-mix(in var(--mix-space), var(--fabric-bg) 36%, var(--color-danger));
251
+ --color-danger-400: color-mix(in var(--mix-space), var(--fabric-bg) 24%, var(--color-danger));
252
+ --color-danger-500: var(--color-danger);
253
+ --color-danger-600: color-mix(in var(--mix-space), var(--fabric-text) 24%, var(--color-danger));
254
+ --color-danger-700: color-mix(in var(--mix-space), var(--fabric-text) 36%, var(--color-danger));
255
+ --color-danger-800: color-mix(in var(--mix-space), var(--fabric-text) 54%, var(--color-danger));
256
+ --color-danger-900: color-mix(in var(--mix-space), var(--fabric-text) 72%, var(--color-danger));
257
+ --color-danger-950: color-mix(in var(--mix-space), var(--fabric-text) 85%, var(--color-danger));
258
+
259
+ /* success */
260
+ --color-success-50: color-mix(in var(--mix-space), var(--fabric-bg) 85%, var(--color-success));
261
+ --color-success-100: color-mix(in var(--mix-space), var(--fabric-bg) 72%, var(--color-success));
262
+ --color-success-200: color-mix(in var(--mix-space), var(--fabric-bg) 54%, var(--color-success));
263
+ --color-success-300: color-mix(in var(--mix-space), var(--fabric-bg) 36%, var(--color-success));
264
+ --color-success-400: color-mix(in var(--mix-space), var(--fabric-bg) 24%, var(--color-success));
265
+ --color-success-500: var(--color-success);
266
+ --color-success-600: color-mix(in var(--mix-space), var(--fabric-text) 24%, var(--color-success));
267
+ --color-success-700: color-mix(in var(--mix-space), var(--fabric-text) 36%, var(--color-success));
268
+ --color-success-800: color-mix(in var(--mix-space), var(--fabric-text) 54%, var(--color-success));
269
+ --color-success-900: color-mix(in var(--mix-space), var(--fabric-text) 72%, var(--color-success));
270
+ --color-success-950: color-mix(in var(--mix-space), var(--fabric-text) 85%, var(--color-success));
271
+
272
+ /* warning */
273
+ --color-warning-50: color-mix(in var(--mix-space), var(--fabric-bg) 85%, var(--color-warning));
274
+ --color-warning-100: color-mix(in var(--mix-space), var(--fabric-bg) 72%, var(--color-warning));
275
+ --color-warning-200: color-mix(in var(--mix-space), var(--fabric-bg) 54%, var(--color-warning));
276
+ --color-warning-300: color-mix(in var(--mix-space), var(--fabric-bg) 36%, var(--color-warning));
277
+ --color-warning-400: color-mix(in var(--mix-space), var(--fabric-bg) 24%, var(--color-warning));
278
+ --color-warning-500: var(--color-warning);
279
+ --color-warning-600: color-mix(in var(--mix-space), var(--fabric-text) 24%, var(--color-warning));
280
+ --color-warning-700: color-mix(in var(--mix-space), var(--fabric-text) 36%, var(--color-warning));
281
+ --color-warning-800: color-mix(in var(--mix-space), var(--fabric-text) 54%, var(--color-warning));
282
+ --color-warning-900: color-mix(in var(--mix-space), var(--fabric-text) 72%, var(--color-warning));
283
+ --color-warning-950: color-mix(in var(--mix-space), var(--fabric-text) 85%, var(--color-warning));
284
+
285
+ /* scarlet */
286
+ --color-scarlet-50: color-mix(in var(--mix-space), var(--fabric-bg) 85%, var(--color-scarlet));
287
+ --color-scarlet-100: color-mix(in var(--mix-space), var(--fabric-bg) 72%, var(--color-scarlet));
288
+ --color-scarlet-200: color-mix(in var(--mix-space), var(--fabric-bg) 54%, var(--color-scarlet));
289
+ --color-scarlet-300: color-mix(in var(--mix-space), var(--fabric-bg) 36%, var(--color-scarlet));
290
+ --color-scarlet-400: color-mix(in var(--mix-space), var(--fabric-bg) 24%, var(--color-scarlet));
291
+ --color-scarlet-500: var(--color-scarlet);
292
+ --color-scarlet-600: color-mix(in var(--mix-space), var(--fabric-text) 24%, var(--color-scarlet));
293
+ --color-scarlet-700: color-mix(in var(--mix-space), var(--fabric-text) 36%, var(--color-scarlet));
294
+ --color-scarlet-800: color-mix(in var(--mix-space), var(--fabric-text) 54%, var(--color-scarlet));
295
+ --color-scarlet-900: color-mix(in var(--mix-space), var(--fabric-text) 72%, var(--color-scarlet));
296
+ --color-scarlet-950: color-mix(in var(--mix-space), var(--fabric-text) 85%, var(--color-scarlet));
297
+
298
+ /* pumpkin */
299
+ --color-pumpkin-50: color-mix(in var(--mix-space), var(--fabric-bg) 85%, var(--color-pumpkin));
300
+ --color-pumpkin-100: color-mix(in var(--mix-space), var(--fabric-bg) 72%, var(--color-pumpkin));
301
+ --color-pumpkin-200: color-mix(in var(--mix-space), var(--fabric-bg) 54%, var(--color-pumpkin));
302
+ --color-pumpkin-300: color-mix(in var(--mix-space), var(--fabric-bg) 36%, var(--color-pumpkin));
303
+ --color-pumpkin-400: color-mix(in var(--mix-space), var(--fabric-bg) 24%, var(--color-pumpkin));
304
+ --color-pumpkin-500: var(--color-pumpkin);
305
+ --color-pumpkin-600: color-mix(in var(--mix-space), var(--fabric-text) 24%, var(--color-pumpkin));
306
+ --color-pumpkin-700: color-mix(in var(--mix-space), var(--fabric-text) 36%, var(--color-pumpkin));
307
+ --color-pumpkin-800: color-mix(in var(--mix-space), var(--fabric-text) 54%, var(--color-pumpkin));
308
+ --color-pumpkin-900: color-mix(in var(--mix-space), var(--fabric-text) 72%, var(--color-pumpkin));
309
+ --color-pumpkin-950: color-mix(in var(--mix-space), var(--fabric-text) 85%, var(--color-pumpkin));
310
+
311
+ /* marigold */
312
+ --color-marigold-50: color-mix(in var(--mix-space), var(--fabric-bg) 85%, var(--color-marigold));
313
+ --color-marigold-100: color-mix(in var(--mix-space), var(--fabric-bg) 72%, var(--color-marigold));
314
+ --color-marigold-200: color-mix(in var(--mix-space), var(--fabric-bg) 54%, var(--color-marigold));
315
+ --color-marigold-300: color-mix(in var(--mix-space), var(--fabric-bg) 36%, var(--color-marigold));
316
+ --color-marigold-400: color-mix(in var(--mix-space), var(--fabric-bg) 24%, var(--color-marigold));
317
+ --color-marigold-500: var(--color-marigold);
318
+ --color-marigold-600: color-mix(in var(--mix-space), var(--fabric-text) 24%, var(--color-marigold));
319
+ --color-marigold-700: color-mix(in var(--mix-space), var(--fabric-text) 36%, var(--color-marigold));
320
+ --color-marigold-800: color-mix(in var(--mix-space), var(--fabric-text) 54%, var(--color-marigold));
321
+ --color-marigold-900: color-mix(in var(--mix-space), var(--fabric-text) 72%, var(--color-marigold));
322
+ --color-marigold-950: color-mix(in var(--mix-space), var(--fabric-text) 85%, var(--color-marigold));
323
+
324
+ /* amber */
325
+ --color-amber-50: color-mix(in var(--mix-space), var(--fabric-bg) 85%, var(--color-amber));
326
+ --color-amber-100: color-mix(in var(--mix-space), var(--fabric-bg) 72%, var(--color-amber));
327
+ --color-amber-200: color-mix(in var(--mix-space), var(--fabric-bg) 54%, var(--color-amber));
328
+ --color-amber-300: color-mix(in var(--mix-space), var(--fabric-bg) 36%, var(--color-amber));
329
+ --color-amber-400: color-mix(in var(--mix-space), var(--fabric-bg) 24%, var(--color-amber));
330
+ --color-amber-500: var(--color-amber);
331
+ --color-amber-600: color-mix(in var(--mix-space), var(--fabric-text) 24%, var(--color-amber));
332
+ --color-amber-700: color-mix(in var(--mix-space), var(--fabric-text) 36%, var(--color-amber));
333
+ --color-amber-800: color-mix(in var(--mix-space), var(--fabric-text) 54%, var(--color-amber));
334
+ --color-amber-900: color-mix(in var(--mix-space), var(--fabric-text) 72%, var(--color-amber));
335
+ --color-amber-950: color-mix(in var(--mix-space), var(--fabric-text) 85%, var(--color-amber));
336
+
337
+ /* lime */
338
+ --color-lime-50: color-mix(in var(--mix-space), var(--fabric-bg) 85%, var(--color-lime));
339
+ --color-lime-100: color-mix(in var(--mix-space), var(--fabric-bg) 72%, var(--color-lime));
340
+ --color-lime-200: color-mix(in var(--mix-space), var(--fabric-bg) 54%, var(--color-lime));
341
+ --color-lime-300: color-mix(in var(--mix-space), var(--fabric-bg) 36%, var(--color-lime));
342
+ --color-lime-400: color-mix(in var(--mix-space), var(--fabric-bg) 24%, var(--color-lime));
343
+ --color-lime-500: var(--color-lime);
344
+ --color-lime-600: color-mix(in var(--mix-space), var(--fabric-text) 24%, var(--color-lime));
345
+ --color-lime-700: color-mix(in var(--mix-space), var(--fabric-text) 36%, var(--color-lime));
346
+ --color-lime-800: color-mix(in var(--mix-space), var(--fabric-text) 54%, var(--color-lime));
347
+ --color-lime-900: color-mix(in var(--mix-space), var(--fabric-text) 72%, var(--color-lime));
348
+ --color-lime-950: color-mix(in var(--mix-space), var(--fabric-text) 85%, var(--color-lime));
349
+
350
+ /* jade */
351
+ --color-jade-50: color-mix(in oklab, var(--color-jade) 15%, var(--fabric-bg));
352
+ --color-jade-100: color-mix(in oklab, var(--color-jade) 32%, var(--fabric-bg));
353
+ --color-jade-200: color-mix(in oklab, var(--color-jade) 50%, var(--fabric-bg));
354
+ --color-jade-300: color-mix(in oklab, var(--color-jade) 68%, var(--fabric-bg));
355
+ --color-jade-400: color-mix(in oklab, var(--color-jade) 85%, var(--fabric-bg));
356
+ --color-jade-500: var(--color-jade);
357
+ --color-jade-600: color-mix(in oklab, var(--color-jade) 85%, var(--fabric-text));
358
+ --color-jade-700: color-mix(in oklab, var(--color-jade) 68%, var(--fabric-text));
359
+ --color-jade-800: color-mix(in oklab, var(--color-jade) 50%, var(--fabric-text));
360
+ --color-jade-900: color-mix(in oklab, var(--color-jade) 32%, var(--fabric-text));
361
+ --color-jade-950: color-mix(in oklab, var(--color-jade) 15%, var(--fabric-text));
362
+
363
+ /* avocado */
364
+ --color-avocado-50: color-mix(in var(--mix-space), var(--fabric-bg) 85%, var(--color-avocado));
365
+ --color-avocado-100: color-mix(in var(--mix-space), var(--fabric-bg) 72%, var(--color-avocado));
366
+ --color-avocado-200: color-mix(in var(--mix-space), var(--fabric-bg) 54%, var(--color-avocado));
367
+ --color-avocado-300: color-mix(in var(--mix-space), var(--fabric-bg) 36%, var(--color-avocado));
368
+ --color-avocado-400: color-mix(in var(--mix-space), var(--fabric-bg) 24%, var(--color-avocado));
369
+ --color-avocado-500: var(--color-avocado);
370
+ --color-avocado-600: color-mix(in var(--mix-space), var(--fabric-text) 24%, var(--color-avocado));
371
+ --color-avocado-700: color-mix(in var(--mix-space), var(--fabric-text) 36%, var(--color-avocado));
372
+ --color-avocado-800: color-mix(in var(--mix-space), var(--fabric-text) 54%, var(--color-avocado));
373
+ --color-avocado-900: color-mix(in var(--mix-space), var(--fabric-text) 72%, var(--color-avocado));
374
+ --color-avocado-950: color-mix(in var(--mix-space), var(--fabric-text) 85%, var(--color-avocado));
375
+
376
+ /* teal */
377
+ --color-teal-50: color-mix(in var(--mix-space), var(--fabric-bg) 85%, var(--color-teal));
378
+ --color-teal-100: color-mix(in var(--mix-space), var(--fabric-bg) 72%, var(--color-teal));
379
+ --color-teal-200: color-mix(in var(--mix-space), var(--fabric-bg) 54%, var(--color-teal));
380
+ --color-teal-300: color-mix(in var(--mix-space), var(--fabric-bg) 36%, var(--color-teal));
381
+ --color-teal-400: color-mix(in var(--mix-space), var(--fabric-bg) 24%, var(--color-teal));
382
+ --color-teal-500: var(--color-teal);
383
+ --color-teal-600: color-mix(in var(--mix-space), var(--fabric-text) 24%, var(--color-teal));
384
+ --color-teal-700: color-mix(in var(--mix-space), var(--fabric-text) 36%, var(--color-teal));
385
+ --color-teal-800: color-mix(in var(--mix-space), var(--fabric-text) 54%, var(--color-teal));
386
+ --color-teal-900: color-mix(in var(--mix-space), var(--fabric-text) 72%, var(--color-teal));
387
+ --color-teal-950: color-mix(in var(--mix-space), var(--fabric-text) 85%, var(--color-teal));
388
+
389
+ /* axure */
390
+ --color-azure-50: color-mix(in var(--mix-space), var(--fabric-bg) 85%, var(--color-azure));
391
+ --color-azure-100: color-mix(in var(--mix-space), var(--fabric-bg) 72%, var(--color-azure));
392
+ --color-azure-200: color-mix(in var(--mix-space), var(--fabric-bg) 54%, var(--color-azure));
393
+ --color-azure-300: color-mix(in var(--mix-space), var(--fabric-bg) 36%, var(--color-azure));
394
+ --color-azure-400: color-mix(in var(--mix-space), var(--fabric-bg) 24%, var(--color-azure));
395
+ --color-azure-500: var(--color-azure);
396
+ --color-azure-600: color-mix(in var(--mix-space), var(--fabric-text) 24%, var(--color-azure));
397
+ --color-azure-700: color-mix(in var(--mix-space), var(--fabric-text) 36%, var(--color-azure));
398
+ --color-azure-800: color-mix(in var(--mix-space), var(--fabric-text) 54%, var(--color-azure));
399
+ --color-azure-900: color-mix(in var(--mix-space), var(--fabric-text) 72%, var(--color-azure));
400
+ --color-azure-950: color-mix(in var(--mix-space), var(--fabric-text) 85%, var(--color-azure));
401
+
402
+ /* denim */
403
+ --color-denim-50: color-mix(in var(--mix-space), var(--fabric-bg) 85%, var(--color-denim));
404
+ --color-denim-100: color-mix(in var(--mix-space), var(--fabric-bg) 72%, var(--color-denim));
405
+ --color-denim-200: color-mix(in var(--mix-space), var(--fabric-bg) 54%, var(--color-denim));
406
+ --color-denim-300: color-mix(in var(--mix-space), var(--fabric-bg) 36%, var(--color-denim));
407
+ --color-denim-400: color-mix(in var(--mix-space), var(--fabric-bg) 24%, var(--color-denim));
408
+ --color-denim-500: var(--color-denim);
409
+ --color-denim-600: color-mix(in var(--mix-space), var(--fabric-text) 24%, var(--color-denim));
410
+ --color-denim-700: color-mix(in var(--mix-space), var(--fabric-text) 36%, var(--color-denim));
411
+ --color-denim-800: color-mix(in var(--mix-space), var(--fabric-text) 54%, var(--color-denim));
412
+ --color-denim-900: color-mix(in var(--mix-space), var(--fabric-text) 72%, var(--color-denim));
413
+ --color-denim-950: color-mix(in var(--mix-space), var(--fabric-text) 85%, var(--color-denim));
414
+
415
+ /* iris */
416
+ --color-iris-50: color-mix(in var(--mix-space), var(--fabric-bg) 85%, var(--color-iris));
417
+ --color-iris-100: color-mix(in var(--mix-space), var(--fabric-bg) 72%, var(--color-iris));
418
+ --color-iris-200: color-mix(in var(--mix-space), var(--fabric-bg) 54%, var(--color-iris));
419
+ --color-iris-300: color-mix(in var(--mix-space), var(--fabric-bg) 36%, var(--color-iris));
420
+ --color-iris-400: color-mix(in var(--mix-space), var(--fabric-bg) 24%, var(--color-iris));
421
+ --color-iris-500: var(--color-iris);
422
+ --color-iris-600: color-mix(in var(--mix-space), var(--fabric-text) 24%, var(--color-iris));
423
+ --color-iris-700: color-mix(in var(--mix-space), var(--fabric-text) 36%, var(--color-iris));
424
+ --color-iris-800: color-mix(in var(--mix-space), var(--fabric-text) 54%, var(--color-iris));
425
+ --color-iris-900: color-mix(in var(--mix-space), var(--fabric-text) 72%, var(--color-iris));
426
+ --color-iris-950: color-mix(in var(--mix-space), var(--fabric-text) 85%, var(--color-iris));
427
+
428
+ /* lilac */
429
+ --color-lilac-50: color-mix(in var(--mix-space), var(--fabric-bg) 85%, var(--color-lilac));
430
+ --color-lilac-100: color-mix(in var(--mix-space), var(--fabric-bg) 72%, var(--color-lilac));
431
+ --color-lilac-200: color-mix(in var(--mix-space), var(--fabric-bg) 54%, var(--color-lilac));
432
+ --color-lilac-300: color-mix(in var(--mix-space), var(--fabric-bg) 36%, var(--color-lilac));
433
+ --color-lilac-400: color-mix(in var(--mix-space), var(--fabric-bg) 24%, var(--color-lilac));
434
+ --color-lilac-500: var(--color-lilac);
435
+ --color-lilac-600: color-mix(in var(--mix-space), var(--fabric-text) 24%, var(--color-lilac));
436
+ --color-lilac-700: color-mix(in var(--mix-space), var(--fabric-text) 36%, var(--color-lilac));
437
+ --color-lilac-800: color-mix(in var(--mix-space), var(--fabric-text) 54%, var(--color-lilac));
438
+ --color-lilac-900: color-mix(in var(--mix-space), var(--fabric-text) 72%, var(--color-lilac));
439
+ --color-lilac-950: color-mix(in var(--mix-space), var(--fabric-text) 85%, var(--color-lilac));
440
+
441
+ /* orchid */
442
+ --color-orchid-50: color-mix(in var(--mix-space), var(--fabric-bg) 85%, var(--color-orchid));
443
+ --color-orchid-100: color-mix(in var(--mix-space), var(--fabric-bg) 72%, var(--color-orchid));
444
+ --color-orchid-200: color-mix(in var(--mix-space), var(--fabric-bg) 54%, var(--color-orchid));
445
+ --color-orchid-300: color-mix(in var(--mix-space), var(--fabric-bg) 36%, var(--color-orchid));
446
+ --color-orchid-400: color-mix(in var(--mix-space), var(--fabric-bg) 24%, var(--color-orchid));
447
+ --color-orchid-500: var(--color-orchid);
448
+ --color-orchid-600: color-mix(in var(--mix-space), var(--fabric-text) 24%, var(--color-orchid));
449
+ --color-orchid-700: color-mix(in var(--mix-space), var(--fabric-text) 36%, var(--color-orchid));
450
+ --color-orchid-800: color-mix(in var(--mix-space), var(--fabric-text) 54%, var(--color-orchid));
451
+ --color-orchid-900: color-mix(in var(--mix-space), var(--fabric-text) 72%, var(--color-orchid));
452
+ --color-orchid-950: color-mix(in var(--mix-space), var(--fabric-text) 85%, var(--color-orchid));
453
+
454
+ /* coral */
455
+ --color-coral-50: color-mix(in var(--mix-space), var(--fabric-bg) 85%, var(--color-coral));
456
+ --color-coral-100: color-mix(in var(--mix-space), var(--fabric-bg) 72%, var(--color-coral));
457
+ --color-coral-200: color-mix(in var(--mix-space), var(--fabric-bg) 54%, var(--color-coral));
458
+ --color-coral-300: color-mix(in var(--mix-space), var(--fabric-bg) 36%, var(--color-coral));
459
+ --color-coral-400: color-mix(in var(--mix-space), var(--fabric-bg) 24%, var(--color-coral));
460
+ --color-coral-500: var(--color-coral);
461
+ --color-coral-600: color-mix(in var(--mix-space), var(--fabric-text) 24%, var(--color-coral));
462
+ --color-coral-700: color-mix(in var(--mix-space), var(--fabric-text) 36%, var(--color-coral));
463
+ --color-coral-800: color-mix(in var(--mix-space), var(--fabric-text) 54%, var(--color-coral));
464
+ --color-coral-900: color-mix(in var(--mix-space), var(--fabric-text) 72%, var(--color-coral));
465
+ --color-coral-950: color-mix(in var(--mix-space), var(--fabric-text) 85%, var(--color-coral));
466
+
467
+ /* wood */
468
+ --color-wood-50: color-mix(in var(--mix-space), var(--fabric-bg) 85%, var(--color-wood));
469
+ --color-wood-100: color-mix(in var(--mix-space), var(--fabric-bg) 72%, var(--color-wood));
470
+ --color-wood-200: color-mix(in var(--mix-space), var(--fabric-bg) 54%, var(--color-wood));
471
+ --color-wood-300: color-mix(in var(--mix-space), var(--fabric-bg) 36%, var(--color-wood));
472
+ --color-wood-400: color-mix(in var(--mix-space), var(--fabric-bg) 24%, var(--color-wood));
473
+ --color-wood-500: var(--color-wood);
474
+ --color-wood-600: color-mix(in var(--mix-space), var(--fabric-text) 24%, var(--color-wood));
475
+ --color-wood-700: color-mix(in var(--mix-space), var(--fabric-text) 36%, var(--color-wood));
476
+ --color-wood-800: color-mix(in var(--mix-space), var(--fabric-text) 54%, var(--color-wood));
477
+ --color-wood-900: color-mix(in var(--mix-space), var(--fabric-text) 72%, var(--color-wood));
478
+ --color-wood-950: color-mix(in var(--mix-space), var(--fabric-text) 85%, var(--color-wood));
479
+
480
+ /* terracotta */
481
+ --color-terracotta-50: color-mix(in var(--mix-space), var(--fabric-bg) 85%, var(--color-terracotta));
482
+ --color-terracotta-100: color-mix(in var(--mix-space), var(--fabric-bg) 72%, var(--color-terracotta));
483
+ --color-terracotta-200: color-mix(in var(--mix-space), var(--fabric-bg) 54%, var(--color-terracotta));
484
+ --color-terracotta-300: color-mix(in var(--mix-space), var(--fabric-bg) 36%, var(--color-terracotta));
485
+ --color-terracotta-400: color-mix(in var(--mix-space), var(--fabric-bg) 24%, var(--color-terracotta));
486
+ --color-terracotta-500: var(--color-terracotta);
487
+ --color-terracotta-600: color-mix(in var(--mix-space), var(--fabric-text) 24%, var(--color-terracotta));
488
+ --color-terracotta-700: color-mix(in var(--mix-space), var(--fabric-text) 36%, var(--color-terracotta));
489
+ --color-terracotta-800: color-mix(in var(--mix-space), var(--fabric-text) 54%, var(--color-terracotta));
490
+ --color-terracotta-900: color-mix(in var(--mix-space), var(--fabric-text) 72%, var(--color-terracotta));
491
+ --color-terracotta-950: color-mix(in var(--mix-space), var(--fabric-text) 85%, var(--color-terracotta));
492
+
493
+ color: color-mix(in lab, var(--fabric-text) 95%, var(--color-tint));
494
+ background-color: color-mix(in lab, var(--fabric-bg) 95%, var(--color-tint));
109
495
  }
110
496
  }
package/css/reset/index.css CHANGED
@@ -1,27 +1,29 @@
1
- /*
1
+ /**
2
2
  * React Fabric
3
- * @version: 1.0.0
3
+ * @version 1.0.0
4
+ * @license MIT
5
+ * @copyright 2024 Adarsh Pastakia
4
6
  *
7
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
8
+ * of this software and associated documentation files (the "Software"), to deal
9
+ * in the Software without restriction, including without limitation the rights
10
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
11
+ * copies of the Software, and to permit persons to whom the Software is
12
+ * furnished to do so, subject to the following conditions:
5
13
  *
6
- * The MIT License (MIT)
7
- * Copyright (c) 2024 Adarsh Pastakia
14
+ * The above copyright notice and this permission notice shall be included in all
15
+ * copies or substantial portions of the Software.
8
16
  *
9
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
10
- * and associated documentation files (the "Software"), to deal in the Software without restriction,
11
- * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
12
- * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
13
- * subject to the following conditions:
14
- *
15
- * The above copyright notice and this permission notice shall be included in all copies or substantial
16
- * portions of the Software.
17
- *
18
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
19
- * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
20
- * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
21
- * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
17
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
18
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
19
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
20
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
21
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
22
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
23
+ * SOFTWARE.
22
24
  */
23
25
 
24
- @import url("./_theme.css");
25
- @import url("./_reset.css");
26
- @import url("./_text.css");
27
- @import url("./_gradients.css");
26
+ @import "./_theme.css";
27
+ @import "./_reset.css";
28
+ @import "./_text.css";
29
+ @import "./_gradients.css";