@sanity/ui 2.0.0-alpha.10 → 2.0.0-alpha.11

package/src/theme/themeProvider.tsx

@@ -1,20 +1,10 @@
 import {useContext, useMemo} from 'react'
-import {ThemeProvider as StyledThemeProvider, createGlobalStyle} from 'styled-components'
+import {ThemeProvider as StyledThemeProvider} from 'styled-components'
 import {DEFAULT_THEME_LAYER} from './defaults'
-import {ThemeColorName, ThemeColorSchemeKey} from './lib/theme'
-import {legacyColors} from './lib/theme/color/_legacy/legacyColor'
-import {createCssVars} from './lib/theme/color/cssVariables'
-import {cssObjectToCssString} from './lib/theme/color/cssVariables/utils'
+import {ThemeColorSchemeKey, ThemeColorName} from './lib/theme'
 import {ThemeContext} from './themeContext'
-import {ToneProvider} from './toneContext/toneProvider'
 import {RootTheme, Theme, ThemeContextValue} from './types'
 
-const GlobalVariables = createGlobalStyle<{$vars?: string}>`
-  :root {
-    ${({$vars}) => $vars}
-  }
-`
-
 /**
  * @public
  */
@@ -40,12 +30,13 @@ export function ThemeProvider(props: ThemeProviderProps): React.ReactElement {
   const theme: Theme | null = useMemo(() => {
     if (!themeProp) return null
 
-    const {layer: rootLayer, ...restTheme} = themeProp
-
+    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, layer, color: {...legacyColors, tones: restTheme.color.tones}}}
-  }, [themeProp])
+    return {sanity: {...restTheme, color, layer}}
+  }, [scheme, themeProp, tone])
 
   const value: ThemeContextValue | null = useMemo(
     () =>
@@ -58,24 +49,13 @@ export function ThemeProvider(props: ThemeProviderProps): React.ReactElement {
     [themeProp, scheme, tone],
   )
 
-  const cssVariables = useMemo(() => {
-    if (!themeProp?.color.tones) return
-
-    return cssObjectToCssString(createCssVars(scheme, themeProp?.color.tones))
-  }, [scheme, themeProp?.color.tones])
-
   if (!theme) {
     return <pre>ThemeProvider: no "theme" property provided</pre>
   }
 
   return (
     <ThemeContext.Provider value={value}>
-      <GlobalVariables $vars={cssVariables} />
-      <StyledThemeProvider theme={theme}>
-        <ToneProvider tone={tone} scheme={scheme}>
-          {children}
-        </ToneProvider>
-      </StyledThemeProvider>
+      <StyledThemeProvider theme={theme}>{children}</StyledThemeProvider>
     </ThemeContext.Provider>
   )
 }

package/src/theme/types.ts

@@ -1,5 +1,5 @@
 import {CSSObject} from '../types/styled'
-import {BaseTheme, ThemeColorName, ThemeColorSchemeKey} from './lib/theme'
+import {BaseTheme, ThemeColor, ThemeColorName, ThemeColorSchemeKey} from './lib/theme'
 
 /**
  * @public
@@ -23,7 +23,9 @@ export interface Styles {
  * @public
  */
 export interface Theme {
-  sanity: RootTheme
+  sanity: Omit<RootTheme, 'color'> & {
+    color: ThemeColor
+  }
 }
 
 /**

package/src/utils/elementQuery/__workshop__/customMedia.tsx

@@ -1,16 +1,15 @@
 import {Box, Card, ElementQuery, Text} from '@sanity/ui'
 import styled from 'styled-components'
-import {mutableCardVariables} from '../../../theme/lib/theme/color/cssVariables/cardVariables'
 
 const TestCard = styled(Card)`
-  ${mutableCardVariables['fg-color']}: orange;
+  --card-fg-color: orange;
 
   [data-eq-min~='0'] > & {
-    ${mutableCardVariables['fg-color']}: green;
+    --card-fg-color: green;
   }
 
   [data-eq-min~='1'] > & {
-    ${mutableCardVariables['fg-color']}: blue;
+    --card-fg-color: blue;
   }
 `
 

package/src/primitives/avatar/spotColors.ts

@@ -1,53 +0,0 @@
-import {
-  gray,
-  blue,
-  purple,
-  magenta,
-  red,
-  orange,
-  yellow,
-  green,
-  cyan,
-  ColorTint,
-} from '@sanity/color'
-import {ThemeColorSchemeKey} from '../../theme'
-import {ThemeColorSpotKey} from './types'
-
-export const spotColor: Record<ThemeColorSpotKey, Record<ThemeColorSchemeKey, ColorTint>> = {
-  gray: {
-    dark: gray['400'],
-    light: gray['500'],
-  },
-  blue: {
-    dark: blue['400'],
-    light: blue['500'],
-  },
-  purple: {
-    dark: purple['400'],
-    light: purple['500'],
-  },
-  magenta: {
-    dark: magenta['400'],
-    light: magenta['500'],
-  },
-  red: {
-    dark: red['400'],
-    light: red['500'],
-  },
-  orange: {
-    dark: orange['400'],
-    light: orange['500'],
-  },
-  yellow: {
-    dark: yellow['400'],
-    light: yellow['500'],
-  },
-  green: {
-    dark: green['400'],
-    light: green['500'],
-  },
-  cyan: {
-    dark: cyan['400'],
-    light: cyan['500'],
-  },
-}

package/src/theme/lib/theme/color/cssVariables/cardVariables.ts

@@ -1,88 +0,0 @@
-import {tonesCssVariables} from './tones'
-
-/**
- * @internal
- * This variables can be changed by other components besides the `Card` component itself.
- */
-export const mutableCardVariables = {
-  'bg-color': '--card-bg-color',
-  'muted-fg-color': '--card-muted-fg-color',
-  'icon-color': '--card-icon-color',
-  'fg-color': '--card-fg-color',
-  'bg-image': '--card-bg-image',
-  'accent-color': '--card-accent-fg-color',
-} as const
-
-/**
- * @internal
- * This are the only variables that are exposed, as they can be updated and used by other components.
- */
-export const mutableVariables: Record<keyof typeof mutableCardVariables, string> = Object.keys(
-  mutableCardVariables,
-).reduce(
-  (acc, key) => {
-    const item = key as keyof typeof mutableCardVariables
-
-    acc[item] = `var(${mutableCardVariables[item]})`
-
-    return acc
-  },
-  {} as Record<keyof typeof mutableCardVariables, string>,
-)
-
-/**
- * @internal
- * This variables can not be changed by other components, they are here for backwards compatibility.
- * Shouldn't be used inside any component in @sanity/ui
- */
-const legacyFixedVariables = [
-  '--card-shadow-outline-color',
-  '--card-shadow-umbra-color',
-  '--card-shadow-penumbra-color',
-  '--card-shadow-ambient-color',
-  '--card-focus-ring-color',
-  '--card-link-fg-color',
-  '--card-code-bg-color',
-  '--card-code-fg-color',
-  '--card-skeleton-color-from',
-  '--card-skeleton-color-to',
-  '--card-link-color',
-  '--card-hairline-soft-color',
-  '--card-hairline-hard-color',
-  '--card-border-color',
-] as const
-
-const allVariables = [...Object.values(mutableCardVariables), ...legacyFixedVariables] as const
-
-type CardCssVariable = (typeof allVariables)[number]
-
-/**
- * @internal
- */
-export const cardVariables: Record<CardCssVariable, string> = {
-  '--card-shadow-outline-color': tonesCssVariables.default['base-shadow-outline-color'],
-  '--card-shadow-umbra-color': tonesCssVariables.default['base-shadow-umbra-color'],
-  '--card-shadow-penumbra-color': tonesCssVariables.default['base-shadow-penumbra-color'],
-  '--card-shadow-ambient-color': tonesCssVariables.default['base-shadow-ambient-color'],
-  '--card-focus-ring-color': tonesCssVariables.positive['bg-accent'],
-
-  '--card-icon-color': tonesCssVariables.default['icon-default'],
-
-  // Card
-  '--card-bg-color': tonesCssVariables.default['bg-base'],
-  '--card-bg-image': 'inherit',
-  '--card-fg-color': tonesCssVariables.default['text-primary'],
-  '--card-border-color': tonesCssVariables.default['border-base'],
-  '--card-muted-fg-color': tonesCssVariables.default['text-secondary'],
-  '--card-accent-fg-color': tonesCssVariables.default['text-accent'],
-  '--card-link-fg-color': tonesCssVariables.default['text-link'],
-  '--card-code-bg-color': tonesCssVariables.default['bg-tint-code'],
-  '--card-code-fg-color': tonesCssVariables.default['text-code'],
-  '--card-skeleton-color-from': tonesCssVariables.default['skeleton-from'],
-  '--card-skeleton-color-to': tonesCssVariables.default['skeleton-to'],
-
-  // @todo: deprecate
-  '--card-link-color': tonesCssVariables.default['text-link'],
-  '--card-hairline-soft-color': tonesCssVariables.default['border-base'],
-  '--card-hairline-hard-color': tonesCssVariables.default['border-base'],
-}

package/src/theme/lib/theme/color/cssVariables/createCssVars.ts

@@ -1,31 +0,0 @@
-import {ColorTints} from '@sanity/color'
-import {ThemeColorName, ThemeColorSchemeKey} from '../types'
-import {cardVariables, mutableVariables} from './cardVariables'
-import {getColorHex} from './tints'
-import {createTonesVariables, tonesCssVariables} from './tones'
-
-/**
- * @beta
- */
-export const createCssVars = (
-  scheme: ThemeColorSchemeKey,
-  tones: Record<ThemeColorName, ColorTints>,
-  defaultTone: ThemeColorName = 'default',
-): Record<string, string> => {
-  const baseBg = getColorHex(tones[defaultTone], scheme, defaultTone, 'base-bg-card')
-  const tonesVars = createTonesVariables(scheme, tones, defaultTone, baseBg)
-
-  return {...tonesVars, ...cardVariables}
-}
-
-/**
- * @beta
- */
-export const cssVars = {
-  ...tonesCssVariables,
-  /**
-   * This variables are mutable, they can be updated by other components.
-   * The main component that updates them is the card, these are the only ones that should be exposed for use from the cards.
-   */
-  mutable: mutableVariables,
-}

package/src/theme/lib/theme/color/cssVariables/cssVars.test.ts

@@ -1,262 +0,0 @@
-import {ColorTints, hues} from '@sanity/color'
-import {ThemeColorName} from '../types'
-import {createCssVars} from './createCssVars'
-
-export const tones: Record<ThemeColorName, ColorTints> = {
-  default: hues.gray,
-  transparent: hues.gray,
-  primary: hues.gray,
-  positive: hues.cyan,
-  caution: hues.yellow,
-  critical: hues.red,
-} as const
-
-describe('css variables', () => {
-  it('Should create the variables when no default tone is provided', () => {
-    const result = createCssVars('light', tones)
-
-    const expected = {
-      '--default-text-primary': '#1f2228',
-      '--default-text-secondary': '#5e6573',
-      '--default-text-inactive': '#788191',
-      '--default-text-code': '#5e6573',
-      '--default-text-muted': '#5e6573',
-      '--default-text-link': '#0661fe',
-      '--default-text-accent': '#ec4636',
-      '--default-bg-base': '#ffffff',
-      '--default-bg-base-hover': '#f9f9fa',
-      '--default-bg-base-active': '#f3f4f6',
-      '--default-bg-accent': '#1f2228',
-      '--default-bg-accent-hover': '#17191c',
-      '--default-bg-accent-active': '#111213',
-      '--default-bg-tint': '#f9f9fa',
-      '--default-bg-tint-code': '#f9f9fa',
-      '--default-icon-default': '#788191',
-      '--default-icon-inverted': '#ffffff',
-      '--default-border-base': '#f3f4f6',
-      '--default-border-base-hover': '#e2e6e9',
-      '--default-border-accent': '#5e6573',
-      '--default-border-accent-inverted': '#ffffff',
-      '--default-base-bg-card': '#ffffff',
-      '--default-base-bg-raw': '#ffffff',
-      '--default-base-shadow-outline-color': 'rgba(120,129,145,0.2)',
-      '--default-base-shadow-umbra-color': 'rgba(120,129,145,0.1)',
-      '--default-base-shadow-penumbra-color': 'rgba(120,129,145,0.07)',
-      '--default-base-shadow-ambient-color': 'rgba(120,129,145,0.06)',
-      '--default-base-text-color': '#ffffff',
-      '--default-skeleton-from': '#f3f4f6',
-      '--default-skeleton-to': 'rgba(249,249,250,0.5)',
-      '--transparent-text-primary': '#1f2228',
-      '--transparent-text-secondary': '#5e6573',
-      '--transparent-text-inactive': '#788191',
-      '--transparent-text-code': '#5e6573',
-      '--transparent-text-muted': '#5e6573',
-      '--transparent-text-link': '#0661fe',
-      '--transparent-text-accent': '#ec4636',
-      '--transparent-bg-base': '#ffffff',
-      '--transparent-bg-base-hover': '#f9f9fa',
-      '--transparent-bg-base-active': '#f3f4f6',
-      '--transparent-bg-accent': '#788191',
-      '--transparent-bg-accent-hover': '#5e6573',
-      '--transparent-bg-accent-active': '#464c58',
-      '--transparent-bg-tint': '#f9f9fa',
-      '--transparent-bg-tint-code': '#f9f9fa',
-      '--transparent-icon-default': '#788191',
-      '--transparent-icon-inverted': '#ffffff',
-      '--transparent-border-base': '#f3f4f6',
-      '--transparent-border-base-hover': '#e2e6e9',
-      '--transparent-border-accent': '#788191',
-      '--transparent-border-accent-inverted': '#ffffff',
-      '--transparent-base-bg-card': '#f9f9fa',
-      '--transparent-base-bg-raw': '#ffffff',
-      '--transparent-base-shadow-outline-color': 'rgba(120,129,145,0.2)',
-      '--transparent-base-shadow-umbra-color': 'rgba(120,129,145,0.1)',
-      '--transparent-base-shadow-penumbra-color': 'rgba(120,129,145,0.07)',
-      '--transparent-base-shadow-ambient-color': 'rgba(120,129,145,0.06)',
-      '--transparent-base-text-color': '#ffffff',
-      '--transparent-skeleton-from': '#f3f4f6',
-      '--transparent-skeleton-to': 'rgba(249,249,250,0.5)',
-      '--primary-text-primary': '#1f2228',
-      '--primary-text-secondary': '#5e6573',
-      '--primary-text-inactive': '#788191',
-      '--primary-text-code': '#5e6573',
-      '--primary-text-muted': '#5e6573',
-      '--primary-text-link': '#0661fe',
-      '--primary-text-accent': '#ec4636',
-      '--primary-bg-base': '#ffffff',
-      '--primary-bg-base-hover': '#f9f9fa',
-      '--primary-bg-base-active': '#f3f4f6',
-      '--primary-bg-accent': '#1f2228',
-      '--primary-bg-accent-hover': '#17191c',
-      '--primary-bg-accent-active': '#111213',
-      '--primary-bg-tint': '#f9f9fa',
-      '--primary-bg-tint-code': '#f9f9fa',
-      '--primary-icon-default': '#788191',
-      '--primary-icon-inverted': '#ffffff',
-      '--primary-border-base': '#f3f4f6',
-      '--primary-border-base-hover': '#e2e6e9',
-      '--primary-border-accent': '#5e6573',
-      '--primary-border-accent-inverted': '#ffffff',
-      '--primary-base-bg-card': '#f9f9fa',
-      '--primary-base-bg-raw': '#ffffff',
-      '--primary-base-shadow-outline-color': 'rgba(120,129,145,0.2)',
-      '--primary-base-shadow-umbra-color': 'rgba(120,129,145,0.1)',
-      '--primary-base-shadow-penumbra-color': 'rgba(120,129,145,0.07)',
-      '--primary-base-shadow-ambient-color': 'rgba(120,129,145,0.06)',
-      '--primary-base-text-color': '#ffffff',
-      '--primary-skeleton-from': '#f3f4f6',
-      '--primary-skeleton-to': 'rgba(249,249,250,0.5)',
-      '--positive-text-primary': '#0b2a32',
-      '--positive-text-secondary': '#0e9ebe',
-      '--positive-text-inactive': '#0ecff1',
-      '--positive-text-code': '#0e9ebe',
-      '--positive-text-muted': '#0e9ebe',
-      '--positive-text-link': '#0661fe',
-      '--positive-text-accent': '#ec4636',
-      '--positive-bg-base': '#ffffff',
-      '--positive-bg-base-hover': '#f9f9fa',
-      '--positive-bg-base-active': '#ebfdff',
-      '--positive-bg-accent': '#41e1f6',
-      '--positive-bg-accent-hover': '#0ecff1',
-      '--positive-bg-accent-active': '#0e9ebe',
-      '--positive-bg-tint': '#ebfdff',
-      '--positive-bg-tint-code': '#ebfdff',
-      '--positive-icon-default': '#0ecff1',
-      '--positive-icon-inverted': '#ffffff',
-      '--positive-border-base': '#d2fcfe',
-      '--positive-border-base-hover': '#aaf8fd',
-      '--positive-border-accent': '#41e1f6',
-      '--positive-border-accent-inverted': '#ffffff',
-      '--positive-base-bg-card': '#ebfdff',
-      '--positive-base-bg-raw': '#ffffff',
-      '--positive-base-shadow-outline-color': 'rgba(14,207,241,0.2)',
-      '--positive-base-shadow-umbra-color': 'rgba(14,207,241,0.1)',
-      '--positive-base-shadow-penumbra-color': 'rgba(14,207,241,0.07)',
-      '--positive-base-shadow-ambient-color': 'rgba(14,207,241,0.06)',
-      '--positive-base-text-color': '#ffffff',
-      '--positive-skeleton-from': '#d2fcfe',
-      '--positive-skeleton-to': 'rgba(235,253,255,0.5)',
-      '--caution-text-primary': '#331f0a',
-      '--caution-text-secondary': '#cb920b',
-      '--caution-text-inactive': '#f3bc16',
-      '--caution-text-code': '#cb920b',
-      '--caution-text-muted': '#cb920b',
-      '--caution-text-link': '#0661fe',
-      '--caution-text-accent': '#ec4636',
-      '--caution-bg-base': '#ffffff',
-      '--caution-bg-base-hover': '#fffdf0',
-      '--caution-bg-base-active': '#fef7cd',
-      '--caution-bg-accent': '#f3bc16',
-      '--caution-bg-accent-hover': '#cb920b',
-      '--caution-bg-accent-active': '#98670b',
-      '--caution-bg-tint': '#fffdf0',
-      '--caution-bg-tint-code': '#fffdf0',
-      '--caution-icon-default': '#f3bc16',
-      '--caution-icon-inverted': '#ffffff',
-      '--caution-border-base': '#fef7cd',
-      '--caution-border-base-hover': '#fbf1a7',
-      '--caution-border-accent': '#f3bc16',
-      '--caution-border-accent-inverted': '#ffffff',
-      '--caution-base-bg-card': '#fffdf0',
-      '--caution-base-bg-raw': '#ffffff',
-      '--caution-base-shadow-outline-color': 'rgba(243,188,22,0.2)',
-      '--caution-base-shadow-umbra-color': 'rgba(243,188,22,0.1)',
-      '--caution-base-shadow-penumbra-color': 'rgba(243,188,22,0.07)',
-      '--caution-base-shadow-ambient-color': 'rgba(243,188,22,0.06)',
-      '--caution-base-text-color': '#ffffff',
-      '--caution-skeleton-from': '#fef7cd',
-      '--caution-skeleton-to': 'rgba(255,253,240,0.5)',
-      '--critical-text-primary': '#421410',
-      '--critical-text-secondary': '#d72414',
-      '--critical-text-inactive': '#f6a098',
-      '--critical-text-code': '#d72414',
-      '--critical-text-muted': '#d72414',
-      '--critical-text-link': '#0661fe',
-      '--critical-text-accent': '#ec4636',
-      '--critical-bg-base': '#ffffff',
-      '--critical-bg-base-hover': '#fff5f5',
-      '--critical-bg-base-active': '#fee8e7',
-      '--critical-bg-accent': '#ec4636',
-      '--critical-bg-accent-hover': '#d72414',
-      '--critical-bg-accent-active': '#a52112',
-      '--critical-bg-tint': '#fff5f5',
-      '--critical-bg-tint-code': '#fff5f5',
-      '--critical-icon-default': '#ec4636',
-      '--critical-icon-inverted': '#ffffff',
-      '--critical-border-base': '#fee8e7',
-      '--critical-border-base-hover': '#fbccc6',
-      '--critical-border-accent': '#ec4636',
-      '--critical-border-accent-inverted': '#ffffff',
-      '--critical-base-bg-card': '#fff5f5',
-      '--critical-base-bg-raw': '#ffffff',
-      '--critical-base-shadow-outline-color': 'rgba(236,70,54,0.2)',
-      '--critical-base-shadow-umbra-color': 'rgba(236,70,54,0.1)',
-      '--critical-base-shadow-penumbra-color': 'rgba(236,70,54,0.07)',
-      '--critical-base-shadow-ambient-color': 'rgba(236,70,54,0.06)',
-      '--critical-base-text-color': '#ffffff',
-      '--critical-skeleton-from': '#fee8e7',
-      '--critical-skeleton-to': 'rgba(255,245,245,0.5)',
-      '--card-shadow-outline-color': 'var(--default-base-shadow-outline-color)',
-      '--card-shadow-umbra-color': 'var(--default-base-shadow-umbra-color)',
-      '--card-shadow-penumbra-color': 'var(--default-base-shadow-penumbra-color)',
-      '--card-shadow-ambient-color': 'var(--default-base-shadow-ambient-color)',
-      '--card-focus-ring-color': 'var(--positive-bg-accent)',
-      '--card-icon-color': 'var(--default-icon-default)',
-      '--card-bg-image': 'inherit',
-      '--card-bg-color': 'var(--default-bg-base)',
-      '--card-fg-color': 'var(--default-text-primary)',
-      '--card-muted-fg-color': 'var(--default-text-secondary)',
-      '--card-accent-fg-color': 'var(--default-text-accent)',
-      '--card-link-fg-color': 'var(--default-text-link)',
-      '--card-code-bg-color': 'var(--default-bg-tint-code)',
-      '--card-code-fg-color': 'var(--default-text-code)',
-      '--card-skeleton-color-from': 'var(--default-skeleton-from)',
-      '--card-skeleton-color-to': 'var(--default-skeleton-to)',
-      '--card-link-color': 'var(--default-text-link)',
-      '--card-hairline-soft-color': 'var(--default-border-base)',
-      '--card-hairline-hard-color': 'var(--default-border-base)',
-      '--card-border-color': 'var(--default-border-base)',
-    }
-
-    expect(result).toEqual(expected)
-  })
-  it('Should create the variables when a default tone is provided in light mode', () => {
-    const defaultVariables = createCssVars('light', tones)
-    const result = createCssVars('light', tones, 'caution')
-
-    expect(result['--default-text-primary']).toEqual(result['--caution-text-primary'])
-    // It's not equal because it has been mixed with the default bg
-    expect(result['--default-text-primary']).not.toEqual(defaultVariables['--caution-text-primary'])
-
-    expect(result['--default-text-secondary']).toEqual(result['--caution-text-secondary'])
-    // It's not equal because it has been mixed with the default bg
-    expect(result['--default-text-secondary']).not.toEqual(
-      defaultVariables['--caution-text-secondary'],
-    )
-    // The default base bg should not be mixed
-    expect(result['--default-bg_base']).toEqual(defaultVariables['--caution-card_base_bg'])
-
-    expect(result['--default-base-shadow-ambient-color']).toEqual(
-      defaultVariables['--caution-base-shadow-ambient-color'],
-    )
-    expect(result['--default-base-shadow-ambient-color']).not.toEqual(
-      defaultVariables['--positive-base-shadow-ambient-color'],
-    )
-  })
-  it('Should create the variables when a default tone is provided in dark mode', () => {
-    const defaultVariables = createCssVars('dark', tones)
-    const result = createCssVars('dark', tones, 'caution')
-
-    expect(result['--default-text-primary']).toEqual(result['--caution-text-primary'])
-    // It's not equal because it has been mixed with the default bg
-    expect(result['--default-text-primary']).not.toEqual(defaultVariables['--caution-text-primary'])
-
-    expect(result['--default-text-secondary']).toEqual(result['--caution-text-secondary'])
-    // It's not equal because it has been mixed with the default bg
-    expect(result['--default-text-secondary']).not.toEqual(
-      defaultVariables['--caution-text-secondary'],
-    )
-    // The base bg should not be mixed
-    expect(result['--default-bg_base']).toEqual(defaultVariables['--caution-card_base_bg'])
-  })
-})

package/src/theme/lib/theme/color/cssVariables/index.ts

@@ -1 +0,0 @@
-export * from './createCssVars'

package/src/theme/lib/theme/color/cssVariables/tones.ts

@@ -1,67 +0,0 @@
-import {ColorTints} from '@sanity/color'
-import {multiply, screen} from '../../../../studioTheme/helpers'
-import {ThemeColorName, ThemeColorSchemeKey} from '../types'
-import {ColorKey, colorKeys, getColorHex} from './tints'
-
-export const getToneCssVar = (tone: ThemeColorName, key: ColorKey): string => `--${tone}-${key}`
-
-export const createTonesVariables = (
-  scheme: ThemeColorSchemeKey,
-  tones: Record<ThemeColorName, ColorTints>,
-  defaultTone: ThemeColorName = 'default',
-  baseBg: string,
-): Record<string, string> => {
-  const tonesVariables: Record<string, string> = {}
-  const keys = Object.keys(tones) as ThemeColorName[]
-  const mix = scheme === 'dark' ? screen : multiply
-  const needsMixing = defaultTone !== 'default'
-
-  keys.forEach((_tone: ThemeColorName) => {
-    const tone = _tone == 'default' ? defaultTone : _tone
-    const tint = tones[tone]
-
-    colorKeys.forEach((key) => {
-      const colorHex = getColorHex(tint, scheme, tone, key)
-      const varName = getToneCssVar(_tone, key)
-      const willBeMixed = needsMixing && !key.startsWith('base-')
-
-      tonesVariables[varName] = willBeMixed ? mix(baseBg, colorHex) : colorHex
-    })
-  })
-
-  // If we are changing the default tone, we need to update the bg-base to match with the new base bg color.
-  // As components are using this bg-base for the background color, and it needs to match with the card bg color.
-  if (defaultTone !== 'default') {
-    tonesVariables[getToneCssVar('default', 'bg-base')] = tonesCssVariables.default['base-bg-card']
-  }
-
-  return tonesVariables
-}
-
-const themeNames: ThemeColorName[] = [
-  'default',
-  'transparent',
-  'primary',
-  'positive',
-  'caution',
-  'critical',
-]
-
-export const tonesCssVariables: Record<
-  ThemeColorName,
-  Record<ColorKey, string>
-> = themeNames.reduce(
-  (acc, tone) => {
-    acc[tone] = colorKeys.reduce(
-      (acc, key) => {
-        acc[key] = `var(${getToneCssVar(tone, key)})`
-
-        return acc
-      },
-      {} as Record<ColorKey, string>,
-    )
-
-    return acc
-  },
-  {} as Record<ThemeColorName, Record<ColorKey, string>>,
-)

package/src/theme/lib/theme/color/cssVariables/utils.test.ts

@@ -1,15 +0,0 @@
-import {cssObjectToCssString} from './utils'
-
-describe('cssObjectToCssString', () => {
-  it('should transform css variables object to a style declaration type string', () => {
-    const cssObject = {
-      '--default-text-primary': '#007bff',
-      '--default-text-secondary': '#6c757d',
-      '--default-text-inactive': '#28a745',
-    }
-
-    const expectedCssString = `--default-text-primary: #007bff; --default-text-secondary: #6c757d; --default-text-inactive: #28a745; `
-
-    expect(cssObjectToCssString(cssObject)).toEqual(expectedCssString)
-  })
-})

package/src/theme/lib/theme/color/cssVariables/utils.ts

@@ -1,9 +0,0 @@
-/**
- * @internal
- * Transform css variables object to a style declaration type string
- */
-export function cssObjectToCssString(rules: Record<string, string>): string {
-  return Object.keys(rules).reduce((acc, key) => {
-    return `${acc}${key}: ${rules[key]}; `
-  }, '')
-}

package/src/theme/toneContext/toneContext.ts

@@ -1,12 +0,0 @@
-import {createContext} from 'react'
-import {globalScope} from '../../lib/globalScope'
-import {ToneContextValue} from './types'
-
-const key = Symbol.for('@sanity/ui/context/toneContext')
-
-globalScope[key] = globalScope[key] || createContext<ToneContextValue | null>(null)
-
-/**
- * @internal
- */
-export const ToneContext: React.Context<ToneContextValue | null> = globalScope[key]