@react-fabric/core 1.0.0-beta.6 → 1.0.0-beta.61

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 (429) 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} +52 -47
  7. package/{src/components/button/Button.module.css → css/components/_button.css} +86 -84
  8. package/{src/components/card/Card.module.css → css/components/_card.css} +54 -28
  9. package/{src/components/chip/Chip.module.css → css/components/_chip.css} +14 -10
  10. package/{src/components/collapsable/Collapsable.module.css → css/components/_collapsable.css} +3 -3
  11. package/css/components/_divider.css +38 -0
  12. package/{src/components/dropdown/Dropdown.module.css → css/components/_dropdown.css} +2 -2
  13. package/{src/overlays/flyout/Flyout.module.css → css/components/_flyout.css} +6 -6
  14. package/{src/components/icon/Icon.module.css → css/components/_icon.css} +12 -9
  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} +21 -20
  17. package/{src/overlays/message/Message.module.css → css/components/_message.css} +2 -2
  18. package/{src/components/meter/Meter.module.css → css/components/_meter.css} +10 -10
  19. package/{src/overlays/modal/Modal.module.css → css/components/_modal.css} +8 -8
  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/css/components/_stepper.css +86 -0
  23. package/{src/components/tabpanel/TabPanel.module.css → css/components/_tabPanel.css} +130 -85
  24. package/{src/overlays/toast/Toast.module.css → css/components/_toast.css} +2 -2
  25. package/css/components/_tooltip.css +29 -0
  26. package/{src/core/content/Content.module.css → css/components/index.css} +26 -18
  27. package/{src/core/aside/Aside.module.css → css/core/_aside.css} +60 -48
  28. package/{src/core/section/Section.module.css → css/core/_content.css} +5 -3
  29. package/{src/core/boundary/ErrorBoundary.module.css → css/core/_errorboundary.css} +9 -9
  30. package/{src/core/headfoot/HeadFoot.module.css → css/core/_headfoot.css} +4 -10
  31. package/{src/core/page/Page.module.css → css/core/_page.css} +10 -14
  32. package/{src/core/responsive/Responsive.module.css → css/core/_responsive.css} +10 -10
  33. package/css/core/_section.css +28 -0
  34. package/{src/core/theme/Theme.module.css → css/core/_theme.css} +3 -3
  35. package/{src/typography/Typography.module.css → css/core/_typography.css} +14 -12
  36. package/{src/core/viewport/Viewport.module.css → css/core/_viewport.css} +7 -3
  37. package/css/core/index.css +33 -0
  38. package/css/reset/_gradients.css +8 -8
  39. package/css/reset/_reset.css +56 -224
  40. package/css/reset/_text.css +14 -29
  41. package/css/reset/_theme.css +331 -52
  42. package/css/reset/index.css +4 -4
  43. package/css/styles.css +9 -6
  44. package/css/theme/_colors.css +320 -0
  45. package/css/theme/_utilities.css +541 -0
  46. package/css/theme/index.css +45 -0
  47. package/dist/cjs/components/actionLabel/ActionLabel.js +26 -8
  48. package/dist/cjs/components/animations/Animations.js +137 -45
  49. package/dist/cjs/components/avatar/Avatar.js +46 -13
  50. package/dist/cjs/components/avatar/AvatarGroup.js +22 -4
  51. package/dist/cjs/components/badge/Badge.js +36 -15
  52. package/dist/cjs/components/breadcrumbs/Breadcrumbs.js +40 -9
  53. package/dist/cjs/components/button/Button.js +51 -29
  54. package/dist/cjs/components/button/ButtonGroup.js +30 -3
  55. package/dist/cjs/components/button/ConfirmButton.js +28 -2
  56. package/dist/cjs/components/button/ToggleButtonGroup.js +41 -15
  57. package/dist/cjs/components/callout/Callout.js +47 -7
  58. package/dist/cjs/components/card/Card.js +60 -18
  59. package/dist/cjs/components/card/CardCover.js +36 -5
  60. package/dist/cjs/components/card/FlipContent.js +56 -0
  61. package/dist/cjs/components/chip/Chip.js +40 -20
  62. package/dist/cjs/components/collapsable/Collapsable.js +32 -8
  63. package/dist/cjs/components/divider/Divider.js +30 -7
  64. package/dist/cjs/components/dropdown/Dropdown.js +48 -9
  65. package/dist/cjs/components/dropdown/DropdownTool.js +2 -3
  66. package/dist/cjs/components/empty/EmptyContent.js +37 -7
  67. package/dist/cjs/components/icon/Icon.js +76 -13
  68. package/dist/cjs/components/media/Media.js +174 -76
  69. package/dist/cjs/components/menu/ContextMenu.js +19 -0
  70. package/dist/cjs/components/menu/Menu.js +77 -23
  71. package/dist/cjs/components/menu/MenuItem.js +54 -27
  72. package/dist/cjs/components/meter/Meter.js +26 -3
  73. package/dist/cjs/components/navigator/Navigator.js +50 -18
  74. package/dist/cjs/components/panel/Panel.js +59 -28
  75. package/dist/cjs/components/panel/PanelGroup.js +25 -2
  76. package/dist/cjs/components/panel/PanelStack.js +31 -2
  77. package/dist/cjs/components/progress/ProgressBar.js +31 -9
  78. package/dist/cjs/components/progress/ProgressCircle.js +29 -7
  79. package/dist/cjs/components/tabpanel/Tab.js +39 -16
  80. package/dist/cjs/components/tabpanel/TabPanel.js +56 -16
  81. package/dist/cjs/context/Global.js +28 -1
  82. package/dist/cjs/context/NotificationCenter.js +3 -3
  83. package/dist/cjs/core/aside/Aside.js +50 -25
  84. package/dist/cjs/core/boundary/ErrorBoundary.js +25 -8
  85. package/dist/cjs/core/boundary/ErrorIcon.js +1 -2
  86. package/dist/cjs/core/content/Content.js +7 -3
  87. package/dist/cjs/core/headfoot/HeadFoot.js +48 -22
  88. package/dist/cjs/core/page/Page.js +41 -40
  89. package/dist/cjs/core/responsive/Responsive.js +59 -6
  90. package/dist/cjs/core/section/Section.js +12 -29
  91. package/dist/cjs/core/theme/ThemeProvider.js +32 -10
  92. package/dist/cjs/core/viewport/Viewport.js +18 -2
  93. package/dist/cjs/hooks/useControlledValue.js +12 -0
  94. package/dist/cjs/hooks/useDebounce.js +14 -1
  95. package/dist/cjs/hooks/useEffectDebugger.js +54 -2
  96. package/dist/cjs/hooks/useIsDark.js +8 -0
  97. package/dist/cjs/hooks/useIsRtl.js +12 -0
  98. package/dist/cjs/hooks/useNavigator.js +6 -4
  99. package/dist/cjs/hooks/useOverlayService.js +24 -0
  100. package/dist/cjs/hooks/usePropToggle.js +16 -5
  101. package/dist/cjs/hooks/useResize.js +18 -0
  102. package/dist/cjs/hooks/useResizeObserver.js +20 -1
  103. package/dist/cjs/hooks/useStepper.js +74 -0
  104. package/dist/cjs/hooks/useStorage.js +39 -0
  105. package/dist/cjs/hotkeys/HotKeyLabel.js +1 -1
  106. package/dist/cjs/hotkeys/HotKeyWrapper.js +3 -1
  107. package/dist/cjs/index.js +14 -10
  108. package/dist/cjs/overlays/alert/Alert.js +24 -17
  109. package/dist/cjs/overlays/flyout/Flyout.js +48 -65
  110. package/dist/cjs/overlays/message/Message.js +8 -3
  111. package/dist/cjs/overlays/modal/Modal.js +19 -23
  112. package/dist/cjs/overlays/toast/Toast.js +22 -13
  113. package/dist/cjs/overlays/tooltip/Tooltip.js +25 -13
  114. package/dist/cjs/typography/Abbr.js +35 -7
  115. package/dist/cjs/typography/{Link.js → Anchor.js} +23 -5
  116. package/dist/cjs/typography/Copy.js +1 -2
  117. package/dist/cjs/typography/Mark.js +25 -5
  118. package/dist/cjs/typography/Text.js +30 -5
  119. package/dist/cjs/typography/Title.js +19 -4
  120. package/dist/cjs/utils/cloneElement.js +47 -0
  121. package/dist/cjs/utils/getColor.js +1 -18
  122. package/dist/esm/components/actionLabel/ActionLabel.js +26 -8
  123. package/dist/esm/components/animations/Animations.js +135 -44
  124. package/dist/esm/components/avatar/Avatar.js +46 -13
  125. package/dist/esm/components/avatar/AvatarGroup.js +22 -4
  126. package/dist/esm/components/badge/Badge.js +38 -17
  127. package/dist/esm/components/breadcrumbs/Breadcrumbs.js +40 -9
  128. package/dist/esm/components/button/Button.js +53 -31
  129. package/dist/esm/components/button/ButtonGroup.js +31 -4
  130. package/dist/esm/components/button/ConfirmButton.js +28 -2
  131. package/dist/esm/components/button/ToggleButtonGroup.js +42 -16
  132. package/dist/esm/components/callout/Callout.js +47 -7
  133. package/dist/esm/components/card/Card.js +61 -19
  134. package/dist/esm/components/card/CardCover.js +36 -5
  135. package/dist/esm/components/card/FlipContent.js +56 -0
  136. package/dist/esm/components/chip/Chip.js +42 -22
  137. package/dist/esm/components/collapsable/Collapsable.js +32 -8
  138. package/dist/esm/components/divider/Divider.js +31 -8
  139. package/dist/esm/components/dropdown/Dropdown.js +48 -9
  140. package/dist/esm/components/dropdown/DropdownTool.js +2 -3
  141. package/dist/esm/components/empty/EmptyContent.js +37 -7
  142. package/dist/esm/components/icon/Icon.js +78 -16
  143. package/dist/esm/components/media/Media.js +175 -77
  144. package/dist/esm/components/menu/ContextMenu.js +19 -0
  145. package/dist/esm/components/menu/Menu.js +79 -25
  146. package/dist/esm/components/menu/MenuItem.js +49 -22
  147. package/dist/esm/components/meter/Meter.js +26 -3
  148. package/dist/esm/components/navigator/Navigator.js +50 -18
  149. package/dist/esm/components/panel/Panel.js +61 -30
  150. package/dist/esm/components/panel/PanelGroup.js +25 -2
  151. package/dist/esm/components/panel/PanelStack.js +31 -2
  152. package/dist/esm/components/progress/ProgressBar.js +31 -9
  153. package/dist/esm/components/progress/ProgressCircle.js +29 -7
  154. package/dist/esm/components/tabpanel/Tab.js +40 -17
  155. package/dist/esm/components/tabpanel/TabPanel.js +56 -16
  156. package/dist/esm/context/Global.js +28 -1
  157. package/dist/esm/context/NotificationCenter.js +3 -3
  158. package/dist/esm/core/aside/Aside.js +52 -27
  159. package/dist/esm/core/boundary/ErrorBoundary.js +25 -8
  160. package/dist/esm/core/boundary/ErrorIcon.js +1 -2
  161. package/dist/esm/core/content/Content.js +7 -3
  162. package/dist/esm/core/headfoot/HeadFoot.js +48 -22
  163. package/dist/esm/core/page/Page.js +43 -42
  164. package/dist/esm/core/responsive/Responsive.js +59 -6
  165. package/dist/esm/core/section/Section.js +12 -29
  166. package/dist/esm/core/theme/ThemeProvider.js +32 -10
  167. package/dist/esm/core/viewport/Viewport.js +18 -2
  168. package/dist/esm/hooks/useControlledValue.js +12 -0
  169. package/dist/esm/hooks/useDebounce.js +14 -1
  170. package/dist/esm/hooks/useEffectDebugger.js +54 -2
  171. package/dist/esm/hooks/useIsDark.js +8 -0
  172. package/dist/esm/hooks/useIsRtl.js +12 -0
  173. package/dist/esm/hooks/useNavigator.js +7 -5
  174. package/dist/esm/hooks/useOverlayService.js +24 -0
  175. package/dist/esm/hooks/usePropToggle.js +16 -5
  176. package/dist/esm/hooks/useResize.js +18 -0
  177. package/dist/esm/hooks/useResizeObserver.js +20 -1
  178. package/dist/esm/hooks/useStepper.js +74 -0
  179. package/dist/esm/hooks/useStorage.js +39 -0
  180. package/dist/esm/hotkeys/HotKeyLabel.js +1 -1
  181. package/dist/esm/hotkeys/HotKeyWrapper.js +3 -1
  182. package/dist/esm/index.js +7 -4
  183. package/dist/esm/overlays/alert/Alert.js +25 -18
  184. package/dist/esm/overlays/flyout/Flyout.js +53 -70
  185. package/dist/esm/overlays/message/Message.js +9 -4
  186. package/dist/esm/overlays/modal/Modal.js +22 -26
  187. package/dist/esm/overlays/toast/Toast.js +23 -14
  188. package/dist/esm/overlays/tooltip/Tooltip.js +25 -13
  189. package/dist/esm/typography/Abbr.js +35 -7
  190. package/dist/esm/typography/{Link.js → Anchor.js} +24 -6
  191. package/dist/esm/typography/Copy.js +1 -2
  192. package/dist/esm/typography/Mark.js +25 -5
  193. package/dist/esm/typography/Text.js +31 -6
  194. package/dist/esm/typography/Title.js +20 -5
  195. package/dist/esm/utils/cloneElement.js +47 -0
  196. package/dist/esm/utils/getColor.js +2 -16
  197. package/dist/types/components/actionLabel/ActionLabel.d.ts +21 -2
  198. package/dist/types/components/animations/Animations.d.ts +105 -7
  199. package/dist/types/components/avatar/Avatar.d.ts +34 -6
  200. package/dist/types/components/avatar/AvatarGroup.d.ts +19 -1
  201. package/dist/types/components/badge/Badge.d.ts +37 -3
  202. package/dist/types/components/breadcrumbs/Breadcrumbs.d.ts +31 -2
  203. package/dist/types/components/button/Button.d.ts +39 -7
  204. package/dist/types/components/button/ButtonGroup.d.ts +28 -3
  205. package/dist/types/components/button/ConfirmButton.d.ts +23 -3
  206. package/dist/types/components/button/ToggleButtonGroup.d.ts +39 -11
  207. package/dist/types/components/callout/Callout.d.ts +29 -3
  208. package/dist/types/components/card/Card.d.ts +44 -4
  209. package/dist/types/components/card/CardCover.d.ts +25 -0
  210. package/dist/types/components/card/FlipContent.d.ts +28 -0
  211. package/dist/types/components/chip/Chip.d.ts +34 -5
  212. package/dist/types/components/collapsable/Collapsable.d.ts +28 -2
  213. package/dist/types/components/divider/Divider.d.ts +30 -7
  214. package/dist/types/components/dropdown/Dropdown.d.ts +40 -1
  215. package/dist/types/components/dropdown/DropdownTool.d.ts +25 -0
  216. package/dist/types/components/empty/EmptyContent.d.ts +32 -3
  217. package/dist/types/components/icon/Icon.d.ts +40 -8
  218. package/dist/types/components/index.d.ts +3 -2
  219. package/dist/types/components/media/Media.d.ts +54 -0
  220. package/dist/types/components/menu/ContextMenu.d.ts +19 -1
  221. package/dist/types/components/menu/Menu.d.ts +29 -0
  222. package/dist/types/components/menu/MenuItem.d.ts +22 -2
  223. package/dist/types/components/menu/types.d.ts +9 -3
  224. package/dist/types/components/meter/Meter.d.ts +24 -0
  225. package/dist/types/components/navigator/Navigator.d.ts +29 -4
  226. package/dist/types/components/panel/Panel.d.ts +43 -4
  227. package/dist/types/components/panel/PanelGroup.d.ts +24 -0
  228. package/dist/types/components/panel/PanelStack.d.ts +31 -0
  229. package/dist/types/components/progress/ProgressBar.d.ts +23 -3
  230. package/dist/types/components/progress/ProgressCircle.d.ts +22 -3
  231. package/dist/types/components/tabpanel/Tab.d.ts +38 -4
  232. package/dist/types/components/tabpanel/TabPanel.d.ts +51 -2
  233. package/dist/types/context/Global.d.ts +24 -1
  234. package/dist/types/core/aside/Aside.d.ts +45 -6
  235. package/dist/types/core/boundary/ErrorBoundary.d.ts +18 -2
  236. package/dist/types/core/content/Content.d.ts +6 -1
  237. package/dist/types/core/headfoot/HeadFoot.d.ts +41 -9
  238. package/dist/types/core/page/Page.d.ts +32 -4
  239. package/dist/types/core/responsive/Responsive.d.ts +58 -3
  240. package/dist/types/core/section/Section.d.ts +18 -3
  241. package/dist/types/core/theme/ThemeProvider.d.ts +25 -5
  242. package/dist/types/core/viewport/Viewport.d.ts +15 -1
  243. package/dist/types/hooks/useControlledValue.d.ts +13 -2
  244. package/dist/types/hooks/useDebounce.d.ts +12 -0
  245. package/dist/types/hooks/useEffectDebugger.d.ts +49 -0
  246. package/dist/types/hooks/useIsDark.d.ts +8 -0
  247. package/dist/types/hooks/useIsRtl.d.ts +12 -0
  248. package/dist/types/hooks/useNavigator.d.ts +18 -1
  249. package/dist/types/hooks/useOverlayService.d.ts +28 -9
  250. package/dist/types/hooks/usePropToggle.d.ts +16 -5
  251. package/dist/types/hooks/useResize.d.ts +19 -1
  252. package/dist/types/hooks/useResizeObserver.d.ts +20 -1
  253. package/dist/types/hooks/useStepper.d.ts +14 -0
  254. package/dist/types/hooks/useStorage.d.ts +38 -0
  255. package/dist/types/index.d.ts +4 -1
  256. package/dist/types/overlays/alert/Alert.d.ts +16 -5
  257. package/dist/types/overlays/flyout/Flyout.d.ts +9 -4
  258. package/dist/types/overlays/message/Message.d.ts +16 -5
  259. package/dist/types/overlays/modal/Modal.d.ts +13 -4
  260. package/dist/types/overlays/toast/Toast.d.ts +16 -5
  261. package/dist/types/overlays/tooltip/Tooltip.d.ts +2 -2
  262. package/dist/types/types/index.d.ts +28 -24
  263. package/dist/types/typography/Abbr.d.ts +34 -4
  264. package/dist/types/typography/Anchor.d.ts +42 -0
  265. package/dist/types/typography/Copy.d.ts +15 -0
  266. package/dist/types/typography/Mark.d.ts +22 -4
  267. package/dist/types/typography/Text.d.ts +27 -1
  268. package/dist/types/typography/Title.d.ts +16 -1
  269. package/dist/types/typography/index.d.ts +1 -1
  270. package/dist/types/utils/cloneElement.d.ts +1 -0
  271. package/dist/types/utils/getColor.d.ts +1 -4
  272. package/dist/types/utils/index.d.ts +1 -0
  273. package/package.json +17 -16
  274. package/src/components/actionLabel/ActionLabel.tsx +26 -8
  275. package/src/components/animations/Animations.tsx +139 -52
  276. package/src/components/avatar/Avatar.tsx +51 -15
  277. package/src/components/avatar/AvatarGroup.tsx +23 -5
  278. package/src/components/badge/Badge.tsx +50 -22
  279. package/src/components/breadcrumbs/Breadcrumbs.tsx +43 -10
  280. package/src/components/button/Button.tsx +75 -43
  281. package/src/components/button/ButtonGroup.tsx +33 -7
  282. package/src/components/button/ConfirmButton.tsx +31 -3
  283. package/src/components/button/ToggleButtonGroup.tsx +74 -47
  284. package/src/components/callout/Callout.tsx +58 -16
  285. package/src/components/card/Card.tsx +84 -25
  286. package/src/components/card/CardCover.tsx +36 -6
  287. package/src/components/card/FlipContent.tsx +90 -0
  288. package/src/components/chip/Chip.tsx +53 -25
  289. package/src/components/collapsable/Collapsable.tsx +35 -11
  290. package/src/components/divider/Divider.tsx +42 -16
  291. package/src/components/dropdown/Dropdown.tsx +47 -12
  292. package/src/components/dropdown/DropdownTool.tsx +28 -4
  293. package/src/components/empty/EmptyContent.tsx +49 -8
  294. package/src/components/icon/Icon.tsx +96 -18
  295. package/src/components/index.ts +5 -4
  296. package/src/components/media/Media.tsx +193 -105
  297. package/src/components/menu/ContextMenu.tsx +19 -0
  298. package/src/components/menu/Menu.tsx +88 -32
  299. package/src/components/menu/MenuItem.tsx +44 -19
  300. package/src/components/menu/types.ts +9 -8
  301. package/src/components/meter/Meter.tsx +27 -4
  302. package/src/components/navigator/Navigator.tsx +60 -12
  303. package/src/components/panel/Panel.tsx +66 -28
  304. package/src/components/panel/PanelGroup.tsx +25 -2
  305. package/src/components/panel/PanelStack.tsx +33 -2
  306. package/src/components/progress/ProgressBar.tsx +33 -14
  307. package/src/components/progress/ProgressCircle.tsx +29 -13
  308. package/src/components/tabpanel/Tab.tsx +47 -24
  309. package/src/components/tabpanel/TabPanel.tsx +79 -13
  310. package/src/context/Global.tsx +28 -1
  311. package/src/context/NotificationCenter.tsx +3 -3
  312. package/src/core/aside/Aside.tsx +59 -38
  313. package/src/core/boundary/ErrorBoundary.tsx +26 -8
  314. package/src/core/boundary/ErrorIcon.tsx +1 -2
  315. package/src/core/content/Content.tsx +7 -3
  316. package/src/core/headfoot/HeadFoot.tsx +44 -37
  317. package/src/core/page/Page.tsx +44 -22
  318. package/src/core/responsive/Responsive.tsx +66 -8
  319. package/src/core/section/Section.tsx +26 -4
  320. package/src/core/theme/ThemeProvider.tsx +35 -14
  321. package/src/core/viewport/Viewport.tsx +16 -3
  322. package/src/hooks/useControlledValue.tsx +12 -0
  323. package/src/hooks/useDebounce.ts +13 -1
  324. package/src/hooks/useEffectDebugger.ts +50 -2
  325. package/src/hooks/useIsDark.ts +8 -0
  326. package/src/hooks/useIsRtl.ts +12 -0
  327. package/src/hooks/useNavigator.tsx +28 -5
  328. package/src/hooks/useOverlayService.tsx +33 -8
  329. package/src/hooks/usePropToggle.ts +16 -5
  330. package/src/hooks/useResize.ts +19 -1
  331. package/src/hooks/useResizeObserver.ts +32 -9
  332. package/src/hooks/useStepper.tsx +68 -0
  333. package/src/hooks/useStorage.ts +38 -0
  334. package/src/hotkeys/HotKeyLabel.tsx +1 -1
  335. package/src/hotkeys/HotKeyWrapper.tsx +3 -1
  336. package/src/index.ts +5 -1
  337. package/src/overlays/alert/Alert.tsx +51 -36
  338. package/src/overlays/flyout/Flyout.tsx +74 -99
  339. package/src/overlays/message/Message.tsx +28 -9
  340. package/src/overlays/modal/Modal.tsx +39 -34
  341. package/src/overlays/toast/Toast.tsx +44 -33
  342. package/src/overlays/tooltip/Tooltip.tsx +44 -20
  343. package/src/types/global.d.ts +8 -0
  344. package/src/types/index.ts +293 -47
  345. package/src/typography/Abbr.tsx +45 -11
  346. package/src/typography/{Link.tsx → Anchor.tsx} +26 -14
  347. package/src/typography/Copy.tsx +16 -2
  348. package/src/typography/Mark.tsx +25 -10
  349. package/src/typography/Text.tsx +31 -13
  350. package/src/typography/Title.tsx +18 -7
  351. package/src/typography/index.ts +1 -1
  352. package/src/{overlays/tooltip/Tooltip.module.css → utils/cloneElement.ts} +21 -27
  353. package/src/utils/getColor.ts +1 -17
  354. package/src/utils/index.ts +1 -0
  355. package/css/flags.rect.css +0 -1607
  356. package/css/flags.wavy.css +0 -1606
  357. package/css/index.js +0 -250
  358. package/css/tailwind/colors.ts +0 -158
  359. package/dist/cjs/components/actionLabel/ActionLabel.module.css +0 -1
  360. package/dist/cjs/components/animations/Animations.module.css +0 -1
  361. package/dist/cjs/components/avatar/Avatar.module.css +0 -1
  362. package/dist/cjs/components/badge/Badge.module.css +0 -1
  363. package/dist/cjs/components/breadcrumbs/Breadcrumbs.module.css +0 -1
  364. package/dist/cjs/components/button/Button.module.css +0 -1
  365. package/dist/cjs/components/card/Card.module.css +0 -1
  366. package/dist/cjs/components/chip/Chip.module.css +0 -1
  367. package/dist/cjs/components/collapsable/Collapsable.module.css +0 -1
  368. package/dist/cjs/components/dropdown/Dropdown.module.css +0 -1
  369. package/dist/cjs/components/icon/Icon.module.css +0 -1
  370. package/dist/cjs/components/media/Media.module.css +0 -1
  371. package/dist/cjs/components/menu/Menu.module.css +0 -1
  372. package/dist/cjs/components/meter/Meter.module.css +0 -1
  373. package/dist/cjs/components/panel/Panel.module.css +0 -1
  374. package/dist/cjs/components/progress/Progress.module.css +0 -1
  375. package/dist/cjs/components/tabpanel/TabPanel.module.css +0 -1
  376. package/dist/cjs/core/aside/Aside.module.css +0 -1
  377. package/dist/cjs/core/boundary/ErrorBoundary.module.css +0 -1
  378. package/dist/cjs/core/content/Content.module.css +0 -1
  379. package/dist/cjs/core/headfoot/HeadFoot.module.css +0 -1
  380. package/dist/cjs/core/page/Page.module.css +0 -1
  381. package/dist/cjs/core/responsive/Responsive.module.css +0 -1
  382. package/dist/cjs/core/section/Section.module.css +0 -1
  383. package/dist/cjs/core/theme/Theme.module.css +0 -1
  384. package/dist/cjs/core/viewport/Viewport.module.css +0 -1
  385. package/dist/cjs/overlays/alert/Alert.module.css +0 -1
  386. package/dist/cjs/overlays/flyout/Flyout.module.css +0 -1
  387. package/dist/cjs/overlays/message/Message.module.css +0 -1
  388. package/dist/cjs/overlays/modal/Modal.module.css +0 -1
  389. package/dist/cjs/overlays/toast/Toast.module.css +0 -1
  390. package/dist/cjs/overlays/tooltip/Tooltip.module.css +0 -1
  391. package/dist/cjs/types/icons.js +0 -199
  392. package/dist/cjs/typography/Typography.module.css +0 -1
  393. package/dist/esm/components/actionLabel/ActionLabel.module.css +0 -1
  394. package/dist/esm/components/animations/Animations.module.css +0 -1
  395. package/dist/esm/components/avatar/Avatar.module.css +0 -1
  396. package/dist/esm/components/badge/Badge.module.css +0 -1
  397. package/dist/esm/components/breadcrumbs/Breadcrumbs.module.css +0 -1
  398. package/dist/esm/components/button/Button.module.css +0 -1
  399. package/dist/esm/components/card/Card.module.css +0 -1
  400. package/dist/esm/components/chip/Chip.module.css +0 -1
  401. package/dist/esm/components/collapsable/Collapsable.module.css +0 -1
  402. package/dist/esm/components/dropdown/Dropdown.module.css +0 -1
  403. package/dist/esm/components/icon/Icon.module.css +0 -1
  404. package/dist/esm/components/media/Media.module.css +0 -1
  405. package/dist/esm/components/menu/Menu.module.css +0 -1
  406. package/dist/esm/components/meter/Meter.module.css +0 -1
  407. package/dist/esm/components/panel/Panel.module.css +0 -1
  408. package/dist/esm/components/progress/Progress.module.css +0 -1
  409. package/dist/esm/components/tabpanel/TabPanel.module.css +0 -1
  410. package/dist/esm/core/aside/Aside.module.css +0 -1
  411. package/dist/esm/core/boundary/ErrorBoundary.module.css +0 -1
  412. package/dist/esm/core/content/Content.module.css +0 -1
  413. package/dist/esm/core/headfoot/HeadFoot.module.css +0 -1
  414. package/dist/esm/core/page/Page.module.css +0 -1
  415. package/dist/esm/core/responsive/Responsive.module.css +0 -1
  416. package/dist/esm/core/section/Section.module.css +0 -1
  417. package/dist/esm/core/theme/Theme.module.css +0 -1
  418. package/dist/esm/core/viewport/Viewport.module.css +0 -1
  419. package/dist/esm/overlays/alert/Alert.module.css +0 -1
  420. package/dist/esm/overlays/flyout/Flyout.module.css +0 -1
  421. package/dist/esm/overlays/message/Message.module.css +0 -1
  422. package/dist/esm/overlays/modal/Modal.module.css +0 -1
  423. package/dist/esm/overlays/toast/Toast.module.css +0 -1
  424. package/dist/esm/overlays/tooltip/Tooltip.module.css +0 -1
  425. package/dist/esm/types/icons.js +0 -201
  426. package/dist/esm/typography/Typography.module.css +0 -1
  427. package/dist/types/types/icons.d.ts +0 -196
  428. package/dist/types/typography/Link.d.ts +0 -25
  429. package/src/types/icons.ts +0 -425
package/css/index.js DELETED
@@ -1,250 +0,0 @@
1
- /*
2
- * React Fabric
3
- * @version: 1.0.0
4
- *
5
- *
6
- * The MIT License (MIT)
7
- * Copyright (c) 2024 Adarsh Pastakia
8
- *
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.
22
- */
23
- /* istanbul ignore file */
24
-
25
- import {
26
- backgroundColor,
27
- borderColor,
28
- colors,
29
- textColor,
30
- } from "./tailwind/colors";
31
- const plugin = require("tailwindcss/plugin");
32
-
33
- module.exports = plugin(
34
- ({ addUtilities, matchUtilities, addBase, theme }) => {
35
- matchUtilities({
36
- area: (value) => ({
37
- gridArea: value,
38
- }),
39
- });
40
- addUtilities({
41
- ".z-1": { "z-index": 1 },
42
- ".z-2": { "z-index": 2 },
43
- ".z-3": { "z-index": 3 },
44
- ".z-4": { "z-index": 4 },
45
- ".z-5": { "z-index": 5 },
46
- ".area-content": { "grid-area": "content" },
47
- ".area-head": { "grid-area": "head" },
48
- ".area-foot": { "grid-area": "foot" },
49
- ".area-side-s": { "grid-area": "side-s" },
50
- ".area-side-e": { "grid-area": "side-e" },
51
- ".area-body": { "grid-area": "body" },
52
- ".overflow-wrap": {
53
- "overflow-wrap": "anywhere",
54
- "word-break": "normal",
55
- "text-wrap": "wrap",
56
- },
57
- ".fixed-numbers": {
58
- "font-variant-numeric": "tabular-nums",
59
- },
60
- ".mixed-lang": {},
61
- ".bg-alternate": {},
62
- ".scroll-thin": {},
63
- ".scroll-hide": {},
64
- ...Object.fromEntries(
65
- Object.entries(theme("spacing")).map(([key, size]) => [
66
- `.gap-${key}`,
67
- { gap: size, "--gutter": size },
68
- ]),
69
- ),
70
- ".span-1": { flex: "0 1 calc((1 / 12) * 100% - var(--gutter, 0px))" },
71
- ".span-2": { flex: "0 1 calc((2 / 12) * 100% - var(--gutter, 0px))" },
72
- ".span-3": { flex: "0 1 calc((3 / 12) * 100% - var(--gutter, 0px))" },
73
- ".span-4": { flex: "0 1 calc((4 / 12) * 100% - var(--gutter, 0px))" },
74
- ".span-5": { flex: "0 1 calc((5 / 12) * 100% - var(--gutter, 0px))" },
75
- ".span-6": { flex: "0 1 calc((6 / 12) * 100% - var(--gutter, 0px))" },
76
- ".span-7": { flex: "0 1 calc((7 / 12) * 100% - var(--gutter, 0px))" },
77
- ".span-8": { flex: "0 1 calc((8 / 12) * 100% - var(--gutter, 0px))" },
78
- ".span-9": { flex: "0 1 calc((9 / 12) * 100% - var(--gutter, 0px))" },
79
- ".span-10": { flex: "0 1 calc((10 / 12) * 100% - var(--gutter, 0px))" },
80
- ".span-11": { flex: "0 1 calc((11 / 12) * 100% - var(--gutter, 0px))" },
81
- ".span-12": { flex: "0 1 calc((12 / 12) * 100% - var(--gutter, 0px))" },
82
- });
83
- },
84
- {
85
- darkMode: ["selector", '[data-color-scheme="dark"]'],
86
- safelist: [
87
- "font-san",
88
- "font-serif",
89
- "font-mono",
90
- "object-fit",
91
- "object-cover",
92
- "object-contain",
93
- "self-start",
94
- "self-center",
95
- "self-end",
96
- "self-stretch",
97
- "items-start",
98
- "items-center",
99
- "items-end",
100
- "items-stretch",
101
- "justify-start",
102
- "justify-center",
103
- "justify-end",
104
- "justify-between",
105
- "animate-spin",
106
- "animate-pulse",
107
- "animate-bounce",
108
- "animate-progress",
109
- {
110
- pattern:
111
- /bg-(black|white|base|dimmed|muted|dark|light|invert|silver|steel|olive|sand|info|danger|success|warning|scarlet|pumpkin|marigold|avacado|jade|denim|iris|lilac|coral|wood|primary|accent|tint)(-\d*)?/,
112
- },
113
- {
114
- pattern:
115
- /text-(black|white|base|dimmed|muted|dark|light|invert|silver|steel|olive|sand|info|danger|success|warning|scarlet|pumpkin|marigold|avacado|jade|denim|iris|lilac|coral|wood|primary|accent|tint)(-\d*)?/,
116
- },
117
- {
118
- pattern:
119
- /ring-(info|danger|success|warning|primary|accent|tint)(-\d*)?/,
120
- },
121
- {
122
- pattern:
123
- /border-(black|white|base|dimmed|muted|dark|light|invert|silver|steel|olive|sand|info|danger|success|warning|scarlet|pumpkin|marigold|avacado|jade|denim|iris|lilac|coral|wood|primary|accent|tint)(-\d*)?/,
124
- },
125
- ],
126
- theme: {
127
- fontFamily: {
128
- sans: [
129
- "Avenir Next",
130
- "Avenir",
131
- "Noto Sans",
132
- "Roboto",
133
- "Helvetica Neue",
134
- "Segoe UI",
135
- "Arial",
136
- "sans-serif",
137
- "BlinkMacSystemFont",
138
- "Apple Color Emoji",
139
- "Segoe UI Emoji",
140
- "Segoe UI Symbol",
141
- "Noto Color Emoji",
142
- ],
143
- serif: [
144
- "Noto Serif",
145
- "Georgia",
146
- "Cambria",
147
- "Times New Roman",
148
- "Times",
149
- "serif",
150
- ],
151
- mono: [
152
- "Noto Sans Mono",
153
- "Menlo",
154
- "Monaco",
155
- "Consolas",
156
- "Liberation Mono",
157
- "Courier New",
158
- "monospace",
159
- ],
160
- },
161
- colors,
162
- gap: {},
163
- fontSize: {
164
- xs: ["0.75rem", { lineHeight: "1rem" }],
165
- sm: ["0.875rem", { lineHeight: "1.25rem" }],
166
- reset: ["1rem", { lineHeight: "1.5rem" }],
167
- md: ["1.125rem", { lineHeight: "1.5rem" }],
168
- lg: ["1.25rem", { lineHeight: "1.75rem" }],
169
- xl: ["1.5rem", { lineHeight: "2rem" }],
170
- "2xl": ["1.75rem", { lineHeight: "2.25rem" }],
171
- "3xl": ["1.875rem", { lineHeight: "2.25rem" }],
172
- "4xl": ["2.25rem", { lineHeight: "2.5rem" }],
173
- "5xl": ["3rem", { lineHeight: "1" }],
174
- "6xl": ["3.75rem", { lineHeight: "1" }],
175
- "7xl": ["4.5rem", { lineHeight: "1" }],
176
- "8xl": ["6rem", { lineHeight: "1" }],
177
- "9xl": ["8rem", { lineHeight: "1" }],
178
- },
179
- extend: {
180
- backgroundColor,
181
- borderColor,
182
- stroke: borderColor,
183
- outlineColor: borderColor,
184
- textColor,
185
- fill: backgroundColor,
186
- screens: {
187
- xs: "320px",
188
- },
189
- keyframes: {
190
- cardpulse: {
191
- "50%": { opacity: 0.5 },
192
- },
193
- bgprogress: {
194
- "0%": {
195
- "background-position-x": 0,
196
- },
197
- "100%": {
198
- "background-position-x": "1rem",
199
- },
200
- },
201
- },
202
- animation: {
203
- pulse: "cardpulse 2s cubic-bezier(.4,0,.6,1) infinite",
204
- progress: "bgprogress 750ms linear infinite",
205
- },
206
- aspectRatio: {
207
- screen: "4 / 3",
208
- portrait: "3 / 4",
209
- },
210
- flex: {
211
- full: "1 1 100%",
212
- content: "0 0 auto",
213
- },
214
- maxWidth: {
215
- screen: "100vw",
216
- },
217
- minWidth: {
218
- screen: "100vw",
219
- },
220
- borderRadius: {
221
- capped: "var(--rounding-cap)",
222
- DEFAULT: "var(--rounding)",
223
- },
224
- boxShadow: {
225
- 1: "0 0 0 1px var(--tw-shadow-color)",
226
- xs: "0 1px 1px 0 var(--tw-shadow-color)",
227
- sm: "0 1px 2px 0 var(--tw-shadow-color)",
228
- DEFAULT:
229
- "0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color)",
230
- md: "0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color)",
231
- lg: "0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color)",
232
- xl: "0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color)",
233
- "2xl": "0 25px 50px -12px var(--tw-shadow-color)",
234
- inset: "inset 0 0 2px var(--tw-shadow-color)",
235
- inner: "inset 0 2px 4px 0 var(--tw-shadow-color)",
236
- paper: "0 1px 3px 0 var(--tw-shadow-color)",
237
- none: "none",
238
- },
239
- boxShadowColor: {
240
- ...borderColor,
241
- DEFAULT: "var(--fabric-shadow)",
242
- base: "var(--fabric-shadow)",
243
- },
244
- ringOffsetColor: {
245
- base: "var(--fabric-bg)",
246
- },
247
- },
248
- },
249
- },
250
- );
@@ -1,158 +0,0 @@
1
- /*
2
- * React Fabric
3
- * @version: 1.0.0
4
- *
5
- *
6
- * The MIT License (MIT)
7
- * Copyright (c) 2024 Adarsh Pastakia
8
- *
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.
22
- */
23
- /* istanbul ignore file */
24
-
25
- const COlORS = {
26
- silver: "#989da5",
27
- steel: "#7c99af",
28
- olive: "#769b8d",
29
- sand: "#9b9789",
30
- info: "#00bfff",
31
- danger: "#f24c3d",
32
- success: "#44bc69",
33
- warning: "#edaa00",
34
- scarlet: "#e5484d",
35
- pumpkin: "#f76a15",
36
- marigold: "#ffc100",
37
- avacado: "#46a758",
38
- jade: "#29a383",
39
- denim: "#0190ff",
40
- iris: "#5b5bd6",
41
- lilac: "#8e4ec6",
42
- coral: "#e93d82",
43
- wood: "#ad7f58",
44
- };
45
-
46
- const colorMix = (color: string, shader: string, percent: number) =>
47
- `color-mix(in lab, ${applyAlpha(color)} ${percent}%, ${applyAlpha(shader)})`;
48
-
49
- const applyAlpha = (color: string) =>
50
- `color(from ${color} srgb r g b / <alpha-value>)`;
51
-
52
- export const colors = {
53
- black: "#191a1b",
54
- white: "#fefdfc",
55
- bg: `${applyAlpha("var(--fabric-bg)")}`,
56
- text: `${applyAlpha("var(--fabric-text)")}`,
57
- primary: {
58
- DEFAULT: "var(--primary)",
59
- 50: colorMix("var(--primary)", "var(--fabric-bg)", 10),
60
- 100: colorMix("var(--primary)", "var(--fabric-bg)", 27),
61
- 200: colorMix("var(--primary)", "var(--fabric-bg)", 45),
62
- 300: colorMix("var(--primary)", "var(--fabric-bg)", 62),
63
- 400: colorMix("var(--primary)", "var(--fabric-bg)", 80),
64
- 500: applyAlpha("var(--primary)"),
65
- 600: colorMix("var(--primary)", "var(--fabric-text)", 80),
66
- 700: colorMix("var(--primary)", "var(--fabric-text)", 62),
67
- 800: colorMix("var(--primary)", "var(--fabric-text)", 45),
68
- 900: colorMix("var(--primary)", "var(--fabric-text)", 27),
69
- 950: colorMix("var(--primary)", "var(--fabric-text)", 10),
70
- },
71
- accent: {
72
- DEFAULT: "var(--accent)",
73
- 50: colorMix("var(--accent)", "var(--fabric-bg)", 10),
74
- 100: colorMix("var(--accent)", "var(--fabric-bg)", 27),
75
- 200: colorMix("var(--accent)", "var(--fabric-bg)", 45),
76
- 300: colorMix("var(--accent)", "var(--fabric-bg)", 62),
77
- 400: colorMix("var(--accent)", "var(--fabric-bg)", 80),
78
- 500: applyAlpha("var(--accent)"),
79
- 600: colorMix("var(--accent)", "var(--fabric-text)", 80),
80
- 700: colorMix("var(--accent)", "var(--fabric-text)", 62),
81
- 800: colorMix("var(--accent)", "var(--fabric-text)", 45),
82
- 900: colorMix("var(--accent)", "var(--fabric-text)", 27),
83
- 950: colorMix("var(--accent)", "var(--fabric-text)", 10),
84
- },
85
- tint: {
86
- DEFAULT: "var(--tint)",
87
- 50: colorMix("var(--tint)", "var(--fabric-bg)", 10),
88
- 100: colorMix("var(--tint)", "var(--fabric-bg)", 27),
89
- 200: colorMix("var(--tint)", "var(--fabric-bg)", 45),
90
- 300: colorMix("var(--tint)", "var(--fabric-bg)", 62),
91
- 400: colorMix("var(--tint)", "var(--fabric-bg)", 80),
92
- 500: applyAlpha("var(--tint)"),
93
- 600: colorMix("var(--tint)", "var(--fabric-text)", 80),
94
- 700: colorMix("var(--tint)", "var(--fabric-text)", 62),
95
- 800: colorMix("var(--tint)", "var(--fabric-text)", 45),
96
- 900: colorMix("var(--tint)", "var(--fabric-text)", 27),
97
- 950: colorMix("var(--tint)", "var(--fabric-text)", 10),
98
- },
99
- ...Object.entries(COlORS).reduce(
100
- (ret, [key, color]) => ({
101
- ...ret,
102
- [key]: {
103
- DEFAULT: color,
104
- 50: colorMix(color, "var(--fabric-bg)", 10),
105
- 100: colorMix(color, "var(--fabric-bg)", 27),
106
- 200: colorMix(color, "var(--fabric-bg)", 45),
107
- 300: colorMix(color, "var(--fabric-bg)", 62),
108
- 400: colorMix(color, "var(--fabric-bg)", 80),
109
- 500: applyAlpha(color),
110
- 600: colorMix(color, "var(--fabric-text)", 80),
111
- 700: colorMix(color, "var(--fabric-text)", 62),
112
- 800: colorMix(color, "var(--fabric-text)", 45),
113
- 900: colorMix(color, "var(--fabric-text)", 27),
114
- 950: colorMix(color, "var(--fabric-text)", 10),
115
- },
116
- }),
117
- {},
118
- ),
119
- };
120
-
121
- export const backgroundColor = {
122
- inherit: "inherit",
123
- current: "currentColor",
124
- transparent: "transparent",
125
- DEFAULT: colorMix("var(--fabric-bg)", "var(--tint)", 99),
126
- base: colorMix("var(--fabric-bg)", "var(--tint)", 99),
127
- dimmed: colorMix("var(--fabric-bg)", "var(--tint)", 90),
128
- muted: colorMix("var(--fabric-bg)", "var(--tint)", 80),
129
- gray: colorMix("var(--fabric-bg)", "var(--tint)", 50),
130
- dark: colorMix("var(--black)", "var(--tint)", 90),
131
- light: colorMix("var(--white)", "var(--tint)", 90),
132
- invert: colorMix("var(--fabric-bg)", "var(--fabric-text)", 5),
133
- };
134
- export const textColor = {
135
- inherit: "inherit",
136
- current: "currentColor",
137
- transparent: "transparent",
138
- DEFAULT: colorMix("var(--fabric-text)", "var(--tint)", 95),
139
- base: colorMix("var(--fabric-text)", "var(--tint)", 95),
140
- dimmed: colorMix("var(--fabric-text)", "var(--tint)", 65),
141
- muted: colorMix("var(--fabric-text)", "var(--tint)", 45),
142
- gray: colorMix("var(--fabric-text)", "var(--tint)", 50),
143
- dark: colorMix("var(--black)", "var(--tint)", 75),
144
- light: colorMix("var(--white)", "var(--tint)", 75),
145
- invert: colorMix("var(--fabric-text)", "var(--fabric-bg)", 5),
146
- };
147
- export const borderColor = {
148
- inherit: "inherit",
149
- current: "currentColor",
150
- transparent: "transparent",
151
- DEFAULT: colorMix("var(--fabric-bg)", "var(--tint)", 65),
152
- base: colorMix("var(--fabric-bg)", "var(--tint)", 65),
153
- dimmed: colorMix("var(--fabric-bg)", "var(--tint)", 72),
154
- muted: colorMix("var(--fabric-bg)", "var(--tint)", 80),
155
- gray: applyAlpha("var(--tint)"),
156
- dark: colorMix("var(--black)", "var(--tint)", 75),
157
- light: colorMix("var(--white)", "var(--tint)", 75),
158
- };
@@ -1 +0,0 @@
1
- @layer comp{.actionLabel{&>.actions{--width:4rem;width:0}&:not([data-disabled=true]):hover>.actions{transition:all .1s cubic-bezier(.215,.61,.355,1);transition-delay:.5s;width:var(--width)}}}
@@ -1 +0,0 @@
1
- @layer comp{@keyframes l2{0%,25%{background-position:0 50%,0 calc(50% - 2px),0 calc(50% + 2px),50% 50%,50% calc(50% - 2px),50% calc(50% + 2px),100% 50%,100% calc(50% - 2px),100% calc(50% + 2px);background-size:8px 0,8px 4px,8px 4px,8px 0,8px 4px,8px 4px,8px 0,8px 4px,8px 4px}50%{background-position:0 50%,0 -2px,0 calc(100% + 2px),50% 50%,50% calc(50% - 2px),50% calc(50% + 2px),100% 50%,100% calc(50% - 2px),100% calc(50% + 2px);background-size:8px 100%,8px 4px,8px 4px,8px 0,8px 4px,8px 4px,8px 0,8px 4px,8px 4px}75%{background-position:0 50%,0 -2px,0 calc(100% + 2px),50% 50%,50% -2px,50% calc(100% + 2px),100% 50%,100% calc(50% - 2px),100% calc(50% + 2px);background-size:8px 100%,8px 4px,8px 4px,8px 100%,8px 4px,8px 4px,8px 0,8px 4px,8px 4px}95%,to{background-position:0 50%,0 -2px,0 calc(100% + 2px),50% 50%,50% -2px,50% calc(100% + 2px),100% 50%,100% -2px,100% calc(100% + 2px);background-size:8px 100%,8px 4px,8px 4px,8px 100%,8px 4px,8px 4px,8px 100%,8px 4px,8px 4px}}.bars{--c:linear-gradient(currentcolor 0 0);--r1:radial-gradient(farthest-side at bottom,currentcolor 93%,#0000);--r2:radial-gradient(farthest-side at top,currentcolor 93%,#0000);animation:l2 1s infinite alternate;aspect-ratio:1;background:var(--c),var(--r1),var(--r2),var(--c),var(--r1),var(--r2),var(--c),var(--r1),var(--r2);background-repeat:no-repeat}@keyframes l4{to{transform:rotate(1turn)}}.spinner{--b:8px;animation:l4 2s steps(10) infinite;aspect-ratio:1;background:conic-gradient(#0000 10%,currentcolor) content-box;border-radius:50%;mask:repeating-conic-gradient(#0000 0deg,#000 1deg 20deg,#0000 21deg 36deg),radial-gradient(farthest-side,#0000 calc(100% - var(--b) - 1px),#000 calc(100% - var(--b)));mask-composite:destination-in;mask-composite:intersect}@keyframes loader{0%{transform:translateX(calc(-100%*var(--multiplier)))}to{transform:translateX(calc(100%*var(--multiplier)))}}.loader{--multiplier:1;&>div{height:calc(.125rem + 2px);&:after{animation:loader 1s cubic-bezier(.65,0,.45,1) infinite}}:global([dir=rtl]) &{--multiplier:-1}}@keyframes check-stroke{to{stroke-dashoffset:0}}@keyframes check-scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes check-fill{to{box-shadow:inset 0 0 0 1em currentcolor}}.checkAnimation{box-shadow:inset 0 0 0 currentcolor;color:theme(colors.primary.DEFAULT);height:1.5em;width:1.5em;fill:transparent;stroke-miterlimit:10;stroke-width:4px;animation:check-fill .4s ease-in-out .4s forwards,check-scale .3s ease-in-out .9s both;animation-delay:.75s;& .circlePart{fill:transparent;stroke:currentcolor;stroke-dasharray:166;stroke-dashoffset:166;stroke-miterlimit:10;stroke-width:8px;animation:check-stroke .6s cubic-bezier(.65,0,.45,1) forwards;animation-delay:.25s}& .iconPart{transform-origin:50% 50%;stroke:currentcolor;stroke-dasharray:48;stroke-dashoffset:48;animation:check-stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards;animation-delay:.75s}}}
@@ -1 +0,0 @@
1
- @layer comp{.avatar{border-radius:var(--rounding);box-shadow:0 0 1px theme(borderColor.base);height:1em;vertical-align:-.125em;width:1em;&>i,&>img,&>svg{background-color:theme(backgroundColor.dimmed);border-radius:inherit;display:block;height:1em;line-height:1;object-fit:cover;overflow:hidden;pointer-events:none;width:1em;fill:currentcolor}&>i:before{line-height:1}&>.imagePlaceholder{z-index:-1}}.avatarGroup{&>.avatar{box-shadow:0 0 0 1px theme(borderColor.muted),0 0 0 .125em var(--fabric-bg);&:not(:first-child){margin-inline-start:-.125em}}& .avatarGroup--extra{border-radius:inherit;font-size:inherit;height:1em;width:1em}}}@layer util{.avatarGroup{&>.avatar{border-radius:inherit;font-size:inherit}}}
@@ -1 +0,0 @@
1
- @layer comp{@keyframes pinger{0%{opacity:.7;transform:scale(1)}to{opacity:0;transform:scale(3)}}.badge{--tw-bg-opacity:1;background-color:theme(colors.tint.200/var(--tw-bg-opacity));box-sizing:content-box;color:theme(textColor.base);outline:.5px solid theme(backgroundColor.base);&>span{font-size:.625em;font-weight:500;line-height:1;vertical-align:.125em}&[data-ping=true]{--translate:50%;&:before{animation:pinger 1s linear infinite;background-color:inherit;border-radius:999px;content:"";inset:0;position:absolute;z-index:-1}}&:not([data-ping=true]){--translate:0.75rem;min-width:1em}&[data-placement=top]{left:50%;top:0;transform:translate(-50%,-50%)}&[data-placement=top-start]{inset-inline-start:0;top:0;:global([dir=ltr]) &{transform:translate(calc(var(--translate)*-1),-50%)}:global([dir=rtl]) &{transform:translate(calc(var(--translate)*1),-50%)}}&[data-placement=top-end]{inset-inline-end:0;top:0;:global([dir=ltr]) &{transform:translate(calc(var(--translate)*1),-50%)}:global([dir=rtl]) &{transform:translate(calc(var(--translate)*-1),-50%)}}&[data-placement=bottom]{bottom:0;left:50%;transform:translate(-50%,50%)}&[data-placement=bottom-start]{bottom:0;inset-inline-start:0;:global([dir=ltr]) &{transform:translate(calc(var(--translate)*-1),-50%)}:global([dir=rtl]) &{transform:translate(calc(var(--translate)*1),-50%)}}&[data-placement=bottom-end]{bottom:0;inset-inline-end:0;:global([dir=ltr]) &{transform:translate(calc(var(--translate)*1),-50%)}:global([dir=rtl]) &{transform:translate(calc(var(--translate)*-1),-50%)}}&[data-placement=start]{inset-inline-start:0;top:50%;:global([dir=ltr]) &{transform:translate(-50%,-50%)}:global([dir=rtl]) &{transform:translate(50%,-50%)}}&[data-placement=end]{inset-inline-end:0;top:50%;:global([dir=ltr]) &{transform:translate(50%,-50%)}:global([dir=rtl]) &{transform:translate(-50%,-50%)}}}}
@@ -1 +0,0 @@
1
- @layer comp{.breadcrumbOverflow,.breadcrumbs{--color:theme(colors.primary.DEFAULT);&[data-color=accent]{--color:theme(colors.accent.DEFAULT)}&[data-color=info]{--color:theme(colors.info.DEFAULT)}&[data-color=danger]{--color:theme(colors.danger.DEFAULT)}&[data-color=success]{--color:theme(colors.success.DEFAULT)}&[data-color=warning]{--color:theme(colors.warning.DEFAULT)}& :global(.link){padding:.25em .5em;text-decoration:none}}.breadcrumbOverflow,.breadcrumbs[data-variant=classic]{& :global(.link){color:color-mix(in lab,var(--color) 90%,var(--fabric-text))}& :global(.link):hover{background-color:theme(colors.tint.50/50%);color:color-mix(in lab,var(--color) 99%,var(--fabric-text));text-decoration:underline}& :global(.link):active{background-color:theme(colors.tint.50);color:color-mix(in lab,var(--color) 85%,var(--fabric-text))}}.breadcrumbs[data-variant=classic]{&>.breadcrumbLink{list-style:none;&:after{color:theme(colors.tint.300);content:attr(data-separator);display:inline-block;margin-inline:.125em}&:last-child:after{content:unset}}}[data-ref=viewport] .breadcrumbs{grid-area:crumbbar;padding:0 .25rem}}@layer var{.breadcrumbs[data-variant=classic]{&>:global(.link){max-width:24rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}&>.breadcrumbLink:last-child>:global(.link){color:theme(colors.tint.600);pointer-events:none}}.breadcrumbs[data-variant=modern]{&>.breadcrumbLink{--linkcolor:color-mix(in lab,var(--color) 50%,var(--fabric-bg));border-radius:var(--rounding);list-style:none;position:relative;&:last-child{--color:theme(colors.tint.500);pointer-events:none}&:first-child>:global(.link){border-end-start-radius:var(--rounding);border-start-start-radius:var(--rounding)}&:last-child>:global(.link){border-end-end-radius:var(--rounding);border-start-end-radius:var(--rounding)}&:not(:first-child){margin-inline-start:-1em;&:before{border:.625em solid transparent;border-block-color:var(--linkcolor);border-inline-end-color:var(--linkcolor);content:"";display:inline-block;vertical-align:middle}&>:global(.link){margin-inline-start:-.625em}}&:not(:last-child){&:after{border:.625em solid transparent;border-inline-start-color:var(--linkcolor);content:"";display:inline-block;vertical-align:middle}}&>:global(.link){background-color:var(--linkcolor);color:color-mix(in lab,var(--color) 50%,var(--fabric-text));display:inline-block;line-height:1;padding:.125em .5em;vertical-align:middle}&:hover{--linkcolor:color-mix(in lab,var(--color) 65%,var(--fabric-bg))}&:active{--linkcolor:color-mix(in lab,var(--color) 35%,var(--fabric-bg))}}}}
@@ -1 +0,0 @@
1
- @layer comp{.buttonWrapper{--color:theme(colors.primary.500);border-radius:var(--rounding);font-size:1rem;& .button{background-color:var(--bg);background-image:var(--click-gradient);border-radius:inherit;color:var(--text);outline:1px solid var(--outline);&.spinOnHover:hover .buttonIcon{& :global{animation:spin 2s linear infinite}}&>*{pointer-events:none}&:not(:disabled) input[type=file]{pointer-events:auto;&::-webkit-file-upload-button{cursor:pointer;inset:0;position:absolute}}}& .rounded{border-radius:9999px}& .buttonLabel{line-height:1;order:1;padding:.5em 1em;&+.altIcon{margin-inline-start:-1em}}& .buttonChild{line-height:1;order:1;padding:.5em}& .buttonIcon{font-size:1.125em;padding:.3889em}& :global(.hotkey-label){align-self:center;order:3}& .altIcon{align-self:center;order:4;padding:.125em .5em}& [data-ref=badge]{align-self:center;margin-inline-end:.5em;order:2}}.buttonGroup{&>.buttonWrapper{flex:0 1 1em}&:not(.flex)+&:not(.flex){margin-inline-start:.5rem}}}@layer util{.buttonWrapper{&[data-size=xs]{font-size:.625rem}&[data-size=sm]{font-size:.875rem}&[data-size=md]{font-size:1.125rem}&[data-size=lg]{font-size:1.25rem}&[data-size=xl]{font-size:1.5rem}}.button{--bg:color-mix(in lab,var(--fabric-bg) 99%,var(--tint));--outline:color-mix(in lab,var(--bg) 90%,var(--fabric-text));--text:color-mix(in lab,var(--color) 80%,var(--fabric-text));--bg-hover:color-mix(in lab,var(--color) 18%,var(--fabric-bg));--bg-click:color-mix(in lab,var(--color) 25%,var(--fabric-bg));--bg-active:color-mix(in lab,var(--color) 36%,var(--fabric-bg));&[data-color=accent]{--color:theme(colors.accent.500)}&[data-color=info]{--color:theme(colors.info.500)}&[data-color=danger]{--color:theme(colors.danger.500)}&[data-color=success]{--color:theme(colors.success.500)}&[data-color=warning]{--color:theme(colors.warning.500)}&[data-variant=outline]{--outline:var(--color)}&[data-variant=solid]{--outline:var(--color);--bg:color-mix(in lab,var(--color) 96%,var(--fabric-text));--text:theme(colors.white);--bg-hover:color-mix(in lab,var(--color) 90%,var(--fabric-bg));--bg-click:color-mix(in lab,var(--color) 80%,theme(colors.black));--bg-active:color-mix(in lab,var(--color) 70%,theme(colors.black));& :global(.hotkey-label){background-color:theme(backgroundColor.dark/30%);color:theme(colors.white/70%)}}&[data-variant=link]{--bg:transparent;--outline:transparent;background-image:none;box-shadow:none}&[data-color=invert]{--bg:theme(backgroundColor.invert);--text:color-mix(in lab,var(--color) 90%,theme(textColor.invert));--bg-hover:color-mix(in lab,var(--color) 15%,theme(backgroundColor.invert));--bg-click:color-mix(in lab,var(--color) 35%,theme(backgroundColor.invert))}}.buttonIcon[data-align=start]{order:0;&+.buttonLabel[data-colored-icon=false]{margin-inline-start:-1em}}.buttonIcon[data-align=end]{order:2;&~.buttonLabel[data-colored-icon=false]{margin-inline-end:-1em}}}@layer var{.buttonWrapper{height:unset;padding:unset;&[data-disabled=true]{cursor:not-allowed;& .button{background-image:var(--active-gradient);opacity:.5;pointer-events:none}}&[data-loading=true]{cursor:wait;& .button{background-image:var(--progress-gradient);background-size:1em 1em;pointer-events:none;& :global{animation:bgprogress .75s linear infinite}}& .button:not([data-variant=solid]){background-color:color-mix(in lab,var(--color) 15%,var(--fabric-bg))}}&:global(.btn-dashed)>.button{color:theme(colors.tint.600);outline:1px dashed theme(colors.tint.600);&[data-invalid=true]{background-color:theme(colors.danger.100);color:theme(colors.danger.600);outline:1px dashed theme(colors.danger.600)}}}.button{--tw-ring-color:var(--color);&:hover{background-color:var(--bg-hover)}&:active{background-color:var(--bg-click);background-image:var(--active-gradient);.buttonIcon,.buttonLabel{transform:translateY(1px)}}&[data-active=true],&[data-checked=true],&[data-dropdown-open=true]{background-color:var(--bg-active);background-image:none}&[data-active=true],&[data-dropdown-open=true]{pointer-events:none}}.buttonGroup{&>.buttonWrapper{margin:0;& .button[data-variant=link]{--outline:theme(backgroundColor.base)}}&:not(.vertical){&>:not(:first-child){&:before{border-inline-start:.5px solid theme(borderColor.base);content:"";inset-block:5%;inset-inline-start:-.5px;position:absolute}}&.separator>:not(:first-child){margin-inline-start:2px;&:before{inset-inline-start:-1.5px}}&>:not(:last-child) .button{border-end-end-radius:0;border-start-end-radius:0}&>:not(:first-child) .button{border-end-start-radius:0;border-start-start-radius:0}}&.vertical{&>:not(:first-child){&:before{border-block-start:.5px solid theme(borderColor.base);content:"";inset-block-start:-.5px;inset-inline:5%;position:absolute}}&.separator>:not(:first-child){margin-block-start:1px;&:before{inset-block-start:-1px}}&>:not(:last-child) .button{border-end-end-radius:0;border-end-start-radius:0}&>:not(:first-child) .button{border-start-end-radius:0;border-start-start-radius:0}}}}
@@ -1 +0,0 @@
1
- @layer comp{.cardWrapper.selected{&:before{border-bottom:1rem solid transparent;border-inline-end:1rem solid transparent;border-inline-start:1rem solid theme(colors.accent.500);border-start-start-radius:var(--rounding-cap);border-top:1rem solid theme(colors.accent.500);content:""}&:after,&:before{inset-inline-start:-4px;position:absolute;top:-4px;z-index:5}&:after{color:theme(colors.white);content:"✓";line-height:1;padding:4px}}.card{background-color:var(--fabric-bg);box-shadow:0 0 0 1px theme(borderColor.muted);&>*{background-color:transparent}& .cardCover{&.dark>.cardCoverContent,&.inheritScheme:has([data-colorset=dark])>.cardCoverContent{background-image:linear-gradient(180deg,#0000 0,#0006);color:var(--white);text-shadow:0 0 2px var(--black)}&.inheritScheme:has([data-colorset=light])>.cardCoverContent,&.light>.cardCoverContent{background-image:linear-gradient(180deg,#fff0 0,#fff6);color:var(--black);text-shadow:0 0 2px var(--white)}}& .cardBody{padding:1rem}&.clickable{box-shadow:0 0 0 1px theme(borderColor.dimmed),0 1px 2px 0 var(--fabric-shadow);transition:box-shadow 0ms;&:has(.cardBody:hover):not(:has([data-inner-clickable=true]:hover)){box-shadow:0 0 0 1px theme(borderColor.dimmed),0 1px 4px 0 var(--fabric-shadow),0 8px 16px 0 color-mix(in lab,var(--fabric-shadow) 35%,#0000);transition-delay:.15s}&:has(.cardBody:active):not(:has([data-inner-clickable=true]:hover)){box-shadow:0 0 0 1px theme(borderColor.dimmed);transform:translateY(1px);transition-delay:0ms}& .cardBody{cursor:pointer;&:after{background-image:linear-gradient(175deg,hsla(0,0%,100%,.05),transparent 18%,transparent 72%,rgb(0 0 0/5%));content:"";inset:0;pointer-events:none;position:absolute;z-index:5}}}}}@layer util{.card{& .cardBody{&>*{background-color:transparent;grid-area:unset}}& .cardCover{&>[data-ref=image],&>[data-ref=video]{inset:0;position:absolute;z-index:0}& .cardCoverContent{&>*{flex:0 0 auto}}}}}
@@ -1 +0,0 @@
1
- @layer comp{.chip{--blank-gradient:linear-gradient(180deg,#00000005 0%,#0000 10%);background-image:var(--blank-gradient);color:theme(colors.tint.500);outline:1px solid color-mix(in lab,currentcolor 20%,var(--fabric-bg));outline-offset:-1px;&>.chipLabel{padding:0 .5em}&>.chipIcon{&+.chipLabel{margin-inline-start:-.5em}}&.clickable{background-image:var(--click-gradient);cursor:pointer;&.disabled{opacity:.5;pointer-events:none}}}}@layer var{.chip{background-color:color-mix(in lab,currentcolor 10%,var(--fabric-bg));height:unset;padding:unset;&[data-variant=outline]{box-shadow:0 0 2px color-mix(in lab,currentcolor 50%,var(--tint)) inset;outline-color:color-mix(in lab,currentcolor 50%,var(--fabric-bg))}>*{color:color-mix(in lab,currentcolor 50%,var(--fabric-text))}&.clickable{&:hover{background-color:color-mix(in lab,currentcolor 20%,var(--fabric-bg))}&:active,&[data-dropdown-open=true]{background-color:color-mix(in lab,currentcolor 15%,var(--fabric-bg));background-image:var(--active-gradient)}&[data-dropdown-open=true]{pointer-events:none}}&[data-variant=solid]{background-color:color-mix(in lab,currentcolor 35%,var(--fabric-bg));outline-color:color-mix(in lab,currentcolor 50%,var(--fabric-bg));&>*{color:color-mix(in lab,currentcolor 5%,var(--fabric-text))}&.clickable{&:hover{background-color:color-mix(in lab,currentcolor 45%,var(--fabric-bg))}&:active,&[data-dropdown-open=true]{background-color:color-mix(in lab,currentcolor 30%,var(--fabric-bg))}}}}}
@@ -1 +0,0 @@
1
- @layer comp{.collapsable{&+&{border-top:1px solid theme(borderColor.base)}}}
@@ -1 +0,0 @@
1
- @layer var{.dropdownBody{grid-template:1fr/1fr;& [data-ref=card],& [data-ref=panelGroup],& [data-ref=panel]{border-inline:0;border-top:0;box-shadow:none;grid-area:unset;outline:0}}}
@@ -1 +0,0 @@
1
- @layer comp{.icon{height:1em;position:relative;vertical-align:-.125em;width:1em;&>i,&>img,&>svg{border-radius:inherit;display:block;height:1em;line-height:1;object-fit:cover;overflow:hidden;pointer-events:none;width:1em;fill:currentcolor}&>i:before{line-height:1}&[data-clickable=true]{opacity:.75;&:hover{background-color:theme(colors.text/10%);opacity:.9}&:active{opacity:.5}}}[dir=rtl] .icon[data-flip=true]{transform:scaleX(-1)}}
@@ -1 +0,0 @@
1
- @layer comp{.mediaContainer{&.mediaReel{&:after,&:before{background-image:linear-gradient(90deg,#222c 0,#222c .25rem,#fff8 0,#fff8 .75rem,#222c 0,#222c 1rem);background-position:50%;background-repeat:repeat-x;background-size:1rem;border:.125rem solid #222c;content:"";height:.5rem;inset-inline:0;position:absolute}&:before{top:0}&:after{bottom:0}}& .mediaControls{& [data-ref=button]{margin:0;&>:first-child{background-color:theme(colors.black/50%);color:#fff;&:hover{background-color:theme(colors.black/80%);color:theme(colors.primary.600)}}}& .mediaControlAction>:first-child{background-color:theme(colors.black/70%)}& .mediaControlAction+.mediaControlAction{margin-top:8px}}}}@layer util{& .mediaControls{&:hover{& .mediaControlPlaceholder{display:none}}&:not(:hover){& .mediaControlAction{display:none}}}}
@@ -1 +0,0 @@
1
- @layer comp{.menuItem{--color:theme(colors.primary.DEFAULT);&[data-color=accent]{--color:theme(colors.accent.DEFAULT)}&[data-color=info]{--color:theme(colors.info.DEFAULT)}&[data-color=danger]{--color:theme(colors.danger.DEFAULT)}&[data-color=success]{--color:theme(colors.success.DEFAULT)}&[data-color=warning]{--color:theme(colors.warning.DEFAULT)}}}@layer var{.menuItem{color:color-mix(in lab,var(--color) 80%,var(--fabric-text));>*{pointer-events:none}&[data-focus=true]{background-color:color(from var(--color) srgb r g b/15%)}&:active{background-color:color(from var(--color) srgb r g b/35%)}&[data-open=true]{background-color:color(from var(--color) srgb r g b/10%)}&.active,&:global(.active){background-color:color(from var(--color) srgb r g b/20%);pointer-events:none;&>div{box-shadow:4px 0 0 var(--color) inset;:global([dir=rtl]) &{box-shadow:-4px 0 0 var(--color) inset}}}&.disabled{color:theme(textColor.tint.500);opacity:.5;pointer-events:none;&>label~*{display:none}}}.menuIcon{font-size:1.25em;padding:.3em;&.minimal{font-size:1.5em;font-weight:500;padding:.375em}}:global(.menu-list.hide-icons) .menuIcon{width:.125em}}
@@ -1 +0,0 @@
1
- @layer comp{.meter{& .meterBar{flex:1 1 1rem;height:.5em;line-height:1;max-width:12rem;min-width:1rem;&:after{width:var(--width)}}&>label{font-size:max(.75rem,.5em);line-height:1}& .meterBar[data-active=true]{&:first-child,&:nth-child(2),&:nth-child(3),&:nth-child(4),&:nth-child(5),&:nth-child(6){&:after{background-color:currentColor;opacity:.85}}&:first-child{color:#eb5e28}&:nth-child(2){color:#f9a03f}&:nth-child(3){color:#f3c053}&:nth-child(4){color:#a1c349}&:nth-child(5){color:#87a330}&:nth-child(6){color:#6a8532}}&[class*=text-accent] .meterBar[data-active=true],&[class*=text-danger] .meterBar[data-active=true],&[class*=text-info] .meterBar[data-active=true],&[class*=text-primary] .meterBar[data-active=true],&[class*=text-success] .meterBar[data-active=true],&[class*=text-warning] .meterBar[data-active=true]{color:currentColor;&:first-child:after{opacity:.2}&:nth-child(2):after{opacity:.35}&:nth-child(3):after{opacity:.5}&:nth-child(4):after{opacity:.65}&:nth-child(5):after{opacity:.8}&:nth-child(6):after{opacity:.95}}}}
@@ -1 +0,0 @@
1
- @layer comp{.panel{background-color:theme(colors.bg);grid-template:"head" auto "content" 1fr/1fr;&>*{background-color:transparent}&:global(.fixed){box-shadow:0 0 18px theme(boxShadowColor.base)}& .panelHeader{background-color:theme(backgroundColor.dimmed)}& .panelAction{padding:.25rem}& .panelBody{grid-template:"head head head" auto ". loader ." auto "side-s content side-e" 1fr "foot foot foot" auto/auto 1fr auto}}}@layer util{.panelGroup{&>.panel{&[data-collapsed=true]{flex:0 0 auto}&[data-collapsed=false]{flex:1 1 auto;min-height:15rem;[data-ref=panelCollapse]{color:var(--tint);opacity:.25;pointer-events:none}}}&>.panel:not(:first-child){border-start-end-radius:0;border-start-start-radius:0}&>.panel:not(:last-child){border-bottom:1px solid theme(backgroundColor.base);border-end-end-radius:0;border-end-start-radius:0}}[data-ref=asideBody]>.panelGroup>.panel{border-radius:0;outline:0}}
@@ -1 +0,0 @@
1
- @layer comp{.progressbar{box-shadow:inset 0 0 4px 0 theme(boxShadowColor.dimmed);height:1em;&>div:last-child{width:calc(var(--progress)*1%);&:after{color:var(--white);content:attr(data-label);font-size:.5em;inset-block:0;inset-inline-start:0;line-height:.5em;padding:.75em;position:absolute;text-align:center;vertical-align:middle;width:calc((100/var(--progress))*100%)}}.progressTrack{transition:width .5s;width:calc(var(--progress)*1%)}&>div:first-child{font-size:.5em;line-height:.5em;padding:.75em}}.progressAnimate{background-image:var(--progress-gradient);background-size:1rem 1rem;& :global{animation:progress .75s linear infinite}}}
@@ -1 +0,0 @@
1
- @layer comp{.tabPanel{--color:theme(colors.primary.500);&>.tabList{grid-area:tablist;&>.tabButton{&[data-color=accent]{--color:theme(colors.accent.500)}&[data-color=info]{--color:theme(colors.info.500)}&[data-color=danger]{--color:theme(colors.danger.500)}&[data-color=success]{--color:theme(colors.success.500)}&[data-color=warning]{--color:theme(colors.warning.500)}&:not(:global(.active)):hover{background-color:theme(colors.tint.100/50%);color:color-mix(in lab,var(--color) 65%,var(--fabric-text))}&:global(.active){--active-color:var(--color);color:color-mix(in lab,var(--color) 65%,var(--fabric-text));font-weight:500}}}&[data-variant=outline]{&>.tabList>.tabButton:global(.active){--active-color:theme(backgroundColor.base);--active-border:0 0 0 1px theme(borderColor.base) inset;background-color:theme(backgroundColor.base)}}&[data-variant=solid]{&>.tabList>.tabButton:global(.active){background-color:var(--color);color:theme(colors.white)}}&[data-variant=soft]{&>.tabList>.tabButton:global(.active){background-color:color-mix(in lab,var(--color) 20%,var(--fabric-bg))}}&[data-orientation=top]{grid-template:"tablist" auto "content" 1fr/1fr;padding-inline:2px;&[data-variant=outline]>.tabList,&[data-variant=soft]>.tabList,&[data-variant=solid]>.tabList{box-shadow:inset 0 -1px 0 theme(borderColor.dimmed)}}&[data-orientation=bottom]{grid-template:"content" 1fr "tablist" auto/1fr;padding-inline:2px;&[data-variant=outline]>.tabList,&[data-variant=soft]>.tabList,&[data-variant=solid]>.tabList{box-shadow:inset 0 1px 0 theme(borderColor.dimmed)}}&[data-orientation=start]{grid-template:"tablist content" 1fr/auto 1fr;padding-block:2px;&[data-variant=outline]>.tabList,&[data-variant=soft]>.tabList,&[data-variant=solid]>.tabList{box-shadow:inset -1px 0 0 theme(borderColor.dimmed)}}&[data-orientation=end]{grid-template:"content tablist" 1fr/1fr auto;padding-block:2px;&[data-variant=outline]>.tabList,&[data-variant=soft]>.tabList,&[data-variant=solid]>.tabList{box-shadow:inset 1px 0 0 theme(borderColor.dimmed)}}}}@layer util{.tabPanel{&>.tabList>.tabButton:global(.active){pointer-events:none}&[data-orientation=top]>.tabList{&>.tabButton:global(.active){box-shadow:0 -2px 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=bottom]>.tabList{&>.tabButton:global(.active){box-shadow:0 2px 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=start]>.tabList{&>.tabButton:global(.active){box-shadow:-2px 0 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=end]>.tabList{&>.tabButton:global(.active){box-shadow:2px 0 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=top]>.tabList>.tabButton{border-end-end-radius:0;border-end-start-radius:0;margin-top:2px;margin-inline:1px}&[data-orientation=bottom]>.tabList>.tabButton{border-start-end-radius:0;border-start-start-radius:0;margin-bottom:2px;margin-inline:1px}&[data-orientation=start]>.tabList>.tabButton{border-end-end-radius:0;border-start-end-radius:0;margin-block:1px;margin-inline-start:2px}&[data-orientation=end]>.tabList>.tabButton{border-end-start-radius:0;border-start-start-radius:0;margin-block:1px;margin-inline-end:2px}}}
@@ -1 +0,0 @@
1
- @layer comp{.aside{--aside-bg:color-mix(in lab,var(--fabric-bg) 95%,var(--tint));--aside-border:color-mix(in lab,var(--fabric-bg) 75%,var(--tint));background-color:var(--aside-bg);&[data-align=start]{border-inline-end:1px solid var(--aside-border);grid-area:side-s;grid-template:"head resizer" auto "loader resizer" auto "content resizer" 1fr/1fr auto;& .asideHeader{grid-template-areas:"icon title actions collapse";grid-template-columns:auto 1fr auto auto}}&[data-align=end]{border-inline-start:1px solid var(--aside-border);grid-area:side-e;grid-template:"resizer head" auto "resizer loader" auto "resizer content" 1fr/auto 1fr;& .asideHeader{grid-template-areas:"collapse icon title actions";grid-template-columns:auto auto 1fr auto}& .asideCollapse{transform:scaleX(-1)}}& .asideBody{grid-area:content;grid-template:"head" auto "content" 1fr "foot" auto/1fr;&>[data-ref=content]{background-color:transparent}}& .asideHeader{color:theme(colors.primary.600);font-weight:500;&:not(:empty){border-bottom:1px solid var(--aside-border)}}& .asideTitle{grid-area:title}& .asideIcon{grid-area:icon}.asideActions{grid-area:actions}& .asideCollapse{grid-area:collapse;&:hover{background-color:color-mix(in lab,var(--fabric-text) 10%,#0000)}}& .asidePlaceholder{background-color:var(--aside-bg);grid-area:content;z-index:4}& .asideResizer{cursor:col-resize;grid-area:resizer;position:relative;width:.25rem;&:before{border:1px solid theme(colors.tint.700);border-width:0 1.5px;height:32px}&:active:before,&:hover:before{background-color:theme(colors.primary.600);border-color:theme(backgroundColor.base);border-width:0 1.25px;height:100%}}}}@layer util{.asideBody,.asideHeader{height:unset;margin:unset;width:unset}.asideBody{&>[data-ref=content]{background-color:transparent}}.aside[data-collapsed=true]{overflow:visible;position:relative;width:2rem;& .asideBody{background-color:var(--aside-bg);inset:0;position:absolute;transition:transform .15s cubic-bezier(.4,0,.2,1);z-index:-1}& .asideHeader{position:absolute;width:2rem;z-index:5}& .asideTitle{font-size:1rem;grid-area:unset;position:absolute;top:1rem}.asideIcon{margin-inline:2px}& .asideCollapse+.asideIcon,& .asideResizer{display:none}}[dir=ltr] .aside[data-align=start][data-collapsed=true],[dir=rtl] .aside[data-align=end][data-collapsed=true]{& .asideBody{grid-area:unset;right:unset;transform:translateX(-100%)}& .asideTitle{right:calc(2rem + 2px);transform:rotate(-90deg) translateY(2rem);transform-origin:100% 100%}& .asideCollapse{transform:scaleX(-1)}&[data-flyout=true] .asideBody{box-shadow:0 0 1rem 0 var(--fabric-shadow);transform:translateX(2rem);z-index:3}}[dir=ltr] .aside[data-align=end][data-collapsed=true],[dir=rtl] .aside[data-align=start][data-collapsed=true]{& .asideBody{grid-area:unset;left:unset;transform:translateX(100%)}& .asideTitle{left:calc(2rem + 2px);transform:rotate(90deg) translateY(2rem);transform-origin:0 100%}& .asideCollapse{transform:scaleX(1)}&[data-flyout=true] .asideBody{box-shadow:0 0 1rem 0 var(--fabric-shadow);transform:translateX(-2rem);z-index:3}}}
@@ -1 +0,0 @@
1
- @layer comp{.errorBoundary{align-self:flex-start;background-color:theme(colors.danger.500);background-image:repeating-linear-gradient(135deg,hsla(0,0%,100%,.5) 0 4px,hsla(0,0%,100%,.2) 4px 8px);grid-area:inherit;margin:1rem;max-height:calc(100% - 2rem);& .boundaryContent{background-color:var(--fabric-bg);grid-template:"icon message" auto "detail detail" auto/auto 1fr}& .boundaryIcon{grid-area:icon}& .boundaryMessage{grid-area:message}& .boundaryDetail{grid-area:detail;grid-template-rows:auto 1fr}}}
@@ -1 +0,0 @@
1
- @layer comp{.content{--fabric-content:color-mix(in lab,var(--fabric-bg) 97%,var(--tint));background-color:var(--fabric-content);overflow:auto;padding:1rem}}@layer util{.content{height:unset;margin:unset;width:unset}}
@@ -1 +0,0 @@
1
- @layer comp{.headfoot{.buttonWrapper+.buttonWrapper{margin-inline-start:.25rem}}}@layer util{.headfoot{height:unset;margin:unset;width:unset}}
@@ -1 +0,0 @@
1
- @layer comp{.page{--fabric-page:color-mix(in lab,var(--fabric-bg) 94%,var(--tint));--fabric-page-title:color-mix(in lab,var(--fabric-bg) 90%,var(--tint));background-color:var(--fabric-page);grid-template:"title title title" auto "head head head" auto ". loader ." auto "side-s content side-e" 1fr "foot foot foot" auto/auto 1fr auto;.pageTitle{background-color:var(--fabric-page-title);color:theme(colors.primary.600);grid-area:title}}}@layer util{.pageTitle{height:unset;margin:unset;width:unset}}
@@ -1 +0,0 @@
1
- @layer comp{.row{margin:calc(var(--gutter)*-.5);&+.row{margin-top:calc(var(--gutter)*.5)}}.col{flex:0 0 auto;margin:calc(var(--gutter)*.5);max-width:calc(100% - var(--gutter, 0px));&.stretchContent>*{min-height:100%;min-width:100%}}[data-gutter="0"]{&.container,&.row{--gutter:0px}}[data-gutter=xs]{&.container,&.row{--gutter:2px}}[data-gutter=sm]{&.container,&.row{--gutter:0.25rem}}[data-gutter=md]{&.container,&.row{--gutter:0.75rem}}[data-gutter=lg]{&.container,&.row{--gutter:1rem}}[data-gutter=xl]{&.container,&.row{--gutter:1.5rem}}}
@@ -1 +0,0 @@
1
- @layer comp{.section{grid-template:"head head head" auto "side-s content side-e" 1fr "foot foot foot" auto/auto 1fr auto}}
@@ -1 +0,0 @@
1
- @layer comp{.themeProvider{&>*{background-color:theme(backgroundColor.base)}}}
@@ -1 +0,0 @@
1
- @layer comp{.viewport{--fabric-viewport:color-mix(in lab,var(--fabric-bg) 76%,var(--tint));background-color:var(--fabric-viewport);color:var(--fabric-text);grid-template:"head head head" auto "crumbbar crumbbar crumbbar" auto "side-s content side-e" 1fr "foot foot foot" auto/auto 1fr auto}}
@@ -1 +0,0 @@
1
- @layer comp{.alert{gap:.5rem 1rem;grid-template:"icon title" auto "icon message" auto "input input" auto "actions actions" auto/auto 1fr;margin-top:-100%;opacity:0;transition:margin .4s,opacity .3s .2s;z-index:var(--z-overlay);&[data-show=true]{margin-top:0;opacity:1}}}
@@ -1 +0,0 @@
1
- @layer comp{.flyout{max-width:70vw;transition:margin .5s;width:32rem;z-index:var(--z-overlay);& .flyoutHeader{background-color:theme(backgroundColor.base);border-bottom:.5px solid theme(borderColor.dimmed)}& .flyoutBody{grid-template:"head head head" auto ". loader ." auto "side-s content side-e" 1fr "foot foot foot" auto/auto 1fr auto}&[data-align=start]{margin-inline-start:-100%}&[data-align=end]{margin-inline-end:-100%}&[data-show=true]{margin:0}}}
@@ -1 +0,0 @@
1
- @layer comp{.message{margin-top:-100%;opacity:0;transition:margin .4s,opacity .3s .2s;&[data-show=true]{margin-top:0;opacity:1}}}
@@ -1 +0,0 @@
1
- @layer comp{.modal{margin-top:-100%;max-height:90vh;max-width:90vw;opacity:0;transition:margin .4s,opacity .3s .2s;width:32rem;z-index:var(--z-overlay);&[data-show=true]{margin-top:0;opacity:1}& .modalHeader{background-color:theme(backgroundColor.base);border-bottom:.5px solid theme(borderColor.dimmed)}& .modalBody{grid-template:"head head head" auto ". loader ." auto "side-s content side-e" 1fr "foot foot foot" auto/auto 1fr auto}}}
@@ -1 +0,0 @@
1
- @layer comp{.toast{margin-bottom:-100%;opacity:0;transition:margin .4s,opacity .3s .2s;&[data-show=true]{margin-bottom:0;opacity:1}}}
@@ -1 +0,0 @@
1
- @layer comp{.tooltip{color:theme(backgroundColor.invert);z-index:var(--z-tooltip);&[data-color=primary]{color:theme(colors.primary.600)}&[data-color=accent]{color:theme(colors.accent.600)}&[data-color=info]{color:theme(colors.info.600)}&[data-color=danger]{color:theme(colors.danger.600)}&[data-color=success]{color:theme(colors.success.600)}&[data-color=warning]{color:theme(colors.warning.600)}}}