@sanity/ui 2.9.0-canary.6 → 2.9.0

package/src/theme/build/buildColorTheme.ts

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

package/src/theme/build/renderColorTheme.ts

@@ -1,6 +1,8 @@
+import {COLOR_HUES} from '@sanity/color'
 import {ThemeColorPalette, ThemeConfig} from '../config'
 import {defaultColorPalette} from '../defaults/colorPalette'
 import {
+  THEME_COLOR_STATE_TONES,
   ThemeColorAvatar_v2,
   ThemeColorBadgeTone_v2,
   ThemeColorBadge_v2,
@@ -187,17 +189,13 @@ function renderThemeColorAvatar(
     colorPalette: ThemeColorPalette
   },
 ): ThemeColorAvatar_v2 {
-  return {
-    gray: renderThemeColorAvatarColor(value.gray, options),
-    blue: renderThemeColorAvatarColor(value.blue, options),
-    purple: renderThemeColorAvatarColor(value.purple, options),
-    magenta: renderThemeColorAvatarColor(value.magenta, options),
-    red: renderThemeColorAvatarColor(value.red, options),
-    orange: renderThemeColorAvatarColor(value.orange, options),
-    yellow: renderThemeColorAvatarColor(value.yellow, options),
-    green: renderThemeColorAvatarColor(value.green, options),
-    cyan: renderThemeColorAvatarColor(value.cyan, options),
+  const colorAvatar = {} as ThemeColorAvatar_v2
+
+  for (const hue of COLOR_HUES) {
+    colorAvatar[hue] = renderThemeColorAvatarColor(value[hue], options)
   }
+
+  return colorAvatar
 }
 
 function renderThemeColorAvatarColor(
@@ -240,13 +238,13 @@ function renderThemeColorBadge(
     colorPalette: ThemeColorPalette
   },
 ): ThemeColorBadge_v2 {
-  return {
-    default: renderThemeColorBadgeColor(value.default, options),
-    primary: renderThemeColorBadgeColor(value.primary, options),
-    positive: renderThemeColorBadgeColor(value.positive, options),
-    caution: renderThemeColorBadgeColor(value.caution, options),
-    critical: renderThemeColorBadgeColor(value.critical, options),
+  const colorBadge = {} as ThemeColorBadge_v2
+
+  for (const tone of THEME_COLOR_STATE_TONES) {
+    colorBadge[tone] = renderThemeColorBadgeColor(value[tone], options)
   }
+
+  return colorBadge
 }
 
 function renderThemeColorBadgeColor(
@@ -259,8 +257,6 @@ function renderThemeColorBadgeColor(
 ): ThemeColorBadgeTone_v2 {
   const {baseBg, blendMode: rootBlendMode, colorPalette} = options
 
-  // const blendMode = value._blend || 'multiply'
-
   const blendMode = rootBlendMode
 
   const rootOptions: RenderColorValueOptions = {
@@ -308,13 +304,13 @@ function renderThemeColorButtonTones(
     colorPalette: ThemeColorPalette
   },
 ): ThemeColorButtonMode_v2 {
-  return {
-    default: renderThemeColorButtonStates(value.default, options),
-    primary: renderThemeColorButtonStates(value.primary, options),
-    positive: renderThemeColorButtonStates(value.positive, options),
-    caution: renderThemeColorButtonStates(value.caution, options),
-    critical: renderThemeColorButtonStates(value.critical, options),
+  const colorButtonMode = {} as ThemeColorButtonMode_v2
+
+  for (const tone of THEME_COLOR_STATE_TONES) {
+    colorButtonMode[tone] = renderThemeColorButtonStates(value[tone], options)
   }
+
+  return colorButtonMode
 }
 
 function renderThemeColorButtonStates(
@@ -457,13 +453,13 @@ function renderThemeColorSelectable(
     colorPalette: ThemeColorPalette
   },
 ): ThemeColorSelectable_v2 {
-  return {
-    default: renderThemeColorSelectableStates(value.default, options),
-    primary: renderThemeColorSelectableStates(value.primary, options),
-    positive: renderThemeColorSelectableStates(value.positive, options),
-    caution: renderThemeColorSelectableStates(value.caution, options),
-    critical: renderThemeColorSelectableStates(value.critical, options),
+  const colorSelectable = {} as ThemeColorSelectable_v2
+
+  for (const tone of THEME_COLOR_STATE_TONES) {
+    colorSelectable[tone] = renderThemeColorSelectableStates(value[tone], options)
   }
+
+  return colorSelectable
 }
 
 function renderThemeColorSelectableStates(

package/src/theme/build/resolveColorTokens.ts

@@ -1,9 +1,11 @@
-import {ColorHueKey} from '@sanity/color'
+import {COLOR_HUES, ColorHueKey} from '@sanity/color'
 import {
   ColorConfigCardTone,
   ColorConfigInputMode,
   ColorConfigInputState,
   ColorConfigStateTone,
+  ThemeColorAvatarTokens,
+  ThemeColorBadgeTokens,
   ThemeColorBaseTokens,
   ThemeColorButtonTokens,
   ThemeColorInputStateTokens,
@@ -64,44 +66,22 @@ function resolveBaseColorTones(
   return {
     ...spec,
     _hue: hue,
-    avatar: {
-      gray: merge({_hue: 'gray'}, spec.avatar?.['*'], spec.avatar?.gray),
-      blue: merge({_hue: 'blue'}, spec.avatar?.['*'], spec.avatar?.blue),
-      purple: merge({_hue: 'purple'}, spec.avatar?.['*'], spec.avatar?.purple),
-      magenta: merge({_hue: 'magenta'}, spec.avatar?.['*'], spec.avatar?.magenta),
-      red: merge({_hue: 'red'}, spec.avatar?.['*'], spec.avatar?.red),
-      orange: merge({_hue: 'orange'}, spec.avatar?.['*'], spec.avatar?.orange),
-      yellow: merge({_hue: 'yellow'}, spec.avatar?.['*'], spec.avatar?.yellow),
-      green: merge({_hue: 'green'}, spec.avatar?.['*'], spec.avatar?.green),
-      cyan: merge({_hue: 'cyan'}, spec.avatar?.['*'], spec.avatar?.cyan),
-    },
-    badge: {
-      default: {
-        _hue: inputTokens?.base?.default?._hue || hue,
-        ...spec.badge?.['*'],
-        ...spec.badge?.default,
-      },
-      primary: {
-        _hue: inputTokens?.base?.primary?._hue || hue,
-        ...spec.badge?.['*'],
-        ...spec.badge?.primary,
-      },
-      positive: {
-        _hue: inputTokens?.base?.positive?._hue || hue,
-        ...spec.badge?.['*'],
-        ...spec.badge?.positive,
-      },
-      caution: {
-        _hue: inputTokens?.base?.caution?._hue || hue,
-        ...spec.badge?.['*'],
-        ...spec.badge?.caution,
-      },
-      critical: {
-        _hue: inputTokens?.base?.critical?._hue || hue,
-        ...spec.badge?.['*'],
-        ...spec.badge?.critical,
-      },
-    },
+    avatar: COLOR_HUES.reduce((acc, hue) => {
+      return {
+        ...acc,
+        [hue]: merge({_hue: hue}, spec.avatar?.['*'], spec.avatar?.[hue]),
+      }
+    }, {} as ThemeColorAvatarTokens),
+    badge: THEME_COLOR_STATE_TONES.reduce((acc, tone) => {
+      return {
+        ...acc,
+        [tone]: {
+          _hue: inputTokens?.base?.[tone]?._hue || hue,
+          ...spec.badge?.['*'],
+          ...spec.badge?.[tone],
+        },
+      }
+    }, {} as ThemeColorBadgeTokens),
   }
 }
 
@@ -162,44 +142,22 @@ function resolveButtonStateColorTokens(
   return {
     ...spec,
     _hue: hue,
-    avatar: {
-      gray: merge({_hue: 'gray'}, spec.avatar?.['*'], spec.avatar?.gray),
-      blue: merge({_hue: 'blue'}, spec.avatar?.['*'], spec.avatar?.blue),
-      purple: merge({_hue: 'purple'}, spec.avatar?.['*'], spec.avatar?.purple),
-      magenta: merge({_hue: 'magenta'}, spec.avatar?.['*'], spec.avatar?.magenta),
-      red: merge({_hue: 'red'}, spec.avatar?.['*'], spec.avatar?.red),
-      orange: merge({_hue: 'orange'}, spec.avatar?.['*'], spec.avatar?.orange),
-      yellow: merge({_hue: 'yellow'}, spec.avatar?.['*'], spec.avatar?.yellow),
-      green: merge({_hue: 'green'}, spec.avatar?.['*'], spec.avatar?.green),
-      cyan: merge({_hue: 'cyan'}, spec.avatar?.['*'], spec.avatar?.cyan),
-    },
-    badge: {
-      default: {
-        _hue: inputTokens?.base?.default?._hue,
-        ...spec.badge?.['*'],
-        ...spec.badge?.default,
-      },
-      primary: {
-        _hue: inputTokens?.base?.primary?._hue,
-        ...spec.badge?.['*'],
-        ...spec.badge?.primary,
-      },
-      positive: {
-        _hue: inputTokens?.base?.positive?._hue,
-        ...spec.badge?.['*'],
-        ...spec.badge?.positive,
-      },
-      caution: {
-        _hue: inputTokens?.base?.caution?._hue,
-        ...spec.badge?.['*'],
-        ...spec.badge?.caution,
-      },
-      critical: {
-        _hue: inputTokens?.base?.critical?._hue,
-        ...spec.badge?.['*'],
-        ...spec.badge?.critical,
-      },
-    },
+    avatar: COLOR_HUES.reduce((acc, hue) => {
+      return {
+        ...acc,
+        [hue]: merge({_hue: hue}, spec.avatar?.['*'], spec.avatar?.[hue]),
+      }
+    }, {} as ThemeColorAvatarTokens),
+    badge: THEME_COLOR_STATE_TONES.reduce((acc, tone) => {
+      return {
+        ...acc,
+        [tone]: {
+          _hue: inputTokens?.base?.[tone]?._hue || hue,
+          ...spec.badge?.['*'],
+          ...spec.badge?.[tone],
+        },
+      }
+    }, {} as ThemeColorBadgeTokens),
   }
 }
 
@@ -289,43 +247,21 @@ function resolveSelectableStateColorTokens(
   return {
     ...spec,
     _hue: hue,
-    avatar: {
-      gray: merge({_hue: 'gray'}, spec.avatar?.['*'], spec.avatar?.gray),
-      blue: merge({_hue: 'blue'}, spec.avatar?.['*'], spec.avatar?.blue),
-      purple: merge({_hue: 'purple'}, spec.avatar?.['*'], spec.avatar?.purple),
-      magenta: merge({_hue: 'magenta'}, spec.avatar?.['*'], spec.avatar?.magenta),
-      red: merge({_hue: 'red'}, spec.avatar?.['*'], spec.avatar?.red),
-      orange: merge({_hue: 'orange'}, spec.avatar?.['*'], spec.avatar?.orange),
-      yellow: merge({_hue: 'yellow'}, spec.avatar?.['*'], spec.avatar?.yellow),
-      green: merge({_hue: 'green'}, spec.avatar?.['*'], spec.avatar?.green),
-      cyan: merge({_hue: 'cyan'}, spec.avatar?.['*'], spec.avatar?.cyan),
-    },
-    badge: {
-      default: {
-        _hue: inputTokens?.base?.default?._hue,
-        ...spec.badge?.['*'],
-        ...spec.badge?.default,
-      },
-      primary: {
-        _hue: inputTokens?.base?.primary?._hue,
-        ...spec.badge?.['*'],
-        ...spec.badge?.primary,
-      },
-      positive: {
-        _hue: inputTokens?.base?.positive?._hue,
-        ...spec.badge?.['*'],
-        ...spec.badge?.positive,
-      },
-      caution: {
-        _hue: inputTokens?.base?.caution?._hue,
-        ...spec.badge?.['*'],
-        ...spec.badge?.caution,
-      },
-      critical: {
-        _hue: inputTokens?.base?.critical?._hue,
-        ...spec.badge?.['*'],
-        ...spec.badge?.critical,
-      },
-    },
+    avatar: COLOR_HUES.reduce((acc, hue) => {
+      return {
+        ...acc,
+        [hue]: merge({_hue: hue}, spec.avatar?.['*'], spec.avatar?.[hue]),
+      }
+    }, {} as ThemeColorAvatarTokens),
+    badge: THEME_COLOR_STATE_TONES.reduce((acc, tone) => {
+      return {
+        ...acc,
+        [tone]: {
+          _hue: inputTokens?.base?.[tone]?._hue || hue,
+          ...spec.badge?.['*'],
+          ...spec.badge?.[tone],
+        },
+      }
+    }, {} as ThemeColorBadgeTokens),
   }
 }

package/src/theme/config/tokens/color/types.ts

@@ -1,5 +1,5 @@
 import {ColorHueKey} from '@sanity/color'
-import {ThemeColorSyntax, ThemeColorButtonModeKey} from '../../../system'
+import {ThemeColorSyntax, ThemeColorButtonModeKey, ThemeColorStateToneKey} from '../../../system'
 import {
   ColorBlendModeTokenValue,
   ColorConfigCardTone,
@@ -32,15 +32,6 @@ export interface ThemeColorAvatarTokens {
   'cyan'?: ThemeColorAvatarHueTokens
 }
 
-/** @public */
-export interface ThemeColorBadgeTokens {
-  _hue?: ColorHueKey
-  bg?: ThemeColorTokenValue
-  fg?: ThemeColorTokenValue
-  dot?: ThemeColorTokenValue
-  icon?: ThemeColorTokenValue
-}
-
 /** @public */
 export interface ThemeColorBaseTokens extends ThemeColorStateTokens {
   focusRing?: ThemeColorTokenValue
@@ -64,14 +55,9 @@ export interface ThemeColorBadgeToneTokens {
 }
 
 /** @public */
-export interface ThemeColorBadgeTokens {
-  '*'?: ThemeColorBadgeToneTokens
-  'default'?: ThemeColorBadgeToneTokens
-  'primary'?: ThemeColorBadgeToneTokens
-  'positive'?: ThemeColorBadgeToneTokens
-  'caution'?: ThemeColorBadgeToneTokens
-  'critical'?: ThemeColorBadgeToneTokens
-}
+export type ThemeColorBadgeTokens = Partial<
+  Record<'*' | ThemeColorStateToneKey, ThemeColorBadgeToneTokens>
+>
 
 /** @public */
 export interface ThemeColorStateTokens {

package/src/theme/defaults/colorTokens.ts

@@ -74,6 +74,7 @@ export const defaultColorTokens: ThemeColorTokens = {
       },
     },
     'primary': {_hue: 'blue'},
+    'suggest': {_hue: 'purple'},
     'positive': {
       _hue: 'green',
       shadow: {outline: ['500/0.4', '500/0.4']},
@@ -133,7 +134,7 @@ export const defaultColorTokens: ThemeColorTokens = {
           },
         },
         'hovered': {
-          bg: ['700', '300'],
+          bg: ['600', '300'],
           border: ['700/0', '300/0'],
         },
         'pressed': {
@@ -260,11 +261,11 @@ export const defaultColorTokens: ThemeColorTokens = {
           fg: ['700', '300'],
         },
         'pressed': {
-          bg: ['100', '900'],
+          bg: ['200', '800'],
           fg: ['800', '200'],
         },
         'selected': {
-          bg: ['100', '900'],
+          bg: ['200', '800'],
           fg: ['800', '200'],
         },
         'disabled': {
@@ -368,7 +369,8 @@ export const defaultColorTokens: ThemeColorTokens = {
         },
         'hovered': {
           bg: ['50', '950'],
-          icon: ['700 70%', '400 70%'],
+          fg: ['800', '200'],
+          icon: ['800 70%', '300 70%'],
         },
         'pressed': {
           bg: ['100', '900'],
@@ -427,7 +429,7 @@ export const defaultColorTokens: ThemeColorTokens = {
       '*': {
         _blend: ['multiply', 'screen'],
         bg: ['white', 'black'],
-        border: ['200', '800'],
+        border: ['200', '700'],
         fg: ['black', '200'],
         muted: {
           bg: ['50', '950'],
@@ -443,6 +445,7 @@ export const defaultColorTokens: ThemeColorTokens = {
         fg: ['800', '200'],
       },
       'disabled': {
+        bg: ['50', '950'],
         fg: ['400', '600'],
         border: ['100', '900'],
         placeholder: ['200', '800 50%'],

package/src/theme/getScopedTheme.ts

@@ -1,5 +1,12 @@
 import {defaultThemeConfig} from './defaults/config'
-import {RootTheme, RootTheme_v2, Theme, ThemeColorCardToneKey, ThemeColorSchemeKey} from './system'
+import {
+  RootTheme,
+  RootTheme_v2,
+  Theme,
+  ThemeColor,
+  ThemeColorCardToneKey,
+  ThemeColorSchemeKey,
+} from './system'
 import {is_v2, v0_v2, v2_v0} from './versioning'
 
 // cache[scheme][tone][rootTheme] = theme
@@ -22,7 +29,7 @@ export function getScopedTheme(
   const v2 = is_v2(themeProp) ? themeProp : v0_v2(themeProp)
 
   const colorScheme_v0 = v0.color[scheme] || v0.color.light
-  const color_v0 = colorScheme_v0[tone] || colorScheme_v0.default
+  const color_v0 = (colorScheme_v0 as Record<string, ThemeColor>)[tone] || colorScheme_v0.default
   const layer_v0 = v0.layer || defaultThemeConfig.layer
 
   const colorScheme_v2 = v2.color[scheme] || v2.color.light

package/src/theme/system/color/_constants.ts

@@ -10,7 +10,9 @@ export const THEME_COLOR_BLEND_MODES = ['multiply', 'screen'] as const
 export const THEME_COLOR_CARD_TONES = [
   'transparent',
   'default',
-  'primary',
+  'neutral',
+  'primary', // deprecated
+  'suggest',
   'positive',
   'caution',
   'critical',
@@ -19,7 +21,9 @@ export const THEME_COLOR_CARD_TONES = [
 /** @public */
 export const THEME_COLOR_STATE_TONES = [
   'default',
-  'primary',
+  'neutral',
+  'primary', // deprecated
+  'suggest',
   'positive',
   'caution',
   'critical',