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

package/src/css/primitives/badge/badge.ts

@@ -1,8 +1,8 @@
-import {composeClassNames} from '../../composeClassNames'
-import {radius} from '../../styles'
+import {_comp} from '../../_comp'
+import {radius} from '../../aspects'
 import {BadgeStyleProps} from './types'
 
 /** @public */
 export function badge(props: BadgeStyleProps): string | undefined {
-  return composeClassNames('badge', props.tone && `badge-${props.tone}`, radius(props))
+  return _comp('badge', props.tone && `badge-${props.tone}`, radius(props))
 }

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

@@ -1,6 +1,6 @@
 import {ThemeColorStateToneKey} from '@sanity/ui/theme'
 
-import {RadiusStyleProps} from '../../styles'
+import {RadiusStyleProps} from '../../aspects'
 
 /** @public */
 export interface BadgeStyleProps extends RadiusStyleProps {

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

@@ -0,0 +1,31 @@
+import {Style, StyleRules} from '../../types'
+import {vars} from '../../vars'
+
+const primitive: StyleRules = {
+  '.box': {
+    'minWidth': 0,
+    'minHeight': 0,
+
+    '@nest': {
+      '&:is(ul), &:is(ol)': {
+        listStyle: 'none',
+      },
+
+      '&.muted': {
+        backgroundColor: vars.color.muted.bg,
+      },
+    },
+  },
+
+  // sizing
+
+  '.box-content': {
+    boxSizing: 'content-box',
+  },
+
+  '.box-border': {
+    boxSizing: 'border-box',
+  },
+}
+
+export const boxStyle: Style = {layers: {primitive}}

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

@@ -1,5 +1,5 @@
+import {_comp} from '../../_comp'
 import {_resp} from '../../_resp'
-import {composeClassNames} from '../../composeClassNames'
 import {
   border,
   display,
@@ -8,6 +8,7 @@ import {
   gap,
   grid,
   gridItem,
+  height,
   inset,
   margin,
   maxWidth,
@@ -17,18 +18,22 @@ import {
   position,
   radius,
   width,
-} from '../../styles'
+} from '../../aspects'
 import {BoxStyleProps} from './types'
 
 /** @public */
 export function box(props: BoxStyleProps): string | undefined {
-  return composeClassNames(
+  // props.align
+  // props.autoCols
+
+  return _comp(
     'box',
-    props.muted && 'muted',
+    props.muted && 'muted', // todo: consider this naming
+
+    _resp(`box`, props.sizing),
     border(props),
     display(props),
-    _resp(`h`, props.height),
-    _resp(`box`, props.sizing),
+    height(props),
     flex(props),
     flexItem(props),
     grid(props),

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

@@ -6,6 +6,7 @@ import {
   GapStyleProps,
   GridItemStyleProps,
   GridStyleProps,
+  HeightStyleProps,
   InsetStyleProps,
   MarginStyleProps,
   MaxWidthStyleProps,
@@ -15,7 +16,7 @@ import {
   PositionStyleProps,
   RadiusStyleProps,
   WidthStyleProps,
-} from '../../styles'
+} from '../../aspects'
 import {ResponsiveProp} from '../../types'
 
 /**
@@ -23,11 +24,6 @@ import {ResponsiveProp} from '../../types'
  */
 export type BoxSizing = 'content' | 'border'
 
-/**
- * @public
- */
-export type BoxHeight = 'stretch' | 'fill'
-
 /** @public */
 export interface BoxStyleProps
   extends BorderStyleProps,
@@ -37,6 +33,7 @@ export interface BoxStyleProps
     GapStyleProps,
     GridStyleProps,
     GridItemStyleProps,
+    HeightStyleProps,
     InsetStyleProps,
     MarginStyleProps,
     MaxWidthStyleProps,
@@ -46,7 +43,6 @@ export interface BoxStyleProps
     PositionStyleProps,
     RadiusStyleProps,
     WidthStyleProps {
-  height?: ResponsiveProp<BoxHeight>
   muted?: boolean
   outline?: 'none'
   sizing?: ResponsiveProp<BoxSizing>

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

@@ -1,7 +1,7 @@
 import {ThemeColorButtonModeKey, ThemeColorStateToneKey} from '@sanity/ui/theme'
 
 export const toneMap: Record<ThemeColorStateToneKey, string | undefined> = {
-  default: 'surface',
+  default: 'default',
   neutral: 'neutral',
   suggest: 'suggest',
   primary: 'accent',

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

@@ -0,0 +1,179 @@
+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': {
+    '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': 'var(--button-box-shadow)',
+
+    '@nest': {
+      '&::-moz-focus-inner': {
+        border: 0,
+        padding: 0,
+      },
+
+      '&:focus': {
+        outline: 'var(--button-focus-ring-width) solid var(--color-focus-ring)',
+        outlineOffset: 'var(--button-focus-ring-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.${variantMap.default}.${toneMap[tone]}`] = {
+    [varNames.color.bg]: solid.bg[0],
+    [varNames.color.border]: solid.border[1],
+    [varNames.color.fg]: solid.fg[0],
+    [varNames.color.muted.fg]: solid.fg[4],
+    '--button-box-shadow': 'none',
+
+    '@nest': {
+      '&:not([data-disabled]):hover': {
+        [varNames.color.bg]: solid.bg[1],
+        [varNames.color.border]: solid.border[2],
+        [varNames.color.fg]: solid.fg[0],
+        [varNames.color.muted.fg]: solid.fg[4],
+      },
+
+      '&:not([data-disabled]):active': {
+        [varNames.color.bg]: solid.bg[2],
+        [varNames.color.border]: solid.border[3],
+        [varNames.color.fg]: solid.fg[0],
+        [varNames.color.muted.fg]: solid.fg[4],
+      },
+
+      '&:not([data-disabled])[data-selected]': {
+        [varNames.color.bg]: solid.bg[2],
+        [varNames.color.border]: solid.border[3],
+        [varNames.color.fg]: solid.fg[0],
+        [varNames.color.muted.fg]: solid.fg[4],
+      },
+
+      '&[data-disabled]': {
+        [varNames.color.bg]: vars.color.default.tinted.bg[1],
+        [varNames.color.border]: vars.color.default.tinted.border[0],
+        [varNames.color.fg]: vars.color.default.tinted.fg[2],
+        [varNames.color.muted.fg]: vars.color.default.tinted.fg[1],
+      },
+    },
+  }
+
+  // mode: ghost
+  primitive[`.button.${variantMap.ghost}.${toneMap[tone]}`] = {
+    [varNames.color.bg]: tinted.bg[1],
+    [varNames.color.border]: tinted.border[1],
+    [varNames.color.fg]: tinted.fg[2],
+    '--button-box-shadow': `inset 0 0 0 var(--button-border-width) var(--color-border)`,
+
+    '@nest': {
+      '&:not([data-disabled]):hover': {
+        [varNames.color.bg]: tinted.bg[2],
+        [varNames.color.border]: tinted.border[2],
+        [varNames.color.fg]: tinted.fg[1],
+        // '--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[3],
+        [varNames.color.fg]: tinted.fg[1],
+        '--button-box-shadow': `inset 0 0 0 var(--button-border-width) var(--color-border)`,
+      },
+
+      '&:not([data-disabled])[data-selected]': {
+        [varNames.color.bg]: tinted.bg[3],
+        [varNames.color.border]: tinted.border[3],
+        [varNames.color.fg]: tinted.fg[1],
+        '--button-box-shadow': `inset 0 0 0 var(--button-border-width) var(--color-border)`,
+      },
+
+      '&[data-disabled]': {
+        [varNames.color.bg]: vars.color.default.tinted.bg[1],
+        [varNames.color.border]: vars.color.default.tinted.border[0],
+        [varNames.color.fg]: vars.color.default.tinted.fg[2],
+      },
+    },
+  }
+
+  // mode: bleed
+  primitive[`.button.${variantMap.bleed}.${toneMap[tone]}`] = {
+    'boxShadow': 'none',
+    [varNames.color.bg]: tinted.bg[0],
+    [varNames.color.border]: tinted.border[1],
+    [varNames.color.fg]: tinted.fg[2],
+    [varNames.color.muted.fg]: tinted.fg[4],
+    '--button-box-shadow': 'none',
+
+    '@nest': {
+      '&:not([data-disabled]):hover': {
+        [varNames.color.bg]: tinted.bg[1],
+        [varNames.color.border]: tinted.border[2],
+        [varNames.color.fg]: tinted.fg[1],
+        [varNames.color.muted.fg]: tinted.fg[3],
+      },
+
+      '&:not([data-disabled]):active': {
+        [varNames.color.bg]: tinted.bg[2],
+        [varNames.color.border]: tinted.border[3],
+        [varNames.color.fg]: tinted.fg[1],
+        [varNames.color.muted.fg]: tinted.fg[3],
+      },
+
+      '&:not([data-disabled])[data-selected]': {
+        [varNames.color.bg]: tinted.bg[2],
+        [varNames.color.border]: tinted.border[3],
+        [varNames.color.fg]: tinted.fg[1],
+        [varNames.color.muted.fg]: tinted.fg[3],
+      },
+
+      '&[data-disabled]': {
+        [varNames.color.bg]: vars.color.default.tinted.bg[0],
+        [varNames.color.border]: vars.color.default.tinted.border[0],
+        [varNames.color.fg]: vars.color.default.tinted.fg[2],
+        [varNames.color.muted.fg]: vars.color.default.tinted.fg[1],
+      },
+    },
+  }
+}
+
+export const buttonStyle: Style = {layers: {primitive}}

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

@@ -1,6 +1,6 @@
 import {ThemeColorButtonModeKey, ThemeColorStateToneKey} from '@sanity/ui/theme'
 
-import {composeClassNames} from '../../composeClassNames'
+import {_comp} from '../../_comp'
 import {
   display,
   DisplayStyleProps,
@@ -10,7 +10,7 @@ import {
   RadiusStyleProps,
   width,
   WidthStyleProps,
-} from '../../styles'
+} from '../../aspects'
 import {toneMap, variantMap} from './_constants'
 
 export interface ButtonStyleProps
@@ -25,7 +25,7 @@ export interface ButtonStyleProps
 export function button(props: ButtonStyleProps): string | undefined {
   const {mode, tone} = props
 
-  return composeClassNames(
+  return _comp(
     'button',
     variantMap[mode ?? 'default'],
     toneMap[tone ?? 'default'],

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

@@ -9,11 +9,12 @@ for (const mode of THEME_COLOR_BUTTON_MODES) {
   for (const tone of THEME_COLOR_STATE_TONES) {
     if (mode === 'default') {
       buttonVariantRules[`&.${variantMap[mode]}.${toneMap[tone]}`] = {
-        'boxShadow': 'none',
+        // 'boxShadow': 'none',
         '--color-bg': `var(--color-solid-${tone}-bg-0)`,
         '--color-border': `var(--color-solid-${tone}-border-1)`,
         '--color-fg': `var(--color-solid-${tone}-fg-0)`,
         '--color-muted-fg': `var(--color-solid-${tone}-fg-4)`,
+        '--button-box-shadow': 'none',
 
         '@nest': {
           '&:not([data-disabled]):hover': {
@@ -54,6 +55,7 @@ for (const mode of THEME_COLOR_BUTTON_MODES) {
         '--color-border': `var(--color-tinted-${tone}-border-1)`,
         '--color-fg': `var(--color-tinted-${tone}-fg-2)`,
         '--color-muted-fg': `var(--color-tinted-${tone}-fg-4)`,
+        '--button-box-shadow': 'none',
 
         '@nest': {
           '&:not([data-disabled]):hover': {
@@ -89,27 +91,34 @@ for (const mode of THEME_COLOR_BUTTON_MODES) {
 
     if (mode === 'ghost') {
       buttonVariantRules[`&.${variantMap[mode]}.${toneMap[tone]}`] = {
-        '--color-bg': `var(--color-tinted-${tone}-bg-1)`,
-        '--color-border': `var(--color-tinted-${tone}-border-0)`,
+        '--color-bg': `var(--color-tinted-${tone}-bg-0)`,
+        '--color-border': `var(--color-tinted-${tone}-border-1)`,
         '--color-fg': `var(--color-tinted-${tone}-fg-2)`,
+        '--button-box-shadow': [
+          `inset 0 0 0 var(--button-border-width) var(--color-border)`,
+          `inset 0 -1.5px 0 0.5px var(--color-shadow-umbra)`,
+        ].join(','),
 
         '@nest': {
           '&:not([data-disabled]):hover': {
-            '--color-bg': `var(--color-tinted-${tone}-bg-2)`,
-            '--color-border': `var(--color-tinted-${tone}-border-1)`,
+            '--color-bg': `var(--color-tinted-${tone}-bg-1)`,
+            '--color-border': `var(--color-tinted-${tone}-border-2)`,
             '--color-fg': `var(--color-tinted-${tone}-fg-1)`,
+            // '--button-box-shadow': `inset 0 0 0 var(--button-border-width) var(--color-border)`,
           },
 
           '&:not([data-disabled]):active': {
-            '--color-bg': `var(--color-tinted-${tone}-bg-3)`,
-            '--color-border': `var(--color-tinted-${tone}-border-2)`,
+            '--color-bg': `var(--color-tinted-${tone}-bg-2)`,
+            '--color-border': `var(--color-tinted-${tone}-border-3)`,
             '--color-fg': `var(--color-tinted-${tone}-fg-1)`,
+            '--button-box-shadow': `inset 0 0 0 var(--button-border-width) var(--color-border)`,
           },
 
           '&:not([data-disabled])[data-selected]': {
-            '--color-bg': `var(--color-tinted-${tone}-bg-3)`,
-            '--color-border': `var(--color-tinted-${tone}-border-2)`,
+            '--color-bg': `var(--color-tinted-${tone}-bg-2)`,
+            '--color-border': `var(--color-tinted-${tone}-border-3)`,
             '--color-fg': `var(--color-tinted-${tone}-fg-1)`,
+            '--button-box-shadow': `inset 0 0 0 var(--button-border-width) var(--color-border)`,
           },
 
           '&[data-disabled]': {
@@ -141,7 +150,7 @@ export const buttonRules: Rules = {
     'verticalAlign': 'top',
     'backgroundColor': 'var(--color-bg)',
     'color': 'var(--color-fg)',
-    'boxShadow': 'inset 0 0 0 var(--button-border-width) var(--color-border)',
+    'boxShadow': 'var(--button-box-shadow)',
 
     '@nest': {
       '&::-moz-focus-inner': {

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

@@ -1,8 +1,8 @@
 import {ThemeColorCardToneKey} from '@sanity/ui/theme'
 
 export const toneMap: Record<ThemeColorCardToneKey | 'inherit', string | undefined> = {
-  transparent: 'canvas',
-  default: 'surface',
+  transparent: 'transparent',
+  default: 'default',
   neutral: 'neutral',
   suggest: 'suggest',
   primary: 'accent',

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

@@ -0,0 +1,198 @@
+import {
+  THEME_COLOR_AVATAR_COLORS,
+  THEME_COLOR_CARD_TONES,
+  THEME_COLOR_SCHEMES,
+  THEME_COLOR_STATE_TONES,
+} from '@sanity/ui/theme'
+
+import {ColorCardVarNames, ColorCardVars, Properties, Style, StyleRules} from '../../types'
+import {varNames} from '../../varNames'
+import {vars} from '../../vars'
+import {toneMap} from './_constants'
+
+const primitive: StyleRules = {
+  '.card': {
+    'backgroundColor': vars.color.bg,
+    'color': vars.color.fg,
+
+    [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': {
+      '&:is(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'],
+      },
+
+      '&:is(a)': {
+        outline: 'none',
+        textDecoration: 'none',
+      },
+
+      '&:is(pre)': {
+        font: 'inherit',
+        whiteSpace: 'inherit',
+      },
+    },
+  },
+}
+
+// scope variables to scheme
+for (const scheme of THEME_COLOR_SCHEMES) {
+  const schemeProps: Properties = {
+    colorScheme: scheme,
+  }
+
+  for (const tone of THEME_COLOR_CARD_TONES) {
+    const _varNames = varNames.color[tone]
+    const _vars = vars.color[scheme][tone]
+
+    _assignToneProps(schemeProps, _varNames, _vars)
+  }
+
+  primitive[`.card.${scheme}`] = schemeProps
+}
+
+// scope variables to tone
+for (const tone of THEME_COLOR_CARD_TONES) {
+  const _varNames = varNames.color
+  const _vars = vars.color[tone]
+
+  const toneProps: Properties = {}
+
+  _assignToneProps(toneProps, _varNames, _vars)
+
+  ////////////////////////////////////////////////////////////////////////////////////////////////
+  // Legacy `--card` variables
+  ////////////////////////////////////////////////////////////////////////////////////////////////
+  Object.assign(toneProps, {
+    '--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.muted.bg,
+    '--card-code-fg-color': vars.color.tinted.default.fg[4],
+    '--card-fg-color': vars.color.fg,
+    '--card-focus-ring-color': vars.color.focusRing,
+    '--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': 'var(--color-skeleton-from)',
+    // '--card-skeleton-to-color': 'var(--color-skeleton-to)',
+    '--card-hairline-soft-color': vars.color.tinted.default.border[1],
+    '--card-hairline-hard-color': vars.color.tinted.default.border[2],
+  })
+
+  primitive[`.card.${toneMap[tone]}`] = toneProps
+}
+
+export const cardStyle: Style = {layers: {primitive}}
+
+function _assignToneProps(
+  toneProps: Properties,
+  _varNames: ColorCardVarNames,
+  _vars: ColorCardVars,
+) {
+  Object.assign(toneProps, {
+    [_varNames.accent.fg]: _vars.accent.fg,
+  })
+
+  for (const hue of THEME_COLOR_AVATAR_COLORS) {
+    toneProps[`${_varNames.avatar[hue].bg}`] = _vars.avatar[hue].bg
+    toneProps[`${_varNames.avatar[hue].fg}`] = _vars.avatar[hue].fg
+  }
+
+  Object.assign(toneProps, {
+    [_varNames.backdrop]: _vars.backdrop,
+
+    [_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.token.atrule]: _vars.token.atrule,
+    [_varNames.token.attrName]: _vars.token.attrName,
+    [_varNames.token.attrValue]: _vars.token.attrValue,
+    [_varNames.token.attribute]: _vars.token.attribute,
+    [_varNames.token.boolean]: _vars.token.boolean,
+    [_varNames.token.builtin]: _vars.token.builtin,
+    [_varNames.token.cdata]: _vars.token.cdata,
+    [_varNames.token.char]: _vars.token.char,
+    [_varNames.token.class]: _vars.token.class,
+    [_varNames.token.className]: _vars.token.className,
+    [_varNames.token.comment]: _vars.token.comment,
+    [_varNames.token.constant]: _vars.token.constant,
+    [_varNames.token.deleted]: _vars.token.deleted,
+    [_varNames.token.doctype]: _vars.token.doctype,
+    [_varNames.token.entity]: _vars.token.entity,
+    [_varNames.token.function]: _vars.token.function,
+    [_varNames.token.hexcode]: _vars.token.hexcode,
+    [_varNames.token.id]: _vars.token.id,
+    [_varNames.token.important]: _vars.token.important,
+    [_varNames.token.inserted]: _vars.token.inserted,
+    [_varNames.token.keyword]: _vars.token.keyword,
+    [_varNames.token.number]: _vars.token.number,
+    [_varNames.token.operator]: _vars.token.operator,
+    [_varNames.token.prolog]: _vars.token.prolog,
+    [_varNames.token.property]: _vars.token.property,
+    [_varNames.token.pseudoClass]: _vars.token.pseudoClass,
+    [_varNames.token.pseudoElement]: _vars.token.pseudoElement,
+    [_varNames.token.punctuation]: _vars.token.punctuation,
+    [_varNames.token.regex]: _vars.token.regex,
+    [_varNames.token.selector]: _vars.token.selector,
+    [_varNames.token.string]: _vars.token.string,
+    [_varNames.token.symbol]: _vars.token.symbol,
+    [_varNames.token.tag]: _vars.token.tag,
+    [_varNames.token.unit]: _vars.token.unit,
+    [_varNames.token.url]: _vars.token.url,
+    [_varNames.token.variable]: _vars.token.variable,
+  })
+
+  for (const variant of ['solid', 'tinted'] as const) {
+    for (const elementTone of THEME_COLOR_STATE_TONES) {
+      const __varNames = _varNames[variant][elementTone]
+      const __vars = _vars[variant][elementTone]
+
+      Object.assign(toneProps, {
+        [__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,14 @@
-import {composeClassNames} from '../../composeClassNames'
-import {shadow} from '../../styles'
-import {box} from '../box'
+import {_comp} from '../../_comp'
+import {shadow} from '../../aspects'
 import {toneMap} from './_constants'
 import {CardStyleProps} from './types'
 
 export function card(props: CardStyleProps): string | undefined {
-  return composeClassNames(
+  return _comp(
     props.scheme,
-    toneMap[props.tone ?? 'inherit'],
+    toneMap[props.tone ?? 'default'],
     'card',
     props.checkered && 'card-checkered',
-    box(props),
     shadow(props),
   )
 }

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

@@ -37,6 +37,7 @@ export const cardRules: Rules = {
         'outline': 'none',
         'textDecoration': 'none',
 
+        // @ts-expect-error - TODO: fix this
         '@nest': {
           '&:not(:disabled)': {
             '@nest': {
@@ -76,6 +77,7 @@ export const cardRules: Rules = {
         'font': 'inherit',
         'textAlign': 'inherit',
         'border': 0,
+        // @ts-expect-error - TODO: fix this
         'width': ['-moz-available', '-webkit-fill-available', 'stretch'],
         'cursor': 'default',