build: update @sanity/color dependency (#2452)

* build(examples): add missing `@sanity/color` dependency

* build(types): add missing `@sanity/color` dependency

* build(form-builder): add missing `@sanity/color` dependency

* build(base): update `@sanity/color`

examples/design-studio/package.json

@@ -20,6 +20,7 @@
   "dependencies": {
     "@sanity/base": "2.9.1",
     "@sanity/cli": "2.9.1",
+    "@sanity/color": "^2.0.15",
     "@sanity/core": "2.9.1",
     "@sanity/default-layout": "2.9.1",
     "@sanity/default-login": "2.8.0",

packages/@sanity/base/package.json

@@ -34,7 +34,7 @@
     "@reach/auto-id": "^0.13.2",
     "@sanity/bifur-client": "^0.0.8",
     "@sanity/client": "2.8.0",
-    "@sanity/color": "^1.0.0",
+    "@sanity/color": "^2.0.15",
     "@sanity/generate-help-url": "2.2.6",
     "@sanity/icons": "1.0.5",
     "@sanity/image-url": "^0.140.19",

packages/@sanity/base/src/__legacy/@sanity/components/avatar/stories/stack.tsx

@@ -1,17 +1,17 @@
-import {color} from '@sanity/color'
+import {hues} from '@sanity/color'
 import {Avatar, AvatarStack} from 'part:@sanity/components/avatar'
 import {number, select} from 'part:@sanity/storybook/addons/knobs'
 import Sanity from 'part:@sanity/storybook/addons/sanity'
 import {CenteredContainer} from 'part:@sanity/storybook/components'
 import React from 'react'
 
 const colors = [
-  {dark: color.blue[400].hex, light: color.blue[500].hex},
-  {dark: color.purple[400].hex, light: color.purple[500].hex},
-  {dark: color.magenta[400].hex, light: color.magenta[500].hex},
-  {dark: color.orange[400].hex, light: color.orange[500].hex},
-  {dark: color.yellow[400].hex, light: color.yellow[500].hex},
-  {dark: color.cyan[400].hex, light: color.cyan[500].hex},
+  {dark: hues.blue[400].hex, light: hues.blue[500].hex},
+  {dark: hues.purple[400].hex, light: hues.purple[500].hex},
+  {dark: hues.magenta[400].hex, light: hues.magenta[500].hex},
+  {dark: hues.orange[400].hex, light: hues.orange[500].hex},
+  {dark: hues.yellow[400].hex, light: hues.yellow[500].hex},
+  {dark: hues.cyan[400].hex, light: hues.cyan[500].hex},
 ]
 
 function getRandomColor() {

packages/@sanity/base/src/components/formField/FormFieldValidationStatus.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
 
-import {color} from '@sanity/color'
+import {hues} from '@sanity/color'
 import {ErrorOutlineIcon, WarningOutlineIcon} from '@sanity/icons'
 import {
   isValidationErrorMarker,
@@ -39,7 +39,7 @@ export function FormFieldValidationStatus(props: FormFieldValidationStatusProps)
   const errors = validation.filter((v) => v.type === 'error')
   const hasErrors = errors.length > 0
   const statusIcon = hasErrors ? ErrorOutlineIcon : WarningOutlineIcon
-  const statusColor = hasErrors ? color.red[500].hex : color.yellow[500].hex
+  const statusColor = hasErrors ? hues.red[500].hex : hues.yellow[500].hex
 
   return (
     <Tooltip
@@ -72,7 +72,7 @@ export function FormFieldValidationStatus(props: FormFieldValidationStatusProps)
 function FormFieldValidationStatusItem(props: {item: FormFieldValidation}) {
   const {item} = props
   const statusIcon = item.type === 'error' ? ErrorOutlineIcon : WarningOutlineIcon
-  const statusColor = item.type === 'error' ? color.red[500].hex : color.yellow[500].hex
+  const statusColor = item.type === 'error' ? hues.red[500].hex : hues.yellow[500].hex
 
   return (
     <Flex>

packages/@sanity/base/src/theme/color.ts

@@ -1,4 +1,4 @@
-import {color as hues} from '@sanity/color'
+import {hues} from '@sanity/color'
 import {createColorTheme, rgba} from '@sanity/ui'
 import {_multiply, _screen, _isDark} from './helpers'
 import {legacyPalette} from './legacyPalette'

packages/@sanity/base/src/user-color/manager.ts

@@ -1,6 +1,6 @@
 import {Observable} from 'rxjs'
 import {filter, shareReplay} from 'rxjs/operators'
-import {color as SanityColor, ColorHueKey, COLOR_HUES} from '@sanity/color'
+import {hues, ColorHueKey, COLOR_HUES} from '@sanity/color'
 import {UserColorHue, UserColorManager, UserColor, UserId} from './types'
 
 export interface UserColorManagerOptions {
@@ -12,41 +12,44 @@ export interface UserColorManagerOptions {
 
 const defaultCurrentUserHue: ColorHueKey = 'purple'
 
-// Remove green and red because they can be confused with "add" and "remove"
-// Remove gray because it looks like "color not found"
+// Exclude green and red because they can be confused with "add" and "remove"
+// Exclude gray because it looks like "color not found"
+const USER_COLOR_EXCLUDE_HUES = ['green', 'red', 'gray']
+
 const defaultHues: ColorHueKey[] = COLOR_HUES.filter(
-  (hue) => hue !== 'green' && hue !== 'red' && hue !== 'gray'
+  (hue) => !USER_COLOR_EXCLUDE_HUES.includes(hue)
 )
 
 const defaultColors = defaultHues.reduce((colors, hue) => {
   colors[hue] = {
-    background: SanityColor[hue][100].hex,
-    border: SanityColor[hue][300].hex,
-    text: SanityColor[hue][700].hex,
-    tints: SanityColor[hue],
+    background: hues[hue][100].hex,
+    border: hues[hue][300].hex,
+    text: hues[hue][700].hex,
+    tints: hues[hue],
   }
   return colors
 }, {} as Record<ColorHueKey, UserColor>)
 
 const defaultAnonymousColor: UserColor = {
-  background: SanityColor.gray[100].hex,
-  border: SanityColor.gray[300].hex,
-  text: SanityColor.gray[700].hex,
-  tints: SanityColor.gray,
+  background: hues.gray[100].hex,
+  border: hues.gray[300].hex,
+  text: hues.gray[700].hex,
+  tints: hues.gray,
 }
 
 export function createUserColorManager(options?: UserColorManagerOptions): UserColorManager {
   const userColors = (options && options.colors) || defaultColors
   const anonymousColor = options?.anonymousColor || defaultAnonymousColor
   const currentUserColor = (options && options.currentUserColor) || defaultCurrentUserHue
+
   if (!userColors.hasOwnProperty(currentUserColor)) {
     throw new Error(`'colors' must contain 'currentUserColor' (${currentUserColor})`)
   }
 
-  const colorHues: UserColorHue[] = Object.keys(userColors)
+  const userColorKeys: UserColorHue[] = Object.keys(userColors)
   const subscriptions = new Map<UserId, Observable<UserColor>>()
   const previouslyAssigned = new Map<UserId, UserColorHue>()
-  const assignedCounts: Record<UserColorHue, number> = colorHues.reduce((counts, color) => {
+  const assignedCounts: Record<UserColorHue, number> = userColorKeys.reduce((counts, color) => {
     counts[color] = 0
     return counts
   }, {} as Record<UserColorHue, number>)
@@ -126,7 +129,7 @@ export function createUserColorManager(options?: UserColorManagerOptions): UserC
   }
 
   function getUnusedColor(): UserColorHue | undefined {
-    return colorHues.find((colorHue) => assignedCounts[colorHue] === 0)
+    return userColorKeys.find((colorHue) => assignedCounts[colorHue] === 0)
   }
 
   function hasUnusedColor(): boolean {
@@ -137,7 +140,7 @@ export function createUserColorManager(options?: UserColorManagerOptions): UserC
     let leastUses = +Infinity
     let leastUsed: UserColorHue[] = []
 
-    colorHues.forEach((colorHue) => {
+    userColorKeys.forEach((colorHue) => {
       const uses = assignedCounts[colorHue]
       if (uses === leastUses) {
         leastUsed.push(colorHue)
@@ -174,6 +177,6 @@ export function createUserColorManager(options?: UserColorManagerOptions): UserC
       // eslint-disable-next-line no-bitwise
       hash = ((hash << 5) - hash + userId.charCodeAt(i)) | 0
     }
-    return colorHues[Math.abs(hash) % colorHues.length]
+    return userColorKeys[Math.abs(hash) % userColorKeys.length]
   }
 }

packages/@sanity/form-builder/package.json

@@ -22,7 +22,7 @@
     "@sanity/base": "2.9.1",
     "@sanity/block-tools": "2.9.1",
     "@sanity/client": "2.8.0",
-    "@sanity/color": "^2.0.14",
+    "@sanity/color": "^2.0.15",
     "@sanity/generate-help-url": "2.2.6",
     "@sanity/icons": "^1.0.1",
     "@sanity/imagetool": "2.9.0",

packages/@sanity/types/package.json

@@ -21,6 +21,7 @@
   ],
   "dependencies": {
     "@sanity/client": "2.8.0",
+    "@sanity/color": "^2.0.15",
     "@types/react": "^17.0.0",
     "rxjs": "^6.5.3"
   },