@sanity/ui 2.0.0-beta.1 → 2.0.0-beta.11

package/src/theme/build/buildColorTheme.ts

@@ -18,11 +18,11 @@ import {
   ThemeColorShadow,
   ThemeColorState_v2,
   ThemeColorButton_v2,
-  ThemeColorButtonTones_v2,
-  ThemeColorButtonStates_v2,
+  ThemeColorButtonMode_v2,
+  ThemeColorButtonTone_v2,
   ThemeColorAvatarHue_v2,
   ThemeColorInput_v2,
-  ThemeColorInputStates_v2,
+  ThemeColorInputMode_v2,
   ThemeColorInputState_v2,
 } from '../system'
 import {ColorTokenContext, resolveColorTokenValue as _color} from './colorToken'
@@ -215,16 +215,16 @@ function buildButtonTonesColorTheme(
     mode: ThemeColorButtonModeKey
   },
   config?: ThemeConfig,
-): ThemeColorButtonTones_v2 {
+): ThemeColorButtonMode_v2 {
   const {mode, scheme} = options
 
-  const tones: Partial<ThemeColorButtonTones_v2> = {}
+  const tones: Partial<ThemeColorButtonMode_v2> = {}
 
   for (const tone of THEME_COLOR_STATE_TONES) {
     tones[tone] = buildButtonStatesColorTheme({mode, scheme, tone}, config)
   }
 
-  return tones as ThemeColorButtonTones_v2
+  return tones as ThemeColorButtonMode_v2
 }
 
 function buildButtonStatesColorTheme(
@@ -234,16 +234,16 @@ function buildButtonStatesColorTheme(
     tone: ThemeColorStateToneKey
   },
   config?: ThemeConfig,
-): ThemeColorButtonStates_v2 {
+): ThemeColorButtonTone_v2 {
   const {mode, scheme, tone} = options
 
-  const states: Partial<ThemeColorButtonStates_v2> = {}
+  const states: Partial<ThemeColorButtonTone_v2> = {}
 
   for (const state of THEME_COLOR_STATES) {
     states[state] = buildButtonStateColorTheme({mode, tone, scheme, state}, config)
   }
 
-  return states as ThemeColorButtonStates_v2
+  return states as ThemeColorButtonTone_v2
 }
 
 function buildButtonStateColorTheme(
@@ -314,7 +314,7 @@ function buildInputStatesColorTheme(
     tone: ThemeColorCardToneKey
   },
   config?: ThemeConfig,
-): ThemeColorInputStates_v2 {
+): ThemeColorInputMode_v2 {
   const {mode, scheme, tone} = options
 
   return {
@@ -357,16 +357,16 @@ function buildSelectableColorTheme(
     scheme: ThemeColorSchemeKey
   },
   config?: ThemeConfig,
-): ThemeColorButtonTones_v2 {
+): ThemeColorButtonMode_v2 {
   const {scheme} = options
 
-  const tones: Partial<ThemeColorButtonTones_v2> = {}
+  const tones: Partial<ThemeColorButtonMode_v2> = {}
 
   for (const tone of THEME_COLOR_STATE_TONES) {
     tones[tone] = buildSelectableStatesColorTheme({scheme, tone}, config)
   }
 
-  return tones as ThemeColorButtonTones_v2
+  return tones as ThemeColorButtonMode_v2
 }
 
 function buildSelectableStatesColorTheme(
@@ -375,16 +375,16 @@ function buildSelectableStatesColorTheme(
     tone: ThemeColorStateToneKey
   },
   config?: ThemeConfig,
-): ThemeColorButtonStates_v2 {
+): ThemeColorButtonTone_v2 {
   const {scheme, tone} = options
 
-  const states: Partial<ThemeColorButtonStates_v2> = {}
+  const states: Partial<ThemeColorButtonTone_v2> = {}
 
   for (const state of THEME_COLOR_STATES) {
     states[state] = buildSelectableStateColorTheme({tone, scheme, state}, config)
   }
 
-  return states as ThemeColorButtonStates_v2
+  return states as ThemeColorButtonTone_v2
 }
 
 function buildSelectableStateColorTheme(

package/src/theme/build/colorToken/colorToken.ts

@@ -0,0 +1,19 @@
+import {ThemeColorTokenValue, parseTokenValue} from '../../config'
+import {compileColorTokenValue} from './compileColorToken'
+import {ColorTokenContext} from './types'
+
+const DEFAULT_COLOR_TOKEN_VALUE: ThemeColorTokenValue = ['500', '500']
+
+export function resolveColorTokenValue(
+  context: ColorTokenContext,
+  value: ThemeColorTokenValue = DEFAULT_COLOR_TOKEN_VALUE,
+): string {
+  const {hue, scheme} = context
+  const node = parseTokenValue(value[scheme === 'light' ? 0 : 1])
+
+  if (!node || node.type !== 'color') {
+    throw new Error(`Invalid color token: ${value[0]}`)
+  }
+
+  return compileColorTokenValue({...node, hue: node.hue || hue})
+}

package/src/theme/build/colorToken/compileColorToken.ts

@@ -0,0 +1,21 @@
+import {TokenColorValueNode} from '../../config'
+
+export function compileColorTokenValue(node: TokenColorValueNode): string {
+  let key = ''
+
+  if (node.key === 'black' || node.key === 'white') {
+    key = node.key
+  } else {
+    key = `${node.hue}/${node.tint}`
+  }
+
+  if (node.mix !== undefined) {
+    return `${key} ${node.mix * 100}%`
+  }
+
+  if (node.opacity !== undefined) {
+    key += `/${node.opacity}`
+  }
+
+  return key
+}

package/src/theme/build/colorToken/index.ts

@@ -0,0 +1,2 @@
+export * from './colorToken'
+export * from './types'

package/src/theme/build/colorToken/types.ts

@@ -0,0 +1,6 @@
+import {ColorHueKey} from '@sanity/color'
+
+export interface ColorTokenContext {
+  hue: ColorHueKey
+  scheme: 'light' | 'dark'
+}

package/src/theme/build/renderColorTheme.ts

@@ -5,18 +5,18 @@ import {
   ThemeColorBadgeTone_v2,
   ThemeColorBadge_v2,
   ThemeColorBlendModeKey,
-  ThemeColorButtonStates_v2,
-  ThemeColorButtonTones_v2,
+  ThemeColorButtonMode_v2,
+  ThemeColorButtonTone_v2,
   ThemeColorButton_v2,
   ThemeColorCardToneKey,
   ThemeColorCard_v2,
+  ThemeColorInputMode_v2,
   ThemeColorInputState_v2,
-  ThemeColorInputStates_v2,
   ThemeColorInput_v2,
   ThemeColorKBD,
   ThemeColorScheme_v2,
   ThemeColorSchemes_v2,
-  ThemeColorSelectableStates_v2,
+  ThemeColorSelectableTone_v2,
   ThemeColorSelectable_v2,
   ThemeColorShadow,
   ThemeColorState_v2,
@@ -278,10 +278,9 @@ function renderThemeColorBadgeColor(
   }
 
   return {
-    // _blend: blendMode,
     bg,
-    fg: renderColorValue(value.fg, colorOptions),
     dot: renderColorValue(value.dot, colorOptions),
+    fg: renderColorValue(value.fg, colorOptions),
     icon: renderColorValue(value.icon, colorOptions),
   }
 }
@@ -302,13 +301,13 @@ function renderThemeColorButton(
 }
 
 function renderThemeColorButtonTones(
-  value: ThemeColorButtonTones_v2,
+  value: ThemeColorButtonMode_v2,
   options: {
     baseBg: string
     blendMode: ThemeColorBlendModeKey
     colorPalette: ThemeColorPalette
   },
-): ThemeColorButtonTones_v2 {
+): ThemeColorButtonMode_v2 {
   return {
     default: renderThemeColorButtonStates(value.default, options),
     primary: renderThemeColorButtonStates(value.primary, options),
@@ -319,13 +318,13 @@ function renderThemeColorButtonTones(
 }
 
 function renderThemeColorButtonStates(
-  value: ThemeColorButtonStates_v2,
+  value: ThemeColorButtonTone_v2,
   options: {
     baseBg: string
     blendMode: ThemeColorBlendModeKey
     colorPalette: ThemeColorPalette
   },
-): ThemeColorButtonStates_v2 {
+): ThemeColorButtonTone_v2 {
   return {
     enabled: renderThemeColorState(value.enabled, options),
     hovered: renderThemeColorState(value.hovered, options),
@@ -366,7 +365,7 @@ function renderThemeColorState(
       fg: renderColorValue(value.accent.fg, colorOptions),
     },
     avatar: renderThemeColorAvatar(value.avatar, {baseBg, colorPalette, blendMode}),
-    badge: renderThemeColorBadge(value.badge, {baseBg, colorPalette, blendMode}),
+    badge: renderThemeColorBadge(value.badge, {baseBg: bg, colorPalette, blendMode}),
     bg,
     border: renderColorValue(value.border, colorOptions),
     code: {
@@ -409,13 +408,13 @@ function renderThemeColorInput(
 }
 
 function renderInputStatesColorTheme(
-  value: ThemeColorInputStates_v2,
+  value: ThemeColorInputMode_v2,
   options: {
     baseBg: string
     blendMode: ThemeColorBlendModeKey
     colorPalette: ThemeColorPalette
   },
-): ThemeColorInputStates_v2 {
+): ThemeColorInputMode_v2 {
   return {
     enabled: renderInputStateColorTheme(value.enabled, options),
     hovered: renderInputStateColorTheme(value.hovered, options),
@@ -468,13 +467,13 @@ function renderThemeColorSelectable(
 }
 
 function renderThemeColorSelectableStates(
-  value: ThemeColorSelectableStates_v2,
+  value: ThemeColorSelectableTone_v2,
   options: {
     baseBg: string
     blendMode: ThemeColorBlendModeKey
     colorPalette: ThemeColorPalette
   },
-): ThemeColorSelectableStates_v2 {
+): ThemeColorSelectableTone_v2 {
   return {
     enabled: renderThemeColorState(value.enabled, options),
     hovered: renderThemeColorState(value.hovered, options),

package/src/theme/build/renderColorValue.ts

@@ -1,7 +1,7 @@
 import {ColorTint as ColorPaletteValue} from '@sanity/color'
 import {ThemeColorPalette, parseTokenValue} from '../config'
 import {ThemeColorBlendModeKey} from '../system'
-import {rgba} from './lib/color-fns'
+import {hexToRgb, mix, rgbToHex, rgba} from './lib/color-fns'
 import {mixThemeColor} from './mixThemeColor'
 
 export interface RenderColorValueOptions {
@@ -53,9 +53,16 @@ export function renderColorValue(str: string, options: RenderColorValueOptions):
 
   try {
     hex = mixThemeColor(hex, mixOptions)
+
+    if (bg && node.mix !== undefined) {
+      const from = hexToRgb(bg)
+      const to = hexToRgb(hex)
+
+      hex = rgbToHex(mix(from, to, node.mix))
+    }
   } catch (err) {
     // eslint-disable-next-line no-console
-    console.log('could not blend', hex, mixOptions)
+    console.warn('could not blend', hex, mixOptions)
     throw err
   }
 

package/src/theme/config/system.ts

@@ -9,7 +9,7 @@ import {
   ThemeColorBlendModeKey,
 } from '../system'
 
-/** @internal */
+/** @public */
 export const COLOR_CONFIG_STATE_KEYS = [
   '_hue',
   'bg',
@@ -30,7 +30,7 @@ export const COLOR_CONFIG_STATE_KEYS = [
 /** @public */
 export type ColorConfigStateKey = (typeof COLOR_CONFIG_STATE_KEYS)[number]
 
-/** @internal */
+/** @public */
 export const COLOR_CONFIG_CARD_KEYS = [
   ...COLOR_CONFIG_STATE_KEYS,
   '_hue',
@@ -47,7 +47,7 @@ export const COLOR_CONFIG_CARD_KEYS = [
 /** @public */
 export type ColorConfigCardKey = (typeof COLOR_CONFIG_CARD_KEYS)[number]
 
-/** @internal */
+/** @public */
 export const COLOR_CONFIG_BLEND_KEYS = ['_blend'] as const
 
 /** @public */
@@ -63,11 +63,13 @@ export type ColorConfigValue =
   | `black/${ColorConfigOpacityValue}`
   | `white/${ColorConfigOpacityValue}`
   | `${ColorHueKey}`
+  | `${ColorHueKey} ${number}%`
   | `${ColorHueKey}/${ColorTintKey}`
+  | `${ColorHueKey}/${ColorTintKey} ${number}%`
   | `${ColorHueKey}/${ColorTintKey}/${ColorConfigOpacityValue}`
   | `${ColorTintKey}`
+  | `${ColorTintKey} ${number}%`
   | `${ColorTintKey}/${ColorConfigOpacityValue}`
-  | ThemeColorBlendModeKey
 
 /** @public */
 export type ThemeColorTokenValue = [ColorConfigValue, ColorConfigValue]
@@ -75,37 +77,37 @@ export type ThemeColorTokenValue = [ColorConfigValue, ColorConfigValue]
 /** @public */
 export type ColorBlendModeTokenValue = [ThemeColorBlendModeKey, ThemeColorBlendModeKey]
 
-/** @internal */
+/** @public */
 export const COLOR_CONFIG_AVATAR_COLORS = ['*', ...THEME_COLOR_AVATAR_COLORS] as const
 
 /** @public */
 export type ColorConfigAvatarColor = (typeof COLOR_CONFIG_AVATAR_COLORS)[number]
 
-/** @internal */
+/** @public */
 export const COLOR_CONFIG_CARD_TONES = ['*', ...THEME_COLOR_CARD_TONES] as const
 
 /** @public */
 export type ColorConfigCardTone = (typeof COLOR_CONFIG_CARD_TONES)[number]
 
-/** @internal */
+/** @public */
 export const COLOR_CONFIG_STATE_TONES = ['*', ...THEME_COLOR_STATE_TONES] as const
 
 /** @public */
 export type ColorConfigStateTone = (typeof COLOR_CONFIG_STATE_TONES)[number]
 
-/** @internal */
+/** @public */
 export const COLOR_CONFIG_STATES = ['*', ...THEME_COLOR_STATES] as const
 
 /** @public */
 export type ColorConfigState = (typeof COLOR_CONFIG_STATES)[number]
 
-/** @internal */
+/** @public */
 export const COLOR_CONFIG_INPUT_MODES = ['*', ...THEME_COLOR_INPUT_MODES] as const
 
 /** @public */
 export type ColorConfigInputMode = (typeof COLOR_CONFIG_INPUT_MODES)[number]
 
-/** @internal */
+/** @public */
 export const COLOR_CONFIG_INPUT_STATES = ['*', ...THEME_COLOR_INPUT_STATES] as const
 
 /** @public */

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

@@ -10,6 +10,7 @@ import {
   ThemeColorTokenValue,
 } from '../../system'
 
+/** @public */
 export interface ThemeColorAvatarHueTokens {
   _blend?: ColorBlendModeTokenValue
   _hue?: ColorHueKey
@@ -17,6 +18,7 @@ export interface ThemeColorAvatarHueTokens {
   fg?: ThemeColorTokenValue
 }
 
+/** @public */
 export interface ThemeColorAvatarTokens {
   '*'?: ThemeColorAvatarHueTokens
   gray?: ThemeColorAvatarHueTokens
@@ -30,8 +32,8 @@ export interface ThemeColorAvatarTokens {
   cyan?: ThemeColorAvatarHueTokens
 }
 
+/** @public */
 export interface ThemeColorBadgeTokens {
-  // _blend?: ColorBlendModeTokenValue
   _hue?: ColorHueKey
   bg?: ThemeColorTokenValue
   fg?: ThemeColorTokenValue
@@ -39,6 +41,7 @@ export interface ThemeColorBadgeTokens {
   icon?: ThemeColorTokenValue
 }
 
+/** @public */
 export interface ThemeColorBaseTokens extends ThemeColorStateTokens {
   focusRing?: ThemeColorTokenValue
   backdrop?: ThemeColorTokenValue
@@ -50,6 +53,7 @@ export interface ThemeColorBaseTokens extends ThemeColorStateTokens {
   }
 }
 
+/** @public */
 export interface ThemeColorBadgeToneTokens {
   _blend?: ColorBlendModeTokenValue
   _hue?: ColorHueKey
@@ -59,6 +63,7 @@ export interface ThemeColorBadgeToneTokens {
   icon?: ThemeColorTokenValue
 }
 
+/** @public */
 export interface ThemeColorBadgeTokens {
   '*'?: ThemeColorBadgeToneTokens
   default?: ThemeColorBadgeToneTokens
@@ -68,6 +73,7 @@ export interface ThemeColorBadgeTokens {
   critical?: ThemeColorBadgeToneTokens
 }
 
+/** @public */
 export interface ThemeColorStateTokens {
   _blend?: ColorBlendModeTokenValue
   _hue?: ColorHueKey
@@ -102,13 +108,16 @@ export interface ThemeColorStateTokens {
   }
 }
 
+/** @public */
 export type ThemeColorStatesTokens = Partial<Record<ColorConfigState, ThemeColorStateTokens>>
 
+/** @public */
 export interface ThemeColorButtonTokens
   extends Partial<Record<ColorConfigStateTone, ThemeColorStatesTokens>> {
   _hue?: ColorHueKey
 }
 
+/** @public */
 export interface ThemeColorInputStateTokens {
   _blend?: ColorBlendModeTokenValue
   _hue?: ColorHueKey
@@ -121,11 +130,13 @@ export interface ThemeColorInputStateTokens {
   placeholder?: ThemeColorTokenValue
 }
 
+/** @public */
 export interface ThemeColorInputTokens
   extends Partial<Record<ColorConfigInputState, ThemeColorInputStateTokens>> {
   _hue?: ColorHueKey
 }
 
+/** @public */
 export interface ThemeColorTokens {
   base?: Partial<Record<ColorConfigCardTone, ThemeColorBaseTokens>>
   button?: Partial<Record<ThemeColorButtonModeKey, ThemeColorButtonTokens>>

package/src/theme/config/tokens/parseTokenKey.ts

@@ -8,6 +8,7 @@ import {
 } from '../helpers'
 import {TokenKeyNode} from './types'
 
+/** @internal */
 export function parseTokenKey(str: string): TokenKeyNode | undefined {
   const segments = str.split('/')
   const segment0 = segments.shift() || ''

package/src/theme/config/tokens/parseTokenValue.test.ts

@@ -11,13 +11,25 @@ test('parse color value', () => {
     tint: '50',
   })
 
+  expect(parseTokenValue('50 50%')).toEqual({
+    type: 'color',
+    tint: '50',
+    mix: 0.5,
+  })
+
   expect(parseTokenValue('cyan/500')).toEqual({
     type: 'color',
-    key: 'cyan/500',
     hue: 'cyan',
     tint: '500',
   })
 
+  expect(parseTokenValue('cyan/500 50%')).toEqual({
+    type: 'color',
+    hue: 'cyan',
+    mix: 0.5,
+    tint: '500',
+  })
+
   expect(parseTokenValue('screen')).toEqual({
     type: 'blendMode',
     value: 'screen',
@@ -27,19 +39,4 @@ test('parse color value', () => {
     type: 'blendMode',
     value: 'multiply',
   })
-
-  expect(parseTokenValue('0')).toEqual({
-    type: 'color',
-    opacity: 0,
-  })
-
-  expect(parseTokenValue('0.1')).toEqual({
-    type: 'color',
-    opacity: 0.1,
-  })
-
-  expect(parseTokenValue('1')).toEqual({
-    type: 'color',
-    opacity: 1,
-  })
 })

package/src/theme/config/tokens/parseTokenValue.ts

@@ -2,14 +2,32 @@ import {isColorBlendModeValue, isColorHueKey, isColorTintKey} from '../../system
 import {isColorOpacityValue, isColorValue} from '../helpers'
 import {TokenValueNode} from './types'
 
+function isColorMixPercentValue(str: string): str is `${number}%` {
+  return /^\d+%$/.test(str)
+}
+
+/** @internal */
 export function parseTokenValue(str: string): TokenValueNode | undefined {
   const segments = str.split('/')
-  const segment0 = segments.shift() || ''
+
+  let nextSegment = segments.shift() || ''
+
+  const [segment0, segment0mix] = nextSegment.split(' ')
 
   if (isColorTintKey(segment0)) {
     const tint = segment0
     const segment1 = segments.shift() || ''
 
+    if (isColorMixPercentValue(segment0mix)) {
+      const mix = Number(segment0mix.slice(0, -1)) / 100
+
+      return {
+        type: 'color',
+        tint,
+        mix,
+      }
+    }
+
     if (isColorOpacityValue(segment1)) {
       const opacity = Number(segment1)
 
@@ -30,6 +48,16 @@ export function parseTokenValue(str: string): TokenValueNode | undefined {
     const key = segment0 as 'black' | 'white'
     const segment1 = segments.shift() || ''
 
+    if (isColorMixPercentValue(segment0mix)) {
+      const mix = Number(segment0mix.slice(0, -1)) / 100
+
+      return {
+        type: 'color',
+        key,
+        mix,
+      }
+    }
+
     if (isColorOpacityValue(segment1)) {
       const opacity = Number(segment1)
 
@@ -48,18 +76,31 @@ export function parseTokenValue(str: string): TokenValueNode | undefined {
 
   if (isColorHueKey(segment0)) {
     const hue = segment0
-    const segment1 = segments.shift() || ''
+
+    nextSegment = segments.shift() || ''
+
+    const [segment1, segment1mix] = nextSegment.split(' ')
 
     if (isColorTintKey(segment1)) {
       const tint = segment1
       const segment2 = segments.shift() || ''
 
+      if (isColorMixPercentValue(segment1mix)) {
+        const mix = Number(segment1mix.slice(0, -1)) / 100
+
+        return {
+          type: 'color',
+          hue,
+          tint,
+          mix,
+        }
+      }
+
       if (isColorOpacityValue(segment2)) {
         const opacity = Number(segment2)
 
         return {
           type: 'color',
-          key: `${hue}/${tint}`,
           hue,
           tint,
           opacity,
@@ -68,7 +109,6 @@ export function parseTokenValue(str: string): TokenValueNode | undefined {
 
       return {
         type: 'color',
-        key: `${hue}/${tint}`,
         hue,
         tint,
       }
@@ -76,16 +116,7 @@ export function parseTokenValue(str: string): TokenValueNode | undefined {
 
     return {
       type: 'hue',
-      value: `${hue}`,
-    }
-  }
-
-  if (isColorOpacityValue(segment0)) {
-    const opacity = Number(segment0)
-
-    return {
-      type: 'color',
-      opacity,
+      value: hue,
     }
   }
 

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

@@ -29,10 +29,11 @@ export type TokenKeyNode = TokenBaseKeyNode | TokenButtonKeyNode
 /** @internal */
 export interface TokenColorValueNode {
   type: 'color'
-  key?: 'black' | 'white' | `${ColorHueKey}/${ColorTintKey}` | ColorTintKey
+  key?: 'black' | 'white'
   hue?: ColorHueKey
-  tint?: ColorTintKey
+  mix?: number
   opacity?: number
+  tint?: ColorTintKey
 }
 
 /** @internal */