@sanity/ui 3.0.0-static.33 → 3.0.0-static.35

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 (579) hide show
  1. package/README.md +1 -1
  2. package/dist/_chunks-cjs/_visual-editing.cjs +263 -375
  3. package/dist/_chunks-cjs/_visual-editing.cjs.map +1 -1
  4. package/dist/_chunks-cjs/refractor.cjs.map +1 -1
  5. package/dist/_chunks-es/_visual-editing.js +263 -377
  6. package/dist/_chunks-es/_visual-editing.js.map +1 -1
  7. package/dist/_chunks-es/refractor.js.map +1 -1
  8. package/dist/_visual-editing.cjs +0 -2
  9. package/dist/_visual-editing.cjs.map +1 -1
  10. package/dist/_visual-editing.d.cts +34 -85
  11. package/dist/_visual-editing.d.ts +34 -85
  12. package/dist/_visual-editing.js +2 -4
  13. package/dist/css/index.cjs +12 -12
  14. package/dist/css/index.cjs.map +1 -1
  15. package/dist/css/index.css +1 -1
  16. package/dist/css/index.d.cts +383 -13934
  17. package/dist/css/index.d.ts +383 -13934
  18. package/dist/css/index.js +12 -12
  19. package/dist/css/index.js.map +1 -1
  20. package/dist/index.cjs +241 -366
  21. package/dist/index.cjs.map +1 -1
  22. package/dist/index.d.cts +107 -817
  23. package/dist/index.d.ts +107 -817
  24. package/dist/index.js +243 -360
  25. package/dist/index.js.map +1 -1
  26. package/dist/theme.cjs +367 -4288
  27. package/dist/theme.cjs.map +1 -1
  28. package/dist/theme.d.cts +180 -1582
  29. package/dist/theme.d.ts +180 -1582
  30. package/dist/theme.js +371 -4292
  31. package/dist/theme.js.map +1 -1
  32. package/exports/_visual-editing.ts +0 -2
  33. package/package.json +3 -4
  34. package/src/core/Root.tsx +4 -2
  35. package/src/core/RootProvider.tsx +4 -4
  36. package/src/core/__workshop__/boundary.tsx +1 -1
  37. package/src/core/__workshop__/index.ts +5 -3
  38. package/src/core/components/autocomplete/__workshop__/async.tsx +1 -1
  39. package/src/core/components/autocomplete/__workshop__/constrainedHeight.tsx +2 -2
  40. package/src/core/components/autocomplete/__workshop__/custom.tsx +2 -2
  41. package/src/core/components/autocomplete/__workshop__/example.tsx +2 -2
  42. package/src/core/components/autocomplete/__workshop__/focusAndBlur.tsx +1 -1
  43. package/src/core/components/autocomplete/__workshop__/fullscreen.tsx +1 -1
  44. package/src/core/components/autocomplete/__workshop__/index.ts +5 -3
  45. package/src/core/components/autocomplete/__workshop__/mock/apiStore.ts +1 -1
  46. package/src/core/components/autocomplete/__workshop__/mock/countries.ts +1 -1
  47. package/src/core/components/autocomplete/autocomplete.tsx +2 -2
  48. package/src/core/components/autocomplete/autocompleteOption.tsx +2 -2
  49. package/src/core/components/autocomplete/constants.ts +2 -2
  50. package/src/core/components/breadcrumbs/__workshop__/example.tsx +1 -1
  51. package/src/core/components/breadcrumbs/__workshop__/index.ts +5 -3
  52. package/src/core/components/breadcrumbs/breadcrumbs.tsx +6 -11
  53. package/src/core/components/dialog/__workshop__/activate.tsx +1 -1
  54. package/src/core/components/dialog/__workshop__/autoFocus.tsx +1 -1
  55. package/src/core/components/dialog/__workshop__/index.ts +5 -3
  56. package/src/core/components/dialog/__workshop__/layering.tsx +1 -1
  57. package/src/core/components/dialog/__workshop__/nested.tsx +2 -3
  58. package/src/core/components/dialog/__workshop__/onScroll.tsx +1 -1
  59. package/src/core/components/dialog/__workshop__/panes.tsx +1 -1
  60. package/src/core/components/dialog/__workshop__/position.tsx +1 -1
  61. package/src/core/components/dialog/__workshop__/props.tsx +1 -1
  62. package/src/core/components/dialog/__workshop__/provider.tsx +1 -1
  63. package/src/core/components/dialog/__workshop__/wrapped.tsx +1 -1
  64. package/src/core/components/dialog/dialog.tsx +5 -6
  65. package/src/core/components/dialog/dialogCard.tsx +2 -2
  66. package/src/core/components/dialog/dialogContext.ts +3 -4
  67. package/src/core/components/dialog/dialogProvider.tsx +2 -2
  68. package/src/core/components/hotkeys/__workshop__/index.ts +5 -3
  69. package/src/core/components/hotkeys/__workshop__/plain.tsx +1 -1
  70. package/src/core/components/hotkeys/hotkeys.tsx +4 -15
  71. package/src/core/components/menu/__workshop__/asComponent.tsx +1 -1
  72. package/src/core/components/menu/__workshop__/avatarMenu.tsx +1 -1
  73. package/src/core/components/menu/__workshop__/closableMenuButton.tsx +1 -1
  74. package/src/core/components/menu/__workshop__/constrainedInBoundary.tsx +3 -3
  75. package/src/core/components/menu/__workshop__/customMenuItem.tsx +1 -1
  76. package/src/core/components/menu/__workshop__/customSelectedState.tsx +1 -1
  77. package/src/core/components/menu/__workshop__/disableFocusOnClose.tsx +1 -1
  78. package/src/core/components/menu/__workshop__/groups.tsx +1 -1
  79. package/src/core/components/menu/__workshop__/index.ts +5 -3
  80. package/src/core/components/menu/__workshop__/menuButton.tsx +2 -2
  81. package/src/core/components/menu/__workshop__/menuGroupRight.tsx +1 -1
  82. package/src/core/components/menu/__workshop__/nestedMenu.tsx +1 -1
  83. package/src/core/components/menu/__workshop__/onCloseMenuButton.tsx +1 -1
  84. package/src/core/components/menu/__workshop__/selectedItem.tsx +1 -1
  85. package/src/core/components/menu/__workshop__/shouldFocus.tsx +1 -1
  86. package/src/core/components/menu/__workshop__/tones.tsx +3 -3
  87. package/src/core/components/menu/__workshop__/withoutArrow.tsx +1 -1
  88. package/src/core/components/menu/menu.test.tsx +2 -1
  89. package/src/core/components/menu/menu.tsx +7 -22
  90. package/src/core/components/menu/menuButton.tsx +4 -50
  91. package/src/core/components/menu/menuContext.ts +3 -15
  92. package/src/core/components/menu/menuDivider.tsx +2 -2
  93. package/src/core/components/menu/menuGroup.tsx +10 -15
  94. package/src/core/components/menu/menuItem.tsx +7 -18
  95. package/src/core/components/tab/__workshop__/example.tsx +1 -1
  96. package/src/core/components/tab/__workshop__/index.ts +5 -3
  97. package/src/core/components/tab/tab.tsx +6 -4
  98. package/src/core/components/tab/tabList.tsx +3 -8
  99. package/src/core/components/tab/tabPanel.tsx +2 -2
  100. package/src/core/components/toast/__workshop__/hook.tsx +1 -1
  101. package/src/core/components/toast/__workshop__/index.ts +5 -3
  102. package/src/core/components/toast/__workshop__/toast.tsx +1 -1
  103. package/src/core/components/toast/toast.test.tsx +2 -1
  104. package/src/core/components/toast/toast.tsx +2 -2
  105. package/src/core/components/toast/toastContext.ts +4 -4
  106. package/src/core/components/toast/toastLayer.tsx +3 -3
  107. package/src/core/components/tree/__workshop__/basic.perf.ts +1 -1
  108. package/src/core/components/tree/__workshop__/basic.tsx +1 -1
  109. package/src/core/components/tree/__workshop__/index.ts +5 -3
  110. package/src/core/components/tree/__workshop__/tabFromElement.tsx +1 -1
  111. package/src/core/components/tree/tree.tsx +8 -9
  112. package/src/core/components/tree/treeContext.ts +4 -4
  113. package/src/core/components/tree/treeGroup.tsx +6 -8
  114. package/src/core/components/tree/treeItem.tsx +4 -4
  115. package/src/core/components/tree/types.ts +1 -1
  116. package/src/core/components/virtualList/__workshop__/changingProps.tsx +1 -1
  117. package/src/core/components/virtualList/__workshop__/elementScroll.tsx +1 -1
  118. package/src/core/components/virtualList/__workshop__/index.ts +5 -3
  119. package/src/core/components/virtualList/__workshop__/infiniteList.tsx +1 -1
  120. package/src/core/components/virtualList/__workshop__/windowScrolll.tsx +1 -1
  121. package/src/core/components/virtualList/virtualList.tsx +2 -2
  122. package/src/core/constants.ts +0 -18
  123. package/src/core/hooks/useMediaIndex/__workshop__/index.ts +5 -3
  124. package/src/core/hooks/useMediaIndex/__workshop__/test.tsx +1 -1
  125. package/src/core/hooks/useMediaIndex/useMediaIndex.ts +6 -1
  126. package/src/core/index.ts +1 -24
  127. package/src/core/lib/createGlobalScopedContext.ts +1 -1
  128. package/src/core/lib/globalScope.ts +1 -1
  129. package/src/core/observers/elementSize.ts +1 -1
  130. package/src/core/primitives/arrow/arrow.tsx +2 -2
  131. package/src/core/primitives/avatar/__workshop__/asButton.tsx +1 -1
  132. package/src/core/primitives/avatar/__workshop__/index.ts +5 -3
  133. package/src/core/primitives/avatar/__workshop__/stack.tsx +1 -1
  134. package/src/core/primitives/avatar/__workshop__/withinButton.tsx +1 -1
  135. package/src/core/primitives/avatar/__workshop__/withinMenuItem.tsx +1 -1
  136. package/src/core/primitives/avatar/avatar.tsx +3 -10
  137. package/src/core/primitives/avatar/avatarCounter.tsx +2 -2
  138. package/src/core/primitives/avatar/avatarStack.tsx +2 -4
  139. package/src/core/primitives/avatar/types.ts +0 -32
  140. package/src/core/primitives/badge/__workshop__/index.ts +5 -3
  141. package/src/core/primitives/badge/__workshop__/props.tsx +1 -1
  142. package/src/core/primitives/badge/__workshop__/tones.tsx +3 -3
  143. package/src/core/primitives/badge/badge.test.tsx +2 -1
  144. package/src/core/primitives/badge/badge.tsx +12 -11
  145. package/src/core/primitives/box/__workshop__/index.ts +5 -3
  146. package/src/core/primitives/box/__workshop__/props.tsx +1 -1
  147. package/src/core/primitives/box/__workshop__/responsive.tsx +1 -1
  148. package/src/core/primitives/box/box.tsx +28 -32
  149. package/src/core/primitives/button/__workshop__/custom.tsx +5 -5
  150. package/src/core/primitives/button/__workshop__/customIcons.tsx +1 -1
  151. package/src/core/primitives/button/__workshop__/disabled.tsx +3 -3
  152. package/src/core/primitives/button/__workshop__/index.ts +5 -3
  153. package/src/core/primitives/button/__workshop__/mixedChildren.tsx +1 -1
  154. package/src/core/primitives/button/__workshop__/props.tsx +1 -1
  155. package/src/core/primitives/button/__workshop__/sanityUploadButton.tsx +1 -1
  156. package/src/core/primitives/button/__workshop__/stacked.tsx +1 -1
  157. package/src/core/primitives/button/__workshop__/styled1.tsx +1 -1
  158. package/src/core/primitives/button/__workshop__/styled2.tsx +1 -1
  159. package/src/core/primitives/button/__workshop__/textOverflow.tsx +1 -1
  160. package/src/core/primitives/button/__workshop__/uploadButton.tsx +1 -1
  161. package/src/core/primitives/button/button.test.tsx +2 -1
  162. package/src/core/primitives/button/button.tsx +4 -7
  163. package/src/core/primitives/button/types.ts +0 -20
  164. package/src/core/primitives/card/__workshop__/asButton.tsx +2 -2
  165. package/src/core/primitives/card/__workshop__/asComponent.tsx +1 -1
  166. package/src/core/primitives/card/__workshop__/checkered.tsx +3 -3
  167. package/src/core/primitives/card/__workshop__/index.ts +5 -3
  168. package/src/core/primitives/card/__workshop__/interactive.tsx +1 -1
  169. package/src/core/primitives/card/__workshop__/listNavigation.tsx +1 -1
  170. package/src/core/primitives/card/__workshop__/props.tsx +1 -1
  171. package/src/core/primitives/card/__workshop__/selected.tsx +1 -1
  172. package/src/core/primitives/card/__workshop__/styled.tsx +1 -1
  173. package/src/core/primitives/card/__workshop__/tones.tsx +3 -3
  174. package/src/core/primitives/card/card.tsx +4 -2
  175. package/src/core/primitives/card/cardContext.ts +1 -1
  176. package/src/core/primitives/card/cardProvider.tsx +4 -4
  177. package/src/core/primitives/card/types.ts +5 -19
  178. package/src/core/primitives/checkbox/__workshop__/example.tsx +1 -1
  179. package/src/core/primitives/checkbox/__workshop__/index.ts +5 -3
  180. package/src/core/primitives/checkbox/__workshop__/props.tsx +1 -1
  181. package/src/core/primitives/checkbox/__workshop__/readOnly.tsx +1 -1
  182. package/src/core/primitives/checkbox/__workshop__/tones.tsx +3 -3
  183. package/src/core/primitives/checkbox/checkbox.tsx +2 -2
  184. package/src/core/primitives/code/__workshop__/index.ts +5 -3
  185. package/src/core/primitives/code/__workshop__/opticalAlignment.tsx +1 -1
  186. package/src/core/primitives/code/__workshop__/props.tsx +1 -1
  187. package/src/core/primitives/code/code.tsx +4 -2
  188. package/src/core/primitives/code/refractor.tsx +1 -1
  189. package/src/core/primitives/container/__workshop__/example.tsx +1 -1
  190. package/src/core/primitives/container/__workshop__/index.ts +5 -3
  191. package/src/core/primitives/container/container.tsx +2 -2
  192. package/src/core/primitives/flex/__workshop__/example.tsx +1 -1
  193. package/src/core/primitives/flex/__workshop__/gap.tsx +1 -1
  194. package/src/core/primitives/flex/__workshop__/index.ts +5 -3
  195. package/src/core/primitives/flex/flex.tsx +4 -2
  196. package/src/core/primitives/grid/__workshop__/index.ts +5 -3
  197. package/src/core/primitives/grid/__workshop__/responsive.tsx +3 -3
  198. package/src/core/primitives/grid/grid.tsx +4 -2
  199. package/src/core/primitives/heading/__workshop__/index.ts +5 -3
  200. package/src/core/primitives/heading/__workshop__/opticalAlignment.tsx +1 -1
  201. package/src/core/primitives/heading/__workshop__/plain.tsx +1 -1
  202. package/src/core/primitives/heading/heading.tsx +2 -4
  203. package/src/core/primitives/inline/__workshop__/index.ts +5 -3
  204. package/src/core/primitives/inline/__workshop__/plain.tsx +1 -1
  205. package/src/core/primitives/inline/inline.tsx +4 -11
  206. package/src/core/primitives/kbd/__workshop__/index.ts +5 -3
  207. package/src/core/primitives/kbd/__workshop__/plain.tsx +1 -1
  208. package/src/core/primitives/kbd/kbd.tsx +4 -2
  209. package/src/core/primitives/label/__workshop__/index.ts +5 -3
  210. package/src/core/primitives/label/__workshop__/opticalAlignment.tsx +1 -1
  211. package/src/core/primitives/label/__workshop__/plain.tsx +1 -1
  212. package/src/core/primitives/label/label.tsx +2 -4
  213. package/src/core/primitives/layer/__workshop__/_debug.tsx +1 -1
  214. package/src/core/primitives/layer/__workshop__/index.ts +5 -3
  215. package/src/core/primitives/layer/__workshop__/multipleRoots.tsx +1 -1
  216. package/src/core/primitives/layer/__workshop__/nested.tsx +1 -1
  217. package/src/core/primitives/layer/__workshop__/responsiveZOffset.tsx +1 -1
  218. package/src/core/primitives/layer/layer.test.tsx +2 -1
  219. package/src/core/primitives/layer/layer.tsx +2 -2
  220. package/src/core/primitives/layer/layerCard.tsx +2 -2
  221. package/src/core/primitives/layer/layerContext.ts +4 -4
  222. package/src/core/primitives/layer/layerProvider.tsx +2 -10
  223. package/src/core/primitives/popover/__workshop__/AlignedStory.tsx +2 -2
  224. package/src/core/primitives/popover/__workshop__/MarginsStory.tsx +1 -1
  225. package/src/core/primitives/popover/__workshop__/MatchReferenceWidthStory.tsx +1 -1
  226. package/src/core/primitives/popover/__workshop__/OpenOnMountStory.tsx +1 -1
  227. package/src/core/primitives/popover/__workshop__/PlainStory.tsx +2 -2
  228. package/src/core/primitives/popover/__workshop__/RecursiveStory.tsx +3 -3
  229. package/src/core/primitives/popover/__workshop__/SidePanelStory.tsx +3 -3
  230. package/src/core/primitives/popover/__workshop__/index.ts +5 -3
  231. package/src/core/primitives/popover/popover.tsx +4 -9
  232. package/src/core/primitives/popover/popoverLayer.tsx +2 -2
  233. package/src/core/primitives/radio/__workshop__/example.tsx +1 -1
  234. package/src/core/primitives/radio/__workshop__/index.ts +5 -3
  235. package/src/core/primitives/radio/__workshop__/plain.tsx +1 -1
  236. package/src/core/primitives/radio/radio.tsx +2 -2
  237. package/src/core/primitives/select/__workshop__/index.ts +5 -3
  238. package/src/core/primitives/select/__workshop__/plain.tsx +1 -1
  239. package/src/core/primitives/select/__workshop__/readOnly.tsx +1 -1
  240. package/src/core/primitives/select/select.tsx +5 -15
  241. package/src/core/primitives/selectable/selectable.tsx +4 -4
  242. package/src/core/primitives/skeleton/__workshop__/delay.tsx +1 -1
  243. package/src/core/primitives/skeleton/__workshop__/index.ts +5 -3
  244. package/src/core/primitives/skeleton/__workshop__/skeleton.tsx +2 -2
  245. package/src/core/primitives/skeleton/codeSkeleton.tsx +2 -2
  246. package/src/core/primitives/skeleton/headingSkeleton.tsx +2 -2
  247. package/src/core/primitives/skeleton/labelSkeleton.tsx +2 -2
  248. package/src/core/primitives/skeleton/skeleton.tsx +2 -2
  249. package/src/core/primitives/skeleton/textSkeleton.tsx +2 -2
  250. package/src/core/primitives/spinner/__workshop__/Props.tsx +1 -1
  251. package/src/core/primitives/spinner/__workshop__/index.ts +5 -3
  252. package/src/core/primitives/spinner/animatedSpinnerIcon.tsx +2 -2
  253. package/src/core/primitives/spinner/spinner.tsx +2 -2
  254. package/src/core/primitives/srOnly/srOnly.tsx +2 -2
  255. package/src/core/primitives/stack/__workshop__/index.ts +5 -3
  256. package/src/core/primitives/stack/__workshop__/plain.tsx +1 -1
  257. package/src/core/primitives/stack/stack.tsx +5 -10
  258. package/src/core/primitives/switch/__workshop__/example.tsx +1 -1
  259. package/src/core/primitives/switch/__workshop__/index.ts +5 -3
  260. package/src/core/primitives/switch/__workshop__/props.tsx +1 -1
  261. package/src/core/primitives/switch/switch.tsx +2 -2
  262. package/src/core/primitives/text/__workshop__/colored.tsx +1 -1
  263. package/src/core/primitives/text/__workshop__/example.tsx +1 -1
  264. package/src/core/primitives/text/__workshop__/index.ts +5 -3
  265. package/src/core/primitives/text/__workshop__/opticalAlignment.tsx +1 -1
  266. package/src/core/primitives/text/text.tsx +4 -4
  267. package/src/core/primitives/textArea/__workshop__/index.ts +5 -3
  268. package/src/core/primitives/textArea/__workshop__/plain.tsx +1 -1
  269. package/src/core/primitives/textArea/textArea.tsx +5 -15
  270. package/src/core/primitives/textInput/__workshop__/clearButton.tsx +1 -1
  271. package/src/core/primitives/textInput/__workshop__/customValidity.tsx +1 -1
  272. package/src/core/primitives/textInput/__workshop__/index.ts +5 -3
  273. package/src/core/primitives/textInput/__workshop__/plain.tsx +1 -1
  274. package/src/core/primitives/textInput/__workshop__/readOnly.tsx +1 -1
  275. package/src/core/primitives/textInput/__workshop__/states.tsx +1 -1
  276. package/src/core/primitives/textInput/__workshop__/tones.tsx +1 -1
  277. package/src/core/primitives/textInput/__workshop__/typed.tsx +1 -1
  278. package/src/core/primitives/textInput/textInput.tsx +6 -9
  279. package/src/core/primitives/tooltip/__workshop__/customPortal.tsx +1 -1
  280. package/src/core/primitives/tooltip/__workshop__/index.ts +5 -3
  281. package/src/core/primitives/tooltip/__workshop__/overflowingBoundary.tsx +1 -1
  282. package/src/core/primitives/tooltip/__workshop__/props.tsx +1 -1
  283. package/src/core/primitives/tooltip/__workshop__/resizableBoundary.tsx +1 -1
  284. package/src/core/primitives/tooltip/constants.ts +1 -1
  285. package/src/core/primitives/tooltip/tooltip.test.tsx +2 -4
  286. package/src/core/primitives/tooltip/tooltip.tsx +5 -9
  287. package/src/core/primitives/tooltip/tooltipDelayGroup/tooltipDelayGroupContext.tsx +4 -2
  288. package/src/core/primitives/tooltip/tooltipDelayGroup/tooltipDelayGroupProvider.tsx +5 -3
  289. package/src/core/primitives/tooltip/tooltipLayer.tsx +2 -2
  290. package/src/core/{types/props.ts → types.ts} +27 -0
  291. package/src/core/utils/boundaryElement/__workshop__/index.ts +5 -3
  292. package/src/core/utils/boundaryElement/__workshop__/plain.tsx +1 -1
  293. package/src/core/utils/boundaryElement/boundaryElement.test.tsx +2 -1
  294. package/src/core/utils/boundaryElement/boundaryElementContext.ts +7 -4
  295. package/src/core/utils/boundaryElement/boundaryElementProvider.tsx +2 -2
  296. package/src/core/utils/elementQuery/__workshop__/customMedia.tsx +1 -1
  297. package/src/core/utils/elementQuery/__workshop__/index.ts +5 -3
  298. package/src/core/utils/elementQuery/elementQuery.tsx +2 -2
  299. package/src/core/utils/getElementRef.ts +1 -1
  300. package/src/core/utils/portal/__workshop__/index.ts +5 -3
  301. package/src/core/utils/portal/__workshop__/named.tsx +1 -1
  302. package/src/core/utils/portal/portal.test.tsx +2 -1
  303. package/src/core/utils/portal/portalContext.ts +5 -2
  304. package/src/core/utils/portal/portalProvider.tsx +5 -9
  305. package/src/css/_responsiveClassName.ts +2 -2
  306. package/src/css/_style.css.ts +1 -1
  307. package/src/css/components/breadcrumbs/breadcrumbs.css.ts +1 -1
  308. package/src/css/components/dialog/dialog.css.ts +9 -17
  309. package/src/css/components/menu/menu.css.ts +2 -2
  310. package/src/css/components/menu/menu.ts +2 -2
  311. package/src/css/components/skeleton/skeleton.css.ts +2 -6
  312. package/src/css/components/toast/toast.css.ts +2 -2
  313. package/src/css/components/toast/toast.ts +2 -2
  314. package/src/css/components/tree/tree.css.ts +1 -1
  315. package/src/css/components/tree/tree.ts +1 -1
  316. package/src/css/defaultTheme.css.ts +59 -60
  317. package/src/css/layers.css.ts +4 -1
  318. package/src/css/primitives/_arrow/_arrow.css.ts +5 -5
  319. package/src/css/primitives/_input/_input.css.ts +4 -4
  320. package/src/css/primitives/_selectable/_selectable.css.ts +4 -4
  321. package/src/css/primitives/_selectable/types.ts +2 -2
  322. package/src/css/primitives/avatar/avatar.css.ts +10 -10
  323. package/src/css/primitives/badge/badge.css.ts +4 -4
  324. package/src/css/primitives/badge/types.ts +8 -2
  325. package/src/css/primitives/box/box.css.ts +2 -2
  326. package/src/css/primitives/button/button.css.ts +6 -6
  327. package/src/css/primitives/button/button.ts +2 -2
  328. package/src/css/primitives/button/types.ts +3 -3
  329. package/src/css/primitives/card/__workshop__/color.tsx +9 -9
  330. package/src/css/primitives/card/__workshop__/index.ts +5 -3
  331. package/src/css/primitives/card/card.css.ts +12 -18
  332. package/src/css/primitives/card/types.ts +3 -3
  333. package/src/css/primitives/checkbox/checkbox.css.ts +3 -3
  334. package/src/css/primitives/checkbox/checkbox.ts +3 -3
  335. package/src/css/primitives/code/code.css.ts +4 -3
  336. package/src/css/primitives/code/types.ts +3 -4
  337. package/src/css/primitives/container/container.css.ts +1 -1
  338. package/src/css/primitives/heading/heading.css.ts +5 -4
  339. package/src/css/primitives/heading/types.ts +3 -6
  340. package/src/css/primitives/kbd/kbd.css.ts +1 -1
  341. package/src/css/primitives/label/label.css.ts +5 -4
  342. package/src/css/primitives/label/types.ts +0 -8
  343. package/src/css/primitives/popover/popover.css.ts +2 -2
  344. package/src/css/primitives/popover/popover.ts +2 -2
  345. package/src/css/primitives/radio/radio.css.ts +3 -3
  346. package/src/css/primitives/radio/radio.ts +3 -3
  347. package/src/css/primitives/root/root.css.ts +1 -1
  348. package/src/css/primitives/root/root.ts +1 -1
  349. package/src/css/primitives/root/types.ts +3 -3
  350. package/src/css/primitives/select/select.css.ts +3 -3
  351. package/src/css/primitives/spinner/spinner.css.ts +2 -6
  352. package/src/css/primitives/spinner/spinner.ts +2 -2
  353. package/src/css/primitives/srOnly/srOnly.css.ts +1 -1
  354. package/src/css/primitives/srOnly/srOnly.ts +1 -1
  355. package/src/css/primitives/stack/stack.css.ts +1 -1
  356. package/src/css/primitives/stack/stack.ts +1 -1
  357. package/src/css/primitives/switch/switch.css.ts +5 -5
  358. package/src/css/primitives/text/text.css.ts +5 -4
  359. package/src/css/primitives/text/types.ts +3 -5
  360. package/src/css/primitives/textArea/textArea.css.ts +1 -1
  361. package/src/css/primitives/textInput/textInput.css.ts +4 -4
  362. package/src/css/primitives/tooltip/tooltip.css.ts +1 -1
  363. package/src/css/props/alignItems/alignItems.ts +1 -1
  364. package/src/css/props/border/border.ts +1 -16
  365. package/src/css/props/boxSizing/boxSizing.css.ts +2 -1
  366. package/src/css/props/boxSizing/boxSizing.ts +0 -3
  367. package/src/css/props/display/display.ts +1 -10
  368. package/src/css/props/flex/flex.ts +1 -1
  369. package/src/css/props/flexDirection/flexDirection.ts +1 -1
  370. package/src/css/props/flexWrap/flexWrap.ts +1 -1
  371. package/src/css/props/font/font.css.ts +3 -2
  372. package/src/css/props/font/font.ts +1 -1
  373. package/src/css/props/gap/gap.ts +1 -1
  374. package/src/css/props/gridAutoColumns/gridAutoColumns.css.ts +2 -2
  375. package/src/css/props/gridAutoColumns/gridAutoColumns.ts +2 -2
  376. package/src/css/props/gridAutoColumns/types.ts +0 -10
  377. package/src/css/props/gridAutoFlow/gridAutoFlow.ts +2 -2
  378. package/src/css/props/gridAutoFlow/types.ts +0 -4
  379. package/src/css/props/gridAutoRows/gridAutoRows.ts +2 -2
  380. package/src/css/props/gridAutoRows/types.ts +0 -4
  381. package/src/css/props/gridColumn/gridColumn.ts +3 -3
  382. package/src/css/props/gridColumn/types.ts +0 -10
  383. package/src/css/props/gridColumnEnd/gridColumnEnd.ts +3 -3
  384. package/src/css/props/gridColumnEnd/types.ts +0 -10
  385. package/src/css/props/gridColumnStart/gridColumnStart.ts +3 -6
  386. package/src/css/props/gridColumnStart/types.ts +0 -10
  387. package/src/css/props/gridRow/gridRow.ts +3 -3
  388. package/src/css/props/gridRow/types.ts +0 -10
  389. package/src/css/props/gridRowEnd/gridRowEnd.ts +3 -3
  390. package/src/css/props/gridRowEnd/types.ts +0 -10
  391. package/src/css/props/gridRowStart/gridRowStart.ts +3 -3
  392. package/src/css/props/gridRowStart/types.ts +0 -10
  393. package/src/css/props/gridTemplateColumns/gridTemplateColumns.ts +2 -2
  394. package/src/css/props/gridTemplateColumns/types.ts +0 -10
  395. package/src/css/props/gridTemplateRows/gridTemplateRows.ts +2 -2
  396. package/src/css/props/gridTemplateRows/types.ts +0 -10
  397. package/src/css/props/height/height.ts +1 -1
  398. package/src/css/props/height/types.ts +0 -6
  399. package/src/css/props/inset/inset.ts +1 -1
  400. package/src/css/props/justifyContent/justifyContent.ts +1 -1
  401. package/src/css/props/margin/margin.ts +1 -1
  402. package/src/css/props/maxWidth/maxWidth.ts +1 -1
  403. package/src/css/props/minHeight/minHeight.ts +1 -1
  404. package/src/css/props/minWidth/minWidth.ts +1 -1
  405. package/src/css/props/outline/outline.ts +1 -1
  406. package/src/css/props/overflow/overflow.ts +1 -1
  407. package/src/css/props/overflow/types.ts +0 -6
  408. package/src/css/props/padding/padding.ts +1 -1
  409. package/src/css/props/pointerEvents/pointerEvents.ts +1 -1
  410. package/src/css/props/position/position.ts +1 -1
  411. package/src/css/props/radius/radius.ts +1 -1
  412. package/src/css/props/shadow/shadow.ts +1 -1
  413. package/src/css/props/textAlign/textAlign.ts +1 -1
  414. package/src/css/props/textOverflow/textOverflow.ts +1 -1
  415. package/src/css/props/width/width.ts +1 -1
  416. package/src/css/types.ts +225 -53
  417. package/src/css/util.ts +2 -2
  418. package/src/css/vars.css.ts +33 -36
  419. package/src/theme/{v3/_parseColorToken.ts → _parseColorToken.ts} +2 -2
  420. package/src/theme/buildTheme.ts +33 -0
  421. package/src/theme/constants.ts +90 -0
  422. package/src/theme/defaults/color.ts +197 -0
  423. package/src/theme/{v2/defaults/config.ts → defaults/common.ts} +3 -16
  424. package/src/theme/{v3/defaultFonts.ts → defaults/fonts.ts} +2 -2
  425. package/src/theme/index.ts +4 -5
  426. package/src/theme/{v3/resolveTokens.ts → resolveTokens.ts} +15 -15
  427. package/src/theme/types.ts +355 -15
  428. package/src/core/__DEV__.ts +0 -5
  429. package/src/core/_compat/helpers.ts +0 -72
  430. package/src/core/_compat/styles/_responsive.ts +0 -19
  431. package/src/core/_compat/theme/theme.test.tsx +0 -73
  432. package/src/core/_compat/theme/themeColorProvider.tsx +0 -24
  433. package/src/core/_compat/theme/themeContext.ts +0 -10
  434. package/src/core/_compat/theme/themeProvider.tsx +0 -68
  435. package/src/core/_compat/theme/types.ts +0 -10
  436. package/src/core/_compat/theme/useRootTheme.ts +0 -15
  437. package/src/core/_compat/theme/useTheme.ts +0 -12
  438. package/src/core/_compat/types.ts +0 -191
  439. package/src/core/hooks/useArrayProp.ts +0 -26
  440. package/src/core/hooks/useClickOutside.test.tsx +0 -481
  441. package/src/core/hooks/useClickOutside.ts +0 -113
  442. package/src/core/hooks/useElementRect/__workshop__/example.tsx +0 -30
  443. package/src/core/hooks/useElementRect/__workshop__/index.ts +0 -14
  444. package/src/core/hooks/useElementRect/useElementRect.ts +0 -13
  445. package/src/core/hooks/useForwardedRef.ts +0 -19
  446. package/src/core/hooks/useIsomorphicEffect.ts +0 -7
  447. package/src/core/primitives/badge/types.ts +0 -18
  448. package/src/core/primitives/box/types.ts +0 -22
  449. package/src/core/primitives/flex/types.ts +0 -27
  450. package/src/core/primitives/grid/types.ts +0 -17
  451. package/src/core/primitives/selectable/types.ts +0 -7
  452. package/src/core/primitives/types.ts +0 -153
  453. package/src/core/types/gridItem.ts +0 -32
  454. package/src/core/types/placement.ts +0 -18
  455. package/src/core/types/radius.ts +0 -7
  456. package/src/core/types/textAlign.ts +0 -7
  457. package/src/core/utils/spanWithTextOverflow.tsx +0 -10
  458. package/src/theme/getScopedTheme.ts +0 -88
  459. package/src/theme/v0/avatar.ts +0 -10
  460. package/src/theme/v0/color/_generic.ts +0 -35
  461. package/src/theme/v0/color/_system.ts +0 -17
  462. package/src/theme/v0/color/base.ts +0 -21
  463. package/src/theme/v0/color/button.ts +0 -42
  464. package/src/theme/v0/color/card.ts +0 -19
  465. package/src/theme/v0/color/color.ts +0 -40
  466. package/src/theme/v0/color/index.ts +0 -11
  467. package/src/theme/v0/color/input.ts +0 -34
  468. package/src/theme/v0/color/muted.ts +0 -26
  469. package/src/theme/v0/color/selectable.ts +0 -31
  470. package/src/theme/v0/color/solid.ts +0 -26
  471. package/src/theme/v0/color/spot.ts +0 -13
  472. package/src/theme/v0/css.ts +0 -10
  473. package/src/theme/v0/focusRing.ts +0 -5
  474. package/src/theme/v0/font.ts +0 -40
  475. package/src/theme/v0/index.ts +0 -10
  476. package/src/theme/v0/input.ts +0 -23
  477. package/src/theme/v0/layer.ts +0 -6
  478. package/src/theme/v0/shadow.ts +0 -15
  479. package/src/theme/v0/styles.ts +0 -13
  480. package/src/theme/v0/theme.ts +0 -72
  481. package/src/theme/v2/avatar.ts +0 -12
  482. package/src/theme/v2/build/_deprecated/color/_selectable/createSelectableTones.ts +0 -76
  483. package/src/theme/v2/build/_deprecated/color/_solid/createSolidTones.ts +0 -54
  484. package/src/theme/v2/build/_deprecated/color/button/createButtonModes.ts +0 -22
  485. package/src/theme/v2/build/_deprecated/color/button/createButtonTones.ts +0 -55
  486. package/src/theme/v2/build/_deprecated/color/card/createCardStates.ts +0 -60
  487. package/src/theme/v2/build/_deprecated/color/color.test.ts +0 -63
  488. package/src/theme/v2/build/_deprecated/color/defaults.ts +0 -390
  489. package/src/theme/v2/build/_deprecated/color/factory.ts +0 -141
  490. package/src/theme/v2/build/_deprecated/color/index.ts +0 -1
  491. package/src/theme/v2/build/_deprecated/color/input/createInputModes.ts +0 -86
  492. package/src/theme/v2/build/_deprecated/color/muted/createMuted.ts +0 -54
  493. package/src/theme/v2/build/_deprecated/color/spot/createSpot.ts +0 -20
  494. package/src/theme/v2/build/buildColorTheme.test.ts +0 -185
  495. package/src/theme/v2/build/buildColorTheme.ts +0 -494
  496. package/src/theme/v2/build/buildTheme.test.ts +0 -89
  497. package/src/theme/v2/build/buildTheme.ts +0 -37
  498. package/src/theme/v2/build/colorToken/colorToken.ts +0 -19
  499. package/src/theme/v2/build/colorToken/compileColorToken.ts +0 -21
  500. package/src/theme/v2/build/colorToken/index.ts +0 -2
  501. package/src/theme/v2/build/colorToken/types.ts +0 -6
  502. package/src/theme/v2/build/index.ts +0 -3
  503. package/src/theme/v2/build/lib/color-fns/blend/index.ts +0 -3
  504. package/src/theme/v2/build/lib/color-fns/blend/mix.ts +0 -21
  505. package/src/theme/v2/build/lib/color-fns/blend/multiply.ts +0 -18
  506. package/src/theme/v2/build/lib/color-fns/blend/screen.ts +0 -18
  507. package/src/theme/v2/build/lib/color-fns/color-fns.test.ts +0 -68
  508. package/src/theme/v2/build/lib/color-fns/contrastRatio.ts +0 -34
  509. package/src/theme/v2/build/lib/color-fns/convert.ts +0 -150
  510. package/src/theme/v2/build/lib/color-fns/index.ts +0 -6
  511. package/src/theme/v2/build/lib/color-fns/parse.ts +0 -60
  512. package/src/theme/v2/build/lib/color-fns/rgba.ts +0 -14
  513. package/src/theme/v2/build/lib/color-fns/types.ts +0 -28
  514. package/src/theme/v2/build/lib/isRecord.ts +0 -3
  515. package/src/theme/v2/build/lib/utils.ts +0 -19
  516. package/src/theme/v2/build/merge.ts +0 -28
  517. package/src/theme/v2/build/mixThemeColor.test.ts +0 -23
  518. package/src/theme/v2/build/mixThemeColor.ts +0 -53
  519. package/src/theme/v2/build/renderColorTheme.ts +0 -532
  520. package/src/theme/v2/build/renderColorValue.ts +0 -85
  521. package/src/theme/v2/build/resolveColorTokens.ts +0 -268
  522. package/src/theme/v2/color/_constants.ts +0 -45
  523. package/src/theme/v2/color/_helpers.ts +0 -24
  524. package/src/theme/v2/color/_system.ts +0 -38
  525. package/src/theme/v2/color/avatar.ts +0 -11
  526. package/src/theme/v2/color/badge.ts +0 -12
  527. package/src/theme/v2/color/button.ts +0 -11
  528. package/src/theme/v2/color/color.ts +0 -28
  529. package/src/theme/v2/color/index.ts +0 -13
  530. package/src/theme/v2/color/input.ts +0 -23
  531. package/src/theme/v2/color/kbd.ts +0 -6
  532. package/src/theme/v2/color/selectable.ts +0 -8
  533. package/src/theme/v2/color/shadow.ts +0 -7
  534. package/src/theme/v2/color/state.ts +0 -41
  535. package/src/theme/v2/color/syntax.ts +0 -39
  536. package/src/theme/v2/config/helpers.ts +0 -48
  537. package/src/theme/v2/config/index.ts +0 -4
  538. package/src/theme/v2/config/system.ts +0 -114
  539. package/src/theme/v2/config/tokens/color/index.ts +0 -1
  540. package/src/theme/v2/config/tokens/color/types.ts +0 -137
  541. package/src/theme/v2/config/tokens/index.ts +0 -3
  542. package/src/theme/v2/config/tokens/parseTokenValue.test.ts +0 -44
  543. package/src/theme/v2/config/tokens/parseTokenValue.ts +0 -133
  544. package/src/theme/v2/config/tokens/types.ts +0 -53
  545. package/src/theme/v2/config/types.ts +0 -47
  546. package/src/theme/v2/defaults/colorPalette.ts +0 -5
  547. package/src/theme/v2/defaults/colorTokens.ts +0 -648
  548. package/src/theme/v2/defaults/fonts.ts +0 -227
  549. package/src/theme/v2/index.ts +0 -6
  550. package/src/theme/v2/input.ts +0 -31
  551. package/src/theme/v2/theme.ts +0 -45
  552. package/src/theme/v3/_constants.ts +0 -29
  553. package/src/theme/v3/buildTheme_v3.ts +0 -39
  554. package/src/theme/v3/color/_constants.ts +0 -15
  555. package/src/theme/v3/color/avatar.ts +0 -14
  556. package/src/theme/v3/color/card.ts +0 -79
  557. package/src/theme/v3/color/color.ts +0 -98
  558. package/src/theme/v3/color/element.ts +0 -19
  559. package/src/theme/v3/color/index.ts +0 -7
  560. package/src/theme/v3/color/token.ts +0 -32
  561. package/src/theme/v3/color/tokens.ts +0 -5
  562. package/src/theme/v3/defaultTokens.ts +0 -199
  563. package/src/theme/v3/index.ts +0 -9
  564. package/src/theme/v3/palette/constants.ts +0 -15
  565. package/src/theme/v3/palette/index.ts +0 -2
  566. package/src/theme/v3/palette/types.ts +0 -7
  567. package/src/theme/v3/tokens.ts +0 -16
  568. package/src/theme/v3/types.ts +0 -133
  569. package/src/theme/versioning/getTheme_v2.ts +0 -58
  570. package/src/theme/versioning/index.ts +0 -1
  571. package/src/theme/versioning/is_v0.ts +0 -7
  572. package/src/theme/versioning/is_v2.ts +0 -7
  573. package/src/theme/versioning/themeColor_v0_v2.ts +0 -245
  574. package/src/theme/versioning/themeColor_v2_v2_9.ts +0 -49
  575. package/src/theme/versioning/themeColor_v3_v2.ts +0 -383
  576. package/src/theme/versioning/v0_v2.ts +0 -95
  577. package/src/theme/versioning/v2_v0.ts +0 -127
  578. package/src/theme/versioning/v3_v2.ts +0 -130
  579. /package/src/theme/{v3/merge.ts → merge.ts} +0 -0
@@ -1,494 +0,0 @@
1
- import {
2
- THEME_COLOR_BUTTON_MODES,
3
- THEME_COLOR_CARD_TONES,
4
- THEME_COLOR_STATE_TONES,
5
- THEME_COLOR_STATES,
6
- type ThemeColorAvatar_v2,
7
- type ThemeColorAvatarColorKey,
8
- type ThemeColorAvatarHue_v2,
9
- type ThemeColorBadge_v2,
10
- type ThemeColorButton_v2,
11
- type ThemeColorButtonMode_v2,
12
- type ThemeColorButtonModeKey,
13
- type ThemeColorButtonTone_v2,
14
- type ThemeColorCard_v2,
15
- type ThemeColorCardToneKey,
16
- type ThemeColorInput_v2,
17
- type ThemeColorInputMode_v2,
18
- type ThemeColorInputState_v2,
19
- type ThemeColorScheme_v2,
20
- type ThemeColorSchemeKey,
21
- type ThemeColorSchemes_v2,
22
- type ThemeColorShadow,
23
- type ThemeColorState_v2,
24
- type ThemeColorStateKey,
25
- type ThemeColorStateToneKey,
26
- type ThemeColorSyntax,
27
- } from '../color'
28
- import type {ThemeColorBadgeTokens, ThemeColorStateTokens, ThemeConfig} from '../config'
29
- import {type ColorTokenContext, resolveColorTokenValue as _color} from './colorToken'
30
- import {resolveColorTokens} from './resolveColorTokens'
31
-
32
- export function buildColorTheme(config?: ThemeConfig): ThemeColorSchemes_v2 {
33
- const resolvedConfig: ThemeConfig = {
34
- ...config,
35
- color: resolveColorTokens(config?.color),
36
- }
37
-
38
- return {
39
- light: buildColorScheme({scheme: 'light'}, resolvedConfig),
40
- dark: buildColorScheme({scheme: 'dark'}, resolvedConfig),
41
- }
42
- }
43
-
44
- function buildColorScheme(
45
- options: {scheme: ThemeColorSchemeKey},
46
- config: ThemeConfig,
47
- ): ThemeColorScheme_v2 {
48
- const {scheme} = options
49
-
50
- const colorScheme = {} as ThemeColorScheme_v2
51
-
52
- for (const tone of THEME_COLOR_CARD_TONES) {
53
- colorScheme[tone] = buildCardColorTheme({scheme, tone}, config)
54
- }
55
-
56
- return colorScheme
57
- }
58
-
59
- function buildCardColorTheme(
60
- options: {scheme: ThemeColorSchemeKey; tone: ThemeColorCardToneKey},
61
- config?: ThemeConfig,
62
- ): ThemeColorCard_v2 {
63
- const {scheme, tone} = options
64
- const tokens = config?.color?.base?.[tone]
65
- const hue = tokens?._hue || 'gray'
66
- const context: ColorTokenContext = {hue, scheme}
67
- const blendMode = tokens?._blend || ['multiply', 'screen']
68
-
69
- return {
70
- _blend: blendMode[scheme === 'light' ? 0 : 1],
71
- _dark: scheme === 'dark',
72
- accent: {
73
- fg: _color(context, tokens?.accent?.fg),
74
- },
75
- avatar: buildAvatarColorTheme({scheme}, tokens),
76
- backdrop: _color(context, tokens?.backdrop),
77
- badge: buildBadgeColorTheme(tokens?.badge, {scheme}, config),
78
- bg: _color(context, tokens?.bg),
79
- border: _color(context, tokens?.border),
80
- button: buildButtonColorTheme({scheme, tone}, config),
81
- code: {
82
- bg: _color(context, tokens?.code?.bg),
83
- fg: _color(context, tokens?.code?.fg),
84
- },
85
- fg: _color(context, tokens?.fg),
86
- focusRing: _color(context, tokens?.focusRing),
87
- icon: _color(context, tokens?.icon),
88
- input: buildInputColorTheme({scheme, tone}, config),
89
- kbd: {
90
- bg: _color(context, tokens?.kbd?.bg),
91
- fg: _color(context, tokens?.kbd?.fg),
92
- border: _color(context, tokens?.kbd?.border),
93
- },
94
- link: {
95
- fg: _color(context, tokens?.link?.fg),
96
- },
97
- muted: {
98
- bg: _color(context, tokens?.muted?.bg),
99
- fg: _color(context, tokens?.muted?.fg),
100
- },
101
- selectable: buildSelectableColorTheme({scheme, tone}, config),
102
- shadow: buildShadowColorTheme({scheme, tone}, config),
103
- skeleton: {
104
- from: _color(context, tokens?.skeleton?.from),
105
- to: _color(context, tokens?.skeleton?.to),
106
- },
107
- syntax: buildSyntaxColorTheme({scheme}, config),
108
- }
109
- }
110
-
111
- function buildShadowColorTheme(
112
- options: {scheme: ThemeColorSchemeKey; tone: ThemeColorCardToneKey},
113
- config?: ThemeConfig,
114
- ): ThemeColorShadow {
115
- const {scheme, tone} = options
116
- const tokens = config?.color?.base?.[tone]
117
- const hue = tokens?._hue || 'gray'
118
- const context: ColorTokenContext = {hue, scheme}
119
-
120
- return {
121
- outline: _color(context, tokens?.shadow?.outline),
122
- umbra: _color(context, tokens?.shadow?.umbra),
123
- penumbra: _color(context, tokens?.shadow?.penumbra),
124
- ambient: _color(context, tokens?.shadow?.ambient),
125
- }
126
- }
127
-
128
- function buildAvatarColorTheme(
129
- options: {scheme: ThemeColorSchemeKey},
130
- stateTokens?: ThemeColorStateTokens,
131
- ): ThemeColorAvatar_v2 {
132
- const {scheme} = options
133
-
134
- return {
135
- gray: _buildAvatarColorTheme({color: 'gray', scheme}, stateTokens),
136
- blue: _buildAvatarColorTheme({color: 'blue', scheme}, stateTokens),
137
- purple: _buildAvatarColorTheme({color: 'purple', scheme}, stateTokens),
138
- magenta: _buildAvatarColorTheme({color: 'magenta', scheme}, stateTokens),
139
- red: _buildAvatarColorTheme({color: 'red', scheme}, stateTokens),
140
- orange: _buildAvatarColorTheme({color: 'orange', scheme}, stateTokens),
141
- yellow: _buildAvatarColorTheme({color: 'yellow', scheme}, stateTokens),
142
- green: _buildAvatarColorTheme({color: 'green', scheme}, stateTokens),
143
- cyan: _buildAvatarColorTheme({color: 'cyan', scheme}, stateTokens),
144
- }
145
- }
146
-
147
- function _buildAvatarColorTheme(
148
- options: {color: ThemeColorAvatarColorKey; scheme: ThemeColorSchemeKey},
149
- stateTokens?: ThemeColorStateTokens,
150
- ): ThemeColorAvatarHue_v2 {
151
- const {color, scheme} = options
152
- const tokens = stateTokens?.avatar?.[color]
153
- const context: ColorTokenContext = {hue: tokens?._hue || 'gray', scheme}
154
- const blendMode = tokens?._blend || ['screen', 'multiply']
155
-
156
- return {
157
- _blend: blendMode[scheme === 'light' ? 0 : 1],
158
- bg: _color(context, tokens?.bg),
159
- fg: _color(context, tokens?.fg),
160
- }
161
- }
162
-
163
- function buildBadgeColorTheme(
164
- tokens: ThemeColorBadgeTokens | undefined,
165
- options: {scheme: ThemeColorSchemeKey},
166
- config?: ThemeConfig,
167
- ): ThemeColorBadge_v2 {
168
- const {scheme} = options
169
-
170
- const colorBadge = {} as ThemeColorBadge_v2
171
-
172
- for (const tone of THEME_COLOR_STATE_TONES) {
173
- colorBadge[tone] = _buildBadgeColorTheme(tokens, {scheme, tone}, config)
174
- }
175
-
176
- return colorBadge
177
- }
178
-
179
- function _buildBadgeColorTheme(
180
- parentTokens: ThemeColorBadgeTokens | undefined,
181
- options: {scheme: ThemeColorSchemeKey; tone: ThemeColorStateToneKey},
182
- config?: ThemeConfig,
183
- ): ThemeColorBadge_v2['default'] {
184
- const {scheme, tone} = options
185
- const tokens = parentTokens?.[tone]
186
- const hue = tokens?._hue || config?.color?.base?.[tone]?._hue || 'gray'
187
- const context: ColorTokenContext = {hue, scheme}
188
-
189
- return {
190
- bg: _color(context, tokens?.bg),
191
- fg: _color(context, tokens?.fg),
192
- dot: _color(context, tokens?.dot),
193
- icon: _color(context, tokens?.icon),
194
- }
195
- }
196
-
197
- function buildButtonColorTheme(
198
- options: {scheme: ThemeColorSchemeKey; tone: ThemeColorCardToneKey},
199
- config?: ThemeConfig,
200
- ): ThemeColorButton_v2 {
201
- const {scheme, tone: cardTone} = options
202
-
203
- const modes: Partial<ThemeColorButton_v2> = {}
204
-
205
- for (const mode of THEME_COLOR_BUTTON_MODES) {
206
- modes[mode] = buildButtonTonesColorTheme({cardTone, scheme, mode}, config)
207
- }
208
-
209
- return modes as ThemeColorButton_v2
210
- }
211
-
212
- function buildButtonTonesColorTheme(
213
- options: {
214
- cardTone: ThemeColorCardToneKey
215
- scheme: ThemeColorSchemeKey
216
- mode: ThemeColorButtonModeKey
217
- },
218
- config?: ThemeConfig,
219
- ): ThemeColorButtonMode_v2 {
220
- const {cardTone, mode, scheme} = options
221
-
222
- const tones: Partial<ThemeColorButtonMode_v2> = {}
223
-
224
- for (const tone of THEME_COLOR_STATE_TONES) {
225
- tones[tone] = buildButtonStatesColorTheme({cardTone, mode, scheme, tone}, config)
226
- }
227
-
228
- return tones as ThemeColorButtonMode_v2
229
- }
230
-
231
- function buildButtonStatesColorTheme(
232
- options: {
233
- cardTone: ThemeColorCardToneKey
234
- mode: ThemeColorButtonModeKey
235
- scheme: ThemeColorSchemeKey
236
- tone: ThemeColorStateToneKey
237
- },
238
- config?: ThemeConfig,
239
- ): ThemeColorButtonTone_v2 {
240
- const {cardTone, mode, scheme, tone} = options
241
-
242
- const states: Partial<ThemeColorButtonTone_v2> = {}
243
-
244
- for (const state of THEME_COLOR_STATES) {
245
- states[state] = buildButtonStateColorTheme({cardTone, mode, tone, scheme, state}, config)
246
- }
247
-
248
- return states as ThemeColorButtonTone_v2
249
- }
250
-
251
- function buildButtonStateColorTheme(
252
- options: {
253
- cardTone: ThemeColorCardToneKey
254
- mode: ThemeColorButtonModeKey
255
- tone: ThemeColorStateToneKey
256
- scheme: ThemeColorSchemeKey
257
- state: ThemeColorStateKey
258
- },
259
- config?: ThemeConfig,
260
- ): ThemeColorState_v2 {
261
- const {cardTone, mode, tone, scheme, state} = options
262
- const cardTokens = config?.color?.base?.[cardTone]
263
- const tokens = config?.color?.button?.[mode]?.[tone]?.[state]
264
- const hue = tokens?._hue || cardTokens?._hue || 'gray'
265
- const blendMode = tokens?._blend || ['screen', 'multiply']
266
- const context: ColorTokenContext = {hue, scheme}
267
-
268
- return {
269
- _blend: blendMode[scheme === 'light' ? 0 : 1],
270
- accent: {
271
- fg: _color(context, tokens?.accent?.fg),
272
- },
273
- avatar: buildAvatarColorTheme({scheme}, tokens),
274
- badge: buildBadgeColorTheme(tokens?.badge, {scheme}, config),
275
- bg: _color(context, tokens?.bg),
276
- border: _color(context, tokens?.border),
277
- code: {
278
- bg: _color(context, tokens?.code?.bg),
279
- fg: _color(context, tokens?.code?.fg),
280
- },
281
- fg: _color(context, tokens?.fg),
282
- icon: _color(context, tokens?.icon),
283
- muted: {
284
- bg: _color(context, tokens?.muted?.bg),
285
- fg: _color(context, tokens?.muted?.fg),
286
- },
287
- kbd: {
288
- bg: _color(context, tokens?.kbd?.bg),
289
- fg: _color(context, tokens?.kbd?.fg),
290
- border: _color(context, tokens?.kbd?.border),
291
- },
292
- link: {
293
- fg: _color(context, tokens?.link?.fg),
294
- },
295
- skeleton: {
296
- from: _color(context, tokens?.skeleton?.from),
297
- to: _color(context, tokens?.skeleton?.to),
298
- },
299
- }
300
- }
301
-
302
- function buildInputColorTheme(
303
- options: {scheme: ThemeColorSchemeKey; tone: ThemeColorCardToneKey},
304
- config?: ThemeConfig,
305
- ): ThemeColorInput_v2 {
306
- const {scheme, tone} = options
307
-
308
- return {
309
- default: buildInputStatesColorTheme({mode: 'default', scheme, tone}, config),
310
- invalid: buildInputStatesColorTheme({mode: 'invalid', scheme, tone}, config),
311
- }
312
- }
313
-
314
- function buildInputStatesColorTheme(
315
- options: {
316
- mode: 'default' | 'invalid'
317
- scheme: ThemeColorSchemeKey
318
- tone: ThemeColorCardToneKey
319
- },
320
- config?: ThemeConfig,
321
- ): ThemeColorInputMode_v2 {
322
- const {mode, scheme, tone} = options
323
-
324
- return {
325
- enabled: buildInputStateColorTheme({mode, scheme, state: 'enabled', cardTone: tone}, config),
326
- hovered: buildInputStateColorTheme({mode, scheme, state: 'hovered', cardTone: tone}, config),
327
- readOnly: buildInputStateColorTheme({mode, scheme, state: 'readOnly', cardTone: tone}, config),
328
- disabled: buildInputStateColorTheme({mode, scheme, state: 'disabled', cardTone: tone}, config),
329
- }
330
- }
331
-
332
- function buildInputStateColorTheme(
333
- options: {
334
- cardTone: ThemeColorCardToneKey
335
- mode: 'default' | 'invalid'
336
- scheme: ThemeColorSchemeKey
337
- state: 'enabled' | 'hovered' | 'readOnly' | 'disabled'
338
- },
339
- config?: ThemeConfig,
340
- ): ThemeColorInputState_v2 {
341
- const {cardTone, mode, scheme, state} = options
342
- const cardTokens = config?.color?.base?.[cardTone]
343
- const tokens = config?.color?.input?.[mode]?.[state]
344
- const hue = tokens?._hue || cardTokens?._hue || 'gray'
345
- const blendMode = tokens?._blend || ['screen', 'multiply']
346
- const context: ColorTokenContext = {hue, scheme}
347
-
348
- return {
349
- _blend: blendMode[scheme === 'light' ? 0 : 1],
350
- bg: _color(context, tokens?.bg),
351
- border: _color(context, tokens?.border),
352
- fg: _color(context, tokens?.fg),
353
- muted: {
354
- bg: _color(context, tokens?.muted?.bg),
355
- },
356
- placeholder: _color(context, tokens?.placeholder),
357
- }
358
- }
359
-
360
- function buildSelectableColorTheme(
361
- options: {
362
- scheme: ThemeColorSchemeKey
363
- tone: ThemeColorCardToneKey
364
- },
365
- config?: ThemeConfig,
366
- ): ThemeColorButtonMode_v2 {
367
- const {scheme, tone: cardTone} = options
368
-
369
- const tones: Partial<ThemeColorButtonMode_v2> = {}
370
-
371
- for (const tone of THEME_COLOR_STATE_TONES) {
372
- tones[tone] = buildSelectableStatesColorTheme({cardTone, scheme, tone}, config)
373
- }
374
-
375
- return tones as ThemeColorButtonMode_v2
376
- }
377
-
378
- function buildSelectableStatesColorTheme(
379
- options: {
380
- cardTone: ThemeColorCardToneKey
381
- scheme: ThemeColorSchemeKey
382
- tone: ThemeColorStateToneKey
383
- },
384
- config?: ThemeConfig,
385
- ): ThemeColorButtonTone_v2 {
386
- const {cardTone, scheme, tone} = options
387
-
388
- const states: Partial<ThemeColorButtonTone_v2> = {}
389
-
390
- for (const state of THEME_COLOR_STATES) {
391
- states[state] = buildSelectableStateColorTheme({cardTone, tone, scheme, state}, config)
392
- }
393
-
394
- return states as ThemeColorButtonTone_v2
395
- }
396
-
397
- function buildSelectableStateColorTheme(
398
- options: {
399
- cardTone: ThemeColorCardToneKey
400
- scheme: ThemeColorSchemeKey
401
- state: ThemeColorStateKey
402
- tone: ThemeColorStateToneKey
403
- },
404
- config?: ThemeConfig,
405
- ): ThemeColorState_v2 {
406
- const {cardTone, scheme, state, tone} = options
407
- const cardTokens = config?.color?.base?.[cardTone]
408
- const tokens = config?.color?.selectable?.[tone]?.[state]
409
-
410
- const hue = tokens?._hue || cardTokens?._hue || 'gray'
411
- const blendMode = tokens?._blend || ['screen', 'multiply']
412
- const context: ColorTokenContext = {hue, scheme}
413
-
414
- return {
415
- _blend: blendMode[scheme === 'light' ? 0 : 1],
416
- accent: {
417
- fg: _color(context, tokens?.accent?.fg),
418
- },
419
- avatar: buildAvatarColorTheme({scheme}, tokens),
420
- badge: buildBadgeColorTheme(tokens?.badge, {scheme}, config),
421
- bg: _color(context, tokens?.bg),
422
- border: _color(context, tokens?.border),
423
- code: {
424
- bg: _color(context, tokens?.code?.bg),
425
- fg: _color(context, tokens?.code?.fg),
426
- },
427
- fg: _color(context, tokens?.fg),
428
- icon: _color(context, tokens?.icon),
429
- muted: {
430
- bg: _color(context, tokens?.muted?.bg),
431
- fg: _color(context, tokens?.muted?.fg),
432
- },
433
- kbd: {
434
- bg: _color(context, tokens?.kbd?.bg),
435
- fg: _color(context, tokens?.kbd?.fg),
436
- border: _color(context, tokens?.kbd?.border),
437
- },
438
- link: {
439
- fg: _color(context, tokens?.link?.fg),
440
- },
441
- skeleton: {
442
- from: _color(context, tokens?.skeleton?.from),
443
- to: _color(context, tokens?.skeleton?.to),
444
- },
445
- }
446
- }
447
-
448
- function buildSyntaxColorTheme(
449
- options: {scheme: ThemeColorSchemeKey},
450
- config?: ThemeConfig,
451
- ): ThemeColorSyntax {
452
- const {scheme} = options
453
- const tokens = config?.color?.syntax
454
- const context: ColorTokenContext = {hue: 'gray', scheme}
455
-
456
- return {
457
- atrule: _color(context, tokens?.atrule),
458
- attrName: _color(context, tokens?.attrName),
459
- attrValue: _color(context, tokens?.attrValue),
460
- attribute: _color(context, tokens?.attribute),
461
- boolean: _color(context, tokens?.boolean),
462
- builtin: _color(context, tokens?.builtin),
463
- cdata: _color(context, tokens?.cdata),
464
- char: _color(context, tokens?.char),
465
- class: _color(context, tokens?.class),
466
- className: _color(context, tokens?.className),
467
- comment: _color(context, tokens?.comment),
468
- constant: _color(context, tokens?.constant),
469
- deleted: _color(context, tokens?.deleted),
470
- doctype: _color(context, tokens?.doctype),
471
- entity: _color(context, tokens?.entity),
472
- function: _color(context, tokens?.function),
473
- hexcode: _color(context, tokens?.hexcode),
474
- id: _color(context, tokens?.id),
475
- important: _color(context, tokens?.important),
476
- inserted: _color(context, tokens?.inserted),
477
- keyword: _color(context, tokens?.keyword),
478
- number: _color(context, tokens?.number),
479
- operator: _color(context, tokens?.operator),
480
- prolog: _color(context, tokens?.prolog),
481
- property: _color(context, tokens?.property),
482
- pseudoClass: _color(context, tokens?.pseudoClass),
483
- pseudoElement: _color(context, tokens?.pseudoElement),
484
- punctuation: _color(context, tokens?.punctuation),
485
- regex: _color(context, tokens?.regex),
486
- selector: _color(context, tokens?.selector),
487
- string: _color(context, tokens?.string),
488
- symbol: _color(context, tokens?.symbol),
489
- tag: _color(context, tokens?.tag),
490
- unit: _color(context, tokens?.unit),
491
- url: _color(context, tokens?.url),
492
- variable: _color(context, tokens?.variable),
493
- }
494
- }
@@ -1,89 +0,0 @@
1
- import {expect, test} from 'vitest'
2
-
3
- import {defaultColorPalette} from '../defaults/colorPalette'
4
- import {buildTheme} from './buildTheme'
5
-
6
- test('build theme', () => {
7
- const rootTheme = buildTheme({
8
- palette: {
9
- ...defaultColorPalette,
10
- black: '#000000',
11
- white: '#ffffff',
12
- },
13
- color: {
14
- base: {
15
- default: {
16
- bg: ['white/0', 'black/0'],
17
- fg: ['black', 'white'],
18
- },
19
- },
20
- button: {
21
- ghost: {
22
- default: {
23
- '*': {
24
- border: ['white/0', 'black/0'],
25
- },
26
- },
27
- },
28
- },
29
- },
30
- })
31
-
32
- const {color} = rootTheme.v2!
33
-
34
- expect({
35
- light: {
36
- bg: color.light.default.bg,
37
- fg: color.light.default.fg,
38
- default: {
39
- button: {
40
- ghost: {
41
- enabled: {
42
- border: color.light.default.button.ghost.default.enabled.border,
43
- },
44
- },
45
- },
46
- },
47
- },
48
- dark: {
49
- bg: color.dark.default.bg,
50
- fg: color.dark.default.fg,
51
- default: {
52
- button: {
53
- ghost: {
54
- enabled: {
55
- border: color.dark.default.button.ghost.default.enabled.border,
56
- },
57
- },
58
- },
59
- },
60
- },
61
- }).toEqual({
62
- light: {
63
- bg: 'rgba(255,255,255,0)',
64
- fg: '#000000',
65
- default: {
66
- button: {
67
- ghost: {
68
- enabled: {
69
- border: 'rgba(246,246,248,0)',
70
- },
71
- },
72
- },
73
- },
74
- },
75
- dark: {
76
- bg: 'rgba(0,0,0,0)',
77
- fg: '#ffffff',
78
- default: {
79
- button: {
80
- ghost: {
81
- enabled: {
82
- border: 'rgba(19,20,27,0)',
83
- },
84
- },
85
- },
86
- },
87
- },
88
- })
89
- })
@@ -1,37 +0,0 @@
1
- import type {RootTheme} from '../../types'
2
- import {v2_v0} from '../../versioning/v2_v0'
3
- import type {ThemeConfig} from '../config'
4
- import {defaultThemeConfig} from '../defaults/config'
5
- import {defaultThemeFonts} from '../defaults/fonts'
6
- import type {RootTheme_v2} from '../theme'
7
- import {buildColorTheme} from './buildColorTheme'
8
- import {renderThemeColorSchemes} from './renderColorTheme'
9
-
10
- /** @internal */
11
- export function buildTheme(config?: ThemeConfig): RootTheme {
12
- const colorTheme = buildColorTheme(config)
13
-
14
- const v2: RootTheme_v2 = {
15
- _version: 2,
16
- avatar: config?.avatar ?? defaultThemeConfig.avatar,
17
- button: config?.button ?? defaultThemeConfig.button,
18
- card: config?.card ?? defaultThemeConfig.card,
19
- // How colors are generated:
20
- // 1. Merge custom tokens with default tokens
21
- // 2. Generate tree of color keys (gray/500, black, white, etc.)
22
- // 3. Apply mixing and render to hex values
23
- // render(build(mergeWithDefaults()))
24
- color: renderThemeColorSchemes(colorTheme, config),
25
- container: config?.container ?? defaultThemeConfig.container,
26
- font: config?.font ?? defaultThemeFonts,
27
- input: config?.input ?? defaultThemeConfig.input,
28
- layer: config?.layer ?? defaultThemeConfig.layer,
29
- media: config?.media ?? defaultThemeConfig.media,
30
- radius: config?.radius ?? defaultThemeConfig.radius,
31
- shadow: config?.shadow ?? defaultThemeConfig.shadow,
32
- space: config?.space ?? defaultThemeConfig.space,
33
- style: config?.style ?? defaultThemeConfig.style,
34
- }
35
-
36
- return v2_v0(v2)
37
- }
@@ -1,19 +0,0 @@
1
- import {parseTokenValue, type ThemeColorTokenValue} from '../../config'
2
- import {compileColorTokenValue} from './compileColorToken'
3
- import type {ColorTokenContext} from './types'
4
-
5
- const DEFAULT_COLOR_TOKEN_VALUE: ThemeColorTokenValue = ['500', '500']
6
-
7
- export function resolveColorTokenValue(
8
- context: ColorTokenContext,
9
- value: ThemeColorTokenValue = DEFAULT_COLOR_TOKEN_VALUE,
10
- ): string {
11
- const {hue, scheme} = context
12
- const node = parseTokenValue(value[scheme === 'light' ? 0 : 1])
13
-
14
- if (!node || node.type !== 'color') {
15
- throw new Error(`Invalid color token: ${value[0]}`)
16
- }
17
-
18
- return compileColorTokenValue({...node, hue: node.hue || hue})
19
- }
@@ -1,21 +0,0 @@
1
- import type {TokenColorValueNode} from '../../config'
2
-
3
- export function compileColorTokenValue(node: TokenColorValueNode): string {
4
- let key = ''
5
-
6
- if (node.key === 'black' || node.key === 'white') {
7
- key = node.key
8
- } else {
9
- key = `${node.hue}/${node.tint}`
10
- }
11
-
12
- if (node.mix !== undefined) {
13
- return `${key} ${node.mix * 100}%`
14
- }
15
-
16
- if (node.opacity !== undefined) {
17
- key += `/${node.opacity}`
18
- }
19
-
20
- return key
21
- }
@@ -1,2 +0,0 @@
1
- export * from './colorToken'
2
- export * from './types'
@@ -1,6 +0,0 @@
1
- import type {Hue} from '../../../v3'
2
-
3
- export interface ColorTokenContext {
4
- hue: Hue
5
- scheme: 'light' | 'dark'
6
- }
@@ -1,3 +0,0 @@
1
- export * from './_deprecated/color'
2
- export * from './buildTheme'
3
- export * from './lib/color-fns'
@@ -1,3 +0,0 @@
1
- export * from './mix'
2
- export * from './multiply'
3
- export * from './screen'
@@ -1,21 +0,0 @@
1
- import type {RGB, RGBA} from '../types'
2
-
3
- function mixChannel(b: number, s: number, weight: number) {
4
- const diff = s - b
5
-
6
- const delta = diff * weight
7
-
8
- return b + delta
9
- }
10
-
11
- /**
12
- * Apply the \`mix\` blend mode
13
- * @internal
14
- */
15
- export function mix(b: RGB | RGBA, s: RGB | RGBA, weight: number): RGB {
16
- return {
17
- r: mixChannel(b.r, s.r, weight),
18
- g: mixChannel(b.g, s.g, weight),
19
- b: mixChannel(b.b, s.b, weight),
20
- }
21
- }