@sanity/ui 2.9.0-corel.0 → 2.9.1

package/src/theme/build/renderColorTheme.ts

@@ -1,3 +1,4 @@
+import {COLOR_HUES} from '@sanity/color'
 import {ThemeColorPalette, ThemeConfig} from '../config'
 import {defaultColorPalette} from '../defaults/colorPalette'
 import {
@@ -32,18 +33,15 @@ export function renderThemeColorSchemes(
   const colorPalette = config?.palette ?? defaultColorPalette
 
   return {
-    light: renderThemeColorScheme(colorPalette, value.light, {debugPath: 'light'}),
-    dark: renderThemeColorScheme(colorPalette, value.dark, {debugPath: 'dark'}),
+    light: renderThemeColorScheme(colorPalette, value.light),
+    dark: renderThemeColorScheme(colorPalette, value.dark),
   }
 }
 
 function renderThemeColorScheme(
   colorPalette: ThemeColorPalette,
   value: ThemeColorScheme_v2,
-  options: {debugPath: string},
 ): ThemeColorScheme_v2 {
-  const {debugPath} = options
-
   const toneEntries = Object.entries(value) as [ThemeColorCardToneKey, ThemeColorCard_v2][]
 
   const [, transparentTone] = toneEntries.find(([k]) => k === 'transparent')!
@@ -52,14 +50,8 @@ function renderThemeColorScheme(
   // The `transparent` and `default` tones are special cases, so we render them first
   // (rendered without a `bg` option).
   // But the rest of the tones are rendered on top of the `default` tone's `bg`.
-  const renderedTransparentTone = renderThemeColor(transparentTone, {
-    colorPalette,
-    debugPath: `${debugPath}.transparent`,
-  })
-  const renderedDefaultTone = renderThemeColor(defaultTone, {
-    colorPalette,
-    debugPath: `${debugPath}.default`,
-  })
+  const renderedTransparentTone = renderThemeColor(transparentTone, {colorPalette})
+  const renderedDefaultTone = renderThemeColor(defaultTone, {colorPalette})
 
   // Get the `default` tone's `bg` property
   const bg = renderedDefaultTone.bg
@@ -73,14 +65,7 @@ function renderThemeColorScheme(
     ['default', renderedDefaultTone],
     ...toneEntries
       .filter(([k]) => k !== 'default' && k !== 'transparent')
-      .map(([k, v]) => [
-        k,
-        renderThemeColor(v, {
-          bg,
-          colorPalette,
-          debugPath: `${debugPath}.${k}`,
-        }),
-      ]),
+      .map(([k, v]) => [k, renderThemeColor(v, {bg, colorPalette})]),
   ]) as ThemeColorScheme_v2
 }
 
@@ -89,12 +74,10 @@ function renderThemeColor(
   options: {
     bg?: string
     colorPalette: ThemeColorPalette
-    debugPath: string
   },
 ): ThemeColorCard_v2 {
-  const {colorPalette, bg, debugPath} = options
+  const {colorPalette, bg} = options
   const blendMode = value._blend || 'multiply'
-
   const baseBg = renderColorValue(value.bg, {colorPalette, bg, blendMode})
   const colorOptions: RenderColorValueOptions = {colorPalette, bg: baseBg, blendMode}
 
@@ -102,14 +85,12 @@ function renderThemeColor(
     baseBg,
     blendMode,
     colorPalette,
-    debugPath: `${debugPath}.button`,
   })
 
   const selectable = renderThemeColorSelectable(value.selectable, {
     colorPalette,
     baseBg,
     blendMode,
-    debugPath: `${debugPath}.selectable`,
   })
 
   const shadow: ThemeColorShadow = {
@@ -137,19 +118,9 @@ function renderThemeColor(
     accent: {
       fg: renderColorValue(value.accent.fg, colorOptions),
     },
-    avatar: renderThemeColorAvatar(value.avatar, {
-      baseBg,
-      colorPalette,
-      blendMode,
-      debugPath: `${debugPath}.avatar`,
-    }),
+    avatar: renderThemeColorAvatar(value.avatar, {baseBg, colorPalette, blendMode}),
     backdrop: renderColorValue(value.backdrop, colorOptions),
-    badge: renderThemeColorBadge(value.badge, {
-      baseBg,
-      colorPalette,
-      blendMode,
-      debugPath: `${debugPath}.badge`,
-    }),
+    badge: renderThemeColorBadge(value.badge, {baseBg, colorPalette, blendMode}),
     bg: baseBg,
     border: renderColorValue(value.border, colorOptions),
     button,
@@ -160,18 +131,8 @@ function renderThemeColor(
     fg: renderColorValue(value.fg, colorOptions),
     focusRing: renderColorValue(value.focusRing, colorOptions),
     icon: renderColorValue(value.icon, colorOptions),
-    input: renderThemeColorInput(value.input, {
-      baseBg,
-      colorPalette,
-      blendMode,
-      debugPath: `${debugPath}.input`,
-    }),
-    kbd: renderThemeColorKBD(value.kbd, {
-      baseBg,
-      colorPalette,
-      blendMode,
-      debugPath: `${debugPath}.kbd`,
-    }),
+    input: renderThemeColorInput(value.input, {baseBg, colorPalette, blendMode}),
+    kbd: renderThemeColorKBD(value.kbd, {baseBg, colorPalette, blendMode}),
     link: {
       fg: renderColorValue(value.link.fg, colorOptions),
     },
@@ -184,12 +145,7 @@ function renderThemeColor(
       from: renderColorValue(value.skeleton.from, colorOptions),
       to: renderColorValue(value.skeleton.to, colorOptions),
     },
-    syntax: renderSyntaxColorTheme(value.syntax, {
-      baseBg,
-      colorPalette,
-      blendMode,
-      debugPath: `${debugPath}.syntax`,
-    }),
+    syntax: renderSyntaxColorTheme(value.syntax, {baseBg, colorPalette, blendMode}),
     selectable,
   }
 }
@@ -200,7 +156,6 @@ function renderThemeColorKBD(
     baseBg: string
     blendMode: ThemeColorBlendModeKey
     colorPalette: ThemeColorPalette
-    debugPath: string
   },
 ): ThemeColorKBD {
   const {baseBg, blendMode, colorPalette} = options
@@ -232,49 +187,15 @@ function renderThemeColorAvatar(
     baseBg: string
     blendMode: ThemeColorBlendModeKey
     colorPalette: ThemeColorPalette
-    debugPath: string
   },
 ): ThemeColorAvatar_v2 {
-  const {debugPath} = options
+  const colorAvatar = {} as ThemeColorAvatar_v2
 
-  return {
-    gray: renderThemeColorAvatarColor(value.gray, {
-      ...options,
-      debugPath: `${debugPath}.gray`,
-    }),
-    blue: renderThemeColorAvatarColor(value.blue, {
-      ...options,
-      debugPath: `${debugPath}.blue`,
-    }),
-    purple: renderThemeColorAvatarColor(value.purple, {
-      ...options,
-      debugPath: `${debugPath}.purple`,
-    }),
-    magenta: renderThemeColorAvatarColor(value.magenta, {
-      ...options,
-      debugPath: `${debugPath}.magenta`,
-    }),
-    red: renderThemeColorAvatarColor(value.red, {
-      ...options,
-      debugPath: `${debugPath}.red`,
-    }),
-    orange: renderThemeColorAvatarColor(value.orange, {
-      ...options,
-      debugPath: `${debugPath}.orange`,
-    }),
-    yellow: renderThemeColorAvatarColor(value.yellow, {
-      ...options,
-      debugPath: `${debugPath}.yellow`,
-    }),
-    green: renderThemeColorAvatarColor(value.green, {
-      ...options,
-      debugPath: `${debugPath}.green`,
-    }),
-    cyan: renderThemeColorAvatarColor(value.cyan, {
-      ...options,
-      debugPath: `${debugPath}.cyan`,
-    }),
+  for (const hue of COLOR_HUES) {
+    colorAvatar[hue] = renderThemeColorAvatarColor(value[hue], options)
   }
+
+  return colorAvatar
 }
 
 function renderThemeColorAvatarColor(
@@ -283,7 +204,6 @@ function renderThemeColorAvatarColor(
     baseBg: string
     blendMode: ThemeColorBlendModeKey
     colorPalette: ThemeColorPalette
-    debugPath: string
   },
 ): ThemeColorAvatar_v2['gray'] {
   const {baseBg, blendMode: rootBlendMode, colorPalette} = options
@@ -316,19 +236,15 @@ function renderThemeColorBadge(
     baseBg: string
     blendMode: ThemeColorBlendModeKey
     colorPalette: ThemeColorPalette
-    debugPath: string
   },
 ): ThemeColorBadge_v2 {
-  const {debugPath} = options
+  const colorBadge = {} as ThemeColorBadge_v2
 
-  return THEME_COLOR_STATE_TONES.reduce((acc, tone) => {
-    acc[tone] = renderThemeColorBadgeColor(value[tone], {
-      ...options,
-      debugPath: `${debugPath}.${tone}`,
-    })
+  for (const tone of THEME_COLOR_STATE_TONES) {
+    colorBadge[tone] = renderThemeColorBadgeColor(value[tone], options)
+  }
 
-    return acc
-  }, {} as ThemeColorBadge_v2)
+  return colorBadge
 }
 
 function renderThemeColorBadgeColor(
@@ -337,7 +253,6 @@ function renderThemeColorBadgeColor(
     baseBg: string
     blendMode: ThemeColorBlendModeKey
     colorPalette: ThemeColorPalette
-    debugPath: string
   },
 ): ThemeColorBadgeTone_v2 {
   const {baseBg, blendMode: rootBlendMode, colorPalette} = options
@@ -372,24 +287,12 @@ function renderThemeColorButton(
     baseBg: string
     blendMode: ThemeColorBlendModeKey
     colorPalette: ThemeColorPalette
-    debugPath: string
   },
 ): ThemeColorButton_v2 {
-  const {debugPath} = options
-
   return {
-    default: renderThemeColorButtonTones(value.default, {
-      ...options,
-      debugPath: `${debugPath}.default`,
-    }),
-    ghost: renderThemeColorButtonTones(value.ghost, {
-      ...options,
-      debugPath: `${debugPath}.ghost`,
-    }),
-    bleed: renderThemeColorButtonTones(value.bleed, {
-      ...options,
-      debugPath: `${debugPath}.bleed`,
-    }),
+    default: renderThemeColorButtonTones(value.default, options),
+    ghost: renderThemeColorButtonTones(value.ghost, options),
+    bleed: renderThemeColorButtonTones(value.bleed, options),
   }
 }
 
@@ -399,19 +302,15 @@ function renderThemeColorButtonTones(
     baseBg: string
     blendMode: ThemeColorBlendModeKey
     colorPalette: ThemeColorPalette
-    debugPath: string
   },
 ): ThemeColorButtonMode_v2 {
-  const {debugPath} = options
+  const colorButtonMode = {} as ThemeColorButtonMode_v2
 
-  return THEME_COLOR_STATE_TONES.reduce((acc, tone) => {
-    acc[tone] = renderThemeColorButtonStates(value[tone], {
-      ...options,
-      debugPath: `${debugPath}.${tone}`,
-    })
+  for (const tone of THEME_COLOR_STATE_TONES) {
+    colorButtonMode[tone] = renderThemeColorButtonStates(value[tone], options)
+  }
 
-    return acc
-  }, {} as ThemeColorButtonMode_v2)
+  return colorButtonMode
 }
 
 function renderThemeColorButtonStates(
@@ -420,32 +319,14 @@ function renderThemeColorButtonStates(
     baseBg: string
     blendMode: ThemeColorBlendModeKey
     colorPalette: ThemeColorPalette
-    debugPath: string
   },
 ): ThemeColorButtonTone_v2 {
-  const {debugPath} = options
-
   return {
-    enabled: renderThemeColorState(value.enabled, {
-      ...options,
-      debugPath: `${debugPath}.enabled`,
-    }),
-    hovered: renderThemeColorState(value.hovered, {
-      ...options,
-      debugPath: `${debugPath}.hovered`,
-    }),
-    pressed: renderThemeColorState(value.pressed, {
-      ...options,
-      debugPath: `${debugPath}.pressed`,
-    }),
-    selected: renderThemeColorState(value.selected, {
-      ...options,
-      debugPath: `${debugPath}.selected`,
-    }),
-    disabled: renderThemeColorState(value.disabled, {
-      ...options,
-      debugPath: `${debugPath}.disabled`,
-    }),
+    enabled: renderThemeColorState(value.enabled, options),
+    hovered: renderThemeColorState(value.hovered, options),
+    pressed: renderThemeColorState(value.pressed, options),
+    selected: renderThemeColorState(value.selected, options),
+    disabled: renderThemeColorState(value.disabled, options),
   }
 }
 
@@ -455,10 +336,9 @@ function renderThemeColorState(
     baseBg: string
     blendMode: ThemeColorBlendModeKey
     colorPalette: ThemeColorPalette
-    debugPath: string
   },
 ): ThemeColorState_v2 {
-  const {baseBg, blendMode: rootBlendMode, colorPalette, debugPath} = options
+  const {baseBg, blendMode: rootBlendMode, colorPalette} = options
   const blendMode = value._blend || 'multiply'
 
   const rootOptions: RenderColorValueOptions = {
@@ -480,18 +360,8 @@ function renderThemeColorState(
     accent: {
       fg: renderColorValue(value.accent.fg, colorOptions),
     },
-    avatar: renderThemeColorAvatar(value.avatar, {
-      baseBg: bg,
-      colorPalette,
-      blendMode,
-      debugPath: `${debugPath}.avatar`,
-    }),
-    badge: renderThemeColorBadge(value.badge, {
-      baseBg: bg,
-      colorPalette,
-      blendMode,
-      debugPath: `${debugPath}.badge`,
-    }),
+    avatar: renderThemeColorAvatar(value.avatar, {baseBg: bg, colorPalette, blendMode}),
+    badge: renderThemeColorBadge(value.badge, {baseBg: bg, colorPalette, blendMode}),
     bg,
     border: renderColorValue(value.border, colorOptions),
     code: {
@@ -525,20 +395,11 @@ function renderThemeColorInput(
     baseBg: string
     blendMode: ThemeColorBlendModeKey
     colorPalette: ThemeColorPalette
-    debugPath: string
   },
 ): ThemeColorInput_v2 {
-  const {debugPath} = options
-
   return {
-    default: renderInputStatesColorTheme(value.default, {
-      ...options,
-      debugPath: `${debugPath}.default`,
-    }),
-    invalid: renderInputStatesColorTheme(value.invalid, {
-      ...options,
-      debugPath: `${debugPath}.invalid`,
-    }),
+    default: renderInputStatesColorTheme(value.default, options),
+    invalid: renderInputStatesColorTheme(value.invalid, options),
   }
 }
 
@@ -548,28 +409,13 @@ function renderInputStatesColorTheme(
     baseBg: string
     blendMode: ThemeColorBlendModeKey
     colorPalette: ThemeColorPalette
-    debugPath: string
   },
 ): ThemeColorInputMode_v2 {
-  const {debugPath} = options
-
   return {
-    enabled: renderInputStateColorTheme(value.enabled, {
-      ...options,
-      debugPath: `${debugPath}.enabled`,
-    }),
-    hovered: renderInputStateColorTheme(value.hovered, {
-      ...options,
-      debugPath: `${debugPath}.hovered`,
-    }),
-    readOnly: renderInputStateColorTheme(value.readOnly, {
-      ...options,
-      debugPath: `${debugPath}.readOnly`,
-    }),
-    disabled: renderInputStateColorTheme(value.disabled, {
-      ...options,
-      debugPath: `${debugPath}.disabled`,
-    }),
+    enabled: renderInputStateColorTheme(value.enabled, options),
+    hovered: renderInputStateColorTheme(value.hovered, options),
+    readOnly: renderInputStateColorTheme(value.readOnly, options),
+    disabled: renderInputStateColorTheme(value.disabled, options),
   }
 }
 
@@ -579,7 +425,6 @@ function renderInputStateColorTheme(
     baseBg: string
     blendMode: ThemeColorBlendModeKey
     colorPalette: ThemeColorPalette
-    debugPath: string
   },
 ): ThemeColorInputState_v2 {
   const {baseBg, blendMode: rootBlendMode, colorPalette} = options
@@ -606,19 +451,15 @@ function renderThemeColorSelectable(
     baseBg: string
     blendMode: ThemeColorBlendModeKey
     colorPalette: ThemeColorPalette
-    debugPath: string
   },
 ): ThemeColorSelectable_v2 {
-  const {debugPath} = options
+  const colorSelectable = {} as ThemeColorSelectable_v2
 
-  return THEME_COLOR_STATE_TONES.reduce((acc, tone) => {
-    acc[tone] = renderThemeColorSelectableStates(value[tone], {
-      ...options,
-      debugPath: `${debugPath}.${tone}`,
-    })
+  for (const tone of THEME_COLOR_STATE_TONES) {
+    colorSelectable[tone] = renderThemeColorSelectableStates(value[tone], options)
+  }
 
-    return acc
-  }, {} as ThemeColorSelectable_v2)
+  return colorSelectable
 }
 
 function renderThemeColorSelectableStates(
@@ -627,32 +468,14 @@ function renderThemeColorSelectableStates(
     baseBg: string
     blendMode: ThemeColorBlendModeKey
     colorPalette: ThemeColorPalette
-    debugPath: string
   },
 ): ThemeColorSelectableTone_v2 {
-  const {debugPath} = options
-
   return {
-    enabled: renderThemeColorState(value.enabled, {
-      ...options,
-      debugPath: `${debugPath}.enabled`,
-    }),
-    hovered: renderThemeColorState(value.hovered, {
-      ...options,
-      debugPath: `${debugPath}.hovered`,
-    }),
-    pressed: renderThemeColorState(value.pressed, {
-      ...options,
-      debugPath: `${debugPath}.pressed`,
-    }),
-    selected: renderThemeColorState(value.selected, {
-      ...options,
-      debugPath: `${debugPath}.selected`,
-    }),
-    disabled: renderThemeColorState(value.disabled, {
-      ...options,
-      debugPath: `${debugPath}.disabled`,
-    }),
+    enabled: renderThemeColorState(value.enabled, options),
+    hovered: renderThemeColorState(value.hovered, options),
+    pressed: renderThemeColorState(value.pressed, options),
+    selected: renderThemeColorState(value.selected, options),
+    disabled: renderThemeColorState(value.disabled, options),
   }
 }
 
@@ -662,7 +485,6 @@ function renderSyntaxColorTheme(
     baseBg: string
     blendMode: ThemeColorBlendModeKey
     colorPalette: ThemeColorPalette
-    debugPath: string
   },
 ): ThemeColorSyntax {
   const {colorPalette, baseBg, blendMode} = options

package/src/theme/defaults/colorTokens.ts

@@ -22,9 +22,6 @@ export const defaultColorTokens: ThemeColorTokens = {
           icon: ['500', '500'],
           dot: ['500', '500'],
         },
-        'default': {
-          _hue: 'gray',
-        },
         'positive': {
           bg: ['200 50%', '900'],
           fg: ['600', '500'],
@@ -41,7 +38,7 @@ export const defaultColorTokens: ThemeColorTokens = {
         fg: ['600', '400'],
       },
       fg: ['800', '200'],
-      focusRing: ['purple/500', 'purple/500'],
+      focusRing: ['blue/500', 'blue/500'],
       icon: ['600', '400'],
       kbd: {
         bg: ['white', 'black'],
@@ -49,7 +46,7 @@ export const defaultColorTokens: ThemeColorTokens = {
         border: ['200', '800'],
       },
       link: {
-        fg: ['purple/600', 'purple/300'],
+        fg: ['blue/600', 'blue/300'],
       },
       muted: {
         bg: ['50', '950'],
@@ -76,7 +73,8 @@ export const defaultColorTokens: ThemeColorTokens = {
         fg: ['600', '400'],
       },
     },
-    'primary': {_hue: 'purple'},
+    'primary': {_hue: 'blue'},
+    'suggest': {_hue: 'purple'},
     'positive': {
       _hue: 'green',
       shadow: {outline: ['500/0.4', '500/0.4']},
@@ -86,8 +84,6 @@ export const defaultColorTokens: ThemeColorTokens = {
       shadow: {outline: ['600/0.3', '500/0.4']},
     },
     'critical': {_hue: 'red'},
-    'prospect': {_hue: 'purple'},
-    'explore': {_hue: 'cyan'},
   },
   button: {
     default: {
@@ -126,7 +122,7 @@ export const defaultColorTokens: ThemeColorTokens = {
             border: ['800', '200'],
           },
           link: {
-            fg: ['purple/200', 'purple/600'],
+            fg: ['blue/200', 'blue/600'],
           },
           muted: {
             bg: ['950', '50'],
@@ -138,7 +134,7 @@ export const defaultColorTokens: ThemeColorTokens = {
           },
         },
         'hovered': {
-          bg: ['700', '300'],
+          bg: ['600', '300'],
           border: ['700/0', '300/0'],
         },
         'pressed': {
@@ -249,7 +245,7 @@ export const defaultColorTokens: ThemeColorTokens = {
             border: ['200', '800'],
           },
           link: {
-            fg: ['purple/700 60%', 'purple/300 60%'],
+            fg: ['blue/700 60%', 'blue/300 60%'],
           },
           muted: {
             bg: ['100', '950'],
@@ -265,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': {
@@ -360,7 +356,7 @@ export const defaultColorTokens: ThemeColorTokens = {
             border: ['200', '800'],
           },
           link: {
-            fg: ['purple/700 70%', 'purple/300 70%'],
+            fg: ['blue/700 70%', 'blue/300 70%'],
           },
           muted: {
             bg: ['100', '950'],
@@ -498,7 +494,7 @@ export const defaultColorTokens: ThemeColorTokens = {
           border: ['200', '800'],
         },
         link: {
-          fg: ['purple/700 70%', 'purple/300 70%'],
+          fg: ['blue/700 70%', 'blue/300 70%'],
         },
         muted: {
           bg: ['50', '950'],
@@ -513,7 +509,6 @@ export const defaultColorTokens: ThemeColorTokens = {
         bg: ['50', '950'],
       },
       'pressed': {
-        // _hue: 'purple',
         bg: ['100', '900'],
       },
       'selected': {
@@ -550,7 +545,7 @@ export const defaultColorTokens: ThemeColorTokens = {
           border: ['800', '200'],
         },
         link: {
-          fg: ['purple/200', 'purple/600'],
+          fg: ['blue/200', 'blue/600'],
         },
         muted: {
           bg: ['500 10%', '400 10%'],
@@ -605,7 +600,7 @@ export const defaultColorTokens: ThemeColorTokens = {
     },
     'default': {
       selected: {
-        _hue: 'purple',
+        _hue: 'blue',
       },
     },
     'critical': {

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

@@ -10,27 +10,23 @@ 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',
-
-  // new
-  'prospect',
-  'explore',
 ] as const
 
 /** @public */
 export const THEME_COLOR_STATE_TONES = [
   'default',
-  'primary',
+  'neutral',
+  'primary', // deprecated
+  'suggest',
   'positive',
   'caution',
   'critical',
-
-  // new
-  'prospect',
-  'explore',
 ] as const
 
 /** @public */