@sanity/ui 2.9.0-canary.6 → 2.10.0-corel.0

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

@@ -22,6 +22,9 @@ export const defaultColorTokens: ThemeColorTokens = {
           icon: ['500', '500'],
           dot: ['500', '500'],
         },
+        'default': {
+          _hue: 'gray',
+        },
         'positive': {
           bg: ['200 50%', '900'],
           fg: ['600', '500'],
@@ -38,7 +41,7 @@ export const defaultColorTokens: ThemeColorTokens = {
         fg: ['600', '400'],
       },
       fg: ['800', '200'],
-      focusRing: ['blue/500', 'blue/500'],
+      focusRing: ['purple/500', 'purple/500'],
       icon: ['600', '400'],
       kbd: {
         bg: ['white', 'black'],
@@ -46,7 +49,7 @@ export const defaultColorTokens: ThemeColorTokens = {
         border: ['200', '800'],
       },
       link: {
-        fg: ['blue/600', 'blue/300'],
+        fg: ['purple/600', 'purple/300'],
       },
       muted: {
         bg: ['50', '950'],
@@ -73,7 +76,7 @@ export const defaultColorTokens: ThemeColorTokens = {
         fg: ['600', '400'],
       },
     },
-    'primary': {_hue: 'blue'},
+    'primary': {_hue: 'purple'},
     'positive': {
       _hue: 'green',
       shadow: {outline: ['500/0.4', '500/0.4']},
@@ -83,6 +86,8 @@ export const defaultColorTokens: ThemeColorTokens = {
       shadow: {outline: ['600/0.3', '500/0.4']},
     },
     'critical': {_hue: 'red'},
+    'prospect': {_hue: 'purple'},
+    'explore': {_hue: 'cyan'},
   },
   button: {
     default: {
@@ -121,7 +126,7 @@ export const defaultColorTokens: ThemeColorTokens = {
             border: ['800', '200'],
           },
           link: {
-            fg: ['blue/200', 'blue/600'],
+            fg: ['purple/200', 'purple/600'],
           },
           muted: {
             bg: ['950', '50'],
@@ -244,7 +249,7 @@ export const defaultColorTokens: ThemeColorTokens = {
             border: ['200', '800'],
           },
           link: {
-            fg: ['blue/700 60%', 'blue/300 60%'],
+            fg: ['purple/700 60%', 'purple/300 60%'],
           },
           muted: {
             bg: ['100', '950'],
@@ -355,7 +360,7 @@ export const defaultColorTokens: ThemeColorTokens = {
             border: ['200', '800'],
           },
           link: {
-            fg: ['blue/700 70%', 'blue/300 70%'],
+            fg: ['purple/700 70%', 'purple/300 70%'],
           },
           muted: {
             bg: ['100', '950'],
@@ -368,7 +373,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 +433,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 +449,7 @@ export const defaultColorTokens: ThemeColorTokens = {
         fg: ['800', '200'],
       },
       'disabled': {
+        bg: ['50', '950'],
         fg: ['400', '600'],
         border: ['100', '900'],
         placeholder: ['200', '800 50%'],
@@ -491,7 +498,7 @@ export const defaultColorTokens: ThemeColorTokens = {
           border: ['200', '800'],
         },
         link: {
-          fg: ['blue/700 70%', 'blue/300 70%'],
+          fg: ['purple/700 70%', 'purple/300 70%'],
         },
         muted: {
           bg: ['50', '950'],
@@ -506,6 +513,7 @@ export const defaultColorTokens: ThemeColorTokens = {
         bg: ['50', '950'],
       },
       'pressed': {
+        // _hue: 'purple',
         bg: ['100', '900'],
       },
       'selected': {
@@ -542,7 +550,7 @@ export const defaultColorTokens: ThemeColorTokens = {
           border: ['800', '200'],
         },
         link: {
-          fg: ['blue/200', 'blue/600'],
+          fg: ['purple/200', 'purple/600'],
         },
         muted: {
           bg: ['500 10%', '400 10%'],
@@ -597,7 +605,7 @@ export const defaultColorTokens: ThemeColorTokens = {
     },
     'default': {
       selected: {
-        _hue: 'blue',
+        _hue: 'purple',
       },
     },
     'critical': {

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

@@ -14,6 +14,10 @@ export const THEME_COLOR_CARD_TONES = [
   'positive',
   'caution',
   'critical',
+
+  // new
+  'prospect',
+  'explore',
 ] as const
 
 /** @public */
@@ -23,6 +27,10 @@ export const THEME_COLOR_STATE_TONES = [
   'positive',
   'caution',
   'critical',
+
+  // new
+  'prospect',
+  'explore',
 ] as const
 
 /** @public */

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

@@ -1,3 +1,5 @@
+import {ThemeColorStateToneKey} from './_system'
+
 /**
  * @public
  */
@@ -11,10 +13,4 @@ export interface ThemeColorBadgeTone_v2 {
 /**
  * @public
  */
-export interface ThemeColorBadge_v2 {
-  default: ThemeColorBadgeTone_v2
-  primary: ThemeColorBadgeTone_v2
-  positive: ThemeColorBadgeTone_v2
-  caution: ThemeColorBadgeTone_v2
-  critical: ThemeColorBadgeTone_v2
-}
+export type ThemeColorBadge_v2 = Record<ThemeColorStateToneKey, ThemeColorBadgeTone_v2>

package/src/theme/system/v0/color/_system.ts

@@ -1,13 +1,17 @@
-import {ThemeColorCardToneKey} from '../../color/_system'
-
 /**
  * @public
  * @deprecated Use `ThemeColorCardToneKey` instead.
  */
-export type ThemeColorName = ThemeColorCardToneKey
+export type ThemeColorName =
+  | 'transparent'
+  | 'default'
+  | 'primary'
+  | 'positive'
+  | 'caution'
+  | 'critical'
 
 /**
  * @public
  * @deprecated Use `ThemeColorCardToneKey` instead.
  */
-export type ThemeColorToneKey = ThemeColorCardToneKey
+export type ThemeColorToneKey = ThemeColorName

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

@@ -1,5 +1,6 @@
-import {ThemeColorCardToneKey, ThemeColorSchemeKey, ThemeColorSyntax} from '../../color'
+import {ThemeColorSchemeKey, ThemeColorSyntax} from '../../color'
 import {ThemeColorGenericState} from './_generic'
+import {ThemeColorName} from './_system'
 import {ThemeColorBase} from './base'
 import {ThemeColorButton} from './button'
 import {ThemeColorCard} from './card'
@@ -30,7 +31,7 @@ export interface ThemeColor extends Partial<Omit<ThemeColorGenericState, 'muted'
  * @public
  * @deprecated Use `ThemeColorScheme_v2` instead.
  */
-export type ThemeColorScheme = Record<ThemeColorCardToneKey, ThemeColor>
+export type ThemeColorScheme = Record<ThemeColorName, ThemeColor>
 
 /**
  * @public

package/src/theme/versioning/themeColor_v0_v2.ts

@@ -103,6 +103,20 @@ function stateTonesThemeColor_v0_v2(
       selected: stateThemeColor_v0_v2(v0, t.critical.selected),
       disabled: stateThemeColor_v0_v2(v0, t.critical.disabled),
     },
+    prospect: {
+      enabled: stateThemeColor_v0_v2(v0, t.default.enabled),
+      hovered: stateThemeColor_v0_v2(v0, t.default.hovered),
+      pressed: stateThemeColor_v0_v2(v0, t.default.pressed),
+      selected: stateThemeColor_v0_v2(v0, t.default.selected),
+      disabled: stateThemeColor_v0_v2(v0, t.default.disabled),
+    },
+    explore: {
+      enabled: stateThemeColor_v0_v2(v0, t.default.enabled),
+      hovered: stateThemeColor_v0_v2(v0, t.default.hovered),
+      pressed: stateThemeColor_v0_v2(v0, t.default.pressed),
+      selected: stateThemeColor_v0_v2(v0, t.default.selected),
+      disabled: stateThemeColor_v0_v2(v0, t.default.disabled),
+    },
   }
 }
 
@@ -178,6 +192,18 @@ function stateThemeColor_v0_v2(v0: ThemeColor, state: ThemeColorGenericState): T
         dot: v0.muted.critical.enabled.muted.fg,
         icon: v0.muted.critical.enabled.muted.fg,
       },
+      prospect: {
+        bg: v0.muted.default.enabled.bg,
+        fg: v0.muted.default.enabled.fg,
+        dot: v0.muted.default.enabled.muted.fg,
+        icon: v0.muted.default.enabled.muted.fg,
+      },
+      explore: {
+        bg: v0.muted.default.enabled.bg,
+        fg: v0.muted.default.enabled.fg,
+        dot: v0.muted.default.enabled.muted.fg,
+        icon: v0.muted.default.enabled.muted.fg,
+      },
     },
     kbd: {
       bg: v0.muted.default.enabled.bg,

package/src/theme/versioning/v0_v2.ts

@@ -48,6 +48,8 @@ export function v0_v2(v0: RootTheme): RootTheme_v2 {
         positive: themeColor_v0_v2(color.light.positive),
         caution: themeColor_v0_v2(color.light.caution),
         critical: themeColor_v0_v2(color.light.critical),
+        prospect: themeColor_v0_v2(color.light.default),
+        explore: themeColor_v0_v2(color.light.default),
       },
       dark: {
         transparent: themeColor_v0_v2(color.dark.transparent),
@@ -56,6 +58,8 @@ export function v0_v2(v0: RootTheme): RootTheme_v2 {
         positive: themeColor_v0_v2(color.dark.positive),
         caution: themeColor_v0_v2(color.dark.caution),
         critical: themeColor_v0_v2(color.dark.critical),
+        prospect: themeColor_v0_v2(color.dark.default),
+        explore: themeColor_v0_v2(color.dark.default),
       },
     },
     container,

package/src/core/components/toast/toastState.ts

@@ -1,6 +0,0 @@
-let toastId = 0
-
-/** @internal */
-export function generateToastId(): string {
-  return String(toastId++)
-}