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

package/src/css/varNames.ts

@@ -1,42 +1,59 @@
 import {
-  Space,
+  AVATAR_SIZE,
+  AvatarSize,
+  FONT_CODE_SIZE,
+  FONT_HEADING_SIZE,
+  FONT_LABEL_SIZE,
+  FONT_TEXT_SIZE,
+  type FontCodeSize,
+  type FontHeadingSize,
+  type FontLabelSize,
+  type FontTextSize,
   SPACE,
-  ThemeColorCardToneKey,
-  ThemeColorInputModeKey,
-  ThemeColorInputStateKey,
-  ThemeColorSchemeKey,
+  type Space,
+  THEME_COLOR_STATE_TONES,
+  type ThemeColorCardToneKey as CardTone,
+  type ThemeColorSchemeKey as Scheme,
 } from '@sanity/ui/theme'
+
 import {
   type ColorCardVarNames,
-  type ColorInputStateVarNames,
+  type ColorVariantVarNames,
   type CSSVarName,
+  type FontSizeVarNames,
   type VarNames,
 } from './types'
 
 export const varNames: VarNames = {
-  color: {
-    dark: {
-      transparent: buildColorCardVarNames({scheme: 'dark', tone: 'transparent'}),
-      default: buildColorCardVarNames({scheme: 'dark', tone: 'default'}),
-      primary: buildColorCardVarNames({scheme: 'dark', tone: 'primary'}),
-      positive: buildColorCardVarNames({scheme: 'dark', tone: 'positive'}),
-      caution: buildColorCardVarNames({scheme: 'dark', tone: 'caution'}),
-      critical: buildColorCardVarNames({scheme: 'dark', tone: 'critical'}),
-    },
-    light: {
-      transparent: buildColorCardVarNames({scheme: 'light', tone: 'transparent'}),
-      default: buildColorCardVarNames({scheme: 'light', tone: 'default'}),
-      primary: buildColorCardVarNames({scheme: 'light', tone: 'primary'}),
-      positive: buildColorCardVarNames({scheme: 'light', tone: 'positive'}),
-      caution: buildColorCardVarNames({scheme: 'light', tone: 'caution'}),
-      critical: buildColorCardVarNames({scheme: 'light', tone: 'critical'}),
+  avatar: {
+    distance: `--avatar-distance`,
+    focusRing: {
+      offset: `--avatar-focus-ring-offset`,
+      width: `--avatar-focus-ring-width`,
     },
-
-    //
+    size: `--avatar-size`,
+    sizes: AVATAR_SIZE.reduce(
+      (acc, size) => {
+        return {
+          ...acc,
+          [size]: {
+            distance: `--avatar-${size}-distance`,
+            size: `--avatar-${size}-size`,
+          } satisfies {distance: CSSVarName; size: CSSVarName},
+        }
+      },
+      {} as Record<AvatarSize, {distance: CSSVarName; size: CSSVarName}>,
+    ),
+  },
+  color: {
+    // card scope
     accent: {
       fg: `--color-accent-fg`,
     },
     avatar: {
+      bg: `--color-avatar-bg`,
+      fg: `--color-avatar-fg`,
+
       gray: {
         bg: `--color-avatar-gray-bg`,
         fg: `--color-avatar-gray-fg`,
@@ -59,7 +76,7 @@ export const varNames: VarNames = {
       },
       orange: {
         bg: `--color-avatar-orange-bg`,
-        fg: `--color-avatar-orange-fg`,
+        fg: `--color-avatar-gray-fg`,
       },
       yellow: {
         bg: `--color-avatar-yellow-bg`,
@@ -71,57 +88,19 @@ export const varNames: VarNames = {
       },
       cyan: {
         bg: `--color-avatar-cyan-bg`,
-        fg: `--color-avatar-cyan-fg`,
-      },
-    },
-    badge: {
-      bg: `--color-badge-bg`,
-      dot: `--color-badge-dot`,
-      fg: `--color-badge-fg`,
-      icon: `--color-badge-icon`,
-      default: {
-        bg: `--color-badge-default-bg`,
-        dot: `--color-badge-default-dot`,
-        fg: `--color-badge-default-fg`,
-        icon: `--color-badge-default-icon`,
-      },
-      primary: {
-        bg: `--color-badge-primary-bg`,
-        dot: `--color-badge-primary-dot`,
-        fg: `--color-badge-primary-fg`,
-        icon: `--color-badge-primary-icon`,
-      },
-      positive: {
-        bg: `--color-badge-positive-bg`,
-        dot: `--color-badge-positive-dot`,
-        fg: `--color-badge-positive-fg`,
-        icon: `--color-badge-positive-icon`,
-      },
-      caution: {
-        bg: `--color-badge-caution-bg`,
-        dot: `--color-badge-caution-dot`,
-        fg: `--color-badge-caution-fg`,
-        icon: `--color-badge-caution-icon`,
-      },
-      critical: {
-        bg: `--color-badge-critical-bg`,
-        dot: `--color-badge-critical-dot`,
-        fg: `--color-badge-critical-fg`,
-        icon: `--color-badge-critical-icon`,
+        fg: `--color-avatar-yellow-fg`,
       },
     },
+    backdrop: `--color-backdrop`,
     bg: `--color-bg`,
     border: `--color-border`,
-    code: {
-      bg: `--color-code-bg`,
-      fg: `--color-code-fg`,
-    },
     fg: `--color-fg`,
-    icon: `--color-icon`,
-    kbd: {
-      bg: `--color-kbd-bg`,
-      border: `--color-kbd-border`,
-      fg: `--color-kbd-fg`,
+    focusRing: `--color-focus-ring`,
+    input: {
+      bg: `--color-input-bg`,
+      border: `--color-input-border`,
+      fg: `--color-input-fg`,
+      placeholder: `--color-input-placeholder`,
     },
     link: {
       fg: `--color-link-fg`,
@@ -140,242 +119,355 @@ export const varNames: VarNames = {
       from: `--color-skeleton-from`,
       to: `--color-skeleton-to`,
     },
-    syntax: {
-      atrule: `--color-syntax-atrule`,
-      attrName: `--color-syntax-attrName`,
-      attrValue: `--color-syntax-attrValue`,
-      attribute: `--color-syntax-attribute`,
-      boolean: `--color-syntax-boolean`,
-      builtin: `--color-syntax-builtin`,
-      cdata: `--color-syntax-cdata`,
-      char: `--color-syntax-char`,
-      class: `--color-syntax-class`,
-      className: `--color-syntax-className`,
-      comment: `--color-syntax-comment`,
-      constant: `--color-syntax-constant`,
-      deleted: `--color-syntax-deleted`,
-      doctype: `--color-syntax-doctype`,
-      entity: `--color-syntax-entity`,
-      function: `--color-syntax-function`,
-      hexcode: `--color-syntax-hexcode`,
-      id: `--color-syntax-id`,
-      important: `--color-syntax-important`,
-      inserted: `--color-syntax-inserted`,
-      keyword: `--color-syntax-keyword`,
-      number: `--color-syntax-number`,
-      operator: `--color-syntax-operator`,
-      prolog: `--color-syntax-prolog`,
-      property: `--color-syntax-property`,
-      pseudoClass: `--color-syntax-pseudoClass`,
-      pseudoElement: `--color-syntax-pseudoElement`,
-      punctuation: `--color-syntax-punctuation`,
-      regex: `--color-syntax-regex`,
-      selector: `--color-syntax-selector`,
-      string: `--color-syntax-string`,
-      symbol: `--color-syntax-symbol`,
-      tag: `--color-syntax-tag`,
-      unit: `--color-syntax-unit`,
-      url: `--color-syntax-url`,
-      variable: `--color-syntax-variable`,
+    token: {
+      atrule: `--color-token-atrule`,
+      attrName: `--color-token-attr-name`,
+      attrValue: `--color-token-attr-value`,
+      attribute: `--color-token-attribute`,
+      boolean: `--color-token-boolean`,
+      builtin: `--color-token-builtin`,
+      cdata: `--color-token-cdata`,
+      char: `--color-token-char`,
+      class: `--color-token-class`,
+      className: `--color-token-class-name`,
+      comment: `--color-token-comment`,
+      constant: `--color-token-constant`,
+      deleted: `--color-token-deleted`,
+      doctype: `--color-token-doctype`,
+      entity: `--color-token-entity`,
+      function: `--color-token-function`,
+      hexcode: `--color-token-hexcode`,
+      id: `--color-token-id`,
+      important: `--color-token-important`,
+      inserted: `--color-token-inserted`,
+      keyword: `--color-token-keyword`,
+      number: `--color-token-number`,
+      operator: `--color-token-operator`,
+      prolog: `--color-token-prolog`,
+      property: `--color-token-property`,
+      pseudoClass: `--color-token-pseudo-class`,
+      pseudoElement: `--color-token-pseudo-element`,
+      punctuation: `--color-token-punctuation`,
+      regex: `--color-token-regex`,
+      selector: `--color-token-selector`,
+      string: `--color-token-string`,
+      symbol: `--color-token-symbol`,
+      tag: `--color-token-tag`,
+      unit: `--color-token-unit`,
+      url: `--color-token-url`,
+      variable: `--color-token-variable`,
+    },
+
+    solid: buildColorVariantVarNames({variant: 'solid'}),
+    tinted: buildColorVariantVarNames({variant: 'tinted'}),
+
+    // tone scopes
+    transparent: buildColorCardVarNames({tone: 'transparent'}),
+    default: buildColorCardVarNames({tone: 'default'}),
+    neutral: buildColorCardVarNames({tone: 'neutral'}),
+    primary: buildColorCardVarNames({tone: 'primary'}),
+    suggest: buildColorCardVarNames({tone: 'suggest'}),
+    positive: buildColorCardVarNames({tone: 'positive'}),
+    caution: buildColorCardVarNames({tone: 'caution'}),
+    critical: buildColorCardVarNames({tone: 'critical'}),
+
+    // scheme scope
+    dark: {
+      transparent: buildColorCardVarNames({scheme: 'dark', tone: 'transparent'}),
+      default: buildColorCardVarNames({scheme: 'dark', tone: 'default'}),
+      neutral: buildColorCardVarNames({scheme: 'dark', tone: 'neutral'}),
+      primary: buildColorCardVarNames({scheme: 'dark', tone: 'primary'}),
+      suggest: buildColorCardVarNames({scheme: 'dark', tone: 'neutral'}),
+      positive: buildColorCardVarNames({scheme: 'dark', tone: 'positive'}),
+      caution: buildColorCardVarNames({scheme: 'dark', tone: 'caution'}),
+      critical: buildColorCardVarNames({scheme: 'dark', tone: 'critical'}),
+    },
+    light: {
+      transparent: buildColorCardVarNames({scheme: 'light', tone: 'transparent'}),
+      default: buildColorCardVarNames({scheme: 'light', tone: 'default'}),
+      neutral: buildColorCardVarNames({scheme: 'light', tone: 'neutral'}),
+      primary: buildColorCardVarNames({scheme: 'light', tone: 'primary'}),
+      suggest: buildColorCardVarNames({scheme: 'light', tone: 'suggest'}),
+      positive: buildColorCardVarNames({scheme: 'light', tone: 'positive'}),
+      caution: buildColorCardVarNames({scheme: 'light', tone: 'caution'}),
+      critical: buildColorCardVarNames({scheme: 'light', tone: 'critical'}),
     },
   },
-  avatar: {
-    focusRing: {
-      offset: `--avatar-focus-ring-offset`,
-      width: `--avatar-focus-ring-width`,
+  font: {
+    code: {
+      family: `--font-code-family`,
+      sizes: FONT_CODE_SIZE.reduce(
+        (acc, size) => {
+          return {
+            ...acc,
+            [size]: {
+              fontSize: `--font-code-${size}-size`,
+              ascenderHeight: `--font-code-${size}-ascender-height`,
+              descenderHeight: `--font-code-${size}-descender-height`,
+              lineHeight: `--font-code-${size}-line-height`,
+              letterSpacing: `--font-code-${size}-letter-spacing`,
+              iconSize: `--font-code-${size}-icon-size`,
+            },
+          }
+        },
+        {} as Record<FontCodeSize, FontSizeVarNames>,
+      ),
+    },
+    heading: {
+      family: `--font-heading-family`,
+      sizes: FONT_HEADING_SIZE.reduce(
+        (acc, size) => {
+          return {
+            ...acc,
+            [size]: {
+              fontSize: `--font-heading-${size}-size`,
+              ascenderHeight: `--font-heading-${size}-ascender-height`,
+              descenderHeight: `--font-heading-${size}-descender-height`,
+              lineHeight: `--font-heading-${size}-line-height`,
+              letterSpacing: `--font-heading-${size}-letter-spacing`,
+              iconSize: `--font-heading-${size}-icon-size`,
+            },
+          }
+        },
+        {} as Record<FontHeadingSize, FontSizeVarNames>,
+      ),
+    },
+    label: {
+      family: `--font-label-family`,
+      sizes: FONT_LABEL_SIZE.reduce(
+        (acc, size) => {
+          return {
+            ...acc,
+            [size]: {
+              fontSize: `--font-label-${size}-size`,
+              ascenderHeight: `--font-label-${size}-ascender-height`,
+              descenderHeight: `--font-label-${size}-descender-height`,
+              lineHeight: `--font-label-${size}-line-height`,
+              letterSpacing: `--font-label-${size}-letter-spacing`,
+              iconSize: `--font-label-${size}-icon-size`,
+            },
+          }
+        },
+        {} as Record<FontLabelSize, FontSizeVarNames>,
+      ),
+    },
+    text: {
+      family: `--font-text-family`,
+      sizes: FONT_TEXT_SIZE.reduce(
+        (acc, size) => {
+          return {
+            ...acc,
+            [size]: {
+              fontSize: `--font-text-${size}-size`,
+              ascenderHeight: `--font-text-${size}-ascender-height`,
+              descenderHeight: `--font-text-${size}-descender-height`,
+              lineHeight: `--font-text-${size}-line-height`,
+              letterSpacing: `--font-text-${size}-letter-spacing`,
+              iconSize: `--font-text-${size}-icon-size`,
+            },
+          }
+        },
+        {} as Record<FontTextSize, FontSizeVarNames>,
+      ),
     },
   },
+  input: {
+    fontSize: `--input-font-size`,
+    lineHeight: `--input-line-height`,
+    letterSpacing: `--input-letter-spacing`,
+    ascenderHeight: `--input-ascender-height`,
+    descenderHeight: `--input-descender-height`,
+    // capHeight: `--input-cap-height`,
+
+    gap: `--input-gap`,
+    padding: `--input-padding`,
+  },
   space: Object.fromEntries(
     SPACE.map((space) => [space, `--space-${String(space).replace('.', '_')}` as CSSVarName]),
   ) as Record<Space, CSSVarName>,
 } as const
 
-function buildColorCardVarNames(props: {
-  scheme: ThemeColorSchemeKey
-  tone: ThemeColorCardToneKey
-}): ColorCardVarNames {
+function buildColorCardVarNames(props: {scheme?: Scheme; tone: CardTone}): ColorCardVarNames {
   const {scheme, tone} = props
 
-  const prefix = `--color-${scheme}-${tone}` as const
+  const sourcePrefix = scheme
+    ? (`--color-${scheme}-${tone}` as const)
+    : (`--color-${tone}` as const)
 
   return {
     accent: {
-      fg: `${prefix}-accent-fg`,
+      fg: `${sourcePrefix}-accent-fg`,
     },
     avatar: {
       gray: {
-        bg: `${prefix}-avatar-gray-bg`,
-        fg: `${prefix}-avatar-gray-fg`,
+        bg: `${sourcePrefix}-avatar-gray-bg`,
+        fg: `${sourcePrefix}-avatar-gray-fg`,
       },
       blue: {
-        bg: `${prefix}-avatar-blue-bg`,
-        fg: `${prefix}-avatar-blue-fg`,
+        bg: `${sourcePrefix}-avatar-blue-bg`,
+        fg: `${sourcePrefix}-avatar-blue-fg`,
       },
       purple: {
-        bg: `${prefix}-avatar-purple-bg`,
-        fg: `${prefix}-avatar-purple-fg`,
+        bg: `${sourcePrefix}-avatar-purple-bg`,
+        fg: `${sourcePrefix}-avatar-purple-fg`,
       },
       magenta: {
-        bg: `${prefix}-avatar-magenta-bg`,
-        fg: `${prefix}-avatar-magenta-fg`,
+        bg: `${sourcePrefix}-avatar-magenta-bg`,
+        fg: `${sourcePrefix}-avatar-magenta-fg`,
       },
       red: {
-        bg: `${prefix}-avatar-red-bg`,
-        fg: `${prefix}-avatar-red-fg`,
+        bg: `${sourcePrefix}-avatar-red-bg`,
+        fg: `${sourcePrefix}-avatar-red-fg`,
       },
       orange: {
-        bg: `${prefix}-avatar-orange-bg`,
-        fg: `${prefix}-avatar-gray-fg`,
+        bg: `${sourcePrefix}-avatar-orange-bg`,
+        fg: `${sourcePrefix}-avatar-gray-fg`,
       },
       yellow: {
-        bg: `${prefix}-avatar-yellow-bg`,
-        fg: `${prefix}-avatar-yellow-fg`,
+        bg: `${sourcePrefix}-avatar-yellow-bg`,
+        fg: `${sourcePrefix}-avatar-yellow-fg`,
       },
       green: {
-        bg: `${prefix}-avatar-green-bg`,
-        fg: `${prefix}-avatar-green-fg`,
+        bg: `${sourcePrefix}-avatar-green-bg`,
+        fg: `${sourcePrefix}-avatar-green-fg`,
       },
       cyan: {
-        bg: `${prefix}-avatar-cyan-bg`,
-        fg: `${prefix}-avatar-yellow-fg`,
-      },
-    },
-    backdrop: `${prefix}-backdrop`,
-    badge: {
-      default: {
-        bg: `${prefix}-badge-default-bg`,
-        dot: `${prefix}-badge-default-dot`,
-        fg: `${prefix}-badge-default-fg`,
-        icon: `${prefix}-badge-default-icon`,
-      },
-      primary: {
-        bg: `${prefix}-badge-primary-bg`,
-        dot: `${prefix}-badge-primary-dot`,
-        fg: `${prefix}-badge-primary-fg`,
-        icon: `${prefix}-badge-primary-icon`,
-      },
-      positive: {
-        bg: `${prefix}-badge-positive-bg`,
-        dot: `${prefix}-badge-positive-dot`,
-        fg: `${prefix}-badge-positive-fg`,
-        icon: `${prefix}-badge-positive-icon`,
+        bg: `${sourcePrefix}-avatar-cyan-bg`,
+        fg: `${sourcePrefix}-avatar-yellow-fg`,
       },
-      caution: {
-        bg: `${prefix}-badge-caution-bg`,
-        dot: `${prefix}-badge-caution-dot`,
-        fg: `${prefix}-badge-caution-fg`,
-        icon: `${prefix}-badge-caution-icon`,
-      },
-      critical: {
-        bg: `${prefix}-badge-critical-bg`,
-        dot: `${prefix}-badge-critical-dot`,
-        fg: `${prefix}-badge-critical-fg`,
-        icon: `${prefix}-badge-critical-icon`,
-      },
-    },
-    bg: `${prefix}-bg`,
-    border: `${prefix}-border`,
-    code: {
-      bg: `${prefix}-code-bg`,
-      fg: `${prefix}-code-fg`,
-    },
-    fg: `${prefix}-fg`,
-    focusRing: `${prefix}-focus-ring`,
-    icon: `${prefix}-icon`,
-    input: {
-      default: {
-        enabled: buildColorInputStateVarNames({mode: 'default', scheme, state: 'enabled', tone}),
-        hovered: buildColorInputStateVarNames({mode: 'default', scheme, state: 'hovered', tone}),
-        readOnly: buildColorInputStateVarNames({mode: 'default', scheme, state: 'readOnly', tone}),
-        disabled: buildColorInputStateVarNames({mode: 'default', scheme, state: 'disabled', tone}),
-      },
-      invalid: {
-        enabled: buildColorInputStateVarNames({mode: 'invalid', scheme, state: 'enabled', tone}),
-        hovered: buildColorInputStateVarNames({mode: 'invalid', scheme, state: 'hovered', tone}),
-        readOnly: buildColorInputStateVarNames({mode: 'invalid', scheme, state: 'readOnly', tone}),
-        disabled: buildColorInputStateVarNames({mode: 'invalid', scheme, state: 'disabled', tone}),
-      },
-    },
-    kbd: {
-      bg: `${prefix}-kbd-bg`,
-      border: `${prefix}-kbd-border`,
-      fg: `${prefix}-kbd-fg`,
     },
+    backdrop: `${sourcePrefix}-backdrop`,
+    focusRing: `${sourcePrefix}-focus-ring`,
     link: {
-      fg: `${prefix}-link-fg`,
+      fg: `${sourcePrefix}-link-fg`,
     },
     muted: {
-      bg: `${prefix}-muted-bg`,
-      fg: `${prefix}-muted-fg`,
-    },
-    skeleton: {
-      from: `${prefix}-skeleton-from`,
-      to: `${prefix}-skeleton-to`,
+      bg: `${sourcePrefix}-muted-bg`,
+      fg: `${sourcePrefix}-muted-fg`,
     },
     shadow: {
-      outline: `${prefix}-shadow-outline`,
-      umbra: `${prefix}-shadow-umbra`,
-      penumbra: `${prefix}-shadow-penumbra`,
-      ambient: `${prefix}-shadow-ambient`,
+      outline: `${sourcePrefix}-shadow-outline`,
+      umbra: `${sourcePrefix}-shadow-umbra`,
+      penumbra: `${sourcePrefix}-shadow-penumbra`,
+      ambient: `${sourcePrefix}-shadow-ambient`,
     },
-    syntax: {
-      atrule: `${prefix}-syntax-atrule`,
-      attrName: `${prefix}-syntax-attrName`,
-      attrValue: `${prefix}-syntax-attrValue`,
-      attribute: `${prefix}-syntax-attribute`,
-      boolean: `${prefix}-syntax-boolean`,
-      builtin: `${prefix}-syntax-builtin`,
-      cdata: `${prefix}-syntax-cdata`,
-      char: `${prefix}-syntax-char`,
-      class: `${prefix}-syntax-class`,
-      className: `${prefix}-syntax-className`,
-      comment: `${prefix}-syntax-comment`,
-      constant: `${prefix}-syntax-constant`,
-      deleted: `${prefix}-syntax-deleted`,
-      doctype: `${prefix}-syntax-doctype`,
-      entity: `${prefix}-syntax-entity`,
-      function: `${prefix}-syntax-function`,
-      hexcode: `${prefix}-syntax-hexcode`,
-      id: `${prefix}-syntax-id`,
-      important: `${prefix}-syntax-important`,
-      inserted: `${prefix}-syntax-inserted`,
-      keyword: `${prefix}-syntax-keyword`,
-      number: `${prefix}-syntax-number`,
-      operator: `${prefix}-syntax-operator`,
-      prolog: `${prefix}-syntax-prolog`,
-      property: `${prefix}-syntax-property`,
-      pseudoClass: `${prefix}-syntax-pseudoClass`,
-      pseudoElement: `${prefix}-syntax-pseudoElement`,
-      punctuation: `${prefix}-syntax-punctuation`,
-      regex: `${prefix}-syntax-regex`,
-      selector: `${prefix}-syntax-selector`,
-      string: `${prefix}-syntax-string`,
-      symbol: `${prefix}-syntax-symbol`,
-      tag: `${prefix}-syntax-tag`,
-      unit: `${prefix}-syntax-unit`,
-      url: `${prefix}-syntax-url`,
-      variable: `${prefix}-syntax-variable`,
+    skeleton: {
+      from: `${sourcePrefix}-skeleton-from`,
+      to: `${sourcePrefix}-skeleton-to`,
     },
+    token: {
+      atrule: `${sourcePrefix}-token-atrule`,
+      attrName: `${sourcePrefix}-token-attr-name`,
+      attrValue: `${sourcePrefix}-token-attr-value`,
+      attribute: `${sourcePrefix}-token-attribute`,
+      boolean: `${sourcePrefix}-token-boolean`,
+      builtin: `${sourcePrefix}-token-builtin`,
+      cdata: `${sourcePrefix}-token-cdata`,
+      char: `${sourcePrefix}-token-char`,
+      class: `${sourcePrefix}-token-class`,
+      className: `${sourcePrefix}-token-class-name`,
+      comment: `${sourcePrefix}-token-comment`,
+      constant: `${sourcePrefix}-token-constant`,
+      deleted: `${sourcePrefix}-token-deleted`,
+      doctype: `${sourcePrefix}-token-doctype`,
+      entity: `${sourcePrefix}-token-entity`,
+      function: `${sourcePrefix}-token-function`,
+      hexcode: `${sourcePrefix}-token-hexcode`,
+      id: `${sourcePrefix}-token-id`,
+      important: `${sourcePrefix}-token-important`,
+      inserted: `${sourcePrefix}-token-inserted`,
+      keyword: `${sourcePrefix}-token-keyword`,
+      number: `${sourcePrefix}-token-number`,
+      operator: `${sourcePrefix}-token-operator`,
+      prolog: `${sourcePrefix}-token-prolog`,
+      property: `${sourcePrefix}-token-property`,
+      pseudoClass: `${sourcePrefix}-token-pseudo-class`,
+      pseudoElement: `${sourcePrefix}-token-pseudo-element`,
+      punctuation: `${sourcePrefix}-token-punctuation`,
+      regex: `${sourcePrefix}-token-regex`,
+      selector: `${sourcePrefix}-token-selector`,
+      string: `${sourcePrefix}-token-string`,
+      symbol: `${sourcePrefix}-token-symbol`,
+      tag: `${sourcePrefix}-token-tag`,
+      unit: `${sourcePrefix}-token-unit`,
+      url: `${sourcePrefix}-token-url`,
+      variable: `${sourcePrefix}-token-variable`,
+    },
+    solid: buildColorVariantVarNames({scheme, tone, variant: 'solid'}),
+    tinted: buildColorVariantVarNames({scheme, tone, variant: 'tinted'}),
   }
 }
 
-function buildColorInputStateVarNames(props: {
-  mode: ThemeColorInputModeKey
-  scheme: ThemeColorSchemeKey
-  state: ThemeColorInputStateKey
-  tone: ThemeColorCardToneKey
-}): ColorInputStateVarNames {
-  const {mode, scheme, state, tone} = props
+function buildColorVariantVarNames(options: {
+  scheme?: Scheme
+  tone?: CardTone
+  variant: 'solid' | 'tinted'
+}): ColorVariantVarNames {
+  const {scheme, tone, variant} = options
 
-  const prefix = `--color-${scheme}-${tone}-input-${mode}-${state}` as const
+  const _prefix =
+    scheme && tone
+      ? (`--color-${scheme}-${tone}-${variant}` as const)
+      : tone
+        ? (`--color-${tone}-${variant}` as const)
+        : (`--color-${variant}` as const)
 
-  return {
-    bg: `${prefix}-bg`,
-    border: `${prefix}-border`,
-    fg: `${prefix}-fg`,
-    muted: {
-      bg: `${prefix}-muted-bg`,
+  const vars = {
+    bg: {
+      0: `${_prefix}-bg-0`,
+      1: `${_prefix}-bg-1`,
+      2: `${_prefix}-bg-2`,
+      3: `${_prefix}-bg-3`,
+      4: `${_prefix}-bg-4`,
     },
-    placeholder: `${prefix}-placeholder`,
+    border: {
+      0: `${_prefix}-border-0`,
+      1: `${_prefix}-border-1`,
+      2: `${_prefix}-border-2`,
+      3: `${_prefix}-border-3`,
+      4: `${_prefix}-border-4`,
+    },
+    fg: {
+      0: `${_prefix}-fg-0`,
+      1: `${_prefix}-fg-1`,
+      2: `${_prefix}-fg-2`,
+      3: `${_prefix}-fg-3`,
+      4: `${_prefix}-fg-4`,
+    },
+  } as ColorVariantVarNames
+
+  for (const elementTone of THEME_COLOR_STATE_TONES) {
+    const prefix =
+      scheme && tone
+        ? (`--color-${scheme}-${tone}-${variant}-${elementTone}` as const)
+        : tone
+          ? (`--color-${tone}-${variant}-${elementTone}` as const)
+          : (`--color-${variant}-${elementTone}` as const)
+
+    vars[elementTone] = {
+      bg: {
+        0: `${prefix}-bg-0`,
+        1: `${prefix}-bg-1`,
+        2: `${prefix}-bg-2`,
+        3: `${prefix}-bg-3`,
+        4: `${prefix}-bg-4`,
+      },
+      border: {
+        0: `${prefix}-border-0`,
+        1: `${prefix}-border-1`,
+        2: `${prefix}-border-2`,
+        3: `${prefix}-border-3`,
+        4: `${prefix}-border-4`,
+      },
+      fg: {
+        0: `${prefix}-fg-0`,
+        1: `${prefix}-fg-1`,
+        2: `${prefix}-fg-2`,
+        3: `${prefix}-fg-3`,
+        4: `${prefix}-fg-4`,
+      },
+    }
   }
+
+  return vars
 }