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

package/dist/theme.d.ts

@@ -208,11 +208,13 @@ export declare type ColorConfigValue =
   | `black/${ColorConfigOpacityValue}`
   | `white/${ColorConfigOpacityValue}`
   | `${ColorHueKey}`
+  | `${ColorHueKey} ${number}%`
   | `${ColorHueKey}/${ColorTintKey}`
+  | `${ColorHueKey}/${ColorTintKey} ${number}%`
   | `${ColorHueKey}/${ColorTintKey}/${ColorConfigOpacityValue}`
   | `${ColorTintKey}`
+  | `${ColorTintKey} ${number}%`
   | `${ColorTintKey}/${ColorConfigOpacityValue}`
-  | ThemeColorBlendModeKey
 
 /**
  * @public
@@ -1462,10 +1464,11 @@ export declare interface TokenButtonKeyNode {
 /** @internal */
 export declare interface TokenColorValueNode {
   type: 'color'
-  key?: 'black' | 'white' | `${ColorHueKey}/${ColorTintKey}` | ColorTintKey
+  key?: 'black' | 'white'
   hue?: ColorHueKey
-  tint?: ColorTintKey
+  mix?: number
   opacity?: number
+  tint?: ColorTintKey
 }
 
 /** @internal */

package/dist/theme.esm.js

@@ -1258,7 +1258,7 @@ const defaultThemeConfig = {
     switch: {
       width: 25,
       height: 17,
-      padding: 2,
+      padding: 5,
       transitionDurationMs: 150,
       transitionTimingFunction: "ease-out",
       focusRing: {
@@ -1993,12 +1993,24 @@ function parseTokenKey(str) {
   }
   return void 0;
 }
+function isColorMixPercentValue(str) {
+  return /^\d+%$/.test(str);
+}
 function parseTokenValue(str) {
   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);
       return {
@@ -2015,6 +2027,14 @@ function parseTokenValue(str) {
   if (isColorValue(segment0)) {
     const key = segment0;
     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);
       return {
@@ -2030,15 +2050,24 @@ function parseTokenValue(str) {
   }
   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: "".concat(hue, "/").concat(tint),
           hue,
           tint,
           opacity
@@ -2046,21 +2075,13 @@ function parseTokenValue(str) {
       }
       return {
         type: "color",
-        key: "".concat(hue, "/").concat(tint),
         hue,
         tint
       };
     }
     return {
       type: "hue",
-      value: "".concat(hue)
-    };
-  }
-  if (isColorOpacityValue(segment0)) {
-    const opacity = Number(segment0);
-    return {
-      type: "color",
-      opacity
+      value: hue
     };
   }
   if (isColorBlendModeValue(segment0)) {
@@ -2104,6 +2125,9 @@ function compileColorTokenValue(node) {
   } else {
     key = "".concat(node.hue, "/").concat(node.tint);
   }
+  if (node.mix !== void 0) {
+    return "".concat(key, " ").concat(node.mix * 100, "%");
+  }
   if (node.opacity !== void 0) {
     key += "/".concat(node.opacity);
   }
@@ -2137,15 +2161,6 @@ const defaultColorTokens = {
           _blend: ["screen", "multiply"],
           bg: ["500", "400"],
           fg: ["white", "black"]
-        },
-        yellow: {
-          bg: ["600", "400"]
-        },
-        green: {
-          bg: ["600", "400"]
-        },
-        cyan: {
-          bg: ["600", "400"]
         }
       },
       backdrop: ["gray/200/0.2", "black/0.5"],
@@ -2157,19 +2172,19 @@ const defaultColorTokens = {
           dot: ["500", "500"]
         },
         positive: {
-          bg: ["200/0.6", "900"],
-          fg: ["700", "500"]
+          bg: ["200 50%", "900"],
+          fg: ["600", "500"]
         },
         caution: {
-          bg: ["200/0.7", "900"],
-          fg: ["700", "500"]
+          bg: ["200 50%", "900"],
+          fg: ["600", "500"]
         }
       },
       bg: ["50", "950"],
       border: ["200", "800"],
       code: {
         bg: ["50", "950"],
-        fg: ["700", "300"]
+        fg: ["600", "300"]
       },
       fg: ["800", "200"],
       focusRing: ["blue/500", "blue/500"],
@@ -2179,11 +2194,11 @@ const defaultColorTokens = {
         border: ["200", "800"]
       },
       link: {
-        fg: ["blue/700", "blue/300"]
+        fg: ["blue/600", "blue/300"]
       },
       muted: {
         bg: ["50", "950"],
-        fg: ["600", "400"]
+        fg: ["700 70%", "300 70%"]
       },
       shadow: {
         outline: ["500/0.3", "500/0.4"],
@@ -2193,16 +2208,22 @@ const defaultColorTokens = {
       },
       skeleton: {
         from: ["100", "900"],
-        to: ["100/0.5", "900/0.5"]
+        to: ["100 50%", "900 50%"]
       }
     },
     transparent: {
       bg: ["50", "black"],
-      fg: ["600", "400"]
+      fg: ["600", "400"],
+      muted: {
+        fg: ["600", "400"]
+      }
     },
     default: {
       bg: ["white", "950"],
-      fg: ["black", "200"]
+      fg: ["black", "200"],
+      muted: {
+        fg: ["600", "400"]
+      }
     },
     primary: {
       _hue: "blue"
@@ -2210,20 +2231,17 @@ const defaultColorTokens = {
     positive: {
       _hue: "green",
       shadow: {
-        outline: ["600/0.3", "500/0.25"]
+        outline: ["500/0.4", "500/0.4"]
       }
     },
     caution: {
       _hue: "yellow",
       shadow: {
-        outline: ["600/0.3", "500/0.25"]
+        outline: ["600/0.3", "500/0.4"]
       }
     },
     critical: {
-      _hue: "red",
-      shadow: {
-        outline: ["500/0.3", "500/0.3"]
-      }
+      _hue: "red"
     }
   },
   button: {
@@ -2232,7 +2250,7 @@ const defaultColorTokens = {
         "*": {
           _blend: ["screen", "multiply"],
           accent: {
-            fg: ["purple/200", "purple/700"]
+            fg: ["purple/300", "purple/700"]
           },
           badge: {
             "*": {
@@ -2245,8 +2263,8 @@ const defaultColorTokens = {
           bg: ["500", "400"],
           border: ["500/0", "400/0"],
           code: {
-            bg: ["500/0.2", "400/0.2"],
-            fg: ["200", "700"]
+            bg: ["500 20%", "400 20%"],
+            fg: ["200", "600"]
           },
           fg: ["white", "black"],
           icon: ["200", "800"],
@@ -2259,23 +2277,23 @@ const defaultColorTokens = {
             fg: ["blue/200", "blue/700"]
           },
           muted: {
-            bg: ["900", "50"],
-            fg: ["200", "700"]
+            bg: ["950", "50"],
+            fg: ["100 70%", "600"]
           },
           skeleton: {
             from: ["900", "100"],
-            to: ["900/0.5", "100/0.5"]
+            to: ["900 50%", "100 50%"]
           }
         },
         hovered: {
-          bg: ["600", "300"],
-          border: ["600/0", "300/0"]
+          bg: ["700", "300"],
+          border: ["700/0", "300/0"]
         },
         pressed: {
-          bg: ["700", "200"]
+          bg: ["700", "300"]
         },
         selected: {
-          bg: ["700", "200"]
+          bg: ["700", "300"]
         },
         disabled: {
           _hue: "gray",
@@ -2298,7 +2316,11 @@ const defaultColorTokens = {
       },
       default: {
         "*": {
-          bg: ["800", "200"]
+          bg: ["800", "200"],
+          muted: {
+            bg: ["950", "50"],
+            fg: ["400", "600"]
+          }
         },
         hovered: {
           bg: ["900", "100"]
@@ -2309,34 +2331,6 @@ const defaultColorTokens = {
         selected: {
           bg: ["black", "white"]
         }
-      },
-      positive: {
-        "*": {
-          bg: ["600", "400"]
-        },
-        hovered: {
-          bg: ["700", "300"]
-        },
-        pressed: {
-          bg: ["800", "200"]
-        },
-        selected: {
-          bg: ["800", "200"]
-        }
-      },
-      caution: {
-        "*": {
-          bg: ["600", "400"]
-        },
-        hovered: {
-          bg: ["700", "300"]
-        },
-        pressed: {
-          bg: ["800", "200"]
-        },
-        selected: {
-          bg: ["800", "200"]
-        }
       }
     },
     ghost: {
@@ -2344,7 +2338,7 @@ const defaultColorTokens = {
         "*": {
           _blend: ["multiply", "screen"],
           accent: {
-            fg: ["purple/700/0.6", "purple/400/0.8"]
+            fg: ["purple/700 60%", "purple/300 70%"]
           },
           badge: {
             "*": {
@@ -2357,10 +2351,10 @@ const defaultColorTokens = {
           bg: ["50", "950"],
           border: ["100", "900"],
           code: {
-            bg: ["500/0.1", "400/0.1"],
-            fg: ["700/0.6", "400/0.6"]
+            bg: ["500 10%", "400 10%"],
+            fg: ["700 60%", "400 60%"]
           },
-          fg: ["700", "400"],
+          fg: ["600", "400"],
           icon: ["600", "500"],
           kbd: {
             bg: ["white", "black"],
@@ -2368,15 +2362,15 @@ const defaultColorTokens = {
             border: ["200", "800"]
           },
           link: {
-            fg: ["blue/700/0.6", "blue/400/0.8"]
+            fg: ["blue/700 60%", "blue/300 60%"]
           },
           muted: {
             bg: ["100", "950"],
-            fg: ["700/0.6", "400/0.6"]
+            fg: ["700 60%", "300 60%"]
           },
           skeleton: {
             from: ["100", "900"],
-            to: ["100/0.5", "900/0.5"]
+            to: ["100 50%", "900 50%"]
           }
         },
         hovered: {
@@ -2427,12 +2421,12 @@ const defaultColorTokens = {
       },
       positive: {
         "*": {
-          border: ["600/0.2", "800"]
+          border: ["600 20%", "800"]
         }
       },
       caution: {
         "*": {
-          border: ["600/0.2", "800"]
+          border: ["600 20%", "800"]
         }
       }
     },
@@ -2441,7 +2435,7 @@ const defaultColorTokens = {
         "*": {
           _blend: ["multiply", "screen"],
           accent: {
-            fg: ["purple/700/0.7", "purple/300/0.7"]
+            fg: ["purple/700 70%", "purple/300 70%"]
           },
           badge: {
             "*": {
@@ -2458,38 +2452,38 @@ const defaultColorTokens = {
             fg: ["600", "300"]
           },
           fg: ["700", "300"],
-          icon: ["700/0.7", "300/0.7"],
+          icon: ["700 70%", "300 70%"],
           kbd: {
             bg: ["white", "black"],
             fg: ["600", "400"],
             border: ["200", "800"]
           },
           link: {
-            fg: ["blue/700/0.7", "blue/300/0.7"]
+            fg: ["blue/700 70%", "blue/300 70%"]
           },
           muted: {
             bg: ["100", "950"],
-            fg: ["700/0.7", "300/0.7"]
+            fg: ["700 70%", "300 70%"]
           },
           skeleton: {
             from: ["100", "900"],
-            to: ["100/0.5", "900/0.5"]
+            to: ["100 50%", "900 50%"]
           }
         },
         hovered: {
           bg: ["50", "950"],
           fg: ["700", "300"],
-          icon: ["700/0.7", "400/0.7"]
+          icon: ["700 70%", "400 70%"]
         },
         pressed: {
           bg: ["100", "900"],
           fg: ["800", "200"],
-          icon: ["800/0.7", "200/0.7"]
+          icon: ["800 70%", "200 70%"]
         },
         selected: {
           bg: ["100", "900"],
           fg: ["800", "200"],
-          icon: ["800/0.7", "200/0.7"]
+          icon: ["800 60%", "200 60%"]
         },
         disabled: {
           _hue: "gray",
@@ -2535,14 +2529,14 @@ const defaultColorTokens = {
         muted: {
           bg: ["50", "950"]
         },
-        placeholder: ["400", "600/0.5"]
+        placeholder: ["400", "600 50%"]
       },
       hovered: {
-        border: ["300", "800"]
+        border: ["300", "700"]
       },
       readOnly: {
-        border: ["200/0", "900/0"],
-        bg: ["100", "950"],
+        bg: ["50", "950"],
+        border: ["200", "800"],
         fg: ["800", "200"]
       },
       disabled: {
@@ -2563,26 +2557,16 @@ const defaultColorTokens = {
         _blend: ["multiply", "screen"],
         bg: ["white", "black"],
         fg: ["800", "200"],
-        icon: ["700/0.7", "300/0.7"],
+        icon: ["700 70%", "300 70%"],
         avatar: {
           "*": {
             _blend: ["screen", "multiply"],
             bg: ["500", "400"],
             fg: ["white", "black"]
-          },
-          yellow: {
-            bg: ["600", "400"]
-          },
-          green: {
-            bg: ["600", "400"]
-          },
-          cyan: {
-            bg: ["600", "400"]
           }
         },
         badge: {
           "*": {
-            // _blend: ['multiply', 'screen'],
             bg: ["100", "900"],
             fg: ["600", "400"],
             dot: ["500", "500"],
@@ -2606,12 +2590,12 @@ const defaultColorTokens = {
           fg: ["blue/700", "blue/300"]
         },
         code: {
-          bg: ["100", "950"],
+          bg: ["50", "950"],
           fg: ["700", "300"]
         },
         skeleton: {
           from: ["100", "900"],
-          to: ["100/0.5", "900/0.5"]
+          to: ["100 50%", "900 50%"]
         }
       },
       hovered: {
@@ -2631,22 +2615,18 @@ const defaultColorTokens = {
             bg: ["white", "black"],
             fg: ["black", "white"]
           }
-          // magenta: {_hue: 'green'},
-          // yellow: {bg: ['600', '400']},
-          // green: {bg: ['600', '400']},
-          // cyan: {bg: ['600', '400']},
         },
         badge: {
           "*": {
-            // _blend: ['multiply', 'screen'],
-            // _blend: ['screen', 'multiply'],
             bg: ["700", "300"],
-            fg: ["white", "black"]
+            fg: ["white", "black"],
+            dot: ["300", "700"],
+            icon: ["300", "700"]
           }
         },
-        border: ["500/0.2", "400/0.2"],
+        border: ["500 20%", "400 20%"],
         muted: {
-          bg: ["900", "50"],
+          bg: ["950", "50"],
           fg: ["200", "800"]
         },
         accent: {
@@ -2661,86 +2641,76 @@ const defaultColorTokens = {
           fg: ["blue/200", "blue/800"]
         },
         code: {
-          bg: ["500/0.2", "400/0.2"],
-          fg: ["200", "700"]
+          bg: ["500 20%", "400 20%"],
+          fg: ["300", "700"]
         },
         skeleton: {
           from: ["900", "100"],
-          to: ["900/0.5", "100/0.5"]
+          to: ["900 50%", "100 50%"]
         }
-        // badge: {
-        //   '*': {
-        //     _blend: ['multiply', 'screen'],
-        //     bg: ['900', '100'],
-        //     fg: ['white', 'black'],
-        //     dot: ['700', '300'],
-        //     icon: ['400', '600'],
-        //   },
-        // },
       },
       disabled: {
         fg: ["200", "800"],
         icon: ["200", "800"],
         muted: {
-          fg: ["200", "800/0.5"]
+          fg: ["200", "800"]
         },
         accent: {
-          fg: ["purple/200", "purple/800/0.5"]
+          fg: ["purple/200", "purple/800"]
         },
         link: {
-          fg: ["blue/200", "blue/800/0.5"]
+          fg: ["blue/200", "blue/800"]
         },
         code: {
-          bg: ["100", "950/0.5"],
-          fg: ["200", "800/0.5"]
+          bg: ["50", "950"],
+          fg: ["200", "800"]
         }
       }
     },
     default: {
       selected: {
         _hue: "blue"
-        // bg: ['500', '400'],
       }
     },
     critical: {
       disabled: {
-        bg: ["50/0.5", "950/0.5"]
+        bg: ["50 50%", "950 50%"]
       }
     }
   },
   syntax: {
     atrule: ["purple/600", "purple/400"],
-    attrName: ["green/700", "green/400"],
-    attrValue: ["yellow/700", "yellow/400"],
-    attribute: ["yellow/700", "yellow/400"],
+    attrName: ["green/600", "green/400"],
+    attrValue: ["yellow/600", "yellow/400"],
+    attribute: ["yellow/600", "yellow/400"],
     boolean: ["purple/600", "purple/400"],
     builtin: ["purple/600", "purple/400"],
-    cdata: ["yellow/700", "yellow/400"],
-    char: ["yellow/700", "yellow/400"],
-    class: ["orange/700", "orange/400"],
-    className: ["cyan/700", "cyan/400"],
+    cdata: ["yellow/600", "yellow/400"],
+    char: ["yellow/600", "yellow/400"],
+    class: ["orange/600", "orange/400"],
+    className: ["cyan/600", "cyan/400"],
     comment: ["gray/400", "gray/600"],
     constant: ["purple/600", "purple/400"],
     deleted: ["red/600", "red/400"],
     entity: ["red/600", "red/400"],
-    function: ["green/700", "green/400"],
+    function: ["green/600", "green/400"],
     hexcode: ["blue/600", "blue/400"],
     id: ["purple/600", "purple/400"],
     important: ["purple/600", "purple/400"],
-    inserted: ["yellow/700", "yellow/400"],
+    inserted: ["yellow/600", "yellow/400"],
     keyword: ["magenta/600", "magenta/400"],
     number: ["purple/600", "purple/400"],
     operator: ["magenta/600", "magenta/400"],
     property: ["blue/600", "blue/400"],
-    pseudoClass: ["yellow/700", "yellow/400"],
-    pseudoElement: ["yellow/700", "yellow/400"],
+    pseudoClass: ["yellow/600", "yellow/400"],
+    pseudoElement: ["yellow/600", "yellow/400"],
     punctuation: ["gray/600", "gray/400"],
     regex: ["blue/600", "blue/400"],
     selector: ["red/600", "red/400"],
-    string: ["yellow/700", "yellow/400"],
+    string: ["yellow/600", "yellow/400"],
     symbol: ["purple/600", "purple/400"],
     tag: ["red/600", "red/400"],
-    unit: ["orange/700", "orange/400"],
+    unit: ["orange/600", "orange/400"],
     url: ["red/600", "red/400"],
     variable: ["red/600", "red/400"]
   }
@@ -3881,6 +3851,11 @@ function renderColorValue(str, options) {
   };
   try {
     hex = mixThemeColor(hex, mixOptions);
+    if (bg && node.mix !== void 0) {
+      const from = hexToRgb(bg);
+      const to = hexToRgb(hex);
+      hex = rgbToHex(mix(from, to, node.mix));
+    }
   } catch (err) {
     console.warn("could not blend", hex, mixOptions);
     throw err;