@sanity/ui 3.0.0-static.17 → 3.0.0-static.19

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 (542) hide show
  1. package/dist/_chunks-cjs/_visual-editing.cjs +138 -137
  2. package/dist/_chunks-cjs/_visual-editing.cjs.map +1 -1
  3. package/dist/_chunks-cjs/buildCommand.cjs +21 -22
  4. package/dist/_chunks-cjs/buildCommand.cjs.map +1 -1
  5. package/dist/_chunks-es/_visual-editing.js +139 -138
  6. package/dist/_chunks-es/_visual-editing.js.map +1 -1
  7. package/dist/_visual-editing.d.cts +12 -22
  8. package/dist/_visual-editing.d.ts +12 -22
  9. package/dist/cli.cjs +1 -1
  10. package/dist/css.cjs +1589 -2016
  11. package/dist/css.cjs.map +1 -1
  12. package/dist/css.d.cts +9427 -874
  13. package/dist/css.d.ts +9427 -874
  14. package/dist/css.js +1591 -2018
  15. package/dist/css.js.map +1 -1
  16. package/dist/index.cjs +28 -40
  17. package/dist/index.cjs.map +1 -1
  18. package/dist/index.d.cts +26 -23
  19. package/dist/index.d.ts +26 -23
  20. package/dist/index.js +30 -42
  21. package/dist/index.js.map +1 -1
  22. package/dist/theme.cjs +2749 -2756
  23. package/dist/theme.cjs.map +1 -1
  24. package/dist/theme.d.cts +242 -161
  25. package/dist/theme.d.ts +242 -161
  26. package/dist/theme.js +2750 -2757
  27. package/dist/theme.js.map +1 -1
  28. package/dist/ui-system.css +15719 -16097
  29. package/dist/ui-system.min.css +1 -1
  30. package/dist/ui-theme.css +850 -4568
  31. package/dist/ui-theme.min.css +1 -1
  32. package/dist/ui.css +16569 -20772
  33. package/dist/ui.min.css +1 -1
  34. package/package.json +10 -15
  35. package/src/cli/buildCommand.ts +13 -30
  36. package/src/core/StyleTags.tsx +4 -12
  37. package/src/core/_compat/styles/_responsive.ts +1 -1
  38. package/src/core/_compat/theme/theme.test.tsx +4 -5
  39. package/src/core/_compat/theme/themeColorProvider.tsx +2 -2
  40. package/src/core/_compat/theme/themeContext.ts +2 -2
  41. package/src/core/_compat/theme/themeProvider.tsx +2 -2
  42. package/src/core/_compat/theme/types.ts +1 -1
  43. package/src/core/_compat/theme/useRootTheme.ts +1 -1
  44. package/src/core/_compat/theme/useTheme.ts +1 -1
  45. package/src/core/components/autocomplete/__workshop__/async.tsx +2 -2
  46. package/src/core/components/autocomplete/__workshop__/constrainedHeight.tsx +2 -2
  47. package/src/core/components/autocomplete/__workshop__/custom.tsx +11 -11
  48. package/src/core/components/autocomplete/__workshop__/example.tsx +6 -7
  49. package/src/core/components/autocomplete/__workshop__/focusAndBlur.tsx +2 -2
  50. package/src/core/components/autocomplete/__workshop__/fullscreen.tsx +1 -1
  51. package/src/core/components/autocomplete/autocomplete.tsx +5 -5
  52. package/src/core/components/autocomplete/autocompleteOption.tsx +1 -1
  53. package/src/core/components/autocomplete/autocompleteReducer.ts +1 -1
  54. package/src/core/components/autocomplete/constants.ts +1 -1
  55. package/src/core/components/autocomplete/types.ts +1 -1
  56. package/src/core/components/breadcrumbs/__workshop__/example.tsx +1 -1
  57. package/src/core/components/breadcrumbs/breadcrumbs.tsx +7 -7
  58. package/src/core/components/dialog/__workshop__/activate.tsx +4 -4
  59. package/src/core/components/dialog/__workshop__/position.tsx +1 -1
  60. package/src/core/components/dialog/__workshop__/props.tsx +1 -1
  61. package/src/core/components/dialog/__workshop__/wrapped.tsx +2 -2
  62. package/src/core/components/dialog/dialog.tsx +15 -8
  63. package/src/core/components/dialog/dialogCard.tsx +18 -3
  64. package/src/core/components/dialog/dialogContext.ts +1 -1
  65. package/src/core/components/dialog/dialogProvider.tsx +3 -3
  66. package/src/core/components/dialog/useDialog.ts +1 -1
  67. package/src/core/components/hotkeys/hotkeys.tsx +4 -4
  68. package/src/core/components/menu/__workshop__/closableMenuButton.tsx +5 -4
  69. package/src/core/components/menu/__workshop__/constrainedInBoundary.tsx +2 -2
  70. package/src/core/components/menu/__workshop__/customMenuItem.tsx +3 -3
  71. package/src/core/components/menu/__workshop__/disableFocusOnClose.tsx +1 -1
  72. package/src/core/components/menu/__workshop__/groups.tsx +2 -2
  73. package/src/core/components/menu/__workshop__/menuButton.tsx +1 -1
  74. package/src/core/components/menu/__workshop__/menuGroupRight.tsx +1 -1
  75. package/src/core/components/menu/__workshop__/nestedMenu.tsx +1 -1
  76. package/src/core/components/menu/__workshop__/onCloseMenuButton.tsx +13 -4
  77. package/src/core/components/menu/__workshop__/selectedItem.tsx +2 -2
  78. package/src/core/components/menu/__workshop__/withoutArrow.tsx +1 -1
  79. package/src/core/components/menu/menu.test.tsx +6 -7
  80. package/src/core/components/menu/menu.tsx +2 -2
  81. package/src/core/components/menu/menuButton.tsx +9 -9
  82. package/src/core/components/menu/menuContext.ts +1 -1
  83. package/src/core/components/menu/menuDivider.tsx +3 -3
  84. package/src/core/components/menu/menuGroup.tsx +9 -9
  85. package/src/core/components/menu/menuItem.tsx +9 -6
  86. package/src/core/components/menu/useMenu.ts +1 -1
  87. package/src/core/components/menu/useMenuController.ts +4 -4
  88. package/src/core/components/skeleton/__workshop__/delay.tsx +1 -1
  89. package/src/core/components/skeleton/__workshop__/skeleton.tsx +2 -2
  90. package/src/core/components/skeleton/codeSkeleton.tsx +5 -5
  91. package/src/core/components/skeleton/headingSkeleton.tsx +5 -5
  92. package/src/core/components/skeleton/labelSkeleton.tsx +5 -5
  93. package/src/core/components/skeleton/skeleton.tsx +4 -4
  94. package/src/core/components/skeleton/textSkeleton.tsx +5 -5
  95. package/src/core/components/tab/__workshop__/example.tsx +1 -1
  96. package/src/core/components/tab/tab.tsx +7 -7
  97. package/src/core/components/tab/tabList.tsx +14 -7
  98. package/src/core/components/tab/tabPanel.tsx +10 -7
  99. package/src/core/components/toast/__workshop__/hook.tsx +1 -1
  100. package/src/core/components/toast/toast.test.tsx +5 -5
  101. package/src/core/components/toast/toast.tsx +6 -7
  102. package/src/core/components/toast/toastContext.ts +1 -1
  103. package/src/core/components/toast/toastLayer.tsx +2 -2
  104. package/src/core/components/toast/toastProvider.tsx +1 -1
  105. package/src/core/components/toast/types.ts +1 -1
  106. package/src/core/components/toast/useToast.ts +1 -1
  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__/tabFromElement.tsx +1 -1
  110. package/src/core/components/tree/helpers.ts +1 -1
  111. package/src/core/components/tree/tree.tsx +6 -6
  112. package/src/core/components/tree/treeContext.ts +1 -1
  113. package/src/core/components/tree/treeGroup.tsx +2 -2
  114. package/src/core/components/tree/treeItem.tsx +15 -15
  115. package/src/core/components/tree/types.ts +2 -2
  116. package/src/core/components/tree/useTree.ts +1 -1
  117. package/src/core/hooks/useClickOutside.test.tsx +15 -16
  118. package/src/core/hooks/useClickOutsideEvent.test.tsx +4 -5
  119. package/src/core/hooks/useDelayed.test.ts +6 -7
  120. package/src/core/hooks/useDelayedState.ts +1 -1
  121. package/src/core/hooks/useElementRect/__workshop__/example.tsx +1 -1
  122. package/src/core/hooks/useElementSize.ts +1 -1
  123. package/src/core/hooks/useForwardedRef.ts +1 -1
  124. package/src/core/hooks/useMediaIndex/__workshop__/test.tsx +1 -1
  125. package/src/core/hooks/useMediaIndex/useMediaIndex.test.tsx +3 -18
  126. package/src/core/hooks/useMediaIndex/useMediaIndex.ts +10 -10
  127. package/src/core/hooks/usePrefersDark.hydration.test.tsx +4 -4
  128. package/src/core/hooks/usePrefersDark.test.tsx +1 -0
  129. package/src/core/hooks/usePrefersReducedMotion.hydration.test.tsx +4 -4
  130. package/src/core/hooks/usePrefersReducedMotion.test.tsx +1 -0
  131. package/src/core/middleware/origin.ts +1 -1
  132. package/src/core/primitives/_selectable/selectable.tsx +3 -3
  133. package/src/core/primitives/avatar/__workshop__/withinButton.tsx +1 -1
  134. package/src/core/primitives/avatar/avatar.tsx +6 -6
  135. package/src/core/primitives/avatar/avatarCounter.tsx +3 -3
  136. package/src/core/primitives/avatar/avatarStack.tsx +7 -7
  137. package/src/core/primitives/avatar/types.ts +1 -3
  138. package/src/core/primitives/badge/badge.test.tsx +2 -3
  139. package/src/core/primitives/badge/badge.tsx +3 -3
  140. package/src/core/primitives/box/__workshop__/responsive.tsx +2 -1
  141. package/src/core/primitives/box/box.tsx +4 -2
  142. package/src/core/primitives/button/__workshop__/custom.tsx +2 -2
  143. package/src/core/primitives/button/__workshop__/customIcons.tsx +3 -3
  144. package/src/core/primitives/button/__workshop__/disabled.tsx +9 -9
  145. package/src/core/primitives/button/__workshop__/props.tsx +3 -4
  146. package/src/core/primitives/button/__workshop__/stacked.tsx +4 -5
  147. package/src/core/primitives/button/button.test.tsx +2 -3
  148. package/src/core/primitives/button/button.tsx +11 -6
  149. package/src/core/primitives/card/__workshop__/asButton.tsx +16 -7
  150. package/src/core/primitives/card/__workshop__/checkered.tsx +1 -1
  151. package/src/core/primitives/card/__workshop__/index.ts +1 -1
  152. package/src/core/primitives/card/__workshop__/interactive.tsx +1 -1
  153. package/src/core/primitives/card/__workshop__/listNavigation.tsx +3 -3
  154. package/src/core/primitives/card/__workshop__/props.tsx +3 -3
  155. package/src/core/primitives/card/__workshop__/selected.tsx +2 -2
  156. package/src/core/primitives/card/__workshop__/{allTones.tsx → tones.tsx} +3 -3
  157. package/src/core/primitives/card/card.tsx +4 -4
  158. package/src/core/primitives/card/cardContext.ts +2 -2
  159. package/src/core/primitives/card/cardProvider.tsx +3 -3
  160. package/src/core/primitives/card/types.ts +2 -2
  161. package/src/core/primitives/card/useCard.ts +2 -1
  162. package/src/core/primitives/checkbox/__workshop__/props.tsx +2 -0
  163. package/src/core/primitives/checkbox/__workshop__/tones.tsx +11 -20
  164. package/src/core/primitives/checkbox/checkbox.tsx +5 -7
  165. package/src/core/primitives/code/__workshop__/opticalAlignment.tsx +1 -1
  166. package/src/core/primitives/code/code.tsx +3 -3
  167. package/src/core/primitives/container/container.tsx +4 -4
  168. package/src/core/primitives/flex/flex.tsx +2 -2
  169. package/src/core/primitives/heading/__workshop__/opticalAlignment.tsx +1 -1
  170. package/src/core/primitives/heading/heading.tsx +2 -2
  171. package/src/core/primitives/inline/__workshop__/plain.tsx +1 -1
  172. package/src/core/primitives/inline/inline.tsx +2 -2
  173. package/src/core/primitives/inline/types.ts +1 -0
  174. package/src/core/primitives/kbd/kbd.tsx +5 -5
  175. package/src/core/primitives/label/label.tsx +5 -5
  176. package/src/core/primitives/popover/__workshop__/PlainStory.tsx +2 -2
  177. package/src/core/primitives/popover/__workshop__/RecursiveStory.tsx +3 -4
  178. package/src/core/primitives/popover/__workshop__/SidePanelStory.tsx +4 -4
  179. package/src/core/primitives/popover/__workshop__/TestStory.tsx +2 -3
  180. package/src/core/primitives/popover/constants.ts +1 -1
  181. package/src/core/primitives/popover/floating-ui/size.ts +2 -2
  182. package/src/core/primitives/popover/helpers.ts +1 -1
  183. package/src/core/primitives/popover/popover.tsx +1 -1
  184. package/src/core/primitives/popover/popoverLayer.tsx +4 -4
  185. package/src/core/primitives/popover/types.ts +3 -2
  186. package/src/core/primitives/radio/__workshop__/example.tsx +1 -1
  187. package/src/core/primitives/radio/radio.tsx +5 -5
  188. package/src/core/primitives/select/__workshop__/plain.tsx +15 -3
  189. package/src/core/primitives/select/__workshop__/readOnly.tsx +1 -1
  190. package/src/core/primitives/select/select.tsx +4 -10
  191. package/src/core/primitives/spinner/__workshop__/Props.tsx +1 -2
  192. package/src/core/primitives/spinner/animatedSpinnerIcon.tsx +3 -3
  193. package/src/core/primitives/spinner/spinner.tsx +3 -3
  194. package/src/core/primitives/stack/__workshop__/plain.tsx +1 -1
  195. package/src/core/primitives/stack/stack.tsx +5 -5
  196. package/src/core/primitives/switch/switch.tsx +3 -3
  197. package/src/core/primitives/text/__workshop__/colored.tsx +5 -5
  198. package/src/core/primitives/text/__workshop__/opticalAlignment.tsx +1 -1
  199. package/src/core/primitives/text/text.tsx +6 -6
  200. package/src/core/primitives/textArea/__workshop__/plain.tsx +35 -23
  201. package/src/core/primitives/textArea/textArea.tsx +14 -5
  202. package/src/core/primitives/textInput/__workshop__/customValidity.tsx +1 -1
  203. package/src/core/primitives/textInput/__workshop__/plain.tsx +9 -15
  204. package/src/core/primitives/textInput/__workshop__/states.tsx +4 -4
  205. package/src/core/primitives/textInput/__workshop__/tones.tsx +2 -2
  206. package/src/core/primitives/textInput/textInput.tsx +13 -11
  207. package/src/core/primitives/tooltip/__workshop__/customPortal.tsx +2 -2
  208. package/src/core/primitives/tooltip/__workshop__/overflowingBoundary.tsx +1 -1
  209. package/src/core/primitives/tooltip/__workshop__/props.tsx +5 -4
  210. package/src/core/primitives/tooltip/constants.ts +1 -1
  211. package/src/core/primitives/tooltip/tooltip.test.tsx +61 -60
  212. package/src/core/primitives/tooltip/tooltip.tsx +11 -6
  213. package/src/core/primitives/tooltip/tooltipDelayGroup/tooltipDelayGroupContext.tsx +1 -1
  214. package/src/core/primitives/tooltip/tooltipDelayGroup/tooltipDelayGroupProvider.tsx +3 -3
  215. package/src/core/primitives/tooltip/tooltipDelayGroup/useTooltipDelayGroup.ts +1 -1
  216. package/src/core/primitives/tooltip/tooltipLayer.tsx +4 -4
  217. package/src/core/primitives/types.ts +15 -24
  218. package/src/core/types/badge.ts +1 -1
  219. package/src/core/types/button.ts +1 -1
  220. package/src/core/types/card.ts +1 -1
  221. package/src/core/types/selectable.ts +1 -1
  222. package/src/core/utils/arrow/arrow.tsx +5 -14
  223. package/src/core/utils/boundaryElement/boundaryElement.test.tsx +5 -5
  224. package/src/core/utils/boundaryElement/boundaryElementContext.ts +1 -1
  225. package/src/core/utils/boundaryElement/boundaryElementProvider.tsx +2 -2
  226. package/src/core/utils/boundaryElement/useBoundaryElement.ts +1 -1
  227. package/src/core/utils/elementQuery/__workshop__/customMedia.tsx +15 -8
  228. package/src/core/utils/elementQuery/elementQuery.tsx +1 -1
  229. package/src/core/utils/errorBoundary.tsx +4 -4
  230. package/src/core/utils/layer/__workshop__/multipleRoots.tsx +5 -5
  231. package/src/core/utils/layer/__workshop__/nested.tsx +3 -3
  232. package/src/core/utils/layer/__workshop__/responsiveZOffset.tsx +9 -5
  233. package/src/core/utils/layer/getLayerContext.test.ts +3 -1
  234. package/src/core/utils/layer/getLayerContext.ts +1 -1
  235. package/src/core/utils/layer/layer.test.tsx +5 -5
  236. package/src/core/utils/layer/layer.tsx +2 -2
  237. package/src/core/utils/layer/layerCard.tsx +3 -3
  238. package/src/core/utils/layer/layerContext.ts +1 -1
  239. package/src/core/utils/layer/layerProvider.tsx +10 -2
  240. package/src/core/utils/layer/useLayer.ts +1 -1
  241. package/src/core/utils/portal/__workshop__/named.tsx +3 -3
  242. package/src/core/utils/portal/portal.test.tsx +5 -5
  243. package/src/core/utils/portal/portal.tsx +3 -2
  244. package/src/core/utils/portal/portalContext.ts +1 -1
  245. package/src/core/utils/portal/portalProvider.tsx +2 -2
  246. package/src/core/utils/portal/usePortal.ts +1 -1
  247. package/src/core/utils/srOnly/srOnly.tsx +3 -3
  248. package/src/core/utils/virtualList/__workshop__/infiniteList.tsx +1 -1
  249. package/src/core/utils/virtualList/virtualList.tsx +3 -3
  250. package/src/css/_assign.ts +3 -0
  251. package/src/css/_compileStyle.ts +12 -4
  252. package/src/css/_compileTheme.ts +10 -13
  253. package/src/css/_composeClassNames.ts +12 -0
  254. package/src/css/_fromEntries.ts +3 -0
  255. package/src/css/_getClassNames.ts +9 -0
  256. package/src/css/_hash.ts +9 -0
  257. package/src/css/_mergeStyles.ts +1 -1
  258. package/src/css/_resp.ts +6 -12
  259. package/src/css/_scopeClassName.ts +9 -0
  260. package/src/css/_scopeClassNames.ts +12 -0
  261. package/src/css/_system.style.ts +2 -0
  262. package/src/css/aspects/border/border.style.ts +2 -2
  263. package/src/css/aspects/border/border.ts +3 -3
  264. package/src/css/aspects/border/types.ts +1 -1
  265. package/src/css/aspects/boxSizing/boxSizing.style.ts +10 -0
  266. package/src/css/aspects/boxSizing/boxSizing.ts +8 -0
  267. package/src/css/aspects/boxSizing/index.ts +2 -0
  268. package/src/css/aspects/boxSizing/types.ts +9 -0
  269. package/src/css/aspects/display/display.style.ts +8 -8
  270. package/src/css/aspects/display/display.ts +3 -3
  271. package/src/css/aspects/display/types.ts +1 -1
  272. package/src/css/aspects/flex/flex.ts +3 -3
  273. package/src/css/aspects/flex/types.ts +1 -1
  274. package/src/css/aspects/flexItem/flex.style.ts +1 -1
  275. package/src/css/aspects/flexItem/flexItem.ts +3 -3
  276. package/src/css/aspects/flexItem/types.ts +1 -1
  277. package/src/css/aspects/font/font.style.ts +33 -22
  278. package/src/css/aspects/font/font.ts +3 -3
  279. package/src/css/aspects/font/types.ts +1 -1
  280. package/src/css/aspects/gap/gap.style.ts +2 -2
  281. package/src/css/aspects/gap/gap.ts +3 -3
  282. package/src/css/aspects/gap/types.ts +2 -2
  283. package/src/css/aspects/grid/grid.ts +3 -3
  284. package/src/css/aspects/grid/types.ts +1 -1
  285. package/src/css/aspects/gridItem/gridItem.ts +3 -3
  286. package/src/css/aspects/gridItem/types.ts +1 -1
  287. package/src/css/aspects/height/height.ts +3 -3
  288. package/src/css/aspects/index.ts +1 -0
  289. package/src/css/aspects/inset/inset.ts +3 -3
  290. package/src/css/aspects/inset/types.ts +1 -1
  291. package/src/css/aspects/margin/margin.style.ts +10 -10
  292. package/src/css/aspects/margin/margin.ts +3 -3
  293. package/src/css/aspects/margin/types.ts +1 -1
  294. package/src/css/aspects/maxWidth/maxWidth.style.ts +1 -1
  295. package/src/css/aspects/maxWidth/maxWidth.ts +4 -3
  296. package/src/css/aspects/maxWidth/types.ts +2 -2
  297. package/src/css/aspects/minWidth/minWidth.ts +4 -3
  298. package/src/css/aspects/minWidth/types.ts +1 -1
  299. package/src/css/aspects/overflow/overflow.ts +3 -3
  300. package/src/css/aspects/overflow/types.ts +1 -1
  301. package/src/css/aspects/padding/padding.style.ts +2 -5
  302. package/src/css/aspects/padding/padding.ts +3 -3
  303. package/src/css/aspects/padding/types.ts +2 -2
  304. package/src/css/aspects/pointerEvents/pointerEvents.ts +3 -3
  305. package/src/css/aspects/position/position.ts +3 -3
  306. package/src/css/aspects/position/types.ts +1 -1
  307. package/src/css/aspects/radius/radius.style.ts +1 -1
  308. package/src/css/aspects/radius/radius.ts +3 -3
  309. package/src/css/aspects/radius/types.ts +2 -2
  310. package/src/css/aspects/shadow/shadow.style.ts +7 -7
  311. package/src/css/aspects/shadow/shadow.ts +3 -3
  312. package/src/css/aspects/shadow/types.ts +2 -2
  313. package/src/css/aspects/textAlign/textAlign.style.ts +1 -1
  314. package/src/css/aspects/textAlign/textAlign.ts +3 -3
  315. package/src/css/aspects/textOverflow/textOverflow.ts +3 -3
  316. package/src/css/aspects/width/types.ts +2 -2
  317. package/src/css/aspects/width/width.style.ts +1 -1
  318. package/src/css/aspects/width/width.ts +4 -3
  319. package/src/css/components/breadcrumbs/breadcrumbs.style.ts +1 -1
  320. package/src/css/components/breadcrumbs/breadcrumbs.ts +2 -2
  321. package/src/css/components/dialog/dialog.style.ts +14 -16
  322. package/src/css/components/dialog/dialog.ts +9 -8
  323. package/src/css/components/menu/menu.style.ts +2 -2
  324. package/src/css/components/menu/menu.ts +3 -3
  325. package/src/css/components/skeleton/skeleton.style.ts +24 -17
  326. package/src/css/components/skeleton/skeleton.ts +8 -7
  327. package/src/css/components/skeleton/types.ts +4 -6
  328. package/src/css/components/toast/toast.style.ts +1 -1
  329. package/src/css/components/toast/toast.ts +6 -6
  330. package/src/css/components/tree/tree.style.ts +7 -23
  331. package/src/css/components/tree/tree.ts +2 -2
  332. package/src/css/constants.ts +1 -3
  333. package/src/css/index.ts +3 -5
  334. package/src/css/prefix/constants.ts +6 -0
  335. package/src/css/prefix/types.ts +1 -0
  336. package/src/css/primitives/_arrow/_arrow.style.ts +11 -13
  337. package/src/css/primitives/_arrow/_arrow.ts +5 -5
  338. package/src/css/primitives/_input/_input.style.ts +171 -75
  339. package/src/css/primitives/_input/input.ts +13 -10
  340. package/src/css/primitives/_input/types.ts +3 -3
  341. package/src/css/primitives/_selectable/_selectable.style.ts +5 -6
  342. package/src/css/primitives/_selectable/selectable.ts +4 -3
  343. package/src/css/primitives/_selectable/types.ts +2 -2
  344. package/src/css/primitives/avatar/avatar.style.ts +38 -39
  345. package/src/css/primitives/avatar/avatar.ts +8 -8
  346. package/src/css/primitives/avatar/types.ts +3 -3
  347. package/src/css/primitives/badge/badge.style.ts +2 -3
  348. package/src/css/primitives/badge/badge.ts +7 -3
  349. package/src/css/primitives/badge/types.ts +2 -2
  350. package/src/css/primitives/box/box.style.ts +5 -15
  351. package/src/css/primitives/box/box.ts +7 -9
  352. package/src/css/primitives/box/types.ts +3 -6
  353. package/src/css/primitives/button/button.style.ts +189 -162
  354. package/src/css/primitives/button/button.ts +11 -4
  355. package/src/css/primitives/button/types.ts +1 -1
  356. package/src/css/primitives/card/card.style.ts +102 -68
  357. package/src/css/primitives/card/card.ts +5 -7
  358. package/src/css/primitives/card/types.ts +2 -2
  359. package/src/css/primitives/checkbox/checkbox.style.ts +125 -101
  360. package/src/css/primitives/checkbox/checkbox.ts +3 -3
  361. package/src/css/primitives/code/code.style.ts +24 -26
  362. package/src/css/primitives/code/code.ts +7 -3
  363. package/src/css/primitives/code/types.ts +2 -2
  364. package/src/css/primitives/container/container.style.ts +1 -1
  365. package/src/css/primitives/container/container.ts +4 -3
  366. package/src/css/primitives/container/types.ts +2 -2
  367. package/src/css/primitives/heading/heading.style.ts +31 -23
  368. package/src/css/primitives/heading/heading.ts +10 -8
  369. package/src/css/primitives/heading/types.ts +3 -2
  370. package/src/css/primitives/kbd/kbd.style.ts +7 -7
  371. package/src/css/primitives/kbd/kbd.ts +4 -3
  372. package/src/css/primitives/kbd/types.ts +1 -1
  373. package/src/css/primitives/label/label.style.ts +27 -24
  374. package/src/css/primitives/label/label.ts +5 -8
  375. package/src/css/primitives/label/types.ts +4 -3
  376. package/src/css/primitives/popover/popover.style.ts +6 -2
  377. package/src/css/primitives/popover/popover.ts +3 -3
  378. package/src/css/primitives/radio/radio.style.ts +37 -76
  379. package/src/css/primitives/radio/radio.ts +2 -2
  380. package/src/css/primitives/select/select.style.ts +3 -3
  381. package/src/css/primitives/select/select.ts +5 -5
  382. package/src/css/primitives/select/types.ts +1 -1
  383. package/src/css/primitives/spinner/spinner.style.ts +1 -1
  384. package/src/css/primitives/spinner/spinner.ts +3 -3
  385. package/src/css/primitives/stack/stack.style.ts +6 -2
  386. package/src/css/primitives/stack/stack.ts +2 -2
  387. package/src/css/primitives/switch/switch.style.ts +47 -39
  388. package/src/css/primitives/switch/switch.ts +6 -6
  389. package/src/css/primitives/text/text.style.ts +28 -23
  390. package/src/css/primitives/text/text.ts +5 -8
  391. package/src/css/primitives/text/types.ts +2 -2
  392. package/src/css/primitives/textArea/textArea.style.ts +6 -2
  393. package/src/css/primitives/textArea/textArea.ts +4 -4
  394. package/src/css/primitives/textArea/types.ts +1 -1
  395. package/src/css/primitives/textInput/textInput.style.ts +23 -17
  396. package/src/css/primitives/textInput/textInput.ts +4 -4
  397. package/src/css/primitives/textInput/types.ts +2 -8
  398. package/src/css/primitives/token/token.style.ts +4 -4
  399. package/src/css/primitives/tooltip/tooltip.style.ts +5 -4
  400. package/src/css/primitives/tooltip/tooltip.ts +3 -3
  401. package/src/css/renderColor.ts +31 -0
  402. package/src/css/theme/index.ts +14 -0
  403. package/src/css/theme/lib/contract/buildVarContract.ts +76 -0
  404. package/src/css/theme/lib/contract/index.ts +2 -0
  405. package/src/css/theme/lib/contract/types.ts +15 -0
  406. package/src/css/theme/resolveTheme.ts +852 -0
  407. package/src/css/types.ts +26 -910
  408. package/src/css/utils/srOnly/srOnly.style.ts +1 -1
  409. package/src/css/utils/srOnly/srOnly.ts +3 -3
  410. package/src/theme/getScopedTheme.ts +4 -4
  411. package/src/theme/index.ts +0 -5
  412. package/src/theme/types.ts +4 -4
  413. package/src/theme/v0/color/_generic.ts +1 -1
  414. package/src/theme/v0/color/button.ts +1 -1
  415. package/src/theme/v0/color/card.ts +1 -1
  416. package/src/theme/v0/color/color.ts +11 -11
  417. package/src/theme/v0/color/input.ts +1 -1
  418. package/src/theme/v0/color/muted.ts +1 -1
  419. package/src/theme/v0/color/selectable.ts +1 -1
  420. package/src/theme/v0/color/solid.ts +1 -1
  421. package/src/theme/v0/color/spot.ts +1 -1
  422. package/src/theme/v0/styles.ts +1 -1
  423. package/src/theme/v0/theme.ts +7 -7
  424. package/src/theme/v2/avatar.ts +1 -1
  425. package/src/theme/{build → v2/build}/_deprecated/color/_selectable/createSelectableTones.ts +3 -3
  426. package/src/theme/{build → v2/build}/_deprecated/color/_solid/createSolidTones.ts +2 -2
  427. package/src/theme/{build → v2/build}/_deprecated/color/button/createButtonModes.ts +7 -2
  428. package/src/theme/{build → v2/build}/_deprecated/color/button/createButtonTones.ts +4 -4
  429. package/src/theme/{build → v2/build}/_deprecated/color/card/createCardStates.ts +3 -3
  430. package/src/theme/{build → v2/build}/_deprecated/color/color.test.ts +1 -1
  431. package/src/theme/{build → v2/build}/_deprecated/color/defaults.ts +1 -1
  432. package/src/theme/{build → v2/build}/_deprecated/color/factory.ts +3 -3
  433. package/src/theme/{build → v2/build}/_deprecated/color/input/createInputModes.ts +7 -2
  434. package/src/theme/{build → v2/build}/_deprecated/color/muted/createMuted.ts +2 -2
  435. package/src/theme/{build → v2/build}/_deprecated/color/spot/createSpot.ts +2 -2
  436. package/src/theme/{build → v2/build}/buildColorTheme.test.ts +3 -1
  437. package/src/theme/{build → v2/build}/buildColorTheme.ts +24 -24
  438. package/src/theme/{build → v2/build}/buildTheme.test.ts +10 -8
  439. package/src/theme/{build → v2/build}/buildTheme.ts +4 -4
  440. package/src/theme/{build → v2/build}/colorToken/colorToken.ts +2 -2
  441. package/src/theme/{build → v2/build}/colorToken/compileColorToken.ts +1 -1
  442. package/src/theme/{build → v2/build}/colorToken/types.ts +2 -2
  443. package/src/theme/{build → v2/build}/lib/color-fns/blend/mix.ts +1 -1
  444. package/src/theme/{build → v2/build}/lib/color-fns/blend/multiply.ts +1 -1
  445. package/src/theme/{build → v2/build}/lib/color-fns/blend/screen.ts +1 -1
  446. package/src/theme/{build → v2/build}/lib/color-fns/color-fns.test.ts +1 -1
  447. package/src/theme/{build → v2/build}/lib/color-fns/contrastRatio.ts +5 -2
  448. package/src/theme/{build → v2/build}/lib/color-fns/convert.ts +1 -1
  449. package/src/theme/{build → v2/build}/lib/color-fns/parse.ts +1 -1
  450. package/src/theme/{build → v2/build}/mixThemeColor.test.ts +2 -0
  451. package/src/theme/{build → v2/build}/mixThemeColor.ts +1 -1
  452. package/src/theme/{build → v2/build}/renderColorTheme.ts +27 -27
  453. package/src/theme/{build → v2/build}/renderColorValue.ts +3 -3
  454. package/src/theme/{build → v2/build}/resolveColorTokens.ts +13 -13
  455. package/src/theme/v2/color/_helpers.ts +2 -2
  456. package/src/theme/v2/color/_system.ts +1 -1
  457. package/src/theme/v2/color/avatar.ts +1 -1
  458. package/src/theme/v2/color/badge.ts +1 -1
  459. package/src/theme/v2/color/button.ts +2 -2
  460. package/src/theme/v2/color/color.ts +7 -7
  461. package/src/theme/v2/color/input.ts +5 -1
  462. package/src/theme/v2/color/selectable.ts +2 -2
  463. package/src/theme/v2/color/state.ts +4 -4
  464. package/src/theme/{config → v2/config}/helpers.ts +6 -13
  465. package/src/theme/{config → v2/config}/system.ts +11 -12
  466. package/src/theme/{config → v2/config}/tokens/color/types.ts +14 -10
  467. package/src/theme/{config → v2/config}/tokens/index.ts +0 -1
  468. package/src/theme/{config → v2/config}/tokens/parseTokenValue.test.ts +2 -0
  469. package/src/theme/{config → v2/config}/tokens/parseTokenValue.ts +2 -2
  470. package/src/theme/{config → v2/config}/tokens/types.ts +3 -3
  471. package/src/theme/{config → v2/config}/types.ts +8 -6
  472. package/src/theme/{defaults → v2/defaults}/colorPalette.ts +1 -1
  473. package/src/theme/{defaults → v2/defaults}/colorTokens.ts +1 -1
  474. package/src/theme/{defaults → v2/defaults}/config.ts +1 -1
  475. package/src/theme/{defaults → v2/defaults}/fonts.ts +1 -1
  476. package/src/theme/v2/index.ts +2 -0
  477. package/src/theme/v2/input.ts +1 -1
  478. package/src/theme/v2/theme.ts +8 -8
  479. package/src/theme/{_constants.ts → v3/_constants.ts} +6 -3
  480. package/src/theme/v3/_parseColorToken.ts +185 -0
  481. package/src/theme/v3/buildTheme_v3.ts +11 -7
  482. package/src/theme/v3/color/_constants.ts +15 -0
  483. package/src/theme/v3/color/avatar.ts +14 -0
  484. package/src/theme/v3/color/card.ts +53 -53
  485. package/src/theme/v3/color/color.ts +66 -68
  486. package/src/theme/v3/color/element.ts +8 -8
  487. package/src/theme/v3/color/index.ts +2 -2
  488. package/src/theme/v3/color/token.ts +18 -4
  489. package/src/theme/v3/color/tokens.ts +2 -2
  490. package/src/theme/v3/defaultTokens.ts +73 -85
  491. package/src/theme/v3/index.ts +3 -0
  492. package/src/theme/v3/palette/index.ts +2 -0
  493. package/src/theme/v3/resolveTokens.ts +65 -65
  494. package/src/theme/v3/tokens.ts +2 -2
  495. package/src/theme/v3/types.ts +61 -7
  496. package/src/theme/versioning/getTheme_v2.ts +3 -3
  497. package/src/theme/versioning/is_v0.ts +2 -2
  498. package/src/theme/versioning/is_v2.ts +2 -2
  499. package/src/theme/versioning/themeColor_v0_v2.ts +2 -2
  500. package/src/theme/versioning/themeColor_v2_v2_9.ts +1 -1
  501. package/src/theme/versioning/themeColor_v3_v2.ts +229 -52
  502. package/src/theme/versioning/v0_v2.ts +3 -3
  503. package/src/theme/versioning/v2_v0.ts +4 -4
  504. package/src/theme/versioning/v3_v2.ts +38 -38
  505. package/dist/ui-palette.css +0 -105
  506. package/dist/ui-palette.min.css +0 -1
  507. package/src/css/_comp.test.ts +0 -7
  508. package/src/css/_comp.ts +0 -11
  509. package/src/css/_compilePalette.ts +0 -32
  510. package/src/css/_compileTheme_v3.ts +0 -440
  511. package/src/css/aspects/flex/flex.style.ts +0 -30
  512. package/src/css/composeClassNames.ts +0 -19
  513. package/src/css/primitives/_selectable/__style.ts +0 -117
  514. package/src/css/primitives/checkbox/__styles.ts +0 -129
  515. package/src/css/scopeClassName.ts +0 -7
  516. package/src/css/varNames.ts +0 -607
  517. package/src/css/vars.ts +0 -520
  518. package/src/theme/_types.ts +0 -41
  519. package/src/theme/build/theme.test.ts +0 -27
  520. package/src/theme/config/tokens/parseTokenKey.test.ts +0 -64
  521. package/src/theme/config/tokens/parseTokenKey.ts +0 -67
  522. package/src/theme/v3/buildTheme_v3.test.ts +0 -40
  523. package/src/theme/v3/color/buildColor_v3.ts +0 -226
  524. package/src/theme/v3/color/parseColor.test.ts +0 -79
  525. package/src/theme/v3/color/parseColor.ts +0 -167
  526. package/src/theme/v3/color/renderColor.test.ts +0 -20
  527. package/src/theme/v3/color/renderColor.ts +0 -43
  528. /package/src/{theme/palette → css/prefix}/index.ts +0 -0
  529. /package/src/theme/{build → v2/build}/_deprecated/color/index.ts +0 -0
  530. /package/src/theme/{build → v2/build}/colorToken/index.ts +0 -0
  531. /package/src/theme/{build → v2/build}/index.ts +0 -0
  532. /package/src/theme/{build → v2/build}/lib/color-fns/blend/index.ts +0 -0
  533. /package/src/theme/{build → v2/build}/lib/color-fns/index.ts +0 -0
  534. /package/src/theme/{build → v2/build}/lib/color-fns/rgba.ts +0 -0
  535. /package/src/theme/{build → v2/build}/lib/color-fns/types.ts +0 -0
  536. /package/src/theme/{build → v2/build}/lib/isRecord.ts +0 -0
  537. /package/src/theme/{build → v2/build}/lib/utils.ts +0 -0
  538. /package/src/theme/{build → v2/build}/merge.ts +0 -0
  539. /package/src/theme/{config → v2/config}/index.ts +0 -0
  540. /package/src/theme/{config → v2/config}/tokens/color/index.ts +0 -0
  541. /package/src/theme/{palette → v3/palette}/constants.ts +0 -0
  542. /package/src/theme/{palette → v3/palette}/types.ts +0 -0
package/src/css/primitives/button/button.style.ts CHANGED
@@ -1,40 +1,38 @@
1
1
  import {THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
2
2
 
3
- import {Style, StyleRules} from '../../types'
4
- import {varNames} from '../../varNames'
5
- import {vars} from '../../vars'
3
+ import {varNames, vars} from '../../theme'
4
+ import type {Style, StyleRules} from '../../types'
6
5
 
7
6
  const primitive: StyleRules = {
8
7
  '.button': {
9
- 'WebkitFontSmoothing': 'inherit',
10
- 'appearance': 'none',
11
- 'font': 'inherit',
12
- 'outline': 'none',
13
- 'userSelect': 'none',
14
- 'textDecoration': 'none',
15
- 'border': 0,
16
- 'boxSizing': 'border-box',
17
- 'padding': 0,
18
- 'overflow': 'hidden',
19
- 'margin': 0,
20
- 'textAlign': 'left',
21
- 'position': 'relative',
22
- 'verticalAlign': 'top',
23
- 'backgroundColor': vars.color.bg,
24
- 'color': vars.color.fg,
25
- 'boxShadow': 'var(--button-box-shadow)',
26
- 'alignItems': 'center',
27
- // 'justifyContent': 'center',
28
-
29
- '@nest': {
8
+ WebkitFontSmoothing: 'inherit',
9
+ appearance: 'none',
10
+ font: 'inherit',
11
+ outline: 'none',
12
+ userSelect: 'none',
13
+ textDecoration: 'none',
14
+ border: 0,
15
+ boxSizing: 'border-box',
16
+ padding: 0,
17
+ overflow: 'hidden',
18
+ margin: 0,
19
+ textAlign: 'left',
20
+ position: 'relative',
21
+ verticalAlign: 'top',
22
+ backgroundColor: vars.color.bg,
23
+ color: vars.color.fg,
24
+ boxShadow: vars.button.boxShadow,
25
+ alignItems: 'center',
26
+
27
+ nest: {
30
28
  '&::-moz-focus-inner': {
31
29
  border: 0,
32
30
  padding: 0,
33
31
  },
34
32
 
35
33
  '&:focus': {
36
- outline: 'var(--button-focus-ring-width) solid var(--color-focus-ring)',
37
- outlineOffset: 'var(--button-focus-ring-offset)',
34
+ outline: `${vars.button.focusRing.width} solid ${vars.color.focusRing}`,
35
+ outlineOffset: vars.button.focusRing.offset,
38
36
  },
39
37
 
40
38
  '&:focus:not(:focus-visible)': {
@@ -62,184 +60,213 @@ for (const tone of THEME_COLOR_STATE_TONES) {
62
60
 
63
61
  // mode: default
64
62
  primitive[`.button[data-mode="default"][data-tone="${tone}"]`] = {
65
- [varNames.color.bg]: solid.bg[0],
66
- [varNames.color.border]: solid.border[1],
67
- [varNames.color.code.bg]: solid.bg[1],
68
- [varNames.color.code.fg]: solid.fg[4],
69
- [varNames.color.fg]: solid.fg[0],
70
- [varNames.color.muted.bg]: solid.bg[1],
71
- [varNames.color.muted.fg]: solid.fg[4],
72
- '--button-box-shadow': 'none',
73
-
74
- '@nest': {
63
+ vars: {
64
+ [varNames.color.bg]: solid.bg[0],
65
+ [varNames.color.border]: solid.border[1],
66
+ [varNames.color.code.bg]: solid.bg[1],
67
+ [varNames.color.code.fg]: solid.fg[4],
68
+ [varNames.color.fg]: solid.fg[0],
69
+ [varNames.color.muted.bg]: solid.bg[1],
70
+ [varNames.color.muted.fg]: solid.fg[4],
71
+ [varNames.button.boxShadow]: 'none',
72
+ },
73
+
74
+ nest: {
75
75
  '&:not([data-disabled]):hover': {
76
- [varNames.color.bg]: solid.bg[1],
77
- [varNames.color.border]: solid.border[2],
78
- [varNames.color.code.bg]: solid.bg[2],
79
- [varNames.color.code.fg]: solid.fg[4],
80
- [varNames.color.fg]: solid.fg[0],
81
- [varNames.color.muted.bg]: solid.bg[2],
82
- [varNames.color.muted.fg]: solid.fg[4],
76
+ vars: {
77
+ [varNames.color.bg]: solid.bg[1],
78
+ [varNames.color.border]: solid.border[2],
79
+ [varNames.color.code.bg]: solid.bg[2],
80
+ [varNames.color.code.fg]: solid.fg[4],
81
+ [varNames.color.fg]: solid.fg[0],
82
+ [varNames.color.muted.bg]: solid.bg[2],
83
+ [varNames.color.muted.fg]: solid.fg[4],
84
+ },
83
85
  },
84
86
 
85
87
  '&:not([data-disabled]):active': {
86
- [varNames.color.bg]: solid.bg[2],
87
- [varNames.color.border]: solid.border[3],
88
- [varNames.color.code.bg]: solid.bg[3],
89
- [varNames.color.code.fg]: solid.fg[4],
90
- [varNames.color.fg]: solid.fg[0],
91
- [varNames.color.muted.bg]: solid.bg[3],
92
- [varNames.color.muted.fg]: solid.fg[4],
88
+ vars: {
89
+ [varNames.color.bg]: solid.bg[2],
90
+ [varNames.color.border]: solid.border[3],
91
+ [varNames.color.code.bg]: solid.bg[3],
92
+ [varNames.color.code.fg]: solid.fg[4],
93
+ [varNames.color.fg]: solid.fg[0],
94
+ [varNames.color.muted.bg]: solid.bg[3],
95
+ [varNames.color.muted.fg]: solid.fg[4],
96
+ },
93
97
  },
94
98
 
95
99
  '&:not([data-disabled])[data-selected]': {
96
- [varNames.color.bg]: solid.bg[2],
97
- [varNames.color.border]: solid.border[3],
98
- [varNames.color.code.bg]: solid.bg[3],
99
- [varNames.color.code.fg]: solid.fg[4],
100
- [varNames.color.fg]: solid.fg[0],
101
- [varNames.color.muted.bg]: solid.bg[3],
102
- [varNames.color.muted.fg]: solid.fg[4],
100
+ vars: {
101
+ [varNames.color.bg]: solid.bg[2],
102
+ [varNames.color.border]: solid.border[3],
103
+ [varNames.color.code.bg]: solid.bg[3],
104
+ [varNames.color.code.fg]: solid.fg[4],
105
+ [varNames.color.fg]: solid.fg[0],
106
+ [varNames.color.muted.bg]: solid.bg[3],
107
+ [varNames.color.muted.fg]: solid.fg[4],
108
+ },
103
109
  },
104
110
 
105
111
  '&[data-disabled]': {
106
- [varNames.color.avatar.gray.bg]: vars.color.tinted.default.bg[3],
107
- [varNames.color.avatar.blue.bg]: vars.color.tinted.default.bg[3],
108
- [varNames.color.avatar.purple.bg]: vars.color.tinted.default.bg[3],
109
- [varNames.color.avatar.magenta.bg]: vars.color.tinted.default.bg[3],
110
- [varNames.color.avatar.red.bg]: vars.color.tinted.default.bg[3],
111
- [varNames.color.avatar.orange.bg]: vars.color.tinted.default.bg[3],
112
- [varNames.color.avatar.yellow.bg]: vars.color.tinted.default.bg[3],
113
- [varNames.color.avatar.green.bg]: vars.color.tinted.default.bg[3],
114
- [varNames.color.avatar.cyan.bg]: vars.color.tinted.default.bg[3],
115
- [varNames.color.bg]: vars.color.tinted.default.bg[1],
116
- [varNames.color.border]: vars.color.tinted.default.border[1],
117
- [varNames.color.code.bg]: vars.color.tinted.default.bg[2],
118
- [varNames.color.code.fg]: vars.color.tinted.default.border[4],
119
- [varNames.color.fg]: vars.color.tinted.default.border[4],
120
- [varNames.color.muted.bg]: vars.color.tinted.default.bg[2],
121
- [varNames.color.muted.fg]: vars.color.tinted.default.border[4],
112
+ vars: {
113
+ [varNames.color.avatar.blue.bg]: vars.color.tinted.default.bg[3],
114
+ [varNames.color.avatar.purple.bg]: vars.color.tinted.default.bg[3],
115
+ [varNames.color.avatar.magenta.bg]: vars.color.tinted.default.bg[3],
116
+ [varNames.color.avatar.red.bg]: vars.color.tinted.default.bg[3],
117
+ [varNames.color.avatar.orange.bg]: vars.color.tinted.default.bg[3],
118
+ [varNames.color.avatar.yellow.bg]: vars.color.tinted.default.bg[3],
119
+ [varNames.color.avatar.green.bg]: vars.color.tinted.default.bg[3],
120
+ [varNames.color.avatar.cyan.bg]: vars.color.tinted.default.bg[3],
121
+ [varNames.color.bg]: vars.color.tinted.default.bg[1],
122
+ [varNames.color.border]: vars.color.tinted.default.border[1],
123
+ [varNames.color.code.bg]: vars.color.tinted.default.bg[2],
124
+ [varNames.color.code.fg]: vars.color.tinted.default.border[4],
125
+ [varNames.color.fg]: vars.color.tinted.default.border[4],
126
+ [varNames.color.muted.bg]: vars.color.tinted.default.bg[2],
127
+ [varNames.color.muted.fg]: vars.color.tinted.default.border[4],
128
+ },
122
129
  },
123
130
  },
124
131
  }
125
132
 
126
133
  // mode: ghost
127
134
  primitive[`.button[data-mode="ghost"][data-tone="${tone}"]`] = {
128
- [varNames.color.bg]: tinted.bg[1],
129
- [varNames.color.border]: tinted.border[1],
130
- [varNames.color.fg]: tinted.fg[2],
131
- [varNames.color.code.bg]: tinted.bg[2],
132
- [varNames.color.code.fg]: tinted.fg[4],
133
- [varNames.color.muted.bg]: tinted.bg[2],
134
- [varNames.color.muted.fg]: tinted.fg[4],
135
- '--button-box-shadow': `inset 0 0 0 var(--button-border-width) var(--color-border)`,
136
-
137
- '@nest': {
135
+ vars: {
136
+ [varNames.color.bg]: tinted.bg[1],
137
+ [varNames.color.border]: tinted.border[1],
138
+ [varNames.color.fg]: tinted.fg[2],
139
+ [varNames.color.code.bg]: tinted.bg[2],
140
+ [varNames.color.code.fg]: tinted.fg[4],
141
+ [varNames.color.muted.bg]: tinted.bg[2],
142
+ [varNames.color.muted.fg]: tinted.fg[4],
143
+ [varNames.button.boxShadow]: `inset 0 0 0 ${vars.button.border.width} ${vars.color.border}`,
144
+ },
145
+
146
+ nest: {
138
147
  '&:not([data-disabled]):hover': {
139
- [varNames.color.bg]: tinted.bg[2],
140
- [varNames.color.border]: tinted.border[2],
141
- [varNames.color.code.bg]: tinted.bg[3],
142
- [varNames.color.code.fg]: tinted.fg[3],
143
- [varNames.color.fg]: tinted.fg[1],
144
- [varNames.color.muted.bg]: tinted.bg[3],
145
- [varNames.color.muted.fg]: tinted.fg[3],
148
+ vars: {
149
+ [varNames.color.bg]: tinted.bg[2],
150
+ [varNames.color.border]: tinted.border[2],
151
+ [varNames.color.code.bg]: tinted.bg[3],
152
+ [varNames.color.code.fg]: tinted.fg[3],
153
+ [varNames.color.fg]: tinted.fg[1],
154
+ [varNames.color.muted.bg]: tinted.bg[3],
155
+ [varNames.color.muted.fg]: tinted.fg[3],
156
+ },
146
157
  },
147
158
 
148
159
  '&:not([data-disabled]):active': {
149
- [varNames.color.bg]: tinted.bg[3],
150
- [varNames.color.border]: tinted.border[3],
151
- [varNames.color.code.bg]: tinted.bg[4],
152
- [varNames.color.code.fg]: tinted.fg[3],
153
- [varNames.color.fg]: tinted.fg[1],
154
- [varNames.color.muted.bg]: tinted.bg[4],
155
- [varNames.color.muted.fg]: tinted.fg[3],
156
- '--button-box-shadow': `inset 0 0 0 var(--button-border-width) var(--color-border)`,
160
+ vars: {
161
+ [varNames.color.bg]: tinted.bg[3],
162
+ [varNames.color.border]: tinted.border[3],
163
+ [varNames.color.code.bg]: tinted.bg[4],
164
+ [varNames.color.code.fg]: tinted.fg[3],
165
+ [varNames.color.fg]: tinted.fg[1],
166
+ [varNames.color.muted.bg]: tinted.bg[4],
167
+ [varNames.color.muted.fg]: tinted.fg[3],
168
+ [varNames.button.boxShadow]:
169
+ `inset 0 0 0 ${vars.button.border.width} ${vars.color.border}`,
170
+ },
157
171
  },
158
172
 
159
173
  '&:not([data-disabled])[data-selected]': {
160
- [varNames.color.bg]: tinted.bg[3],
161
- [varNames.color.border]: tinted.border[3],
162
- [varNames.color.code.bg]: tinted.bg[4],
163
- [varNames.color.code.fg]: tinted.fg[3],
164
- [varNames.color.fg]: tinted.fg[1],
165
- [varNames.color.muted.bg]: tinted.bg[4],
166
- [varNames.color.muted.fg]: tinted.fg[3],
167
- '--button-box-shadow': `inset 0 0 0 var(--button-border-width) var(--color-border)`,
174
+ vars: {
175
+ [varNames.color.bg]: tinted.bg[3],
176
+ [varNames.color.border]: tinted.border[3],
177
+ [varNames.color.code.bg]: tinted.bg[4],
178
+ [varNames.color.code.fg]: tinted.fg[3],
179
+ [varNames.color.fg]: tinted.fg[1],
180
+ [varNames.color.muted.bg]: tinted.bg[4],
181
+ [varNames.color.muted.fg]: tinted.fg[3],
182
+ [varNames.button.boxShadow]:
183
+ `inset 0 0 0 ${vars.button.border.width} ${vars.color.border}`,
184
+ },
168
185
  },
169
186
 
170
187
  '&[data-disabled]': {
171
- [varNames.color.avatar.gray.bg]: vars.color.tinted.default.bg[2],
172
- [varNames.color.avatar.blue.bg]: vars.color.tinted.default.bg[2],
173
- [varNames.color.avatar.purple.bg]: vars.color.tinted.default.bg[2],
174
- [varNames.color.avatar.magenta.bg]: vars.color.tinted.default.bg[2],
175
- [varNames.color.avatar.red.bg]: vars.color.tinted.default.bg[2],
176
- [varNames.color.avatar.orange.bg]: vars.color.tinted.default.bg[2],
177
- [varNames.color.avatar.yellow.bg]: vars.color.tinted.default.bg[2],
178
- [varNames.color.avatar.green.bg]: vars.color.tinted.default.bg[2],
179
- [varNames.color.avatar.cyan.bg]: vars.color.tinted.default.bg[2],
180
- [varNames.color.bg]: vars.color.tinted.default.bg[0],
181
- [varNames.color.border]: vars.color.tinted.default.border[0],
182
- [varNames.color.code.bg]: vars.color.tinted.default.bg[1],
183
- [varNames.color.code.fg]: vars.color.tinted.default.border[3],
184
- [varNames.color.fg]: vars.color.tinted.default.border[4],
185
- [varNames.color.muted.bg]: vars.color.tinted.default.bg[1],
186
- [varNames.color.muted.fg]: vars.color.tinted.default.border[3],
188
+ vars: {
189
+ [varNames.color.avatar.blue.bg]: vars.color.tinted.default.bg[2],
190
+ [varNames.color.avatar.purple.bg]: vars.color.tinted.default.bg[2],
191
+ [varNames.color.avatar.magenta.bg]: vars.color.tinted.default.bg[2],
192
+ [varNames.color.avatar.red.bg]: vars.color.tinted.default.bg[2],
193
+ [varNames.color.avatar.orange.bg]: vars.color.tinted.default.bg[2],
194
+ [varNames.color.avatar.yellow.bg]: vars.color.tinted.default.bg[2],
195
+ [varNames.color.avatar.green.bg]: vars.color.tinted.default.bg[2],
196
+ [varNames.color.avatar.cyan.bg]: vars.color.tinted.default.bg[2],
197
+ [varNames.color.bg]: vars.color.tinted.default.bg[0],
198
+ [varNames.color.border]: vars.color.tinted.default.border[0],
199
+ [varNames.color.code.bg]: vars.color.tinted.default.bg[1],
200
+ [varNames.color.code.fg]: vars.color.tinted.default.border[3],
201
+ [varNames.color.fg]: vars.color.tinted.default.border[4],
202
+ [varNames.color.muted.bg]: vars.color.tinted.default.bg[1],
203
+ [varNames.color.muted.fg]: vars.color.tinted.default.border[3],
204
+ },
187
205
  },
188
206
  },
189
207
  }
190
208
 
191
209
  // mode: bleed
192
210
  primitive[`.button[data-mode="bleed"][data-tone="${tone}"]`] = {
193
- 'boxShadow': 'none',
194
- [varNames.color.bg]: tinted.bg[0],
195
- [varNames.color.border]: tinted.border[1],
196
- [varNames.color.fg]: tinted.fg[2],
197
- [varNames.color.muted.bg]: tinted.bg[1],
198
- [varNames.color.muted.fg]: tinted.fg[4],
199
- '--button-box-shadow': 'none',
200
-
201
- '@nest': {
211
+ boxShadow: 'none',
212
+ vars: {
213
+ [varNames.color.bg]: tinted.bg[0],
214
+ [varNames.color.border]: tinted.border[1],
215
+ [varNames.color.fg]: tinted.fg[2],
216
+ [varNames.color.muted.bg]: tinted.bg[1],
217
+ [varNames.color.muted.fg]: tinted.fg[4],
218
+ [varNames.button.boxShadow]: 'none',
219
+ },
220
+
221
+ nest: {
202
222
  '&:not([data-disabled]):hover': {
203
- [varNames.color.bg]: tinted.bg[1],
204
- [varNames.color.border]: tinted.border[2],
205
- [varNames.color.fg]: tinted.fg[1],
206
- [varNames.color.muted.bg]: tinted.bg[2],
207
- [varNames.color.muted.fg]: tinted.fg[3],
223
+ vars: {
224
+ [varNames.color.bg]: tinted.bg[1],
225
+ [varNames.color.border]: tinted.border[2],
226
+ [varNames.color.fg]: tinted.fg[1],
227
+ [varNames.color.muted.bg]: tinted.bg[2],
228
+ [varNames.color.muted.fg]: tinted.fg[3],
229
+ },
208
230
  },
209
231
 
210
232
  '&:not([data-disabled]):active': {
211
- [varNames.color.bg]: tinted.bg[2],
212
- [varNames.color.border]: tinted.border[3],
213
- [varNames.color.fg]: tinted.fg[1],
214
- [varNames.color.muted.bg]: tinted.bg[3],
215
- [varNames.color.muted.fg]: tinted.fg[3],
233
+ vars: {
234
+ [varNames.color.bg]: tinted.bg[2],
235
+ [varNames.color.border]: tinted.border[3],
236
+ [varNames.color.fg]: tinted.fg[1],
237
+ [varNames.color.muted.bg]: tinted.bg[3],
238
+ [varNames.color.muted.fg]: tinted.fg[3],
239
+ },
216
240
  },
217
241
 
218
242
  '&:not([data-disabled])[data-selected]': {
219
- [varNames.color.bg]: tinted.bg[2],
220
- [varNames.color.border]: tinted.border[3],
221
- [varNames.color.fg]: tinted.fg[1],
222
- [varNames.color.muted.bg]: tinted.bg[3],
223
- [varNames.color.muted.fg]: tinted.fg[3],
243
+ vars: {
244
+ [varNames.color.bg]: tinted.bg[2],
245
+ [varNames.color.border]: tinted.border[3],
246
+ [varNames.color.fg]: tinted.fg[1],
247
+ [varNames.color.muted.bg]: tinted.bg[3],
248
+ [varNames.color.muted.fg]: tinted.fg[3],
249
+ },
224
250
  },
225
251
 
226
252
  '&[data-disabled]': {
227
- [varNames.color.avatar.gray.bg]: vars.color.tinted.default.bg[2],
228
- [varNames.color.avatar.blue.bg]: vars.color.tinted.default.bg[2],
229
- [varNames.color.avatar.purple.bg]: vars.color.tinted.default.bg[2],
230
- [varNames.color.avatar.magenta.bg]: vars.color.tinted.default.bg[2],
231
- [varNames.color.avatar.red.bg]: vars.color.tinted.default.bg[2],
232
- [varNames.color.avatar.orange.bg]: vars.color.tinted.default.bg[2],
233
- [varNames.color.avatar.yellow.bg]: vars.color.tinted.default.bg[2],
234
- [varNames.color.avatar.green.bg]: vars.color.tinted.default.bg[2],
235
- [varNames.color.avatar.cyan.bg]: vars.color.tinted.default.bg[2],
236
- [varNames.color.bg]: vars.color.tinted.default.bg[0],
237
- [varNames.color.border]: vars.color.tinted.default.border[0],
238
- [varNames.color.code.bg]: vars.color.tinted.default.bg[1],
239
- [varNames.color.code.fg]: vars.color.tinted.default.border[3],
240
- [varNames.color.fg]: vars.color.tinted.default.border[4],
241
- [varNames.color.muted.bg]: vars.color.tinted.default.bg[1],
242
- [varNames.color.muted.fg]: vars.color.tinted.default.border[3],
253
+ vars: {
254
+ [varNames.color.avatar.blue.bg]: vars.color.tinted.default.bg[2],
255
+ [varNames.color.avatar.purple.bg]: vars.color.tinted.default.bg[2],
256
+ [varNames.color.avatar.magenta.bg]: vars.color.tinted.default.bg[2],
257
+ [varNames.color.avatar.red.bg]: vars.color.tinted.default.bg[2],
258
+ [varNames.color.avatar.orange.bg]: vars.color.tinted.default.bg[2],
259
+ [varNames.color.avatar.yellow.bg]: vars.color.tinted.default.bg[2],
260
+ [varNames.color.avatar.green.bg]: vars.color.tinted.default.bg[2],
261
+ [varNames.color.avatar.cyan.bg]: vars.color.tinted.default.bg[2],
262
+ [varNames.color.bg]: vars.color.tinted.default.bg[0],
263
+ [varNames.color.border]: vars.color.tinted.default.border[0],
264
+ [varNames.color.code.bg]: vars.color.tinted.default.bg[1],
265
+ [varNames.color.code.fg]: vars.color.tinted.default.border[3],
266
+ [varNames.color.fg]: vars.color.tinted.default.border[4],
267
+ [varNames.color.muted.bg]: vars.color.tinted.default.bg[1],
268
+ [varNames.color.muted.fg]: vars.color.tinted.default.border[3],
269
+ },
243
270
  },
244
271
  },
245
272
  }
package/src/css/primitives/button/button.ts CHANGED
@@ -1,13 +1,20 @@
1
- import {_comp} from '../../_comp'
1
+ import {_composeClassNames} from '../../_composeClassNames'
2
+ import {_scopeClassNames} from '../../_scopeClassNames'
2
3
  import {display, flexItem, radius, width} from '../../aspects'
3
- import {ButtonStyleProps} from './types'
4
+ import type {ButtonStyleProps} from './types'
4
5
 
5
6
  /** @public */
6
7
  export function button(props: ButtonStyleProps): string | undefined {
7
- return _comp('button', display(props), flexItem(props), radius(props), width(props))
8
+ return _composeClassNames(
9
+ _scopeClassNames('button'),
10
+ display(props),
11
+ flexItem(props),
12
+ radius(props),
13
+ width(props),
14
+ )
8
15
  }
9
16
 
10
17
  /** @public */
11
18
  export function buttonLoadingBox(): string | undefined {
12
- return 'button-loading-box'
19
+ return _scopeClassNames('button-loading-box')
13
20
  }
package/src/css/primitives/button/types.ts CHANGED
@@ -1,4 +1,4 @@
1
- import {
1
+ import type {
2
2
  DisplayStyleProps,
3
3
  FlexItemStyleProps,
4
4
  RadiusStyleProps,