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

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}