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

package/src/core/theme/__workshop__/build/Root.tsx

@@ -1,9 +1,13 @@
 import {css, styled} from 'styled-components'
+import {getTheme_v2} from '../../../../theme'
 
-export const Root = styled.div(
-  ({theme}) => css`
+export const Root = styled.div((props) => {
+  const {button, card, input} = getTheme_v2(props.theme)
+
+  return css`
     background: #000;
     font-family:
+      Inter,
       system-ui,
       -apple-system,
       BlinkMacSystemFont,
@@ -34,13 +38,13 @@ export const Root = styled.div(
     }
 
     .button {
-      --border-width: ${theme.sanity.button.border.width}px;
+      --border-width: ${button.border.width}px;
 
       --bg: var(--button-enabled-bg);
-      --bg2: var(--button-enabled-bg2);
       --fg: var(--button-enabled-fg);
       --icon: var(--button-enabled-icon);
       --border: var(--button-enabled-border);
+      --muted-bg: var(--button-enabled-muted-bg);
       --muted-fg: var(--button-enabled-muted-fg);
       --accent-fg: var(--button-enabled-accent-fg);
       --link-fg: var(--button-enabled-link-fg);
@@ -63,10 +67,10 @@ export const Root = styled.div(
 
       &:hover {
         --bg: var(--button-hovered-bg);
-        --bg2: var(--button-hovered-bg2);
         --fg: var(--button-hovered-fg);
         --icon: var(--button-hovered-icon);
         --border: var(--button-hovered-border);
+        --muted-bg: var(--button-hovered-muted-bg);
         --muted-fg: var(--button-hovered-muted-fg);
         --accent-fg: var(--button-hovered-accent-fg);
         --link-fg: var(--button-hovered-link-fg);
@@ -83,10 +87,10 @@ export const Root = styled.div(
           0 0 0 3px var(--focus-ring);
 
         --bg: var(--button-hovered-bg);
-        --bg2: var(--button-hovered-bg2);
         --fg: var(--button-hovered-fg);
         --icon: var(--button-hovered-icon);
         --border: var(--button-hovered-border);
+        --muted-bg: var(--button-hovered-muted-bg);
         --muted-fg: var(--button-hovered-muted-fg);
         --accent-fg: var(--button-hovered-accent-fg);
         --link-fg: var(--button-hovered-link-fg);
@@ -98,10 +102,10 @@ export const Root = styled.div(
 
       &:active {
         --bg: var(--button-pressed-bg);
-        --bg2: var(--button-pressed-bg2);
         --fg: var(--button-pressed-fg);
         --icon: var(--button-pressed-icon);
         --border: var(--button-pressed-border);
+        --muted-bg: var(--button-pressed-muted-bg);
         --muted-fg: var(--button-pressed-muted-fg);
         --accent-fg: var(--button-pressed-accent-fg);
         --link-fg: var(--button-pressed-link-fg);
@@ -113,10 +117,10 @@ export const Root = styled.div(
 
       &.selected {
         --bg: var(--button-selected-bg);
-        --bg2: var(--button-selected-bg2);
         --fg: var(--button-selected-fg);
         --icon: var(--button-selected-icon);
         --border: var(--button-selected-border);
+        --muted-bg: var(--button-selected-muted-bg);
         --muted-fg: var(--button-selected-muted-fg);
         --accent-fg: var(--button-selected-accent-fg);
         --link-fg: var(--button-selected-link-fg);
@@ -128,10 +132,10 @@ export const Root = styled.div(
 
       &.disabled {
         --bg: var(--button-disabled-bg);
-        --bg2: var(--button-disabled-bg2);
         --fg: var(--button-disabled-fg);
         --icon: var(--button-disabled-icon);
         --border: var(--button-disabled-border);
+        --muted-bg: var(--button-disabled-muted-bg);
         --muted-fg: var(--button-disabled-muted-fg);
         --accent-fg: var(--button-disabled-accent-fg);
         --link-fg: var(--button-disabled-link-fg);
@@ -143,13 +147,13 @@ export const Root = styled.div(
     }
 
     .card {
-      --border-width: ${theme.sanity.card.border.width}px;
+      --border-width: ${card.border.width}px;
 
       --bg: var(--card-enabled-bg);
-      --bg2: var(--card-enabled-bg2);
       --fg: var(--card-enabled-fg);
       --icon: var(--card-enabled-icon);
       --border: var(--card-enabled-border);
+      --muted-bg: var(--card-enabled-muted-bg);
       --muted-fg: var(--card-enabled-muted-fg);
       --accent-fg: var(--card-enabled-accent-fg);
       --link-fg: var(--card-enabled-link-fg);
@@ -169,10 +173,10 @@ export const Root = styled.div(
 
       &:hover {
         --bg: var(--card-hovered-bg);
-        --bg2: var(--card-hovered-bg2);
         --fg: var(--card-hovered-fg);
         --icon: var(--card-hovered-icon);
         --border: var(--card-hovered-border);
+        --muted-bg: var(--card-hovered-muted-bg);
         --muted-fg: var(--card-hovered-muted-fg);
         --accent-fg: var(--card-hovered-accent-fg);
         --link-fg: var(--card-hovered-link-fg);
@@ -189,10 +193,10 @@ export const Root = styled.div(
           0 0 0 3px var(--focus-ring);
 
         /* --bg: var(--card-hovered-bg);
-        --bg2: var(--card-hovered-bg2);
         --fg: var(--card-hovered-fg);
         --icon: var(--card-hovered-icon);
         --border: var(--card-hovered-border);
+        --muted-bg: var(--card-hovered-muted-bg);
         --muted-fg: var(--card-hovered-muted-fg);
         --accent-fg: var(--card-hovered-accent-fg);
         --link-fg: var(--card-hovered-link-fg);
@@ -204,10 +208,10 @@ export const Root = styled.div(
 
       &:active {
         --bg: var(--card-pressed-bg);
-        --bg2: var(--card-pressed-bg2);
         --fg: var(--card-pressed-fg);
         --icon: var(--card-pressed-icon);
         --border: var(--card-pressed-border);
+        --muted-bg: var(--card-pressed-muted-bg);
         --muted-fg: var(--card-pressed-muted-fg);
         --accent-fg: var(--card-pressed-accent-fg);
         --link-fg: var(--card-pressed-link-fg);
@@ -219,10 +223,10 @@ export const Root = styled.div(
 
       &.selected {
         --bg: var(--card-selected-bg);
-        --bg2: var(--card-selected-bg2);
         --fg: var(--card-selected-fg);
         --icon: var(--card-selected-icon);
         --border: var(--card-selected-border);
+        --muted-bg: var(--card-selected-muted-bg);
         --muted-fg: var(--card-selected-muted-fg);
         --accent-fg: var(--card-selected-accent-fg);
         --link-fg: var(--card-selected-link-fg);
@@ -234,10 +238,10 @@ export const Root = styled.div(
 
       &.disabled {
         --bg: var(--card-disabled-bg);
-        --bg2: var(--card-disabled-bg2);
         --fg: var(--card-disabled-fg);
         --icon: var(--card-disabled-icon);
         --border: var(--card-disabled-border);
+        --muted-bg: var(--card-disabled-muted-bg);
         --muted-fg: var(--card-disabled-muted-fg);
         --accent-fg: var(--card-disabled-accent-fg);
         --link-fg: var(--card-disabled-link-fg);
@@ -252,7 +256,7 @@ export const Root = styled.div(
       background-color: var(--bg);
       color: var(--fg);
       padding: var(--space-3);
-      box-shadow: inset 0 0 0 ${theme.sanity.input.border.width}px var(--border);
+      box-shadow: inset 0 0 0 ${input.border.width}px var(--border);
       font-size: 16px;
       line-height: 11px;
       border-radius: var(--radius-2);
@@ -307,7 +311,7 @@ export const Root = styled.div(
     }
 
     .bg2 {
-      background-color: var(--bg2);
+      background-color: var(--muted-bg);
     }
 
     .border {
@@ -342,5 +346,5 @@ export const Root = styled.div(
     .skeleton-to {
       color: var(--skeleton-to);
     }
-  `,
-)
+  `
+})

package/src/core/theme/__workshop__/build/story.tsx

@@ -1,27 +1,27 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 import {
-  ThemeColor,
-  ThemeColorButtonStates,
-  ThemeColorCard,
-  ThemeColorInputStates,
+  ThemeColorButtonStates_v2,
+  ThemeColorCard_v2,
+  ThemeColorInputStates_v2,
+  ThemeColorState_v2,
 } from '@sanity/ui/theme'
 import {
-  THEME_COLOR_BASE_TONES,
+  THEME_COLOR_CARD_TONES,
   THEME_COLOR_BUTTON_MODES,
   THEME_COLOR_INPUT_MODES,
   THEME_COLOR_STATE_TONES,
-  ThemeColorBaseToneKey,
+  ThemeColorCardToneKey,
   ThemeColorInputModeKey,
 } from '@sanity/ui/theme'
-import {studioTheme} from '@sanity/ui/theme'
+import {defaultTheme} from '@sanity/ui/theme'
 import {ReactElement} from 'react'
 import {rem} from '../../../styles'
-import {useTheme} from '../../useTheme'
+import {useTheme_v2} from '../../useTheme'
 import {getCSSProps} from './helpers'
 import {Root} from './Root'
 
-const theme = studioTheme
+const theme = defaultTheme
 
 export default function BuildStory(): ReactElement {
   return (
@@ -45,22 +45,22 @@ export default function BuildStory(): ReactElement {
         }}
       >
         <div style={{flex: 1}}>
-          {THEME_COLOR_BASE_TONES.map((baseTone) => (
+          {THEME_COLOR_CARD_TONES.map((baseTone) => (
             <BaseTonePreview
               baseTone={baseTone}
               key={baseTone}
               scheme="light"
-              theme={theme.color.light[baseTone]}
+              theme={theme.v2!.color.light[baseTone]}
             />
           ))}
         </div>
         <div style={{flex: 1}}>
-          {THEME_COLOR_BASE_TONES.map((baseTone) => (
+          {THEME_COLOR_CARD_TONES.map((baseTone) => (
             <BaseTonePreview
               baseTone={baseTone}
               key={baseTone}
               scheme="dark"
-              theme={theme.color.dark[baseTone]}
+              theme={theme.v2!.color.dark[baseTone]}
             />
           ))}
         </div>
@@ -70,15 +70,15 @@ export default function BuildStory(): ReactElement {
 }
 
 function BaseTonePreview(props: {
-  baseTone: ThemeColorBaseToneKey
+  baseTone: ThemeColorCardToneKey
   scheme: 'light' | 'dark'
-  theme: ThemeColor
+  theme: ThemeColorCard_v2
 }) {
   const {baseTone, scheme, theme: color} = props
-  const theme = useTheme()
+  const theme = useTheme_v2()
 
   return (
-    <div className="base" style={getCSSProps(color.base as unknown as Record<string, unknown>)}>
+    <div className="base" style={getCSSProps(color as unknown as Record<string, unknown>)}>
       <div
         style={{
           maxWidth: 600,
@@ -93,7 +93,7 @@ function BaseTonePreview(props: {
           <div
             style={{
               boxShadow: [
-                `0 0 0 ${theme.sanity.card.shadow.outline}px var(--shadow-outline)`,
+                `0 0 0 ${theme.card.shadow.outline}px var(--shadow-outline)`,
                 `0 6px 8px -4px var(--shadow-umbra)`,
                 `0 12px 17px 2px var(--shadow-penumbra)`,
                 `0 5px 22px 4px var(--shadow-ambient)`,
@@ -106,7 +106,7 @@ function BaseTonePreview(props: {
           </div>
         </div>
         <div style={{padding: 'var(--space-3)'}}>
-          <CardPreview theme={color.card} />
+          <StatePreview theme={color.selectable.default.enabled} />
         </div>
         <div
           style={{
@@ -145,7 +145,7 @@ function BaseTonePreview(props: {
   )
 }
 
-function CardPreview(props: {theme: ThemeColorCard}) {
+function StatePreview(props: {theme: ThemeColorState_v2}) {
   const {theme: card} = props
 
   return (
@@ -268,11 +268,7 @@ function CardPreview(props: {theme: ThemeColorCard}) {
   )
 }
 
-function ButtonPreview(props: {
-  // tone: ColorStateTone
-  // mode: ColorButtonMode
-  theme: ThemeColorButtonStates
-}) {
+function ButtonPreview(props: {theme: ThemeColorButtonStates_v2}) {
   const {theme: button} = props
 
   return (
@@ -428,7 +424,7 @@ function Skeleton() {
   )
 }
 
-function InputPreview(props: {mode: ThemeColorInputModeKey; theme: ThemeColorInputStates}) {
+function InputPreview(props: {mode: ThemeColorInputModeKey; theme: ThemeColorInputStates_v2}) {
   const {mode, theme: input} = props
 
   return (

package/src/core/theme/__workshop__/canvas.tsx

@@ -10,16 +10,14 @@ import {
   useRootTheme,
 } from '@sanity/ui'
 import {
-  ThemeColor,
-  ThemeColorBase,
-  ThemeColorButton,
-  ThemeColorButtonState,
-  ThemeColorButtonStates,
-  ThemeColorButtonTones,
-  ThemeColorCard,
-  ThemeColorScheme,
-  ThemeColorSelectable,
-  ThemeColorSelectableStates,
+  ThemeColorButtonStates_v2,
+  ThemeColorButtonTones_v2,
+  ThemeColorButton_v2,
+  ThemeColorScheme_v2,
+  ThemeColorSelectableStates_v2,
+  ThemeColorSelectable_v2,
+  ThemeColorState_v2,
+  ThemeColorCard_v2,
   getContrastRatio,
   mix,
   parseColor,
@@ -34,7 +32,6 @@ interface Features {
 
   base: boolean
   button: boolean
-  card: boolean
   input: boolean
   selectable: boolean
   spot: boolean
@@ -46,7 +43,6 @@ const defaultFeatures: Features = {
 
   base: false,
   button: false,
-  card: false,
   input: false,
   selectable: false,
   spot: false,
@@ -66,12 +62,9 @@ export default function CanvasStory() {
     dark: useBoolean('Dark', defaultFeatures.dark, 'Props') ?? defaultFeatures.dark,
     base: useBoolean('Base', defaultFeatures.base, 'Props') ?? defaultFeatures.base,
     button: useBoolean('Button', defaultFeatures.button, 'Props') ?? defaultFeatures.button,
-    card: useBoolean('Card', defaultFeatures.card, 'Props') ?? defaultFeatures.card,
     input: useBoolean('Input', defaultFeatures.input, 'Props') ?? defaultFeatures.input,
-    // muted: useBoolean('Muted', defaultFeatures.muted, 'Props') ?? defaultFeatures.muted,
     selectable:
       useBoolean('Selectable', defaultFeatures.selectable, 'Props') ?? defaultFeatures.selectable,
-    // solid: useBoolean('Solid', defaultFeatures.solid, 'Props') ?? defaultFeatures.solid,
     spot: useBoolean('Avatar', defaultFeatures.spot, 'Props') ?? defaultFeatures.spot,
   }
 
@@ -80,13 +73,13 @@ export default function CanvasStory() {
       <Flex>
         {features.light && (
           <ThemeColorProvider scheme="light">
-            <ColorScheme scheme={theme.color.light} />
+            <ColorScheme scheme={theme.v2!.color.light} />
           </ThemeColorProvider>
         )}
 
         {features.dark && (
           <ThemeColorProvider scheme="dark">
-            <ColorScheme scheme={theme.color.dark} />
+            <ColorScheme scheme={theme.v2!.color.dark} />
           </ThemeColorProvider>
         )}
       </Flex>
@@ -94,7 +87,7 @@ export default function CanvasStory() {
   )
 }
 
-function ColorScheme(props: {scheme: ThemeColorScheme}) {
+function ColorScheme(props: {scheme: ThemeColorScheme_v2}) {
   const {scheme} = props
 
   return (
@@ -109,7 +102,7 @@ function ColorScheme(props: {scheme: ThemeColorScheme}) {
   )
 }
 
-function Color(props: {color: ThemeColor; tone: CardTone}) {
+function Color(props: {color: ThemeColorCard_v2; tone: CardTone}) {
   const {color, tone} = props
   const features = useFeatures()
 
@@ -119,12 +112,10 @@ function Color(props: {color: ThemeColor; tone: CardTone}) {
         space={[3, 4]}
         // style={{outline: '1px solid #ccc'}}
       >
-        {features.base && <ColorBase color={color.base} />}
+        {features.base && <ColorBase color={color} />}
 
         {features.button && <ColorButton color={color.button} />}
 
-        {features.card && <ColorCard color={color.card} />}
-
         {features.input && (
           <Box padding={2} style={{backgroundColor: color.input.default.enabled.bg}}>
             <Text style={{color: 'inherit'}}>Input</Text>
@@ -167,7 +158,7 @@ function Color(props: {color: ThemeColor; tone: CardTone}) {
   )
 }
 
-function ColorBase(props: {color: ThemeColorBase}) {
+function ColorBase(props: {color: ThemeColorCard_v2}) {
   const {color} = props
 
   return (
@@ -199,17 +190,7 @@ function ColorBase(props: {color: ThemeColorBase}) {
   )
 }
 
-function ColorCard(props: {color: ThemeColorCard}) {
-  const {color} = props
-
-  return (
-    <Box style={{backgroundColor: color.enabled.bg}}>
-      <ColorGenericStates color={color} />
-    </Box>
-  )
-}
-
-function ColorButton(props: {color: ThemeColorButton}) {
+function ColorButton(props: {color: ThemeColorButton_v2}) {
   const {color} = props
 
   return (
@@ -221,7 +202,7 @@ function ColorButton(props: {color: ThemeColorButton}) {
   )
 }
 
-function ColorButtonMode(props: {color: ThemeColorButtonTones}) {
+function ColorButtonMode(props: {color: ThemeColorButtonTones_v2}) {
   const {color} = props
 
   return (
@@ -262,7 +243,7 @@ function ColorButtonMode(props: {color: ThemeColorButtonTones}) {
   )
 }
 
-function ColorGenericStates(props: {color: ThemeColorButtonStates}) {
+function ColorGenericStates(props: {color: ThemeColorButtonStates_v2}) {
   const {color} = props
 
   return (
@@ -287,7 +268,7 @@ function _contrast(baseBg: string, bg: string, fg: string) {
   return getContrastRatio(rgbToHex(bgRgb), fg)
 }
 
-function ColorGenericState(props: {color: ThemeColorButtonState}) {
+function ColorGenericState(props: {color: ThemeColorState_v2}) {
   const {color} = props
 
   return (
@@ -307,7 +288,7 @@ function ColorGenericState(props: {color: ThemeColorButtonState}) {
             bg
           </Text>
         </Box>
-        <Box flex={1} padding={3} style={{backgroundColor: color.bg2}}>
+        <Box flex={1} padding={3} style={{backgroundColor: color.muted.bg}}>
           <Text align="center" size={1} style={{color: 'inherit'}}>
             bg2
           </Text>
@@ -340,7 +321,7 @@ function ColorGenericState(props: {color: ThemeColorButtonState}) {
   )
 }
 
-function ColorSelectable(props: {color: ThemeColorSelectable}) {
+function ColorSelectable(props: {color: ThemeColorSelectable_v2}) {
   const {color} = props
 
   return (
@@ -354,7 +335,7 @@ function ColorSelectable(props: {color: ThemeColorSelectable}) {
   )
 }
 
-function ColorSelectableTone(props: {color: ThemeColorSelectableStates}) {
+function ColorSelectableTone(props: {color: ThemeColorSelectableStates_v2}) {
   const {color} = props
 
   return (

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

@@ -1,7 +1,7 @@
 /** @jest-environment jsdom */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import {studioTheme} from '@sanity/ui/theme'
+import {defaultTheme} from '@sanity/ui/theme'
 import {render} from '../../../test'
 import {ThemeContext} from './themeContext'
 import {ThemeContextValue} from './types'
@@ -24,7 +24,7 @@ describe('theme', () => {
         const value: ThemeContextValue = {
           version: 0.0,
           scheme: 'light',
-          theme: studioTheme,
+          theme: defaultTheme,
           tone: 'default',
         }
 
@@ -69,38 +69,5 @@ describe('theme', () => {
 
       expect(log.mock.calls[0][0].message).toEqual('useRootTheme(): missing context value')
     })
-
-    it('should fail when context value is not compatible', async () => {
-      const log = jest.fn()
-
-      function Debug() {
-        try {
-          useRootTheme()
-        } catch (err) {
-          log(err)
-        }
-
-        return null
-      }
-
-      function Root() {
-        // NOTE: we’re testing this because the context value may be a function in the future
-        const value = () => {
-          return {version: 1}
-        }
-
-        return (
-          <ThemeContext.Provider value={value as any}>
-            <Debug />
-          </ThemeContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].message).toEqual(
-        'useRootTheme(): the context value is not compatible',
-      )
-    })
   })
 })

package/src/core/theme/themeColorProvider.tsx

@@ -1,4 +1,4 @@
-import {ThemeColorBaseToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
+import {ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {ThemeProvider} from './themeProvider'
 import {useRootTheme} from './useRootTheme'
 
@@ -8,7 +8,7 @@ import {useRootTheme} from './useRootTheme'
 export interface ThemeColorProviderProps {
   children?: React.ReactNode
   scheme?: ThemeColorSchemeKey
-  tone?: ThemeColorBaseToneKey
+  tone?: ThemeColorCardToneKey
 }
 
 /**

package/src/core/theme/themeContext.ts

@@ -1,4 +1,4 @@
-import {createContext} from 'react'
+import {Context, createContext} from 'react'
 import {globalScope} from '../lib/globalScope'
 import {ThemeContextValue} from './types'
 
@@ -9,4 +9,4 @@ globalScope[key] = globalScope[key] || createContext<ThemeContextValue | null>(n
 /**
  * @internal
  */
-export const ThemeContext: React.Context<ThemeContextValue | null> = globalScope[key]
+export const ThemeContext: Context<ThemeContextValue | null> = globalScope[key]

package/src/core/theme/themeProvider.tsx

@@ -1,7 +1,12 @@
-import {RootTheme, Theme, ThemeColorBaseToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
+import {
+  RootTheme,
+  ThemeColorCardToneKey,
+  ThemeColorSchemeKey,
+  Theme,
+  getScopedTheme,
+} from '@sanity/ui/theme'
 import {useContext, useMemo} from 'react'
 import {ThemeProvider as StyledThemeProvider} from 'styled-components'
-import {DEFAULT_THEME_LAYER} from './defaults'
 import {ThemeContext} from './themeContext'
 import {ThemeContextValue} from './types'
 
@@ -12,7 +17,7 @@ export interface ThemeProviderProps {
   children?: React.ReactNode
   scheme?: ThemeColorSchemeKey
   theme?: RootTheme
-  tone?: ThemeColorBaseToneKey
+  tone?: ThemeColorCardToneKey
 }
 
 /**
@@ -23,38 +28,33 @@ export function ThemeProvider(props: ThemeProviderProps): React.ReactElement {
   const {
     children,
     scheme = parentTheme?.scheme || 'light',
-    theme: themeProp = parentTheme?.theme || null,
+    theme: rootTheme = parentTheme?.theme || null,
     tone = parentTheme?.tone || 'default',
   } = props
 
+  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 (!themeProp) return null
-
-    const {color: rootColor, layer: rootLayer, ...restTheme} = themeProp
-    const colorScheme = rootColor[scheme] || rootColor.light
-    const color = colorScheme[tone] || colorScheme.default
-    const layer = rootLayer || DEFAULT_THEME_LAYER
-
-    return {sanity: {...restTheme, color, layer}}
-  }, [scheme, themeProp, tone])
-
-  const value: ThemeContextValue | null = useMemo(
-    () =>
-      themeProp && {
-        version: 0.0,
-        theme: themeProp,
-        scheme,
-        tone,
-      },
-    [themeProp, scheme, tone],
-  )
+    if (!rootTheme) return null
+
+    return getScopedTheme(rootTheme, scheme, tone)
+  }, [scheme, rootTheme, tone])
 
   if (!theme) {
     return <pre>ThemeProvider: no "theme" property provided</pre>
   }
 
   return (
-    <ThemeContext.Provider value={value}>
+    <ThemeContext.Provider value={themeContext}>
       <StyledThemeProvider theme={theme}>{children}</StyledThemeProvider>
     </ThemeContext.Provider>
   )

package/src/core/theme/types.ts

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