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

package/src/primitives/_selectable/style.ts

@@ -1,13 +1,19 @@
 import {css} from 'styled-components'
 import {ThemeProps} from '../../styles'
-import {_colorVarsStyle} from '../../styles/colorVars'
-import {SelectableTone} from '../../types/selectable'
+import {
+  _colorVarStyleHover,
+  _selectableVarStyle,
+  _selectableVarStyleDisabled,
+} from '../../styles/colorVars'
+
+import {ThemeColorSchemeKey, ThemeColorToneKey, createCssVars, cssVars} from '../../theme'
 
 /**
  * @internal
  */
 export interface SelectableStyleProps {
-  $tone: SelectableTone
+  $tone: ThemeColorToneKey
+  $scheme: ThemeColorSchemeKey
 }
 
 export function selectableBaseStyle(): ReturnType<typeof css> {
@@ -35,43 +41,41 @@ export function selectableBaseStyle(): ReturnType<typeof css> {
 export function selectableColorStyle(
   props: SelectableStyleProps & ThemeProps,
 ): ReturnType<typeof css> {
-  const {$tone, theme} = props
-  const {base, muted, selectable} = theme.sanity.color
-  // @todo: remove use of `muted` here
-  const tone = selectable ? selectable[$tone] || selectable.default : muted[$tone] || muted.default
+  const {theme, $tone, $scheme} = props
 
   return css`
-    ${_colorVarsStyle(base, tone.enabled)}
+    ${$tone !== 'default' && createCssVars($scheme, theme.sanity.color.tones, $tone)}
+    ${_selectableVarStyle($tone)}
 
-    background-color: var(--card-bg-color);
-    color: var(--card-fg-color);
+    background-color: ${cssVars.mutable['bg-color']};
+    color: ${cssVars[$tone]['text-secondary']};
     outline: none;
 
-    /* &:is(button) */
+    /* &:is(button) - Looks like a button in default mode */
     &[data-as='button'] {
       &:disabled {
-        ${_colorVarsStyle(base, tone.disabled)}
+        ${_selectableVarStyleDisabled()}
       }
 
       &:not(:disabled) {
         &[aria-pressed='true'] {
-          ${_colorVarsStyle(base, tone.pressed)}
+          ${_colorVarStyleHover()}
         }
 
         &[data-selected],
         &[aria-selected='true'] > & {
-          ${_colorVarsStyle(base, tone.selected)}
+          ${_colorVarStyleHover()}
         }
 
         @media (hover: hover) {
           &:not([data-selected]) {
             &[data-hovered],
             &:hover {
-              ${_colorVarsStyle(base, tone.hovered)}
+              ${_colorVarStyleHover()}
             }
 
             &:active {
-              ${_colorVarsStyle(base, tone.pressed)}
+              ${_colorVarStyleHover()}
             }
           }
         }
@@ -81,27 +85,26 @@ export function selectableColorStyle(
     /* &:is(a) */
     &[data-as='a'] {
       &[data-disabled] {
-        ${_colorVarsStyle(base, tone.disabled)}
+        ${_selectableVarStyleDisabled()}
       }
 
       &:not([data-disabled]) {
         &[data-pressed] {
-          ${_colorVarsStyle(base, tone.pressed)}
+          ${_colorVarStyleHover()}
         }
 
         &[data-selected] {
-          ${_colorVarsStyle(base, tone.selected)}
+          ${_colorVarStyleHover()}
         }
 
         @media (hover: hover) {
           &:not([data-selected]) {
             &[data-hovered],
             &:hover {
-              ${_colorVarsStyle(base, tone.hovered)}
+              ${_colorVarStyleHover()}
             }
-
             &:active {
-              ${_colorVarsStyle(base, tone.pressed)}
+              ${_colorVarStyleHover()}
             }
           }
         }

package/src/primitives/avatar/avatar.tsx

@@ -2,10 +2,14 @@ import {forwardRef, useCallback, useEffect, useId, useMemo, useState} from 'reac
 import ReactIs from 'react-is'
 import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
-import {ThemeColorSpotKey, useTheme} from '../../theme'
+import {useTheme} from '../../theme'
+
+import {useToneContext} from '../../theme/toneContext/useToneContext'
 import {AvatarPosition, AvatarSize, AvatarStatus} from '../../types'
 import {Text} from '../text'
+import {spotColor} from './spotColors'
 import {avatarStyle, responsiveAvatarSizeStyle} from './styles'
+import {ThemeColorSpotKey} from './types'
 
 /**
  * @public
@@ -63,9 +67,10 @@ export const Avatar = forwardRef(function Avatar(
   const as = ReactIs.isValidElementType(asProp) ? asProp : 'div'
   const size = useArrayProp(sizeProp)
   const theme = useTheme()
-  const color = theme.sanity.color.spot[colorKey] || theme.sanity.color.spot.gray
+  const {scheme} = useToneContext()
+
+  const color = spotColor[colorKey][scheme].hex
 
-  // @todo: remove this
   const avatarSize = theme.sanity.avatar.sizes[size[0]] || theme.sanity.avatar.sizes[0]
   const _sizeRem = avatarSize.size
   const _radius = _sizeRem / 2

package/src/primitives/avatar/avatarCounter.tsx

@@ -3,6 +3,7 @@ import styled, {css} from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
 import {useArrayProp} from '../../hooks'
 import {rem, _responsive, ThemeProps} from '../../styles'
+import {cssVars} from '../../theme'
 import {AvatarSize} from '../../types'
 import {Text} from '../text'
 
@@ -32,11 +33,11 @@ function _avatarCounterBaseStyle(props: ThemeProps) {
     box-sizing: border-box;
     user-select: none;
     color: inherit;
-    color: var(--card-fg-color);
-    background: var(--card-bg-color);
+    color: ${cssVars.mutable['fg-color']};
+    background:  ${cssVars.mutable['bg-color']};
     box-shadow:
-      0 0 0 1px var(--card-bg-color),
-      inset 0 0 0 1.5px var(--card-hairline-hard-color);
+      0 0 0 1px  ${cssVars.mutable['bg-color']},
+      inset 0 0 0 1.5px ${cssVars.default['border-base']});
     padding: 0 ${rem(theme.sanity.space[2])};
 
     &:not([hidden]) {

package/src/primitives/avatar/spotColors.ts

@@ -0,0 +1,53 @@
+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/primitives/avatar/styles.ts

@@ -1,5 +1,6 @@
 import {rem, _responsive, ThemeProps} from '../../styles'
 import {focusRingStyle} from '../../styles/internal'
+import {cssVars} from '../../theme/lib/theme/color/cssVariables/createCssVars'
 import {CSSObject} from '../../types/styled'
 import {AvatarRootStyleProps, ResponsiveAvatarSizeStyleProps} from './types'
 
@@ -64,7 +65,7 @@ export function avatarRootStyle(props: AvatarRootStyleProps & ThemeProps): CSSOb
     position: 'relative',
     boxSizing: 'border-box',
     userSelect: 'none',
-    boxShadow: '0 0 0 1px var(--card-bg-color)',
+    boxShadow: `0 0 0 1px ${cssVars.mutable['bg-color']}`,
 
     '&[data-status="inactive"]': {
       opacity: 0.5,
@@ -123,14 +124,11 @@ export function responsiveAvatarSizeStyle(
   })
 }
 
-export function avatarInitialsStyle(props: ThemeProps): CSSObject {
-  const {theme} = props
-  const {base} = theme.sanity.color
-
+export function avatarInitialsStyle(): CSSObject {
   return {
     width: '100%',
     height: '100%',
-    color: base.fg,
+    color: cssVars.default['text-primary'],
     alignItems: 'center',
     justifyContent: 'center',
     textTransform: 'uppercase',
@@ -146,7 +144,7 @@ export function avatarInitialsStyle(props: ThemeProps): CSSObject {
 function avatarBgStrokeStyle(): CSSObject {
   return {
     strokeWidth: '4px',
-    stroke: 'var(--card-bg-color)',
+    stroke: cssVars.mutable['bg-color'],
   }
 }
 

package/src/primitives/avatar/types.ts

@@ -13,3 +13,17 @@ export interface AvatarRootStyleProps {
 export interface ResponsiveAvatarSizeStyleProps {
   $size: AvatarSize[]
 }
+
+/**
+ * @public
+ */
+export type ThemeColorSpotKey =
+  | 'gray'
+  | 'blue'
+  | 'purple'
+  | 'magenta'
+  | 'red'
+  | 'orange'
+  | 'yellow'
+  | 'green'
+  | 'cyan'

package/src/primitives/badge/badge.tsx

@@ -4,7 +4,7 @@ import {useArrayProp} from '../../hooks'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
 import {BadgeMode, BadgeTone} from '../../types'
 import {Box, BoxProps} from '../box'
-import {Label} from '../label'
+import {Text} from '../text'
 import {ResponsiveRadiusProps} from '../types'
 import {badgeStyle} from './styles'
 import {BadgeStyleProps} from './types'
@@ -33,7 +33,7 @@ export const Badge = forwardRef(function Badge(
 ) {
   const {
     children,
-    fontSize,
+    fontSize = 1,
     mode = 'default',
     padding = 1,
     radius = 2,
@@ -51,7 +51,9 @@ export const Badge = forwardRef(function Badge(
       padding={useArrayProp(padding)}
       ref={ref}
     >
-      <Label size={fontSize}>{children}</Label>
+      <Text size={fontSize} weight="medium">
+        {children}
+      </Text>
     </Root>
   )
 })

package/src/primitives/badge/styles.ts

@@ -1,16 +1,15 @@
-import {ThemeProps} from '../../styles'
+import {mutableCardVariables} from '../../theme/lib/theme/color/cssVariables/cardVariables'
+import {cssVars} from '../../theme/lib/theme/color/cssVariables/createCssVars'
 import {CSSObject} from '../../types/styled'
 import {BadgeStyleProps} from './types'
 
-export function badgeStyle(props: BadgeStyleProps & ThemeProps): CSSObject {
-  const {$mode, $tone, theme} = props
-  const palette = theme.sanity.color[$mode === 'outline' ? 'muted' : 'solid']
-  const color = palette[$tone] || palette.default
+export function badgeStyle(props: BadgeStyleProps): CSSObject {
+  const {$mode, $tone} = props
 
   return {
-    backgroundColor: color.enabled.bg,
-    color: color.enabled.fg,
-    boxShadow: `inset 0 0 0 1px ${color.enabled.border}`,
+    backgroundColor: $mode === 'outline' ? cssVars[$tone]['bg-base'] : cssVars[$tone]['bg-tint'],
+    [mutableCardVariables['fg-color']]: cssVars[$tone]['text-secondary'],
+    boxShadow: $mode === 'outline' ? `inset 0 0 0 1px ${cssVars[$tone]['border-base']}` : undefined,
     cursor: 'default',
 
     '&:not([hidden])': {

package/src/primitives/box/__workshop__/responsive.tsx

@@ -1,4 +1,4 @@
-import {Box, Text} from '@sanity/ui'
+import {Box, Text, cssVars} from '@sanity/ui'
 
 export default function ResponsiveStory() {
   return (
@@ -9,7 +9,7 @@ export default function ResponsiveStory() {
         flex={[1, 2, 3, 4, 5, 6, 7]}
         padding={3}
         sizing={['content', 'border', 'content', 'border', 'content', 'border', 'content']}
-        style={{outline: '1px solid var(--card-border-color)'}}
+        style={{outline: `1px solid ${cssVars.default['border-base']}`}}
       >
         <Text align="center" muted>
           This is a box with responsive props

package/src/primitives/button/button.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {ThemeProps} from '../../styles'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
-import {useTheme} from '../../theme'
+import {cssVars, useTheme} from '../../theme'
 import {ButtonMode, ButtonTextAlign, ButtonTone, FlexJustify} from '../../types'
 import {Box} from '../box'
 import {Flex} from '../flex'
@@ -49,7 +49,7 @@ const LoadingBox = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: var(--card-bg-color);
+  background-color: ${cssVars.mutable['bg-color']};
   border-radius: inherit;
   z-index: 1;
   box-shadow: inherit;

package/src/primitives/button/styles.ts

@@ -1,7 +1,9 @@
 import {css} from 'styled-components'
 import {ThemeProps} from '../../styles'
-import {_colorVarsStyle} from '../../styles/colorVars'
 import {focusRingBorderStyle, focusRingStyle} from '../../styles/internal'
+import {mutableCardVariables} from '../../theme/lib/theme/color/cssVariables/cardVariables'
+import {cssVars} from '../../theme/lib/theme/color/cssVariables/createCssVars'
+import {getToneCssVar} from '../../theme/lib/theme/color/cssVariables/tones'
 import {ButtonMode, ButtonTone} from '../../types'
 import {CSSObject} from '../../types/styled'
 
@@ -54,21 +56,65 @@ function combineBoxShadow(...boxShadows: (string | undefined)[]): string {
 export function buttonColorStyles(
   props: {$mode: ButtonMode; $tone: ButtonTone} & ThemeProps,
 ): CSSObject[] {
-  const {$mode, theme} = props
+  const {$mode, theme, $tone} = props
   const {focusRing} = theme.sanity.button
   const shadow = props.$mode !== 'bleed'
-  const base = theme.sanity.color.base
-  const mode = theme.sanity.color.button[$mode] || theme.sanity.color.button.default
-  const color = mode[props.$tone] || mode.default
-  const border = {width: buttonTheme.border.width, color: 'var(--card-border-color)'}
+  const border = {
+    width: buttonTheme.border.width,
+    color:
+      $mode === 'default'
+        ? cssVars[$tone]['bg-accent']
+        : $mode === 'ghost'
+        ? cssVars[$tone]['border-base']
+        : cssVars[$tone]['bg-base'],
+  }
 
   return [
-    _colorVarsStyle(base, color.enabled),
     {
-      backgroundColor: 'var(--card-bg-color)',
-      color: 'var(--card-fg-color)',
+      // This is going to be used by the text elements inside the button
+      [mutableCardVariables['fg-color']]:
+        $mode === 'default' ? cssVars[$tone]['base-text-color'] : cssVars[$tone]['text-primary'],
+      [mutableCardVariables['muted-fg-color']]:
+        $mode === 'default' ? cssVars[$tone]['base-text-color'] : cssVars[$tone]['text-secondary'],
+      [mutableCardVariables['icon-color']]:
+        $mode === 'default' ? cssVars[$tone]['icon-inverted'] : cssVars[$tone]['icon-default'],
+      [mutableCardVariables['bg-color']]:
+        $mode === 'default' ? cssVars[$tone]['bg-accent'] : cssVars[$tone]['bg-base'],
+
+      // Override the default variables for elements used inside buttons
+      [getToneCssVar('default', 'bg-tint-code')]:
+        $mode === 'default' ? cssVars[$tone]['bg-accent'] : cssVars[$tone]['bg-tint-code'],
+      ...($mode === 'default' && {
+        [getToneCssVar('default', 'text-code')]: cssVars[$tone]['base-text-color'],
+        [getToneCssVar('default', 'text-code')]: cssVars[$tone]['base-text-color'],
+        [getToneCssVar('default', 'text-link')]: cssVars[$tone]['base-text-color'],
+        [getToneCssVar('default', 'text-accent')]: cssVars[$tone]['base-text-color'],
+      }),
+
+      '&:disabled, &[data-disabled="true"]': {
+        /* Updates the variables for the */
+        [mutableCardVariables['fg-color']]: cssVars.primary['text-inactive'],
+        [mutableCardVariables['muted-fg-color']]: cssVars.primary['text-inactive'],
+        [mutableCardVariables['icon-color']]: cssVars.primary['border-base'],
+        [mutableCardVariables['bg-color']]:
+          $mode === 'default' ? cssVars.primary['bg-tint'] : cssVars.default['bg-base'],
+      },
+    },
+    {
+      backgroundColor:
+        $mode === 'default' ? cssVars[$tone]['bg-accent'] : cssVars[$tone]['bg-base'],
+      color:
+        $mode === 'default' ? cssVars[$tone]['base-text-color'] : cssVars[$tone]['text-primary'],
       boxShadow: focusRingBorderStyle(border),
-      '&:disabled, &[data-disabled="true"]': _colorVarsStyle(base, color.disabled),
+      '&:disabled, &[data-disabled="true"]': {
+        backgroundColor:
+          $mode === 'default' ? cssVars.primary['bg-tint'] : cssVars.default['bg-base'],
+        color: cssVars.primary['text-inactive'],
+        boxShadow: focusRingBorderStyle({
+          ...border,
+          color: $mode === 'default' ? cssVars.primary['bg-tint'] : cssVars.primary['border-base'],
+        }),
+      },
       "&:not([data-disabled='true'])": {
         boxShadow: combineBoxShadow(
           focusRingBorderStyle(border),
@@ -76,8 +122,8 @@ export function buttonColorStyles(
         ),
         '&:focus': {
           boxShadow: focusRingStyle({
-            base,
-            border: {width: 2, color: base.bg},
+            base: {bg: cssVars.positive['border-accent']},
+            border: {width: 2, color: cssVars.default['bg-base']},
             focusRing,
           }),
         },
@@ -88,11 +134,31 @@ export function buttonColorStyles(
           ),
         },
         '@media (hover: hover)': {
-          '&:hover': _colorVarsStyle(base, color.hovered),
-          '&:active': _colorVarsStyle(base, color.pressed),
-          '&[data-hovered]': _colorVarsStyle(base, color.hovered),
+          '&:hover': {
+            backgroundColor:
+              $mode === 'default'
+                ? cssVars[$tone]['bg-accent-hover']
+                : cssVars[$tone]['bg-base-hover'],
+          },
+          '&:active': {
+            backgroundColor:
+              $mode === 'default'
+                ? cssVars[$tone]['bg-accent-active']
+                : cssVars[$tone]['bg-base-active'],
+          },
+          '&[data-hovered]': {
+            backgroundColor:
+              $mode === 'default'
+                ? cssVars[$tone]['bg-accent-hover']
+                : cssVars[$tone]['bg-base-hover'],
+          },
+        },
+        '&[data-selected]': {
+          backgroundColor:
+            $mode === 'default'
+              ? cssVars[$tone]['bg-accent-active']
+              : cssVars[$tone]['bg-base-active'],
         },
-        '&[data-selected]': _colorVarsStyle(base, color.pressed),
       },
     },
     theme.sanity.styles?.button?.root,

package/src/primitives/card/__workshop__/selected.tsx

@@ -7,31 +7,30 @@ import {
   Inline,
   Stack,
   Text,
-  Theme,
   ThemeColorToneKey,
   useRootTheme,
 } from '@sanity/ui'
 import {useBoolean} from '@sanity/ui-workshop'
 import styled, {css} from 'styled-components'
+import {mutableCardVariables} from '../../../theme/lib/theme/color/cssVariables/cardVariables'
+import {cssVars} from '../../../theme/lib/theme/color/cssVariables/createCssVars'
 
 const TextWithTone = styled(Text)<{$tone: ThemeColorToneKey}>(({
   $tone,
-  theme,
 }: {
   $tone: ThemeColorToneKey
-  theme: Theme
 }) => {
-  const tone = theme.sanity.color.solid[$tone]
-
   return css`
     &:not([data-selected]) {
-      --card-fg-color: ${tone ? tone.enabled.bg : undefined};
-      --card-muted-fg-color: ${tone ? tone.enabled.bg : undefined};
+      ${mutableCardVariables['fg-color']}: ${$tone ? cssVars[$tone]['text-secondary'] : undefined};
+      ${mutableCardVariables['muted-fg-color']} ${$tone
+        ? cssVars[$tone]['text-secondary']
+        : undefined};
     }
 
     [data-ui='Card']:disabled & {
-      --card-fg-color: inherit;
-      --card-muted-fg-color: inherit;
+      ${mutableCardVariables['fg-color']}: inherit;
+      ${mutableCardVariables['muted-fg-color']} inherit;
     }
   `
 })

package/src/primitives/card/card.tsx

@@ -10,7 +10,9 @@ import {
   responsiveShadowStyle,
   ResponsiveShadowStyleProps,
 } from '../../styles/internal'
-import {ThemeColorProvider, ThemeColorSchemeKey, useRootTheme} from '../../theme'
+import {ThemeColorName, ThemeColorSchemeKey} from '../../theme'
+import {ToneProvider} from '../../theme/toneContext/toneProvider'
+import {useToneContext} from '../../theme/toneContext/useToneContext'
 import {CardTone} from '../../types'
 import {Box, BoxProps} from '../box'
 import {ResponsiveBorderProps, ResponsiveRadiusProps, ResponsiveShadowProps} from '../types'
@@ -38,6 +40,12 @@ export interface CardProps
   pressed?: boolean
   scheme?: ThemeColorSchemeKey
   tone?: CardTone
+  /**
+   * @internal
+   * Used by the popover, as it creates a new html element that it's ouside of the previous scope of the card.
+   * So if it's inheriting styles from the parent, it needs to create a new cars context
+   */
+  updateCssVars?: boolean
 }
 
 const Root = styled(Box)<
@@ -47,6 +55,29 @@ const Root = styled(Box)<
     ResponsiveShadowStyleProps
 >(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle)
 
+const Wrapper = ({
+  shouldAddContext,
+  scheme,
+  tone,
+  children,
+}: {
+  shouldAddContext: boolean
+  scheme: ThemeColorSchemeKey
+  tone: ThemeColorName
+  children: React.ReactElement
+}): React.ReactElement => {
+  // Avoid creating a new react context if the card is just inheriting styles from the parent.
+  if (shouldAddContext) {
+    return (
+      <ToneProvider scheme={scheme} tone={tone}>
+        {children}
+      </ToneProvider>
+    )
+  }
+
+  return children
+}
+
 /**
  * @public
  */
@@ -65,24 +96,28 @@ export const Card = forwardRef(function Card(
     borderLeft,
     pressed,
     radius = 0,
-    scheme,
+    scheme: schemeProp,
     selected,
     shadow,
     tone: toneProp = 'default',
+    updateCssVars = false,
     ...restProps
   } = props
 
   const as = isValidElementType(asProp) ? asProp : 'div'
-  const rootTheme = useRootTheme()
-  const tone = toneProp === 'inherit' ? rootTheme.tone : toneProp
+  const toneContext = useToneContext()
+  const tone = toneProp === 'inherit' ? toneContext.tone : toneProp
+  const scheme = schemeProp ?? toneContext.scheme
+  const shouldAddContext = scheme !== toneContext.scheme || tone !== toneContext.tone
 
   return (
-    <ThemeColorProvider scheme={scheme} tone={tone}>
+    <Wrapper shouldAddContext={shouldAddContext} scheme={scheme} tone={tone}>
       <Root
         data-as={typeof as === 'string' ? as : undefined}
-        data-scheme={rootTheme.scheme}
+        data-scheme={scheme}
         data-ui="Card"
         data-tone={tone}
+        $scheme={scheme ?? toneContext.scheme}
         {...restProps}
         $border={useArrayProp(border)}
         $borderTop={useArrayProp(borderTop)}
@@ -94,6 +129,7 @@ export const Card = forwardRef(function Card(
         $radius={useArrayProp(radius)}
         $shadow={useArrayProp(shadow)}
         $tone={tone}
+        $updateCssVars={updateCssVars || shouldAddContext}
         data-checkered={checkered ? '' : undefined}
         data-pressed={pressed ? '' : undefined}
         data-selected={selected ? '' : undefined}
@@ -101,6 +137,6 @@ export const Card = forwardRef(function Card(
         ref={ref}
         selected={selected}
       />
-    </ThemeColorProvider>
+    </Wrapper>
   )
 })