@sanity/ui 2.10.0-corel.0 → 3.0.0-static.1

package/src/css/vars.ts

@@ -0,0 +1,399 @@
+import {
+  FONT_CODE_SIZE,
+  FONT_HEADING_SIZE,
+  FONT_TEXT_SIZE,
+  FontCodeSize,
+  FontHeadingSize,
+  FontLabelSize,
+  FontTextSize,
+  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 {
+  FontSizeVars,
+  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)`,
+    },
+  },
+  font: {
+    code: {
+      family: `var(--font-code-family)`,
+      sizes: FONT_CODE_SIZE.reduce(
+        (acc, size) => {
+          return {
+            ...acc,
+            [size]: {
+              fontSize: `var(--font-code-${size}-size)`,
+              ascenderHeight: `var(--font-code-${size}-ascender-height)`,
+              descenderHeight: `var(--font-code-${size}-descender-height)`,
+              lineHeight: `var(--font-code-${size}-line-height)`,
+              letterSpacing: `var(--font-code-${size}-letter-spacing)`,
+              iconSize: `var(--font-code-${size}-icon-size)`,
+            },
+          }
+        },
+        {} as Record<FontCodeSize, FontSizeVars>,
+      ),
+    },
+    heading: {
+      family: `var(--font-heading-family)`,
+      sizes: FONT_HEADING_SIZE.reduce(
+        (acc, size) => {
+          return {
+            ...acc,
+            [size]: {
+              fontSize: `var(--font-code-${size}-size)`,
+              ascenderHeight: `var(--font-code-${size}-ascender-height)`,
+              descenderHeight: `var(--font-code-${size}-descender-height)`,
+              lineHeight: `var(--font-code-${size}-line-height)`,
+              letterSpacing: `var(--font-code-${size}-letter-spacing)`,
+              iconSize: `var(--font-code-${size}-icon-size)`,
+            },
+          }
+        },
+        {} as Record<FontHeadingSize, FontSizeVars>,
+      ),
+    },
+    label: {
+      family: `var(--font-label-family)`,
+      sizes: FONT_CODE_SIZE.reduce(
+        (acc, size) => {
+          return {
+            ...acc,
+            [size]: {
+              fontSize: `var(--font-code-${size}-size)`,
+              ascenderHeight: `var(--font-code-${size}-ascender-height)`,
+              descenderHeight: `var(--font-code-${size}-descender-height)`,
+              lineHeight: `var(--font-code-${size}-line-height)`,
+              letterSpacing: `var(--font-code-${size}-letter-spacing)`,
+              iconSize: `var(--font-code-${size}-icon-size)`,
+            },
+          }
+        },
+        {} as Record<FontLabelSize, FontSizeVars>,
+      ),
+    },
+    text: {
+      family: `var(--font-text-family)`,
+      sizes: FONT_TEXT_SIZE.reduce(
+        (acc, size) => {
+          return {
+            ...acc,
+            [size]: {
+              fontSize: `var(--font-code-${size}-size)`,
+              ascenderHeight: `var(--font-code-${size}-ascender-height)`,
+              descenderHeight: `var(--font-code-${size}-descender-height)`,
+              lineHeight: `var(--font-code-${size}-line-height)`,
+              letterSpacing: `var(--font-code-${size}-letter-spacing)`,
+              iconSize: `var(--font-code-${size}-icon-size)`,
+            },
+          }
+        },
+        {} as Record<FontTextSize, FontSizeVars>,
+      ),
+    },
+  },
+  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: {

package/src/theme/build/buildColorTheme.ts

@@ -24,7 +24,6 @@ import {
   ThemeColorInput_v2,
   ThemeColorInputMode_v2,
   ThemeColorInputState_v2,
-  THEME_COLOR_CARD_TONES,
 } from '../system'
 import {ColorTokenContext, resolveColorTokenValue as _color} from './colorToken'
 import {resolveColorTokens} from './resolveColorTokens'
@@ -47,11 +46,14 @@ function buildColorScheme(
 ): ThemeColorScheme_v2 {
   const {scheme} = options
 
-  return THEME_COLOR_CARD_TONES.reduce((acc, tone) => {
-    acc[tone] = buildCardColorTheme({scheme, tone}, config)
-
-    return acc
-  }, {} as ThemeColorScheme_v2)
+  return {
+    transparent: buildCardColorTheme({scheme, tone: 'transparent'}, config),
+    default: buildCardColorTheme({scheme, tone: 'default'}, config),
+    primary: buildCardColorTheme({scheme, tone: 'primary'}, config),
+    positive: buildCardColorTheme({scheme, tone: 'positive'}, config),
+    caution: buildCardColorTheme({scheme, tone: 'caution'}, config),
+    critical: buildCardColorTheme({scheme, tone: 'critical'}, config),
+  }
 }
 
 function buildCardColorTheme(
@@ -75,7 +77,7 @@ function buildCardColorTheme(
     badge: buildBadgeColorTheme(tokens?.badge, {scheme}, config),
     bg: _color(context, tokens?.bg),
     border: _color(context, tokens?.border),
-    button: buildButtonColorTheme({scheme, tone}, config),
+    button: buildButtonColorTheme({scheme}, config),
     code: {
       bg: _color(context, tokens?.code?.bg),
       fg: _color(context, tokens?.code?.fg),
@@ -96,7 +98,7 @@ function buildCardColorTheme(
       bg: _color(context, tokens?.muted?.bg),
       fg: _color(context, tokens?.muted?.fg),
     },
-    selectable: buildSelectableColorTheme({scheme, tone}, config),
+    selectable: buildSelectableColorTheme({scheme}, config),
     shadow: buildShadowColorTheme({scheme, tone}, config),
     skeleton: {
       from: _color(context, tokens?.skeleton?.from),
@@ -165,11 +167,13 @@ function buildBadgeColorTheme(
 ): ThemeColorBadge_v2 {
   const {scheme} = options
 
-  return THEME_COLOR_STATE_TONES.reduce((acc, tone) => {
-    acc[tone] = _buildBadgeColorTheme(tokens, {scheme, tone}, config)
-
-    return acc
-  }, {} as ThemeColorBadge_v2)
+  return {
+    default: _buildBadgeColorTheme(tokens, {scheme, tone: 'default'}, config),
+    primary: _buildBadgeColorTheme(tokens, {scheme, tone: 'primary'}, config),
+    positive: _buildBadgeColorTheme(tokens, {scheme, tone: 'positive'}, config),
+    caution: _buildBadgeColorTheme(tokens, {scheme, tone: 'caution'}, config),
+    critical: _buildBadgeColorTheme(tokens, {scheme, tone: 'critical'}, config),
+  }
 }
 
 function _buildBadgeColorTheme(
@@ -191,15 +195,15 @@ function _buildBadgeColorTheme(
 }
 
 function buildButtonColorTheme(
-  options: {scheme: ThemeColorSchemeKey; tone: ThemeColorCardToneKey},
+  options: {scheme: ThemeColorSchemeKey},
   config?: ThemeConfig,
 ): ThemeColorButton_v2 {
-  const {scheme, tone: cardTone} = options
+  const {scheme} = options
 
   const modes: Partial<ThemeColorButton_v2> = {}
 
   for (const mode of THEME_COLOR_BUTTON_MODES) {
-    modes[mode] = buildButtonTonesColorTheme({cardTone, scheme, mode}, config)
+    modes[mode] = buildButtonTonesColorTheme({scheme, mode}, config)
   }
 
   return modes as ThemeColorButton_v2
@@ -207,18 +211,17 @@ function buildButtonColorTheme(
 
 function buildButtonTonesColorTheme(
   options: {
-    cardTone: ThemeColorCardToneKey
     scheme: ThemeColorSchemeKey
     mode: ThemeColorButtonModeKey
   },
   config?: ThemeConfig,
 ): ThemeColorButtonMode_v2 {
-  const {cardTone, mode, scheme} = options
+  const {mode, scheme} = options
 
   const tones: Partial<ThemeColorButtonMode_v2> = {}
 
   for (const tone of THEME_COLOR_STATE_TONES) {
-    tones[tone] = buildButtonStatesColorTheme({cardTone, mode, scheme, tone}, config)
+    tones[tone] = buildButtonStatesColorTheme({mode, scheme, tone}, config)
   }
 
   return tones as ThemeColorButtonMode_v2
@@ -226,19 +229,18 @@ function buildButtonTonesColorTheme(
 
 function buildButtonStatesColorTheme(
   options: {
-    cardTone: ThemeColorCardToneKey
     mode: ThemeColorButtonModeKey
     scheme: ThemeColorSchemeKey
     tone: ThemeColorStateToneKey
   },
   config?: ThemeConfig,
 ): ThemeColorButtonTone_v2 {
-  const {cardTone, mode, scheme, tone} = options
+  const {mode, scheme, tone} = options
 
   const states: Partial<ThemeColorButtonTone_v2> = {}
 
   for (const state of THEME_COLOR_STATES) {
-    states[state] = buildButtonStateColorTheme({cardTone, mode, tone, scheme, state}, config)
+    states[state] = buildButtonStateColorTheme({mode, tone, scheme, state}, config)
   }
 
   return states as ThemeColorButtonTone_v2
@@ -246,7 +248,6 @@ function buildButtonStatesColorTheme(
 
 function buildButtonStateColorTheme(
   options: {
-    cardTone: ThemeColorCardToneKey
     mode: ThemeColorButtonModeKey
     tone: ThemeColorStateToneKey
     scheme: ThemeColorSchemeKey
@@ -254,10 +255,9 @@ function buildButtonStateColorTheme(
   },
   config?: ThemeConfig,
 ): ThemeColorState_v2 {
-  const {cardTone, mode, tone, scheme, state} = options
-  const cardTokens = config?.color?.base?.[cardTone]
+  const {mode, tone, scheme, state} = options
   const tokens = config?.color?.button?.[mode]?.[tone]?.[state]
-  const hue = tokens?._hue || cardTokens?._hue || 'gray'
+  const hue = tokens?._hue || 'gray'
   const blendMode = tokens?._blend || ['screen', 'multiply']
   const context: ColorTokenContext = {hue, scheme}
 
@@ -318,26 +318,25 @@ function buildInputStatesColorTheme(
   const {mode, scheme, tone} = options
 
   return {
-    enabled: buildInputStateColorTheme({mode, scheme, state: 'enabled', cardTone: tone}, config),
-    hovered: buildInputStateColorTheme({mode, scheme, state: 'hovered', cardTone: tone}, config),
-    readOnly: buildInputStateColorTheme({mode, scheme, state: 'readOnly', cardTone: tone}, config),
-    disabled: buildInputStateColorTheme({mode, scheme, state: 'disabled', cardTone: tone}, config),
+    enabled: buildInputStateColorTheme({mode, scheme, state: 'enabled', tone}, config),
+    hovered: buildInputStateColorTheme({mode, scheme, state: 'hovered', tone}, config),
+    readOnly: buildInputStateColorTheme({mode, scheme, state: 'readOnly', tone}, config),
+    disabled: buildInputStateColorTheme({mode, scheme, state: 'disabled', tone}, config),
   }
 }
 
 function buildInputStateColorTheme(
   options: {
-    cardTone: ThemeColorCardToneKey
     mode: 'default' | 'invalid'
     scheme: ThemeColorSchemeKey
     state: 'enabled' | 'hovered' | 'readOnly' | 'disabled'
+    tone: ThemeColorCardToneKey
   },
   config?: ThemeConfig,
 ): ThemeColorInputState_v2 {
-  const {cardTone, mode, scheme, state} = options
-  const cardTokens = config?.color?.base?.[cardTone]
+  const {mode, tone, scheme, state} = options
   const tokens = config?.color?.input?.[mode]?.[state]
-  const hue = tokens?._hue || cardTokens?._hue || 'gray'
+  const hue = tokens?._hue || config?.color?.base?.[tone]?._hue || 'gray'
   const blendMode = tokens?._blend || ['screen', 'multiply']
   const context: ColorTokenContext = {hue, scheme}
 
@@ -356,16 +355,15 @@ function buildInputStateColorTheme(
 function buildSelectableColorTheme(
   options: {
     scheme: ThemeColorSchemeKey
-    tone: ThemeColorCardToneKey
   },
   config?: ThemeConfig,
 ): ThemeColorButtonMode_v2 {
-  const {scheme, tone: cardTone} = options
+  const {scheme} = options
 
   const tones: Partial<ThemeColorButtonMode_v2> = {}
 
   for (const tone of THEME_COLOR_STATE_TONES) {
-    tones[tone] = buildSelectableStatesColorTheme({cardTone, scheme, tone}, config)
+    tones[tone] = buildSelectableStatesColorTheme({scheme, tone}, config)
   }
 
   return tones as ThemeColorButtonMode_v2
@@ -373,18 +371,17 @@ function buildSelectableColorTheme(
 
 function buildSelectableStatesColorTheme(
   options: {
-    cardTone: ThemeColorCardToneKey
     scheme: ThemeColorSchemeKey
     tone: ThemeColorStateToneKey
   },
   config?: ThemeConfig,
 ): ThemeColorButtonTone_v2 {
-  const {cardTone, scheme, tone} = options
+  const {scheme, tone} = options
 
   const states: Partial<ThemeColorButtonTone_v2> = {}
 
   for (const state of THEME_COLOR_STATES) {
-    states[state] = buildSelectableStateColorTheme({cardTone, tone, scheme, state}, config)
+    states[state] = buildSelectableStateColorTheme({tone, scheme, state}, config)
   }
 
   return states as ThemeColorButtonTone_v2
@@ -392,18 +389,15 @@ function buildSelectableStatesColorTheme(
 
 function buildSelectableStateColorTheme(
   options: {
-    cardTone: ThemeColorCardToneKey
     scheme: ThemeColorSchemeKey
     state: ThemeColorStateKey
     tone: ThemeColorStateToneKey
   },
   config?: ThemeConfig,
 ): ThemeColorState_v2 {
-  const {cardTone, scheme, state, tone} = options
-  const cardTokens = config?.color?.base?.[cardTone]
+  const {scheme, state, tone} = options
   const tokens = config?.color?.selectable?.[tone]?.[state]
-
-  const hue = tokens?._hue || cardTokens?._hue || 'gray'
+  const hue = tokens?._hue || 'gray'
   const blendMode = tokens?._blend || ['screen', 'multiply']
   const context: ColorTokenContext = {hue, scheme}