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

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