@sanity/ui 2.9.0-corel.0 → 3.0.0-static.0

package/src/css/varNames.ts

@@ -0,0 +1,381 @@
+import {
+  Space,
+  SPACE,
+  ThemeColorCardToneKey,
+  ThemeColorInputModeKey,
+  ThemeColorInputStateKey,
+  ThemeColorSchemeKey,
+} from '@sanity/ui/theme'
+import {
+  type ColorCardVarNames,
+  type ColorInputStateVarNames,
+  type CSSVarName,
+  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'}),
+    },
+
+    //
+    accent: {
+      fg: `--color-accent-fg`,
+    },
+    avatar: {
+      gray: {
+        bg: `--color-avatar-gray-bg`,
+        fg: `--color-avatar-gray-fg`,
+      },
+      blue: {
+        bg: `--color-avatar-blue-bg`,
+        fg: `--color-avatar-blue-fg`,
+      },
+      purple: {
+        bg: `--color-avatar-purple-bg`,
+        fg: `--color-avatar-purple-fg`,
+      },
+      magenta: {
+        bg: `--color-avatar-magenta-bg`,
+        fg: `--color-avatar-magenta-fg`,
+      },
+      red: {
+        bg: `--color-avatar-red-bg`,
+        fg: `--color-avatar-red-fg`,
+      },
+      orange: {
+        bg: `--color-avatar-orange-bg`,
+        fg: `--color-avatar-orange-fg`,
+      },
+      yellow: {
+        bg: `--color-avatar-yellow-bg`,
+        fg: `--color-avatar-yellow-fg`,
+      },
+      green: {
+        bg: `--color-avatar-green-bg`,
+        fg: `--color-avatar-green-fg`,
+      },
+      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`,
+      },
+    },
+    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`,
+    },
+    link: {
+      fg: `--color-link-fg`,
+    },
+    muted: {
+      bg: `--color-muted-bg`,
+      fg: `--color-muted-fg`,
+    },
+    shadow: {
+      outline: `--color-shadow-outline`,
+      umbra: `--color-shadow-umbra`,
+      penumbra: `--color-shadow-penumbra`,
+      ambient: `--color-shadow-ambient`,
+    },
+    skeleton: {
+      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`,
+    },
+  },
+  avatar: {
+    focusRing: {
+      offset: `--avatar-focus-ring-offset`,
+      width: `--avatar-focus-ring-width`,
+    },
+  },
+  space: Object.fromEntries(
+    SPACE.map((space) => [space, `--space-${space}` satisfies CSSVarName]),
+  ) as Record<Space, CSSVarName>,
+} as const
+
+function buildColorCardVarNames(props: {
+  scheme: ThemeColorSchemeKey
+  tone: ThemeColorCardToneKey
+}): ColorCardVarNames {
+  const {scheme, tone} = props
+
+  const prefix = `--color-${scheme}-${tone}` as const
+
+  return {
+    accent: {
+      fg: `${prefix}-accent-fg`,
+    },
+    avatar: {
+      gray: {
+        bg: `${prefix}-avatar-gray-bg`,
+        fg: `${prefix}-avatar-gray-fg`,
+      },
+      blue: {
+        bg: `${prefix}-avatar-blue-bg`,
+        fg: `${prefix}-avatar-blue-fg`,
+      },
+      purple: {
+        bg: `${prefix}-avatar-purple-bg`,
+        fg: `${prefix}-avatar-purple-fg`,
+      },
+      magenta: {
+        bg: `${prefix}-avatar-magenta-bg`,
+        fg: `${prefix}-avatar-magenta-fg`,
+      },
+      red: {
+        bg: `${prefix}-avatar-red-bg`,
+        fg: `${prefix}-avatar-red-fg`,
+      },
+      orange: {
+        bg: `${prefix}-avatar-orange-bg`,
+        fg: `${prefix}-avatar-gray-fg`,
+      },
+      yellow: {
+        bg: `${prefix}-avatar-yellow-bg`,
+        fg: `${prefix}-avatar-yellow-fg`,
+      },
+      green: {
+        bg: `${prefix}-avatar-green-bg`,
+        fg: `${prefix}-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`,
+      },
+      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`,
+    },
+    link: {
+      fg: `${prefix}-link-fg`,
+    },
+    muted: {
+      bg: `${prefix}-muted-bg`,
+      fg: `${prefix}-muted-fg`,
+    },
+    skeleton: {
+      from: `${prefix}-skeleton-from`,
+      to: `${prefix}-skeleton-to`,
+    },
+    shadow: {
+      outline: `${prefix}-shadow-outline`,
+      umbra: `${prefix}-shadow-umbra`,
+      penumbra: `${prefix}-shadow-penumbra`,
+      ambient: `${prefix}-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`,
+    },
+  }
+}
+
+function buildColorInputStateVarNames(props: {
+  mode: ThemeColorInputModeKey
+  scheme: ThemeColorSchemeKey
+  state: ThemeColorInputStateKey
+  tone: ThemeColorCardToneKey
+}): ColorInputStateVarNames {
+  const {mode, scheme, state, tone} = props
+
+  const prefix = `--color-${scheme}-${tone}-input-${mode}-${state}` as const
+
+  return {
+    bg: `${prefix}-bg`,
+    border: `${prefix}-border`,
+    fg: `${prefix}-fg`,
+    muted: {
+      bg: `${prefix}-muted-bg`,
+    },
+    placeholder: `${prefix}-placeholder`,
+  }
+}

package/src/css/vars.ts

@@ -0,0 +1,313 @@
+import {
+  SPACE,
+  type Space,
+  THEME_COLOR_AVATAR_COLORS,
+  THEME_COLOR_CARD_TONES,
+  THEME_COLOR_INPUT_MODES,
+  THEME_COLOR_INPUT_STATES,
+  THEME_COLOR_STATE_TONES,
+  type ThemeColorCardToneKey,
+  type ThemeColorInputModeKey,
+  type ThemeColorInputStateKey,
+  type ThemeColorSchemeKey,
+} from '@sanity/ui/theme'
+import {
+  type ColorAvatarVars,
+  type ColorBadgeVars,
+  type ColorCardVars,
+  type ColorInputModeVars,
+  type ColorInputStateVars,
+  type ColorInputVars,
+  type ColorSchemeVars,
+  type CSSVar,
+  type Vars,
+} from './types'
+import {varNames} from './varNames'
+
+export const vars: Vars = {
+  color: {
+    dark: THEME_COLOR_CARD_TONES.reduce((acc, tone) => {
+      return {
+        ...acc,
+        [tone]: buildColorCardVars({scheme: 'dark', tone}),
+      }
+    }, {} as ColorSchemeVars),
+    light: THEME_COLOR_CARD_TONES.reduce((acc, tone) => {
+      return {
+        ...acc,
+        [tone]: buildColorCardVars({scheme: 'light', tone}),
+      }
+    }, {} as ColorSchemeVars),
+
+    accent: {
+      fg: `var(--color-accent-fg)`,
+    },
+    avatar: {
+      ...THEME_COLOR_AVATAR_COLORS.reduce((acc, color) => {
+        return {
+          ...acc,
+          [color]: {
+            bg: `var(--color-avatar-${color}-bg)`,
+            fg: `var(--color-avatar-${color}-fg)`,
+          },
+        }
+      }, {} as ColorAvatarVars),
+    },
+    badge: {
+      bg: `var(--color-badge-bg)`,
+      dot: `var(--color-badge-dot)`,
+      fg: `var(--color-badge-fg)`,
+      icon: `var(--color-badge-icon)`,
+      ...THEME_COLOR_STATE_TONES.reduce((acc, tone) => {
+        return {
+          ...acc,
+          [tone]: {
+            bg: `var(--color-badge-${tone}-bg)`,
+            dot: `var(--color-badge-${tone}-dot)`,
+            fg: `var(--color-badge-${tone}-fg)`,
+            icon: `var(--color-badge-${tone}-icon)`,
+          },
+        }
+      }, {} as ColorBadgeVars),
+    },
+    bg: `var(--color-bg)`,
+    border: `var(--color-border)`,
+    code: {
+      bg: `var(--color-code-bg)`,
+      fg: `var(--color-code-fg)`,
+    },
+    fg: `var(--color-fg)`,
+    icon: `var(--color-icon)`,
+    input: {
+      ...THEME_COLOR_INPUT_MODES.reduce((acc, mode) => {
+        return {
+          ...acc,
+          [mode]: {
+            ...THEME_COLOR_INPUT_STATES.reduce((acc, state) => {
+              return {
+                ...acc,
+                [state]: {
+                  bg: `var(--color-bg)`,
+                  border: `var(--color-border)`,
+                  fg: `var(--color-fg)`,
+                  muted: {
+                    fg: `var(--color-muted-fg)`,
+                  },
+                  placeholder: `var(--color-placeholder)`,
+                },
+              }
+            }, {} as ColorInputModeVars),
+          },
+        }
+      }, {} as ColorInputVars),
+    },
+    kbd: {
+      bg: `var(--color-kbd-bg)`,
+      border: `var(--color-kbd-border)`,
+      fg: `var(--color-kbd-fg)`,
+    },
+    link: {
+      fg: `var(--color-link-fg)`,
+    },
+    muted: {
+      bg: `var(--color-muted-bg)`,
+      fg: `var(--color-muted-fg)`,
+    },
+    shadow: {
+      outline: `var(--color-shadow-outline)`,
+      umbra: `var(--color-shadow-umbra)`,
+      penumbra: `var(--color-shadow-penumbra)`,
+      ambient: `var(--color-shadow-ambient)`,
+    },
+    skeleton: {
+      from: `var(--color-skeleton-from)`,
+      to: `var(--color-skeleton-to)`,
+    },
+    syntax: {
+      atrule: `var(--color-syntax-atrule)`,
+      attrName: `var(--color-syntax-attrName)`,
+      attrValue: `var(--color-syntax-attrValue)`,
+      attribute: `var(--color-syntax-attribute)`,
+      boolean: `var(--color-syntax-boolean)`,
+      builtin: `var(--color-syntax-builtin)`,
+      cdata: `var(--color-syntax-cdata)`,
+      char: `var(--color-syntax-char)`,
+      class: `var(--color-syntax-class)`,
+      className: `var(--color-syntax-className)`,
+      comment: `var(--color-syntax-comment)`,
+      constant: `var(--color-syntax-constant)`,
+      deleted: `var(--color-syntax-deleted)`,
+      doctype: `var(--color-syntax-doctype)`,
+      entity: `var(--color-syntax-entity)`,
+      function: `var(--color-syntax-function)`,
+      hexcode: `var(--color-syntax-hexcode)`,
+      id: `var(--color-syntax-id)`,
+      important: `var(--color-syntax-important)`,
+      inserted: `var(--color-syntax-inserted)`,
+      keyword: `var(--color-syntax-keyword)`,
+      number: `var(--color-syntax-number)`,
+      operator: `var(--color-syntax-operator)`,
+      prolog: `var(--color-syntax-prolog)`,
+      property: `var(--color-syntax-property)`,
+      pseudoClass: `var(--color-syntax-pseudoClass)`,
+      pseudoElement: `var(--color-syntax-pseudoElement)`,
+      punctuation: `var(--color-syntax-punctuation)`,
+      regex: `var(--color-syntax-regex)`,
+      selector: `var(--color-syntax-selector)`,
+      string: `var(--color-syntax-string)`,
+      symbol: `var(--color-syntax-symbol)`,
+      tag: `var(--color-syntax-tag)`,
+      unit: `var(--color-syntax-unit)`,
+      url: `var(--color-syntax-url)`,
+      variable: `var(--color-syntax-variable)`,
+    },
+  },
+  space: Object.fromEntries(
+    SPACE.map((space) => [space, `var(${varNames.space[space]})` satisfies CSSVar]),
+  ) as Record<Space, CSSVar>,
+} as const
+
+function buildColorCardVars(props: {
+  scheme: ThemeColorSchemeKey
+  tone: ThemeColorCardToneKey
+}): ColorCardVars {
+  const {scheme, tone} = props
+
+  const prefix = `--color-${scheme}-${tone}` as const
+
+  return {
+    accent: {
+      fg: `var(${prefix}-accent-fg)`,
+    },
+    avatar: {
+      ...THEME_COLOR_AVATAR_COLORS.reduce((acc, color) => {
+        return {
+          ...acc,
+          [color]: {
+            bg: `var(${prefix}-avatar-${color}-bg)`,
+            fg: `var(${prefix}-avatar-${color}-fg)`,
+          },
+        }
+      }, {} as ColorAvatarVars),
+    },
+    backdrop: `var(${prefix}-backdrop)`,
+    badge: {
+      ...THEME_COLOR_STATE_TONES.reduce((acc, tone) => {
+        return {
+          ...acc,
+          [tone]: {
+            bg: `var(${prefix}-badge-${tone}-bg)`,
+            dot: `var(${prefix}-badge-${tone}-dot)`,
+            fg: `var(${prefix}-badge-${tone}-fg)`,
+            icon: `var(${prefix}-badge-${tone}-icon)`,
+          },
+        }
+      }, {} as ColorBadgeVars),
+    },
+    bg: `var(${prefix}-bg)`,
+    border: `var(${prefix}-border)`,
+    code: {
+      bg: `var(${prefix}-code-bg)`,
+      fg: `var(${prefix}-code-fg)`,
+    },
+    fg: `var(${prefix}-fg)`,
+    focusRing: `var(${prefix}-focus-ring)`,
+    icon: `var(${prefix}-icon)`,
+    input: {
+      ...THEME_COLOR_INPUT_MODES.reduce((acc, mode) => {
+        return {
+          ...acc,
+          [mode]: {
+            ...THEME_COLOR_INPUT_STATES.reduce((acc, state) => {
+              return {
+                ...acc,
+                [state]: buildColorInputStateVars({mode, scheme, state, tone}),
+              }
+            }, {} as ColorInputModeVars),
+          },
+        }
+      }, {} as ColorInputVars),
+    },
+    kbd: {
+      bg: `var(${prefix}-kbd-bg)`,
+      border: `var(${prefix}-kbd-border)`,
+      fg: `var(${prefix}-kbd-fg)`,
+    },
+    link: {
+      fg: `var(${prefix}-link-fg)`,
+    },
+    muted: {
+      bg: `var(${prefix}-muted-bg)`,
+      fg: `var(${prefix}-muted-fg)`,
+    },
+    skeleton: {
+      from: `var(${prefix}-skeleton-from)`,
+      to: `var(${prefix}-skeleton-to)`,
+    },
+    shadow: {
+      outline: `var(${prefix}-shadow-outline)`,
+      umbra: `var(${prefix}-shadow-umbra)`,
+      penumbra: `var(${prefix}-shadow-penumbra)`,
+      ambient: `var(${prefix}-shadow-ambient)`,
+    },
+    syntax: {
+      atrule: `var(${prefix}-syntax-atrule)`,
+      attrName: `var(${prefix}-syntax-attrName)`,
+      attrValue: `var(${prefix}-syntax-attrValue)`,
+      attribute: `var(${prefix}-syntax-attribute)`,
+      boolean: `var(${prefix}-syntax-boolean)`,
+      builtin: `var(${prefix}-syntax-builtin)`,
+      cdata: `var(${prefix}-syntax-cdata)`,
+      char: `var(${prefix}-syntax-char)`,
+      class: `var(${prefix}-syntax-class)`,
+      className: `var(${prefix}-syntax-className)`,
+      comment: `var(${prefix}-syntax-comment)`,
+      constant: `var(${prefix}-syntax-constant)`,
+      deleted: `var(${prefix}-syntax-deleted)`,
+      doctype: `var(${prefix}-syntax-doctype)`,
+      entity: `var(${prefix}-syntax-entity)`,
+      function: `var(${prefix}-syntax-function)`,
+      hexcode: `var(${prefix}-syntax-hexcode)`,
+      id: `var(${prefix}-syntax-id)`,
+      important: `var(${prefix}-syntax-important)`,
+      inserted: `var(${prefix}-syntax-inserted)`,
+      keyword: `var(${prefix}-syntax-keyword)`,
+      number: `var(${prefix}-syntax-number)`,
+      operator: `var(${prefix}-syntax-operator)`,
+      prolog: `var(${prefix}-syntax-prolog)`,
+      property: `var(${prefix}-syntax-property)`,
+      pseudoClass: `var(${prefix}-syntax-pseudoClass)`,
+      pseudoElement: `var(${prefix}-syntax-pseudoElement)`,
+      punctuation: `var(${prefix}-syntax-punctuation)`,
+      regex: `var(${prefix}-syntax-regex)`,
+      selector: `var(${prefix}-syntax-selector)`,
+      string: `var(${prefix}-syntax-string)`,
+      symbol: `var(${prefix}-syntax-symbol)`,
+      tag: `var(${prefix}-syntax-tag)`,
+      unit: `var(${prefix}-syntax-unit)`,
+      url: `var(${prefix}-syntax-url)`,
+      variable: `var(${prefix}-syntax-variable)`,
+    },
+  }
+}
+
+function buildColorInputStateVars(props: {
+  mode: ThemeColorInputModeKey
+  scheme: ThemeColorSchemeKey
+  state: ThemeColorInputStateKey
+  tone: ThemeColorCardToneKey
+}): ColorInputStateVars {
+  const {mode, scheme, state, tone} = props
+
+  const prefix = `--color-${scheme}-${tone}-input-${mode}-${state}` as const
+
+  return {
+    bg: `var(${prefix}-bg)`,
+    border: `var(${prefix}-border)`,
+    fg: `var(${prefix}-fg)`,
+    muted: {
+      bg: `var(${prefix}-muted-bg)`,
+    },
+    placeholder: `var(${prefix}-placeholder)`,
+  }
+}

package/src/theme/build/_deprecated/color/factory.ts

@@ -34,7 +34,7 @@ export interface ThemeColorBuilderOpts {
   solid: (opts: {
     base: ThemeColorBase
     dark: boolean
-    tone: ThemeColorName
+    tone: ThemeColorToneKey
     name: ThemeColorName
     state: 'enabled' | 'disabled' | 'hovered' | 'pressed' | 'selected'
   }) => ThemeColorGenericState

package/src/theme/build/_deprecated/color/muted/createMuted.ts

@@ -1,11 +1,11 @@
-import {ThemeColorBase, ThemeColorMuted, ThemeColorToneKey} from '../../../../system'
+import {ThemeColorBase, ThemeColorCardToneKey, ThemeColorMuted} from '../../../../system'
 import {ThemeColorBuilderOpts} from '../factory'
 
 export function createMutedTones(
   opts: ThemeColorBuilderOpts,
   base: ThemeColorBase,
   dark: boolean,
-  name: ThemeColorToneKey,
+  name: ThemeColorCardToneKey,
 ): ThemeColorMuted {
   return {
     default: {