@sanity/ui 2.0.0-beta.2 → 2.0.0-beta.21

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 */