@sanity/ui 3.0.0-static.1 → 3.0.0-static.10

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

@@ -0,0 +1,270 @@
+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.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': {
+      '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',
+      },
+
+      '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],
+      },
+
+      '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],
+      },
+
+      // toggle button
+      'a&:not([data-disabled])[aria-pressed="true"], button&:not([data-disabled])[aria-pressed="true"]':
+        {
+          [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-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],
+      },
+
+      // '&:not([data-disabled]):focus': {
+      //   '--color-bg': vars.color.solid.bg[0],
+      //   '--color-border': vars.color.solid.border[1],
+      //   '--color-fg': vars.color.solid.fg[1],
+      //   '--color-muted-bg': vars.color.solid.bg[1],
+      //   '--color-muted-fg': vars.color.solid.fg[3],
+      // },
+
+      'a&[data-disabled]), button&[data-disabled]': {
+        [varNames.color.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.border]: vars.color.tinted.default.border[4],
+        [varNames.color.fg]: vars.color.tinted.default.fg[0],
+        [varNames.color.muted.bg]: vars.color.tinted.default.bg[3],
+        [varNames.color.muted.fg]: vars.color.tinted.default.fg[4],
+      },
+
+      // '&[data-disabled]': {
+      //   '--color-bg': vars.color.tinted.bg[0],
+      //   '--color-border': vars.color.tinted.border[1],
+      //   '--color-fg': vars.color.tinted.border[4],
+      //   '--color-muted-bg': vars.color.tinted.bg[1],
+      //   '--color-muted-fg': vars.color.tinted.border[4],
+      // },
+    },
+  },
+}
+
+// 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.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': 'var(--color-skeleton-from)',
+    // '--card-skeleton-to-color': 'var(--color-skeleton-to)',
+  })
+
+  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.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,
+  })
+
+  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,21 +1,14 @@
-import {composeClassNames} from '../../composeClassNames'
-import {border, BorderStyleProps} from '../../styles/border'
-import {radius, RadiusStyleProps} from '../../styles/radius'
-import {ResponsiveProp} from '../../types'
-import {box, BoxStyleProps} from '../box'
+import {_comp} from '../../_comp'
+import {shadow} from '../../aspects'
+import {toneMap} from './_constants'
+import {CardStyleProps} from './types'
 
-export interface CardStyleProps extends BoxStyleProps, BorderStyleProps, RadiusStyleProps {
-  checkered?: boolean
-  shadow?: ResponsiveProp<number>
-}
-
-export function card(props: CardStyleProps): string {
-  return composeClassNames(
+export function card(props: CardStyleProps): string | undefined {
+  return _comp(
+    props.scheme,
+    toneMap[props.tone ?? 'default'],
     'card',
     props.checkered && 'card-checkered',
-    box(props),
-    border(props),
-    radius(props),
-    props.shadow === undefined ? undefined : `shadow-${props.shadow}`,
+    shadow(props),
   )
 }

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

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

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

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

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

@@ -0,0 +1,154 @@
+import {Style, StyleRules} from '../../types'
+
+const primitive: StyleRules = {
+  '.checkbox': {
+    position: 'relative',
+    display: 'inline-block',
+  },
+
+  '.checkbox-input': {
+    '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,
+        // })},
+      },
+
+      '& + span > svg': {
+        display: 'block',
+        position: 'absolute',
+        opacity: 0,
+        height: '100%',
+        width: '100%',
+      },
+
+      '& + span > svg > path': {
+        vectorEffect: 'non-scaling-stroke',
+        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,
+        // })},
+      },
+
+      '&:checked + span > svg:first-child': {
+        opacity: 1,
+      },
+
+      // focus
+      '&:not(:disabled):focus:focus-visible + span': {
+        // box-shadow: ${focusRingStyle({focusRing})},
+      },
+
+      // focus when checked - uses a different offset
+      '&:not(:disabled):focus:focus-visible&:checked + span': {
+        // box-shadow: ${focusRingStyle({focusRing: {width: 1, offset: 1}})},
+      },
+
+      '&[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,
+        // })},
+      },
+
+      '&[data-error]:checked + span': {
+        '--color-checkbox-bg': 'var(--color-input-invalid-enabled-muted-bg)',
+        '--color-checkbox-fg': 'var(--color-input-invalid-enabled-bg)',
+      },
+
+      '&[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},
+        // })},
+      },
+
+      '&: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)',
+      },
+
+      '&: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)',
+      },
+
+      // '&:disabled:checked + span': {
+      //   '--color-checkbox-bg': 'var(--color-input-default-disabled-muted-bg)',
+      // },
+
+      '&[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,
+        // })},
+      },
+
+      '&[data-read-only]:checked + span': {
+        '--color-checkbox-bg': 'var(--color-input-default-readOnly-muted-bg)',
+      },
+
+      '&:indeterminate + span > svg:last-child': {
+        opacity: 1,
+      },
+    },
+  },
+}
+
+export const checkboxStyle: Style = {layers: {primitive}}

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

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

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

@@ -31,9 +31,14 @@ export const checkboxRules: Rules = {
         '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-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,
@@ -53,10 +58,19 @@ export const checkboxRules: Rules = {
         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-input-default-enabled-fg)',
-        '--color-checkbox-border': 'var(--color-input-default-enabled-fg)',
-        '--color-checkbox-fg': 'var(--color-input-default-enabled-bg)',
+        '--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,
@@ -101,19 +115,21 @@ export const checkboxRules: Rules = {
       },
 
       '&:disabled + span': {
-        '--color-checkbox-bg': 'var(--color-input-default-disabled-bg)',
-        '--color-checkbox-border': 'var(--color-input-default-disabled-border)',
-        '--color-checkbox-fg': 'var(--color-input-default-disabled-fg)',
-        // box-shadow: ${focusRingBorderStyle({
-        //   width: input.border.width,
-        //   color: color.input.default.disabled.border,
-        // })},
+        '--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)',
       },
 
-      '&:disabled:checked + span': {
-        '--color-checkbox-bg': 'var(--color-input-default-disabled-muted-bg)',
+      '&: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)',
       },
 
+      // '&:disabled:checked + span': {
+      //   '--color-checkbox-bg': 'var(--color-input-default-disabled-muted-bg)',
+      // },
+
       '&[data-read-only] + span': {
         '--color-checkbox-bg': 'var(--color-input-default-readOnly-bg)',
         '--color-checkbox-border': 'var(--color-input-default-readOnly-border)',

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

@@ -0,0 +1,62 @@
+import {FONT_CODE_SIZE} from '@sanity/ui/theme'
+
+import {_responsiveRule} from '../../_responsiveRule'
+import {Style, StyleRules} from '../../types'
+
+const primitive: StyleRules = {
+  '.code': {
+    '--font-weight-regular': `var(--font-code-weight-regular)`,
+    '--font-weight-medium': `var(--font-code-weight-medium)`,
+    '--font-weight-semibold': `var(--font-code-weight-semibold)`,
+    '--font-weight-bold': `var(--font-code-weight-bold)`,
+
+    '--font-family': `var(--font-code-family)`,
+    '--font-feature-settings': `var(--font-code-feature-settings)`,
+
+    'color': 'var(--color-code-fg)',
+
+    '@nest': {
+      '& > code': {
+        fontFamily: 'inherit',
+      },
+
+      // & code {
+      //   font-family: inherit;
+
+      //   &.refractor .token {
+      //     ${codeSyntaxHighlightingStyle}
+      //   }
+      // }
+
+      '& a': {
+        color: 'var(--color-link-fg)',
+        textDecoration: 'none',
+        borderRadius: '1px',
+      },
+
+      '& svg': {
+        // Some popular CSS libraries change the defaults for SVG display
+        // Make sure SVGs are rendered as inline elements
+        display: 'inline',
+      },
+
+      '& [data-sanity-icon]': {
+        verticalAlign: 'baseline',
+      },
+    },
+  },
+}
+
+for (const size of FONT_CODE_SIZE) {
+  _responsiveRule(primitive, `code-${size}`, {
+    '--font-size': `var(--font-code-${size}-size)`,
+    '--font-line-height': `var(--font-code-${size}-line-height)`,
+    '--font-letter-spacing': `var(--font-code-${size}-letter-spacing)`,
+    '--font-icon-size': `var(--font-code-${size}-icon-size)`,
+    '--font-ascender-height': `var(--font-code-${size}-ascender-height)`,
+    '--font-descender-height': `var(--font-code-${size}-descender-height)`,
+    // '--font-cap-height': `var(--font-code-${size}-cap-height)`,
+  })
+}
+
+export const codeStyle: Style = {layers: {primitive}}

package/src/css/primitives/code/code.ts

@@ -1,9 +1,9 @@
+import {_comp} from '../../_comp'
 import {_resp} from '../../_resp'
-import {composeClassNames} from '../../composeClassNames'
-import {font} from '../../styles/font'
+import {font} from '../../aspects'
 import {CodeStyleProps} from './types'
 
 /** @public */
-export function code(props: CodeStyleProps): string {
-  return composeClassNames('code', 'block', font(props), _resp(`code`, props.size))
+export function code(props: CodeStyleProps): string | undefined {
+  return _comp('code', 'block', font(props), _resp(`code`, props.size))
 }