@sanity/ui 2.0.0-alpha.34 → 2.0.0-alpha.36

package/src/core/theme/useRootTheme.ts

@@ -1,5 +1,4 @@
 import {useContext} from 'react'
-import {isRecord} from '../lib/isRecord'
 import {ThemeContext} from './themeContext'
 import {ThemeContextValue} from './types'
 
@@ -7,18 +6,11 @@ import {ThemeContextValue} from './types'
  * @public
  */
 export function useRootTheme(): ThemeContextValue {
-  const value: unknown = useContext(ThemeContext)
+  const value = useContext(ThemeContext)
 
   if (!value) {
     throw new Error('useRootTheme(): missing context value')
   }
 
-  // NOTE: This check is for future-compatiblity
-  // - If the value is not an object, it’s not compatible with the current version
-  // - If the value is an object, but doesn’t have `version: 0.0`, it’s not compatible with the current version
-  if (!isRecord(value) || value.version !== 0.0) {
-    throw new Error('useRootTheme(): the context value is not compatible')
-  }
-
   return value as unknown as ThemeContextValue
 }

package/src/core/theme/useTheme.ts

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

package/src/core/types/card.ts

@@ -1,6 +1,6 @@
-import {ThemeColorBaseToneKey} from '@sanity/ui/theme'
+import {ThemeColorCardToneKey} from '@sanity/ui/theme'
 
 /**
  * @public
  */
-export type CardTone = ThemeColorBaseToneKey | 'inherit'
+export type CardTone = ThemeColorCardToneKey | 'inherit'

package/src/core/utils/arrow/arrow.tsx

@@ -1,6 +1,6 @@
 import {ForwardedRef, HTMLProps, ReactElement, forwardRef} from 'react'
 import styled, {css} from 'styled-components'
-import {useTheme} from '../../theme'
+import {useTheme_v2} from '../../theme'
 import {Point, compileCommands, getRoundedCommands} from './cmds'
 
 const Root = styled.div<{$w: number}>(
@@ -70,8 +70,8 @@ export const Arrow = forwardRef(function Arrow(
   ref: ForwardedRef<HTMLDivElement>,
 ): ReactElement {
   const {width: w, height: h, radius = 0, ...restProps} = props
-  const theme = useTheme()
-  const strokeWidth = theme.sanity.card.shadow.outline
+  const {card} = useTheme_v2()
+  const strokeWidth = card.shadow.outline
 
   const center = w / 2
 

package/src/core/utils/elementQuery/elementQuery.tsx

@@ -1,6 +1,6 @@
 import {forwardRef, useCallback, useMemo, useState} from 'react'
 import {useElementSize, useForwardedRef} from '../../hooks'
-import {useTheme} from '../../theme'
+import {useTheme_v2} from '../../theme'
 import {findMaxBreakpoints, findMinBreakpoints} from './helpers'
 
 /**
@@ -20,8 +20,8 @@ export const ElementQuery = forwardRef(function ElementQuery(
   props: MediaQueryProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'media'>,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
-  const theme = useTheme()
-  const {children, media = theme.sanity.media, ...restProps} = props
+  const theme = useTheme_v2()
+  const {children, media = theme.media, ...restProps} = props
 
   const forwardedRef = useForwardedRef(ref)
   const [element, setElement] = useState<HTMLDivElement | null>(null)

package/src/core/utils/virtualList/virtualList.tsx

@@ -5,7 +5,7 @@ import {_isScrollable} from '../../helpers'
 import {useForwardedRef} from '../../hooks'
 import {_ResizeObserver} from '../../observers'
 import {StackProps} from '../../primitives'
-import {useTheme} from '../../theme'
+import {useTheme_v2} from '../../theme'
 
 /**
  * @beta
@@ -51,7 +51,7 @@ export const VirtualList = forwardRef(function VirtualList(
   ref: React.ForwardedRef<HTMLDivElement>,
 ): React.ReactElement {
   const {as = 'div', gap = 0, getItemKey, items = [], onChange, renderItem, ...restProps} = props
-  const {space} = useTheme().sanity
+  const {space} = useTheme_v2()
   const forwardedRef = useForwardedRef(ref)
   const wrapperRef = useRef<HTMLDivElement | null>(null)
   const [scrollTop, setScrollTop] = useState(0)

package/src/theme/build/_deprecated/color/muted/createMuted.ts

@@ -1,11 +1,11 @@
-import {ThemeColorBase, ThemeColorBaseToneKey, ThemeColorMuted} from '../../../../system'
+import {ThemeColorBase, ThemeColorCardToneKey, ThemeColorMuted} from '../../../../system'
 import {ThemeColorBuilderOpts} from '../factory'
 
 export function createMutedTones(
   opts: ThemeColorBuilderOpts,
   base: ThemeColorBase,
   dark: boolean,
-  name: ThemeColorBaseToneKey,
+  name: ThemeColorCardToneKey,
 ): ThemeColorMuted {
   return {
     default: {

package/src/theme/build/buildColorTheme.test.ts

@@ -1,5 +1,5 @@
 import {ThemeColorTokens} from '../config'
-import {buildColorScheme, buildColorTheme} from './buildColorTheme'
+import {buildColorTheme} from './buildColorTheme'
 
 test('buildColorTheme: base', () => {
   const {light, dark} = buildColorTheme({
@@ -35,30 +35,30 @@ test('buildColorTheme: base', () => {
   expect({
     light: {
       transparent: {
-        bg: light.transparent.base.bg,
-        fg: light.transparent.base.fg,
+        bg: light.transparent.bg,
+        fg: light.transparent.fg,
       },
       default: {
-        bg: light.default.base.bg,
-        fg: light.default.base.fg,
+        bg: light.default.bg,
+        fg: light.default.fg,
       },
       primary: {
-        bg: light.primary.base.bg,
-        fg: light.primary.base.fg,
+        bg: light.primary.bg,
+        fg: light.primary.fg,
       },
     },
     dark: {
       transparent: {
-        bg: dark.transparent.base.bg,
-        fg: dark.transparent.base.fg,
+        bg: dark.transparent.bg,
+        fg: dark.transparent.fg,
       },
       default: {
-        bg: dark.default.base.bg,
-        fg: dark.default.base.fg,
+        bg: dark.default.bg,
+        fg: dark.default.fg,
       },
       primary: {
-        bg: dark.primary.base.bg,
-        fg: dark.primary.base.fg,
+        bg: dark.primary.bg,
+        fg: dark.primary.fg,
       },
     },
   }).toEqual({
@@ -135,8 +135,7 @@ test('buildColorTheme: button', () => {
     },
   }
 
-  const light = buildColorScheme({scheme: 'light'}, {color: tokens})
-  const dark = buildColorScheme({scheme: 'dark'}, {color: tokens})
+  const {dark, light} = buildColorTheme({color: tokens})
 
   expect({
     light: {