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

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

@@ -1,175 +0,0 @@
-import {AVATAR_SIZE, THEME_COLOR_AVATAR_COLORS} from '@sanity/ui/theme'
-
-import {_responsiveRule} from '../../_responsiveRule'
-import {Properties, Style, StyleRules} from '../../types'
-import {varNames} from '../../varNames'
-import {vars} from '../../vars'
-
-const primitive: StyleRules = {
-  '.avatar': {
-    'backgroundColor': vars.color.avatar.bg,
-    'position': 'relative',
-    'boxSizing': 'border-box',
-    'userSelect': 'none',
-    'boxShadow': `0 0 0 1px ${vars.color.bg}`,
-    'lineHeight': 0,
-
-    'width': vars.avatar.size,
-    'height': vars.avatar.size,
-    'borderRadius': vars.avatar.size,
-
-    '@nest': {
-      '&[data-status="inactive"]': {
-        opacity: 0.5,
-      },
-
-      // &:is(button)
-      '&:is(button)': {
-        WebkitFontSmoothing: 'inherit',
-        appearance: 'none',
-        margin: 0,
-        padding: 0,
-        border: 0,
-        font: 'inherit',
-        color: 'inherit',
-        outline: 'none',
-      },
-
-      '&:is(button):focus': {
-        outline: 'var(--avatar-focus-ring-width) solid var(--color-focus-ring)',
-        outlineOffset: 'var(--avatar-focus-ring-offset)',
-      },
-
-      '&:is(button):focus:not(:focus-visible)': {
-        boxShadow: 'none',
-      },
-
-      ':disabled &, [data-disabled] &': {
-        [varNames.color.avatar.bg]: vars.color.border,
-        [varNames.color.avatar.fg]: vars.color.bg,
-      },
-
-      ...THEME_COLOR_AVATAR_COLORS.reduce(
-        (acc, color) => {
-          return {
-            ...acc,
-            [`&.${color}`]: {
-              [varNames.color.avatar.bg]: vars.color.avatar[color].bg,
-              [varNames.color.avatar.fg]: vars.color.avatar[color].fg,
-            },
-          }
-        },
-        {} as Record<string, Properties>,
-      ),
-    },
-  },
-
-  '.avatar-arrow': {
-    'position': 'absolute',
-    'boxSizing': 'border-box',
-    'zIndex': 0,
-    'opacity': 0,
-    'transition': 'all 0.2s linear',
-    'transform': 'rotate(-90deg) translate3d(0, 6px, 0)',
-    'left': 0,
-    'right': 0,
-    'top': 0,
-    'bottom': 0,
-
-    '@nest': {
-      '& > svg': {
-        display: 'block',
-        width: '11px',
-        height: '7px',
-        position: 'absolute',
-        top: '-5px',
-        left: '50%',
-        transform: 'translateX(-6px)',
-      },
-
-      '[data-arrow-position="inside"] > &': {
-        transform: 'rotate(-90deg) translate3d(0, 6px, 0)',
-        opacity: 0,
-      },
-
-      '[data-arrow-position="top"] > &': {
-        opacity: 1,
-        transform: 'rotate(0deg)',
-      },
-
-      '[data-arrow-position="bottom"] > &': {
-        opacity: 1,
-        transform: 'rotate(-180deg)',
-      },
-    },
-  },
-
-  '.avatar-image': {
-    '@nest': {
-      '& > img': {
-        display: 'block',
-        position: 'absolute',
-        width: vars.avatar.size,
-        height: vars.avatar.size,
-        borderRadius: vars.avatar.size,
-      },
-
-      '& > span': {
-        display: 'block',
-        position: 'absolute',
-        width: vars.avatar.size,
-        height: vars.avatar.size,
-        borderRadius: vars.avatar.size,
-        boxShadow: [
-          `inset 0 0 0 1px ${vars.color.avatar.bg}`,
-          `inset 0 0 0 1.75px ${vars.color.bg}`,
-        ].join(', '),
-      },
-
-      '[data-image-error] &': {
-        display: 'none',
-      },
-    },
-  },
-
-  '.avatar-initials': {
-    color: vars.color.avatar.fg,
-    borderRadius: vars.avatar.size,
-  },
-
-  '.avatar-counter': {
-    'color': vars.color.fg,
-    'backgroundColor': vars.color.bg,
-    'boxShadow': [`0 0 0 1px ${vars.color.bg}`, `inset 0 0 0 1px ${vars.color.border}`].join(', '),
-    'userSelect': 'none',
-    'borderRadius': vars.avatar.size,
-    'height': vars.avatar.size,
-
-    '@nest': {
-      '&&': {
-        minWidth: vars.avatar.size,
-      },
-
-      '[data-hide-inner-stroke] &': {
-        boxShadow: `0 0 0 1px ${vars.color.bg}`,
-      },
-    },
-  },
-
-  '.avatar-stack': {
-    '@nest': {
-      '& > div + div': {
-        marginLeft: vars.avatar.distance,
-      },
-    },
-  },
-}
-
-for (const size of AVATAR_SIZE) {
-  _responsiveRule(primitive, `avatar-${size}`, {
-    [varNames.avatar.distance]: vars.avatar.sizes[size].distance,
-    [varNames.avatar.size]: vars.avatar.sizes[size].size,
-  })
-}
-
-export const avatarStyle: Style = {layers: {primitive}}

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

@@ -1,22 +0,0 @@
-import {THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
-
-import {Style, StyleRules} from '../../types'
-import {varNames} from '../../varNames'
-import {vars} from '../../vars'
-
-const primitive: StyleRules = {
-  '.badge': {
-    backgroundColor: vars.color.bg,
-    color: vars.color.fg,
-    verticalAlign: 'top',
-  },
-}
-
-for (const tone of THEME_COLOR_STATE_TONES) {
-  primitive[`.badge-${tone}`] = {
-    [varNames.color.bg]: vars.color.tinted[tone].bg[4],
-    [varNames.color.fg]: vars.color.tinted[tone].fg[3],
-  }
-}
-
-export const badgeStyle: Style = {layers: {primitive}}

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

@@ -1,31 +0,0 @@
-import {Style, StyleRules} from '../../types'
-import {vars} from '../../vars'
-
-const primitive: StyleRules = {
-  '.box': {
-    // todo: move to aspects
-    '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/button/button.style.ts

@@ -1,201 +0,0 @@
-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)',
-    'alignItems': 'center',
-    // 'justifyContent': 'center',
-
-    '@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.bg]: solid.bg[1],
-    [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.bg]: solid.bg[2],
-        [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.bg]: solid.bg[3],
-        [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.bg]: solid.bg[3],
-        [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.bg]: vars.color.default.tinted.bg[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[0],
-    [varNames.color.fg]: tinted.fg[2],
-    [varNames.color.muted.bg]: tinted.bg[2],
-    [varNames.color.muted.fg]: tinted.fg[4],
-    '--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[1],
-        [varNames.color.fg]: tinted.fg[1],
-        [varNames.color.muted.bg]: tinted.bg[3],
-        [varNames.color.muted.fg]: tinted.fg[3],
-        // '--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[2],
-        [varNames.color.fg]: tinted.fg[1],
-        [varNames.color.muted.bg]: tinted.bg[4],
-        [varNames.color.muted.fg]: tinted.fg[3],
-        '--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[2],
-        [varNames.color.fg]: tinted.fg[1],
-        [varNames.color.muted.bg]: tinted.bg[4],
-        [varNames.color.muted.fg]: tinted.fg[3],
-        '--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],
-        [varNames.color.muted.bg]: vars.color.default.tinted.bg[2],
-        [varNames.color.muted.fg]: vars.color.default.tinted.fg[1],
-      },
-    },
-  }
-
-  // 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.bg]: tinted.bg[1],
-    [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.bg]: tinted.bg[2],
-        [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.bg]: tinted.bg[3],
-        [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.bg]: tinted.bg[3],
-        [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.bg]: vars.color.default.tinted.bg[1],
-        [varNames.color.muted.fg]: vars.color.default.tinted.fg[1],
-      },
-    },
-  }
-}
-
-export const buttonStyle: Style = {layers: {primitive}}

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

@@ -1,270 +0,0 @@
-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],
-      })
-    }
-  }
-}