@sanity/ui 2.0.0-alpha.5 → 2.0.0-alpha.6

package/src/primitives/textArea/textArea.tsx

@@ -13,7 +13,7 @@ import {
   textInputFontSizeStyle,
   textInputRepresentationStyle,
 } from '../../styles/internal'
-import {ThemeFontWeightKey, useRootTheme} from '../../theme'
+import {ThemeColorToneKey, ThemeFontWeightKey} from '../../theme'
 import {ResponsiveRadiusProps} from '../types'
 
 /**
@@ -25,6 +25,7 @@ export interface TextAreaProps extends ResponsiveRadiusProps {
   fontSize?: number | number[]
   padding?: number | number[]
   weight?: ThemeFontWeightKey
+  tone?: ThemeColorToneKey
 }
 
 const Root = styled.span(textInputRootStyle)
@@ -62,13 +63,12 @@ export const TextArea = forwardRef(function TextArea(
     padding = 3,
     radius = 2,
     weight,
+    tone = 'default',
     ...restProps
   } = props
 
   const ref = useForwardedRef(forwardedRef)
 
-  const rootTheme = useRootTheme()
-
   useCustomValidity(ref, customValidity)
 
   return (
@@ -76,25 +76,21 @@ export const TextArea = forwardRef(function TextArea(
       <InputRoot>
         <Input
           data-as="textarea"
-          data-scheme={rootTheme.scheme}
-          data-tone={rootTheme.tone}
+          data-tone={tone}
           {...restProps}
           $fontSize={useArrayProp(fontSize)}
           $padding={useArrayProp(padding)}
-          $scheme={rootTheme.scheme}
           $space={useArrayProp(0)}
-          $tone={rootTheme.tone}
+          $tone={tone}
           $weight={weight}
           disabled={disabled}
           ref={ref}
         />
         <Presentation
           $radius={useArrayProp(radius)}
-          $scheme={rootTheme.scheme}
-          $tone={rootTheme.tone}
+          $tone={tone}
           data-border={border ? '' : undefined}
-          data-scheme={rootTheme.scheme}
-          data-tone={rootTheme.tone}
+          data-tone={tone}
         />
       </InputRoot>
     </Root>

package/src/primitives/textInput/textInput.tsx

@@ -16,7 +16,8 @@ import {
   textInputRepresentationStyle,
   textInputRootStyle,
 } from '../../styles/internal'
-import {ThemeFontWeightKey, useRootTheme} from '../../theme'
+import {ThemeColorToneKey, ThemeFontWeightKey} from '../../theme'
+import {useToneContext} from '../../theme/toneContext/useToneContext'
 import {Radius} from '../../types'
 import {Box} from '../box'
 import {Button, ButtonProps} from '../button'
@@ -70,6 +71,7 @@ export interface TextInputProps {
   suffix?: React.ReactNode
   type?: TextInputType
   weight?: ThemeFontWeightKey
+  tone?: ThemeColorToneKey
 }
 
 const CLEAR_BUTTON_BOX_STYLE: React.CSSProperties = {zIndex: 2}
@@ -163,12 +165,14 @@ export const TextInput = forwardRef(function TextInput(
     customValidity,
     type = 'text',
     weight,
+    tone: toneProp = 'default',
     ...restProps
   } = props
 
   const ref = useForwardedRef(forwardedRef)
 
-  const rootTheme = useRootTheme()
+  const toneContext = useToneContext()
+  const tone = toneProp === 'default' ? toneContext.tone : toneProp
 
   const fontSize = useArrayProp(fontSizeProp)
   const padding = useArrayProp(paddingProp)
@@ -221,11 +225,9 @@ export const TextInput = forwardRef(function TextInput(
         $hasPrefix={$hasPrefix}
         $hasSuffix={$hasSuffix}
         $radius={radius}
-        $scheme={rootTheme.scheme}
-        $tone={rootTheme.tone}
+        $tone={tone}
         data-border={border ? '' : undefined}
-        data-scheme={rootTheme.scheme}
-        data-tone={rootTheme.tone}
+        data-tone={tone}
       >
         {icon && (
           <LeftBox padding={padding}>
@@ -253,10 +255,10 @@ export const TextInput = forwardRef(function TextInput(
       iconRight,
       padding,
       radius,
-      rootTheme,
       $hasClearButton,
       $hasPrefix,
       $hasSuffix,
+      tone,
     ],
   )
 
@@ -339,22 +341,20 @@ export const TextInput = forwardRef(function TextInput(
   )
 
   return (
-    <Root data-ui="TextInput" tone={rootTheme.tone}>
+    <Root data-ui="TextInput" tone={tone}>
       {prefixNode}
 
       <InputRoot>
         <Input
           data-as="input"
-          data-scheme={rootTheme.scheme}
-          data-tone={rootTheme.tone}
+          data-tone={tone}
           {...restProps}
           $fontSize={fontSize}
           $iconLeft={$hasIcon}
           $iconRight={$hasIconRight || $hasClearButton}
           $padding={padding}
-          $scheme={rootTheme.scheme}
           $space={space}
-          $tone={rootTheme.tone}
+          $tone={tone}
           $weight={weight}
           disabled={disabled}
           readOnly={readOnly}

package/src/primitives/tooltip/__workshop__/props.tsx

@@ -1,4 +1,13 @@
-import {Button, Card, Flex, Text, Tooltip, TooltipDelayGroupProvider, Stack} from '@sanity/ui'
+import {
+  Button,
+  Card,
+  Flex,
+  Text,
+  Tooltip,
+  TooltipDelayGroupProvider,
+  Stack,
+  cssVars,
+} from '@sanity/ui'
 import {useBoolean, useSelect, useText, useNumber} from '@sanity/ui-workshop'
 import {
   WORKSHOP_PLACEMENT_OPTIONS,
@@ -28,7 +37,11 @@ export default function PropsStory() {
       >
         <Stack
           padding={4}
-          style={{outline: '1px solid var(--card-border-color)', width: '100%', maxWidth: '640px'}}
+          style={{
+            outline: `1px solid ${cssVars.default['border-base']}`,
+            width: '100%',
+            maxWidth: '640px',
+          }}
           space={4}
         >
           <Text align="center" size={3}>
@@ -52,7 +65,11 @@ export default function PropsStory() {
         </Stack>
         <Stack
           padding={4}
-          style={{outline: '1px solid var(--card-border-color)', width: '100%', maxWidth: '640px'}}
+          style={{
+            outline: `1px solid ${cssVars.default['border-base']}`,
+            width: '100%',
+            maxWidth: '640px',
+          }}
           space={4}
         >
           <Text align="center" size={3}>

package/src/primitives/tooltip/tooltipArrow.tsx

@@ -1,5 +1,6 @@
 import {forwardRef} from 'react'
 import styled from 'styled-components'
+import {cssVars} from '../../theme'
 
 const Root = styled.div`
   position: absolute;
@@ -63,11 +64,11 @@ const Root = styled.div`
 `
 
 const Border = styled.path`
-  fill: var(--card-shadow-outline-color);
+  fill: ${cssVars.default['base-shadow-outline-color']};
 `
 
 const Shape = styled.path`
-  fill: var(--card-bg-color);
+  fill: ${cssVars.mutable['bg-color']};
 `
 
 interface TooltipArrowProps {}

package/src/styles/border/borderStyle.ts

@@ -1,9 +1,10 @@
+import {cssVars} from '../../theme'
 import {CSSObject} from '../../types/styled'
 import {_responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveBorderStyleProps} from './types'
 
-const BORDER_VALUE = '1px solid var(--card-border-color)'
+const BORDER_VALUE = `1px solid ${cssVars.default['border-base']}`
 
 export function responsiveBorderStyle(): Array<
   (props: ResponsiveBorderStyleProps & ThemeProps) => CSSObject[]

package/src/styles/colorVars/colorVarsStyle.ts

@@ -1,43 +1,82 @@
-import {ThemeColorBase, ThemeColorGenericState} from '../../theme'
+import {cssVars} from '../../theme'
+import {mutableCardVariables} from '../../theme/lib/theme/color/cssVariables/cardVariables'
+import {getToneCssVar} from '../../theme/lib/theme/color/cssVariables/tones'
 import {CSSObject} from '../../types/styled'
 
 /**
  * @internal
+ * Card overrides in disabled states
  */
-export function _colorVarsStyle(
-  base: ThemeColorBase,
-  color: ThemeColorGenericState,
-  checkered = false,
-): CSSObject {
+export function _colorVarStyleDisabled(checkered = false): CSSObject {
   return {
-    // Base
-    // @todo: rename to "--base-"?
-    '--card-shadow-outline-color': base.shadow.outline,
-    '--card-shadow-umbra-color': base.shadow.umbra,
-    '--card-shadow-penumbra-color': base.shadow.penumbra,
-    '--card-shadow-ambient-color': base.shadow.ambient,
-    '--card-focus-ring-color': base.focusRing,
-    '--card-icon-color': color.iconColor,
+    [getToneCssVar('default', 'text-link')]: cssVars.default['text-secondary'],
+    [getToneCssVar('default', 'text-accent')]: cssVars.default['text-secondary'],
+    [getToneCssVar('default', 'text-code')]: cssVars.default['text-secondary'],
+    [getToneCssVar('default', 'text-primary')]: cssVars.default['text-secondary'],
 
-    // Card
-    '--card-bg-color': color.bg,
-    '--card-bg2-color': color.bg2,
-    '--card-bg-image': checkered
-      ? `repeating-conic-gradient(${color.bg} 0% 25%, ${color.bg2 || color.bg} 0% 50%)`
+    [mutableCardVariables['fg-color']]: cssVars.primary['text-inactive'],
+    [mutableCardVariables['muted-fg-color']]: cssVars.primary['text-inactive'],
+    [mutableCardVariables['icon-color']]: cssVars.primary['border-base'],
+    [mutableCardVariables['accent-color']]: cssVars.primary['base-bg-card'],
+    [mutableCardVariables['bg-color']]: cssVars.primary['bg-tint'],
+    [mutableCardVariables['bg-image']]: checkered
+      ? `repeating-conic-gradient(${cssVars.default['base-bg-card']} 0% 25%, ${cssVars.default['bg-tint']} 0% 50%)`
       : undefined,
-    '--card-fg-color': color.fg,
-    '--card-border-color': color.border,
-    '--card-muted-fg-color': color.muted?.fg,
-    '--card-accent-fg-color': color.accent?.fg,
-    '--card-link-fg-color': color.link?.fg,
-    '--card-code-bg-color': color.code?.bg,
-    '--card-code-fg-color': color.code?.fg,
-    '--card-skeleton-color-from': color.skeleton?.from,
-    '--card-skeleton-color-to': color.skeleton?.to,
+  }
+}
+
+/**
+ * @internal
+ * Card overrides in selected states
+ */
+export function _colorVarStyleSelected(): CSSObject {
+  return {
+    [mutableCardVariables['bg-color']]: cssVars.default['bg-accent'],
+    [mutableCardVariables['fg-color']]: cssVars.default['bg-base'],
+    [mutableCardVariables['muted-fg-color']]: cssVars.default['base-bg-card'],
+    [mutableCardVariables['accent-color']]: cssVars.default['base-bg-card'],
+    [mutableCardVariables['icon-color']]: cssVars.primary['bg-base'],
+  }
+}
+
+/**
+ * @internal
+ * Card overrides in hover
+ */
+export function _colorVarStyleHover(): CSSObject {
+  return {
+    [mutableCardVariables['bg-color']]: cssVars.default['bg-base-hover'],
+  }
+}
+
+/**
+ * @internal
+ * Card overrides in active / pressed states
+ */
+export function _colorVarStyleActive(): CSSObject {
+  return {
+    [mutableCardVariables['bg-color']]: cssVars.default['bg-base-active'],
+  }
+}
 
-    // @todo: deprecate
-    '--card-link-color': color.link?.fg,
-    '--card-hairline-soft-color': color.border,
-    '--card-hairline-hard-color': color.border,
+/**
+ * @internal
+ * Selectable needs to redefine bg-color and fg-color
+ */
+export function _selectableVarStyle(): CSSObject {
+  return {
+    [mutableCardVariables['bg-color']]: 'inherit',
+    [mutableCardVariables['fg-color']]: cssVars.default['text-secondary'],
+  }
+}
+
+/**
+ * @internal
+ * Selectable overrides in disabled states, same as card but with different bg-color
+ */
+export function _selectableVarStyleDisabled(): CSSObject {
+  return {
+    ..._colorVarStyleDisabled(),
+    [mutableCardVariables['bg-color']]: undefined,
   }
 }

package/src/styles/focusRing/index.ts

@@ -1,4 +1,4 @@
-import {FocusRing} from '../../theme'
+import {FocusRing, cssVars} from '../../theme'
 
 export function focusRingBorderStyle(border: {color: string; width: number}): string {
   return `inset 0 0 0 ${border.width}px ${border.color}`
@@ -12,13 +12,15 @@ export function focusRingStyle(opts: {
   const {base, border, focusRing} = opts
   const focusRingOutsetWidth = focusRing.offset + focusRing.width
   const focusRingInsetWidth = 0 - focusRing.offset
-  const bgColor = base ? base.bg : 'var(--card-bg-color)'
+  const bgColor = base ? base.bg : cssVars.mutable['bg-color']
 
   return [
-    focusRingInsetWidth > 0 && `inset 0 0 0 ${focusRingInsetWidth}px var(--card-focus-ring-color)`,
+    focusRingInsetWidth > 0 &&
+      `inset 0 0 0 ${focusRingInsetWidth}px ${cssVars.positive['border-accent']}`,
     border && focusRingBorderStyle(border),
     focusRingInsetWidth < 0 && `0 0 0 ${0 - focusRingInsetWidth}px ${bgColor}`,
-    focusRingOutsetWidth > 0 && `0 0 0 ${focusRingOutsetWidth}px var(--card-focus-ring-color)`,
+    focusRingOutsetWidth > 0 &&
+      `0 0 0 ${focusRingOutsetWidth}px ${cssVars.positive['border-accent']}`,
   ]
     .filter(Boolean)
     .join(',')

package/src/styles/input/textInputStyle.ts

@@ -1,6 +1,7 @@
 import {css} from 'styled-components'
-import {ThemeColorSchemeKey, ThemeFontWeightKey} from '../../theme'
-import {CardTone} from '../../types'
+import {ThemeColorToneKey, ThemeFontWeightKey} from '../../theme'
+import {mutableCardVariables} from '../../theme/lib/theme/color/cssVariables/cardVariables'
+import {cssVars} from '../../theme/lib/theme/color/cssVariables/createCssVars'
 import {CSSObject} from '../../types/styled'
 import {focusRingBorderStyle, focusRingStyle} from '../focusRing'
 import {rem, _responsive} from '../helpers'
@@ -11,8 +12,7 @@ import {ThemeProps} from '../types'
  */
 export interface TextInputInputStyleProps {
   $fontSize: number[]
-  $scheme: ThemeColorSchemeKey
-  $tone: CardTone
+  $tone: ThemeColorToneKey
   $weight?: ThemeFontWeightKey
 }
 
@@ -22,8 +22,7 @@ export interface TextInputInputStyleProps {
 export interface TextInputRepresentationStyleProps {
   $hasPrefix?: boolean
   $hasSuffix?: boolean
-  $scheme: ThemeColorSchemeKey
-  $tone: CardTone
+  $tone: ThemeColorToneKey
 }
 
 const ROOT_STYLE = css`
@@ -41,9 +40,8 @@ export function textInputRootStyle(): ReturnType<typeof css> {
 export function textInputBaseStyle(
   props: TextInputInputStyleProps & ThemeProps,
 ): ReturnType<typeof css> {
-  const {theme, $scheme, $tone, $weight} = props
+  const {theme, $tone, $weight} = props
   const font = theme.sanity.fonts.text
-  const color = theme.sanity.color.input
 
   return css`
     appearance: none;
@@ -81,33 +79,31 @@ export function textInputBaseStyle(
       color: var(--input-placeholder-color);
     }
 
-    &[data-scheme='${$scheme}'][data-tone='${$tone}'] {
-      --input-fg-color: ${color.default.enabled.fg};
-      --input-placeholder-color: ${color.default.enabled.placeholder};
+    --input-fg-color: ${cssVars[$tone]['text-primary']};
+    --input-placeholder-color: ${cssVars[$tone]['text-inactive']};
 
-      /* enabled */
-      &:not(:invalid):not(:disabled):not(:read-only) {
-        --input-fg-color: ${color.default.enabled.fg};
-        --input-placeholder-color: ${color.default.enabled.placeholder};
-      }
+    /* enabled */
+    &:not(:invalid):not(:disabled):not(:read-only) {
+      --input-fg-color: ${cssVars[$tone]['text-primary']};
+      --input-placeholder-color: ${cssVars[$tone]['text-inactive']};
+    }
 
-      /* disabled */
-      &:not(:invalid):disabled {
-        --input-fg-color: ${color.default.disabled.fg};
-        --input-placeholder-color: ${color.default.disabled.placeholder};
-      }
+    /* disabled */
+    &:not(:invalid):disabled {
+      --input-fg-color: ${cssVars[$tone]['text-primary']};
+      --input-placeholder-color: ${cssVars[$tone]['text-inactive']};
+    }
 
-      /* invalid */
-      &:invalid {
-        --input-fg-color: ${color.invalid.enabled.fg};
-        --input-placeholder-color: ${color.invalid.enabled.placeholder};
-      }
+    /* invalid */
+    &:invalid {
+      --input-fg-color: ${cssVars.critical['text-primary']};
+      --input-placeholder-color: ${cssVars.critical['text-inactive']};
+    }
 
-      /* readOnly */
-      &:read-only {
-        --input-fg-color: ${color.default.readOnly.fg};
-        --input-placeholder-color: ${color.default.readOnly.placeholder};
-      }
+    /* readOnly */
+    &:read-only {
+      --input-fg-color: ${cssVars[$tone]['text-primary']};
+      --input-placeholder-color: ${cssVars[$tone]['text-inactive']};
     }
   `
 }
@@ -129,10 +125,9 @@ export function textInputFontSizeStyle(props: TextInputInputStyleProps & ThemePr
 export function textInputRepresentationStyle(
   props: TextInputRepresentationStyleProps & ThemeProps,
 ): ReturnType<typeof css> {
-  const {$hasPrefix, $hasSuffix, $scheme, $tone, theme} = props
+  const {$hasPrefix, $hasSuffix, $tone, theme} = props
   const {input} = theme.sanity
   const {focusRing} = input.text
-  const color = theme.sanity.color.input
 
   return css`
     --input-box-shadow: none;
@@ -146,7 +141,7 @@ export function textInputRepresentationStyle(
     pointer-events: none;
     z-index: 0;
 
-    background-color: var(--card-bg-color);
+    background-color: ${cssVars.mutable['bg-color']};
     box-shadow: var(--input-box-shadow);
 
     border-top-left-radius: ${$hasPrefix ? 0 : undefined};
@@ -154,78 +149,66 @@ export function textInputRepresentationStyle(
     border-top-right-radius: ${$hasSuffix ? 0 : undefined};
     border-bottom-right-radius: ${$hasSuffix ? 0 : undefined};
 
-    &[data-scheme='${$scheme}'][data-tone='${$tone}'] {
-      --card-bg-color: ${color.default.enabled.bg};
-      --card-fg-color: ${color.default.enabled.fg};
+    ${mutableCardVariables['bg-color']}: ${cssVars[$tone]['bg-base']};
+    ${mutableCardVariables['fg-color']}: ${cssVars[$tone]['text-primary']};
+
+    /* enabled */
+    &[data-border] {
+      --input-box-shadow: ${focusRingBorderStyle({
+        color: cssVars[$tone]['border-base'],
+        width: input.border.width,
+      })};
+    }
 
-      /* enabled */
-      *:not(:disabled) + &[data-border] {
+    /* invalid */
+    *:not(:disabled):invalid + & {
+      ${mutableCardVariables['bg-color']}: ${cssVars.critical['bg-tint']};
+      ${mutableCardVariables['fg-color']}: ${cssVars.critical['text-primary']};
+
+      &[data-border] {
         --input-box-shadow: ${focusRingBorderStyle({
-          color: color.default.enabled.border,
+          color: cssVars.critical['border-base'],
           width: input.border.width,
         })};
       }
+    }
 
-      /* invalid */
-      *:not(:disabled):invalid + & {
-        --card-bg-color: ${color.invalid.enabled.bg};
-        --card-fg-color: ${color.invalid.enabled.fg};
-
-        &[data-border] {
-          --input-box-shadow: ${focusRingBorderStyle({
-            color: color.invalid.enabled.border,
-            width: input.border.width,
-          })};
-        }
+    /* focused */
+    *:not(:disabled):focus + & {
+      &[data-border] {
+        --input-box-shadow: ${focusRingStyle({
+          border: {color: cssVars[$tone]['border-base'], width: input.border.width},
+          focusRing,
+        })};
       }
 
-      /* focused */
-      *:not(:disabled):focus + & {
-        &[data-border] {
-          --input-box-shadow: ${focusRingStyle({
-            border: {color: color.default.enabled.border, width: input.border.width},
-            focusRing,
-          })};
-        }
-
-        &:not([data-border]) {
-          --input-box-shadow: ${focusRingStyle({focusRing})};
-        }
+      &:not([data-border]) {
+        --input-box-shadow: ${focusRingStyle({focusRing})};
       }
+    }
 
-      /* disabled */
-      *:disabled + & {
-        --card-bg-color: ${color.default.disabled.bg} !important;
-        --card-fg-color: ${color.default.disabled.fg} !important;
-
-        &[data-border] {
-          --input-box-shadow: ${focusRingBorderStyle({
-            color: color.default.disabled.border,
-            width: input.border.width,
-          })};
-        }
-      }
+    /* disabled */
+    *:disabled + & {
+      ${mutableCardVariables['bg-color']}: ${cssVars.default['bg-tint']} !important;
+     ${mutableCardVariables['fg-color']}: ${cssVars.default['text-primary']} !important;
+    }
 
-      /* readOnly */
-      *:read-only + & {
-        --card-bg-color: ${color.default.readOnly.bg} !important;
-        --card-fg-color: ${color.default.readOnly.fg} !important;
-      }
+    /* readOnly */
+    *:read-only + & {
+      ${mutableCardVariables['bg-color']}: ${cssVars.default['bg-tint']} !important;
+     ${mutableCardVariables['fg-color']}: ${cssVars.default['text-primary']} !important;
+    }
 
-      /* hovered */
-      @media (hover: hover) {
-        *:not(:disabled):not(:read-only):not(:invalid):hover + & {
-          --card-bg-color: ${color.default.hovered.bg};
-          --card-fg-color: ${color.default.hovered.fg};
-        }
-
-        *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + &[data-border] {
-          --input-box-shadow: ${focusRingBorderStyle({
-            color: color.default.hovered.border,
-            width: input.border.width,
-          })};
-        }
+    /* hovered */
+    @media (hover: hover) {
+
+      *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + &[data-border] {
+        --input-box-shadow: ${focusRingBorderStyle({
+          color: cssVars.default['border-base-hover'],
+          width: input.border.width,
+        })};
       }
     }
+    }
   `
 }

package/src/styles/margin/marginsStyle.test.ts

@@ -3,8 +3,7 @@
 import {studioTheme, Theme} from '../../theme'
 import {responsiveMarginStyle} from './marginStyle'
 
-const {color, ...restTheme} = studioTheme
-const theme: Theme = {sanity: {...restTheme, color: color.light.default}}
+const theme: Theme = {sanity: studioTheme}
 
 describe('styles/margin', () => {
   it('should 1', () => {

package/src/styles/padding/paddingStyle.test.ts

@@ -3,8 +3,7 @@
 import {studioTheme, Theme} from '../../theme'
 import {responsivePaddingStyle} from './paddingStyle'
 
-const {color, ...restTheme} = studioTheme
-const theme: Theme = {sanity: {...restTheme, color: color.light.default}}
+const theme: Theme = {sanity: studioTheme}
 
 describe('styles/padding', () => {
   it('should 1', () => {

package/src/styles/shadow/shadowStyle.ts

@@ -1,5 +1,5 @@
 import {EMPTY_RECORD} from '../../constants'
-import {BoxShadow, ThemeShadow} from '../../theme'
+import {BoxShadow, ThemeShadow, cssVars} from '../../theme'
 import {CSSObject} from '../../types/styled'
 import {rem, _responsive} from '../helpers'
 import {ThemeProps} from '../types'
@@ -12,10 +12,10 @@ function toBoxShadow(shadow: BoxShadow, color: string) {
 function shadowStyle(shadow: ThemeShadow | null): CSSObject {
   if (!shadow) return EMPTY_RECORD
 
-  const outline = `0 0 0 ${rem(1)} var(--card-shadow-outline-color)`
-  const umbra = toBoxShadow(shadow.umbra, 'var(--card-shadow-umbra-color)')
-  const penumbra = toBoxShadow(shadow.penumbra, 'var(--card-shadow-penumbra-color)')
-  const ambient = toBoxShadow(shadow.ambient, 'var(--card-shadow-ambient-color)')
+  const outline = `0 0 0 ${rem(1)} ${cssVars.default['base-shadow-outline-color']}`
+  const umbra = toBoxShadow(shadow.umbra, cssVars.default['base-shadow-umbra-color'])
+  const penumbra = toBoxShadow(shadow.penumbra, cssVars.default['base-shadow-penumbra-color'])
+  const ambient = toBoxShadow(shadow.ambient, cssVars.default['base-shadow-ambient-color'])
 
   return {boxShadow: `${outline}, ${umbra}, ${penumbra}, ${ambient}`}
 }

package/src/theme/__workshop__/color.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import {Box, Card, Tree, TreeItem, useRootTheme} from '@sanity/ui'
+import {Box, Card, Tree, TreeItem, cssVars, useRootTheme} from '@sanity/ui'
 
 export default function ColorStory() {
   const {theme} = useRootTheme()
@@ -48,7 +48,7 @@ function ColorPreview({name, value}: {name: string; value: string}) {
         radius={2}
         style={{
           backgroundColor: value,
-          boxShadow: 'inset 0 0 0 1px var(--card-shadow-outline-color)',
+          boxShadow: `inset 0 0 0 1px ${cssVars.default['base-shadow-outline-color']}`,
           display: 'inline-block',
           height: 17,
           width: 25,