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

package/dist/theme.js

@@ -1263,7 +1263,7 @@ const defaultThemeConfig = {
     switch: {
       width: 25,
       height: 17,
-      padding: 2,
+      padding: 5,
       transitionDurationMs: 150,
       transitionTimingFunction: "ease-out",
       focusRing: {
@@ -1998,12 +1998,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 {
@@ -2020,6 +2032,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 {
@@ -2035,15 +2055,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
@@ -2051,21 +2080,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)) {
@@ -2109,6 +2130,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);
   }
@@ -2142,15 +2166,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"],
@@ -2162,19 +2177,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"],
@@ -2184,11 +2199,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"],
@@ -2198,16 +2213,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"
@@ -2215,20 +2236,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: {
@@ -2237,7 +2255,7 @@ const defaultColorTokens = {
         "*": {
           _blend: ["screen", "multiply"],
           accent: {
-            fg: ["purple/200", "purple/700"]
+            fg: ["purple/300", "purple/700"]
           },
           badge: {
             "*": {
@@ -2250,8 +2268,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"],
@@ -2264,23 +2282,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",
@@ -2303,7 +2321,11 @@ const defaultColorTokens = {
       },
       default: {
         "*": {
-          bg: ["800", "200"]
+          bg: ["800", "200"],
+          muted: {
+            bg: ["950", "50"],
+            fg: ["400", "600"]
+          }
         },
         hovered: {
           bg: ["900", "100"]
@@ -2314,34 +2336,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: {
@@ -2349,7 +2343,7 @@ const defaultColorTokens = {
         "*": {
           _blend: ["multiply", "screen"],
           accent: {
-            fg: ["purple/700/0.6", "purple/400/0.8"]
+            fg: ["purple/700 60%", "purple/300 70%"]
           },
           badge: {
             "*": {
@@ -2362,10 +2356,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"],
@@ -2373,15 +2367,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: {
@@ -2432,12 +2426,12 @@ const defaultColorTokens = {
       },
       positive: {
         "*": {
-          border: ["600/0.2", "800"]
+          border: ["600 20%", "800"]
         }
       },
       caution: {
         "*": {
-          border: ["600/0.2", "800"]
+          border: ["600 20%", "800"]
         }
       }
     },
@@ -2446,7 +2440,7 @@ const defaultColorTokens = {
         "*": {
           _blend: ["multiply", "screen"],
           accent: {
-            fg: ["purple/700/0.7", "purple/300/0.7"]
+            fg: ["purple/700 70%", "purple/300 70%"]
           },
           badge: {
             "*": {
@@ -2463,38 +2457,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",
@@ -2540,14 +2534,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: {
@@ -2568,26 +2562,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"],
@@ -2611,12 +2595,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: {
@@ -2636,22 +2620,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: {
@@ -2666,86 +2646,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"]
   }
@@ -3886,6 +3856,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;