@sanity/ui 3.0.0-static.18 → 3.0.0-static.19

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

@@ -1,28 +1,34 @@
 import {
-  THEME_COLOR_AVATAR_COLORS,
-  THEME_COLOR_CARD_TONES,
-  THEME_COLOR_SCHEMES,
-  THEME_COLOR_STATE_TONES,
+  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 {ColorCardVarNames, ColorCardVars, Properties, Style, StyleRules} from '../../types'
-import {varNames} from '../../varNames'
-import {vars} from '../../vars'
+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,
-
-    [varNames.color.bg]: vars.color.tinted.default.bg[0],
-    [varNames.color.border]: vars.color.tinted.default.border[1],
-    [varNames.color.code.bg]: vars.color.code.bg,
-    [varNames.color.code.fg]: vars.color.code.fg,
-    [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': {
+    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',
@@ -53,87 +59,115 @@ const primitive: StyleRules = {
       },
 
       '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],
-        [varNames.color.fg]: vars.color.tinted.default.fg[1],
-        [varNames.color.muted.bg]: vars.color.tinted.default.bg[2],
-        [varNames.color.muted.fg]: vars.color.tinted.default.fg[4],
+        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': {
-        [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],
+        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-pressed], button&:not([data-disabled])[data-pressed]': {
-        [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],
       },
 
       'a&:not([data-disabled])[data-selected], button&:not([data-disabled])[data-selected]': {
-        [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.muted.bg]: vars.color.solid.primary.bg[1],
-        [varNames.color.muted.fg]: vars.color.solid.primary.fg[3],
+        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]': {
-        [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],
+        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 THEME_COLOR_SCHEMES) {
-  const schemeProps: Properties = {
+for (const scheme of SCHEMES) {
+  const customProps: Properties['vars'] = {}
+
+  const props: Properties = {
     colorScheme: scheme,
+    vars: customProps,
   }
 
-  for (const tone of THEME_COLOR_CARD_TONES) {
+  for (const tone of CARD_TONES) {
     const _varNames = varNames.color[tone]
     const _vars = vars.color[scheme][tone]
 
-    _assignToneProps(schemeProps, _varNames, _vars)
+    _assignToneProps(customProps, _varNames, _vars)
   }
 
-  primitive[`.card.${scheme}`] = schemeProps
+  primitive[`.card.${scheme}`] = props
 }
 
 // scope variables to tone
-for (const tone of THEME_COLOR_CARD_TONES) {
+for (const tone of CARD_TONES) {
   const _varNames = varNames.color
   const _vars = vars.color[tone]
 
-  const toneProps: Properties = {}
+  const customProps: Properties['vars'] = {}
+  const props: Properties = {vars: customProps}
 
-  _assignToneProps(toneProps, _varNames, _vars)
+  _assignToneProps(customProps, _varNames, _vars)
 
   ////////////////////////////////////////////////////////////////////////////////////////////////
   // Legacy `--card` variables
   ////////////////////////////////////////////////////////////////////////////////////////////////
-  Object.assign(toneProps, {
+  _assign(customProps, {
     '--card-bg-color': vars.color.bg,
     '--card-bg2-color': vars.color.muted.bg,
     '--card-border-color': vars.color.border,
@@ -155,28 +189,28 @@ for (const tone of THEME_COLOR_CARD_TONES) {
     '--card-shadow-umbra-color': vars.color.shadow.umbra,
     '--card-shadow-penumbra-color': vars.color.shadow.penumbra,
     '--card-shadow-ambient-color': vars.color.shadow.ambient,
-
-    // todo
-    // '--card-skeleton-from-color': 'var(--color-skeleton-from)',
-    // '--card-skeleton-to-color': 'var(--color-skeleton-to)',
+    '--card-skeleton-from-color': vars.color.skeleton.from,
+    '--card-skeleton-to-color': vars.color.skeleton.to,
   })
 
-  primitive[`.card.${tone}`] = toneProps
+  // console.log('toneProps', toneProps)
+
+  primitive[`.card.${tone}`] = props
 }
 
 export const cardStyle: Style = {layers: {primitive}}
 
 function _assignToneProps(
-  toneProps: Properties,
+  props: NonNullable<Properties['vars']>,
   _varNames: ColorCardVarNames,
   _vars: ColorCardVars,
 ) {
-  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
+  for (const hue of AVATAR_COLORS) {
+    props[_varNames.avatar[hue].bg] = _vars.avatar[hue].bg
+    props[_varNames.avatar[hue].fg] = _vars.avatar[hue].fg
   }
 
-  Object.assign(toneProps, {
+  _assign(props, {
     [_varNames.backdrop]: _vars.backdrop,
 
     [_varNames.code.fg]: _vars.code.fg,
@@ -229,12 +263,12 @@ function _assignToneProps(
     [_varNames.shadow.ambient]: _vars.shadow.ambient,
   })
 
-  for (const variant of ['solid', 'tinted'] as const) {
-    for (const elementTone of THEME_COLOR_STATE_TONES) {
+  for (const variant of COLOR_VARIANTS) {
+    for (const elementTone of STATE_TONES) {
       const __varNames = _varNames[variant][elementTone]
       const __vars = _vars[variant][elementTone]
 
-      Object.assign(toneProps, {
+      _assign(props, {
         [__varNames.bg[0]]: __vars.bg[0],
         [__varNames.bg[1]]: __vars.bg[1],
         [__varNames.bg[2]]: __vars.bg[2],

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

@@ -1,14 +1,12 @@
-import {_comp} from '../../_comp'
+import {_composeClassNames} from '../../_composeClassNames'
+import {_scopeClassNames} from '../../_scopeClassNames'
 import {shadow} from '../../aspects'
-import {CardStyleProps} from './types'
+import type {CardStyleProps} from './types'
 
 /** @public */
 export function card(props: CardStyleProps): string | undefined {
-  return _comp(
-    props.scheme,
-    props.tone ?? 'default',
-    'card',
-    props.checkered && 'card-checkered',
+  return _composeClassNames(
+    _scopeClassNames(props.scheme, props.tone, 'card', props.checkered && 'card-checkered'),
     shadow(props),
   )
 }

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

@@ -1,6 +1,6 @@
-import {ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
+import type {ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
 
-import {ShadowStyleProps} from '../../aspects'
+import type {ShadowStyleProps} from '../../aspects'
 
 /** @public */
 export interface CardStyleProps extends ShadowStyleProps {

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

@@ -1,48 +1,47 @@
-import {Style, StyleRules} from '../../types'
+import {varNames, vars} from '../../theme'
+import type {Style, StyleRules} from '../../types'
 
 const primitive: StyleRules = {
   '.checkbox': {
     position: 'relative',
-    display: 'inline-block',
+
+    nest: {
+      '&:not([hidden])': {
+        display: 'block',
+      },
+    },
   },
 
   '.checkbox-input': {
-    'position': 'absolute',
-    'top': 0,
-    'left': 0,
-    'width': '100%',
-    'height': '100%',
-    'outline': 'none',
-    'opacity': 0,
-    'zIndex': 1,
-    'padding': 0,
-    'margin': 0,
-
-    '@nest': {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    outline: 'none',
+    opacity: 0,
+    zIndex: 1,
+    padding: 0,
+    margin: 0,
+
+    nest: {
       '& + span': {
-        'position': 'relative',
-        'display': 'block',
-        'width': `var(--input-checkbox-size)`,
-        'height': `var(--input-checkbox-size)`,
-        'boxSizing': 'border-box',
-        'borderRadius': `var(--radius-2)`,
-        'lineHeight': 1,
-        'backgroundColor': `var(--color-checkbox-bg)`,
-        'boxShadow': `inset 0 0 0 1px var(--color-checkbox-border)`,
-        'color': `var(--color-checkbox-fg)`,
-
-        // '--color-checkbox-bg': 'var(--color-input-default-enabled-bg)',
-        // '--color-checkbox-border': 'var(--color-input-default-enabled-border)',
-        // '--color-checkbox-fg': 'var(--color-input-default-enabled-fg)',
-
-        '--color-checkbox-bg': 'var(--color-tinted-default-bg-0)',
-        '--color-checkbox-border': 'var(--color-tinted-default-border-1)',
-        '--color-checkbox-fg': 'var(--color-tinted-default-fg-0)',
-
-        // box-shadow: ${focusRingBorderStyle({
-        //   color: color.input.default.enabled.border,
-        //   width: input.border.width,
-        // })},
+        position: 'relative',
+        display: 'block',
+        width: vars.input.checkbox.size,
+        height: vars.input.checkbox.size,
+        boxSizing: 'border-box',
+        borderRadius: vars.radius[2],
+        lineHeight: 1,
+        backgroundColor: vars.color.input.checkbox.bg,
+        boxShadow: `inset 0 0 0 1px ${vars.color.input.checkbox.border}`,
+        color: vars.color.input.checkbox.fg,
+
+        vars: {
+          [varNames.color.input.checkbox.bg]: vars.color.tinted.default.bg[0],
+          [varNames.color.input.checkbox.border]: vars.color.tinted.default.border[2],
+          [varNames.color.input.checkbox.fg]: vars.color.tinted.default.fg[0],
+        },
       },
 
       '& + span > svg': {
@@ -58,94 +57,119 @@ const primitive: StyleRules = {
         strokeWidth: '1.5px !important',
       },
 
-      '&:hover + span': {
-        '--color-checkbox-bg': 'var(--color-tinted-default-bg-1)',
-        '--color-checkbox-border': 'var(--color-tinted-default-border-2)',
-        '--color-checkbox-fg': 'var(--color-tinted-default-fg-0)',
-      },
-
-      '&:checked + span': {
-        '--color-checkbox-bg': 'var(--color-solid-default-bg-0)',
-        '--color-checkbox-border': 'var(--color-solid-default-bg-0)',
-        '--color-checkbox-fg': 'var(--color-solid-default-fg-0)',
-        // '--color-checkbox-bg': 'var(--color-input-default-enabled-fg)',
-        // '--color-checkbox-border': 'var(--color-input-default-enabled-fg)',
-        // '--color-checkbox-fg': 'var(--color-input-default-enabled-bg)',
-        // box-shadow: ${focusRingBorderStyle({
-        //   color: color.input.default.enabled.fg,
-        //   width: input.border.width,
-        // })},
+      // show checkmark when checked
+      '&:checked + span > svg:first-child': {
+        opacity: 1,
       },
 
-      '&:checked + span > svg:first-child': {
+      // show minus when indeterminate
+      '&:indeterminate + span > svg:last-child': {
         opacity: 1,
       },
 
-      // focus
-      '&:not(:disabled):focus:focus-visible + span': {
-        // box-shadow: ${focusRingStyle({focusRing})},
+      // checked, not disabled, not invalid
+      '&:checked:not(:disabled):not([data-invalid]) + span': {
+        vars: {
+          [varNames.color.input.checkbox.bg]: vars.color.solid.default.bg[0],
+          [varNames.color.input.checkbox.border]: vars.color.solid.default.bg[0],
+          [varNames.color.input.checkbox.fg]: vars.color.solid.default.fg[0],
+        },
       },
 
-      // focus when checked - uses a different offset
-      '&:not(:disabled):focus:focus-visible&:checked + span': {
-        // box-shadow: ${focusRingStyle({focusRing: {width: 1, offset: 1}})},
+      // not checked, not invalid, hovered
+      '&:not(:checked):not([data-invalid]):hover + span': {
+        vars: {
+          [varNames.color.input.checkbox.bg]: vars.color.tinted.default.bg[1],
+          [varNames.color.input.checkbox.border]: vars.color.tinted.default.border[4],
+          [varNames.color.input.checkbox.fg]: vars.color.tinted.default.fg[0],
+        },
       },
 
-      '&[data-error] + span': {
-        '--color-checkbox-bg': 'var(--color-input-invalid-enabled-border)',
-        '--color-checkbox-border': 'var(--color-input-invalid-enabled-bg)',
-        '--color-checkbox-fg': 'var(--color-input-invalid-enabled-fg)',
-        // box-shadow: ${focusRingBorderStyle({
-        //   width: input.border.width,
-        //   color: color.input.invalid.enabled.muted.bg,
-        // })},
+      // not checked, not disabled, invalid
+      '&:not(:checked):not(:disabled)[data-invalid] + span': {
+        vars: {
+          [varNames.color.input.checkbox.bg]: vars.color.tinted.critical.bg[1],
+          [varNames.color.input.checkbox.border]: vars.color.tinted.critical.border[3],
+          [varNames.color.input.checkbox.fg]: vars.color.tinted.critical.fg[4],
+        },
       },
 
-      '&[data-error]:checked + span': {
-        '--color-checkbox-bg': 'var(--color-input-invalid-enabled-muted-bg)',
-        '--color-checkbox-fg': 'var(--color-input-invalid-enabled-bg)',
+      // not checked, invalid, hovered
+      '&:not(:checked)[data-invalid]:hover + span': {
+        vars: {
+          [varNames.color.input.checkbox.bg]: vars.color.tinted.critical.bg[2],
+          [varNames.color.input.checkbox.border]: vars.color.tinted.critical.border[4],
+          [varNames.color.input.checkbox.fg]: vars.color.tinted.critical.fg[1],
+          // [varNames.color.input.checkbox.border]: vars.color.focusRing,
+        },
       },
 
-      '&[data-error]:checked:not(:disabled):focus:focus-visible + span': {
-        '--color-checkbox-border': 'var(--color-input-invalid-readOnly-muted-bg)',
-        // box-shadow: ${focusRingStyle({
-        //   border: {width: input.border.width, color: color.input.invalid.readOnly.muted.bg},
-        //   focusRing: {width: 1, offset: 1},
-        // })},
+      // checked, not disabled, invalid
+      '&:checked:not(:disabled)[data-invalid] + span': {
+        vars: {
+          [varNames.color.input.checkbox.bg]: vars.color.solid.critical.bg[0],
+          [varNames.color.input.checkbox.border]: vars.color.solid.critical.bg[0],
+          [varNames.color.input.checkbox.fg]: vars.color.solid.critical.fg[0],
+        },
       },
 
-      '&:disabled + span': {
-        '--color-checkbox-bg': 'var(--color-tinted-default-bg-1)',
-        '--color-checkbox-border': 'var(--color-tinted-default-border-0)',
-        '--color-checkbox-fg': 'var(--color-tinted-default-border-2)',
+      // not checked, not indeterminate, read only
+      '&:not(:checked):not(:indeterminate)[data-read-only] + span': {
+        vars: {
+          [varNames.color.input.checkbox.bg]: vars.color.tinted.default.bg[0],
+          [varNames.color.input.checkbox.border]: vars.color.tinted.default.border[2],
+          [varNames.color.input.checkbox.fg]: vars.color.tinted.default.fg[0],
+        },
       },
 
-      '&:checked:disabled + span': {
-        '--color-checkbox-bg': 'var(--color-tinted-default-border-2)',
-        '--color-checkbox-border': 'var(--color-tinted-default-border-2)',
-        '--color-checkbox-fg': 'var(--color-tinted-default-bg-0)',
+      // checked, read only
+      '&:checked[data-read-only] + span': {
+        vars: {
+          [varNames.color.input.checkbox.bg]: vars.color.tinted.default.bg[1],
+        },
       },
 
-      // '&:disabled:checked + span': {
-      //   '--color-checkbox-bg': 'var(--color-input-default-disabled-muted-bg)',
-      // },
+      // not checked, focused
+      '&:not(:checked):focus:focus-visible + span': {
+        vars: {
+          [varNames.color.input.checkbox.border]: vars.color.focusRing,
+        },
+      },
 
-      '&[data-read-only] + span': {
-        '--color-checkbox-bg': 'var(--color-input-default-readOnly-bg)',
-        '--color-checkbox-border': 'var(--color-input-default-readOnly-border)',
-        '--color-checkbox-fg': 'var(--color-input-default-readOnly-fg)',
-        // box-shadow: ${focusRingBorderStyle({
-        //   width: input.border.width,
-        //   color: color.input.default.readOnly.border,
-        // })},
+      // checked, focused
+      '&:checked:focus:focus-visible + span': {
+        vars: {
+          [varNames.color.input.checkbox.border]: vars.color.focusRing,
+          [varNames.color.input.checkbox.bg]: vars.color.focusRing,
+          [varNames.color.input.checkbox.fg]: vars.color.solid.default.fg[0],
+        },
       },
 
-      '&[data-read-only]:checked + span': {
-        '--color-checkbox-bg': 'var(--color-input-default-readOnly-muted-bg)',
+      // not checked, disabled
+      '&:not(:checked):disabled + span': {
+        vars: {
+          [varNames.color.input.checkbox.bg]: vars.color.tinted.default.bg[1],
+          [varNames.color.input.checkbox.border]: vars.color.tinted.default.border[0],
+          [varNames.color.input.checkbox.fg]: vars.color.tinted.default.border[2],
+        },
       },
 
-      '&:indeterminate + span > svg:last-child': {
-        opacity: 1,
+      // checked, disabled
+      '&:checked:disabled + span': {
+        vars: {
+          [varNames.color.input.checkbox.bg]: vars.color.tinted.default.border[2],
+          [varNames.color.input.checkbox.border]: vars.color.tinted.default.border[2],
+          [varNames.color.input.checkbox.fg]: vars.color.tinted.default.bg[0],
+        },
+      },
+
+      // indeterminate, disabled
+      '&:indeterminate:disabled + span': {
+        vars: {
+          [varNames.color.input.checkbox.bg]: vars.color.tinted.default.bg[1],
+          [varNames.color.input.checkbox.border]: vars.color.tinted.default.border[0],
+          [varNames.color.input.checkbox.fg]: vars.color.tinted.default.border[2],
+        },
       },
     },
   },

package/src/css/primitives/checkbox/checkbox.ts

@@ -1,11 +1,11 @@
-import {_comp} from '../../_comp'
+import {_scopeClassNames} from '../../_scopeClassNames'
 
 /** @public */
 export function checkbox(): string | undefined {
-  return _comp('checkbox')
+  return _scopeClassNames('checkbox')
 }
 
 /** @public */
 export function checkboxInput(): string | undefined {
-  return _comp('checkbox-input')
+  return _scopeClassNames('checkbox-input')
 }