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

package/src/primitives/textArea/textArea.tsx

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

package/src/primitives/textInput/textInput.tsx

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

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

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

package/src/primitives/tooltip/tooltipArrow.tsx

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

package/src/styles/border/borderStyle.ts

@@ -1,10 +1,9 @@
-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 ${cssVars.default['border-base']}`
+const BORDER_VALUE = '1px solid var(--card-border-color)'
 
 export function responsiveBorderStyle(): Array<
   (props: ResponsiveBorderStyleProps & ThemeProps) => CSSObject[]

package/src/styles/colorVars/colorVarsStyle.ts

@@ -1,84 +1,43 @@
-import {ThemeColorToneKey, cssVars} from '../../theme'
-import {mutableCardVariables} from '../../theme/lib/theme/color/cssVariables/cardVariables'
-import {getToneCssVar} from '../../theme/lib/theme/color/cssVariables/tones'
+import {ThemeColorBase, ThemeColorGenericState} from '../../theme'
 import {CSSObject} from '../../types/styled'
 
 /**
  * @internal
- * Card overrides in disabled states
  */
-export function _colorVarStyleDisabled(checkered = false): CSSObject {
+export function _colorVarsStyle(
+  base: ThemeColorBase,
+  color: ThemeColorGenericState,
+  checkered = false,
+): CSSObject {
   return {
-    [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'],
+    // 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,
 
-    [mutableCardVariables['fg-color']]: cssVars.primary['text-secondary'],
-    [mutableCardVariables['muted-fg-color']]: cssVars.primary['text-secondary'],
-    [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%)`
+    // 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%)`
       : undefined,
-  }
-}
-
-/**
- * @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'],
-    [getToneCssVar('default', 'bg-tint')]: cssVars.default['bg-base-active'],
-  }
-}
-
-/**
- * @internal
- * Card overrides in active / pressed states
- */
-export function _colorVarStyleActive(): CSSObject {
-  return {
-    [mutableCardVariables['bg-color']]: cssVars.default['bg-base-active'],
-  }
-}
+    '--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
- * Selectable needs to redefine bg-color and fg-color
- */
-export function _selectableVarStyle(tone: ThemeColorToneKey): CSSObject {
-  return {
-    [mutableCardVariables['bg-color']]: 'inherit',
-    [mutableCardVariables['fg-color']]:
-      tone === 'default' ? cssVars.default['text-primary'] : 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,
+    // @todo: deprecate
+    '--card-link-color': color.link?.fg,
+    '--card-hairline-soft-color': color.border,
+    '--card-hairline-hard-color': color.border,
   }
 }

package/src/styles/focusRing/index.ts

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

package/src/styles/input/textInputStyle.ts

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

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

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

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

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

package/src/styles/shadow/shadowStyle.ts

@@ -1,5 +1,5 @@
 import {EMPTY_RECORD} from '../../constants'
-import {BoxShadow, ThemeShadow, cssVars} from '../../theme'
+import {BoxShadow, ThemeShadow} 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)} ${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'])
+  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)')
 
   return {boxShadow: `${outline}, ${umbra}, ${penumbra}, ${ambient}`}
 }