From f25f1e0545fd0a50658ae31cebc77ce4d07499e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= Date: Fri, 6 Jun 2025 13:14:44 +0200 Subject: [PATCH 01/47] refactor!: use `@vanilla-extract/css` for styling BREAKING CHANGE: - A result of this change is that theming has slightly changed, and that CSS needs to be imported manually. --- .github/workflows/main.yml | 4 +- .gitignore | 1 + .../decorators/withSanityTheme.decorator.tsx | 42 - .storybook/main.ts | 35 - .storybook/manager-head.html | 81 - .storybook/manager.ts | 11 - .storybook/preview-head.html | 73 - .storybook/preview.tsx | 37 - .vscode/settings.json | 3 + README.md | 16 +- cypress/e2e/ui/autocomplete.cy.ts | 4 +- cypress/e2e/ui/box.cy.ts | 15 +- cypress/e2e/ui/grid.cy.ts | 2 +- cypress/e2e/ui/layer.cy.ts | 6 +- cypress/e2e/ui/textInput.cy.ts | 4 +- eslint.config.mjs => eslint.config.js | 42 +- exports/_visual-editing.ts | 45 +- exports/css.ts | 1 + figma/src/config.ts | 4 +- figma/src/styles/write.ts | 6 +- figma/src/vars/helpers.ts | 2 +- .../src/vars/prepareSanityUIColorVariables.ts | 4 +- figma/src/vars/types.ts | 2 +- figma/src/vars/write.ts | 2 +- figma/tsconfig.json | 2 +- jest.config.js | 24 - package.config.ts | 54 +- package.json | 162 +- playground/next/.gitignore | 41 + playground/next/README.md | 36 + playground/next/app/layout.tsx | 27 + playground/next/app/page.tsx | 44 + playground/next/components/AppRoot.tsx | 36 + playground/next/empty.css | 1 + playground/next/eslint.config.mjs | 14 + playground/next/next.config.ts | 40 + playground/next/package.json | 28 + playground/next/tsconfig.dist.json | 21 + playground/next/tsconfig.json | 26 + playground/react-router/.dockerignore | 4 + playground/react-router/.gitignore | 6 + playground/react-router/README.md | 87 + playground/react-router/app/root.tsx | 117 + playground/react-router/app/routes.ts | 3 + playground/react-router/app/routes/home.tsx | 48 + playground/react-router/empty.css | 1 + playground/react-router/package.json | 30 + .../react-router/react-router.config.ts | 7 + playground/react-router/tsconfig.json | 19 + playground/react-router/vite.config.ts | 25 + playground/vite/.gitignore | 24 + playground/vite/README.md | 54 + playground/vite/empty.css | 1 + playground/vite/eslint.config.js | 25 + playground/vite/index.html | 13 + playground/vite/package.json | 32 + playground/vite/src/App.tsx | 31 + playground/vite/src/AppRouter.tsx | 42 + playground/vite/src/main.tsx | 11 + playground/vite/src/vite-env.d.ts | 1 + playground/vite/tsconfig.app.json | 28 + playground/vite/tsconfig.json | 4 + playground/vite/tsconfig.node.json | 26 + playground/vite/vite.config.ts | 26 + pnpm-lock.yaml | 8982 ++++++++++------- pnpm-workspace.yaml | 4 +- prettier.config.cjs | 1 + registry/.gitignore | 1 + .../sanity-ui-workshop-3.0.0-local.12.tgz | Bin 0 -> 286581 bytes rollup/cssBundle.ts | 184 + src/core/Root.tsx | 86 + src/core/RootProvider.tsx | 40 + src/core/{global.ts => __DEV__.ts} | 1 - src/core/__workshop__/boundary.tsx | 28 + src/core/__workshop__/constants.ts | 293 - src/core/__workshop__/index.ts | 14 + src/core/_compat/helpers.ts | 72 + src/core/_compat/styles/_responsive.ts | 19 + src/core/{ => _compat}/theme/theme.test.tsx | 18 +- .../theme/themeColorProvider.tsx | 17 +- src/core/_compat/theme/themeContext.ts | 10 + .../{ => _compat}/theme/themeProvider.tsx | 36 +- src/core/{ => _compat}/theme/types.ts | 6 +- src/core/{ => _compat}/theme/useRootTheme.ts | 6 +- src/core/{ => _compat}/theme/useTheme.ts | 10 +- src/core/{_compat.ts => _compat/types.ts} | 73 - .../autocomplete/__workshop__/async.tsx | 12 +- .../__workshop__/constrainedHeight.tsx | 30 +- .../autocomplete/__workshop__/custom.tsx | 34 +- .../autocomplete/__workshop__/example.tsx | 29 +- .../__workshop__/focusAndBlur.tsx | 10 +- .../autocomplete/__workshop__/fullscreen.tsx | 116 +- .../mock}/apiStore.ts | 0 .../mock}/countries.ts | 0 .../autocomplete/autocomplete.styles.tsx | 39 - .../components/autocomplete/autocomplete.tsx | 281 +- .../autocomplete/autocompleteOption.tsx | 10 +- .../autocomplete/autocompleteReducer.ts | 2 +- src/core/components/autocomplete/constants.ts | 2 +- src/core/components/autocomplete/index.ts | 2 - src/core/components/autocomplete/types.ts | 13 +- .../breadcrumbs/__workshop__/example.tsx | 5 +- .../breadcrumbs/breadcrumbs.styles.ts | 18 - .../components/breadcrumbs/breadcrumbs.tsx | 93 +- src/core/components/breadcrumbs/index.ts | 1 - .../dialog/__workshop__/activate.tsx | 25 +- .../dialog/__workshop__/autoFocus.tsx | 4 +- .../components/dialog/__workshop__/nested.tsx | 6 +- .../dialog/__workshop__/onScroll.tsx | 20 +- .../components/dialog/__workshop__/panes.tsx | 17 +- .../dialog/__workshop__/position.tsx | 8 +- .../components/dialog/__workshop__/props.tsx | 14 +- .../dialog/__workshop__/wrapped.tsx | 4 +- src/core/components/dialog/dialog.tsx | 435 +- src/core/components/dialog/dialogCard.tsx | 233 + src/core/components/dialog/dialogContext.ts | 8 +- src/core/components/dialog/dialogProvider.tsx | 17 +- src/core/components/dialog/index.ts | 4 - .../components/dialog/isTargetWithinScope.ts | 14 + src/core/components/dialog/styles.ts | 77 - .../dialog.ts => components/dialog/types.ts} | 4 +- src/core/components/dialog/useDialog.ts | 2 +- src/core/components/hotkeys/hotkeys.tsx | 95 +- src/core/components/hotkeys/index.ts | 1 - src/core/components/index.ts | 9 - .../menu/__workshop__/asComponent.tsx | 12 +- .../menu/__workshop__/avatarMenu.tsx | 18 +- .../menu/__workshop__/closableMenuButton.tsx | 9 +- .../__workshop__/constrainedInBoundary.tsx | 5 +- .../menu/__workshop__/customMenuItem.tsx | 6 +- .../menu/__workshop__/customSelectedState.tsx | 6 +- .../menu/__workshop__/disableFocusOnClose.tsx | 2 +- .../components/menu/__workshop__/groups.tsx | 4 +- .../menu/__workshop__/menuButton.tsx | 8 +- .../menu/__workshop__/menuGroupRight.tsx | 2 +- .../menu/__workshop__/nestedMenu.tsx | 2 +- .../menu/__workshop__/onCloseMenuButton.tsx | 17 +- .../menu/__workshop__/selectedItem.tsx | 4 +- .../menu/__workshop__/shouldFocus.tsx | 7 +- .../components/menu/__workshop__/tones.tsx | 6 +- .../menu/__workshop__/withoutArrow.tsx | 2 +- src/core/components/menu/helpers.ts | 2 +- src/core/components/menu/index.ts | 5 - src/core/components/menu/menu.test.tsx | 32 +- src/core/components/menu/menu.tsx | 79 +- src/core/components/menu/menuButton.tsx | 77 +- src/core/components/menu/menuContext.ts | 10 +- src/core/components/menu/menuDivider.ts | 12 - src/core/components/menu/menuDivider.tsx | 32 + src/core/components/menu/menuGroup.tsx | 113 +- src/core/components/menu/menuItem.tsx | 136 +- src/core/components/menu/useMenu.ts | 2 +- src/core/components/menu/useMenuController.ts | 24 +- src/core/components/skeleton/index.ts | 2 - src/core/components/skeleton/skeleton.tsx | 57 - src/core/components/skeleton/styles.ts | 50 - src/core/components/skeleton/textSkeleton.tsx | 123 - .../components/tab/__workshop__/example.tsx | 4 +- src/core/components/tab/index.ts | 3 - src/core/components/tab/tab.tsx | 76 +- src/core/components/tab/tabList.tsx | 89 +- src/core/components/tab/tabPanel.tsx | 50 +- .../components/toast/__workshop__/hook.tsx | 2 +- .../components/toast/__workshop__/toast.tsx | 10 +- src/core/components/toast/index.ts | 4 - src/core/components/toast/styles.ts | 77 - src/core/components/toast/toast.test.tsx | 25 +- src/core/components/toast/toast.tsx | 127 +- src/core/components/toast/toastContext.ts | 2 +- src/core/components/toast/toastLayer.tsx | 65 +- src/core/components/toast/toastProvider.tsx | 41 +- src/core/components/toast/types.ts | 14 +- src/core/components/toast/useToast.ts | 6 +- .../tree/__workshop__/basic.perf.ts | 2 +- .../components/tree/__workshop__/basic.tsx | 2 +- .../tree/__workshop__/tabFromElement.tsx | 2 +- src/core/components/tree/helpers.ts | 2 +- src/core/components/tree/index.ts | 4 - src/core/components/tree/style.ts | 105 - src/core/components/tree/tree.tsx | 386 +- src/core/components/tree/treeContext.ts | 2 +- src/core/components/tree/treeGroup.tsx | 36 +- src/core/components/tree/treeItem.tsx | 148 +- src/core/components/tree/types.ts | 5 +- src/core/components/tree/useTree.ts | 2 +- .../__workshop__/changingProps.tsx | 0 .../__workshop__/elementScroll.tsx | 0 .../virtualList/__workshop__/index.ts | 2 +- .../virtualList/__workshop__/infiniteList.tsx | 2 +- .../__workshop__/windowScrolll.tsx | 0 .../virtualList/virtualList.tsx | 159 +- src/core/constants.ts | 6 + src/core/helpers/focus.ts | 8 - src/core/helpers/index.ts | 4 - src/core/helpers/props.ts | 28 + src/core/hooks/index.ts | 12 - src/core/hooks/useArrayProp.ts | 13 +- src/core/hooks/useClickOutside.test.tsx | 35 +- src/core/hooks/useClickOutside.ts | 8 +- src/core/hooks/useClickOutsideEvent.test.tsx | 9 +- src/core/hooks/useClickOutsideEvent.ts | 12 +- src/core/hooks/useDelayed.test.ts | 13 +- src/core/hooks/useDelayedState.ts | 2 +- .../useElementRect/__workshop__/example.tsx | 6 +- src/core/hooks/useElementRect/index.ts | 1 - src/core/hooks/useElementSize.ts | 2 +- src/core/hooks/useForwardedRef.ts | 4 +- src/core/hooks/useMatchMedia.ts | 2 +- .../hooks/useMediaIndex/__workshop__/test.tsx | 2 +- src/core/hooks/useMediaIndex/index.ts | 1 - .../useMediaIndex/useMediaIndex.test.tsx | 21 +- src/core/hooks/useMediaIndex/useMediaIndex.ts | 24 +- .../hooks/usePrefersDark.hydration.test.tsx | 10 +- src/core/hooks/usePrefersDark.test.tsx | 1 + src/core/hooks/usePrefersDark.ts | 2 +- ...usePrefersReducedMotion.hydration.test.tsx | 10 +- .../hooks/usePrefersReducedMotion.test.tsx | 1 + src/core/hooks/usePrefersReducedMotion.ts | 2 +- src/core/hooks/useResponsiveProp.ts | 28 + src/core/index.ts | 148 +- src/core/lib/createGlobalScopedContext.ts | 7 +- src/core/lib/globalScope.ts | 2 +- src/core/lib/isArray.ts | 3 + src/core/middleware/origin.ts | 2 +- ...{elementSizeObserver.ts => elementSize.ts} | 2 +- src/core/observers/index.ts | 2 - .../{resizeObserver.ts => resize.ts} | 0 src/core/primitives/_selectable/index.ts | 1 - .../primitives/_selectable/selectable.tsx | 15 - src/core/primitives/_selectable/style.ts | 115 - src/core/primitives/arrow/arrow.tsx | 74 + src/core/{utils => primitives}/arrow/cmds.ts | 0 .../avatar/__workshop__/asButton.tsx | 4 +- .../primitives/avatar/__workshop__/stack.tsx | 4 +- .../avatar/__workshop__/withinButton.tsx | 20 +- .../avatar/__workshop__/withinMenuItem.tsx | 52 +- src/core/primitives/avatar/avatar.tsx | 194 +- src/core/primitives/avatar/avatarCounter.tsx | 129 +- src/core/primitives/avatar/avatarStack.tsx | 130 +- src/core/primitives/avatar/index.ts | 4 - src/core/primitives/avatar/styles.ts | 167 - src/core/primitives/avatar/types.ts | 21 +- .../primitives/badge/__workshop__/props.tsx | 23 +- .../primitives/badge/__workshop__/tones.tsx | 13 +- src/core/primitives/badge/badge.test.tsx | 5 +- src/core/primitives/badge/badge.tsx | 80 +- src/core/primitives/badge/index.ts | 1 - src/core/primitives/badge/styles.ts | 20 - src/core/primitives/badge/types.ts | 12 +- .../primitives/box/__workshop__/props.tsx | 4 +- .../box/__workshop__/responsive.tsx | 4 +- src/core/primitives/box/box.tsx | 270 +- src/core/primitives/box/index.ts | 1 - src/core/primitives/box/types.ts | 22 + .../primitives/button/__workshop__/custom.tsx | 62 +- .../button/__workshop__/customIcons.tsx | 6 +- .../button/__workshop__/disabled.tsx | 100 +- .../primitives/button/__workshop__/index.ts | 5 + .../primitives/button/__workshop__/props.tsx | 38 +- .../__workshop__/sanityUploadButton.tsx | 6 +- .../button/__workshop__/stacked.tsx | 28 +- .../button/__workshop__/textOverflow.tsx | 13 + .../button/__workshop__/uploadButton.tsx | 3 +- src/core/primitives/button/button.test.tsx | 21 +- src/core/primitives/button/button.tsx | 293 +- src/core/primitives/button/index.ts | 1 - src/core/primitives/button/styles.ts | 117 - src/core/primitives/button/types.ts | 22 + .../primitives/card/__workshop__/allTones.tsx | 25 - .../primitives/card/__workshop__/asButton.tsx | 28 +- .../card/__workshop__/asComponent.tsx | 6 +- .../card/__workshop__/checkered.tsx | 2 +- .../primitives/card/__workshop__/index.ts | 2 +- .../card/__workshop__/interactive.tsx | 7 +- .../card/__workshop__/listNavigation.tsx | 12 +- .../primitives/card/__workshop__/props.tsx | 27 +- .../primitives/card/__workshop__/selected.tsx | 52 +- .../primitives/card/__workshop__/tones.tsx | 27 + src/core/primitives/card/card.tsx | 159 +- src/core/primitives/card/cardContext.ts | 10 + src/core/primitives/card/cardProvider.tsx | 27 + src/core/primitives/card/index.ts | 2 - src/core/primitives/card/styles.ts | 147 - src/core/primitives/card/types.ts | 24 +- src/core/primitives/card/useCard.ts | 15 + .../checkbox/__workshop__/props.tsx | 10 +- .../checkbox/__workshop__/tones.tsx | 39 +- src/core/primitives/checkbox/checkbox.tsx | 57 +- src/core/primitives/checkbox/index.ts | 1 - src/core/primitives/checkbox/styles.ts | 128 - .../code/__workshop__/opticalAlignment.tsx | 59 +- .../primitives/code/__workshop__/props.tsx | 11 +- src/core/primitives/code/code.tsx | 56 +- src/core/primitives/code/index.ts | 1 - src/core/primitives/code/refractor.tsx | 4 +- src/core/primitives/code/styles.ts | 77 - .../container/__workshop__/example.tsx | 4 +- src/core/primitives/container/container.tsx | 56 +- src/core/primitives/container/index.ts | 2 - src/core/primitives/container/styles.ts | 23 - .../primitives/flex/__workshop__/example.tsx | 4 +- src/core/primitives/flex/__workshop__/gap.tsx | 12 +- src/core/primitives/flex/flex.tsx | 80 +- src/core/primitives/flex/index.ts | 1 - src/core/primitives/flex/types.ts | 27 + src/core/primitives/grid/grid.tsx | 55 +- src/core/primitives/grid/index.ts | 1 - src/core/primitives/grid/types.ts | 17 + .../heading/__workshop__/opticalAlignment.tsx | 4 +- .../primitives/heading/__workshop__/plain.tsx | 27 +- src/core/primitives/heading/heading.tsx | 120 +- src/core/primitives/heading/index.ts | 1 - src/core/primitives/heading/styles.ts | 64 - src/core/primitives/heading/types.ts | 7 - src/core/primitives/index.ts | 27 - .../primitives/inline/__workshop__/plain.tsx | 7 +- src/core/primitives/inline/index.ts | 1 - src/core/primitives/inline/inline.tsx | 82 +- src/core/primitives/inline/styles.ts | 32 - src/core/primitives/inline/types.ts | 6 - src/core/primitives/kbd/index.ts | 1 - src/core/primitives/kbd/kbd.tsx | 88 +- .../label/__workshop__/opticalAlignment.tsx | 20 +- .../primitives/label/__workshop__/plain.tsx | 26 +- src/core/primitives/label/index.ts | 1 - src/core/primitives/label/label.tsx | 116 +- src/core/primitives/label/styles.ts | 45 - .../layer/__workshop__/_debug.tsx | 0 .../layer/__workshop__/index.ts | 2 +- .../layer/__workshop__/multipleRoots.tsx | 10 +- .../layer/__workshop__/nested.tsx | 6 +- .../layer/__workshop__/responsiveZOffset.tsx | 17 + .../layer/getLayerContext.test.ts | 4 +- .../layer/getLayerContext.ts | 2 +- .../layer/layer.test.tsx | 27 +- src/core/primitives/layer/layer.tsx | 42 + .../layer/layerCard.tsx} | 82 +- .../layer/layerContext.ts | 2 +- .../layer/layerProvider.tsx | 42 +- src/core/{utils => primitives}/layer/types.ts | 0 .../{utils => primitives}/layer/useLayer.ts | 6 +- .../popover/__workshop__/AlignedStory.tsx | 12 +- .../__workshop__/MatchReferenceWidthStory.tsx | 6 +- .../popover/__workshop__/OpenOnMountStory.tsx | 2 +- .../popover/__workshop__/PlainStory.tsx | 2 +- .../popover/__workshop__/RecursiveStory.tsx | 8 +- .../popover/__workshop__/SidePanelStory.tsx | 31 +- .../popover/__workshop__/TestStory.tsx | 17 +- src/core/primitives/popover/constants.ts | 2 +- .../primitives/popover/floating-ui/size.ts | 4 +- src/core/primitives/popover/helpers.ts | 7 +- src/core/primitives/popover/index.ts | 2 - src/core/primitives/popover/popover.tsx | 661 +- src/core/primitives/popover/popoverCard.tsx | 168 - src/core/primitives/popover/popoverLayer.tsx | 149 + src/core/primitives/popover/types.ts | 10 +- .../primitives/radio/__workshop__/example.tsx | 6 +- .../primitives/radio/__workshop__/plain.tsx | 6 +- src/core/primitives/radio/index.ts | 1 - src/core/primitives/radio/radio.tsx | 57 +- src/core/primitives/radio/styles.ts | 117 - .../primitives/select/__workshop__/plain.tsx | 22 +- .../select/__workshop__/readOnly.tsx | 2 +- src/core/primitives/select/index.ts | 1 - src/core/primitives/select/select.tsx | 104 +- src/core/primitives/select/styles.ts | 166 - src/core/primitives/selectable/selectable.tsx | 50 + src/core/primitives/selectable/types.ts | 7 + .../skeleton/__workshop__/delay.tsx | 6 +- .../skeleton/__workshop__/index.ts | 2 +- .../skeleton/__workshop__/skeleton.tsx | 8 +- src/core/primitives/skeleton/codeSkeleton.tsx | 49 + .../primitives/skeleton/headingSkeleton.tsx | 48 + .../primitives/skeleton/labelSkeleton.tsx | 47 + src/core/primitives/skeleton/skeleton.tsx | 71 + src/core/primitives/skeleton/textSkeleton.tsx | 49 + .../primitives/spinner/__workshop__/Props.tsx | 6 +- .../spinner/animatedSpinnerIcon.tsx | 14 + src/core/primitives/spinner/index.ts | 1 - src/core/primitives/spinner/spinner.tsx | 61 +- src/core/primitives/srOnly/srOnly.tsx | 33 + .../primitives/stack/__workshop__/plain.tsx | 4 +- src/core/primitives/stack/index.ts | 1 - src/core/primitives/stack/stack.tsx | 76 +- src/core/primitives/stack/styles.ts | 32 - src/core/primitives/switch/index.ts | 1 - src/core/primitives/switch/styles.ts | 173 - src/core/primitives/switch/switch.tsx | 82 +- .../primitives/text/__workshop__/colored.tsx | 25 +- .../primitives/text/__workshop__/example.tsx | 29 +- .../text/__workshop__/opticalAlignment.tsx | 59 +- src/core/primitives/text/index.ts | 1 - src/core/primitives/text/styles.ts | 74 - src/core/primitives/text/text.tsx | 121 +- .../textArea/__workshop__/plain.tsx | 77 +- src/core/primitives/textArea/index.ts | 1 - src/core/primitives/textArea/textArea.tsx | 141 +- .../textInput/__workshop__/customValidity.tsx | 4 +- .../textInput/__workshop__/plain.tsx | 58 +- .../textInput/__workshop__/states.tsx | 10 +- .../textInput/__workshop__/tones.tsx | 4 +- .../textInput/__workshop__/typed.tsx | 4 +- src/core/primitives/textInput/index.ts | 1 - src/core/primitives/textInput/textInput.tsx | 476 +- .../tooltip/__workshop__/customPortal.tsx | 10 +- .../__workshop__/overflowingBoundary.tsx | 4 +- .../primitives/tooltip/__workshop__/props.tsx | 21 +- .../__workshop__/resizableBoundary.tsx | 2 +- src/core/primitives/tooltip/constants.ts | 2 +- src/core/primitives/tooltip/index.ts | 2 - src/core/primitives/tooltip/tooltip.test.tsx | 120 +- src/core/primitives/tooltip/tooltip.tsx | 213 +- src/core/primitives/tooltip/tooltipCard.tsx | 111 - .../tooltipDelayGroupContext.tsx | 2 +- .../tooltipDelayGroupProvider.tsx | 14 +- .../tooltipDelayGroup/useTooltipDelayGroup.ts | 2 +- src/core/primitives/tooltip/tooltipLayer.tsx | 106 + src/core/primitives/types.ts | 39 +- src/core/styles/border/borderStyle.ts | 56 - src/core/styles/border/index.ts | 2 - src/core/styles/border/types.ts | 10 - src/core/styles/box/boxStyle.ts | 69 - src/core/styles/box/index.ts | 2 - src/core/styles/box/types.ts | 11 - src/core/styles/card/_cardColorStyle.ts | 108 - src/core/styles/card/index.ts | 1 - src/core/styles/flex/flexItemStyle.ts | 27 - src/core/styles/flex/flexStyle.ts | 70 - src/core/styles/flex/index.ts | 3 - src/core/styles/flex/types.ts | 25 - src/core/styles/focusRing/index.ts | 25 - src/core/styles/font/codeFontStyle.ts | 13 - src/core/styles/font/headingFontStyle.ts | 13 - src/core/styles/font/index.ts | 6 - src/core/styles/font/labelFontStyle.ts | 13 - src/core/styles/font/responsiveFont.ts | 101 - src/core/styles/font/textAlignStyle.ts | 19 - src/core/styles/font/textFontStyle.ts | 13 - src/core/styles/font/types.ts | 35 - src/core/styles/grid/gridItemStyle.ts | 82 - src/core/styles/grid/gridStyle.ts | 108 - src/core/styles/grid/index.ts | 3 - src/core/styles/grid/types.ts | 37 - src/core/styles/helpers.ts | 72 - src/core/styles/index.ts | 5 - src/core/styles/input/index.ts | 2 - .../input/responsiveInputPaddingStyle.ts | 78 - src/core/styles/input/textInputStyle.ts | 263 - src/core/styles/internal.ts | 12 - src/core/styles/margin/index.ts | 2 - src/core/styles/margin/marginStyle.ts | 21 - src/core/styles/margin/marginsStyle.test.ts | 33 - src/core/styles/margin/types.ts | 9 - src/core/styles/padding/index.ts | 2 - src/core/styles/padding/paddingStyle.test.ts | 33 - src/core/styles/padding/paddingStyle.ts | 21 - src/core/styles/padding/types.ts | 12 - src/core/styles/radius/index.ts | 2 - src/core/styles/radius/radiusStyle.ts | 23 - src/core/styles/radius/types.ts | 8 - src/core/styles/shadow/index.ts | 2 - src/core/styles/shadow/shadowStyle.ts | 29 - src/core/styles/shadow/types.ts | 6 - src/core/styles/types.ts | 8 - src/core/theme/__workshop__/build/Root.tsx | 367 - src/core/theme/__workshop__/build/helpers.ts | 46 - src/core/theme/__workshop__/build/story.tsx | 465 - src/core/theme/__workshop__/canvas.tsx | 351 - src/core/theme/__workshop__/color.tsx | 62 - src/core/theme/__workshop__/debug/story.tsx | 408 - src/core/theme/__workshop__/index.ts | 39 - src/core/theme/__workshop__/layer.tsx | 78 - .../theme/__workshop__/nestedProvider.tsx | 15 - src/core/theme/index.ts | 5 - src/core/theme/themeContext.ts | 10 - src/core/types/avatar.ts | 14 - src/core/types/badge.ts | 12 - src/core/types/box.ts | 19 - src/core/types/button.ts | 21 - src/core/types/card.ts | 6 - src/core/types/flex.ts | 30 - src/core/types/grid.ts | 14 - src/core/types/gridItem.ts | 61 +- src/core/types/index.ts | 14 - src/core/types/popover.ts | 4 - src/core/types/props.ts | 29 + src/core/types/radius.ts | 11 +- src/core/types/selectable.ts | 6 - src/core/types/text.ts | 4 - src/core/types/textAlign.ts | 7 + src/core/utils/arrow/arrow.tsx | 123 - src/core/utils/arrow/index.ts | 1 - .../boundaryElement/boundaryElement.test.tsx | 25 +- .../boundaryElement/boundaryElementContext.ts | 2 +- .../boundaryElementProvider.tsx | 18 +- src/core/utils/boundaryElement/index.ts | 3 - src/core/utils/boundaryElement/types.ts | 4 +- .../boundaryElement/useBoundaryElement.ts | 6 +- .../conditionalWrapper/conditionalWrapper.tsx | 21 - src/core/utils/conditionalWrapper/index.ts | 1 - .../elementQuery/__workshop__/customMedia.tsx | 27 +- src/core/utils/elementQuery/elementQuery.tsx | 62 +- src/core/utils/elementQuery/index.ts | 1 - src/core/utils/errorBoundary.tsx | 14 +- src/core/utils/getElementRef.ts | 3 + src/core/utils/index.ts | 9 - .../layer/__workshop__/responsiveZOffset.tsx | 13 - src/core/utils/layer/index.ts | 4 - src/core/utils/portal/__workshop__/named.tsx | 6 +- src/core/utils/portal/index.ts | 4 - src/core/utils/portal/portal.test.tsx | 25 +- src/core/utils/portal/portal.ts | 32 - src/core/utils/portal/portal.tsx | 36 + src/core/utils/portal/portalContext.ts | 19 +- src/core/utils/portal/portalProvider.tsx | 18 +- src/core/utils/portal/types.ts | 4 +- src/core/utils/portal/usePortal.ts | 6 +- src/core/utils/srOnly/index.ts | 1 - src/core/utils/srOnly/srOnly.tsx | 36 - src/core/utils/virtualList/index.ts | 1 - src/css/_assign.ts | 3 + src/css/_composeClassNames.ts | 12 + src/css/_fromEntries.ts | 3 + src/css/_getClassNames.ts | 9 + src/css/_responsiveClassName.ts | 45 + src/css/_responsiveStyle.css.ts | 34 + src/css/_style.css.ts | 9 + .../components/breadcrumbs/breadcrumbs.css.ts | 6 + src/css/components/breadcrumbs/breadcrumbs.ts | 7 + src/css/components/dialog/dialog.css.ts | 106 + src/css/components/dialog/dialog.ts | 58 + src/css/components/menu/menu.css.ts | 14 + src/css/components/menu/menu.ts | 12 + src/css/components/skeleton/skeleton.css.ts | 132 + src/css/components/skeleton/skeleton.ts | 38 + src/css/components/skeleton/types.ts | 36 + src/css/components/toast/toast.css.ts | 17 + src/css/components/toast/toast.ts | 11 + src/css/components/tree/tree.css.ts | 65 + src/css/components/tree/tree.ts | 7 + src/css/constants.ts | 10 + src/css/defaultTheme.css.ts | 521 + src/css/index.ts | 143 + src/css/layers.css.ts | 9 + src/css/primitives/_arrow/_arrow.css.ts | 68 + src/css/primitives/_arrow/_arrow.ts | 26 + src/css/primitives/_input/_input.css.ts | 261 + src/css/primitives/_input/input.ts | 29 + src/css/primitives/_input/types.ts | 13 + .../primitives/_selectable/_selectable.css.ts | 131 + src/css/primitives/_selectable/selectable.ts | 9 + src/css/primitives/_selectable/types.ts | 9 + src/css/primitives/avatar/avatar.css.ts | 198 + src/css/primitives/avatar/avatar.ts | 68 + src/css/primitives/avatar/types.ts | 10 + src/css/primitives/badge/badge.css.ts | 27 + src/css/primitives/badge/badge.ts | 8 + src/css/primitives/badge/types.ts | 7 + src/css/primitives/box/box.css.ts | 19 + src/css/primitives/box/box.ts | 82 + src/css/primitives/box/types.ts | 75 + src/css/primitives/button/button.css.ts | 287 + src/css/primitives/button/button.ts | 26 + src/css/primitives/button/types.ts | 12 + .../primitives/card/__workshop__/color.tsx | 75 + src/css/primitives/card/__workshop__/index.ts | 14 + src/css/primitives/card/card.css.ts | 370 + src/css/primitives/card/card.ts | 13 + src/css/primitives/card/types.ts | 9 + src/css/primitives/checkbox/checkbox.css.ts | 193 + src/css/primitives/checkbox/checkbox.ts | 17 + src/css/primitives/code/code.css.ts | 271 + src/css/primitives/code/code.ts | 19 + src/css/primitives/code/types.ts | 12 + src/css/primitives/container/container.css.ts | 4 + src/css/primitives/container/container.ts | 17 + src/css/primitives/container/types.ts | 9 + src/css/primitives/heading/heading.css.ts | 85 + src/css/primitives/heading/heading.ts | 22 + src/css/primitives/heading/types.ts | 17 + src/css/primitives/kbd/kbd.css.ts | 16 + src/css/primitives/kbd/kbd.ts | 9 + src/css/primitives/kbd/types.ts | 6 + src/css/primitives/label/label.css.ts | 86 + src/css/primitives/label/label.ts | 22 + src/css/primitives/label/types.ts | 22 + src/css/primitives/popover/popover.css.ts | 6 + src/css/primitives/popover/popover.ts | 12 + src/css/primitives/radio/radio.css.ts | 78 + src/css/primitives/radio/radio.ts | 17 + src/css/primitives/root/root.css.ts | 19 + src/css/primitives/root/root.ts | 17 + src/css/primitives/root/types.ts | 10 + src/css/primitives/select/select.css.ts | 24 + src/css/primitives/select/select.ts | 14 + src/css/primitives/select/types.ts | 5 + src/css/primitives/spinner/spinner.css.ts | 23 + src/css/primitives/spinner/spinner.ts | 13 + src/css/primitives/spinner/types.ts | 4 + src/css/primitives/srOnly/srOnly.css.ts | 10 + src/css/primitives/srOnly/srOnly.ts | 7 + src/css/primitives/stack/stack.css.ts | 6 + src/css/primitives/stack/stack.ts | 7 + src/css/primitives/switch/switch.css.ts | 98 + src/css/primitives/switch/switch.ts | 27 + src/css/primitives/text/text.css.ts | 85 + src/css/primitives/text/text.ts | 24 + src/css/primitives/text/types.ts | 20 + src/css/primitives/textArea/textArea.css.ts | 4 + src/css/primitives/textArea/textArea.ts | 9 + src/css/primitives/textArea/types.ts | 7 + src/css/primitives/textInput/textInput.css.ts | 41 + src/css/primitives/textInput/textInput.ts | 24 + src/css/primitives/textInput/types.ts | 7 + src/css/primitives/tooltip/tooltip.css.ts | 4 + src/css/primitives/tooltip/tooltip.ts | 8 + src/css/primitives/tooltip/types.ts | 4 + src/css/props/alignItems/alignItems.css.ts | 22 + src/css/props/alignItems/alignItems.ts | 8 + src/css/props/alignItems/types.ts | 9 + src/css/props/border/border.css.ts | 65 + src/css/props/border/border.ts | 36 + src/css/props/border/types.ts | 13 + src/css/props/boxSizing/boxSizing.css.ts | 11 + src/css/props/boxSizing/boxSizing.ts | 10 + src/css/props/boxSizing/types.ts | 7 + src/css/props/display/display.css.ts | 56 + src/css/props/display/display.ts | 17 + src/css/props/display/types.ts | 16 + src/css/props/flex/flex.css.ts | 52 + src/css/props/flex/flex.ts | 8 + src/css/props/flex/types.ts | 9 + .../props/flexDirection/flexDirection.css.ts | 19 + src/css/props/flexDirection/flexDirection.ts | 8 + src/css/props/flexDirection/types.ts | 9 + src/css/props/flexWrap/flexWrap.css.ts | 16 + src/css/props/flexWrap/flexWrap.ts | 8 + src/css/props/flexWrap/types.ts | 9 + src/css/props/font/font.css.ts | 93 + src/css/props/font/font.ts | 8 + src/css/props/font/types.ts | 6 + src/css/props/gap/gap.css.ts | 40 + src/css/props/gap/gap.ts | 13 + src/css/props/gap/types.ts | 10 + .../gridAutoColumns/gridAutoColumns.css.ts | 19 + .../props/gridAutoColumns/gridAutoColumns.ts | 8 + src/css/props/gridAutoColumns/types.ts | 19 + .../props/gridAutoFlow/gridAutoFlow.css.ts | 19 + src/css/props/gridAutoFlow/gridAutoFlow.ts | 8 + src/css/props/gridAutoFlow/types.ts | 13 + .../props/gridAutoRows/gridAutoRows.css.ts | 19 + src/css/props/gridAutoRows/gridAutoRows.ts | 8 + src/css/props/gridAutoRows/types.ts | 13 + src/css/props/gridColumn/gridColumn.css.ts | 49 + src/css/props/gridColumn/gridColumn.ts | 8 + src/css/props/gridColumn/types.ts | 19 + .../props/gridColumnEnd/gridColumnEnd.css.ts | 46 + src/css/props/gridColumnEnd/gridColumnEnd.ts | 8 + src/css/props/gridColumnEnd/types.ts | 19 + .../gridColumnStart/gridColumnStart.css.ts | 46 + .../props/gridColumnStart/gridColumnStart.ts | 11 + src/css/props/gridColumnStart/types.ts | 19 + src/css/props/gridRow/gridRow.css.ts | 49 + src/css/props/gridRow/gridRow.ts | 8 + src/css/props/gridRow/types.ts | 19 + src/css/props/gridRowEnd/gridRowEnd.css.ts | 46 + src/css/props/gridRowEnd/gridRowEnd.ts | 8 + src/css/props/gridRowEnd/types.ts | 19 + .../props/gridRowStart/gridRowStart.css.ts | 46 + src/css/props/gridRowStart/gridRowStart.ts | 8 + src/css/props/gridRowStart/types.ts | 19 + .../gridTemplateColumns.css.ts | 43 + .../gridTemplateColumns.ts | 8 + src/css/props/gridTemplateColumns/types.ts | 19 + .../gridTemplateRows/gridTemplateRows.css.ts | 43 + .../gridTemplateRows/gridTemplateRows.ts | 8 + src/css/props/gridTemplateRows/types.ts | 19 + src/css/props/height/height.css.ts | 25 + src/css/props/height/height.ts | 8 + src/css/props/height/types.ts | 15 + src/css/props/inset/inset.css.ts | 37 + src/css/props/inset/inset.ts | 21 + src/css/props/inset/types.ts | 13 + .../justifyContent/justifyContent.css.ts | 25 + .../props/justifyContent/justifyContent.ts | 8 + src/css/props/justifyContent/types.ts | 15 + src/css/props/margin/margin.css.ts | 117 + src/css/props/margin/margin.ts | 25 + src/css/props/margin/types.ts | 17 + src/css/props/maxWidth/maxWidth.css.ts | 32 + src/css/props/maxWidth/maxWidth.ts | 8 + src/css/props/maxWidth/types.ts | 11 + src/css/props/minHeight/minHeight.css.ts | 13 + src/css/props/minHeight/minHeight.ts | 8 + src/css/props/minHeight/types.ts | 9 + src/css/props/minWidth/minWidth.css.ts | 25 + src/css/props/minWidth/minWidth.ts | 8 + src/css/props/minWidth/types.ts | 9 + src/css/props/outline/outline.css.ts | 10 + src/css/props/outline/outline.ts | 8 + src/css/props/outline/types.ts | 7 + src/css/props/overflow/overflow.css.ts | 16 + src/css/props/overflow/overflow.ts | 8 + src/css/props/overflow/types.ts | 17 + src/css/props/padding/padding.css.ts | 87 + src/css/props/padding/padding.ts | 25 + src/css/props/padding/types.ts | 17 + .../props/pointerEvents/pointerEvents.css.ts | 13 + src/css/props/pointerEvents/pointerEvents.ts | 8 + src/css/props/pointerEvents/types.ts | 7 + src/css/props/position/position.css.ts | 22 + src/css/props/position/position.ts | 8 + src/css/props/position/types.ts | 9 + src/css/props/radius/radius.css.ts | 21 + src/css/props/radius/radius.ts | 8 + src/css/props/radius/types.ts | 8 + src/css/props/shadow/shadow.css.ts | 23 + src/css/props/shadow/shadow.ts | 8 + src/css/props/shadow/types.ts | 8 + src/css/props/textAlign/textAlign.css.ts | 22 + src/css/props/textAlign/textAlign.ts | 8 + src/css/props/textAlign/types.ts | 7 + .../props/textOverflow/textOverflow.css.ts | 19 + src/css/props/textOverflow/textOverflow.ts | 8 + src/css/props/textOverflow/types.ts | 12 + src/css/props/width/types.ts | 11 + src/css/props/width/width.css.ts | 31 + src/css/props/width/width.ts | 8 + src/css/types.ts | 249 + src/css/util.ts | 22 + src/css/vars.css.ts | 676 ++ src/theme/build/theme.test.ts | 27 - src/theme/config/tokens/parseTokenKey.test.ts | 64 - src/theme/config/tokens/parseTokenKey.ts | 67 - src/theme/getScopedTheme.ts | 17 +- src/theme/index.ts | 7 +- src/theme/system/theme.ts | 138 - src/theme/types.ts | 28 + src/theme/{system => }/v0/avatar.ts | 0 src/theme/{system => }/v0/color/_generic.ts | 2 +- src/theme/{system => }/v0/color/_system.ts | 0 src/theme/{system => }/v0/color/base.ts | 0 src/theme/{system => }/v0/color/button.ts | 2 +- src/theme/{system => }/v0/color/card.ts | 2 +- src/theme/{system => }/v0/color/color.ts | 22 +- src/theme/{system => }/v0/color/index.ts | 0 src/theme/{system => }/v0/color/input.ts | 2 +- src/theme/{system => }/v0/color/muted.ts | 2 +- src/theme/{system => }/v0/color/selectable.ts | 2 +- src/theme/{system => }/v0/color/solid.ts | 2 +- src/theme/{system => }/v0/color/spot.ts | 2 +- src/theme/{system => v0}/css.ts | 2 + src/theme/{system => v0}/focusRing.ts | 4 +- src/theme/{system => v0}/font.ts | 24 +- src/theme/{system => v0}/index.ts | 1 - src/theme/{system => }/v0/input.ts | 0 src/theme/{system => v0}/layer.ts | 4 +- src/theme/{system => v0}/shadow.ts | 8 +- src/theme/{system => v0}/styles.ts | 2 +- src/theme/v0/theme.ts | 72 + src/theme/{system => v2}/avatar.ts | 6 +- .../_selectable/createSelectableTones.ts | 6 +- .../color/_solid/createSolidTones.ts | 4 +- .../color/button/createButtonModes.ts | 6 +- .../color/button/createButtonTones.ts | 8 +- .../color/card/createCardStates.ts | 6 +- .../build/_deprecated/color/color.test.ts | 2 +- .../build/_deprecated/color/defaults.ts | 2 +- .../build/_deprecated/color/factory.ts | 7 +- .../{ => v2}/build/_deprecated/color/index.ts | 0 .../color/input/createInputModes.ts | 9 +- .../_deprecated/color/muted/createMuted.ts | 4 +- .../_deprecated/color/spot/createSpot.ts | 4 +- .../{ => v2}/build/buildColorTheme.test.ts | 4 +- src/theme/{ => v2}/build/buildColorTheme.ts | 48 +- src/theme/{ => v2}/build/buildTheme.test.ts | 2 + src/theme/{ => v2}/build/buildTheme.ts | 7 +- .../{ => v2}/build/colorToken/colorToken.ts | 4 +- .../build/colorToken/compileColorToken.ts | 2 +- src/theme/{ => v2}/build/colorToken/index.ts | 0 src/theme/{ => v2}/build/colorToken/types.ts | 4 +- src/theme/{ => v2}/build/index.ts | 0 .../build/lib/color-fns/blend/index.ts | 0 .../{ => v2}/build/lib/color-fns/blend/mix.ts | 2 +- .../build/lib/color-fns/blend/multiply.ts | 2 +- .../build/lib/color-fns/blend/screen.ts | 2 +- .../build/lib/color-fns/color-fns.test.ts | 2 +- .../build/lib/color-fns/contrastRatio.ts | 7 +- .../{ => v2}/build/lib/color-fns/convert.ts | 2 +- .../{ => v2}/build/lib/color-fns/index.ts | 0 .../{ => v2}/build/lib/color-fns/parse.ts | 2 +- .../{ => v2}/build/lib/color-fns/rgba.ts | 4 + .../{ => v2}/build/lib/color-fns/types.ts | 0 src/theme/{ => v2}/build/lib/isRecord.ts | 0 src/theme/{ => v2}/build/lib/utils.ts | 0 src/theme/{ => v2}/build/merge.ts | 2 + .../{ => v2}/build/mixThemeColor.test.ts | 2 + src/theme/{ => v2}/build/mixThemeColor.ts | 2 +- src/theme/{ => v2}/build/renderColorTheme.ts | 48 +- src/theme/{ => v2}/build/renderColorValue.ts | 6 +- .../{ => v2}/build/resolveColorTokens.ts | 26 +- src/theme/{system => v2}/color/_constants.ts | 0 src/theme/{system => v2}/color/_helpers.ts | 4 +- src/theme/{system => v2}/color/_system.ts | 6 +- src/theme/{system => v2}/color/avatar.ts | 10 +- src/theme/{system => v2}/color/badge.ts | 10 +- src/theme/{system => v2}/color/button.ts | 16 +- src/theme/{system => v2}/color/color.ts | 26 +- src/theme/{system => v2}/color/index.ts | 0 src/theme/{system => v2}/color/input.ts | 18 +- src/theme/{system => v2}/color/kbd.ts | 4 +- src/theme/{system => v2}/color/selectable.ts | 12 +- src/theme/{system => v2}/color/shadow.ts | 0 src/theme/{system => v2}/color/state.ts | 12 +- src/theme/{system => v2}/color/syntax.ts | 4 +- src/theme/{ => v2}/config/helpers.ts | 19 +- src/theme/{ => v2}/config/index.ts | 0 src/theme/{ => v2}/config/system.ts | 23 +- .../{ => v2}/config/tokens/color/index.ts | 0 .../{ => v2}/config/tokens/color/types.ts | 24 +- src/theme/{ => v2}/config/tokens/index.ts | 1 - .../config/tokens/parseTokenValue.test.ts | 2 + .../{ => v2}/config/tokens/parseTokenValue.ts | 4 +- src/theme/{ => v2}/config/tokens/types.ts | 6 +- src/theme/{ => v2}/config/types.ts | 15 +- src/theme/{ => v2}/defaults/colorPalette.ts | 2 +- src/theme/{ => v2}/defaults/colorTokens.ts | 2 +- src/theme/{ => v2}/defaults/config.ts | 4 +- src/theme/{ => v2}/defaults/fonts.ts | 32 +- src/theme/{system/v0 => v2}/index.ts | 3 + src/theme/{system => v2}/input.ts | 6 +- src/theme/v2/theme.ts | 45 + src/theme/v3/_constants.ts | 29 + src/theme/v3/_parseColorToken.ts | 180 + src/theme/v3/buildTheme_v3.ts | 39 + src/theme/v3/color/_constants.ts | 15 + src/theme/v3/color/avatar.ts | 14 + src/theme/v3/color/card.ts | 79 + src/theme/v3/color/color.ts | 98 + src/theme/v3/color/element.ts | 19 + src/theme/v3/color/index.ts | 7 + src/theme/v3/color/token.ts | 32 + src/theme/v3/color/tokens.ts | 5 + src/theme/v3/defaultFonts.ts | 250 + src/theme/v3/defaultTokens.ts | 199 + src/theme/v3/index.ts | 9 + src/theme/v3/merge.ts | 24 + src/theme/v3/palette/constants.ts | 15 + src/theme/v3/palette/index.ts | 2 + src/theme/v3/palette/types.ts | 7 + src/theme/v3/resolveTokens.ts | 204 + src/theme/v3/tokens.ts | 16 + src/theme/v3/types.ts | 133 + src/theme/versioning/getTheme_v2.ts | 5 +- src/theme/versioning/index.ts | 4 - src/theme/versioning/is_v0.ts | 3 +- src/theme/versioning/is_v2.ts | 3 +- src/theme/versioning/themeColor_v0_v2.ts | 12 +- src/theme/versioning/themeColor_v2_v2_9.ts | 2 +- src/theme/versioning/themeColor_v3_v2.ts | 383 + src/theme/versioning/v0_v2.ts | 5 +- src/theme/versioning/v2_v0.ts | 14 +- src/theme/versioning/v3_v2.ts | 130 + stories/components/CodeSkeleton.stories.tsx | 50 - .../components/HeadingSkeleton.stories.tsx | 50 - stories/components/LabelSkeleton.stories.tsx | 50 - stories/components/Skeleton.stories.tsx | 78 - stories/components/TextSkeleton.stories.tsx | 50 - stories/constants.ts | 49 - stories/controls.ts | 134 - stories/primitives/Flex.stories.tsx | 52 - stories/primitives/Grid.stories.tsx | 49 - stories/primitives/Inline.stories.tsx | 48 - stories/primitives/Stack.stories.tsx | 49 - stories/tokens/ColorPalette.tsx | 85 - storybook/.storybook/decorators/ui.tsx | 20 + storybook/.storybook/main.ts | 20 + storybook/.storybook/manager-head.html | 25 + storybook/.storybook/preview-head.html | 17 + storybook/.storybook/preview.ts | 45 + storybook/package.json | 35 + {stories => storybook/stories}/README.mdx | 0 .../components/Autocomplete.stories.tsx | 19 +- .../components/Breadcrumbs.stories.tsx | 9 +- .../components/CodeSkeleton.stories.tsx | 52 + .../stories}/components/Dialog.stories.tsx | 55 +- .../components/HeadingSkeleton.stories.tsx | 52 + .../stories}/components/Hotkeys.stories.tsx | 8 +- .../components/LabelSkeleton.stories.tsx | 52 + .../stories}/components/Menu.stories.tsx | 47 +- .../components/MenuButton.stories.tsx | 26 +- .../stories}/components/MenuItem.stories.tsx | 24 +- .../stories/components/Skeleton.stories.tsx | 103 + .../stories}/components/Tab.stories.tsx | 16 +- .../stories}/components/TabList.stories.tsx | 38 +- .../components/TextSkeleton.stories.tsx | 52 + .../stories}/components/Toast.stories.tsx | 16 +- .../stories}/components/Tree.stories.tsx | 8 +- storybook/stories/constants.ts | 19 + storybook/stories/controls.ts | 126 + .../stories}/helpers/columnBuilder.tsx | 11 +- .../stories}/helpers/matrixBuilder.tsx | 4 +- .../stories}/helpers/rowBuilder.tsx | 16 +- .../stories}/primitives/Avatar.stories.tsx | 19 +- .../primitives/AvatarCounter.stories.tsx | 8 +- .../primitives/AvatarStack.stories.tsx | 8 +- .../stories}/primitives/Badge.stories.tsx | 28 +- .../stories}/primitives/Box.stories.tsx | 16 +- .../stories}/primitives/Button.stories.tsx | 147 +- .../stories}/primitives/Card.stories.tsx | 140 +- .../stories}/primitives/Checkbox.stories.tsx | 6 +- .../stories}/primitives/Code.stories.tsx | 12 +- .../stories}/primitives/Container.stories.tsx | 14 +- storybook/stories/primitives/Flex.stories.tsx | 52 + storybook/stories/primitives/Grid.stories.tsx | 49 + .../stories}/primitives/Heading.stories.tsx | 54 +- .../stories/primitives/Inline.stories.tsx | 48 + .../stories}/primitives/KBD.stories.tsx | 20 +- .../stories}/primitives/Label.stories.tsx | 14 +- .../stories}/primitives/Popover.stories.tsx | 19 +- .../stories}/primitives/Radio.stories.tsx | 8 +- .../stories}/primitives/Select.stories.tsx | 18 +- .../stories}/primitives/Spinner.stories.tsx | 8 +- .../stories/primitives/Stack.stories.tsx | 49 + .../stories}/primitives/Switch.stories.tsx | 8 +- .../stories}/primitives/Text.stories.tsx | 22 +- .../stories}/primitives/TextArea.stories.tsx | 16 +- .../stories}/primitives/TextInput.stories.tsx | 27 +- .../stories}/primitives/Tooltip.stories.tsx | 19 +- .../primitives/components/FieldWrapper.tsx | 7 +- .../stories}/tests/FocusRings.mdx | 0 .../stories}/tests/FocusRings.tsx | 85 +- .../stories}/tests/Tones.mdx | 0 .../stories}/tests/Tones.tsx | 59 +- storybook/stories/tokens/ColorPalette.tsx | 67 + .../stories}/tokens/Colors.mdx | 4 +- storybook/tsconfig.json | 32 + storybook/vite.config.ts | 55 + test/mocks/matchMedia.mock.ts | 14 +- test/mocks/resizeObserver.mock.ts | 10 +- test/setup.ts | 4 + test/setupFilesAfterEnv.ts | 2 - test/utils.tsx | 8 +- tsconfig.dist.json | 10 +- tsconfig.json | 14 +- tsconfig.settings.json | 23 +- vitest.config.ts | 17 + workshop.config.ts | 12 +- workshop.runtime.ts | 32 +- workshop/constants.ts | 208 + workshop/empty.css | 0 workshop/fontsPlugin.tsx | 76 - workshop/index.ts | 1 + 953 files changed, 25107 insertions(+), 17440 deletions(-) delete mode 100644 .storybook/decorators/withSanityTheme.decorator.tsx delete mode 100644 .storybook/main.ts delete mode 100644 .storybook/manager-head.html delete mode 100644 .storybook/manager.ts delete mode 100644 .storybook/preview-head.html delete mode 100644 .storybook/preview.tsx create mode 100644 .vscode/settings.json rename eslint.config.mjs => eslint.config.js (85%) create mode 100644 exports/css.ts delete mode 100644 jest.config.js create mode 100644 playground/next/.gitignore create mode 100644 playground/next/README.md create mode 100644 playground/next/app/layout.tsx create mode 100644 playground/next/app/page.tsx create mode 100644 playground/next/components/AppRoot.tsx create mode 100644 playground/next/empty.css create mode 100644 playground/next/eslint.config.mjs create mode 100644 playground/next/next.config.ts create mode 100644 playground/next/package.json create mode 100644 playground/next/tsconfig.dist.json create mode 100644 playground/next/tsconfig.json create mode 100644 playground/react-router/.dockerignore create mode 100644 playground/react-router/.gitignore create mode 100644 playground/react-router/README.md create mode 100644 playground/react-router/app/root.tsx create mode 100644 playground/react-router/app/routes.ts create mode 100644 playground/react-router/app/routes/home.tsx create mode 100644 playground/react-router/empty.css create mode 100644 playground/react-router/package.json create mode 100644 playground/react-router/react-router.config.ts create mode 100644 playground/react-router/tsconfig.json create mode 100644 playground/react-router/vite.config.ts create mode 100644 playground/vite/.gitignore create mode 100644 playground/vite/README.md create mode 100644 playground/vite/empty.css create mode 100644 playground/vite/eslint.config.js create mode 100644 playground/vite/index.html create mode 100644 playground/vite/package.json create mode 100644 playground/vite/src/App.tsx create mode 100644 playground/vite/src/AppRouter.tsx create mode 100644 playground/vite/src/main.tsx create mode 100644 playground/vite/src/vite-env.d.ts create mode 100644 playground/vite/tsconfig.app.json create mode 100644 playground/vite/tsconfig.json create mode 100644 playground/vite/tsconfig.node.json create mode 100644 playground/vite/vite.config.ts create mode 100644 prettier.config.cjs create mode 100644 registry/.gitignore create mode 100644 registry/sanity-ui-workshop-3.0.0-local.12.tgz create mode 100644 rollup/cssBundle.ts create mode 100644 src/core/Root.tsx create mode 100644 src/core/RootProvider.tsx rename src/core/{global.ts => __DEV__.ts} (58%) create mode 100644 src/core/__workshop__/boundary.tsx delete mode 100644 src/core/__workshop__/constants.ts create mode 100644 src/core/__workshop__/index.ts create mode 100644 src/core/_compat/helpers.ts create mode 100644 src/core/_compat/styles/_responsive.ts rename src/core/{ => _compat}/theme/theme.test.tsx (80%) rename src/core/{ => _compat}/theme/themeColorProvider.tsx (68%) create mode 100644 src/core/_compat/theme/themeContext.ts rename src/core/{ => _compat}/theme/themeProvider.tsx (56%) rename src/core/{ => _compat}/theme/types.ts (61%) rename src/core/{ => _compat}/theme/useRootTheme.ts (83%) rename src/core/{ => _compat}/theme/useTheme.ts (69%) rename src/core/{_compat.ts => _compat/types.ts} (75%) rename src/core/components/autocomplete/{__mocks__ => __workshop__/mock}/apiStore.ts (100%) rename src/core/components/autocomplete/{__mocks__ => __workshop__/mock}/countries.ts (100%) delete mode 100644 src/core/components/autocomplete/autocomplete.styles.tsx delete mode 100644 src/core/components/autocomplete/index.ts delete mode 100644 src/core/components/breadcrumbs/breadcrumbs.styles.ts delete mode 100644 src/core/components/breadcrumbs/index.ts create mode 100644 src/core/components/dialog/dialogCard.tsx delete mode 100644 src/core/components/dialog/index.ts create mode 100644 src/core/components/dialog/isTargetWithinScope.ts delete mode 100644 src/core/components/dialog/styles.ts rename src/core/{types/dialog.ts => components/dialog/types.ts} (72%) delete mode 100644 src/core/components/hotkeys/index.ts delete mode 100644 src/core/components/index.ts delete mode 100644 src/core/components/menu/index.ts delete mode 100644 src/core/components/menu/menuDivider.ts create mode 100644 src/core/components/menu/menuDivider.tsx delete mode 100644 src/core/components/skeleton/index.ts delete mode 100644 src/core/components/skeleton/skeleton.tsx delete mode 100644 src/core/components/skeleton/styles.ts delete mode 100644 src/core/components/skeleton/textSkeleton.tsx delete mode 100644 src/core/components/tab/index.ts delete mode 100644 src/core/components/toast/index.ts delete mode 100644 src/core/components/toast/styles.ts delete mode 100644 src/core/components/tree/index.ts delete mode 100644 src/core/components/tree/style.ts rename src/core/{utils => components}/virtualList/__workshop__/changingProps.tsx (100%) rename src/core/{utils => components}/virtualList/__workshop__/elementScroll.tsx (100%) rename src/core/{utils => components}/virtualList/__workshop__/index.ts (95%) rename src/core/{utils => components}/virtualList/__workshop__/infiniteList.tsx (93%) rename src/core/{utils => components}/virtualList/__workshop__/windowScrolll.tsx (100%) rename src/core/{utils => components}/virtualList/virtualList.tsx (52%) delete mode 100644 src/core/helpers/index.ts create mode 100644 src/core/helpers/props.ts delete mode 100644 src/core/hooks/index.ts delete mode 100644 src/core/hooks/useElementRect/index.ts delete mode 100644 src/core/hooks/useMediaIndex/index.ts create mode 100644 src/core/hooks/useResponsiveProp.ts create mode 100644 src/core/lib/isArray.ts rename src/core/observers/{elementSizeObserver.ts => elementSize.ts} (98%) delete mode 100644 src/core/observers/index.ts rename src/core/observers/{resizeObserver.ts => resize.ts} (100%) delete mode 100644 src/core/primitives/_selectable/index.ts delete mode 100644 src/core/primitives/_selectable/selectable.tsx delete mode 100644 src/core/primitives/_selectable/style.ts create mode 100644 src/core/primitives/arrow/arrow.tsx rename src/core/{utils => primitives}/arrow/cmds.ts (100%) delete mode 100644 src/core/primitives/avatar/index.ts delete mode 100644 src/core/primitives/avatar/styles.ts delete mode 100644 src/core/primitives/badge/index.ts delete mode 100644 src/core/primitives/badge/styles.ts delete mode 100644 src/core/primitives/box/index.ts create mode 100644 src/core/primitives/box/types.ts create mode 100644 src/core/primitives/button/__workshop__/textOverflow.tsx delete mode 100644 src/core/primitives/button/index.ts delete mode 100644 src/core/primitives/button/styles.ts create mode 100644 src/core/primitives/button/types.ts delete mode 100644 src/core/primitives/card/__workshop__/allTones.tsx create mode 100644 src/core/primitives/card/__workshop__/tones.tsx create mode 100644 src/core/primitives/card/cardContext.ts create mode 100644 src/core/primitives/card/cardProvider.tsx delete mode 100644 src/core/primitives/card/index.ts delete mode 100644 src/core/primitives/card/styles.ts create mode 100644 src/core/primitives/card/useCard.ts delete mode 100644 src/core/primitives/checkbox/index.ts delete mode 100644 src/core/primitives/checkbox/styles.ts delete mode 100644 src/core/primitives/code/index.ts delete mode 100644 src/core/primitives/code/styles.ts delete mode 100644 src/core/primitives/container/index.ts delete mode 100644 src/core/primitives/container/styles.ts delete mode 100644 src/core/primitives/flex/index.ts create mode 100644 src/core/primitives/flex/types.ts delete mode 100644 src/core/primitives/grid/index.ts create mode 100644 src/core/primitives/grid/types.ts delete mode 100644 src/core/primitives/heading/index.ts delete mode 100644 src/core/primitives/heading/styles.ts delete mode 100644 src/core/primitives/heading/types.ts delete mode 100644 src/core/primitives/index.ts delete mode 100644 src/core/primitives/inline/index.ts delete mode 100644 src/core/primitives/inline/styles.ts delete mode 100644 src/core/primitives/inline/types.ts delete mode 100644 src/core/primitives/kbd/index.ts delete mode 100644 src/core/primitives/label/index.ts delete mode 100644 src/core/primitives/label/styles.ts rename src/core/{utils => primitives}/layer/__workshop__/_debug.tsx (100%) rename src/core/{utils => primitives}/layer/__workshop__/index.ts (94%) rename src/core/{utils => primitives}/layer/__workshop__/multipleRoots.tsx (89%) rename src/core/{utils => primitives}/layer/__workshop__/nested.tsx (96%) create mode 100644 src/core/primitives/layer/__workshop__/responsiveZOffset.tsx rename src/core/{utils => primitives}/layer/getLayerContext.test.ts (87%) rename src/core/{utils => primitives}/layer/getLayerContext.ts (94%) rename src/core/{utils => primitives}/layer/layer.test.tsx (80%) create mode 100644 src/core/primitives/layer/layer.tsx rename src/core/{utils/layer/layer.tsx => primitives/layer/layerCard.tsx} (52%) rename src/core/{utils => primitives}/layer/layerContext.ts (80%) rename src/core/{utils => primitives}/layer/layerProvider.tsx (75%) rename src/core/{utils => primitives}/layer/types.ts (100%) rename src/core/{utils => primitives}/layer/useLayer.ts (89%) delete mode 100644 src/core/primitives/popover/index.ts delete mode 100644 src/core/primitives/popover/popoverCard.tsx create mode 100644 src/core/primitives/popover/popoverLayer.tsx delete mode 100644 src/core/primitives/radio/index.ts delete mode 100644 src/core/primitives/radio/styles.ts delete mode 100644 src/core/primitives/select/index.ts delete mode 100644 src/core/primitives/select/styles.ts create mode 100644 src/core/primitives/selectable/selectable.tsx create mode 100644 src/core/primitives/selectable/types.ts rename src/core/{components => primitives}/skeleton/__workshop__/delay.tsx (89%) rename src/core/{components => primitives}/skeleton/__workshop__/index.ts (91%) rename src/core/{components => primitives}/skeleton/__workshop__/skeleton.tsx (89%) create mode 100644 src/core/primitives/skeleton/codeSkeleton.tsx create mode 100644 src/core/primitives/skeleton/headingSkeleton.tsx create mode 100644 src/core/primitives/skeleton/labelSkeleton.tsx create mode 100644 src/core/primitives/skeleton/skeleton.tsx create mode 100644 src/core/primitives/skeleton/textSkeleton.tsx create mode 100644 src/core/primitives/spinner/animatedSpinnerIcon.tsx delete mode 100644 src/core/primitives/spinner/index.ts create mode 100644 src/core/primitives/srOnly/srOnly.tsx delete mode 100644 src/core/primitives/stack/index.ts delete mode 100644 src/core/primitives/stack/styles.ts delete mode 100644 src/core/primitives/switch/index.ts delete mode 100644 src/core/primitives/switch/styles.ts delete mode 100644 src/core/primitives/text/index.ts delete mode 100644 src/core/primitives/text/styles.ts delete mode 100644 src/core/primitives/textArea/index.ts delete mode 100644 src/core/primitives/textInput/index.ts delete mode 100644 src/core/primitives/tooltip/index.ts delete mode 100644 src/core/primitives/tooltip/tooltipCard.tsx create mode 100644 src/core/primitives/tooltip/tooltipLayer.tsx delete mode 100644 src/core/styles/border/borderStyle.ts delete mode 100644 src/core/styles/border/index.ts delete mode 100644 src/core/styles/border/types.ts delete mode 100644 src/core/styles/box/boxStyle.ts delete mode 100644 src/core/styles/box/index.ts delete mode 100644 src/core/styles/box/types.ts delete mode 100644 src/core/styles/card/_cardColorStyle.ts delete mode 100644 src/core/styles/card/index.ts delete mode 100644 src/core/styles/flex/flexItemStyle.ts delete mode 100644 src/core/styles/flex/flexStyle.ts delete mode 100644 src/core/styles/flex/index.ts delete mode 100644 src/core/styles/flex/types.ts delete mode 100644 src/core/styles/focusRing/index.ts delete mode 100644 src/core/styles/font/codeFontStyle.ts delete mode 100644 src/core/styles/font/headingFontStyle.ts delete mode 100644 src/core/styles/font/index.ts delete mode 100644 src/core/styles/font/labelFontStyle.ts delete mode 100644 src/core/styles/font/responsiveFont.ts delete mode 100644 src/core/styles/font/textAlignStyle.ts delete mode 100644 src/core/styles/font/textFontStyle.ts delete mode 100644 src/core/styles/font/types.ts delete mode 100644 src/core/styles/grid/gridItemStyle.ts delete mode 100644 src/core/styles/grid/gridStyle.ts delete mode 100644 src/core/styles/grid/index.ts delete mode 100644 src/core/styles/grid/types.ts delete mode 100644 src/core/styles/helpers.ts delete mode 100644 src/core/styles/index.ts delete mode 100644 src/core/styles/input/index.ts delete mode 100644 src/core/styles/input/responsiveInputPaddingStyle.ts delete mode 100644 src/core/styles/input/textInputStyle.ts delete mode 100644 src/core/styles/internal.ts delete mode 100644 src/core/styles/margin/index.ts delete mode 100644 src/core/styles/margin/marginStyle.ts delete mode 100644 src/core/styles/margin/marginsStyle.test.ts delete mode 100644 src/core/styles/margin/types.ts delete mode 100644 src/core/styles/padding/index.ts delete mode 100644 src/core/styles/padding/paddingStyle.test.ts delete mode 100644 src/core/styles/padding/paddingStyle.ts delete mode 100644 src/core/styles/padding/types.ts delete mode 100644 src/core/styles/radius/index.ts delete mode 100644 src/core/styles/radius/radiusStyle.ts delete mode 100644 src/core/styles/radius/types.ts delete mode 100644 src/core/styles/shadow/index.ts delete mode 100644 src/core/styles/shadow/shadowStyle.ts delete mode 100644 src/core/styles/shadow/types.ts delete mode 100644 src/core/styles/types.ts delete mode 100644 src/core/theme/__workshop__/build/Root.tsx delete mode 100644 src/core/theme/__workshop__/build/helpers.ts delete mode 100644 src/core/theme/__workshop__/build/story.tsx delete mode 100644 src/core/theme/__workshop__/canvas.tsx delete mode 100644 src/core/theme/__workshop__/color.tsx delete mode 100644 src/core/theme/__workshop__/debug/story.tsx delete mode 100644 src/core/theme/__workshop__/index.ts delete mode 100644 src/core/theme/__workshop__/layer.tsx delete mode 100644 src/core/theme/__workshop__/nestedProvider.tsx delete mode 100644 src/core/theme/index.ts delete mode 100644 src/core/theme/themeContext.ts delete mode 100644 src/core/types/avatar.ts delete mode 100644 src/core/types/badge.ts delete mode 100644 src/core/types/box.ts delete mode 100644 src/core/types/button.ts delete mode 100644 src/core/types/card.ts delete mode 100644 src/core/types/flex.ts delete mode 100644 src/core/types/grid.ts delete mode 100644 src/core/types/index.ts delete mode 100644 src/core/types/popover.ts create mode 100644 src/core/types/props.ts delete mode 100644 src/core/types/selectable.ts delete mode 100644 src/core/types/text.ts create mode 100644 src/core/types/textAlign.ts delete mode 100644 src/core/utils/arrow/arrow.tsx delete mode 100644 src/core/utils/arrow/index.ts delete mode 100644 src/core/utils/boundaryElement/index.ts delete mode 100644 src/core/utils/conditionalWrapper/conditionalWrapper.tsx delete mode 100644 src/core/utils/conditionalWrapper/index.ts delete mode 100644 src/core/utils/elementQuery/index.ts delete mode 100644 src/core/utils/index.ts delete mode 100644 src/core/utils/layer/__workshop__/responsiveZOffset.tsx delete mode 100644 src/core/utils/layer/index.ts delete mode 100644 src/core/utils/portal/index.ts delete mode 100644 src/core/utils/portal/portal.ts create mode 100644 src/core/utils/portal/portal.tsx delete mode 100644 src/core/utils/srOnly/index.ts delete mode 100644 src/core/utils/srOnly/srOnly.tsx delete mode 100644 src/core/utils/virtualList/index.ts create mode 100644 src/css/_assign.ts create mode 100644 src/css/_composeClassNames.ts create mode 100644 src/css/_fromEntries.ts create mode 100644 src/css/_getClassNames.ts create mode 100644 src/css/_responsiveClassName.ts create mode 100644 src/css/_responsiveStyle.css.ts create mode 100644 src/css/_style.css.ts create mode 100644 src/css/components/breadcrumbs/breadcrumbs.css.ts create mode 100644 src/css/components/breadcrumbs/breadcrumbs.ts create mode 100644 src/css/components/dialog/dialog.css.ts create mode 100644 src/css/components/dialog/dialog.ts create mode 100644 src/css/components/menu/menu.css.ts create mode 100644 src/css/components/menu/menu.ts create mode 100644 src/css/components/skeleton/skeleton.css.ts create mode 100644 src/css/components/skeleton/skeleton.ts create mode 100644 src/css/components/skeleton/types.ts create mode 100644 src/css/components/toast/toast.css.ts create mode 100644 src/css/components/toast/toast.ts create mode 100644 src/css/components/tree/tree.css.ts create mode 100644 src/css/components/tree/tree.ts create mode 100644 src/css/constants.ts create mode 100644 src/css/defaultTheme.css.ts create mode 100644 src/css/index.ts create mode 100644 src/css/layers.css.ts create mode 100644 src/css/primitives/_arrow/_arrow.css.ts create mode 100644 src/css/primitives/_arrow/_arrow.ts create mode 100644 src/css/primitives/_input/_input.css.ts create mode 100644 src/css/primitives/_input/input.ts create mode 100644 src/css/primitives/_input/types.ts create mode 100644 src/css/primitives/_selectable/_selectable.css.ts create mode 100644 src/css/primitives/_selectable/selectable.ts create mode 100644 src/css/primitives/_selectable/types.ts create mode 100644 src/css/primitives/avatar/avatar.css.ts create mode 100644 src/css/primitives/avatar/avatar.ts create mode 100644 src/css/primitives/avatar/types.ts create mode 100644 src/css/primitives/badge/badge.css.ts create mode 100644 src/css/primitives/badge/badge.ts create mode 100644 src/css/primitives/badge/types.ts create mode 100644 src/css/primitives/box/box.css.ts create mode 100644 src/css/primitives/box/box.ts create mode 100644 src/css/primitives/box/types.ts create mode 100644 src/css/primitives/button/button.css.ts create mode 100644 src/css/primitives/button/button.ts create mode 100644 src/css/primitives/button/types.ts create mode 100644 src/css/primitives/card/__workshop__/color.tsx create mode 100644 src/css/primitives/card/__workshop__/index.ts create mode 100644 src/css/primitives/card/card.css.ts create mode 100644 src/css/primitives/card/card.ts create mode 100644 src/css/primitives/card/types.ts create mode 100644 src/css/primitives/checkbox/checkbox.css.ts create mode 100644 src/css/primitives/checkbox/checkbox.ts create mode 100644 src/css/primitives/code/code.css.ts create mode 100644 src/css/primitives/code/code.ts create mode 100644 src/css/primitives/code/types.ts create mode 100644 src/css/primitives/container/container.css.ts create mode 100644 src/css/primitives/container/container.ts create mode 100644 src/css/primitives/container/types.ts create mode 100644 src/css/primitives/heading/heading.css.ts create mode 100644 src/css/primitives/heading/heading.ts create mode 100644 src/css/primitives/heading/types.ts create mode 100644 src/css/primitives/kbd/kbd.css.ts create mode 100644 src/css/primitives/kbd/kbd.ts create mode 100644 src/css/primitives/kbd/types.ts create mode 100644 src/css/primitives/label/label.css.ts create mode 100644 src/css/primitives/label/label.ts create mode 100644 src/css/primitives/label/types.ts create mode 100644 src/css/primitives/popover/popover.css.ts create mode 100644 src/css/primitives/popover/popover.ts create mode 100644 src/css/primitives/radio/radio.css.ts create mode 100644 src/css/primitives/radio/radio.ts create mode 100644 src/css/primitives/root/root.css.ts create mode 100644 src/css/primitives/root/root.ts create mode 100644 src/css/primitives/root/types.ts create mode 100644 src/css/primitives/select/select.css.ts create mode 100644 src/css/primitives/select/select.ts create mode 100644 src/css/primitives/select/types.ts create mode 100644 src/css/primitives/spinner/spinner.css.ts create mode 100644 src/css/primitives/spinner/spinner.ts create mode 100644 src/css/primitives/spinner/types.ts create mode 100644 src/css/primitives/srOnly/srOnly.css.ts create mode 100644 src/css/primitives/srOnly/srOnly.ts create mode 100644 src/css/primitives/stack/stack.css.ts create mode 100644 src/css/primitives/stack/stack.ts create mode 100644 src/css/primitives/switch/switch.css.ts create mode 100644 src/css/primitives/switch/switch.ts create mode 100644 src/css/primitives/text/text.css.ts create mode 100644 src/css/primitives/text/text.ts create mode 100644 src/css/primitives/text/types.ts create mode 100644 src/css/primitives/textArea/textArea.css.ts create mode 100644 src/css/primitives/textArea/textArea.ts create mode 100644 src/css/primitives/textArea/types.ts create mode 100644 src/css/primitives/textInput/textInput.css.ts create mode 100644 src/css/primitives/textInput/textInput.ts create mode 100644 src/css/primitives/textInput/types.ts create mode 100644 src/css/primitives/tooltip/tooltip.css.ts create mode 100644 src/css/primitives/tooltip/tooltip.ts create mode 100644 src/css/primitives/tooltip/types.ts create mode 100644 src/css/props/alignItems/alignItems.css.ts create mode 100644 src/css/props/alignItems/alignItems.ts create mode 100644 src/css/props/alignItems/types.ts create mode 100644 src/css/props/border/border.css.ts create mode 100644 src/css/props/border/border.ts create mode 100644 src/css/props/border/types.ts create mode 100644 src/css/props/boxSizing/boxSizing.css.ts create mode 100644 src/css/props/boxSizing/boxSizing.ts create mode 100644 src/css/props/boxSizing/types.ts create mode 100644 src/css/props/display/display.css.ts create mode 100644 src/css/props/display/display.ts create mode 100644 src/css/props/display/types.ts create mode 100644 src/css/props/flex/flex.css.ts create mode 100644 src/css/props/flex/flex.ts create mode 100644 src/css/props/flex/types.ts create mode 100644 src/css/props/flexDirection/flexDirection.css.ts create mode 100644 src/css/props/flexDirection/flexDirection.ts create mode 100644 src/css/props/flexDirection/types.ts create mode 100644 src/css/props/flexWrap/flexWrap.css.ts create mode 100644 src/css/props/flexWrap/flexWrap.ts create mode 100644 src/css/props/flexWrap/types.ts create mode 100644 src/css/props/font/font.css.ts create mode 100644 src/css/props/font/font.ts create mode 100644 src/css/props/font/types.ts create mode 100644 src/css/props/gap/gap.css.ts create mode 100644 src/css/props/gap/gap.ts create mode 100644 src/css/props/gap/types.ts create mode 100644 src/css/props/gridAutoColumns/gridAutoColumns.css.ts create mode 100644 src/css/props/gridAutoColumns/gridAutoColumns.ts create mode 100644 src/css/props/gridAutoColumns/types.ts create mode 100644 src/css/props/gridAutoFlow/gridAutoFlow.css.ts create mode 100644 src/css/props/gridAutoFlow/gridAutoFlow.ts create mode 100644 src/css/props/gridAutoFlow/types.ts create mode 100644 src/css/props/gridAutoRows/gridAutoRows.css.ts create mode 100644 src/css/props/gridAutoRows/gridAutoRows.ts create mode 100644 src/css/props/gridAutoRows/types.ts create mode 100644 src/css/props/gridColumn/gridColumn.css.ts create mode 100644 src/css/props/gridColumn/gridColumn.ts create mode 100644 src/css/props/gridColumn/types.ts create mode 100644 src/css/props/gridColumnEnd/gridColumnEnd.css.ts create mode 100644 src/css/props/gridColumnEnd/gridColumnEnd.ts create mode 100644 src/css/props/gridColumnEnd/types.ts create mode 100644 src/css/props/gridColumnStart/gridColumnStart.css.ts create mode 100644 src/css/props/gridColumnStart/gridColumnStart.ts create mode 100644 src/css/props/gridColumnStart/types.ts create mode 100644 src/css/props/gridRow/gridRow.css.ts create mode 100644 src/css/props/gridRow/gridRow.ts create mode 100644 src/css/props/gridRow/types.ts create mode 100644 src/css/props/gridRowEnd/gridRowEnd.css.ts create mode 100644 src/css/props/gridRowEnd/gridRowEnd.ts create mode 100644 src/css/props/gridRowEnd/types.ts create mode 100644 src/css/props/gridRowStart/gridRowStart.css.ts create mode 100644 src/css/props/gridRowStart/gridRowStart.ts create mode 100644 src/css/props/gridRowStart/types.ts create mode 100644 src/css/props/gridTemplateColumns/gridTemplateColumns.css.ts create mode 100644 src/css/props/gridTemplateColumns/gridTemplateColumns.ts create mode 100644 src/css/props/gridTemplateColumns/types.ts create mode 100644 src/css/props/gridTemplateRows/gridTemplateRows.css.ts create mode 100644 src/css/props/gridTemplateRows/gridTemplateRows.ts create mode 100644 src/css/props/gridTemplateRows/types.ts create mode 100644 src/css/props/height/height.css.ts create mode 100644 src/css/props/height/height.ts create mode 100644 src/css/props/height/types.ts create mode 100644 src/css/props/inset/inset.css.ts create mode 100644 src/css/props/inset/inset.ts create mode 100644 src/css/props/inset/types.ts create mode 100644 src/css/props/justifyContent/justifyContent.css.ts create mode 100644 src/css/props/justifyContent/justifyContent.ts create mode 100644 src/css/props/justifyContent/types.ts create mode 100644 src/css/props/margin/margin.css.ts create mode 100644 src/css/props/margin/margin.ts create mode 100644 src/css/props/margin/types.ts create mode 100644 src/css/props/maxWidth/maxWidth.css.ts create mode 100644 src/css/props/maxWidth/maxWidth.ts create mode 100644 src/css/props/maxWidth/types.ts create mode 100644 src/css/props/minHeight/minHeight.css.ts create mode 100644 src/css/props/minHeight/minHeight.ts create mode 100644 src/css/props/minHeight/types.ts create mode 100644 src/css/props/minWidth/minWidth.css.ts create mode 100644 src/css/props/minWidth/minWidth.ts create mode 100644 src/css/props/minWidth/types.ts create mode 100644 src/css/props/outline/outline.css.ts create mode 100644 src/css/props/outline/outline.ts create mode 100644 src/css/props/outline/types.ts create mode 100644 src/css/props/overflow/overflow.css.ts create mode 100644 src/css/props/overflow/overflow.ts create mode 100644 src/css/props/overflow/types.ts create mode 100644 src/css/props/padding/padding.css.ts create mode 100644 src/css/props/padding/padding.ts create mode 100644 src/css/props/padding/types.ts create mode 100644 src/css/props/pointerEvents/pointerEvents.css.ts create mode 100644 src/css/props/pointerEvents/pointerEvents.ts create mode 100644 src/css/props/pointerEvents/types.ts create mode 100644 src/css/props/position/position.css.ts create mode 100644 src/css/props/position/position.ts create mode 100644 src/css/props/position/types.ts create mode 100644 src/css/props/radius/radius.css.ts create mode 100644 src/css/props/radius/radius.ts create mode 100644 src/css/props/radius/types.ts create mode 100644 src/css/props/shadow/shadow.css.ts create mode 100644 src/css/props/shadow/shadow.ts create mode 100644 src/css/props/shadow/types.ts create mode 100644 src/css/props/textAlign/textAlign.css.ts create mode 100644 src/css/props/textAlign/textAlign.ts create mode 100644 src/css/props/textAlign/types.ts create mode 100644 src/css/props/textOverflow/textOverflow.css.ts create mode 100644 src/css/props/textOverflow/textOverflow.ts create mode 100644 src/css/props/textOverflow/types.ts create mode 100644 src/css/props/width/types.ts create mode 100644 src/css/props/width/width.css.ts create mode 100644 src/css/props/width/width.ts create mode 100644 src/css/types.ts create mode 100644 src/css/util.ts create mode 100644 src/css/vars.css.ts delete mode 100644 src/theme/build/theme.test.ts delete mode 100644 src/theme/config/tokens/parseTokenKey.test.ts delete mode 100644 src/theme/config/tokens/parseTokenKey.ts delete mode 100644 src/theme/system/theme.ts create mode 100644 src/theme/types.ts rename src/theme/{system => }/v0/avatar.ts (100%) rename src/theme/{system => }/v0/color/_generic.ts (86%) rename src/theme/{system => }/v0/color/_system.ts (100%) rename src/theme/{system => }/v0/color/base.ts (100%) rename src/theme/{system => }/v0/color/button.ts (94%) rename src/theme/{system => }/v0/color/card.ts (88%) rename src/theme/{system => }/v0/color/color.ts (55%) rename src/theme/{system => }/v0/color/index.ts (100%) rename src/theme/{system => }/v0/color/input.ts (90%) rename src/theme/{system => }/v0/color/muted.ts (91%) rename src/theme/{system => }/v0/color/selectable.ts (93%) rename src/theme/{system => }/v0/color/solid.ts (91%) rename src/theme/{system => }/v0/color/spot.ts (81%) rename src/theme/{system => v0}/css.ts (81%) rename src/theme/{system => v0}/focusRing.ts (78%) rename src/theme/{system => v0}/font.ts (85%) rename src/theme/{system => v0}/index.ts (92%) rename src/theme/{system => }/v0/input.ts (100%) rename src/theme/{system => v0}/layer.ts (86%) rename src/theme/{system => v0}/shadow.ts (85%) rename src/theme/{system => v0}/styles.ts (77%) create mode 100644 src/theme/v0/theme.ts rename src/theme/{system => v2}/avatar.ts (77%) rename src/theme/{ => v2}/build/_deprecated/color/_selectable/createSelectableTones.ts (94%) rename src/theme/{ => v2}/build/_deprecated/color/_solid/createSolidTones.ts (95%) rename src/theme/{ => v2}/build/_deprecated/color/button/createButtonModes.ts (85%) rename src/theme/{ => v2}/build/_deprecated/color/button/createButtonTones.ts (85%) rename src/theme/{ => v2}/build/_deprecated/color/card/createCardStates.ts (90%) rename src/theme/{ => v2}/build/_deprecated/color/color.test.ts (97%) rename src/theme/{ => v2}/build/_deprecated/color/defaults.ts (99%) rename src/theme/{ => v2}/build/_deprecated/color/factory.ts (97%) rename src/theme/{ => v2}/build/_deprecated/color/index.ts (100%) rename src/theme/{ => v2}/build/_deprecated/color/input/createInputModes.ts (90%) rename src/theme/{ => v2}/build/_deprecated/color/muted/createMuted.ts (95%) rename src/theme/{ => v2}/build/_deprecated/color/spot/createSpot.ts (82%) rename src/theme/{ => v2}/build/buildColorTheme.test.ts (97%) rename src/theme/{ => v2}/build/buildColorTheme.ts (94%) rename src/theme/{ => v2}/build/buildTheme.test.ts (97%) rename src/theme/{ => v2}/build/buildTheme.ts (88%) rename src/theme/{ => v2}/build/colorToken/colorToken.ts (81%) rename src/theme/{ => v2}/build/colorToken/compileColorToken.ts (87%) rename src/theme/{ => v2}/build/colorToken/index.ts (100%) rename src/theme/{ => v2}/build/colorToken/types.ts (52%) rename src/theme/{ => v2}/build/index.ts (100%) rename src/theme/{ => v2}/build/lib/color-fns/blend/index.ts (100%) rename src/theme/{ => v2}/build/lib/color-fns/blend/mix.ts (90%) rename src/theme/{ => v2}/build/lib/color-fns/blend/multiply.ts (91%) rename src/theme/{ => v2}/build/lib/color-fns/blend/screen.ts (91%) rename src/theme/{ => v2}/build/lib/color-fns/color-fns.test.ts (97%) rename src/theme/{ => v2}/build/lib/color-fns/contrastRatio.ts (88%) rename src/theme/{ => v2}/build/lib/color-fns/convert.ts (98%) rename src/theme/{ => v2}/build/lib/color-fns/index.ts (100%) rename src/theme/{ => v2}/build/lib/color-fns/parse.ts (96%) rename src/theme/{ => v2}/build/lib/color-fns/rgba.ts (59%) rename src/theme/{ => v2}/build/lib/color-fns/types.ts (100%) rename src/theme/{ => v2}/build/lib/isRecord.ts (100%) rename src/theme/{ => v2}/build/lib/utils.ts (100%) rename src/theme/{ => v2}/build/merge.ts (91%) rename src/theme/{ => v2}/build/mixThemeColor.test.ts (91%) rename src/theme/{ => v2}/build/mixThemeColor.ts (95%) rename src/theme/{ => v2}/build/renderColorTheme.ts (95%) rename src/theme/{ => v2}/build/renderColorValue.ts (90%) rename src/theme/{ => v2}/build/resolveColorTokens.ts (97%) rename src/theme/{system => v2}/color/_constants.ts (100%) rename src/theme/{system => v2}/color/_helpers.ts (80%) rename src/theme/{system => v2}/color/_system.ts (97%) rename src/theme/{system => v2}/color/avatar.ts (63%) rename src/theme/{system => v2}/color/badge.ts (68%) rename src/theme/{system => v2}/color/button.ts (58%) rename src/theme/{system => v2}/color/color.ts (52%) rename src/theme/{system => v2}/color/index.ts (100%) rename src/theme/{system => v2}/color/input.ts (69%) rename src/theme/{system => v2}/color/kbd.ts (80%) rename src/theme/{system => v2}/color/selectable.ts (55%) rename src/theme/{system => v2}/color/shadow.ts (100%) rename src/theme/{system => v2}/color/state.ts (73%) rename src/theme/{system => v2}/color/syntax.ts (97%) rename src/theme/{ => v2}/config/helpers.ts (77%) rename src/theme/{ => v2}/config/index.ts (100%) rename src/theme/{ => v2}/config/system.ts (86%) rename src/theme/{ => v2}/config/tokens/color/index.ts (100%) rename src/theme/{ => v2}/config/tokens/color/types.ts (89%) rename src/theme/{ => v2}/config/tokens/index.ts (71%) rename src/theme/{ => v2}/config/tokens/parseTokenValue.test.ts (95%) rename src/theme/{ => v2}/config/tokens/parseTokenValue.ts (97%) rename src/theme/{ => v2}/config/tokens/types.ts (87%) rename src/theme/{ => v2}/config/types.ts (70%) rename src/theme/{ => v2}/defaults/colorPalette.ts (66%) rename src/theme/{ => v2}/defaults/colorTokens.ts (99%) rename src/theme/{ => v2}/defaults/config.ts (95%) rename src/theme/{ => v2}/defaults/fonts.ts (92%) rename src/theme/{system/v0 => v2}/index.ts (50%) rename src/theme/{system => v2}/input.ts (87%) create mode 100644 src/theme/v2/theme.ts create mode 100644 src/theme/v3/_constants.ts create mode 100644 src/theme/v3/_parseColorToken.ts create mode 100644 src/theme/v3/buildTheme_v3.ts create mode 100644 src/theme/v3/color/_constants.ts create mode 100644 src/theme/v3/color/avatar.ts create mode 100644 src/theme/v3/color/card.ts create mode 100644 src/theme/v3/color/color.ts create mode 100644 src/theme/v3/color/element.ts create mode 100644 src/theme/v3/color/index.ts create mode 100644 src/theme/v3/color/token.ts create mode 100644 src/theme/v3/color/tokens.ts create mode 100644 src/theme/v3/defaultFonts.ts create mode 100644 src/theme/v3/defaultTokens.ts create mode 100644 src/theme/v3/index.ts create mode 100644 src/theme/v3/merge.ts create mode 100644 src/theme/v3/palette/constants.ts create mode 100644 src/theme/v3/palette/index.ts create mode 100644 src/theme/v3/palette/types.ts create mode 100644 src/theme/v3/resolveTokens.ts create mode 100644 src/theme/v3/tokens.ts create mode 100644 src/theme/v3/types.ts create mode 100644 src/theme/versioning/themeColor_v3_v2.ts create mode 100644 src/theme/versioning/v3_v2.ts delete mode 100644 stories/components/CodeSkeleton.stories.tsx delete mode 100644 stories/components/HeadingSkeleton.stories.tsx delete mode 100644 stories/components/LabelSkeleton.stories.tsx delete mode 100644 stories/components/Skeleton.stories.tsx delete mode 100644 stories/components/TextSkeleton.stories.tsx delete mode 100644 stories/constants.ts delete mode 100644 stories/controls.ts delete mode 100644 stories/primitives/Flex.stories.tsx delete mode 100644 stories/primitives/Grid.stories.tsx delete mode 100644 stories/primitives/Inline.stories.tsx delete mode 100644 stories/primitives/Stack.stories.tsx delete mode 100644 stories/tokens/ColorPalette.tsx create mode 100644 storybook/.storybook/decorators/ui.tsx create mode 100644 storybook/.storybook/main.ts create mode 100644 storybook/.storybook/manager-head.html create mode 100644 storybook/.storybook/preview-head.html create mode 100644 storybook/.storybook/preview.ts create mode 100644 storybook/package.json rename {stories => storybook/stories}/README.mdx (100%) rename {stories => storybook/stories}/components/Autocomplete.stories.tsx (70%) rename {stories => storybook/stories}/components/Breadcrumbs.stories.tsx (73%) create mode 100644 storybook/stories/components/CodeSkeleton.stories.tsx rename {stories => storybook/stories}/components/Dialog.stories.tsx (87%) create mode 100644 storybook/stories/components/HeadingSkeleton.stories.tsx rename {stories => storybook/stories}/components/Hotkeys.stories.tsx (81%) create mode 100644 storybook/stories/components/LabelSkeleton.stories.tsx rename {stories => storybook/stories}/components/Menu.stories.tsx (89%) rename {stories => storybook/stories}/components/MenuButton.stories.tsx (92%) rename {stories => storybook/stories}/components/MenuItem.stories.tsx (54%) create mode 100644 storybook/stories/components/Skeleton.stories.tsx rename {stories => storybook/stories}/components/Tab.stories.tsx (81%) rename {stories => storybook/stories}/components/TabList.stories.tsx (69%) create mode 100644 storybook/stories/components/TextSkeleton.stories.tsx rename {stories => storybook/stories}/components/Toast.stories.tsx (96%) rename {stories => storybook/stories}/components/Tree.stories.tsx (88%) create mode 100644 storybook/stories/constants.ts create mode 100644 storybook/stories/controls.ts rename {stories => storybook/stories}/helpers/columnBuilder.tsx (57%) rename {stories => storybook/stories}/helpers/matrixBuilder.tsx (95%) rename {stories => storybook/stories}/helpers/rowBuilder.tsx (58%) rename {stories => storybook/stories}/primitives/Avatar.stories.tsx (86%) rename {stories => storybook/stories}/primitives/AvatarCounter.stories.tsx (68%) rename {stories => storybook/stories}/primitives/AvatarStack.stories.tsx (74%) rename {stories => storybook/stories}/primitives/Badge.stories.tsx (71%) rename {stories => storybook/stories}/primitives/Box.stories.tsx (52%) rename {stories => storybook/stories}/primitives/Button.stories.tsx (67%) rename {stories => storybook/stories}/primitives/Card.stories.tsx (79%) rename {stories => storybook/stories}/primitives/Checkbox.stories.tsx (95%) rename {stories => storybook/stories}/primitives/Code.stories.tsx (80%) rename {stories => storybook/stories}/primitives/Container.stories.tsx (82%) create mode 100644 storybook/stories/primitives/Flex.stories.tsx create mode 100644 storybook/stories/primitives/Grid.stories.tsx rename {stories => storybook/stories}/primitives/Heading.stories.tsx (56%) create mode 100644 storybook/stories/primitives/Inline.stories.tsx rename {stories => storybook/stories}/primitives/KBD.stories.tsx (71%) rename {stories => storybook/stories}/primitives/Label.stories.tsx (82%) rename {stories => storybook/stories}/primitives/Popover.stories.tsx (90%) rename {stories => storybook/stories}/primitives/Radio.stories.tsx (93%) rename {stories => storybook/stories}/primitives/Select.stories.tsx (75%) rename {stories => storybook/stories}/primitives/Spinner.stories.tsx (65%) create mode 100644 storybook/stories/primitives/Stack.stories.tsx rename {stories => storybook/stories}/primitives/Switch.stories.tsx (92%) rename {stories => storybook/stories}/primitives/Text.stories.tsx (85%) rename {stories => storybook/stories}/primitives/TextArea.stories.tsx (91%) rename {stories => storybook/stories}/primitives/TextInput.stories.tsx (89%) rename {stories => storybook/stories}/primitives/Tooltip.stories.tsx (84%) rename {stories => storybook/stories}/primitives/components/FieldWrapper.tsx (69%) rename {stories => storybook/stories}/tests/FocusRings.mdx (100%) rename {stories => storybook/stories}/tests/FocusRings.tsx (67%) rename {stories => storybook/stories}/tests/Tones.mdx (100%) rename {stories => storybook/stories}/tests/Tones.tsx (91%) create mode 100644 storybook/stories/tokens/ColorPalette.tsx rename {stories => storybook/stories}/tokens/Colors.mdx (74%) create mode 100644 storybook/tsconfig.json create mode 100644 storybook/vite.config.ts create mode 100644 test/setup.ts delete mode 100644 test/setupFilesAfterEnv.ts create mode 100644 vitest.config.ts create mode 100644 workshop/constants.ts create mode 100644 workshop/empty.css delete mode 100644 workshop/fontsPlugin.tsx create mode 100644 workshop/index.ts diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 09321ab2f..a6356e08b 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -23,7 +23,7 @@ jobs: cache: pnpm node-version: lts/* - run: pnpm install - - run: pnpm ts:check + - run: pnpm typecheck - run: pnpm build lint: @@ -78,7 +78,7 @@ jobs: - uses: cypress-io/github-action@v6 with: build: pnpm workshop:build - start: pnpm workshop:start + start: pnpm workshop:preview wait-on: http://localhost:1337 - uses: actions/upload-artifact@v4 if: failure() diff --git a/.gitignore b/.gitignore index f0f23da9b..f3c4db550 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ +*.log *.tgz .DS_Store diff --git a/.storybook/decorators/withSanityTheme.decorator.tsx b/.storybook/decorators/withSanityTheme.decorator.tsx deleted file mode 100644 index fe4de744c..000000000 --- a/.storybook/decorators/withSanityTheme.decorator.tsx +++ /dev/null @@ -1,42 +0,0 @@ -/* eslint-disable react-refresh/only-export-components */ - -import {Card, studioTheme, ThemeProvider} from '@sanity/ui' -import {DecoratorHelpers} from '@storybook/addon-themes' -import {StoryFn} from '@storybook/react' -import {createGlobalStyle} from 'styled-components' - -const {initializeThemeState, pluckThemeFromContext, useThemeParameters} = DecoratorHelpers - -export const GlobalStyle = createGlobalStyle` - body, - .docs-story { - background-color: ${({theme}) => theme.sanity.color.base.bg}; - } -` - -/** - * Story decorator which wraps all stories in a Sanity and passes the current theme - * value defined in Story. - * - * Stories are also wrapped in a for layout. - */ - -export const withSanityTheme = ({themes, defaultTheme}) => { - initializeThemeState(Object.keys(themes), defaultTheme) - - return (Story: StoryFn, context) => { - const selectedTheme = pluckThemeFromContext(context) - const {themeOverride} = useThemeParameters() - - const selected = themeOverride || selectedTheme || defaultTheme - - return ( - - - - - - - ) - } -} diff --git a/.storybook/main.ts b/.storybook/main.ts deleted file mode 100644 index 928eeaa60..000000000 --- a/.storybook/main.ts +++ /dev/null @@ -1,35 +0,0 @@ -import type {StorybookConfig} from '@storybook/react-vite' -import viteReact from '@vitejs/plugin-react' -import {mergeConfig} from 'vite' -import tsconfigPaths from 'vite-tsconfig-paths' - -const config: StorybookConfig = { - stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - addons: [ - '@storybook/addon-a11y', - '@storybook/addon-links', - '@storybook/addon-essentials', - '@storybook/addon-interactions', - '@storybook/addon-storysource', - '@storybook/addon-themes', - '@storybook/addon-mdx-gfm', - ], - framework: { - name: '@storybook/react-vite', - options: {}, - }, - docs: { - autodocs: 'tag', - }, - viteFinal(config) { - return mergeConfig(config, { - plugins: [ - viteReact({ - babel: {plugins: [['babel-plugin-react-compiler', {target: '19'}]]}, - }), - tsconfigPaths(), - ], - }) - }, -} -export default config diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html deleted file mode 100644 index 1cc63fd04..000000000 --- a/.storybook/manager-head.html +++ /dev/null @@ -1,81 +0,0 @@ - - - - - - - - diff --git a/.storybook/manager.ts b/.storybook/manager.ts deleted file mode 100644 index 4c7d8fcfc..000000000 --- a/.storybook/manager.ts +++ /dev/null @@ -1,11 +0,0 @@ -import {addons} from '@storybook/manager-api' -import {themes} from '@storybook/theming' - -addons.setConfig({ - theme: { - ...themes.dark, - brandTitle: 'Sanity UI', - fontBase: - 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif', - }, -}) diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html deleted file mode 100644 index 38a962c09..000000000 --- a/.storybook/preview-head.html +++ /dev/null @@ -1,73 +0,0 @@ - diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx deleted file mode 100644 index 3171e269a..000000000 --- a/.storybook/preview.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import type {Preview} from '@storybook/react' -import {themes} from '@storybook/theming' - -import {withSanityTheme} from './decorators/withSanityTheme.decorator' - -const preview: Preview = { - decorators: [ - withSanityTheme({ - themes: {light: 'light', dark: 'dark'}, - defaultTheme: 'dark', - }), - ], - parameters: { - actions: {argTypesRegex: '^on[A-Z].*'}, - backgrounds: {disable: true}, - controls: { - matchers: { - color: /(background|color)$/i, - date: /Date$/, - }, - }, - docs: { - theme: { - ...themes.dark, - fontBase: 'Inter, sans-serif', - }, - }, - layout: 'fullscreen', - options: { - storySort: { - order: ['primitives', 'components', '*'], - }, - }, - }, -} - -export default preview diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..25fa6215f --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "typescript.tsdk": "node_modules/typescript/lib" +} diff --git a/README.md b/README.md index 3c0ff928f..cc4b4bc11 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ The Sanity UI components. npm install @sanity/ui # Install peer dependencies -npm install react react-dom styled-components +npm install react react-dom react-is styled-components ``` [![npm version](https://img.shields.io/npm/v/@sanity/ui.svg?style=flat-square)](https://www.npmjs.com/package/@sanity/ui) @@ -14,17 +14,15 @@ npm install react react-dom styled-components ## Usage ```jsx -import {Button, ThemeProvider} from '@sanity/ui' -import {buildTheme} from '@sanity/ui/theme' -import {createRoot} from 'react-dom/client' +import '@sanity/ui/css/index.css' -const root = createRoot(document.getElementById('root')) -const theme = buildTheme() +import {Button, Root} from '@sanity/ui' +import {createRoot} from 'react-dom/client' -root.render( - +createRoot(document).render( + - ))} - - - {tones.map(([title, tone]) => ( - - ))} - + + {THEME_COLOR_BUTTON_MODES.map((mode) => ( + + {THEME_COLOR_STATE_TONES.map((tone) => ( + + ))} + + ))} ) diff --git a/src/core/primitives/button/__workshop__/customIcons.tsx b/src/core/primitives/button/__workshop__/customIcons.tsx index 29105c8d4..de44c6b72 100644 --- a/src/core/primitives/button/__workshop__/customIcons.tsx +++ b/src/core/primitives/button/__workshop__/customIcons.tsx @@ -4,9 +4,9 @@ import {Button, Flex, Inline} from '@sanity/ui' export default function CustomIconsStory() { return ( - - ))} - - {THEME_COLOR_STATE_TONES.map((tone) => ( + + {ELEMENT_TONES.map((tone) => (