@sanity/ui 3.0.0-static.2 → 3.0.0-static.20

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

@@ -0,0 +1,275 @@
+import {THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
+
+import {varNames, vars} from '../../theme'
+import type {Style, StyleRules} from '../../types'
+
+const primitive: StyleRules = {
+  '.button': {
+    WebkitFontSmoothing: 'inherit',
+    appearance: 'none',
+    font: 'inherit',
+    outline: 'none',
+    userSelect: 'none',
+    textDecoration: 'none',
+    border: 0,
+    boxSizing: 'border-box',
+    padding: 0,
+    overflow: 'hidden',
+    margin: 0,
+    textAlign: 'left',
+    position: 'relative',
+    verticalAlign: 'top',
+    backgroundColor: vars.color.bg,
+    color: vars.color.fg,
+    boxShadow: vars.button.boxShadow,
+    alignItems: 'center',
+
+    nest: {
+      '&::-moz-focus-inner': {
+        border: 0,
+        padding: 0,
+      },
+
+      '&:focus': {
+        outline: `${vars.button.focusRing.width} solid ${vars.color.focusRing}`,
+        outlineOffset: vars.button.focusRing.offset,
+      },
+
+      '&:focus:not(:focus-visible)': {
+        outline: 'none',
+      },
+    },
+  },
+
+  '.button-loading-box': {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: vars.color.bg,
+    borderRadius: 'inherit',
+    zIndex: 1,
+    opacity: 0.8,
+  },
+}
+
+for (const tone of THEME_COLOR_STATE_TONES) {
+  const solid = vars.color.solid[tone]
+  const tinted = vars.color.tinted[tone]
+
+  // mode: default
+  primitive[`.button[data-mode="default"][data-tone="${tone}"]`] = {
+    vars: {
+      [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],
+      [varNames.button.boxShadow]: 'none',
+    },
+
+    nest: {
+      '&:not([data-disabled]):hover': {
+        vars: {
+          [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],
+        },
+      },
+
+      '&:not([data-disabled]):active': {
+        vars: {
+          [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],
+        },
+      },
+
+      '&:not([data-disabled])[data-selected]': {
+        vars: {
+          [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],
+        },
+      },
+
+      '&[data-disabled]': {
+        vars: {
+          [varNames.color.avatar.blue.bg]: vars.color.tinted.default.bg[3],
+          [varNames.color.avatar.purple.bg]: vars.color.tinted.default.bg[3],
+          [varNames.color.avatar.magenta.bg]: vars.color.tinted.default.bg[3],
+          [varNames.color.avatar.red.bg]: vars.color.tinted.default.bg[3],
+          [varNames.color.avatar.orange.bg]: vars.color.tinted.default.bg[3],
+          [varNames.color.avatar.yellow.bg]: vars.color.tinted.default.bg[3],
+          [varNames.color.avatar.green.bg]: vars.color.tinted.default.bg[3],
+          [varNames.color.avatar.cyan.bg]: vars.color.tinted.default.bg[3],
+          [varNames.color.bg]: vars.color.tinted.default.bg[1],
+          [varNames.color.border]: vars.color.tinted.default.border[1],
+          [varNames.color.code.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.code.fg]: vars.color.tinted.default.border[4],
+          [varNames.color.fg]: vars.color.tinted.default.border[4],
+          [varNames.color.muted.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.muted.fg]: vars.color.tinted.default.border[4],
+        },
+      },
+    },
+  }
+
+  // mode: ghost
+  primitive[`.button[data-mode="ghost"][data-tone="${tone}"]`] = {
+    vars: {
+      [varNames.color.bg]: tinted.bg[1],
+      [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],
+      [varNames.button.boxShadow]: `inset 0 0 0 ${vars.button.border.width} ${vars.color.border}`,
+    },
+
+    nest: {
+      '&:not([data-disabled]):hover': {
+        vars: {
+          [varNames.color.bg]: tinted.bg[2],
+          [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],
+        },
+      },
+
+      '&:not([data-disabled]):active': {
+        vars: {
+          [varNames.color.bg]: tinted.bg[3],
+          [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],
+          [varNames.button.boxShadow]:
+            `inset 0 0 0 ${vars.button.border.width} ${vars.color.border}`,
+        },
+      },
+
+      '&:not([data-disabled])[data-selected]': {
+        vars: {
+          [varNames.color.bg]: tinted.bg[3],
+          [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],
+          [varNames.button.boxShadow]:
+            `inset 0 0 0 ${vars.button.border.width} ${vars.color.border}`,
+        },
+      },
+
+      '&[data-disabled]': {
+        vars: {
+          [varNames.color.avatar.blue.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.avatar.purple.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.avatar.magenta.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.avatar.red.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.avatar.orange.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.avatar.yellow.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.avatar.green.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.avatar.cyan.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.bg]: vars.color.tinted.default.bg[0],
+          [varNames.color.border]: vars.color.tinted.default.border[0],
+          [varNames.color.code.bg]: vars.color.tinted.default.bg[1],
+          [varNames.color.code.fg]: vars.color.tinted.default.border[3],
+          [varNames.color.fg]: vars.color.tinted.default.border[4],
+          [varNames.color.muted.bg]: vars.color.tinted.default.bg[1],
+          [varNames.color.muted.fg]: vars.color.tinted.default.border[3],
+        },
+      },
+    },
+  }
+
+  // mode: bleed
+  primitive[`.button[data-mode="bleed"][data-tone="${tone}"]`] = {
+    boxShadow: 'none',
+    vars: {
+      [varNames.color.bg]: tinted.bg[0],
+      [varNames.color.border]: tinted.border[1],
+      [varNames.color.fg]: tinted.fg[2],
+      [varNames.color.muted.bg]: tinted.bg[1],
+      [varNames.color.muted.fg]: tinted.fg[4],
+      [varNames.button.boxShadow]: 'none',
+    },
+
+    nest: {
+      '&:not([data-disabled]):hover': {
+        vars: {
+          [varNames.color.bg]: tinted.bg[1],
+          [varNames.color.border]: tinted.border[2],
+          [varNames.color.fg]: tinted.fg[1],
+          [varNames.color.muted.bg]: tinted.bg[2],
+          [varNames.color.muted.fg]: tinted.fg[3],
+        },
+      },
+
+      '&:not([data-disabled]):active': {
+        vars: {
+          [varNames.color.bg]: tinted.bg[2],
+          [varNames.color.border]: tinted.border[3],
+          [varNames.color.fg]: tinted.fg[1],
+          [varNames.color.muted.bg]: tinted.bg[3],
+          [varNames.color.muted.fg]: tinted.fg[3],
+        },
+      },
+
+      '&:not([data-disabled])[data-selected]': {
+        vars: {
+          [varNames.color.bg]: tinted.bg[2],
+          [varNames.color.border]: tinted.border[3],
+          [varNames.color.fg]: tinted.fg[1],
+          [varNames.color.muted.bg]: tinted.bg[3],
+          [varNames.color.muted.fg]: tinted.fg[3],
+        },
+      },
+
+      '&[data-disabled]': {
+        vars: {
+          [varNames.color.avatar.blue.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.avatar.purple.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.avatar.magenta.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.avatar.red.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.avatar.orange.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.avatar.yellow.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.avatar.green.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.avatar.cyan.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.bg]: vars.color.tinted.default.bg[0],
+          [varNames.color.border]: vars.color.tinted.default.border[0],
+          [varNames.color.code.bg]: vars.color.tinted.default.bg[1],
+          [varNames.color.code.fg]: vars.color.tinted.default.border[3],
+          [varNames.color.fg]: vars.color.tinted.default.border[4],
+          [varNames.color.muted.bg]: vars.color.tinted.default.bg[1],
+          [varNames.color.muted.fg]: vars.color.tinted.default.border[3],
+        },
+      },
+    },
+  }
+}
+
+export const buttonStyle: Style = {layers: {primitive}}

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

@@ -1,34 +1,12 @@
-import {ThemeColorButtonModeKey, ThemeColorStateToneKey} from '@sanity/ui/theme'
-
-import {composeClassNames} from '../../composeClassNames'
-import {
-  display,
-  DisplayStyleProps,
-  flexItem,
-  FlexItemStyleProps,
-  radius,
-  RadiusStyleProps,
-  width,
-  WidthStyleProps,
-} from '../../styles'
-import {toneMap, variantMap} from './_constants'
-
-export interface ButtonStyleProps
-  extends DisplayStyleProps,
-    FlexItemStyleProps,
-    RadiusStyleProps,
-    WidthStyleProps {
-  mode?: ThemeColorButtonModeKey
-  tone?: ThemeColorStateToneKey
-}
+import {_composeClassNames} from '../../_composeClassNames'
+import {_scopeClassNames} from '../../_scopeClassNames'
+import {display, flexItem, radius, width} from '../../aspects'
+import type {ButtonStyleProps} from './types'
 
+/** @public */
 export function button(props: ButtonStyleProps): string | undefined {
-  const {mode, tone} = props
-
-  return composeClassNames(
-    'button',
-    variantMap[mode ?? 'default'],
-    toneMap[tone ?? 'default'],
+  return _composeClassNames(
+    _scopeClassNames('button'),
     display(props),
     flexItem(props),
     radius(props),
@@ -36,6 +14,7 @@ export function button(props: ButtonStyleProps): string | undefined {
   )
 }
 
+/** @public */
 export function buttonLoadingBox(): string | undefined {
-  return 'button-loading-box'
+  return _scopeClassNames('button-loading-box')
 }

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

@@ -1 +1,2 @@
 export * from './button'
+export * from './types'

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

@@ -0,0 +1,13 @@
+import type {
+  DisplayStyleProps,
+  FlexItemStyleProps,
+  RadiusStyleProps,
+  WidthStyleProps,
+} from '../../aspects'
+
+/** @public */
+export interface ButtonStyleProps
+  extends DisplayStyleProps,
+    FlexItemStyleProps,
+    RadiusStyleProps,
+    WidthStyleProps {}

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

@@ -0,0 +1,295 @@
+import {
+  AVATAR_COLORS,
+  COLOR_VARIANTS,
+  THEME_COLOR_CARD_TONES as CARD_TONES,
+  THEME_COLOR_SCHEMES as SCHEMES,
+  THEME_COLOR_STATE_TONES as STATE_TONES,
+  type ThemeColorCardToneKey as CardTone,
+  type ThemeColorSchemeKey as Scheme,
+} from '@sanity/ui/theme'
+
+import {_assign} from '../../_assign'
+import {varNames, vars} from '../../theme'
+import type {Properties, Style, StyleRules} from '../../types'
+
+type ColorCardVarNames = typeof varNames.color | (typeof varNames.color)[CardTone]
+type ColorCardVars = typeof vars.color | (typeof vars.color)[Scheme][CardTone]
+
+const primitive: StyleRules = {
+  '.card': {
+    backgroundColor: vars.color.bg,
+    color: vars.color.fg,
+
+    vars: {
+      [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.fg[0],
+      [varNames.color.muted.bg]: vars.color.tinted.default.bg[1],
+      [varNames.color.muted.fg]: vars.color.tinted.default.fg[4],
+    },
+
+    nest: {
+      'button&': {
+        WebkitFontSmoothing: 'inherit',
+        appearance: 'none',
+        outline: 'none',
+        font: 'inherit',
+        textAlign: 'inherit',
+        border: 'none',
+        // @ts-expect-error - TODO: fix
+        width: ['-moz-available', '-webkit-fill-available', 'fill-available'],
+      },
+
+      'a&': {
+        // border: 'none',
+        outline: 'none',
+        textDecoration: 'none',
+      },
+
+      'pre&': {
+        font: 'inherit',
+        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': {
+        vars: {
+          [varNames.color.bg]: vars.color.tinted.default.bg[1],
+          [varNames.color.border]: vars.color.tinted.default.border[3],
+          [varNames.color.fg]: vars.color.tinted.default.fg[1],
+          [varNames.color.code.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.code.fg]: vars.color.tinted.default.fg[4],
+          [varNames.color.muted.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.muted.fg]: vars.color.tinted.default.fg[4],
+        },
+      },
+
+      'a&:not([data-disabled]):active, button&:not([data-disabled]):active': {
+        vars: {
+          [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.code.bg]: vars.color.tinted.default.bg[3],
+          [varNames.color.code.fg]: vars.color.tinted.default.fg[4],
+          [varNames.color.muted.bg]: vars.color.tinted.default.bg[3],
+          [varNames.color.muted.fg]: vars.color.tinted.default.fg[4],
+        },
+      },
+
+      // toggle button
+      'a&:not([data-disabled])[aria-pressed="true"], button&:not([data-disabled])[aria-pressed="true"]':
+        {
+          vars: {
+            [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.code.bg]: vars.color.tinted.default.bg[3],
+            [varNames.color.code.fg]: vars.color.tinted.default.fg[4],
+            [varNames.color.muted.bg]: vars.color.tinted.default.bg[3],
+            [varNames.color.muted.fg]: vars.color.tinted.default.fg[4],
+          },
+        },
+
+      'a&:not([data-disabled])[data-pressed], button&:not([data-disabled])[data-pressed]': {
+        vars: {
+          [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.code.bg]: vars.color.tinted.default.bg[3],
+          [varNames.color.code.fg]: vars.color.tinted.default.fg[4],
+          [varNames.color.muted.bg]: vars.color.tinted.default.bg[3],
+          [varNames.color.muted.fg]: vars.color.tinted.default.fg[4],
+        },
+      },
+
+      'a&:not([data-disabled])[data-selected], button&:not([data-disabled])[data-selected]': {
+        vars: {
+          [varNames.color.bg]: vars.color.solid.primary.bg[0],
+          [varNames.color.border]: vars.color.solid.primary.border[1],
+          [varNames.color.fg]: vars.color.solid.primary.fg[0],
+          [varNames.color.code.bg]: vars.color.solid.primary.bg[1],
+          [varNames.color.code.fg]: vars.color.solid.primary.fg[3],
+          [varNames.color.muted.bg]: vars.color.solid.primary.bg[1],
+          [varNames.color.muted.fg]: vars.color.solid.primary.fg[3],
+        },
+      },
+
+      'a&[data-disabled], button&[data-disabled]': {
+        vars: {
+          [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.code.bg]: vars.color.tinted.default.bg[0],
+          [varNames.color.code.fg]: vars.color.tinted.default.border[2],
+          [varNames.color.muted.bg]: vars.color.tinted.default.bg[1],
+          [varNames.color.muted.fg]: vars.color.tinted.default.border[2],
+        },
+      },
+    },
+  },
+}
+
+// scope variables to scheme
+for (const scheme of SCHEMES) {
+  const customProps: Properties['vars'] = {}
+
+  const props: Properties = {
+    colorScheme: scheme,
+    vars: customProps,
+  }
+
+  for (const tone of CARD_TONES) {
+    const _varNames = varNames.color[tone]
+    const _vars = vars.color[scheme][tone]
+
+    _assignToneProps(customProps, _varNames, _vars)
+  }
+
+  primitive[`.card.${scheme}`] = props
+}
+
+// scope variables to tone
+for (const tone of CARD_TONES) {
+  const _varNames = varNames.color
+  const _vars = vars.color[tone]
+
+  const customProps: Properties['vars'] = {}
+  const props: Properties = {vars: customProps}
+
+  _assignToneProps(customProps, _varNames, _vars)
+
+  ////////////////////////////////////////////////////////////////////////////////////////////////
+  // Legacy `--card` variables
+  ////////////////////////////////////////////////////////////////////////////////////////////////
+  _assign(customProps, {
+    '--card-bg-color': vars.color.bg,
+    '--card-bg2-color': vars.color.muted.bg,
+    '--card-border-color': vars.color.border,
+    '--card-code-bg-color': vars.color.code.bg,
+    '--card-code-fg-color': vars.color.code.fg,
+    '--card-fg-color': vars.color.fg,
+    '--card-focus-ring-color': vars.color.focusRing,
+    '--card-hairline-soft-color': vars.color.tinted.default.border[1],
+    '--card-hairline-hard-color': vars.color.tinted.default.border[2],
+    '--card-icon-color': vars.color.fg,
+    '--card-kbd-bg-color': vars.color.muted.bg,
+    '--card-kbd-border-color': vars.color.tinted.default.border[1],
+    '--card-kbd-fg-color': vars.color.muted.fg,
+    '--card-link-color': vars.color.link.fg,
+    '--card-link-fg-color': vars.color.link.fg,
+    '--card-muted-bg-color': vars.color.muted.bg,
+    '--card-muted-fg-color': vars.color.muted.fg,
+    '--card-shadow-outline-color': vars.color.shadow.outline,
+    '--card-shadow-umbra-color': vars.color.shadow.umbra,
+    '--card-shadow-penumbra-color': vars.color.shadow.penumbra,
+    '--card-shadow-ambient-color': vars.color.shadow.ambient,
+    '--card-skeleton-from-color': vars.color.skeleton.from,
+    '--card-skeleton-to-color': vars.color.skeleton.to,
+  })
+
+  // console.log('toneProps', toneProps)
+
+  primitive[`.card.${tone}`] = props
+}
+
+export const cardStyle: Style = {layers: {primitive}}
+
+function _assignToneProps(
+  props: NonNullable<Properties['vars']>,
+  _varNames: ColorCardVarNames,
+  _vars: ColorCardVars,
+) {
+  for (const hue of AVATAR_COLORS) {
+    props[_varNames.avatar[hue].bg] = _vars.avatar[hue].bg
+    props[_varNames.avatar[hue].fg] = _vars.avatar[hue].fg
+  }
+
+  _assign(props, {
+    [_varNames.backdrop]: _vars.backdrop,
+
+    [_varNames.code.fg]: _vars.code.fg,
+    [_varNames.code.bg]: _vars.code.bg,
+
+    [_varNames.code.token.atrule]: _vars.code.token.atrule,
+    [_varNames.code.token.attrName]: _vars.code.token.attrName,
+    [_varNames.code.token.attrValue]: _vars.code.token.attrValue,
+    [_varNames.code.token.attribute]: _vars.code.token.attribute,
+    [_varNames.code.token.boolean]: _vars.code.token.boolean,
+    [_varNames.code.token.builtin]: _vars.code.token.builtin,
+    [_varNames.code.token.cdata]: _vars.code.token.cdata,
+    [_varNames.code.token.char]: _vars.code.token.char,
+    [_varNames.code.token.class]: _vars.code.token.class,
+    [_varNames.code.token.className]: _vars.code.token.className,
+    [_varNames.code.token.comment]: _vars.code.token.comment,
+    [_varNames.code.token.constant]: _vars.code.token.constant,
+    [_varNames.code.token.deleted]: _vars.code.token.deleted,
+    [_varNames.code.token.doctype]: _vars.code.token.doctype,
+    [_varNames.code.token.entity]: _vars.code.token.entity,
+    [_varNames.code.token.function]: _vars.code.token.function,
+    [_varNames.code.token.hexcode]: _vars.code.token.hexcode,
+    [_varNames.code.token.id]: _vars.code.token.id,
+    [_varNames.code.token.important]: _vars.code.token.important,
+    [_varNames.code.token.inserted]: _vars.code.token.inserted,
+    [_varNames.code.token.keyword]: _vars.code.token.keyword,
+    [_varNames.code.token.number]: _vars.code.token.number,
+    [_varNames.code.token.operator]: _vars.code.token.operator,
+    [_varNames.code.token.prolog]: _vars.code.token.prolog,
+    [_varNames.code.token.property]: _vars.code.token.property,
+    [_varNames.code.token.pseudoClass]: _vars.code.token.pseudoClass,
+    [_varNames.code.token.pseudoElement]: _vars.code.token.pseudoElement,
+    [_varNames.code.token.punctuation]: _vars.code.token.punctuation,
+    [_varNames.code.token.regex]: _vars.code.token.regex,
+    [_varNames.code.token.selector]: _vars.code.token.selector,
+    [_varNames.code.token.string]: _vars.code.token.string,
+    [_varNames.code.token.symbol]: _vars.code.token.symbol,
+    [_varNames.code.token.tag]: _vars.code.token.tag,
+    [_varNames.code.token.unit]: _vars.code.token.unit,
+    [_varNames.code.token.url]: _vars.code.token.url,
+    [_varNames.code.token.variable]: _vars.code.token.variable,
+
+    [_varNames.focusRing]: _vars.focusRing,
+
+    [_varNames.link.fg]: _vars.link.fg,
+
+    [_varNames.shadow.outline]: _vars.shadow.outline,
+    [_varNames.shadow.umbra]: _vars.shadow.umbra,
+    [_varNames.shadow.penumbra]: _vars.shadow.penumbra,
+    [_varNames.shadow.ambient]: _vars.shadow.ambient,
+
+    [_varNames.skeleton.from]: _vars.skeleton.from,
+    [_varNames.skeleton.to]: _vars.skeleton.to,
+  })
+
+  for (const variant of COLOR_VARIANTS) {
+    for (const elementTone of STATE_TONES) {
+      const __varNames = _varNames[variant][elementTone]
+      const __vars = _vars[variant][elementTone]
+
+      _assign(props, {
+        [__varNames.bg[0]]: __vars.bg[0],
+        [__varNames.bg[1]]: __vars.bg[1],
+        [__varNames.bg[2]]: __vars.bg[2],
+        [__varNames.bg[3]]: __vars.bg[3],
+        [__varNames.bg[4]]: __vars.bg[4],
+
+        [__varNames.border[0]]: __vars.border[0],
+        [__varNames.border[1]]: __vars.border[1],
+        [__varNames.border[2]]: __vars.border[2],
+        [__varNames.border[3]]: __vars.border[3],
+        [__varNames.border[4]]: __vars.border[4],
+
+        [__varNames.fg[0]]: __vars.fg[0],
+        [__varNames.fg[1]]: __vars.fg[1],
+        [__varNames.fg[2]]: __vars.fg[2],
+        [__varNames.fg[3]]: __vars.fg[3],
+        [__varNames.fg[4]]: __vars.fg[4],
+      })
+    }
+  }
+}

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

@@ -1,16 +1,12 @@
-import {composeClassNames} from '../../composeClassNames'
-import {shadow} from '../../styles'
-import {box} from '../box'
-import {toneMap} from './_constants'
-import {CardStyleProps} from './types'
+import {_composeClassNames} from '../../_composeClassNames'
+import {_scopeClassNames} from '../../_scopeClassNames'
+import {shadow} from '../../aspects'
+import type {CardStyleProps} from './types'
 
+/** @public */
 export function card(props: CardStyleProps): string | undefined {
-  return composeClassNames(
-    props.scheme,
-    toneMap[props.tone ?? 'inherit'],
-    'card',
-    props.checkered && 'card-checkered',
-    box(props),
+  return _composeClassNames(
+    _scopeClassNames(props.scheme, props.tone, 'card', props.checkered && 'card-checkered'),
     shadow(props),
   )
 }

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

@@ -1,11 +1,10 @@
-import {ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
+import type {ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
 
-import {ShadowStyleProps} from '../../styles'
-import {BoxStyleProps} from '../box'
+import type {ShadowStyleProps} from '../../aspects'
 
-export interface CardStyleProps extends BoxStyleProps, ShadowStyleProps {
+/** @public */
+export interface CardStyleProps extends ShadowStyleProps {
   checkered?: boolean
-  selectable?: boolean
   scheme?: ThemeColorSchemeKey
   tone?: ThemeColorCardToneKey | 'inherit'
 }