@sanity/ui 4.0.0-static.3 → 4.0.0-static.30

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 (325) hide show
  1. package/dist/_chunks-es/{refractor.js → Refractor.js} +1 -1
  2. package/dist/_chunks-es/{refractor.js.map → Refractor.js.map} +1 -1
  3. package/dist/css/index.css +2 -1
  4. package/dist/css/index.css.map +1 -0
  5. package/dist/css/index.d.ts +51 -7
  6. package/dist/css/index.js +17979 -55
  7. package/dist/css/index.js.map +1 -1
  8. package/dist/index.d.ts +12 -17
  9. package/dist/index.js +596 -608
  10. package/dist/index.js.map +1 -1
  11. package/exports/css/index.css +1 -0
  12. package/package.json +36 -46
  13. package/src/core/Root.tsx +1 -1
  14. package/src/core/RootProvider.tsx +5 -5
  15. package/src/core/__workshop__/index.ts +1 -1
  16. package/src/core/components/autocomplete/{autocomplete.tsx → Autocomplete.tsx} +10 -10
  17. package/src/core/components/autocomplete/__workshop__/{custom.tsx → Custom.tsx} +14 -1
  18. package/src/core/components/autocomplete/__workshop__/{example.tsx → Example.tsx} +12 -1
  19. package/src/core/components/autocomplete/__workshop__/index.ts +6 -6
  20. package/src/core/components/autocomplete/types.ts +1 -1
  21. package/src/core/components/breadcrumbs/{breadcrumbs.tsx → Breadcrumbs.tsx} +6 -6
  22. package/src/core/components/breadcrumbs/__workshop__/index.ts +1 -1
  23. package/src/core/components/dialog/{dialog.tsx → Dialog.tsx} +4 -4
  24. package/src/core/components/dialog/{dialogCard.tsx → DialogCard.tsx} +5 -5
  25. package/src/core/components/dialog/{dialogProvider.tsx → DialogProvider.tsx} +1 -1
  26. package/src/core/components/dialog/__workshop__/{panes.tsx → Panes.tsx} +4 -0
  27. package/src/core/components/dialog/__workshop__/{position.tsx → Position.tsx} +9 -1
  28. package/src/core/components/dialog/__workshop__/{props.tsx → Props.tsx} +2 -0
  29. package/src/core/components/dialog/__workshop__/index.ts +10 -10
  30. package/src/core/components/dialog/useDialog.ts +3 -3
  31. package/src/core/components/hotkeys/{hotkeys.tsx → Hotkeys.tsx} +2 -2
  32. package/src/core/components/hotkeys/__workshop__/index.ts +1 -1
  33. package/src/core/components/menu/{menu.test.tsx → Menu.test.tsx} +1 -1
  34. package/src/core/components/menu/{menu.tsx → Menu.tsx} +4 -8
  35. package/src/core/components/menu/{menuButton.tsx → MenuButton.tsx} +14 -9
  36. package/src/core/components/menu/{menuContext.ts → MenuContext.ts} +1 -1
  37. package/src/core/components/menu/{menuGroup.tsx → MenuGroup.tsx} +14 -11
  38. package/src/core/components/menu/{menuItem.tsx → MenuItem.tsx} +7 -9
  39. package/src/core/components/menu/__workshop__/DataProps.tsx +27 -0
  40. package/src/core/components/menu/__workshop__/{menuButton.tsx → MenuButton.tsx} +6 -1
  41. package/src/core/components/menu/__workshop__/{tones.tsx → Tones.tsx} +7 -1
  42. package/src/core/components/menu/__workshop__/index.ts +22 -17
  43. package/src/core/components/menu/useMenu.ts +3 -3
  44. package/src/core/components/tab/{tab.tsx → Tab.tsx} +1 -1
  45. package/src/core/components/tab/{tabList.tsx → TabList.tsx} +2 -2
  46. package/src/core/components/tab/{tabPanel.tsx → TabPanel.tsx} +1 -1
  47. package/src/core/components/tab/__workshop__/index.ts +1 -1
  48. package/src/core/components/toast/{toast.test.tsx → Toast.test.tsx} +1 -1
  49. package/src/core/components/toast/{toast.tsx → Toast.tsx} +6 -6
  50. package/src/core/components/toast/{toastLayer.tsx → ToastLayer.tsx} +1 -1
  51. package/src/core/components/toast/{toastProvider.tsx → ToastProvider.tsx} +4 -4
  52. package/src/core/components/toast/__workshop__/{toast.tsx → Toast.tsx} +2 -0
  53. package/src/core/components/toast/__workshop__/index.ts +2 -2
  54. package/src/core/components/toast/useToast.ts +3 -3
  55. package/src/core/components/tree/{tree.tsx → Tree.tsx} +2 -2
  56. package/src/core/components/tree/{treeGroup.tsx → TreeGroup.tsx} +1 -1
  57. package/src/core/components/tree/{treeItem.tsx → TreeItem.tsx} +7 -7
  58. package/src/core/components/tree/__workshop__/index.ts +4 -4
  59. package/src/core/components/tree/useTree.ts +3 -3
  60. package/src/core/components/virtualList/{virtualList.tsx → VirtualList.tsx} +1 -1
  61. package/src/core/components/virtualList/__workshop__/index.ts +4 -4
  62. package/src/core/hooks/useMediaIndex/__workshop__/index.ts +1 -1
  63. package/src/core/index.ts +65 -62
  64. package/src/core/primitives/avatar/{avatar.tsx → Avatar.tsx} +4 -4
  65. package/src/core/primitives/avatar/{avatarCounter.tsx → AvatarCounter.tsx} +2 -2
  66. package/src/core/primitives/avatar/{avatarStack.tsx → AvatarStack.tsx} +3 -3
  67. package/src/core/primitives/avatar/__workshop__/{asButton.tsx → AsButton.tsx} +8 -1
  68. package/src/core/primitives/avatar/__workshop__/PropsStory.tsx +22 -0
  69. package/src/core/primitives/avatar/__workshop__/{stack.tsx → Stack.tsx} +5 -1
  70. package/src/core/primitives/avatar/__workshop__/index.ts +9 -4
  71. package/src/core/primitives/badge/{badge.test.tsx → Badge.test.tsx} +1 -1
  72. package/src/core/primitives/badge/{badge.tsx → Badge.tsx} +2 -2
  73. package/src/core/primitives/badge/__workshop__/{props.tsx → Props.tsx} +12 -1
  74. package/src/core/primitives/badge/__workshop__/index.ts +2 -2
  75. package/src/core/primitives/box/__workshop__/{props.tsx → Props.tsx} +6 -1
  76. package/src/core/primitives/box/__workshop__/index.ts +2 -2
  77. package/src/core/primitives/button/{button.test.tsx → Button.test.tsx} +1 -1
  78. package/src/core/primitives/button/{button.tsx → Button.tsx} +10 -10
  79. package/src/core/primitives/button/__workshop__/DataProps.tsx +22 -0
  80. package/src/core/primitives/button/__workshop__/{props.tsx → Props.tsx} +22 -0
  81. package/src/core/primitives/button/__workshop__/{stacked.tsx → Stacked.tsx} +16 -0
  82. package/src/core/primitives/button/__workshop__/index.ts +16 -11
  83. package/src/core/primitives/card/{card.tsx → Card.tsx} +10 -10
  84. package/src/core/primitives/card/{cardProvider.tsx → CardProvider.tsx} +1 -1
  85. package/src/core/primitives/card/__workshop__/DataProps.tsx +30 -0
  86. package/src/core/primitives/card/__workshop__/{props.tsx → Props.tsx} +10 -0
  87. package/src/core/primitives/card/__workshop__/{selected.tsx → Selected.tsx} +1 -1
  88. package/src/core/primitives/card/__workshop__/index.ts +10 -9
  89. package/src/core/primitives/card/useCard.ts +3 -3
  90. package/src/core/primitives/checkbox/__workshop__/index.ts +4 -4
  91. package/src/core/primitives/code/{code.tsx → Code.tsx} +26 -2
  92. package/src/core/primitives/code/__workshop__/{props.tsx → Props.tsx} +6 -1
  93. package/src/core/primitives/code/__workshop__/index.ts +2 -2
  94. package/src/core/primitives/container/{container.tsx → Container.tsx} +1 -1
  95. package/src/core/primitives/container/__workshop__/{example.tsx → Example.tsx} +6 -1
  96. package/src/core/primitives/container/__workshop__/index.ts +1 -1
  97. package/src/core/primitives/flex/{flex.tsx → Flex.tsx} +1 -1
  98. package/src/core/primitives/flex/__workshop__/{example.tsx → Example.tsx} +7 -1
  99. package/src/core/primitives/flex/__workshop__/index.ts +2 -2
  100. package/src/core/primitives/grid/{grid.tsx → Grid.tsx} +1 -1
  101. package/src/core/primitives/grid/__workshop__/index.ts +1 -1
  102. package/src/core/primitives/heading/{heading.tsx → Heading.tsx} +16 -0
  103. package/src/core/primitives/heading/__workshop__/{plain.tsx → Plain.tsx} +12 -1
  104. package/src/core/primitives/heading/__workshop__/index.ts +2 -2
  105. package/src/core/primitives/inline/{inline.tsx → Inline.tsx} +1 -1
  106. package/src/core/primitives/inline/__workshop__/{plain.tsx → Plain.tsx} +5 -1
  107. package/src/core/primitives/inline/__workshop__/index.ts +1 -1
  108. package/src/core/primitives/kbd/{kbd.tsx → Kbd.tsx} +2 -2
  109. package/src/core/primitives/kbd/__workshop__/index.ts +1 -1
  110. package/src/core/primitives/label/{label.tsx → Label.tsx} +16 -0
  111. package/src/core/primitives/label/__workshop__/{plain.tsx → Plain.tsx} +15 -1
  112. package/src/core/primitives/label/__workshop__/index.ts +2 -2
  113. package/src/core/primitives/layer/{layer.test.tsx → Layer.test.tsx} +1 -1
  114. package/src/core/primitives/layer/{layer.tsx → Layer.tsx} +3 -3
  115. package/src/core/primitives/layer/{layerCard.tsx → LayerCard.tsx} +2 -2
  116. package/src/core/primitives/layer/{layerProvider.tsx → LayerProvider.tsx} +3 -3
  117. package/src/core/primitives/layer/__workshop__/index.ts +3 -3
  118. package/src/core/primitives/layer/useLayer.ts +3 -3
  119. package/src/core/primitives/popover/{popover.tsx → Popover.tsx} +4 -5
  120. package/src/core/primitives/popover/{popoverLayer.tsx → PopoverLayer.tsx} +3 -3
  121. package/src/core/primitives/popover/__workshop__/AlignedStory.tsx +13 -1
  122. package/src/core/primitives/popover/__workshop__/MatchReferenceWidthStory.tsx +2 -0
  123. package/src/core/primitives/popover/__workshop__/PlainStory.tsx +8 -0
  124. package/src/core/primitives/popover/__workshop__/SidePanelStory.tsx +7 -1
  125. package/src/core/primitives/popover/__workshop__/TestStory.tsx +6 -0
  126. package/src/core/primitives/radio/{radio.tsx → Radio.tsx} +2 -2
  127. package/src/core/primitives/radio/__workshop__/index.ts +2 -2
  128. package/src/core/primitives/select/{select.tsx → Select.tsx} +7 -5
  129. package/src/core/primitives/select/__workshop__/{plain.tsx → Plain.tsx} +4 -0
  130. package/src/core/primitives/select/__workshop__/index.ts +2 -2
  131. package/src/core/primitives/selectable/{selectable.tsx → Selectable.tsx} +2 -2
  132. package/src/core/primitives/selectable/__workshop__/DataProps.tsx +27 -0
  133. package/src/core/primitives/selectable/__workshop__/index.ts +14 -0
  134. package/src/core/primitives/skeleton/{codeSkeleton.tsx → CodeSkeleton.tsx} +1 -1
  135. package/src/core/primitives/skeleton/{headingSkeleton.tsx → HeadingSkeleton.tsx} +1 -1
  136. package/src/core/primitives/skeleton/{labelSkeleton.tsx → LabelSkeleton.tsx} +1 -1
  137. package/src/core/primitives/skeleton/{textSkeleton.tsx → TextSkeleton.tsx} +1 -1
  138. package/src/core/primitives/skeleton/__workshop__/{delay.tsx → Delay.tsx} +9 -1
  139. package/src/core/primitives/skeleton/__workshop__/{skeleton.tsx → Skeleton.tsx} +9 -1
  140. package/src/core/primitives/skeleton/__workshop__/index.ts +2 -2
  141. package/src/core/primitives/spinner/{spinner.tsx → Spinner.tsx} +2 -2
  142. package/src/core/primitives/spinner/__workshop__/Props.tsx +6 -1
  143. package/src/core/primitives/stack/{stack.tsx → Stack.tsx} +1 -1
  144. package/src/core/primitives/stack/__workshop__/{plain.tsx → Plain.tsx} +4 -1
  145. package/src/core/primitives/stack/__workshop__/index.ts +1 -1
  146. package/src/core/primitives/switch/{switch.tsx → Switch.tsx} +2 -10
  147. package/src/core/primitives/switch/__workshop__/index.ts +2 -2
  148. package/src/core/primitives/text/{text.tsx → Text.tsx} +14 -0
  149. package/src/core/primitives/text/__workshop__/{colored.tsx → Colored.tsx} +8 -1
  150. package/src/core/primitives/text/__workshop__/{example.tsx → Example.tsx} +15 -1
  151. package/src/core/primitives/text/__workshop__/index.ts +3 -3
  152. package/src/core/primitives/textArea/{textArea.tsx → TextArea.tsx} +7 -1
  153. package/src/core/primitives/textArea/__workshop__/{plain.tsx → Plain.tsx} +8 -0
  154. package/src/core/primitives/textArea/__workshop__/index.ts +1 -1
  155. package/src/core/primitives/textInput/{textInput.tsx → TextInput.tsx} +22 -21
  156. package/src/core/primitives/textInput/__workshop__/{plain.tsx → Plain.tsx} +34 -4
  157. package/src/core/primitives/textInput/__workshop__/{typed.tsx → Typed.tsx} +7 -1
  158. package/src/core/primitives/textInput/__workshop__/index.ts +7 -7
  159. package/src/core/primitives/tooltip/{tooltip.test.tsx → Tooltip.test.tsx} +4 -4
  160. package/src/core/primitives/tooltip/{tooltip.tsx → Tooltip.tsx} +6 -5
  161. package/src/core/primitives/tooltip/{tooltipLayer.tsx → TooltipLayer.tsx} +2 -2
  162. package/src/core/primitives/tooltip/__workshop__/{customPortal.tsx → CustomPortal.tsx} +2 -0
  163. package/src/core/primitives/tooltip/__workshop__/{overflowingBoundary.tsx → OverflowingBoundary.tsx} +2 -0
  164. package/src/core/primitives/tooltip/__workshop__/{props.tsx → Props.tsx} +12 -0
  165. package/src/core/primitives/tooltip/__workshop__/{resizableBoundary.tsx → ResizableBoundary.tsx} +5 -0
  166. package/src/core/primitives/tooltip/__workshop__/index.ts +4 -4
  167. package/src/core/primitives/tooltip/tooltipDelayGroup/{tooltipDelayGroupProvider.tsx → TooltipDelayGroupProvider.tsx} +1 -1
  168. package/src/core/primitives/tooltip/tooltipDelayGroup/useTooltipDelayGroup.ts +3 -3
  169. package/src/core/types.ts +6 -5
  170. package/src/core/utils/{errorBoundary.tsx → ErrorBoundary.tsx} +1 -1
  171. package/src/core/utils/boundaryElement/{boundaryElement.test.tsx → BoundaryElement.test.tsx} +1 -1
  172. package/src/core/utils/boundaryElement/{boundaryElementProvider.tsx → BoundaryElementProvider.tsx} +1 -1
  173. package/src/core/utils/boundaryElement/__workshop__/index.ts +1 -1
  174. package/src/core/utils/boundaryElement/useBoundaryElement.ts +3 -3
  175. package/src/core/utils/elementQuery/__workshop__/index.ts +1 -1
  176. package/src/core/utils/portal/{portal.test.tsx → Portal.test.tsx} +1 -1
  177. package/src/core/utils/portal/{portal.tsx → Portal.tsx} +1 -1
  178. package/src/core/utils/portal/{portalProvider.tsx → PortalProvider.tsx} +3 -3
  179. package/src/core/utils/portal/__workshop__/index.ts +1 -1
  180. package/src/core/utils/portal/usePortal.ts +3 -3
  181. package/src/css/_responsiveStyle.css.ts +2 -2
  182. package/src/css/primitives/_input/_input.css.ts +8 -8
  183. package/src/css/primitives/_input/input.ts +2 -0
  184. package/src/css/primitives/_input/types.ts +2 -1
  185. package/src/css/primitives/avatar/avatar.css.ts +17 -5
  186. package/src/css/primitives/box/box.css.ts +19 -1
  187. package/src/css/primitives/button/button.css.ts +252 -183
  188. package/src/css/primitives/card/__workshop__/{color.tsx → Color.tsx} +9 -1
  189. package/src/css/primitives/card/__workshop__/index.ts +1 -1
  190. package/src/css/primitives/card/card.css.ts +133 -130
  191. package/src/css/primitives/checkbox/checkbox.css.ts +1 -0
  192. package/src/css/primitives/code/code.ts +4 -0
  193. package/src/css/primitives/code/types.ts +7 -1
  194. package/src/css/primitives/heading/heading.ts +4 -0
  195. package/src/css/primitives/heading/types.ts +7 -1
  196. package/src/css/primitives/label/label.ts +4 -0
  197. package/src/css/primitives/label/types.ts +7 -1
  198. package/src/css/primitives/radio/radio.css.ts +1 -1
  199. package/src/css/primitives/root/root.css.ts +1 -1
  200. package/src/css/primitives/select/select.css.ts +7 -1
  201. package/src/css/primitives/selectable/selectable.css.ts +79 -70
  202. package/src/css/primitives/switch/switch.css.ts +10 -1
  203. package/src/css/primitives/text/text.ts +2 -0
  204. package/src/css/primitives/text/types.ts +6 -1
  205. package/src/css/primitives/textInput/textInput.css.ts +15 -3
  206. package/src/css/props/width/types.ts +1 -1
  207. package/src/css/props/width/width.css.ts +5 -2
  208. package/src/css/theme/buildCSSTheme.ts +4 -0
  209. package/src/css/types.ts +4 -0
  210. package/src/css/vars.css.ts +4 -0
  211. package/dist/_chunks-cjs/refractor.cjs +0 -22
  212. package/dist/_chunks-cjs/refractor.cjs.map +0 -1
  213. package/dist/css/index.cjs +0 -966
  214. package/dist/css/index.cjs.map +0 -1
  215. package/dist/css/index.d.cts +0 -1370
  216. package/dist/index.cjs +0 -4515
  217. package/dist/index.cjs.map +0 -1
  218. package/dist/index.d.cts +0 -2521
  219. package/dist/theme.cjs +0 -870
  220. package/dist/theme.cjs.map +0 -1
  221. package/dist/theme.d.cts +0 -499
  222. package/src/core/primitives/popover/helpers.ts +0 -32
  223. package/src/core/primitives/tooltip/tooltipDelayGroup/index.ts +0 -4
  224. /package/src/core/__workshop__/{boundary.tsx → Boundary.tsx} +0 -0
  225. /package/src/core/components/autocomplete/{autocompleteOption.tsx → AutocompleteOption.tsx} +0 -0
  226. /package/src/core/components/autocomplete/__workshop__/{async.tsx → Async.tsx} +0 -0
  227. /package/src/core/components/autocomplete/__workshop__/{constrainedHeight.tsx → ConstrainedHeight.tsx} +0 -0
  228. /package/src/core/components/autocomplete/__workshop__/{focusAndBlur.tsx → FocusAndBlur.tsx} +0 -0
  229. /package/src/core/components/autocomplete/__workshop__/{fullscreen.tsx → Fullscreen.tsx} +0 -0
  230. /package/src/core/components/breadcrumbs/__workshop__/{example.tsx → Example.tsx} +0 -0
  231. /package/src/core/components/dialog/{dialogContext.ts → DialogContext.ts} +0 -0
  232. /package/src/core/components/dialog/__workshop__/{activate.tsx → Activate.tsx} +0 -0
  233. /package/src/core/components/dialog/__workshop__/{autoFocus.tsx → AutoFocus.tsx} +0 -0
  234. /package/src/core/components/dialog/__workshop__/{layering.tsx → Layering.tsx} +0 -0
  235. /package/src/core/components/dialog/__workshop__/{nested.tsx → Nested.tsx} +0 -0
  236. /package/src/core/components/dialog/__workshop__/{onScroll.tsx → OnScroll.tsx} +0 -0
  237. /package/src/core/components/dialog/__workshop__/{provider.tsx → Provider.tsx} +0 -0
  238. /package/src/core/components/dialog/__workshop__/{wrapped.tsx → Wrapped.tsx} +0 -0
  239. /package/src/core/components/hotkeys/__workshop__/{plain.tsx → Plain.tsx} +0 -0
  240. /package/src/core/components/menu/{menuDivider.tsx → MenuDivider.tsx} +0 -0
  241. /package/src/core/components/menu/__workshop__/{asComponent.tsx → AsComponent.tsx} +0 -0
  242. /package/src/core/components/menu/__workshop__/{avatarMenu.tsx → AvatarMenu.tsx} +0 -0
  243. /package/src/core/components/menu/__workshop__/{closableMenuButton.tsx → ClosableMenuButton.tsx} +0 -0
  244. /package/src/core/components/menu/__workshop__/{constrainedInBoundary.tsx → ConstrainedInBoundary.tsx} +0 -0
  245. /package/src/core/components/menu/__workshop__/{customMenuItem.tsx → CustomMenuItem.tsx} +0 -0
  246. /package/src/core/components/menu/__workshop__/{customSelectedState.tsx → CustomSelectedState.tsx} +0 -0
  247. /package/src/core/components/menu/__workshop__/{disableFocusOnClose.tsx → DisableFocusOnClose.tsx} +0 -0
  248. /package/src/core/components/menu/__workshop__/{groups.tsx → Groups.tsx} +0 -0
  249. /package/src/core/components/menu/__workshop__/{menuGroupRight.tsx → MenuGroupRight.tsx} +0 -0
  250. /package/src/core/components/menu/__workshop__/{nestedMenu.tsx → NestedMenu.tsx} +0 -0
  251. /package/src/core/components/menu/__workshop__/{onCloseMenuButton.tsx → OnCloseMenuButton.tsx} +0 -0
  252. /package/src/core/components/menu/__workshop__/{selectedItem.tsx → SelectedItem.tsx} +0 -0
  253. /package/src/core/components/menu/__workshop__/{shouldFocus.tsx → ShouldFocus.tsx} +0 -0
  254. /package/src/core/components/menu/__workshop__/{withoutArrow.tsx → WithoutArrow.tsx} +0 -0
  255. /package/src/core/components/tab/__workshop__/{example.tsx → Example.tsx} +0 -0
  256. /package/src/core/components/toast/{toastContext.ts → ToastContext.ts} +0 -0
  257. /package/src/core/components/toast/__workshop__/{hook.tsx → Hook.tsx} +0 -0
  258. /package/src/core/components/tree/{treeContext.ts → TreeContext.ts} +0 -0
  259. /package/src/core/components/tree/__workshop__/{basic.tsx → Basic.tsx} +0 -0
  260. /package/src/core/components/tree/__workshop__/{tabFromElement.tsx → TabFromElement.tsx} +0 -0
  261. /package/src/core/components/virtualList/__workshop__/{changingProps.tsx → ChangingProps.tsx} +0 -0
  262. /package/src/core/components/virtualList/__workshop__/{elementScroll.tsx → ElementScroll.tsx} +0 -0
  263. /package/src/core/components/virtualList/__workshop__/{infiniteList.tsx → InfiniteList.tsx} +0 -0
  264. /package/src/core/components/virtualList/__workshop__/{windowScrolll.tsx → WindowScrolll.tsx} +0 -0
  265. /package/src/core/hooks/useMediaIndex/__workshop__/{test.tsx → Test.tsx} +0 -0
  266. /package/src/core/primitives/arrow/{arrow.tsx → Arrow.tsx} +0 -0
  267. /package/src/core/primitives/avatar/__workshop__/{withinButton.tsx → WithinButton.tsx} +0 -0
  268. /package/src/core/primitives/avatar/__workshop__/{withinMenuItem.tsx → WithinMenuItem.tsx} +0 -0
  269. /package/src/core/primitives/badge/__workshop__/{tones.tsx → Tones.tsx} +0 -0
  270. /package/src/core/primitives/box/{box.tsx → Box.tsx} +0 -0
  271. /package/src/core/primitives/box/__workshop__/{responsive.tsx → Responsive.tsx} +0 -0
  272. /package/src/core/primitives/button/__workshop__/{custom.tsx → Custom.tsx} +0 -0
  273. /package/src/core/primitives/button/__workshop__/{customIcons.tsx → CustomIcons.tsx} +0 -0
  274. /package/src/core/primitives/button/__workshop__/{disabled.tsx → Disabled.tsx} +0 -0
  275. /package/src/core/primitives/button/__workshop__/{mixedChildren.tsx → MixedChildren.tsx} +0 -0
  276. /package/src/core/primitives/button/__workshop__/{sanityUploadButton.tsx → SanityUploadButton.tsx} +0 -0
  277. /package/src/core/primitives/button/__workshop__/{styled1.tsx → Styled1.tsx} +0 -0
  278. /package/src/core/primitives/button/__workshop__/{styled2.tsx → Styled2.tsx} +0 -0
  279. /package/src/core/primitives/button/__workshop__/{textOverflow.tsx → TextOverflow.tsx} +0 -0
  280. /package/src/core/primitives/button/__workshop__/{uploadButton.tsx → UploadButton.tsx} +0 -0
  281. /package/src/core/primitives/card/{cardContext.ts → CardContext.ts} +0 -0
  282. /package/src/core/primitives/card/__workshop__/{asButton.tsx → AsButton.tsx} +0 -0
  283. /package/src/core/primitives/card/__workshop__/{asComponent.tsx → AsComponent.tsx} +0 -0
  284. /package/src/core/primitives/card/__workshop__/{checkered.tsx → Checkered.tsx} +0 -0
  285. /package/src/core/primitives/card/__workshop__/{interactive.tsx → Interactive.tsx} +0 -0
  286. /package/src/core/primitives/card/__workshop__/{listNavigation.tsx → ListNavigation.tsx} +0 -0
  287. /package/src/core/primitives/card/__workshop__/{styled.tsx → Styled.tsx} +0 -0
  288. /package/src/core/primitives/card/__workshop__/{tones.tsx → Tones.tsx} +0 -0
  289. /package/src/core/primitives/checkbox/{checkbox.tsx → Checkbox.tsx} +0 -0
  290. /package/src/core/primitives/checkbox/__workshop__/{example.tsx → Example.tsx} +0 -0
  291. /package/src/core/primitives/checkbox/__workshop__/{props.tsx → Props.tsx} +0 -0
  292. /package/src/core/primitives/checkbox/__workshop__/{readOnly.tsx → ReadOnly.tsx} +0 -0
  293. /package/src/core/primitives/checkbox/__workshop__/{tones.tsx → Tones.tsx} +0 -0
  294. /package/src/core/primitives/code/{refractor.tsx → Refractor.tsx} +0 -0
  295. /package/src/core/primitives/code/__workshop__/{opticalAlignment.tsx → OpticalAlignment.tsx} +0 -0
  296. /package/src/core/primitives/flex/__workshop__/{gap.tsx → Gap.tsx} +0 -0
  297. /package/src/core/primitives/grid/__workshop__/{responsive.tsx → Responsive.tsx} +0 -0
  298. /package/src/core/primitives/heading/__workshop__/{opticalAlignment.tsx → OpticalAlignment.tsx} +0 -0
  299. /package/src/core/primitives/kbd/__workshop__/{plain.tsx → Plain.tsx} +0 -0
  300. /package/src/core/primitives/label/__workshop__/{opticalAlignment.tsx → OpticalAlignment.tsx} +0 -0
  301. /package/src/core/primitives/layer/{layerContext.ts → LayerContext.ts} +0 -0
  302. /package/src/core/primitives/layer/__workshop__/{multipleRoots.tsx → MultipleRoots.tsx} +0 -0
  303. /package/src/core/primitives/layer/__workshop__/{nested.tsx → Nested.tsx} +0 -0
  304. /package/src/core/primitives/layer/__workshop__/{responsiveZOffset.tsx → ResponsiveZOffset.tsx} +0 -0
  305. /package/src/core/primitives/radio/__workshop__/{example.tsx → Example.tsx} +0 -0
  306. /package/src/core/primitives/radio/__workshop__/{plain.tsx → Plain.tsx} +0 -0
  307. /package/src/core/primitives/select/__workshop__/{readOnly.tsx → ReadOnly.tsx} +0 -0
  308. /package/src/core/primitives/skeleton/{skeleton.tsx → Skeleton.tsx} +0 -0
  309. /package/src/core/primitives/spinner/{animatedSpinnerIcon.tsx → AnimatedSpinnerIcon.tsx} +0 -0
  310. /package/src/core/primitives/srOnly/{srOnly.tsx → SrOnly.tsx} +0 -0
  311. /package/src/core/primitives/switch/__workshop__/{example.tsx → Example.tsx} +0 -0
  312. /package/src/core/primitives/switch/__workshop__/{props.tsx → Props.tsx} +0 -0
  313. /package/src/core/primitives/text/__workshop__/{opticalAlignment.tsx → OpticalAlignment.tsx} +0 -0
  314. /package/src/core/primitives/textInput/__workshop__/{clearButton.tsx → ClearButton.tsx} +0 -0
  315. /package/src/core/primitives/textInput/__workshop__/{customValidity.tsx → CustomValidity.tsx} +0 -0
  316. /package/src/core/primitives/textInput/__workshop__/{readOnly.tsx → ReadOnly.tsx} +0 -0
  317. /package/src/core/primitives/textInput/__workshop__/{states.tsx → States.tsx} +0 -0
  318. /package/src/core/primitives/textInput/__workshop__/{tones.tsx → Tones.tsx} +0 -0
  319. /package/src/core/primitives/tooltip/tooltipDelayGroup/{tooltipDelayGroupContext.tsx → TooltipDelayGroupContext.tsx} +0 -0
  320. /package/src/core/utils/boundaryElement/{boundaryElementContext.ts → BoundaryElementContext.ts} +0 -0
  321. /package/src/core/utils/boundaryElement/__workshop__/{plain.tsx → Plain.tsx} +0 -0
  322. /package/src/core/utils/elementQuery/{elementQuery.tsx → ElementQuery.tsx} +0 -0
  323. /package/src/core/utils/elementQuery/__workshop__/{customMedia.tsx → CustomMedia.tsx} +0 -0
  324. /package/src/core/utils/portal/{portalContext.ts → PortalContext.ts} +0 -0
  325. /package/src/core/utils/portal/__workshop__/{named.tsx → Named.tsx} +0 -0
package/src/css/primitives/button/button.css.ts CHANGED
@@ -23,10 +23,7 @@ export const root: string = _style(layers.primitives, {
23
23
  verticalAlign: 'top',
24
24
  backgroundColor: vars.color.bg,
25
25
  color: vars.color.fg,
26
-
27
- //
28
- transition:
29
- 'background-color 100ms ease-in-out, box-shadow 100ms ease-in-out, color 100ms ease-in-out',
26
+ inlineSize: 'max-content',
30
27
 
31
28
  selectors: {
32
29
  '&::-moz-focus-inner': {
@@ -69,215 +66,287 @@ export const tones: Record<ElementTone, string> = {
69
66
  const solid = vars.color.solid[t]
70
67
  const tinted = vars.color.tinted[t]
71
68
 
69
+ const stateVars = {
70
+ default: {
71
+ enabled: {
72
+ [vars.color.bg]: solid.bg[0],
73
+ [vars.color.border]: solid.border[1],
74
+ [vars.color.code.bg]: solid.bg[1],
75
+ [vars.color.code.fg]: solid.fg[4],
76
+ [vars.color.fg]: solid.fg[0],
77
+ [vars.color.muted.bg]: solid.bg[1],
78
+ [vars.color.muted.fg]: solid.fg[4],
79
+ [vars.button.boxShadow]: 'none',
80
+ },
81
+
82
+ hovered: {
83
+ [vars.color.bg]: solid.bg[1],
84
+ [vars.color.border]: solid.border[2],
85
+ [vars.color.code.bg]: solid.bg[2],
86
+ [vars.color.code.fg]: solid.fg[4],
87
+ [vars.color.fg]: solid.fg[0],
88
+ [vars.color.muted.bg]: solid.bg[2],
89
+ [vars.color.muted.fg]: solid.fg[4],
90
+ },
91
+
92
+ // NOTE: also used for `selected` state
93
+ pressed: {
94
+ [vars.color.bg]: solid.bg[2],
95
+ [vars.color.border]: solid.border[3],
96
+ [vars.color.code.bg]: solid.bg[3],
97
+ [vars.color.code.fg]: solid.fg[4],
98
+ [vars.color.fg]: solid.fg[0],
99
+ [vars.color.muted.bg]: solid.bg[3],
100
+ [vars.color.muted.fg]: solid.fg[4],
101
+ },
102
+
103
+ disabled: {
104
+ ..._fromEntries(
105
+ AVATAR_COLORS.map((c) => [vars.color.avatar[c].bg, vars.color.tinted.default.bg[3]]),
106
+ ),
107
+
108
+ [vars.color.bg]: vars.color.tinted.default.bg[1],
109
+ [vars.color.border]: vars.color.tinted.default.border[1],
110
+ [vars.color.code.bg]: vars.color.tinted.default.bg[2],
111
+ [vars.color.code.fg]: vars.color.tinted.default.border[4],
112
+ [vars.color.fg]: vars.color.tinted.default.border[4],
113
+ [vars.color.muted.bg]: vars.color.tinted.default.bg[2],
114
+ [vars.color.muted.fg]: vars.color.tinted.default.border[4],
115
+ },
116
+ },
117
+
118
+ ghost: {
119
+ enabled: {
120
+ [vars.color.bg]: `color-mix(in srgb, transparent, ${tinted.bg[1]} 50%)`,
121
+ [vars.color.border]: tinted.border[0],
122
+ [vars.color.fg]: tinted.fg[2],
123
+ [vars.color.code.bg]: tinted.bg[2],
124
+ [vars.color.code.fg]: tinted.fg[4],
125
+ [vars.color.muted.bg]: tinted.bg[2],
126
+ [vars.color.muted.fg]: tinted.fg[4],
127
+ [vars.button.boxShadow]: `inset 0 0 0 ${vars.button.border.width} ${vars.color.border}`,
128
+ },
129
+
130
+ hovered: {
131
+ [vars.color.bg]: tinted.bg[1],
132
+ [vars.color.border]: tinted.border[1],
133
+ [vars.color.code.bg]: tinted.bg[3],
134
+ [vars.color.code.fg]: tinted.fg[3],
135
+ [vars.color.fg]: tinted.fg[1],
136
+ [vars.color.muted.bg]: tinted.bg[3],
137
+ [vars.color.muted.fg]: tinted.fg[3],
138
+ },
139
+
140
+ // NOTE: also used for `selected` state
141
+ pressed: {
142
+ [vars.color.bg]: tinted.bg[2],
143
+ [vars.color.border]: tinted.border[2],
144
+ [vars.color.code.bg]: tinted.bg[4],
145
+ [vars.color.code.fg]: tinted.fg[3],
146
+ [vars.color.fg]: tinted.fg[1],
147
+ [vars.color.muted.bg]: tinted.bg[4],
148
+ [vars.color.muted.fg]: tinted.fg[3],
149
+ [vars.button.boxShadow]: `inset 0 0 0 ${vars.button.border.width} ${vars.color.border}`,
150
+ },
151
+
152
+ disabled: {
153
+ ..._fromEntries(
154
+ AVATAR_COLORS.map((c) => [vars.color.avatar[c].bg, vars.color.tinted.default.bg[2]]),
155
+ ),
156
+
157
+ [vars.color.bg]: vars.color.tinted.default.bg[0],
158
+ [vars.color.border]: vars.color.tinted.default.border[0],
159
+ [vars.color.code.bg]: vars.color.tinted.default.bg[1],
160
+ [vars.color.code.fg]: vars.color.tinted.default.border[3],
161
+ [vars.color.fg]: vars.color.tinted.default.border[4],
162
+ [vars.color.muted.bg]: vars.color.tinted.default.bg[1],
163
+ [vars.color.muted.fg]: vars.color.tinted.default.border[3],
164
+ },
165
+ },
166
+
167
+ bleed: {
168
+ enabled: {
169
+ [vars.color.bg]: tinted.bg[0],
170
+ [vars.color.border]: tinted.border[1],
171
+ [vars.color.fg]: tinted.fg[2],
172
+ [vars.color.muted.bg]: tinted.bg[1],
173
+ [vars.color.muted.fg]: tinted.fg[4],
174
+ [vars.button.boxShadow]: 'none',
175
+ },
176
+
177
+ hovered: {
178
+ [vars.color.bg]: tinted.bg[1],
179
+ [vars.color.border]: tinted.border[2],
180
+ [vars.color.fg]: tinted.fg[1],
181
+ [vars.color.muted.bg]: tinted.bg[2],
182
+ [vars.color.muted.fg]: tinted.fg[3],
183
+ },
184
+
185
+ // NOTE: also used for `selected` state
186
+ pressed: {
187
+ [vars.color.bg]: tinted.bg[2],
188
+ [vars.color.border]: tinted.border[3],
189
+ [vars.color.fg]: tinted.fg[1],
190
+ [vars.color.muted.bg]: tinted.bg[3],
191
+ [vars.color.muted.fg]: tinted.fg[3],
192
+ },
193
+
194
+ disabled: {
195
+ ..._fromEntries(
196
+ AVATAR_COLORS.map((c) => [vars.color.avatar[c].bg, vars.color.tinted.default.bg[2]]),
197
+ ),
198
+
199
+ [vars.color.bg]: vars.color.tinted.default.bg[0],
200
+ [vars.color.border]: vars.color.tinted.default.border[0],
201
+ [vars.color.code.bg]: vars.color.tinted.default.bg[1],
202
+ [vars.color.code.fg]: vars.color.tinted.default.border[3],
203
+ [vars.color.fg]: vars.color.tinted.default.border[4],
204
+ [vars.color.muted.bg]: vars.color.tinted.default.bg[1],
205
+ [vars.color.muted.fg]: vars.color.tinted.default.border[3],
206
+ },
207
+ },
208
+ }
209
+
72
210
  return [
73
211
  t,
74
212
  _style(layers.primitives, {
75
- selectors: {
76
- // default
77
-
78
- [`&.${modes.default}`]: {
79
- vars: {
80
- [vars.color.bg]: solid.bg[0],
81
- [vars.color.border]: solid.border[1],
82
- [vars.color.code.bg]: solid.bg[1],
83
- [vars.color.code.fg]: solid.fg[4],
84
- [vars.color.fg]: solid.fg[0],
85
- [vars.color.muted.bg]: solid.bg[1],
86
- [vars.color.muted.fg]: solid.fg[4],
87
- [vars.button.boxShadow]: 'none',
88
- },
89
- },
213
+ '@media': {
214
+ '(hover: hover)': {
215
+ selectors: {
216
+ [[
217
+ `&.${modes.default}`,
218
+ ':not(:active)',
219
+ ':not(:focus)',
220
+ ':not(:disabled)',
221
+ ':not([aria-pressed="true"])',
222
+ ':not([data-pressed])',
223
+ ':not([data-focused])',
224
+ ':not([data-selected])',
225
+ ':not([data-disabled])',
226
+ ':hover',
227
+ ].join('')]: {
228
+ vars: stateVars.default.hovered,
229
+ },
90
230
 
91
- [`&.${modes.default}:not([data-disabled]):hover`]: {
92
- vars: {
93
- [vars.color.bg]: solid.bg[1],
94
- [vars.color.border]: solid.border[2],
95
- [vars.color.code.bg]: solid.bg[2],
96
- [vars.color.code.fg]: solid.fg[4],
97
- [vars.color.fg]: solid.fg[0],
98
- [vars.color.muted.bg]: solid.bg[2],
99
- [vars.color.muted.fg]: solid.fg[4],
100
- },
101
- },
231
+ [[
232
+ `&.${modes.ghost}`,
233
+ ':not(:active)',
234
+ ':not(:focus)',
235
+ ':not(:disabled)',
236
+ ':not([aria-pressed="true"])',
237
+ ':not([data-pressed])',
238
+ ':not([data-focused])',
239
+ ':not([data-selected])',
240
+ ':not([data-disabled])',
241
+ ':hover',
242
+ ].join('')]: {
243
+ vars: stateVars.ghost.hovered,
244
+ },
102
245
 
103
- [`&.${modes.default}:not([data-disabled]):active`]: {
104
- vars: {
105
- [vars.color.bg]: solid.bg[2],
106
- [vars.color.border]: solid.border[3],
107
- [vars.color.code.bg]: solid.bg[3],
108
- [vars.color.code.fg]: solid.fg[4],
109
- [vars.color.fg]: solid.fg[0],
110
- [vars.color.muted.bg]: solid.bg[3],
111
- [vars.color.muted.fg]: solid.fg[4],
246
+ [[
247
+ `&.${modes.bleed}`,
248
+ ':not(:active)',
249
+ ':not(:focus)',
250
+ ':not(:disabled)',
251
+ ':not([aria-pressed="true"])',
252
+ ':not([data-pressed])',
253
+ ':not([data-focused])',
254
+ ':not([data-selected])',
255
+ ':not([data-disabled])',
256
+ ':hover',
257
+ ].join('')]: {
258
+ vars: stateVars.bleed.hovered,
259
+ },
112
260
  },
113
261
  },
262
+ },
114
263
 
115
- [`&.${modes.default}:not([data-disabled])[data-selected]`]: {
116
- vars: {
117
- [vars.color.bg]: solid.bg[2],
118
- [vars.color.border]: solid.border[3],
119
- [vars.color.code.bg]: solid.bg[3],
120
- [vars.color.code.fg]: solid.fg[4],
121
- [vars.color.fg]: solid.fg[0],
122
- [vars.color.muted.bg]: solid.bg[3],
123
- [vars.color.muted.fg]: solid.fg[4],
124
- },
264
+ 'selectors': {
265
+ // default - enabled
266
+ [`&.${modes.default}:not([data-disabled])`]: {
267
+ vars: stateVars.default.enabled,
125
268
  },
126
269
 
127
- [`&.${modes.default}[data-disabled]`]: {
128
- vars: {
129
- ..._fromEntries(
130
- AVATAR_COLORS.map((c) => [
131
- vars.color.avatar[c].bg,
132
- vars.color.tinted.default.bg[3],
133
- ]),
134
- ),
135
-
136
- [vars.color.bg]: vars.color.tinted.default.bg[1],
137
- [vars.color.border]: vars.color.tinted.default.border[1],
138
- [vars.color.code.bg]: vars.color.tinted.default.bg[2],
139
- [vars.color.code.fg]: vars.color.tinted.default.border[4],
140
- [vars.color.fg]: vars.color.tinted.default.border[4],
141
- [vars.color.muted.bg]: vars.color.tinted.default.bg[2],
142
- [vars.color.muted.fg]: vars.color.tinted.default.border[4],
143
- },
270
+ // default - hovered
271
+ [[
272
+ // `&.${modes.default}:not([data-disabled]):hover`,
273
+ `&.${modes.default}:not([data-disabled])[data-hovered]`,
274
+ ].join(',')]: {
275
+ vars: stateVars.default.hovered,
144
276
  },
145
277
 
146
- // ghost
147
-
148
- [`&.${modes.ghost}`]: {
149
- vars: {
150
- [vars.color.bg]: `color-mix(in srgb, transparent, ${tinted.bg[1]} 50%)`,
151
- [vars.color.border]: tinted.border[0],
152
- [vars.color.fg]: tinted.fg[2],
153
- [vars.color.code.bg]: tinted.bg[2],
154
- [vars.color.code.fg]: tinted.fg[4],
155
- [vars.color.muted.bg]: tinted.bg[2],
156
- [vars.color.muted.fg]: tinted.fg[4],
157
- [vars.button.boxShadow]:
158
- `inset 0 0 0 ${vars.button.border.width} ${vars.color.border}`,
159
- },
278
+ // default - pressed
279
+ // default - selected
280
+ [[
281
+ `&.${modes.default}:not([data-disabled]):active`,
282
+ `&.${modes.default}:not([data-disabled])[aria-pressed="true"]`,
283
+ `&.${modes.default}:not([data-disabled])[data-pressed]`,
284
+ `&.${modes.default}:not([data-disabled])[data-selected]`,
285
+ ].join(',')]: {
286
+ vars: stateVars.default.pressed,
160
287
  },
161
288
 
162
- [`&.${modes.ghost}:not([data-disabled]):hover`]: {
163
- vars: {
164
- [vars.color.bg]: tinted.bg[1],
165
- [vars.color.border]: tinted.border[1],
166
- [vars.color.code.bg]: tinted.bg[3],
167
- [vars.color.code.fg]: tinted.fg[3],
168
- [vars.color.fg]: tinted.fg[1],
169
- [vars.color.muted.bg]: tinted.bg[3],
170
- [vars.color.muted.fg]: tinted.fg[3],
171
- },
289
+ // default - disabled
290
+ [[`&.${modes.default}:disabled`, `&.${modes.default}[data-disabled]`].join(',')]: {
291
+ vars: stateVars.default.disabled,
172
292
  },
173
293
 
174
- [`&.${modes.ghost}:not([data-disabled]):active`]: {
175
- vars: {
176
- [vars.color.bg]: tinted.bg[2],
177
- [vars.color.border]: tinted.border[2],
178
- [vars.color.code.bg]: tinted.bg[4],
179
- [vars.color.code.fg]: tinted.fg[3],
180
- [vars.color.fg]: tinted.fg[1],
181
- [vars.color.muted.bg]: tinted.bg[4],
182
- [vars.color.muted.fg]: tinted.fg[3],
183
- [vars.button.boxShadow]:
184
- `inset 0 0 0 ${vars.button.border.width} ${vars.color.border}`,
185
- },
294
+ // ghost - enabled
295
+ [`&.${modes.ghost}:not([data-disabled])`]: {
296
+ vars: stateVars.ghost.enabled,
186
297
  },
187
298
 
188
- [`&.${modes.ghost}:not([data-disabled])[data-selected]`]: {
189
- vars: {
190
- [vars.color.bg]: tinted.bg[2],
191
- [vars.color.border]: tinted.border[2],
192
- [vars.color.code.bg]: tinted.bg[4],
193
- [vars.color.code.fg]: tinted.fg[3],
194
- [vars.color.fg]: tinted.fg[1],
195
- [vars.color.muted.bg]: tinted.bg[4],
196
- [vars.color.muted.fg]: tinted.fg[3],
197
- [vars.button.boxShadow]:
198
- `inset 0 0 0 ${vars.button.border.width} ${vars.color.border}`,
199
- },
299
+ // ghost - hovered
300
+ [[
301
+ // `&.${modes.ghost}:not([data-disabled]):hover`,
302
+ `&.${modes.ghost}:not([data-disabled])[data-hovered]`,
303
+ ].join(',')]: {
304
+ vars: stateVars.ghost.hovered,
200
305
  },
201
306
 
202
- [`&.${modes.ghost}[data-disabled]`]: {
203
- vars: {
204
- ..._fromEntries(
205
- AVATAR_COLORS.map((c) => [
206
- vars.color.avatar[c].bg,
207
- vars.color.tinted.default.bg[2],
208
- ]),
209
- ),
210
-
211
- [vars.color.bg]: vars.color.tinted.default.bg[0],
212
- [vars.color.border]: vars.color.tinted.default.border[0],
213
- [vars.color.code.bg]: vars.color.tinted.default.bg[1],
214
- [vars.color.code.fg]: vars.color.tinted.default.border[3],
215
- [vars.color.fg]: vars.color.tinted.default.border[4],
216
- [vars.color.muted.bg]: vars.color.tinted.default.bg[1],
217
- [vars.color.muted.fg]: vars.color.tinted.default.border[3],
218
- },
307
+ // ghost - pressed
308
+ // ghost - selected
309
+ [[
310
+ `&.${modes.ghost}:not([data-disabled]):active`,
311
+ `&.${modes.ghost}:not([data-disabled])[aria-pressed="true"]`,
312
+ `&.${modes.ghost}:not([data-disabled])[data-pressed]`,
313
+ `&.${modes.ghost}:not([data-disabled])[data-selected]`,
314
+ ].join(',')]: {
315
+ vars: stateVars.ghost.pressed,
219
316
  },
220
317
 
221
- // bleed
222
-
223
- [`&.${modes.bleed}`]: {
224
- vars: {
225
- [vars.color.bg]: tinted.bg[0],
226
- [vars.color.border]: tinted.border[1],
227
- [vars.color.fg]: tinted.fg[2],
228
- [vars.color.muted.bg]: tinted.bg[1],
229
- [vars.color.muted.fg]: tinted.fg[4],
230
- [vars.button.boxShadow]: 'none',
231
- },
318
+ // ghost - disabled
319
+ [[`&.${modes.ghost}:disabled`, `&.${modes.ghost}[data-disabled]`].join(',')]: {
320
+ vars: stateVars.ghost.disabled,
232
321
  },
233
322
 
234
- [`&.${modes.bleed}:not([data-disabled]):hover`]: {
235
- vars: {
236
- [vars.color.bg]: tinted.bg[1],
237
- [vars.color.border]: tinted.border[2],
238
- [vars.color.fg]: tinted.fg[1],
239
- [vars.color.muted.bg]: tinted.bg[2],
240
- [vars.color.muted.fg]: tinted.fg[3],
241
- },
323
+ // bleed - enabled
324
+ [`&.${modes.bleed}:not([data-disabled])`]: {
325
+ vars: stateVars.bleed.enabled,
242
326
  },
243
327
 
244
- [`&.${modes.bleed}:not([data-disabled]):active`]: {
245
- vars: {
246
- [vars.color.bg]: tinted.bg[2],
247
- [vars.color.border]: tinted.border[3],
248
- [vars.color.fg]: tinted.fg[1],
249
- [vars.color.muted.bg]: tinted.bg[3],
250
- [vars.color.muted.fg]: tinted.fg[3],
251
- },
328
+ // bleed - hovered
329
+ [[
330
+ // `&.${modes.bleed}:not([data-disabled]):hover`,
331
+ `&.${modes.bleed}:not([data-disabled])[data-hovered]`,
332
+ ].join(',')]: {
333
+ vars: stateVars.bleed.hovered,
252
334
  },
253
335
 
254
- [`&.${modes.bleed}:not([data-disabled])[data-selected]`]: {
255
- vars: {
256
- [vars.color.bg]: tinted.bg[2],
257
- [vars.color.border]: tinted.border[3],
258
- [vars.color.fg]: tinted.fg[1],
259
- [vars.color.muted.bg]: tinted.bg[3],
260
- [vars.color.muted.fg]: tinted.fg[3],
261
- },
336
+ // bleed - pressed
337
+ // bleed - selected
338
+ [[
339
+ `&.${modes.bleed}:not([data-disabled]):active`,
340
+ `&.${modes.bleed}:not([data-disabled])[aria-pressed="true"]`,
341
+ `&.${modes.bleed}:not([data-disabled])[data-pressed]`,
342
+ `&.${modes.bleed}:not([data-disabled])[data-selected]`,
343
+ ].join(',')]: {
344
+ vars: stateVars.bleed.pressed,
262
345
  },
263
346
 
264
- [`&.${modes.bleed}[data-disabled]`]: {
265
- vars: {
266
- ..._fromEntries(
267
- AVATAR_COLORS.map((c) => [
268
- vars.color.avatar[c].bg,
269
- vars.color.tinted.default.bg[2],
270
- ]),
271
- ),
272
-
273
- [vars.color.bg]: vars.color.tinted.default.bg[0],
274
- [vars.color.border]: vars.color.tinted.default.border[0],
275
- [vars.color.code.bg]: vars.color.tinted.default.bg[1],
276
- [vars.color.code.fg]: vars.color.tinted.default.border[3],
277
- [vars.color.fg]: vars.color.tinted.default.border[4],
278
- [vars.color.muted.bg]: vars.color.tinted.default.bg[1],
279
- [vars.color.muted.fg]: vars.color.tinted.default.border[3],
280
- },
347
+ // bleed - disabled
348
+ [[`&.${modes.bleed}:disabled`, `&.${modes.bleed}[data-disabled]`].join(',')]: {
349
+ vars: stateVars.bleed.disabled,
281
350
  },
282
351
  },
283
352
  }),
package/src/css/primitives/card/__workshop__/{color.tsx → Color.tsx} RENAMED
@@ -20,10 +20,18 @@ interface ColorRecordNode extends Record<string, ColorNode> {}
20
20
  type ColorNode = string | ColorRecordNode
21
21
 
22
22
  export default function ColorStory(): React.JSX.Element {
23
+ // @ts-expect-error - TODO: fix this
23
24
  const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS, 'default')
24
25
 
25
26
  return (
26
- <Card display="flex" flexDirection="column" gap={4} padding={4} tone={tone}>
27
+ <Card
28
+ display="flex"
29
+ flexDirection="column"
30
+ gap={4}
31
+ padding={4}
32
+ // @ts-expect-error - TODO: fix this
33
+ tone={tone}
34
+ >
27
35
  {Object.entries(vars.color).map(([key, value]) => {
28
36
  if (key === 'palette') {
29
37
  return null
package/src/css/primitives/card/__workshop__/index.ts CHANGED
@@ -8,7 +8,7 @@ const scope: WorkshopScope = {
8
8
  {
9
9
  name: 'color',
10
10
  title: 'Color',
11
- component: lazy(() => import('./color')),
11
+ component: lazy(() => import('./Color')),
12
12
  },
13
13
  ],
14
14
  }