@sanity/ui 2.0.0-beta.7 → 2.0.0-beta.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.0.0-beta.7",
+  "version": "2.0.0-beta.8",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
   "source": "./exports/index.ts",
@@ -72,7 +72,7 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "^2.0.4",
-    "@sanity/color": "3.0.0-beta.8",
+    "@sanity/color": "3.0.0-beta.9",
     "@sanity/icons": "^2.7.0",
     "csstype": "^3.1.2",
     "framer-motion": "^10.16.5",

package/src/core/primitives/switch/styles.ts

@@ -152,7 +152,7 @@ export function switchThumbStyles(
     transition-timing-function: ${input.switch.transitionTimingFunction};
     background: var(--switch-fg-color);
     transform: translate3d(0, 0, 0);
-    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);
+    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05);
 
     ${checked &&
     css`

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

@@ -9,6 +9,10 @@ export function compileColorTokenValue(node: TokenColorValueNode): string {
     key = `${node.hue}/${node.tint}`
   }
 
+  if (node.mix !== undefined) {
+    return `${key} ${node.mix * 100}%`
+  }
+
   if (node.opacity !== undefined) {
     key += `/${node.opacity}`
   }

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,6 +53,13 @@ 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.warn('could not blend', hex, mixOptions)

package/src/theme/config/system.ts

@@ -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]

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,15 +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)
 
@@ -31,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)
 
@@ -49,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,
@@ -69,7 +109,6 @@ export function parseTokenValue(str: string): TokenValueNode | undefined {
 
       return {
         type: 'color',
-        key: `${hue}/${tint}`,
         hue,
         tint,
       }
@@ -77,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 */