@sanity/ui 3.0.0-static.15 → 3.0.0-static.17

package/src/css/primitives/box/types.ts

@@ -16,6 +16,7 @@ import {
   PointerEventsStyleProps,
   PositionStyleProps,
   RadiusStyleProps,
+  TextAlignStyleProps,
   WidthStyleProps,
 } from '../../aspects'
 import {ResponsiveProp} from '../../types'
@@ -42,6 +43,7 @@ export interface BoxStyleProps
     PointerEventsStyleProps,
     PositionStyleProps,
     RadiusStyleProps,
+    TextAlignStyleProps,
     WidthStyleProps {
   muted?: boolean
   outline?: 'none'

package/src/css/primitives/button/button.style.ts

@@ -3,7 +3,6 @@ import {THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
 import {Style, StyleRules} from '../../types'
 import {varNames} from '../../varNames'
 import {vars} from '../../vars'
-import {toneMap, variantMap} from './_constants'
 
 const primitive: StyleRules = {
   '.button': {
@@ -62,9 +61,11 @@ for (const tone of THEME_COLOR_STATE_TONES) {
   const tinted = vars.color.tinted[tone]
 
   // mode: default
-  primitive[`.button.${variantMap.default}.${toneMap[tone]}`] = {
+  primitive[`.button[data-mode="default"][data-tone="${tone}"]`] = {
     [varNames.color.bg]: solid.bg[0],
     [varNames.color.border]: solid.border[1],
+    [varNames.color.code.bg]: solid.bg[1],
+    [varNames.color.code.fg]: solid.fg[4],
     [varNames.color.fg]: solid.fg[0],
     [varNames.color.muted.bg]: solid.bg[1],
     [varNames.color.muted.fg]: solid.fg[4],
@@ -74,6 +75,8 @@ for (const tone of THEME_COLOR_STATE_TONES) {
       '&:not([data-disabled]):hover': {
         [varNames.color.bg]: solid.bg[1],
         [varNames.color.border]: solid.border[2],
+        [varNames.color.code.bg]: solid.bg[2],
+        [varNames.color.code.fg]: solid.fg[4],
         [varNames.color.fg]: solid.fg[0],
         [varNames.color.muted.bg]: solid.bg[2],
         [varNames.color.muted.fg]: solid.fg[4],
@@ -82,6 +85,8 @@ for (const tone of THEME_COLOR_STATE_TONES) {
       '&:not([data-disabled]):active': {
         [varNames.color.bg]: solid.bg[2],
         [varNames.color.border]: solid.border[3],
+        [varNames.color.code.bg]: solid.bg[3],
+        [varNames.color.code.fg]: solid.fg[4],
         [varNames.color.fg]: solid.fg[0],
         [varNames.color.muted.bg]: solid.bg[3],
         [varNames.color.muted.fg]: solid.fg[4],
@@ -90,6 +95,8 @@ for (const tone of THEME_COLOR_STATE_TONES) {
       '&:not([data-disabled])[data-selected]': {
         [varNames.color.bg]: solid.bg[2],
         [varNames.color.border]: solid.border[3],
+        [varNames.color.code.bg]: solid.bg[3],
+        [varNames.color.code.fg]: solid.fg[4],
         [varNames.color.fg]: solid.fg[0],
         [varNames.color.muted.bg]: solid.bg[3],
         [varNames.color.muted.fg]: solid.fg[4],
@@ -117,10 +124,12 @@ for (const tone of THEME_COLOR_STATE_TONES) {
   }
 
   // mode: ghost
-  primitive[`.button.${variantMap.ghost}.${toneMap[tone]}`] = {
+  primitive[`.button[data-mode="ghost"][data-tone="${tone}"]`] = {
     [varNames.color.bg]: tinted.bg[1],
-    [varNames.color.border]: tinted.border[0],
+    [varNames.color.border]: tinted.border[1],
     [varNames.color.fg]: tinted.fg[2],
+    [varNames.color.code.bg]: tinted.bg[2],
+    [varNames.color.code.fg]: tinted.fg[4],
     [varNames.color.muted.bg]: tinted.bg[2],
     [varNames.color.muted.fg]: tinted.fg[4],
     '--button-box-shadow': `inset 0 0 0 var(--button-border-width) var(--color-border)`,
@@ -128,16 +137,19 @@ for (const tone of THEME_COLOR_STATE_TONES) {
     '@nest': {
       '&:not([data-disabled]):hover': {
         [varNames.color.bg]: tinted.bg[2],
-        [varNames.color.border]: tinted.border[1],
+        [varNames.color.border]: tinted.border[2],
+        [varNames.color.code.bg]: tinted.bg[3],
+        [varNames.color.code.fg]: tinted.fg[3],
         [varNames.color.fg]: tinted.fg[1],
         [varNames.color.muted.bg]: tinted.bg[3],
         [varNames.color.muted.fg]: tinted.fg[3],
-        // '--button-box-shadow': `inset 0 0 0 var(--button-border-width) var(--color-border)`,
       },
 
       '&:not([data-disabled]):active': {
         [varNames.color.bg]: tinted.bg[3],
-        [varNames.color.border]: tinted.border[2],
+        [varNames.color.border]: tinted.border[3],
+        [varNames.color.code.bg]: tinted.bg[4],
+        [varNames.color.code.fg]: tinted.fg[3],
         [varNames.color.fg]: tinted.fg[1],
         [varNames.color.muted.bg]: tinted.bg[4],
         [varNames.color.muted.fg]: tinted.fg[3],
@@ -146,7 +158,9 @@ for (const tone of THEME_COLOR_STATE_TONES) {
 
       '&:not([data-disabled])[data-selected]': {
         [varNames.color.bg]: tinted.bg[3],
-        [varNames.color.border]: tinted.border[2],
+        [varNames.color.border]: tinted.border[3],
+        [varNames.color.code.bg]: tinted.bg[4],
+        [varNames.color.code.fg]: tinted.fg[3],
         [varNames.color.fg]: tinted.fg[1],
         [varNames.color.muted.bg]: tinted.bg[4],
         [varNames.color.muted.fg]: tinted.fg[3],
@@ -175,7 +189,7 @@ for (const tone of THEME_COLOR_STATE_TONES) {
   }
 
   // mode: bleed
-  primitive[`.button.${variantMap.bleed}.${toneMap[tone]}`] = {
+  primitive[`.button[data-mode="bleed"][data-tone="${tone}"]`] = {
     'boxShadow': 'none',
     [varNames.color.bg]: tinted.bg[0],
     [varNames.color.border]: tinted.border[1],

package/src/css/primitives/button/button.ts

@@ -1,21 +1,10 @@
 import {_comp} from '../../_comp'
 import {display, flexItem, radius, width} from '../../aspects'
-import {toneMap, variantMap} from './_constants'
 import {ButtonStyleProps} from './types'
 
 /** @public */
 export function button(props: ButtonStyleProps): string | undefined {
-  const {mode, tone} = props
-
-  return _comp(
-    'button',
-    variantMap[mode ?? 'default'],
-    toneMap[tone ?? 'default'],
-    display(props),
-    flexItem(props),
-    radius(props),
-    width(props),
-  )
+  return _comp('button', display(props), flexItem(props), radius(props), width(props))
 }
 
 /** @public */

package/src/css/primitives/button/types.ts

@@ -1,5 +1,3 @@
-import {ThemeColorButtonModeKey, ThemeColorStateToneKey} from '@sanity/ui/theme'
-
 import {
   DisplayStyleProps,
   FlexItemStyleProps,
@@ -12,7 +10,4 @@ export interface ButtonStyleProps
   extends DisplayStyleProps,
     FlexItemStyleProps,
     RadiusStyleProps,
-    WidthStyleProps {
-  mode?: ThemeColorButtonModeKey
-  tone?: ThemeColorStateToneKey
-}
+    WidthStyleProps {}

package/src/css/primitives/card/card.style.ts

@@ -45,6 +45,13 @@ const primitive: StyleRules = {
         whiteSpace: 'inherit',
       },
 
+      '&[data-checkered]': {
+        backgroundSize: `${vars.space[3]} ${vars.space[3]}` as string,
+        backgroundPosition: 'top left',
+        backgroundImage:
+          `repeating-conic-gradient(${vars.color.bg} 0% 25%, ${vars.color.muted.bg} 0% 50%)` as string,
+      },
+
       'a&:not([data-disabled]):hover, button&:not([data-disabled]):hover': {
         [varNames.color.bg]: vars.color.tinted.default.bg[1],
         [varNames.color.border]: vars.color.tinted.default.border[3],
@@ -87,29 +94,13 @@ const primitive: StyleRules = {
         [varNames.color.muted.fg]: vars.color.solid.primary.fg[3],
       },
 
-      // '&:not([data-disabled]):focus': {
-      //   '--color-bg': vars.color.solid.bg[0],
-      //   '--color-border': vars.color.solid.border[1],
-      //   '--color-fg': vars.color.solid.fg[1],
-      //   '--color-muted-bg': vars.color.solid.bg[1],
-      //   '--color-muted-fg': vars.color.solid.fg[3],
-      // },
-
       'a&[data-disabled], button&[data-disabled]': {
-        [varNames.color.bg]: vars.color.tinted.default.bg[2],
-        [varNames.color.border]: vars.color.tinted.default.border[4],
-        [varNames.color.fg]: vars.color.tinted.default.fg[0],
-        [varNames.color.muted.bg]: vars.color.tinted.default.bg[3],
-        [varNames.color.muted.fg]: vars.color.tinted.default.fg[4],
+        [varNames.color.bg]: vars.color.tinted.default.bg[0],
+        [varNames.color.border]: vars.color.tinted.default.border[1],
+        [varNames.color.fg]: vars.color.tinted.default.border[3],
+        [varNames.color.muted.bg]: vars.color.tinted.default.bg[1],
+        [varNames.color.muted.fg]: vars.color.tinted.default.border[1],
       },
-
-      // '&[data-disabled]': {
-      //   '--color-bg': vars.color.tinted.bg[0],
-      //   '--color-border': vars.color.tinted.border[1],
-      //   '--color-fg': vars.color.tinted.border[4],
-      //   '--color-muted-bg': vars.color.tinted.bg[1],
-      //   '--color-muted-fg': vars.color.tinted.border[4],
-      // },
     },
   },
 }

package/src/css/primitives/heading/heading.ts

@@ -1,6 +1,6 @@
 import {_comp} from '../../_comp'
 import {_resp} from '../../_resp'
-import {flexItem, font} from '../../aspects'
+import {flexItem, font, textAlign} from '../../aspects'
 import {HeadingStyleProps} from './types'
 
 /** @public */
@@ -13,5 +13,6 @@ export function heading(props: HeadingStyleProps): string | undefined {
     props.muted && 'heading-muted',
     _resp(`heading`, props.size),
     flexItem(props),
+    textAlign({textAlign: props.align}),
   )
 }

package/src/css/primitives/heading/types.ts

@@ -1,4 +1,4 @@
-import {FlexItemStyleProps, FontStyleProps} from '../../aspects'
+import {FlexItemStyleProps, FontStyleProps, TextAlignStyleProps} from '../../aspects'
 import {ResponsiveProp} from '../../types'
 
 /** @public */
@@ -7,6 +7,7 @@ export type HeadingSize = number
 /** @public */
 export interface HeadingStyleProps extends FontStyleProps, FlexItemStyleProps {
   accent?: boolean
+  align?: TextAlignStyleProps['textAlign']
   muted?: boolean
   size?: ResponsiveProp<HeadingSize>
 }

package/src/css/primitives/kbd/kbd.style.ts

@@ -1,13 +1,10 @@
 import {Style, StyleRules} from '../../types'
+import {vars} from '../../vars'
 
 const primitive: StyleRules = {
   '.kbd': {
-    // '--color-bg': 'var(--color-tinted-default-bg-1)',
-    // '--color-border': 'var(--color-tinted-default-border-2)',
-    // '--color-fg': 'var(--color-tinted-default-fg-3)',
-
-    'boxShadow': 'inset 0 0 0 0.5px var(--color-tinted-default-border-3)',
-    'background': 'var(--color-muted-bg)',
+    'boxShadow': `inset 0 0 0 0.5px ${vars.color.border}`,
+    'backgroundColor': vars.color.muted.bg,
     'font': 'inherit',
     'verticalAlign': 'top',
 

package/src/css/primitives/label/label.ts

@@ -1,6 +1,6 @@
 import {_comp} from '../../_comp'
 import {_resp} from '../../_resp'
-import {font} from '../../aspects'
+import {font, textAlign} from '../../aspects'
 import {LabelStyleProps} from './types'
 
 /** @public */
@@ -12,5 +12,6 @@ export function label(props: LabelStyleProps): string | undefined {
     props.accent && 'label-accent',
     props.muted && 'label-muted',
     _resp(`label`, props.size),
+    textAlign({textAlign: props.align}),
   )
 }

package/src/css/primitives/label/types.ts

@@ -1,6 +1,6 @@
 import {FontLabelSize} from '@sanity/ui/theme'
 
-import {FontStyleProps} from '../../aspects'
+import {FontStyleProps, TextAlignStyleProps} from '../../aspects'
 import {ResponsiveProp} from '../../types'
 
 /**
@@ -12,6 +12,7 @@ export type LabelSize = number
 /** @public */
 export interface LabelStyleProps extends FontStyleProps {
   accent?: boolean
+  align?: TextAlignStyleProps['textAlign']
   muted?: boolean
   size?: ResponsiveProp<FontLabelSize>
 }

package/src/css/primitives/text/text.style.ts

@@ -39,13 +39,8 @@ const primitive: StyleRules = {
     },
   },
 
-  // 'text-accent': {
-  //   '--color-fg': 'var(--color-accent-fg)',
-  // },
-
   '.text-muted': {
     color: 'var(--color-muted-fg)',
-    // '--color-fg': 'var(--color-tinted-default-fg-4)',
   },
 }
 

package/src/css/primitives/text/text.ts

@@ -1,6 +1,6 @@
 import {_comp} from '../../_comp'
 import {_resp} from '../../_resp'
-import {flexItem, font} from '../../aspects'
+import {flexItem, font, textAlign} from '../../aspects'
 import {TextStyleProps} from './types'
 
 /** @public */
@@ -13,5 +13,6 @@ export function text(props: TextStyleProps): string | undefined {
     props.accent && 'text-accent',
     props.muted && 'text-muted',
     _resp(`text`, props.size),
+    textAlign({textAlign: props.align}),
   )
 }

package/src/css/primitives/text/types.ts

@@ -1,4 +1,4 @@
-import {FlexItemStyleProps, FontStyleProps} from '../../aspects'
+import {FlexItemStyleProps, FontStyleProps, TextAlignStyleProps} from '../../aspects'
 import {ResponsiveProp} from '../../types'
 
 /** @public */
@@ -10,6 +10,7 @@ export interface TextStyleProps extends FlexItemStyleProps, FontStyleProps {
    * @deprecated Will be removed in next major version
    */
   accent?: boolean
+  align?: TextAlignStyleProps['textAlign']
   muted?: boolean
   size?: ResponsiveProp<TextSize>
 }

package/src/css/primitives/textInput/textInput.style.ts

@@ -42,126 +42,7 @@ const primitive: StyleRules = {
     },
   },
 
-  '.text-input-presentation': {
-    // position: 'absolute',
-    // top: 0,
-    // left: 0,
-    // right: 0,
-    // bottom: 0,
-    // display: 'block',
-    // pointerEvents: 'none',
-    // zIndex: 0,
-    // backgroundColor: 'var(--input-bg-color)',
-    // 'boxShadow': 'var(--input-box-shadow)',
-    // '--input-border-color': 'var(--color-input-default-enabled-border)',
-    // '--input-border-color': 'var(--color-tinted-default-border-1)',
-    // '--input-box-shadow': 'inset 0 0 0 1px var(--input-border-color)',
-    // border-top-left-radius: ${$hasPrefix ? 0 : undefined};
-    // border-bottom-left-radius: ${$hasPrefix ? 0 : undefined};
-    // border-top-right-radius: ${$hasSuffix ? 0 : undefined};
-    // border-bottom-right-radius: ${$hasSuffix ? 0 : undefined};
-    // '@nest': {
-    //   'input:hover + &': {
-    //     '--input-border-color': 'var(--color-tinted-default-border-2)',
-    //   },
-    //   'input:focus + &': {
-    //     '--input-border-color': 'var(--color-tinted-default-border-2)',
-    //   },
-    // },
-    // &[data-scheme='${$scheme}'][data-tone='${$tone}'] {
-    //   --card-bg-color: ${color.input.default.enabled.bg};
-    //   --card-fg-color: ${color.input.default.enabled.fg};
-    //   /* enabled */
-    //   *:not(:disabled) + &[data-border] {
-    //     --input-box-shadow: ${focusRingBorderStyle({
-    //       color: color.input.default.enabled.border,
-    //       width: input.border.width,
-    //     })};
-    //   }
-    //   /* invalid */
-    //   *:not(:disabled):invalid + & {
-    //     --card-bg-color: ${color.input.invalid.enabled.bg};
-    //     --card-fg-color: ${color.input.invalid.enabled.fg};
-    //     &[data-border] {
-    //       --input-box-shadow: ${focusRingBorderStyle({
-    //         color: color.input.invalid.enabled.border,
-    //         width: input.border.width,
-    //       })};
-    //     }
-    //   }
-    //   /* focused */
-    //   *:not(:disabled):focus + & {
-    //     &[data-border] {
-    //       --input-box-shadow: ${$unstableDisableFocusRing
-    //         ? undefined
-    //         : focusRingStyle({
-    //             border: {color: color.input.default.enabled.border, width: input.border.width},
-    //             focusRing: input.text.focusRing,
-    //           })};
-    //     }
-    //     &:not([data-border]) {
-    //       --input-box-shadow: ${$unstableDisableFocusRing
-    //         ? undefined
-    //         : focusRingStyle({focusRing: input.text.focusRing})};
-    //     }
-    //   }
-    //   /* disabled */
-    //   *:not(:invalid):disabled + & {
-    //     --card-bg-color: ${color.input.default.disabled.bg} !important;
-    //     --card-fg-color: ${color.input.default.disabled.fg} !important;
-    //     --card-icon-color: ${color.input.default.disabled.fg} !important;
-    //     &[data-border] {
-    //       --input-box-shadow: ${focusRingBorderStyle({
-    //         color: color.input.default.disabled.border,
-    //         width: input.border.width,
-    //       })};
-    //     }
-    //   }
-    //   *:invalid:disabled + & {
-    //     --card-bg-color: ${color.input.invalid.disabled.bg} !important;
-    //     --card-fg-color: ${color.input.invalid.disabled.fg} !important;
-    //     --card-icon-color: ${color.input.invalid.disabled.fg} !important;
-    //     &[data-border] {
-    //       --input-box-shadow: ${focusRingBorderStyle({
-    //         color: color.input.invalid.disabled.border,
-    //         width: input.border.width,
-    //       })};
-    //     }
-    //   }
-    //   /* readOnly */
-    //   *:not(:invalid):read-only + & {
-    //     --card-bg-color: ${color.input.default.readOnly.bg} !important;
-    //     --card-fg-color: ${color.input.default.readOnly.fg} !important;
-    //   }
-    //   *:invalid:read-only + & {
-    //     --card-bg-color: ${color.input.invalid.readOnly.bg} !important;
-    //     --card-fg-color: ${color.input.invalid.readOnly.fg} !important;
-    //   }
-    //   /* hovered */
-    //   @media (hover: hover) {
-    //     *:not(:disabled):not(:read-only):not(:invalid):hover + & {
-    //       --card-bg-color: ${color.input.default.hovered.bg};
-    //       --card-fg-color: ${color.input.default.hovered.fg};
-    //     }
-    //     *:invalid:not(:disabled):not(:read-only):hover + & {
-    //       --card-bg-color: ${color.input.invalid.hovered.bg};
-    //       --card-fg-color: ${color.input.invalid.hovered.fg};
-    //     }
-    //     *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + &[data-border] {
-    //       --input-box-shadow: ${focusRingBorderStyle({
-    //         color: color.input.default.hovered.border,
-    //         width: input.border.width,
-    //       })};
-    //     }
-    //     *:invalid:not(:disabled):not(:read-only):not(:focus):hover + &[data-border] {
-    //       --input-box-shadow: ${focusRingBorderStyle({
-    //         color: color.input.invalid.hovered.border,
-    //         width: input.border.width,
-    //       })};
-    //     }
-    //   }
-    // }
-  },
+  '.text-input-presentation': {},
 }
 
 export const textInputStyle: Style = {layers: {primitive}}

package/src/css/types.ts

@@ -611,6 +611,15 @@ export interface FontVarNames<Size extends number> {
 
 /** @public */
 export interface VarNames {
+  avatar: {
+    distance: VarName
+    focusRing: {
+      offset: VarName
+      width: VarName
+    }
+    size: VarName
+    sizes: Record<AvatarSize, {distance: VarName; size: VarName}>
+  }
   button: {
     border: {
       width: VarName
@@ -629,15 +638,6 @@ export interface VarNames {
     ScopedColorVarNames &
     Record<CardTone, ColorCardVarNames>
   container: Record<Exclude<ContainerWidth, 'auto'>, VarName>
-  avatar: {
-    distance: VarName
-    focusRing: {
-      offset: VarName
-      width: VarName
-    }
-    size: VarName
-    sizes: Record<AvatarSize, {distance: VarName; size: VarName}>
-  }
   font: {
     code: FontVarNames<FontCodeSize>
     heading: FontVarNames<FontHeadingSize>

package/src/theme/v3/color/buildColor_v3.ts

@@ -57,7 +57,22 @@ function buildColorCard_v3(
   },
 ): ThemeColorCard_v3 {
   const {cardTone, scheme} = options
-  const context: RenderColorContext = {bgVar: `--color-bg-1`, hue: tokens._hue, scheme}
+  const context: RenderColorContext = {
+    bgVar: `--color-bg`,
+    bgValue: 'transparent',
+    hue: tokens._hue,
+    scheme,
+  }
+
+  const tintedDefaultVariant = buildColorElement_v3(tokens.variant.tinted.default, {
+    bgValue: 'transparent',
+    cardTone,
+    debugId: 'tinted',
+    scheme,
+    tone: 'default',
+  })
+
+  const bgValue = tintedDefaultVariant.bg[0]
 
   return {
     _hue: tokens._hue ?? 'gray',
@@ -65,8 +80,18 @@ function buildColorCard_v3(
       const avatarTokens = tokens.avatar[hue]
 
       acc[hue] = {
-        bg: renderColor(avatarTokens.bg, {bgVar: `--color-bg-1`, hue: avatarTokens._hue, scheme}),
-        fg: renderColor(avatarTokens.fg, {bgVar: `--color-bg-1`, hue: avatarTokens._hue, scheme}),
+        bg: renderColor(avatarTokens.bg, {
+          bgValue,
+          bgVar: `--color-bg-1`,
+          hue: avatarTokens._hue,
+          scheme,
+        }),
+        fg: renderColor(avatarTokens.fg, {
+          bgValue,
+          bgVar: `--color-bg-1`,
+          hue: avatarTokens._hue,
+          scheme,
+        }),
       }
 
       return acc
@@ -128,32 +153,34 @@ function buildColorCard_v3(
 
     variant: {
       solid: {
-        ...THEME_COLOR_STATE_TONES.reduce(
-          (acc, tone) => ({
-            ...acc,
-            [tone]: buildColorElement_v3(tokens.variant.solid[tone], {
-              cardTone,
-              debugId: `solid`,
-              scheme,
-              tone,
-            }),
-          }),
-          {} as ThemeColorVariant,
-        ),
+        ...THEME_COLOR_STATE_TONES.reduce((acc, tone) => {
+          acc[tone] = buildColorElement_v3(tokens.variant.solid[tone], {
+            bgValue,
+            cardTone,
+            debugId: `solid`,
+            scheme,
+            tone,
+          })
+
+          return acc
+        }, {} as ThemeColorVariant),
       },
       tinted: {
-        ...THEME_COLOR_STATE_TONES.reduce(
-          (acc, tone) => ({
-            ...acc,
-            [tone]: buildColorElement_v3(tokens.variant.tinted[tone], {
+        ...THEME_COLOR_STATE_TONES.reduce((acc, tone) => {
+          if (tone === 'default') {
+            acc[tone] = tintedDefaultVariant
+          } else {
+            acc[tone] = buildColorElement_v3(tokens.variant.tinted[tone], {
+              bgValue,
               cardTone,
               debugId: `tinted`,
               scheme,
               tone,
-            }),
-          }),
-          {} as ThemeColorVariant,
-        ),
+            })
+          }
+
+          return acc
+        }, {} as ThemeColorVariant),
       },
     },
   }
@@ -162,13 +189,14 @@ function buildColorCard_v3(
 function buildColorElement_v3(
   tokens: ElementColorTokens,
   options: {
+    bgValue: string
     cardTone: ThemeColorCardToneKey
     debugId?: string
     scheme: ThemeColorSchemeKey
     tone?: ThemeColorStateToneKey
   },
 ): ThemeColorElement {
-  const {cardTone, debugId, scheme, tone} = options
+  const {bgValue, cardTone, debugId, scheme, tone} = options
 
   const path = [scheme, cardTone, debugId, tone].filter(Boolean).join('/')
 
@@ -178,7 +206,7 @@ function buildColorElement_v3(
     nodeLen += 1
   }
 
-  const context: RenderColorContext = {bgVar: `--bg`, hue: tokens._hue, scheme}
+  const context: RenderColorContext = {bgValue, bgVar: `--color-bg`, hue: tokens._hue, scheme}
 
   return {
     _hue: tokens._hue ?? 'gray',

package/src/theme/v3/color/card.ts

@@ -77,45 +77,3 @@ export interface CardColorTokens {
     tinted: Record<'*' | ThemeColorStateToneKey, ElementColorTokens>
   }
 }
-
-// /**
-//  * @public
-//  */
-// export interface ThemeColorSyntax {
-//   atrule: string
-//   attrName: string
-//   attrValue: string
-//   attribute: string
-//   boolean: string
-//   builtin: string
-//   cdata: string
-//   char: string
-//   class: string
-//   className: string
-//   comment: string
-//   constant: string
-//   deleted: string
-//   doctype: string
-//   entity: string
-//   function: string
-//   hexcode: string
-//   id: string
-//   important: string
-//   inserted: string
-//   keyword: string
-//   number: string
-//   operator: string
-//   prolog: string
-//   property: string
-//   pseudoClass: string
-//   pseudoElement: string
-//   punctuation: string
-//   regex: string
-//   selector: string
-//   string: string
-//   symbol: string
-//   tag: string
-//   unit: string
-//   url: string
-//   variable: string
-// }

package/src/theme/v3/color/renderColor.test.ts

@@ -2,6 +2,7 @@ import {renderColor, RenderColorContext} from './renderColor'
 
 it('should render color', () => {
   const context: RenderColorContext = {
+    bgValue: 'transparent',
     bgVar: '--bg',
     hue: 'gray',
     scheme: 'light',