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

package/exports/_visual-editing.ts

@@ -2,30 +2,29 @@
  * These are internal exports for usage in `@sanity/visual-editing` and `@sanity/insert-menu`,
  * which are used in environments where the regular `@sanity/ui` export is far too heavy due to imports from refractor and more.
  */
-export {studioTheme} from '../src/ui/_compat'
-export {ThemeProvider, type ThemeProviderProps} from '../src/ui/_compat/theme/themeProvider'
-export {useTheme_v2} from '../src/ui/_compat/theme/useTheme'
-export {Hotkeys, type HotkeysProps} from '../src/ui/components/hotkeys/hotkeys'
-export {Menu, type MenuProps} from '../src/ui/components/menu/menu'
-export {MenuDivider} from '../src/ui/components/menu/menuDivider'
-export {MenuGroup, type MenuGroupProps} from '../src/ui/components/menu/menuGroup'
-export {MenuItem, type MenuItemProps} from '../src/ui/components/menu/menuItem'
-export {Tab, type TabProps} from '../src/ui/components/tab/tab'
-export {TabList, type TabListProps} from '../src/ui/components/tab/tabList'
-export {isHTMLAnchorElement, isHTMLElement} from '../src/ui/helpers/element'
-export {usePrefersDark} from '../src/ui/hooks/usePrefersDark'
-export {Box, type BoxProps} from '../src/ui/primitives/box/box'
-export {Button, type ButtonProps} from '../src/ui/primitives/button/button'
-export {Card, type CardProps} from '../src/ui/primitives/card/card'
-export {Flex, type FlexProps} from '../src/ui/primitives/flex/flex'
-export {Grid, type GridProps} from '../src/ui/primitives/grid/grid'
-export {Popover, type PopoverProps} from '../src/ui/primitives/popover/popover'
-export {Spinner, type SpinnerProps} from '../src/ui/primitives/spinner/spinner'
-export {Stack, type StackProps} from '../src/ui/primitives/stack/stack'
-export {Text, type TextProps} from '../src/ui/primitives/text/text'
-export {TextInput, type TextInputProps} from '../src/ui/primitives/textInput/textInput'
-export {Tooltip, type TooltipProps} from '../src/ui/primitives/tooltip/tooltip'
-export type {PopoverMargins} from '../src/ui/types/popover'
-export {LayerProvider} from '../src/ui/utils/layer/layerProvider'
-export {Portal, type PortalProps} from '../src/ui/utils/portal/portal'
-export {PortalProvider, type PortalProviderProps} from '../src/ui/utils/portal/portalProvider'
+export {ThemeProvider, type ThemeProviderProps} from '../src/core/_compat/theme/themeProvider'
+export {useTheme_v2} from '../src/core/_compat/theme/useTheme'
+export {Hotkeys, type HotkeysProps} from '../src/core/components/hotkeys/hotkeys'
+export {Menu, type MenuProps} from '../src/core/components/menu/menu'
+export {MenuDivider} from '../src/core/components/menu/menuDivider'
+export {MenuGroup, type MenuGroupProps} from '../src/core/components/menu/menuGroup'
+export {MenuItem, type MenuItemProps} from '../src/core/components/menu/menuItem'
+export {Tab, type TabProps} from '../src/core/components/tab/tab'
+export {TabList, type TabListProps} from '../src/core/components/tab/tabList'
+export {isHTMLAnchorElement, isHTMLElement} from '../src/core/helpers/element'
+export {usePrefersDark} from '../src/core/hooks/usePrefersDark'
+export {Box, type BoxProps} from '../src/core/primitives/box/box'
+export {Button, type ButtonProps} from '../src/core/primitives/button/button'
+export {Card, type CardProps} from '../src/core/primitives/card/card'
+export {Flex, type FlexProps} from '../src/core/primitives/flex/flex'
+export {Grid, type GridProps} from '../src/core/primitives/grid/grid'
+export {LayerProvider} from '../src/core/primitives/layer/layerProvider'
+export {Popover, type PopoverProps} from '../src/core/primitives/popover/popover'
+export type {PopoverMargins} from '../src/core/primitives/popover/types'
+export {Spinner, type SpinnerProps} from '../src/core/primitives/spinner/spinner'
+export {Stack, type StackProps} from '../src/core/primitives/stack/stack'
+export {Text, type TextProps} from '../src/core/primitives/text/text'
+export {TextInput, type TextInputProps} from '../src/core/primitives/textInput/textInput'
+export {Tooltip, type TooltipProps} from '../src/core/primitives/tooltip/tooltip'
+export {Portal, type PortalProps} from '../src/core/utils/portal/portal'
+export {PortalProvider, type PortalProviderProps} from '../src/core/utils/portal/portalProvider'

package/exports/index.ts

@@ -1 +1 @@
-export * from '../src/ui'
+export * from '../src/core'

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@sanity/ui",
-  "version": "3.0.0-static.3",
+  "version": "3.0.0-static.30",
   "keywords": [
-    "sanity",
+    "react",
     "ui",
+    "kit",
+    "library",
     "primitives",
-    "react",
     "components",
-    "design-system"
+    "utils"
   ],
   "homepage": "https://www.sanity.io/",
   "bugs": {
@@ -20,39 +21,37 @@
   "license": "MIT",
   "author": "Sanity.io <hello@sanity.io>",
   "sideEffects": false,
-  "type": "commonjs",
+  "type": "module",
   "exports": {
     ".": {
       "source": "./exports/index.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
       "default": "./dist/index.js"
     },
     "./_visual-editing": {
       "source": "./exports/_visual-editing.ts",
-      "import": "./dist/_visual-editing.mjs",
-      "require": "./dist/_visual-editing.js",
+      "import": "./dist/_visual-editing.js",
+      "require": "./dist/_visual-editing.cjs",
       "default": "./dist/_visual-editing.js"
     },
     "./css": {
       "source": "./exports/css.ts",
-      "import": "./dist/css.mjs",
-      "require": "./dist/css.js",
-      "default": "./dist/css.js"
+      "import": "./dist/css/index.js",
+      "require": "./dist/css/index.cjs",
+      "default": "./dist/css/index.js"
     },
+    "./css/index.css": "./dist/css/index.css",
     "./package.json": "./package.json",
     "./theme": {
       "source": "./exports/theme.ts",
-      "import": "./dist/theme.mjs",
-      "require": "./dist/theme.js",
+      "import": "./dist/theme.js",
+      "require": "./dist/theme.cjs",
       "default": "./dist/theme.js"
-    },
-    "./sanity-palette.css": "./dist/sanity-palette.css",
-    "./sanity-theme.css": "./dist/sanity-theme.css",
-    "./system.css": "./dist/system.css"
+    }
   },
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "typesVersions": {
     "*": {
@@ -67,11 +66,7 @@
       ]
     }
   },
-  "bin": {
-    "ui": "./bin/ui.js"
-  },
   "files": [
-    "css.js",
     "dist",
     "exports",
     "src"
@@ -86,7 +81,7 @@
       "prettier --write --cache --ignore-unknown"
     ]
   },
-  "prettier": "@sanity/prettier-config",
+  "browserslist": "extends @sanity/browserslist-config",
   "release": {
     "branches": [
       "+([0-9])?(.{+([0-9]),x}).x",
@@ -108,9 +103,12 @@
     "@juggle/resize-observer": "^3.4.0",
     "@sanity/color": "^3.0.6",
     "@sanity/icons": "^3.7.0",
+    "@vanilla-extract/css": "^1.17.2",
+    "@vanilla-extract/dynamic": "^2.1.3",
     "csstype": "^3.1.3",
     "framer-motion": "^12.9.7",
-    "react-compiler-runtime": "19.1.0-rc.1",
+    "gzip-size": "^7.0.0",
+    "react-compiler-runtime": "19.1.0-rc.2",
     "react-refractor": "^2.2.0",
     "use-effect-event": "^1.0.2"
   },
@@ -119,47 +117,36 @@
     "@babel/preset-env": "^7.27.1",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
-    "@commitlint/cli": "^19.8.0",
-    "@commitlint/config-conventional": "^19.8.0",
+    "@commitlint/cli": "19.5.0",
+    "@commitlint/config-conventional": "19.5.0",
     "@eslint/js": "^9.26.0",
-    "@rollup/plugin-replace": "^6.0.2",
+    "@sanity/browserslist-config": "^1.0.5",
     "@sanity/pkg-utils": "^7.2.2",
     "@sanity/prettier-config": "^1.0.3",
-    "@sanity/ui-workshop": "^2.1.2",
-    "@storybook/addon-a11y": "^8.6.12",
-    "@storybook/addon-docs": "^8.6.12",
-    "@storybook/addon-essentials": "^8.6.12",
-    "@storybook/addon-interactions": "^8.6.12",
-    "@storybook/addon-links": "^8.6.12",
-    "@storybook/addon-mdx-gfm": "^8.6.12",
-    "@storybook/addon-storysource": "^8.6.12",
-    "@storybook/addon-themes": "^8.6.12",
-    "@storybook/blocks": "^8.6.12",
-    "@storybook/manager-api": "^8.6.12",
-    "@storybook/react": "^8.6.12",
-    "@storybook/react-vite": "^8.6.12",
-    "@storybook/test": "^8.6.12",
-    "@storybook/theming": "^8.6.12",
+    "@sanity/semantic-release-preset": "^5.0.0",
+    "@sanity/ui-workshop": "^3.0.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/jest": "^29.5.14",
-    "@types/jest-axe": "^3.5.9",
-    "@types/node": "^20.12.7",
+    "@types/node": "^22.15.29",
     "@types/react": "^19.1.3",
     "@types/react-dom": "^19.1.3",
     "@types/react-is": "^19.0.0",
     "@types/refractor": "^3.4.1",
+    "@vanilla-extract/rollup-plugin": "^1.3.15",
+    "@vanilla-extract/vite-plugin": "^5.0.3",
     "@vitejs/plugin-react": "^4.4.1",
-    "babel-plugin-react-compiler": "19.1.0-rc.1",
+    "@vitest/browser": "^3.1.4",
+    "autoprefixer": "^10.4.21",
+    "babel-plugin-react-compiler": "19.1.0-rc.2",
     "cac": "^6.7.14",
     "commitizen": "^4.3.1",
+    "cssnano": "^7.0.7",
     "cypress": "^13.17.0",
     "cypress-real-events": "^1.14.0",
     "cz-conventional-changelog": "^3.3.0",
     "dotenv-flow": "^4.1.0",
-    "esbuild-register": "^3.6.0",
     "eslint": "^9.26.0",
     "eslint-config-prettier": "^10.1.2",
     "eslint-formatter-compact": "^8.40.0",
@@ -167,41 +154,41 @@
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "0.0.0-experimental-7a2c7045-20250506",
+    "eslint-plugin-react-hooks": "0.0.0-experimental-4448b187-20250515",
     "eslint-plugin-react-refresh": "^0.4.20",
     "eslint-plugin-simple-import-sort": "^12.1.1",
-    "eslint-plugin-storybook": "^0.12.0",
+    "eslint-plugin-storybook": "^9.0.5",
     "globals": "^16.0.0",
-    "http-server": "^14.1.1",
     "husky": "^8.0.3",
-    "jest": "^29.7.0",
-    "jest-axe": "^10.0.0",
-    "jest-environment-jsdom": "^29.7.0",
+    "lightningcss": "^1.30.1",
     "lint-staged": "^14.0.1",
-    "magic-string": "^0.30.17",
-    "module-alias": "^2.2.3",
-    "npm-run-all2": "^5.0.2",
+    "mkdirp": "^3.0.1",
+    "npm-run-all2": "^8.0.4",
+    "postcss": "^8.5.3",
+    "postcss-preset-env": "^10.2.0",
     "prettier": "^3.5.3",
+    "prettier-plugin-packagejson": "^2.5.15",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-is": "^19.1.0",
     "refractor": "^4.9.0",
-    "rimraf": "^5.0.5",
-    "semantic-release": "^24.2.3",
+    "rimraf": "^5.0.10",
+    "semantic-release": "23.1.1",
     "start-server-and-test": "^2.0.11",
-    "storybook": "^8.6.12",
     "styled-components": "^6.1.17",
     "tsconfig-paths": "^4.2.0",
     "typescript": "5.8.3",
     "typescript-eslint": "^8.32.0",
-    "vite": "^5.4.19",
-    "vite-tsconfig-paths": "^5.1.4"
+    "vite": "^6.3.5",
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^3.2.2",
+    "vitest-axe": "1.0.0-pre.5"
   },
   "peerDependencies": {
-    "react": "^18 || >=19.0.0-0",
-    "react-dom": "^18 || >=19.0.0-0",
-    "react-is": "^18 || >=19.0.0-0",
-    "styled-components": "^5.2 || ^6"
+    "react": "^19",
+    "react-dom": "^19",
+    "react-is": "^19",
+    "styled-components": "^6"
   },
   "engines": {
     "node": ">=14.0.0"
@@ -213,28 +200,29 @@
     "bundle": false
   },
   "scripts": {
-    "build": "run-s clean ui:build pkg:build pkg:check figma:pkg:build",
-    "clean": "rimraf .workshop css.js dist theme.js",
+    "build": "run-s clean pkg:build pkg:check",
+    "clean": "rimraf dist",
     "commit": "cz",
     "cypress:dev": "run-p dev cypress:open",
     "cypress:open": "cypress open",
     "cypress:run": "cypress run",
-    "dev": "run-p workshop:dev",
-    "figma:pkg:build": "cd figma && pnpm build",
+    "dev": "run-p workshop:clean workshop:dev",
+    "figma:build": "pnpm run --filter 'figma-plugin-sanity-ui' build",
     "format": "prettier --write --cache --ignore-unknown .",
     "lint": "eslint .",
-    "pkg:build": "pkg build --strict",
+    "pkg:build": "mkdirp dist/css && touch dist/css/index.css && NODE_ENV=production pkg build --strict",
     "pkg:check": "pkg --strict",
+    "pkg:watch": "mkdirp dist/css && touch dist/css/index.css && NODE_ENV=production pkg watch --strict",
     "release": "semantic-release",
-    "storybook:build": "storybook build",
-    "storybook:dev": "storybook dev -p 6006",
-    "test": "jest",
-    "test:browser": "start-server-and-test 'run-s workshop:build workshop:start' http://localhost:1337 'run-s cypress:run'",
-    "ts:check": "tsc",
-    "ui:build": "node -r esbuild-register scripts/build",
+    "storybook:build": "pnpm run --filter 'sanity-ui-storybook' build",
+    "storybook:dev": "pnpm run --filter 'sanity-ui-storybook' dev",
+    "test": "vitest run",
+    "test:browser": "start-server-and-test 'run-s workshop:build workshop:preview' http://localhost:1337 'run-s cypress:run'",
+    "typecheck": "tsc --build",
     "watch": "pkg watch --strict",
     "workshop:build": "workshop build",
+    "workshop:clean": "rimraf .workshop",
     "workshop:dev": "workshop dev",
-    "workshop:start": "http-server -a localhost -c-0 -p 1337 -s -P http://localhost:1337/index.html? dist"
+    "workshop:preview": "workshop preview"
   }
 }

package/src/core/_compat/helpers.ts

@@ -0,0 +1,72 @@
+import {
+  createColorTheme as _createColorTheme,
+  hexToRgb as _hexToRgb,
+  hslToRgb as _hslToRgb,
+  multiply as _multiply,
+  parseColor as _parseColor,
+  rgba as _rgba,
+  rgbToHex as _rgbToHex,
+  rgbToHsl as _rgbToHsl,
+  screen as _screen,
+} from '@sanity/ui/theme'
+
+export {
+  /** @deprecated use `px` from `@sanity/ui/css` */
+  px,
+  /** @deprecated use `rem` from `@sanity/ui/css` */
+  rem,
+} from '@sanity/ui/css'
+
+/**
+ * @public
+ * @deprecated Use `createColorTheme` from `@sanity/ui/theme` instead.
+ */
+export const createColorTheme = _createColorTheme
+
+/**
+ * @public
+ * @deprecated Use `hexToRgb` from `@sanity/ui/theme` instead.
+ */
+export const hexToRgb = _hexToRgb
+
+/**
+ * @public
+ * @deprecated Use `hslToRgb` from `@sanity/ui/theme` instead.
+ */
+export const hslToRgb = _hslToRgb
+
+/**
+ * @public
+ * @deprecated Use `multiply` from `@sanity/ui/theme` instead.
+ */
+export const multiply = _multiply
+
+/**
+ * @public
+ * @deprecated Use `parseColor` from `@sanity/ui/theme` instead.
+ */
+export const parseColor = _parseColor
+
+/**
+ * @public
+ * @deprecated Use `rgbToHex` from `@sanity/ui/theme` instead.
+ */
+export const rgbToHex = _rgbToHex
+
+/**
+ * @public
+ * @deprecated Use `rgbToHsl` from `@sanity/ui/theme` instead.
+ */
+export const rgbToHsl = _rgbToHsl
+
+/**
+ * @public
+ * @deprecated Use `rgba` from `@sanity/ui/theme` instead.
+ */
+export const rgba = _rgba
+
+/**
+ * @public
+ * @deprecated Use `screen` from `@sanity/ui/theme` instead.
+ */
+export const screen = _screen

package/src/core/_compat/styles/_responsive.ts

@@ -0,0 +1,19 @@
+import type {CSSObject} from '@sanity/ui/theme'
+
+/**
+ * @internal
+ * @deprecated do not use
+ */
+export function _responsive<T>(
+  media: number[],
+  values: T[],
+  callback: (value: T, index: number, array: T[]) => CSSObject,
+): CSSObject[] {
+  const statements = values?.map(callback) || []
+
+  return statements.map((statement, mediaIndex) => {
+    if (mediaIndex === 0) return statement
+
+    return {[`@media screen and (min-width: ${media[mediaIndex - 1]}px)`]: statement}
+  })
+}

package/src/core/_compat/theme/theme.test.tsx

@@ -0,0 +1,72 @@
+import {buildTheme} from '@sanity/ui/theme'
+import {describe, expect, it, vi} from 'vitest'
+
+import {render} from '../../../../test'
+import {ThemeContext} from './themeContext'
+import type {ThemeContextValue} from './types'
+import {useRootTheme} from './useRootTheme'
+
+describe('theme', () => {
+  describe('useRootTheme', () => {
+    it('should get context value', async () => {
+      const log = vi.fn()
+
+      function Debug() {
+        const rootTheme = useRootTheme()
+
+        log(rootTheme)
+
+        return <>debug</>
+      }
+
+      function Root() {
+        const value: ThemeContextValue = {
+          version: 0.0,
+          scheme: 'light',
+          theme: buildTheme(),
+          tone: 'default',
+        }
+
+        return (
+          <ThemeContext.Provider value={value}>
+            <Debug />
+          </ThemeContext.Provider>
+        )
+      }
+
+      render(<Root />)
+
+      expect(log.mock.calls[0][0].version).toBe(0.0)
+      expect(log.mock.calls[0][0].scheme).toBe('light')
+      expect(log.mock.calls[0][0].tone).toBe('default')
+    })
+
+    it('should fail when no context value is provided', async () => {
+      const log = vi.fn()
+
+      function Debug() {
+        try {
+          useRootTheme()
+        } catch (err) {
+          log(err)
+        }
+
+        return null
+      }
+
+      function Root() {
+        const value = undefined
+
+        return (
+          <ThemeContext.Provider value={value as any}>
+            <Debug />
+          </ThemeContext.Provider>
+        )
+      }
+
+      render(<Root />)
+
+      expect(log.mock.calls[0][0].message).toEqual('useRootTheme(): missing context value')
+    })
+  })
+})

package/src/core/_compat/theme/themeColorProvider.tsx

@@ -0,0 +1,24 @@
+import type {ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
+import type {ReactElement, ReactNode} from 'react'
+
+import {ThemeProvider} from './themeProvider'
+import {useRootTheme} from './useRootTheme'
+
+/** @public */
+export interface ThemeColorProviderProps {
+  children?: ReactNode
+  scheme?: ThemeColorSchemeKey
+  tone?: ThemeColorCardToneKey
+}
+
+/** @public */
+export function ThemeColorProvider(props: ThemeColorProviderProps): ReactElement {
+  const {children, scheme, tone} = props
+  const root = useRootTheme()
+
+  return (
+    <ThemeProvider scheme={scheme || root.scheme} theme={root.theme} tone={tone}>
+      {children}
+    </ThemeProvider>
+  )
+}

package/src/core/_compat/theme/themeContext.ts

@@ -0,0 +1,10 @@
+import type {Context} from 'react'
+
+import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
+import type {ThemeContextValue} from './types'
+
+/**
+ * @internal
+ */
+export const ThemeContext: Context<ThemeContextValue | null> =
+  createGlobalScopedContext<ThemeContextValue | null>('@sanity/ui/context/theme', null)

package/src/core/_compat/theme/themeProvider.tsx

@@ -0,0 +1,68 @@
+import {
+  getScopedTheme,
+  type RootTheme,
+  type Theme,
+  type ThemeColorCardToneKey,
+  type ThemeColorSchemeKey,
+} from '@sanity/ui/theme'
+import {type ReactElement, type ReactNode, useContext, useMemo} from 'react'
+import {ThemeProvider as StyledThemeProvider} from 'styled-components'
+
+import {CardProvider} from '../../primitives/card/cardProvider'
+import {ThemeColorProvider} from './themeColorProvider'
+import {ThemeContext} from './themeContext'
+import type {ThemeContextValue} from './types'
+
+/** @public */
+export interface ThemeProviderProps {
+  children?: ReactNode
+  scheme?: ThemeColorSchemeKey
+  theme?: RootTheme
+  tone?: ThemeColorCardToneKey
+}
+
+/** @public */
+export function ThemeProvider(props: ThemeProviderProps): ReactElement {
+  const parentTheme = useContext(ThemeContext)
+  const {children} = props
+  const scheme = props.scheme ?? (parentTheme?.scheme || 'light')
+  const rootTheme = props.theme ?? (parentTheme?.theme || null)
+  const tone = props.tone ?? (parentTheme?.tone || 'default')
+
+  const themeContext: ThemeContextValue | null = useMemo(() => {
+    if (!rootTheme) return null
+
+    return {
+      version: 0.0,
+      theme: rootTheme,
+      scheme,
+      tone,
+    }
+  }, [rootTheme, scheme, tone])
+
+  const theme: Theme | null = useMemo(() => {
+    if (!rootTheme) return null
+
+    return getScopedTheme(rootTheme, scheme, tone)
+  }, [scheme, rootTheme, tone])
+
+  if (!theme) {
+    return <pre>ThemeProvider: no "theme" property provided</pre>
+  }
+
+  return (
+    <CardProvider
+      scheme={scheme}
+      tone={tone}
+      unstable_CompatProvider={
+        // Render a theme provider around the card if the scheme or tone differs from the root theme.
+        // This is needed for backwards compatibility with the legacy theme API.
+        ThemeColorProvider
+      }
+    >
+      <ThemeContext.Provider value={themeContext}>
+        <StyledThemeProvider theme={theme}>{children}</StyledThemeProvider>
+      </ThemeContext.Provider>
+    </CardProvider>
+  )
+}

package/src/core/_compat/theme/types.ts

@@ -0,0 +1,10 @@
+import type {RootTheme, ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
+
+/** @public */
+export interface ThemeContextValue {
+  /** @deprecated No longer used */
+  version: 0.0
+  scheme: ThemeColorSchemeKey
+  theme: RootTheme
+  tone: ThemeColorCardToneKey
+}

package/src/core/_compat/theme/useRootTheme.ts

@@ -0,0 +1,15 @@
+import {useContext} from 'react'
+
+import {ThemeContext} from './themeContext'
+import type {ThemeContextValue} from './types'
+
+/** @public */
+export function useRootTheme(): ThemeContextValue {
+  const value = useContext(ThemeContext)
+
+  if (!value) {
+    throw new Error('useRootTheme(): missing context value')
+  }
+
+  return value as unknown as ThemeContextValue
+}

package/src/core/_compat/theme/useTheme.ts

@@ -0,0 +1,12 @@
+import {getTheme_v2, type Theme, type Theme_v2} from '@sanity/ui/theme'
+import {useTheme as useStyledTheme} from 'styled-components'
+
+/** @public */
+export function useTheme(): Theme {
+  return useStyledTheme() as Theme
+}
+
+/** @public */
+export function useTheme_v2(): Theme_v2 {
+  return getTheme_v2(useStyledTheme() as Theme)
+}