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

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

@@ -0,0 +1,387 @@
+import {
+  AVATAR_COLORS,
+  CARD_TONES,
+  type CardTone,
+  COLOR_SCHEMES,
+  COLOR_VARIANTS,
+  type ColorScheme,
+  ELEMENT_TONES,
+} from '@sanity/ui/theme'
+import {type StyleRule} from '@vanilla-extract/css'
+
+import {_assign} from '../../_assign'
+import {_fromEntries} from '../../_fromEntries'
+import {_style} from '../../_style.css'
+import {layers} from '../../layers.css'
+import {vars} from '../../vars.css'
+
+export const root: string = _style(layers.primitives, {
+  backgroundColor: vars.color.bg,
+  color: vars.color.fg,
+
+  //
+  transition:
+    'background-color 100ms ease-in-out, border-color 100ms, box-shadow 100ms ease-in-out, color 100ms ease-in-out',
+
+  vars: {
+    [vars.color.bg]: vars.color.tinted.default.bg[0],
+    [vars.color.border]: vars.color.tinted.default.border[1],
+    [vars.color.fg]: vars.color.tinted.default.fg[0],
+    [vars.color.muted.bg]: vars.color.tinted.default.bg[1],
+    [vars.color.muted.border]: vars.color.tinted.default.bg[0],
+    [vars.color.muted.fg]: vars.color.tinted.default.fg[4],
+  },
+
+  selectors: {
+    'button.&': {
+      WebkitFontSmoothing: 'inherit',
+      appearance: 'none',
+      outline: 'none',
+      font: 'inherit',
+      textAlign: 'inherit',
+      border: 'none',
+      // See https://caniuse.com/?search=width%3A%20stretch
+      width: ['-moz-available', '-webkit-fill-available', 'stretch'],
+    },
+
+    'a.&': {
+      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: {
+        [vars.color.bg]: vars.color.tinted.default.bg[1],
+        [vars.color.border]: vars.color.tinted.default.border[3],
+        [vars.color.fg]: vars.color.tinted.default.fg[1],
+        [vars.color.code.bg]: vars.color.tinted.default.bg[2],
+        [vars.color.code.fg]: vars.color.tinted.default.fg[4],
+        [vars.color.muted.bg]: vars.color.tinted.default.bg[2],
+        [vars.color.muted.fg]: vars.color.tinted.default.fg[4],
+      },
+    },
+
+    'a&:not([data-disabled]):active, button&:not([data-disabled]):active': {
+      vars: {
+        [vars.color.bg]: vars.color.tinted.default.bg[2],
+        [vars.color.border]: vars.color.tinted.default.border[4],
+        [vars.color.fg]: vars.color.tinted.default.fg[0],
+        [vars.color.code.bg]: vars.color.tinted.default.bg[3],
+        [vars.color.code.fg]: vars.color.tinted.default.fg[4],
+        [vars.color.muted.bg]: vars.color.tinted.default.bg[3],
+        [vars.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: {
+          [vars.color.bg]: vars.color.tinted.default.bg[2],
+          [vars.color.border]: vars.color.tinted.default.border[4],
+          [vars.color.fg]: vars.color.tinted.default.fg[0],
+          [vars.color.code.bg]: vars.color.tinted.default.bg[3],
+          [vars.color.code.fg]: vars.color.tinted.default.fg[4],
+          [vars.color.muted.bg]: vars.color.tinted.default.bg[3],
+          [vars.color.muted.fg]: vars.color.tinted.default.fg[4],
+        },
+      },
+
+    'a&:not([data-disabled])[data-pressed], button&:not([data-disabled])[data-pressed]': {
+      vars: {
+        [vars.color.bg]: vars.color.tinted.default.bg[2],
+        [vars.color.border]: vars.color.tinted.default.border[4],
+        [vars.color.fg]: vars.color.tinted.default.fg[0],
+        [vars.color.code.bg]: vars.color.tinted.default.bg[3],
+        [vars.color.code.fg]: vars.color.tinted.default.fg[4],
+        [vars.color.muted.bg]: vars.color.tinted.default.bg[3],
+        [vars.color.muted.fg]: vars.color.tinted.default.fg[4],
+      },
+    },
+
+    'a&:not([data-disabled])[data-selected], button&:not([data-disabled])[data-selected]': {
+      vars: {
+        [vars.color.bg]: vars.color.solid.primary.bg[0],
+        [vars.color.border]: vars.color.solid.primary.border[1],
+        [vars.color.fg]: vars.color.solid.primary.fg[0],
+        [vars.color.code.bg]: vars.color.solid.primary.bg[1],
+        [vars.color.code.fg]: vars.color.solid.primary.fg[3],
+        [vars.color.muted.bg]: vars.color.solid.primary.bg[1],
+        [vars.color.muted.fg]: vars.color.solid.primary.fg[3],
+      },
+    },
+
+    'a&[data-disabled], button&[data-disabled]': {
+      vars: {
+        [vars.color.bg]: vars.color.tinted.default.bg[0],
+        [vars.color.border]: vars.color.tinted.default.border[1],
+        [vars.color.fg]: vars.color.tinted.default.border[3],
+        [vars.color.code.bg]: vars.color.tinted.default.bg[0],
+        [vars.color.code.fg]: vars.color.tinted.default.border[2],
+        [vars.color.muted.bg]: vars.color.tinted.default.bg[1],
+        [vars.color.muted.fg]: vars.color.tinted.default.border[2],
+      },
+    },
+  },
+})
+
+export const schemes: Record<ColorScheme, string> = _fromEntries(
+  COLOR_SCHEMES.map((s) => [
+    s,
+    _style(layers.primitives, {
+      colorScheme: s,
+      vars: buildSchemeVars(s),
+    }),
+  ]),
+)
+
+function buildSchemeVars(scheme: ColorScheme) {
+  const schemeVars: Record<string, string> = {}
+
+  for (const tone of CARD_TONES) {
+    const target = vars.color[tone]
+    const source = vars.color[scheme][tone]
+
+    for (const hue of AVATAR_COLORS) {
+      schemeVars[target.avatar[hue].bg] = source.avatar[hue].bg
+      schemeVars[target.avatar[hue].fg] = source.avatar[hue].fg
+    }
+
+    _assign(schemeVars, {
+      [target.backdrop]: source.backdrop,
+      // [target.bg]: source.tinted.default.bg[0],
+      // [target.border]: source.tinted.default.border[0],
+
+      [target.code.fg]: source.code.fg,
+      [target.code.bg]: source.code.bg,
+
+      [target.code.token.atrule]: source.code.token.atrule,
+      [target.code.token.attrName]: source.code.token.attrName,
+      [target.code.token.attrValue]: source.code.token.attrValue,
+      [target.code.token.attribute]: source.code.token.attribute,
+      [target.code.token.boolean]: source.code.token.boolean,
+      [target.code.token.builtin]: source.code.token.builtin,
+      [target.code.token.cdata]: source.code.token.cdata,
+      [target.code.token.char]: source.code.token.char,
+      [target.code.token.class]: source.code.token.class,
+      [target.code.token.className]: source.code.token.className,
+      [target.code.token.comment]: source.code.token.comment,
+      [target.code.token.constant]: source.code.token.constant,
+      [target.code.token.deleted]: source.code.token.deleted,
+      [target.code.token.doctype]: source.code.token.doctype,
+      [target.code.token.entity]: source.code.token.entity,
+      [target.code.token.function]: source.code.token.function,
+      [target.code.token.hexcode]: source.code.token.hexcode,
+      [target.code.token.id]: source.code.token.id,
+      [target.code.token.important]: source.code.token.important,
+      [target.code.token.inserted]: source.code.token.inserted,
+      [target.code.token.keyword]: source.code.token.keyword,
+      [target.code.token.number]: source.code.token.number,
+      [target.code.token.operator]: source.code.token.operator,
+      [target.code.token.prolog]: source.code.token.prolog,
+      [target.code.token.property]: source.code.token.property,
+      [target.code.token.pseudoClass]: source.code.token.pseudoClass,
+      [target.code.token.pseudoElement]: source.code.token.pseudoElement,
+      [target.code.token.punctuation]: source.code.token.punctuation,
+      [target.code.token.regex]: source.code.token.regex,
+      [target.code.token.selector]: source.code.token.selector,
+      [target.code.token.string]: source.code.token.string,
+      [target.code.token.symbol]: source.code.token.symbol,
+      [target.code.token.tag]: source.code.token.tag,
+      [target.code.token.unit]: source.code.token.unit,
+      [target.code.token.url]: source.code.token.url,
+      [target.code.token.variable]: source.code.token.variable,
+
+      [target.focusRing]: source.focusRing,
+      [target.link.fg]: source.link.fg,
+
+      [target.shadow.outline]: source.shadow.outline,
+      [target.shadow.umbra]: source.shadow.umbra,
+      [target.shadow.penumbra]: source.shadow.penumbra,
+      [target.shadow.ambient]: source.shadow.ambient,
+
+      [target.skeleton.from]: source.skeleton.from,
+      [target.skeleton.to]: source.skeleton.to,
+    })
+
+    for (const variant of COLOR_VARIANTS) {
+      for (const elementTone of ELEMENT_TONES) {
+        const _target = vars.color[tone][variant][elementTone]
+        const _source = vars.color[scheme][tone][variant][elementTone]
+
+        _assign(schemeVars, {
+          [_target.bg[0]]: _source.bg[0],
+          [_target.bg[4]]: _source.bg[4],
+          [_target.border[0]]: _source.border[0],
+          [_target.border[4]]: _source.border[4],
+          [_target.fg[0]]: _source.fg[0],
+          [_target.fg[4]]: _source.fg[4],
+        })
+      }
+    }
+  }
+
+  return schemeVars
+}
+
+export const tones: Record<CardTone, string> = _fromEntries(
+  CARD_TONES.map((t) => [t, _style(layers.primitives, buildToneRule(t))]),
+)
+
+function buildToneRule(tone: CardTone): StyleRule {
+  const target = vars.color
+  const source = vars.color[tone]
+
+  const toneVars: Record<string, string> = {}
+
+  for (const hue of AVATAR_COLORS) {
+    toneVars[target.avatar[hue].bg] = source.avatar[hue].bg
+    toneVars[target.avatar[hue].fg] = source.avatar[hue].fg
+  }
+
+  _assign(toneVars, {
+    [target.backdrop]: source.backdrop,
+
+    [target.code.fg]: source.code.fg,
+    [target.code.bg]: source.code.bg,
+
+    [target.code.token.atrule]: source.code.token.atrule,
+    [target.code.token.attrName]: source.code.token.attrName,
+    [target.code.token.attrValue]: source.code.token.attrValue,
+    [target.code.token.attribute]: source.code.token.attribute,
+    [target.code.token.boolean]: source.code.token.boolean,
+    [target.code.token.builtin]: source.code.token.builtin,
+    [target.code.token.cdata]: source.code.token.cdata,
+    [target.code.token.char]: source.code.token.char,
+    [target.code.token.class]: source.code.token.class,
+    [target.code.token.className]: source.code.token.className,
+    [target.code.token.comment]: source.code.token.comment,
+    [target.code.token.constant]: source.code.token.constant,
+    [target.code.token.deleted]: source.code.token.deleted,
+    [target.code.token.doctype]: source.code.token.doctype,
+    [target.code.token.entity]: source.code.token.entity,
+    [target.code.token.function]: source.code.token.function,
+    [target.code.token.hexcode]: source.code.token.hexcode,
+    [target.code.token.id]: source.code.token.id,
+    [target.code.token.important]: source.code.token.important,
+    [target.code.token.inserted]: source.code.token.inserted,
+    [target.code.token.keyword]: source.code.token.keyword,
+    [target.code.token.number]: source.code.token.number,
+    [target.code.token.operator]: source.code.token.operator,
+    [target.code.token.prolog]: source.code.token.prolog,
+    [target.code.token.property]: source.code.token.property,
+    [target.code.token.pseudoClass]: source.code.token.pseudoClass,
+    [target.code.token.pseudoElement]: source.code.token.pseudoElement,
+    [target.code.token.punctuation]: source.code.token.punctuation,
+    [target.code.token.regex]: source.code.token.regex,
+    [target.code.token.selector]: source.code.token.selector,
+    [target.code.token.string]: source.code.token.string,
+    [target.code.token.symbol]: source.code.token.symbol,
+    [target.code.token.tag]: source.code.token.tag,
+    [target.code.token.unit]: source.code.token.unit,
+    [target.code.token.url]: source.code.token.url,
+    [target.code.token.variable]: source.code.token.variable,
+
+    [target.focusRing]: source.focusRing,
+    [target.link.fg]: source.link.fg,
+
+    [target.shadow.outline]: source.shadow.outline,
+    [target.shadow.umbra]: source.shadow.umbra,
+    [target.shadow.penumbra]: source.shadow.penumbra,
+    [target.shadow.ambient]: source.shadow.ambient,
+
+    [target.skeleton.from]: source.skeleton.from,
+    [target.skeleton.to]: source.skeleton.to,
+  })
+
+  for (const variant of COLOR_VARIANTS) {
+    for (const elementTone of ELEMENT_TONES) {
+      const _target = vars.color[variant][elementTone]
+      const _source = vars.color[tone][variant][elementTone]
+
+      _assign(toneVars, {
+        [_target.bg[0]]: _source.bg[0],
+        [_target.bg[1]]: `color-mix(in oklab, ${_source.bg[0]}, ${_source.bg[4]} 25%)`,
+        [_target.bg[2]]: `color-mix(in oklab, ${_source.bg[0]}, ${_source.bg[4]} 50%)`,
+        [_target.bg[3]]: `color-mix(in oklab, ${_source.bg[0]}, ${_source.bg[4]} 75%)`,
+        [_target.bg[4]]: _source.bg[4],
+
+        [_target.border[0]]: _source.border[0],
+        [_target.border[1]]: `color-mix(in oklab, ${_source.border[0]}, ${_source.border[4]} 25%)`,
+        [_target.border[2]]: `color-mix(in oklab, ${_source.border[0]}, ${_source.border[4]} 50%)`,
+        [_target.border[3]]: `color-mix(in oklab, ${_source.border[0]}, ${_source.border[4]} 75%)`,
+        [_target.border[4]]: _source.border[4],
+
+        [_target.fg[0]]: _source.fg[0],
+        [_target.fg[1]]: `color-mix(in oklab, ${_source.fg[0]}, ${_source.fg[4]} 25%)`,
+        [_target.fg[2]]: `color-mix(in oklab, ${_source.fg[0]}, ${_source.fg[4]} 50%)`,
+        [_target.fg[3]]: `color-mix(in oklab, ${_source.fg[0]}, ${_source.fg[4]} 75%)`,
+        [_target.fg[4]]: _source.fg[4],
+      })
+    }
+  }
+
+  // assign legacy vars
+  // todo: remove before release?
+  _assign(toneVars, {
+    '--card-accent-fg-color': vars.color.tinted.suggest.fg[4],
+  })
+  for (const color of AVATAR_COLORS) {
+    _assign(toneVars, {
+      [`--card-avatar-${color}-bg-color`]: vars.color.avatar[color].bg,
+      [`--card-avatar-${color}-fg-color`]: vars.color.avatar[color].fg,
+    })
+  }
+  _assign(toneVars, {
+    '--card-backdrop-color': vars.color.backdrop,
+  })
+  for (const tone of ELEMENT_TONES) {
+    _assign(toneVars, {
+      [`--card-badge-${tone}-bg-color`]: vars.color.tinted[tone].bg[1],
+      [`--card-badge-${tone}-dot-color`]: vars.color.tinted[tone].fg[4],
+      [`--card-badge-${tone}-fg-color`]: vars.color.tinted[tone].fg[2],
+      [`--card-badge-${tone}-icon-color`]: vars.color.tinted[tone].fg[4],
+    })
+  }
+  _assign(toneVars, {
+    '--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,
+  })
+
+  return {
+    vars: toneVars,
+  }
+}

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

@@ -1,14 +1,13 @@
-import {_comp} from '../../_comp'
-import {shadow} from '../../aspects'
-import {toneMap} from './_constants'
-import {CardStyleProps} from './types'
+import {_composeClassNames} from '../../_composeClassNames'
+import {root, schemes, tones} from './card.css'
+import type {CardStyleProps} from './types'
 
+/** @public */
 export function card(props: CardStyleProps): string | undefined {
-  return _comp(
-    props.scheme,
-    toneMap[props.tone ?? 'default'],
-    'card',
-    props.checkered && 'card-checkered',
-    shadow(props),
+  return _composeClassNames(
+    props.className,
+    root,
+    props.scheme && schemes[props.scheme],
+    props.tone && props.tone !== 'inherit' && tones[props.tone],
   )
 }

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

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

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

@@ -0,0 +1,193 @@
+import {globalStyle} from '@vanilla-extract/css'
+
+import {_style} from '../../_style.css'
+import {layers} from '../../layers.css'
+import {vars} from '../../vars.css'
+
+export const root: string = _style(layers.primitives, {
+  position: 'relative',
+
+  selectors: {
+    '&:not([hidden])': {
+      display: 'block',
+    },
+  },
+})
+
+export const input: string = _style(layers.primitives, {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: '100%',
+  height: '100%',
+  outline: 'none',
+  opacity: 0,
+  zIndex: 1,
+  padding: 0,
+  margin: 0,
+})
+
+export const presentation: string = _style(layers.primitives, {
+  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: {
+    [vars.color.input.checkbox.bg]: vars.color.tinted.default.bg[0],
+    [vars.color.input.checkbox.border]: vars.color.tinted.default.border[2],
+    [vars.color.input.checkbox.fg]: vars.color.tinted.default.fg[0],
+  },
+
+  selectors: {
+    // checked, not disabled, not invalid
+    ':checked:not(:disabled):not([data-invalid]) + &': {
+      vars: {
+        [vars.color.input.checkbox.bg]: vars.color.solid.default.bg[0],
+        [vars.color.input.checkbox.border]: vars.color.solid.default.bg[0],
+        [vars.color.input.checkbox.fg]: vars.color.solid.default.fg[0],
+      },
+    },
+
+    // not checked, not invalid, hovered
+    ':not(:checked):not([data-invalid]):hover + &': {
+      vars: {
+        [vars.color.input.checkbox.bg]: vars.color.tinted.default.bg[1],
+        [vars.color.input.checkbox.border]: vars.color.tinted.default.border[4],
+        [vars.color.input.checkbox.fg]: vars.color.tinted.default.fg[0],
+      },
+    },
+
+    // not checked, not disabled, invalid
+    ':not(:checked):not(:disabled)[data-invalid] + &': {
+      vars: {
+        [vars.color.input.checkbox.bg]: vars.color.tinted.critical.bg[1],
+        [vars.color.input.checkbox.border]: vars.color.tinted.critical.border[3],
+        [vars.color.input.checkbox.fg]: vars.color.tinted.critical.fg[4],
+      },
+    },
+
+    // not checked, invalid, hovered
+    ':not(:checked)[data-invalid]:hover + &': {
+      vars: {
+        [vars.color.input.checkbox.bg]: vars.color.tinted.critical.bg[2],
+        [vars.color.input.checkbox.border]: vars.color.tinted.critical.border[4],
+        [vars.color.input.checkbox.fg]: vars.color.tinted.critical.fg[1],
+        // [vars.color.input.checkbox.border]: vars.color.focusRing,
+      },
+    },
+
+    // checked, not disabled, invalid
+    ':checked:not(:disabled)[data-invalid] + &': {
+      vars: {
+        [vars.color.input.checkbox.bg]: vars.color.solid.critical.bg[0],
+        [vars.color.input.checkbox.border]: vars.color.solid.critical.bg[0],
+        [vars.color.input.checkbox.fg]: vars.color.solid.critical.fg[0],
+      },
+    },
+
+    // not checked, not indeterminate, read only
+    ':not(:checked):not(:indeterminate)[data-read-only] + &': {
+      vars: {
+        [vars.color.input.checkbox.bg]: vars.color.tinted.default.bg[0],
+        [vars.color.input.checkbox.border]: vars.color.tinted.default.border[2],
+        [vars.color.input.checkbox.fg]: vars.color.tinted.default.fg[0],
+      },
+    },
+
+    // checked, read only
+    ':checked[data-read-only] + &': {
+      vars: {
+        [vars.color.input.checkbox.bg]: vars.color.tinted.default.bg[1],
+      },
+    },
+
+    // not checked, focused
+    ':not(:checked):focus:focus-visible + &': {
+      vars: {
+        [vars.color.input.checkbox.border]: vars.color.focusRing,
+      },
+    },
+
+    // checked, focused
+    ':checked:focus:focus-visible + &': {
+      vars: {
+        [vars.color.input.checkbox.border]: vars.color.focusRing,
+        [vars.color.input.checkbox.bg]: vars.color.focusRing,
+        [vars.color.input.checkbox.fg]: vars.color.solid.default.fg[0],
+      },
+    },
+
+    // not checked, disabled
+    ':not(:checked):disabled + &': {
+      vars: {
+        [vars.color.input.checkbox.bg]: vars.color.tinted.default.bg[1],
+        [vars.color.input.checkbox.border]: vars.color.tinted.default.border[0],
+        [vars.color.input.checkbox.fg]: vars.color.tinted.default.border[2],
+      },
+    },
+
+    // checked, disabled
+    ':checked:disabled + &': {
+      vars: {
+        [vars.color.input.checkbox.bg]: vars.color.tinted.default.border[2],
+        [vars.color.input.checkbox.border]: vars.color.tinted.default.border[2],
+        [vars.color.input.checkbox.fg]: vars.color.tinted.default.bg[0],
+      },
+    },
+
+    // indeterminate, disabled
+    ':indeterminate:disabled + &': {
+      vars: {
+        [vars.color.input.checkbox.bg]: vars.color.tinted.default.bg[1],
+        [vars.color.input.checkbox.border]: vars.color.tinted.default.border[0],
+        [vars.color.input.checkbox.fg]: vars.color.tinted.default.border[2],
+      },
+    },
+  },
+})
+
+globalStyle(`${presentation} svg`, {
+  '@layer': {
+    [layers.primitives]: {
+      display: 'block',
+      position: 'absolute',
+      opacity: 0,
+      height: '100%',
+      width: '100%',
+    },
+  },
+})
+
+globalStyle(`${presentation} svg > path`, {
+  '@layer': {
+    [layers.primitives]: {
+      vectorEffect: 'non-scaling-stroke',
+      strokeWidth: '1.5px !important',
+    },
+  },
+})
+
+// show checkmark when checked
+globalStyle(`:checked + ${presentation} svg:first-child`, {
+  '@layer': {
+    [layers.primitives]: {
+      opacity: 1,
+    },
+  },
+})
+
+// show minus when indeterminate
+globalStyle(`:indeterminate + ${presentation} svg:last-child`, {
+  '@layer': {
+    [layers.primitives]: {
+      opacity: 1,
+    },
+  },
+})

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

@@ -1,9 +1,17 @@
-import {_comp} from '../../_comp'
+import {_composeClassNames} from '../../_composeClassNames'
+import {input, presentation, root} from './checkbox.css'
 
-export function checkbox(): string | undefined {
-  return _comp('checkbox')
+/** @public */
+export function checkbox(props: {className?: string}): string | undefined {
+  return _composeClassNames(props.className, root)
 }
 
-export function checkboxInput(): string | undefined {
-  return _comp('checkbox-input')
+/** @public */
+export function checkboxInput(): string {
+  return input
+}
+
+/** @public */
+export function checkboxPresentation(): string {
+  return presentation
 }