@sanity/ui 3.0.0-static.32 → 3.0.0-static.34
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.
- package/README.md +1 -1
- package/dist/_chunks-cjs/_visual-editing.cjs +269 -378
- package/dist/_chunks-cjs/_visual-editing.cjs.map +1 -1
- package/dist/_chunks-cjs/refractor.cjs.map +1 -1
- package/dist/_chunks-es/_visual-editing.js +270 -381
- package/dist/_chunks-es/_visual-editing.js.map +1 -1
- package/dist/_chunks-es/refractor.js.map +1 -1
- package/dist/_visual-editing.cjs +0 -2
- package/dist/_visual-editing.cjs.map +1 -1
- package/dist/_visual-editing.d.cts +2 -894
- package/dist/_visual-editing.d.ts +2 -894
- package/dist/_visual-editing.js +2 -4
- package/dist/css/index.cjs +13 -13
- package/dist/css/index.cjs.map +1 -1
- package/dist/css/index.css +1 -1
- package/dist/css/index.d.cts +805 -14697
- package/dist/css/index.d.ts +805 -14697
- package/dist/css/index.js +13 -13
- package/dist/css/index.js.map +1 -1
- package/dist/index.cjs +242 -367
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +990 -3085
- package/dist/index.d.ts +990 -3085
- package/dist/index.js +244 -361
- package/dist/index.js.map +1 -1
- package/dist/portalProvider-DgNIVviV.d.ts +575 -0
- package/dist/theme.cjs +367 -4288
- package/dist/theme.cjs.map +1 -1
- package/dist/theme.d.cts +272 -1806
- package/dist/theme.d.ts +272 -1806
- package/dist/theme.js +371 -4292
- package/dist/theme.js.map +1 -1
- package/exports/_visual-editing.ts +0 -2
- package/package.json +8 -9
- package/src/core/Root.tsx +6 -4
- package/src/core/RootProvider.tsx +4 -4
- package/src/core/__workshop__/boundary.tsx +1 -1
- package/src/core/__workshop__/index.ts +5 -3
- package/src/core/components/autocomplete/__workshop__/async.tsx +1 -1
- package/src/core/components/autocomplete/__workshop__/constrainedHeight.tsx +2 -2
- package/src/core/components/autocomplete/__workshop__/custom.tsx +2 -2
- package/src/core/components/autocomplete/__workshop__/example.tsx +2 -2
- package/src/core/components/autocomplete/__workshop__/focusAndBlur.tsx +1 -1
- package/src/core/components/autocomplete/__workshop__/fullscreen.tsx +1 -1
- package/src/core/components/autocomplete/__workshop__/index.ts +5 -3
- package/src/core/components/autocomplete/__workshop__/mock/apiStore.ts +1 -1
- package/src/core/components/autocomplete/__workshop__/mock/countries.ts +1 -1
- package/src/core/components/autocomplete/autocomplete.tsx +2 -2
- package/src/core/components/autocomplete/autocompleteOption.tsx +2 -2
- package/src/core/components/autocomplete/constants.ts +2 -2
- package/src/core/components/breadcrumbs/__workshop__/example.tsx +1 -1
- package/src/core/components/breadcrumbs/__workshop__/index.ts +5 -3
- package/src/core/components/breadcrumbs/breadcrumbs.tsx +6 -11
- package/src/core/components/dialog/__workshop__/activate.tsx +1 -1
- package/src/core/components/dialog/__workshop__/autoFocus.tsx +1 -1
- package/src/core/components/dialog/__workshop__/index.ts +5 -3
- package/src/core/components/dialog/__workshop__/layering.tsx +1 -1
- package/src/core/components/dialog/__workshop__/nested.tsx +2 -3
- package/src/core/components/dialog/__workshop__/onScroll.tsx +1 -1
- package/src/core/components/dialog/__workshop__/panes.tsx +1 -1
- package/src/core/components/dialog/__workshop__/position.tsx +1 -1
- package/src/core/components/dialog/__workshop__/props.tsx +1 -1
- package/src/core/components/dialog/__workshop__/provider.tsx +1 -1
- package/src/core/components/dialog/__workshop__/wrapped.tsx +1 -1
- package/src/core/components/dialog/dialog.tsx +5 -6
- package/src/core/components/dialog/dialogCard.tsx +2 -2
- package/src/core/components/dialog/dialogContext.ts +3 -4
- package/src/core/components/dialog/dialogProvider.tsx +2 -2
- package/src/core/components/hotkeys/__workshop__/index.ts +5 -3
- package/src/core/components/hotkeys/__workshop__/plain.tsx +1 -1
- package/src/core/components/hotkeys/hotkeys.tsx +4 -15
- package/src/core/components/menu/__workshop__/asComponent.tsx +1 -1
- package/src/core/components/menu/__workshop__/avatarMenu.tsx +1 -1
- package/src/core/components/menu/__workshop__/closableMenuButton.tsx +1 -1
- package/src/core/components/menu/__workshop__/constrainedInBoundary.tsx +3 -3
- package/src/core/components/menu/__workshop__/customMenuItem.tsx +1 -1
- package/src/core/components/menu/__workshop__/customSelectedState.tsx +1 -1
- package/src/core/components/menu/__workshop__/disableFocusOnClose.tsx +1 -1
- package/src/core/components/menu/__workshop__/groups.tsx +1 -1
- package/src/core/components/menu/__workshop__/index.ts +5 -3
- package/src/core/components/menu/__workshop__/menuButton.tsx +2 -2
- package/src/core/components/menu/__workshop__/menuGroupRight.tsx +1 -1
- package/src/core/components/menu/__workshop__/nestedMenu.tsx +1 -1
- package/src/core/components/menu/__workshop__/onCloseMenuButton.tsx +1 -1
- package/src/core/components/menu/__workshop__/selectedItem.tsx +1 -1
- package/src/core/components/menu/__workshop__/shouldFocus.tsx +1 -1
- package/src/core/components/menu/__workshop__/tones.tsx +3 -3
- package/src/core/components/menu/__workshop__/withoutArrow.tsx +1 -1
- package/src/core/components/menu/menu.test.tsx +2 -1
- package/src/core/components/menu/menu.tsx +7 -22
- package/src/core/components/menu/menuButton.tsx +4 -50
- package/src/core/components/menu/menuContext.ts +3 -15
- package/src/core/components/menu/menuDivider.tsx +2 -2
- package/src/core/components/menu/menuGroup.tsx +10 -15
- package/src/core/components/menu/menuItem.tsx +7 -18
- package/src/core/components/tab/__workshop__/example.tsx +1 -1
- package/src/core/components/tab/__workshop__/index.ts +5 -3
- package/src/core/components/tab/tab.tsx +6 -4
- package/src/core/components/tab/tabList.tsx +3 -8
- package/src/core/components/tab/tabPanel.tsx +2 -2
- package/src/core/components/toast/__workshop__/hook.tsx +1 -1
- package/src/core/components/toast/__workshop__/index.ts +5 -3
- package/src/core/components/toast/__workshop__/toast.tsx +1 -1
- package/src/core/components/toast/toast.test.tsx +2 -1
- package/src/core/components/toast/toast.tsx +2 -2
- package/src/core/components/toast/toastContext.ts +4 -4
- package/src/core/components/toast/toastLayer.tsx +3 -3
- package/src/core/components/tree/__workshop__/basic.perf.ts +1 -1
- package/src/core/components/tree/__workshop__/basic.tsx +1 -1
- package/src/core/components/tree/__workshop__/index.ts +5 -3
- package/src/core/components/tree/__workshop__/tabFromElement.tsx +1 -1
- package/src/core/components/tree/tree.tsx +8 -9
- package/src/core/components/tree/treeContext.ts +4 -4
- package/src/core/components/tree/treeGroup.tsx +6 -8
- package/src/core/components/tree/treeItem.tsx +4 -4
- package/src/core/components/tree/types.ts +1 -1
- package/src/core/components/virtualList/__workshop__/changingProps.tsx +1 -1
- package/src/core/components/virtualList/__workshop__/elementScroll.tsx +1 -1
- package/src/core/components/virtualList/__workshop__/index.ts +5 -3
- package/src/core/components/virtualList/__workshop__/infiniteList.tsx +1 -1
- package/src/core/components/virtualList/__workshop__/windowScrolll.tsx +1 -1
- package/src/core/components/virtualList/virtualList.tsx +2 -2
- package/src/core/constants.ts +0 -18
- package/src/core/hooks/useMediaIndex/__workshop__/index.ts +5 -3
- package/src/core/hooks/useMediaIndex/__workshop__/test.tsx +1 -1
- package/src/core/hooks/useMediaIndex/useMediaIndex.ts +6 -1
- package/src/core/index.ts +1 -24
- package/src/core/lib/createGlobalScopedContext.ts +1 -1
- package/src/core/lib/globalScope.ts +1 -1
- package/src/core/observers/elementSize.ts +1 -1
- package/src/core/primitives/arrow/arrow.tsx +2 -2
- package/src/core/primitives/avatar/__workshop__/asButton.tsx +1 -1
- package/src/core/primitives/avatar/__workshop__/index.ts +5 -3
- package/src/core/primitives/avatar/__workshop__/stack.tsx +1 -1
- package/src/core/primitives/avatar/__workshop__/withinButton.tsx +1 -1
- package/src/core/primitives/avatar/__workshop__/withinMenuItem.tsx +1 -1
- package/src/core/primitives/avatar/avatar.tsx +3 -10
- package/src/core/primitives/avatar/avatarCounter.tsx +2 -2
- package/src/core/primitives/avatar/avatarStack.tsx +2 -4
- package/src/core/primitives/avatar/types.ts +0 -32
- package/src/core/primitives/badge/__workshop__/index.ts +5 -3
- package/src/core/primitives/badge/__workshop__/props.tsx +1 -1
- package/src/core/primitives/badge/__workshop__/tones.tsx +3 -3
- package/src/core/primitives/badge/badge.test.tsx +2 -1
- package/src/core/primitives/badge/badge.tsx +12 -11
- package/src/core/primitives/box/__workshop__/index.ts +5 -3
- package/src/core/primitives/box/__workshop__/props.tsx +1 -1
- package/src/core/primitives/box/__workshop__/responsive.tsx +1 -1
- package/src/core/primitives/box/box.tsx +28 -32
- package/src/core/primitives/button/__workshop__/custom.tsx +5 -5
- package/src/core/primitives/button/__workshop__/customIcons.tsx +1 -1
- package/src/core/primitives/button/__workshop__/disabled.tsx +3 -3
- package/src/core/primitives/button/__workshop__/index.ts +5 -3
- package/src/core/primitives/button/__workshop__/mixedChildren.tsx +1 -1
- package/src/core/primitives/button/__workshop__/props.tsx +1 -1
- package/src/core/primitives/button/__workshop__/sanityUploadButton.tsx +1 -1
- package/src/core/primitives/button/__workshop__/stacked.tsx +1 -1
- package/src/core/primitives/button/__workshop__/styled1.tsx +1 -1
- package/src/core/primitives/button/__workshop__/styled2.tsx +1 -1
- package/src/core/primitives/button/__workshop__/textOverflow.tsx +1 -1
- package/src/core/primitives/button/__workshop__/uploadButton.tsx +1 -1
- package/src/core/primitives/button/button.test.tsx +2 -1
- package/src/core/primitives/button/button.tsx +4 -7
- package/src/core/primitives/button/types.ts +0 -20
- package/src/core/primitives/card/__workshop__/asButton.tsx +2 -2
- package/src/core/primitives/card/__workshop__/asComponent.tsx +1 -1
- package/src/core/primitives/card/__workshop__/checkered.tsx +3 -3
- package/src/core/primitives/card/__workshop__/index.ts +5 -3
- package/src/core/primitives/card/__workshop__/interactive.tsx +1 -1
- package/src/core/primitives/card/__workshop__/listNavigation.tsx +1 -1
- package/src/core/primitives/card/__workshop__/props.tsx +1 -1
- package/src/core/primitives/card/__workshop__/selected.tsx +1 -1
- package/src/core/primitives/card/__workshop__/styled.tsx +1 -1
- package/src/core/primitives/card/__workshop__/tones.tsx +3 -3
- package/src/core/primitives/card/card.tsx +4 -2
- package/src/core/primitives/card/cardContext.ts +1 -1
- package/src/core/primitives/card/cardProvider.tsx +4 -4
- package/src/core/primitives/card/types.ts +5 -19
- package/src/core/primitives/checkbox/__workshop__/example.tsx +1 -1
- package/src/core/primitives/checkbox/__workshop__/index.ts +5 -3
- package/src/core/primitives/checkbox/__workshop__/props.tsx +1 -1
- package/src/core/primitives/checkbox/__workshop__/readOnly.tsx +1 -1
- package/src/core/primitives/checkbox/__workshop__/tones.tsx +3 -3
- package/src/core/primitives/checkbox/checkbox.tsx +2 -2
- package/src/core/primitives/code/__workshop__/index.ts +5 -3
- package/src/core/primitives/code/__workshop__/opticalAlignment.tsx +1 -1
- package/src/core/primitives/code/__workshop__/props.tsx +1 -1
- package/src/core/primitives/code/code.tsx +4 -2
- package/src/core/primitives/code/refractor.tsx +1 -1
- package/src/core/primitives/container/__workshop__/example.tsx +1 -1
- package/src/core/primitives/container/__workshop__/index.ts +5 -3
- package/src/core/primitives/container/container.tsx +2 -2
- package/src/core/primitives/flex/__workshop__/example.tsx +1 -1
- package/src/core/primitives/flex/__workshop__/gap.tsx +1 -1
- package/src/core/primitives/flex/__workshop__/index.ts +5 -3
- package/src/core/primitives/flex/flex.tsx +4 -2
- package/src/core/primitives/grid/__workshop__/index.ts +5 -3
- package/src/core/primitives/grid/__workshop__/responsive.tsx +3 -3
- package/src/core/primitives/grid/grid.tsx +4 -2
- package/src/core/primitives/heading/__workshop__/index.ts +5 -3
- package/src/core/primitives/heading/__workshop__/opticalAlignment.tsx +1 -1
- package/src/core/primitives/heading/__workshop__/plain.tsx +1 -1
- package/src/core/primitives/heading/heading.tsx +2 -4
- package/src/core/primitives/inline/__workshop__/index.ts +5 -3
- package/src/core/primitives/inline/__workshop__/plain.tsx +1 -1
- package/src/core/primitives/inline/inline.tsx +4 -11
- package/src/core/primitives/kbd/__workshop__/index.ts +5 -3
- package/src/core/primitives/kbd/__workshop__/plain.tsx +1 -1
- package/src/core/primitives/kbd/kbd.tsx +4 -2
- package/src/core/primitives/label/__workshop__/index.ts +5 -3
- package/src/core/primitives/label/__workshop__/opticalAlignment.tsx +1 -1
- package/src/core/primitives/label/__workshop__/plain.tsx +1 -1
- package/src/core/primitives/label/label.tsx +2 -4
- package/src/core/primitives/layer/__workshop__/_debug.tsx +1 -1
- package/src/core/primitives/layer/__workshop__/index.ts +5 -3
- package/src/core/primitives/layer/__workshop__/multipleRoots.tsx +1 -1
- package/src/core/primitives/layer/__workshop__/nested.tsx +1 -1
- package/src/core/primitives/layer/__workshop__/responsiveZOffset.tsx +1 -1
- package/src/core/primitives/layer/layer.test.tsx +2 -1
- package/src/core/primitives/layer/layer.tsx +2 -2
- package/src/core/primitives/layer/layerCard.tsx +2 -2
- package/src/core/primitives/layer/layerContext.ts +4 -4
- package/src/core/primitives/layer/layerProvider.tsx +2 -10
- package/src/core/primitives/popover/__workshop__/AlignedStory.tsx +2 -2
- package/src/core/primitives/popover/__workshop__/MarginsStory.tsx +1 -1
- package/src/core/primitives/popover/__workshop__/MatchReferenceWidthStory.tsx +1 -1
- package/src/core/primitives/popover/__workshop__/OpenOnMountStory.tsx +1 -1
- package/src/core/primitives/popover/__workshop__/PlainStory.tsx +2 -2
- package/src/core/primitives/popover/__workshop__/RecursiveStory.tsx +3 -3
- package/src/core/primitives/popover/__workshop__/SidePanelStory.tsx +3 -3
- package/src/core/primitives/popover/__workshop__/index.ts +5 -3
- package/src/core/primitives/popover/popover.tsx +34 -17
- package/src/core/primitives/popover/popoverLayer.tsx +2 -2
- package/src/core/primitives/radio/__workshop__/example.tsx +1 -1
- package/src/core/primitives/radio/__workshop__/index.ts +5 -3
- package/src/core/primitives/radio/__workshop__/plain.tsx +1 -1
- package/src/core/primitives/radio/radio.tsx +2 -2
- package/src/core/primitives/select/__workshop__/index.ts +5 -3
- package/src/core/primitives/select/__workshop__/plain.tsx +1 -1
- package/src/core/primitives/select/__workshop__/readOnly.tsx +1 -1
- package/src/core/primitives/select/select.tsx +5 -15
- package/src/core/primitives/selectable/selectable.tsx +4 -4
- package/src/core/primitives/skeleton/__workshop__/delay.tsx +1 -1
- package/src/core/primitives/skeleton/__workshop__/index.ts +5 -3
- package/src/core/primitives/skeleton/__workshop__/skeleton.tsx +2 -2
- package/src/core/primitives/skeleton/codeSkeleton.tsx +2 -2
- package/src/core/primitives/skeleton/headingSkeleton.tsx +2 -2
- package/src/core/primitives/skeleton/labelSkeleton.tsx +2 -2
- package/src/core/primitives/skeleton/skeleton.tsx +2 -2
- package/src/core/primitives/skeleton/textSkeleton.tsx +2 -2
- package/src/core/primitives/spinner/__workshop__/Props.tsx +1 -1
- package/src/core/primitives/spinner/__workshop__/index.ts +5 -3
- package/src/core/primitives/spinner/animatedSpinnerIcon.tsx +2 -2
- package/src/core/primitives/spinner/spinner.tsx +2 -2
- package/src/core/primitives/srOnly/srOnly.tsx +2 -2
- package/src/core/primitives/stack/__workshop__/index.ts +5 -3
- package/src/core/primitives/stack/__workshop__/plain.tsx +1 -1
- package/src/core/primitives/stack/stack.tsx +5 -10
- package/src/core/primitives/switch/__workshop__/example.tsx +1 -1
- package/src/core/primitives/switch/__workshop__/index.ts +5 -3
- package/src/core/primitives/switch/__workshop__/props.tsx +1 -1
- package/src/core/primitives/switch/switch.tsx +2 -2
- package/src/core/primitives/text/__workshop__/colored.tsx +1 -1
- package/src/core/primitives/text/__workshop__/example.tsx +1 -1
- package/src/core/primitives/text/__workshop__/index.ts +5 -3
- package/src/core/primitives/text/__workshop__/opticalAlignment.tsx +1 -1
- package/src/core/primitives/text/text.tsx +4 -4
- package/src/core/primitives/textArea/__workshop__/index.ts +5 -3
- package/src/core/primitives/textArea/__workshop__/plain.tsx +1 -1
- package/src/core/primitives/textArea/textArea.tsx +5 -15
- package/src/core/primitives/textInput/__workshop__/clearButton.tsx +1 -1
- package/src/core/primitives/textInput/__workshop__/customValidity.tsx +1 -1
- package/src/core/primitives/textInput/__workshop__/index.ts +5 -3
- package/src/core/primitives/textInput/__workshop__/plain.tsx +1 -1
- package/src/core/primitives/textInput/__workshop__/readOnly.tsx +1 -1
- package/src/core/primitives/textInput/__workshop__/states.tsx +1 -1
- package/src/core/primitives/textInput/__workshop__/tones.tsx +1 -1
- package/src/core/primitives/textInput/__workshop__/typed.tsx +1 -1
- package/src/core/primitives/textInput/textInput.tsx +6 -9
- package/src/core/primitives/tooltip/__workshop__/customPortal.tsx +1 -1
- package/src/core/primitives/tooltip/__workshop__/index.ts +5 -3
- package/src/core/primitives/tooltip/__workshop__/overflowingBoundary.tsx +1 -1
- package/src/core/primitives/tooltip/__workshop__/props.tsx +1 -1
- package/src/core/primitives/tooltip/__workshop__/resizableBoundary.tsx +1 -1
- package/src/core/primitives/tooltip/constants.ts +1 -1
- package/src/core/primitives/tooltip/tooltip.test.tsx +2 -4
- package/src/core/primitives/tooltip/tooltip.tsx +5 -9
- package/src/core/primitives/tooltip/tooltipDelayGroup/tooltipDelayGroupContext.tsx +4 -2
- package/src/core/primitives/tooltip/tooltipDelayGroup/tooltipDelayGroupProvider.tsx +5 -3
- package/src/core/primitives/tooltip/tooltipLayer.tsx +2 -2
- package/src/core/{types/props.ts → types.ts} +27 -0
- package/src/core/utils/boundaryElement/__workshop__/index.ts +5 -3
- package/src/core/utils/boundaryElement/__workshop__/plain.tsx +1 -1
- package/src/core/utils/boundaryElement/boundaryElement.test.tsx +2 -1
- package/src/core/utils/boundaryElement/boundaryElementContext.ts +7 -4
- package/src/core/utils/boundaryElement/boundaryElementProvider.tsx +2 -2
- package/src/core/utils/elementQuery/__workshop__/customMedia.tsx +1 -1
- package/src/core/utils/elementQuery/__workshop__/index.ts +5 -3
- package/src/core/utils/elementQuery/elementQuery.tsx +2 -2
- package/src/core/utils/getElementRef.ts +1 -1
- package/src/core/utils/portal/__workshop__/index.ts +5 -3
- package/src/core/utils/portal/__workshop__/named.tsx +1 -1
- package/src/core/utils/portal/portal.test.tsx +2 -1
- package/src/core/utils/portal/portalContext.ts +5 -2
- package/src/core/utils/portal/portalProvider.tsx +5 -9
- package/src/css/_responsiveClassName.ts +2 -2
- package/src/css/_style.css.ts +1 -1
- package/src/css/components/breadcrumbs/breadcrumbs.css.ts +1 -1
- package/src/css/components/dialog/dialog.css.ts +9 -17
- package/src/css/components/menu/menu.css.ts +2 -2
- package/src/css/components/menu/menu.ts +2 -2
- package/src/css/components/skeleton/skeleton.css.ts +2 -6
- package/src/css/components/toast/toast.css.ts +2 -2
- package/src/css/components/toast/toast.ts +2 -2
- package/src/css/components/tree/tree.css.ts +1 -1
- package/src/css/components/tree/tree.ts +1 -1
- package/src/css/defaultTheme.css.ts +59 -60
- package/src/css/layers.css.ts +4 -1
- package/src/css/primitives/_arrow/_arrow.css.ts +5 -5
- package/src/css/primitives/_input/_input.css.ts +4 -4
- package/src/css/primitives/_selectable/_selectable.css.ts +4 -4
- package/src/css/primitives/_selectable/types.ts +2 -2
- package/src/css/primitives/avatar/avatar.css.ts +10 -10
- package/src/css/primitives/badge/badge.css.ts +4 -4
- package/src/css/primitives/badge/types.ts +8 -2
- package/src/css/primitives/box/box.css.ts +2 -2
- package/src/css/primitives/button/button.css.ts +6 -6
- package/src/css/primitives/button/button.ts +2 -2
- package/src/css/primitives/button/types.ts +3 -3
- package/src/css/primitives/card/__workshop__/color.tsx +9 -9
- package/src/css/primitives/card/__workshop__/index.ts +5 -3
- package/src/css/primitives/card/card.css.ts +12 -18
- package/src/css/primitives/card/types.ts +3 -3
- package/src/css/primitives/checkbox/checkbox.css.ts +3 -3
- package/src/css/primitives/checkbox/checkbox.ts +3 -3
- package/src/css/primitives/code/code.css.ts +4 -3
- package/src/css/primitives/code/types.ts +3 -4
- package/src/css/primitives/container/container.css.ts +1 -1
- package/src/css/primitives/heading/heading.css.ts +5 -4
- package/src/css/primitives/heading/types.ts +3 -6
- package/src/css/primitives/kbd/kbd.css.ts +1 -1
- package/src/css/primitives/label/label.css.ts +5 -4
- package/src/css/primitives/label/types.ts +0 -8
- package/src/css/primitives/popover/popover.css.ts +2 -2
- package/src/css/primitives/popover/popover.ts +2 -2
- package/src/css/primitives/radio/radio.css.ts +3 -3
- package/src/css/primitives/radio/radio.ts +3 -3
- package/src/css/primitives/root/root.css.ts +2 -2
- package/src/css/primitives/root/root.ts +2 -2
- package/src/css/primitives/root/types.ts +3 -3
- package/src/css/primitives/select/select.css.ts +3 -3
- package/src/css/primitives/spinner/spinner.css.ts +2 -6
- package/src/css/primitives/spinner/spinner.ts +2 -2
- package/src/css/primitives/srOnly/srOnly.css.ts +1 -1
- package/src/css/primitives/srOnly/srOnly.ts +1 -1
- package/src/css/primitives/stack/stack.css.ts +1 -1
- package/src/css/primitives/stack/stack.ts +1 -1
- package/src/css/primitives/switch/switch.css.ts +5 -5
- package/src/css/primitives/text/text.css.ts +5 -4
- package/src/css/primitives/text/types.ts +3 -5
- package/src/css/primitives/textArea/textArea.css.ts +1 -1
- package/src/css/primitives/textInput/textInput.css.ts +4 -4
- package/src/css/primitives/tooltip/tooltip.css.ts +1 -1
- package/src/css/props/alignItems/alignItems.ts +1 -1
- package/src/css/props/border/border.ts +1 -16
- package/src/css/props/boxSizing/boxSizing.css.ts +2 -1
- package/src/css/props/boxSizing/boxSizing.ts +0 -3
- package/src/css/props/display/display.ts +1 -10
- package/src/css/props/flex/flex.ts +1 -1
- package/src/css/props/flexDirection/flexDirection.ts +1 -1
- package/src/css/props/flexWrap/flexWrap.ts +1 -1
- package/src/css/props/font/font.css.ts +3 -2
- package/src/css/props/font/font.ts +1 -1
- package/src/css/props/gap/gap.ts +1 -1
- package/src/css/props/gridAutoColumns/gridAutoColumns.css.ts +2 -2
- package/src/css/props/gridAutoColumns/gridAutoColumns.ts +2 -2
- package/src/css/props/gridAutoColumns/types.ts +0 -10
- package/src/css/props/gridAutoFlow/gridAutoFlow.ts +2 -2
- package/src/css/props/gridAutoFlow/types.ts +0 -4
- package/src/css/props/gridAutoRows/gridAutoRows.ts +2 -2
- package/src/css/props/gridAutoRows/types.ts +0 -4
- package/src/css/props/gridColumn/gridColumn.ts +3 -3
- package/src/css/props/gridColumn/types.ts +0 -10
- package/src/css/props/gridColumnEnd/gridColumnEnd.ts +3 -3
- package/src/css/props/gridColumnEnd/types.ts +0 -10
- package/src/css/props/gridColumnStart/gridColumnStart.ts +3 -6
- package/src/css/props/gridColumnStart/types.ts +0 -10
- package/src/css/props/gridRow/gridRow.ts +3 -3
- package/src/css/props/gridRow/types.ts +0 -10
- package/src/css/props/gridRowEnd/gridRowEnd.ts +3 -3
- package/src/css/props/gridRowEnd/types.ts +0 -10
- package/src/css/props/gridRowStart/gridRowStart.ts +3 -3
- package/src/css/props/gridRowStart/types.ts +0 -10
- package/src/css/props/gridTemplateColumns/gridTemplateColumns.ts +2 -2
- package/src/css/props/gridTemplateColumns/types.ts +0 -10
- package/src/css/props/gridTemplateRows/gridTemplateRows.ts +2 -2
- package/src/css/props/gridTemplateRows/types.ts +0 -10
- package/src/css/props/height/height.ts +1 -1
- package/src/css/props/height/types.ts +0 -6
- package/src/css/props/inset/inset.ts +1 -1
- package/src/css/props/justifyContent/justifyContent.ts +1 -1
- package/src/css/props/margin/margin.ts +1 -1
- package/src/css/props/maxWidth/maxWidth.ts +1 -1
- package/src/css/props/minHeight/minHeight.ts +1 -1
- package/src/css/props/minWidth/minWidth.ts +1 -1
- package/src/css/props/outline/outline.ts +1 -1
- package/src/css/props/overflow/overflow.ts +1 -1
- package/src/css/props/overflow/types.ts +0 -6
- package/src/css/props/padding/padding.ts +1 -1
- package/src/css/props/pointerEvents/pointerEvents.ts +1 -1
- package/src/css/props/position/position.ts +1 -1
- package/src/css/props/radius/radius.ts +1 -1
- package/src/css/props/shadow/shadow.ts +1 -1
- package/src/css/props/textAlign/textAlign.ts +1 -1
- package/src/css/props/textOverflow/textOverflow.ts +1 -1
- package/src/css/props/width/width.ts +1 -1
- package/src/css/types.ts +225 -53
- package/src/css/util.ts +2 -2
- package/src/css/vars.css.ts +33 -36
- package/src/theme/{v3/_parseColorToken.ts → _parseColorToken.ts} +2 -2
- package/src/theme/buildTheme.ts +33 -0
- package/src/theme/constants.ts +90 -0
- package/src/theme/defaults/color.ts +197 -0
- package/src/theme/{v2/defaults/config.ts → defaults/common.ts} +3 -16
- package/src/theme/{v3/defaultFonts.ts → defaults/fonts.ts} +2 -2
- package/src/theme/index.ts +4 -5
- package/src/theme/{v3/resolveTokens.ts → resolveTokens.ts} +15 -15
- package/src/theme/types.ts +355 -15
- package/dist/css/layers.css +0 -4
- package/dist/css/primitives/popover/popover.css +0 -4
- package/src/core/__DEV__.ts +0 -5
- package/src/core/_compat/helpers.ts +0 -72
- package/src/core/_compat/styles/_responsive.ts +0 -19
- package/src/core/_compat/theme/theme.test.tsx +0 -73
- package/src/core/_compat/theme/themeColorProvider.tsx +0 -24
- package/src/core/_compat/theme/themeContext.ts +0 -10
- package/src/core/_compat/theme/themeProvider.tsx +0 -68
- package/src/core/_compat/theme/types.ts +0 -10
- package/src/core/_compat/theme/useRootTheme.ts +0 -15
- package/src/core/_compat/theme/useTheme.ts +0 -12
- package/src/core/_compat/types.ts +0 -191
- package/src/core/hooks/useArrayProp.ts +0 -26
- package/src/core/hooks/useClickOutside.test.tsx +0 -481
- package/src/core/hooks/useClickOutside.ts +0 -113
- package/src/core/hooks/useElementRect/__workshop__/example.tsx +0 -30
- package/src/core/hooks/useElementRect/__workshop__/index.ts +0 -14
- package/src/core/hooks/useElementRect/useElementRect.ts +0 -13
- package/src/core/hooks/useForwardedRef.ts +0 -19
- package/src/core/hooks/useIsomorphicEffect.ts +0 -7
- package/src/core/primitives/badge/types.ts +0 -18
- package/src/core/primitives/box/types.ts +0 -22
- package/src/core/primitives/flex/types.ts +0 -27
- package/src/core/primitives/grid/types.ts +0 -17
- package/src/core/primitives/selectable/types.ts +0 -7
- package/src/core/primitives/types.ts +0 -153
- package/src/core/types/gridItem.ts +0 -32
- package/src/core/types/placement.ts +0 -18
- package/src/core/types/radius.ts +0 -7
- package/src/core/types/textAlign.ts +0 -7
- package/src/core/utils/spanWithTextOverflow.tsx +0 -10
- package/src/theme/getScopedTheme.ts +0 -88
- package/src/theme/v0/avatar.ts +0 -10
- package/src/theme/v0/color/_generic.ts +0 -35
- package/src/theme/v0/color/_system.ts +0 -17
- package/src/theme/v0/color/base.ts +0 -21
- package/src/theme/v0/color/button.ts +0 -42
- package/src/theme/v0/color/card.ts +0 -19
- package/src/theme/v0/color/color.ts +0 -40
- package/src/theme/v0/color/index.ts +0 -11
- package/src/theme/v0/color/input.ts +0 -34
- package/src/theme/v0/color/muted.ts +0 -26
- package/src/theme/v0/color/selectable.ts +0 -31
- package/src/theme/v0/color/solid.ts +0 -26
- package/src/theme/v0/color/spot.ts +0 -13
- package/src/theme/v0/css.ts +0 -10
- package/src/theme/v0/focusRing.ts +0 -5
- package/src/theme/v0/font.ts +0 -40
- package/src/theme/v0/index.ts +0 -10
- package/src/theme/v0/input.ts +0 -23
- package/src/theme/v0/layer.ts +0 -6
- package/src/theme/v0/shadow.ts +0 -15
- package/src/theme/v0/styles.ts +0 -13
- package/src/theme/v0/theme.ts +0 -72
- package/src/theme/v2/avatar.ts +0 -12
- package/src/theme/v2/build/_deprecated/color/_selectable/createSelectableTones.ts +0 -76
- package/src/theme/v2/build/_deprecated/color/_solid/createSolidTones.ts +0 -54
- package/src/theme/v2/build/_deprecated/color/button/createButtonModes.ts +0 -22
- package/src/theme/v2/build/_deprecated/color/button/createButtonTones.ts +0 -55
- package/src/theme/v2/build/_deprecated/color/card/createCardStates.ts +0 -60
- package/src/theme/v2/build/_deprecated/color/color.test.ts +0 -63
- package/src/theme/v2/build/_deprecated/color/defaults.ts +0 -390
- package/src/theme/v2/build/_deprecated/color/factory.ts +0 -141
- package/src/theme/v2/build/_deprecated/color/index.ts +0 -1
- package/src/theme/v2/build/_deprecated/color/input/createInputModes.ts +0 -86
- package/src/theme/v2/build/_deprecated/color/muted/createMuted.ts +0 -54
- package/src/theme/v2/build/_deprecated/color/spot/createSpot.ts +0 -20
- package/src/theme/v2/build/buildColorTheme.test.ts +0 -185
- package/src/theme/v2/build/buildColorTheme.ts +0 -494
- package/src/theme/v2/build/buildTheme.test.ts +0 -89
- package/src/theme/v2/build/buildTheme.ts +0 -37
- package/src/theme/v2/build/colorToken/colorToken.ts +0 -19
- package/src/theme/v2/build/colorToken/compileColorToken.ts +0 -21
- package/src/theme/v2/build/colorToken/index.ts +0 -2
- package/src/theme/v2/build/colorToken/types.ts +0 -6
- package/src/theme/v2/build/index.ts +0 -3
- package/src/theme/v2/build/lib/color-fns/blend/index.ts +0 -3
- package/src/theme/v2/build/lib/color-fns/blend/mix.ts +0 -21
- package/src/theme/v2/build/lib/color-fns/blend/multiply.ts +0 -18
- package/src/theme/v2/build/lib/color-fns/blend/screen.ts +0 -18
- package/src/theme/v2/build/lib/color-fns/color-fns.test.ts +0 -68
- package/src/theme/v2/build/lib/color-fns/contrastRatio.ts +0 -34
- package/src/theme/v2/build/lib/color-fns/convert.ts +0 -150
- package/src/theme/v2/build/lib/color-fns/index.ts +0 -6
- package/src/theme/v2/build/lib/color-fns/parse.ts +0 -60
- package/src/theme/v2/build/lib/color-fns/rgba.ts +0 -14
- package/src/theme/v2/build/lib/color-fns/types.ts +0 -28
- package/src/theme/v2/build/lib/isRecord.ts +0 -3
- package/src/theme/v2/build/lib/utils.ts +0 -19
- package/src/theme/v2/build/merge.ts +0 -28
- package/src/theme/v2/build/mixThemeColor.test.ts +0 -23
- package/src/theme/v2/build/mixThemeColor.ts +0 -53
- package/src/theme/v2/build/renderColorTheme.ts +0 -532
- package/src/theme/v2/build/renderColorValue.ts +0 -85
- package/src/theme/v2/build/resolveColorTokens.ts +0 -268
- package/src/theme/v2/color/_constants.ts +0 -45
- package/src/theme/v2/color/_helpers.ts +0 -24
- package/src/theme/v2/color/_system.ts +0 -38
- package/src/theme/v2/color/avatar.ts +0 -11
- package/src/theme/v2/color/badge.ts +0 -12
- package/src/theme/v2/color/button.ts +0 -11
- package/src/theme/v2/color/color.ts +0 -28
- package/src/theme/v2/color/index.ts +0 -13
- package/src/theme/v2/color/input.ts +0 -23
- package/src/theme/v2/color/kbd.ts +0 -6
- package/src/theme/v2/color/selectable.ts +0 -8
- package/src/theme/v2/color/shadow.ts +0 -7
- package/src/theme/v2/color/state.ts +0 -41
- package/src/theme/v2/color/syntax.ts +0 -39
- package/src/theme/v2/config/helpers.ts +0 -48
- package/src/theme/v2/config/index.ts +0 -4
- package/src/theme/v2/config/system.ts +0 -114
- package/src/theme/v2/config/tokens/color/index.ts +0 -1
- package/src/theme/v2/config/tokens/color/types.ts +0 -137
- package/src/theme/v2/config/tokens/index.ts +0 -3
- package/src/theme/v2/config/tokens/parseTokenValue.test.ts +0 -44
- package/src/theme/v2/config/tokens/parseTokenValue.ts +0 -133
- package/src/theme/v2/config/tokens/types.ts +0 -53
- package/src/theme/v2/config/types.ts +0 -47
- package/src/theme/v2/defaults/colorPalette.ts +0 -5
- package/src/theme/v2/defaults/colorTokens.ts +0 -648
- package/src/theme/v2/defaults/fonts.ts +0 -227
- package/src/theme/v2/index.ts +0 -6
- package/src/theme/v2/input.ts +0 -31
- package/src/theme/v2/theme.ts +0 -45
- package/src/theme/v3/_constants.ts +0 -29
- package/src/theme/v3/buildTheme_v3.ts +0 -39
- package/src/theme/v3/color/_constants.ts +0 -15
- package/src/theme/v3/color/avatar.ts +0 -14
- package/src/theme/v3/color/card.ts +0 -79
- package/src/theme/v3/color/color.ts +0 -98
- package/src/theme/v3/color/element.ts +0 -19
- package/src/theme/v3/color/index.ts +0 -7
- package/src/theme/v3/color/token.ts +0 -32
- package/src/theme/v3/color/tokens.ts +0 -5
- package/src/theme/v3/defaultTokens.ts +0 -199
- package/src/theme/v3/index.ts +0 -9
- package/src/theme/v3/palette/constants.ts +0 -15
- package/src/theme/v3/palette/index.ts +0 -2
- package/src/theme/v3/palette/types.ts +0 -7
- package/src/theme/v3/tokens.ts +0 -16
- package/src/theme/v3/types.ts +0 -133
- package/src/theme/versioning/getTheme_v2.ts +0 -58
- package/src/theme/versioning/index.ts +0 -1
- package/src/theme/versioning/is_v0.ts +0 -7
- package/src/theme/versioning/is_v2.ts +0 -7
- package/src/theme/versioning/themeColor_v0_v2.ts +0 -245
- package/src/theme/versioning/themeColor_v2_v2_9.ts +0 -49
- package/src/theme/versioning/themeColor_v3_v2.ts +0 -383
- package/src/theme/versioning/v0_v2.ts +0 -95
- package/src/theme/versioning/v2_v0.ts +0 -127
- package/src/theme/versioning/v3_v2.ts +0 -130
- /package/src/theme/{v3/merge.ts → merge.ts} +0 -0
package/dist/css/layers.css
DELETED
package/src/core/__DEV__.ts
DELETED
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
createColorTheme as _createColorTheme,
|
|
3
|
-
hexToRgb as _hexToRgb,
|
|
4
|
-
hslToRgb as _hslToRgb,
|
|
5
|
-
multiply as _multiply,
|
|
6
|
-
parseColor as _parseColor,
|
|
7
|
-
rgba as _rgba,
|
|
8
|
-
rgbToHex as _rgbToHex,
|
|
9
|
-
rgbToHsl as _rgbToHsl,
|
|
10
|
-
screen as _screen,
|
|
11
|
-
} from '@sanity/ui/theme'
|
|
12
|
-
|
|
13
|
-
export {
|
|
14
|
-
/** @deprecated use `px` from `@sanity/ui/css` */
|
|
15
|
-
px,
|
|
16
|
-
/** @deprecated use `rem` from `@sanity/ui/css` */
|
|
17
|
-
rem,
|
|
18
|
-
} from '@sanity/ui/css'
|
|
19
|
-
|
|
20
|
-
/**
|
|
21
|
-
* @public
|
|
22
|
-
* @deprecated Use `createColorTheme` from `@sanity/ui/theme` instead.
|
|
23
|
-
*/
|
|
24
|
-
export const createColorTheme = _createColorTheme
|
|
25
|
-
|
|
26
|
-
/**
|
|
27
|
-
* @public
|
|
28
|
-
* @deprecated Use `hexToRgb` from `@sanity/ui/theme` instead.
|
|
29
|
-
*/
|
|
30
|
-
export const hexToRgb = _hexToRgb
|
|
31
|
-
|
|
32
|
-
/**
|
|
33
|
-
* @public
|
|
34
|
-
* @deprecated Use `hslToRgb` from `@sanity/ui/theme` instead.
|
|
35
|
-
*/
|
|
36
|
-
export const hslToRgb = _hslToRgb
|
|
37
|
-
|
|
38
|
-
/**
|
|
39
|
-
* @public
|
|
40
|
-
* @deprecated Use `multiply` from `@sanity/ui/theme` instead.
|
|
41
|
-
*/
|
|
42
|
-
export const multiply = _multiply
|
|
43
|
-
|
|
44
|
-
/**
|
|
45
|
-
* @public
|
|
46
|
-
* @deprecated Use `parseColor` from `@sanity/ui/theme` instead.
|
|
47
|
-
*/
|
|
48
|
-
export const parseColor = _parseColor
|
|
49
|
-
|
|
50
|
-
/**
|
|
51
|
-
* @public
|
|
52
|
-
* @deprecated Use `rgbToHex` from `@sanity/ui/theme` instead.
|
|
53
|
-
*/
|
|
54
|
-
export const rgbToHex = _rgbToHex
|
|
55
|
-
|
|
56
|
-
/**
|
|
57
|
-
* @public
|
|
58
|
-
* @deprecated Use `rgbToHsl` from `@sanity/ui/theme` instead.
|
|
59
|
-
*/
|
|
60
|
-
export const rgbToHsl = _rgbToHsl
|
|
61
|
-
|
|
62
|
-
/**
|
|
63
|
-
* @public
|
|
64
|
-
* @deprecated Use `rgba` from `@sanity/ui/theme` instead.
|
|
65
|
-
*/
|
|
66
|
-
export const rgba = _rgba
|
|
67
|
-
|
|
68
|
-
/**
|
|
69
|
-
* @public
|
|
70
|
-
* @deprecated Use `screen` from `@sanity/ui/theme` instead.
|
|
71
|
-
*/
|
|
72
|
-
export const screen = _screen
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import type {CSSObject} from '@sanity/ui/theme'
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* @internal
|
|
5
|
-
* @deprecated do not use
|
|
6
|
-
*/
|
|
7
|
-
export function _responsive<T>(
|
|
8
|
-
media: number[],
|
|
9
|
-
values: T[],
|
|
10
|
-
callback: (value: T, index: number, array: T[]) => CSSObject,
|
|
11
|
-
): CSSObject[] {
|
|
12
|
-
const statements = values?.map(callback) || []
|
|
13
|
-
|
|
14
|
-
return statements.map((statement, mediaIndex) => {
|
|
15
|
-
if (mediaIndex === 0) return statement
|
|
16
|
-
|
|
17
|
-
return {[`@media screen and (min-width: ${media[mediaIndex - 1]}px)`]: statement}
|
|
18
|
-
})
|
|
19
|
-
}
|
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
import {buildTheme} from '@sanity/ui/theme'
|
|
2
|
-
import {describe, expect, it, vi} from 'vitest'
|
|
3
|
-
|
|
4
|
-
import {render} from '../../../../test'
|
|
5
|
-
import {ThemeContext} from './themeContext'
|
|
6
|
-
import type {ThemeContextValue} from './types'
|
|
7
|
-
import {useRootTheme} from './useRootTheme'
|
|
8
|
-
|
|
9
|
-
describe('theme', () => {
|
|
10
|
-
describe('useRootTheme', () => {
|
|
11
|
-
it('should get context value', async () => {
|
|
12
|
-
const log = vi.fn()
|
|
13
|
-
|
|
14
|
-
function Debug() {
|
|
15
|
-
const rootTheme = useRootTheme()
|
|
16
|
-
|
|
17
|
-
log(rootTheme)
|
|
18
|
-
|
|
19
|
-
return <>debug</>
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
function Root() {
|
|
23
|
-
const value: ThemeContextValue = {
|
|
24
|
-
version: 0.0,
|
|
25
|
-
scheme: 'light',
|
|
26
|
-
theme: buildTheme(),
|
|
27
|
-
tone: 'default',
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
return (
|
|
31
|
-
<ThemeContext.Provider value={value}>
|
|
32
|
-
<Debug />
|
|
33
|
-
</ThemeContext.Provider>
|
|
34
|
-
)
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
render(<Root />)
|
|
38
|
-
|
|
39
|
-
expect(log.mock.calls[0][0].version).toBe(0.0)
|
|
40
|
-
expect(log.mock.calls[0][0].scheme).toBe('light')
|
|
41
|
-
expect(log.mock.calls[0][0].tone).toBe('default')
|
|
42
|
-
})
|
|
43
|
-
|
|
44
|
-
it('should fail when no context value is provided', async () => {
|
|
45
|
-
const log = vi.fn()
|
|
46
|
-
|
|
47
|
-
function Debug() {
|
|
48
|
-
try {
|
|
49
|
-
useRootTheme()
|
|
50
|
-
} catch (err) {
|
|
51
|
-
log(err)
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
return null
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
function Root() {
|
|
58
|
-
return (
|
|
59
|
-
<ThemeContext.Provider
|
|
60
|
-
// @ts-expect-error - we want to test the error case
|
|
61
|
-
value={undefined}
|
|
62
|
-
>
|
|
63
|
-
<Debug />
|
|
64
|
-
</ThemeContext.Provider>
|
|
65
|
-
)
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
render(<Root />)
|
|
69
|
-
|
|
70
|
-
expect(log.mock.calls[0][0].message).toEqual('useRootTheme(): missing context value')
|
|
71
|
-
})
|
|
72
|
-
})
|
|
73
|
-
})
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import type {ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
|
|
2
|
-
import type {ReactElement, ReactNode} from 'react'
|
|
3
|
-
|
|
4
|
-
import {ThemeProvider} from './themeProvider'
|
|
5
|
-
import {useRootTheme} from './useRootTheme'
|
|
6
|
-
|
|
7
|
-
/** @public */
|
|
8
|
-
export interface ThemeColorProviderProps {
|
|
9
|
-
children?: ReactNode
|
|
10
|
-
scheme?: ThemeColorSchemeKey
|
|
11
|
-
tone?: ThemeColorCardToneKey
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
/** @public */
|
|
15
|
-
export function ThemeColorProvider(props: ThemeColorProviderProps): ReactElement {
|
|
16
|
-
const {children, scheme, tone} = props
|
|
17
|
-
const root = useRootTheme()
|
|
18
|
-
|
|
19
|
-
return (
|
|
20
|
-
<ThemeProvider scheme={scheme || root.scheme} theme={root.theme} tone={tone}>
|
|
21
|
-
{children}
|
|
22
|
-
</ThemeProvider>
|
|
23
|
-
)
|
|
24
|
-
}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import type {Context} from 'react'
|
|
2
|
-
|
|
3
|
-
import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
|
|
4
|
-
import type {ThemeContextValue} from './types'
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* @internal
|
|
8
|
-
*/
|
|
9
|
-
export const ThemeContext: Context<ThemeContextValue | null> =
|
|
10
|
-
createGlobalScopedContext<ThemeContextValue | null>('@sanity/ui/context/theme', null)
|
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
getScopedTheme,
|
|
3
|
-
type RootTheme,
|
|
4
|
-
type Theme,
|
|
5
|
-
type ThemeColorCardToneKey,
|
|
6
|
-
type ThemeColorSchemeKey,
|
|
7
|
-
} from '@sanity/ui/theme'
|
|
8
|
-
import {type ReactElement, type ReactNode, useContext, useMemo} from 'react'
|
|
9
|
-
import {ThemeProvider as StyledThemeProvider} from 'styled-components'
|
|
10
|
-
|
|
11
|
-
import {CardProvider} from '../../primitives/card/cardProvider'
|
|
12
|
-
import {ThemeColorProvider} from './themeColorProvider'
|
|
13
|
-
import {ThemeContext} from './themeContext'
|
|
14
|
-
import type {ThemeContextValue} from './types'
|
|
15
|
-
|
|
16
|
-
/** @public */
|
|
17
|
-
export interface ThemeProviderProps {
|
|
18
|
-
children?: ReactNode
|
|
19
|
-
scheme?: ThemeColorSchemeKey
|
|
20
|
-
theme?: RootTheme
|
|
21
|
-
tone?: ThemeColorCardToneKey
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
/** @public */
|
|
25
|
-
export function ThemeProvider(props: ThemeProviderProps): ReactElement {
|
|
26
|
-
const parentTheme = useContext(ThemeContext)
|
|
27
|
-
const {children} = props
|
|
28
|
-
const scheme = props.scheme ?? (parentTheme?.scheme || 'light')
|
|
29
|
-
const rootTheme = props.theme ?? (parentTheme?.theme || null)
|
|
30
|
-
const tone = props.tone ?? (parentTheme?.tone || 'default')
|
|
31
|
-
|
|
32
|
-
const themeContext: ThemeContextValue | null = useMemo(() => {
|
|
33
|
-
if (!rootTheme) return null
|
|
34
|
-
|
|
35
|
-
return {
|
|
36
|
-
version: 0.0,
|
|
37
|
-
theme: rootTheme,
|
|
38
|
-
scheme,
|
|
39
|
-
tone,
|
|
40
|
-
}
|
|
41
|
-
}, [rootTheme, scheme, tone])
|
|
42
|
-
|
|
43
|
-
const theme: Theme | null = useMemo(() => {
|
|
44
|
-
if (!rootTheme) return null
|
|
45
|
-
|
|
46
|
-
return getScopedTheme(rootTheme, scheme, tone)
|
|
47
|
-
}, [scheme, rootTheme, tone])
|
|
48
|
-
|
|
49
|
-
if (!theme) {
|
|
50
|
-
return <pre>ThemeProvider: no "theme" property provided</pre>
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
return (
|
|
54
|
-
<CardProvider
|
|
55
|
-
scheme={scheme}
|
|
56
|
-
tone={tone}
|
|
57
|
-
unstable_CompatProvider={
|
|
58
|
-
// Render a theme provider around the card if the scheme or tone differs from the root theme.
|
|
59
|
-
// This is needed for backwards compatibility with the legacy theme API.
|
|
60
|
-
ThemeColorProvider
|
|
61
|
-
}
|
|
62
|
-
>
|
|
63
|
-
<ThemeContext.Provider value={themeContext}>
|
|
64
|
-
<StyledThemeProvider theme={theme}>{children}</StyledThemeProvider>
|
|
65
|
-
</ThemeContext.Provider>
|
|
66
|
-
</CardProvider>
|
|
67
|
-
)
|
|
68
|
-
}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import type {RootTheme, ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
|
|
2
|
-
|
|
3
|
-
/** @public */
|
|
4
|
-
export interface ThemeContextValue {
|
|
5
|
-
/** @deprecated No longer used */
|
|
6
|
-
version: 0.0
|
|
7
|
-
scheme: ThemeColorSchemeKey
|
|
8
|
-
theme: RootTheme
|
|
9
|
-
tone: ThemeColorCardToneKey
|
|
10
|
-
}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import {useContext} from 'react'
|
|
2
|
-
|
|
3
|
-
import {ThemeContext} from './themeContext'
|
|
4
|
-
import type {ThemeContextValue} from './types'
|
|
5
|
-
|
|
6
|
-
/** @public */
|
|
7
|
-
export function useRootTheme(): ThemeContextValue {
|
|
8
|
-
const value = useContext(ThemeContext)
|
|
9
|
-
|
|
10
|
-
if (!value) {
|
|
11
|
-
throw new Error('useRootTheme(): missing context value')
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
return value as unknown as ThemeContextValue
|
|
15
|
-
}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import {getTheme_v2, type Theme, type Theme_v2} from '@sanity/ui/theme'
|
|
2
|
-
import {useTheme as useStyledTheme} from 'styled-components'
|
|
3
|
-
|
|
4
|
-
/** @public */
|
|
5
|
-
export function useTheme(): Theme {
|
|
6
|
-
return useStyledTheme() as Theme
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
/** @public */
|
|
10
|
-
export function useTheme_v2(): Theme_v2 {
|
|
11
|
-
return getTheme_v2(useStyledTheme() as Theme)
|
|
12
|
-
}
|
|
@@ -1,191 +0,0 @@
|
|
|
1
|
-
// This file re-exports API members which existed in the `@sanity/ui` export in v1.
|
|
2
|
-
|
|
3
|
-
import {
|
|
4
|
-
type BaseTheme as _BaseTheme,
|
|
5
|
-
type HSL as _HSL,
|
|
6
|
-
type PartialThemeColorBuilderOpts,
|
|
7
|
-
type RGB as _RGB,
|
|
8
|
-
type RootTheme as _RootTheme,
|
|
9
|
-
type Theme as _Theme,
|
|
10
|
-
type ThemeAvatar,
|
|
11
|
-
type ThemeBoxShadow,
|
|
12
|
-
type ThemeColor,
|
|
13
|
-
type ThemeColorBase,
|
|
14
|
-
type ThemeColorBuilderOpts,
|
|
15
|
-
type ThemeColorButton,
|
|
16
|
-
type ThemeColorButtonModeKey as _ThemeColorButtonModeKey,
|
|
17
|
-
type ThemeColorButtonState,
|
|
18
|
-
type ThemeColorButtonStates,
|
|
19
|
-
type ThemeColorButtonTones,
|
|
20
|
-
type ThemeColorCard,
|
|
21
|
-
type ThemeColorCardState,
|
|
22
|
-
type ThemeColorGenericState,
|
|
23
|
-
type ThemeColorInput,
|
|
24
|
-
type ThemeColorInputState,
|
|
25
|
-
type ThemeColorInputStates,
|
|
26
|
-
type ThemeColorMuted,
|
|
27
|
-
type ThemeColorMutedTone,
|
|
28
|
-
type ThemeColorName,
|
|
29
|
-
type ThemeColorScheme,
|
|
30
|
-
type ThemeColorSchemeKey as _ThemeColorSchemeKey,
|
|
31
|
-
type ThemeColorSchemes,
|
|
32
|
-
type ThemeColorSelectable,
|
|
33
|
-
type ThemeColorSelectableState,
|
|
34
|
-
type ThemeColorSelectableStates,
|
|
35
|
-
type ThemeColorSolid,
|
|
36
|
-
type ThemeColorSolidTone,
|
|
37
|
-
type ThemeColorSpot,
|
|
38
|
-
type ThemeColorSpotKey,
|
|
39
|
-
type ThemeColorSyntax as _ThemeColorSyntax,
|
|
40
|
-
type ThemeColorToneKey,
|
|
41
|
-
type ThemeFont as _ThemeFont,
|
|
42
|
-
type ThemeFontKey as _ThemeFontKey,
|
|
43
|
-
type ThemeFonts as _ThemeFonts,
|
|
44
|
-
type ThemeFontSize as _ThemeFontSize,
|
|
45
|
-
type ThemeFontWeight as _ThemeFontWeight,
|
|
46
|
-
type ThemeFontWeightKey as _ThemeFontWeightKey,
|
|
47
|
-
type ThemeInput,
|
|
48
|
-
type ThemeLayer as _ThemeLayer,
|
|
49
|
-
type ThemeShadow as _ThemeShadow,
|
|
50
|
-
type ThemeStyles,
|
|
51
|
-
} from '@sanity/ui/theme'
|
|
52
|
-
|
|
53
|
-
/**
|
|
54
|
-
* @public
|
|
55
|
-
* @deprecated Use `BaseTheme` from `@sanity/ui/theme` instead.
|
|
56
|
-
*/
|
|
57
|
-
export type BaseTheme = _BaseTheme
|
|
58
|
-
|
|
59
|
-
/**
|
|
60
|
-
* @public
|
|
61
|
-
* @deprecated Use `ThemeBoxShadow` from `@sanity/ui/theme` instead.
|
|
62
|
-
*/
|
|
63
|
-
export type BoxShadow = ThemeBoxShadow
|
|
64
|
-
|
|
65
|
-
/**
|
|
66
|
-
* @public
|
|
67
|
-
* @deprecated Use `HSL` from `@sanity/ui/theme` instead.
|
|
68
|
-
*/
|
|
69
|
-
export type HSL = _HSL
|
|
70
|
-
|
|
71
|
-
/**
|
|
72
|
-
* @public
|
|
73
|
-
* @deprecated Use `RGB` from `@sanity/ui/theme` instead.
|
|
74
|
-
*/
|
|
75
|
-
export type RGB = _RGB
|
|
76
|
-
|
|
77
|
-
/**
|
|
78
|
-
* @public
|
|
79
|
-
* @deprecated Use `RootTheme` from `@sanity/ui/theme` instead.
|
|
80
|
-
*/
|
|
81
|
-
export type RootTheme = _RootTheme
|
|
82
|
-
|
|
83
|
-
/**
|
|
84
|
-
* @public
|
|
85
|
-
* @deprecated Use `ThemeStyles` from `@sanity/ui/theme` instead.
|
|
86
|
-
*/
|
|
87
|
-
export type Styles = ThemeStyles
|
|
88
|
-
|
|
89
|
-
/**
|
|
90
|
-
* @public
|
|
91
|
-
* @deprecated Use `Theme` from `@sanity/ui/theme` instead.
|
|
92
|
-
*/
|
|
93
|
-
export type Theme = _Theme
|
|
94
|
-
|
|
95
|
-
/**
|
|
96
|
-
* @public
|
|
97
|
-
* @deprecated Use `ThemeColorButtonModeKey` from `@sanity/ui/theme` instead.
|
|
98
|
-
*/
|
|
99
|
-
export type ThemeColorButtonModeKey = _ThemeColorButtonModeKey
|
|
100
|
-
|
|
101
|
-
/**
|
|
102
|
-
* @public
|
|
103
|
-
* @deprecated Use `ThemeColorSchemeKey` from `@sanity/ui/theme` instead.
|
|
104
|
-
*/
|
|
105
|
-
export type ThemeColorSchemeKey = _ThemeColorSchemeKey
|
|
106
|
-
|
|
107
|
-
/**
|
|
108
|
-
* @public
|
|
109
|
-
* @deprecated Use `ThemeColorSyntax` from `@sanity/ui/theme` instead.
|
|
110
|
-
*/
|
|
111
|
-
export type ThemeColorSyntax = _ThemeColorSyntax
|
|
112
|
-
|
|
113
|
-
/**
|
|
114
|
-
* @public
|
|
115
|
-
* @deprecated Use `ThemeFont` from `@sanity/ui/theme` instead.
|
|
116
|
-
*/
|
|
117
|
-
export type ThemeFont = _ThemeFont
|
|
118
|
-
|
|
119
|
-
/**
|
|
120
|
-
* @public
|
|
121
|
-
* @deprecated Use `ThemeFontKey` from `@sanity/ui/theme` instead.
|
|
122
|
-
*/
|
|
123
|
-
export type ThemeFontKey = _ThemeFontKey
|
|
124
|
-
|
|
125
|
-
/**
|
|
126
|
-
* @public
|
|
127
|
-
* @deprecated Use `ThemeFontSize` from `@sanity/ui/theme` instead.
|
|
128
|
-
*/
|
|
129
|
-
export type ThemeFontSize = _ThemeFontSize
|
|
130
|
-
|
|
131
|
-
/**
|
|
132
|
-
* @public
|
|
133
|
-
* @deprecated Use `ThemeFontWeight` from `@sanity/ui/theme` instead.
|
|
134
|
-
*/
|
|
135
|
-
export type ThemeFontWeight = _ThemeFontWeight
|
|
136
|
-
|
|
137
|
-
/**
|
|
138
|
-
* @public
|
|
139
|
-
* @deprecated Use `ThemeFontWeightKey` from `@sanity/ui/theme` instead.
|
|
140
|
-
*/
|
|
141
|
-
export type ThemeFontWeightKey = _ThemeFontWeightKey
|
|
142
|
-
|
|
143
|
-
/**
|
|
144
|
-
* @public
|
|
145
|
-
* @deprecated Use `ThemeFonts` from `@sanity/ui/theme` instead.
|
|
146
|
-
*/
|
|
147
|
-
export type ThemeFonts = _ThemeFonts
|
|
148
|
-
|
|
149
|
-
/**
|
|
150
|
-
* @public
|
|
151
|
-
* @deprecated Use `ThemeLayer` from `@sanity/ui/theme` instead.
|
|
152
|
-
*/
|
|
153
|
-
export type ThemeLayer = _ThemeLayer
|
|
154
|
-
|
|
155
|
-
/**
|
|
156
|
-
* @public
|
|
157
|
-
* @deprecated Use `ThemeShadow` from `@sanity/ui/theme` instead.
|
|
158
|
-
*/
|
|
159
|
-
export type ThemeShadow = _ThemeShadow
|
|
160
|
-
|
|
161
|
-
export {
|
|
162
|
-
type PartialThemeColorBuilderOpts,
|
|
163
|
-
type ThemeAvatar,
|
|
164
|
-
type ThemeColor,
|
|
165
|
-
type ThemeColorBase,
|
|
166
|
-
type ThemeColorBuilderOpts,
|
|
167
|
-
type ThemeColorButton,
|
|
168
|
-
type ThemeColorButtonState,
|
|
169
|
-
type ThemeColorButtonStates,
|
|
170
|
-
type ThemeColorButtonTones,
|
|
171
|
-
type ThemeColorCard,
|
|
172
|
-
type ThemeColorCardState,
|
|
173
|
-
type ThemeColorGenericState,
|
|
174
|
-
type ThemeColorInput,
|
|
175
|
-
type ThemeColorInputState,
|
|
176
|
-
type ThemeColorInputStates,
|
|
177
|
-
type ThemeColorMuted,
|
|
178
|
-
type ThemeColorMutedTone,
|
|
179
|
-
type ThemeColorName,
|
|
180
|
-
type ThemeColorScheme,
|
|
181
|
-
type ThemeColorSchemes,
|
|
182
|
-
type ThemeColorSelectable,
|
|
183
|
-
type ThemeColorSelectableState,
|
|
184
|
-
type ThemeColorSelectableStates,
|
|
185
|
-
type ThemeColorSolid,
|
|
186
|
-
type ThemeColorSolidTone,
|
|
187
|
-
type ThemeColorSpot,
|
|
188
|
-
type ThemeColorSpotKey,
|
|
189
|
-
type ThemeColorToneKey,
|
|
190
|
-
type ThemeInput,
|
|
191
|
-
}
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import {useState} from 'react'
|
|
2
|
-
|
|
3
|
-
import {_getArrayProp} from '../helpers/props'
|
|
4
|
-
|
|
5
|
-
/**
|
|
6
|
-
* This API might change. DO NOT USE IN PRODUCTION.
|
|
7
|
-
* @beta
|
|
8
|
-
* @deprecated Use `useResponsiveProp` instead.
|
|
9
|
-
*/
|
|
10
|
-
export function useArrayProp<T>(val: T | T[] | undefined, defaultVal?: T[]): T[] {
|
|
11
|
-
const [[cachedVal, cachedHash], setCache] = useState<[T[], string]>(() => [
|
|
12
|
-
_getArrayProp(val, defaultVal),
|
|
13
|
-
JSON.stringify(val ?? defaultVal),
|
|
14
|
-
])
|
|
15
|
-
|
|
16
|
-
const hash = JSON.stringify(val ?? defaultVal)
|
|
17
|
-
|
|
18
|
-
if (hash !== cachedHash) {
|
|
19
|
-
// If the cached hash has changed, update the cache right away.
|
|
20
|
-
// Calling setState during render is fine in this case, and preferred over a useEffect loop
|
|
21
|
-
// https://19.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes
|
|
22
|
-
setCache([_getArrayProp(val, defaultVal), hash])
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
return cachedVal
|
|
26
|
-
}
|