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

package/dist/theme.esm.js

@@ -1161,6 +1161,9 @@ const defaultThemeConfig = {
   _version: 2,
   avatar: {
     sizes: [{
+      distance: -4,
+      size: 19
+    }, {
       distance: -4,
       size: 25
     }, {
@@ -1255,7 +1258,7 @@ const defaultThemeConfig = {
     switch: {
       width: 25,
       height: 17,
-      padding: 2,
+      padding: 5,
       transitionDurationMs: 150,
       transitionTimingFunction: "ease-out",
       focusRing: {
@@ -1398,35 +1401,42 @@ const defaultThemeFonts = {
     sizes: [{
       ascenderHeight: 2,
       descenderHeight: 2,
-      fontSize: 9.8,
+      fontSize: 8.1,
+      iconSize: 13,
+      lineHeight: 10,
+      letterSpacing: 0.5
+    }, {
+      ascenderHeight: 2,
+      descenderHeight: 2,
+      fontSize: 9.5,
       iconSize: 15,
       lineHeight: 11,
       letterSpacing: 0.5
     }, {
       ascenderHeight: 2,
       descenderHeight: 2,
-      fontSize: 11.25,
+      fontSize: 10.8,
       iconSize: 17,
       lineHeight: 12,
       letterSpacing: 0.5
     }, {
       ascenderHeight: 2,
       descenderHeight: 2,
-      fontSize: 12.75,
+      fontSize: 12.25,
       iconSize: 19,
       lineHeight: 13,
       letterSpacing: 0.5
     }, {
       ascenderHeight: 2,
       descenderHeight: 2,
-      fontSize: 14,
+      fontSize: 13.6,
       iconSize: 21,
       lineHeight: 14,
       letterSpacing: 0.5
     }, {
       ascenderHeight: 2,
       descenderHeight: 2,
-      fontSize: 15.5,
+      fontSize: 15,
       iconSize: 23,
       lineHeight: 15,
       letterSpacing: 0.5
@@ -1906,13 +1916,10 @@ function inputStateThemeColor_v2_v0(t) {
     placeholder: t.placeholder
   };
 }
+const THEME_COLOR_SCHEMES = ["light", "dark"];
 const THEME_COLOR_BLEND_MODES = ["multiply", "screen"];
-const THEME_COLOR_CARD_TONES = ["transparent", "default", "primary",
-// todo: rename to `accent` in the next breaking major version
-"positive", "caution", "critical"];
-const THEME_COLOR_STATE_TONES = ["default", "primary",
-// todo: rename to `accent` in the next breaking major version
-"positive", "caution", "critical"];
+const THEME_COLOR_CARD_TONES = ["transparent", "default", "primary", "positive", "caution", "critical"];
+const THEME_COLOR_STATE_TONES = ["default", "primary", "positive", "caution", "critical"];
 const THEME_COLOR_STATES = ["enabled", "hovered", "pressed", "selected", "disabled"];
 const THEME_COLOR_BUTTON_MODES = ["default", "ghost", "bleed"];
 const THEME_COLOR_INPUT_MODES = ["default", "invalid"];
@@ -1986,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 {
@@ -2008,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 {
@@ -2023,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
@@ -2039,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)) {
@@ -2090,6 +2118,21 @@ function isColorValue(str) {
 function isColorOpacityValue(str) {
   return str === "0" || /^0\.[0-9]+$/.test(str) || str === "1";
 }
+function compileColorTokenValue(node) {
+  let key = "";
+  if (node.key === "black" || node.key === "white") {
+    key = node.key;
+  } 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);
+  }
+  return key;
+}
 const DEFAULT_COLOR_TOKEN_VALUE = ["500", "500"];
 function resolveColorTokenValue(context) {
   let value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_COLOR_TOKEN_VALUE;
@@ -2106,51 +2149,35 @@ function resolveColorTokenValue(context) {
     hue: node.hue || hue
   });
 }
-function compileColorTokenValue(node) {
-  let key = "";
-  if (node.key === "black" || node.key === "white") {
-    key = node.key;
-  } else {
-    key = "".concat(node.hue, "/").concat(node.tint);
-  }
-  if (node.opacity !== void 0) {
-    key += "/".concat(node.opacity);
-  }
-  return key;
-}
 const defaultColorTokens = {
   base: {
     "*": {
       _blend: ["multiply", "screen"],
+      accent: {
+        fg: ["purple/600", "purple/400"]
+      },
       avatar: {
         "*": {
           _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"],
       badge: {
         "*": {
           bg: ["100", "900"],
-          fg: ["600", "400"]
+          fg: ["600", "400"],
+          icon: ["500", "500"],
+          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"],
@@ -2161,17 +2188,18 @@ const defaultColorTokens = {
       },
       fg: ["800", "200"],
       focusRing: ["blue/500", "blue/500"],
+      icon: ["600", "400"],
       kbd: {
         bg: ["white", "black"],
         fg: ["600", "400"],
         border: ["200", "800"]
       },
       link: {
-        fg: ["blue/600", "blue/400"]
+        fg: ["blue/600", "blue/300"]
       },
       muted: {
         bg: ["50", "950"],
-        fg: ["600", "400"]
+        fg: ["700 75%", "300 75%"]
       },
       shadow: {
         outline: ["500/0.3", "500/0.4"],
@@ -2181,16 +2209,18 @@ 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"]
+      bg: ["50", "black"]
     },
     default: {
       bg: ["white", "950"],
-      fg: ["black", "200"]
+      fg: ["800", "200"],
+      muted: {
+        fg: ["600", "400"]
+      }
     },
     primary: {
       _hue: "blue"
@@ -2198,20 +2228,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: {
@@ -2220,58 +2247,89 @@ const defaultColorTokens = {
         "*": {
           _blend: ["screen", "multiply"],
           accent: {
-            fg: ["purple/200", "purple/700"]
+            fg: ["purple/300", "purple/700"]
+          },
+          avatar: {
+            "*": {
+              _blend: ["multiply", "screen"],
+              bg: ["white", "black"],
+              fg: ["black", "white"]
+            }
           },
           badge: {
             "*": {
-              dot: ["300", "700"],
-              icon: ["600", "400"]
+              bg: ["900", "100"],
+              fg: ["400", "600"],
+              dot: ["500", "500"],
+              icon: ["500", "500"]
             }
           },
           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"],
+          icon: ["100 70%", "900 70%"],
           kbd: {
-            bg: ["900", "50"],
-            fg: ["white", "black"],
+            bg: ["black", "white"],
+            fg: ["200", "600"],
             border: ["800", "200"]
           },
           link: {
-            fg: ["blue/200", "blue/700"]
+            fg: ["blue/200", "blue/600"]
           },
           muted: {
-            bg: ["900", "50"],
-            fg: ["200", "700"]
+            bg: ["950", "50"],
+            fg: ["100 70%", "900 70%"]
           },
           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",
+          accent: {
+            fg: ["100 70%", "900 70%"]
+          },
+          badge: {
+            "*": {
+              bg: ["gray/700", "gray/300"],
+              fg: ["white", "black"],
+              dot: ["white", "black"],
+              icon: ["white", "black"]
+            }
+          },
           bg: ["200", "800"],
-          icon: ["white", "black"]
+          kbd: {
+            bg: ["black", "white"],
+            fg: ["white", "black"],
+            border: ["700", "300"]
+          },
+          link: {
+            fg: ["100 70%", "900 70%"]
+          }
         }
       },
       default: {
         "*": {
-          bg: ["800", "200"]
+          bg: ["800", "200"],
+          muted: {
+            bg: ["950", "50"],
+            fg: ["400", "600"]
+          }
         },
         hovered: {
           bg: ["900", "100"]
@@ -2282,67 +2340,46 @@ 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: {
       "*": {
         "*": {
           _blend: ["multiply", "screen"],
+          accent: {
+            fg: ["purple/700 60%", "purple/300 70%"]
+          },
+          badge: {
+            "*": {
+              bg: ["100", "900"],
+              fg: ["600", "400"],
+              dot: ["500", "500"],
+              icon: ["500", "500"]
+            }
+          },
           bg: ["50", "950"],
-          fg: ["700", "400"],
-          icon: ["600", "500"],
           border: ["100", "900"],
-          accent: {
-            fg: ["purple/700/0.6", "purple/400/0.8"]
+          code: {
+            bg: ["500 10%", "400 10%"],
+            fg: ["700 60%", "400 60%"]
+          },
+          fg: ["600", "400"],
+          icon: ["700 60%", "300 60%"],
+          kbd: {
+            bg: ["white", "black"],
+            fg: ["600", "400"],
+            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"]
-          },
-          code: {
-            bg: ["500/0.1", "400/0.1"],
-            fg: ["700/0.6", "400/0.6"]
+            fg: ["700 60%", "300 60%"]
           },
           skeleton: {
             from: ["100", "900"],
-            to: ["100/0.5", "900/0.5"]
-          },
-          badge: {
-            "*": {
-              dot: ["300", "700"],
-              icon: ["600", "400"]
-            }
+            to: ["100 50%", "900 50%"]
           }
         },
         hovered: {
@@ -2359,32 +2396,46 @@ const defaultColorTokens = {
         },
         disabled: {
           _hue: "gray",
-          fg: ["200", "800"],
-          icon: ["200", "800"],
+          accent: {
+            fg: ["200", "800"]
+          },
+          badge: {
+            "*": {
+              _hue: "gray",
+              bg: ["50", "950"],
+              fg: ["gray/200", "gray/800"],
+              dot: ["gray/200", "gray/800"],
+              icon: ["gray/200", "gray/800"]
+            }
+          },
           border: ["100", "900"],
-          muted: {
-            fg: ["200/0.6", "900/0.6"]
+          code: {
+            bg: ["50", "950"],
+            fg: ["200", "800"]
           },
-          accent: {
-            fg: ["200/0.6", "900/0.6"]
+          fg: ["200", "800"],
+          icon: ["200", "800"],
+          kbd: {
+            bg: ["white", "black"],
+            fg: ["200", "800"],
+            border: ["100", "900"]
           },
           link: {
-            fg: ["200/0.6", "900/0.6"]
+            fg: ["200", "800"]
           },
-          code: {
-            bg: ["50/0.5", "950/0.5"],
-            fg: ["200/0.6", "900/0.6"]
+          muted: {
+            fg: ["200", "800"]
           }
         }
       },
       positive: {
         "*": {
-          border: ["600/0.2", "800"]
+          border: ["600 20%", "800"]
         }
       },
       caution: {
         "*": {
-          border: ["600/0.2", "800"]
+          border: ["600 20%", "800"]
         }
       }
     },
@@ -2392,65 +2443,86 @@ const defaultColorTokens = {
       "*": {
         "*": {
           _blend: ["multiply", "screen"],
+          accent: {
+            fg: ["purple/700 70%", "purple/300 70%"]
+          },
+          badge: {
+            "*": {
+              bg: ["100", "900"],
+              fg: ["600", "400"],
+              dot: ["500", "500"],
+              icon: ["500", "500"]
+            }
+          },
           bg: ["white", "black"],
-          fg: ["700", "300"],
-          icon: ["700/0.7", "300/0.7"],
           border: ["white/0", "black/0"],
-          muted: {
-            bg: ["100", "950"],
-            fg: ["700/0.7", "300/0.7"]
+          code: {
+            bg: ["50", "950"],
+            fg: ["700 75%", "300 75%"]
           },
-          accent: {
-            fg: ["purple/700/0.7", "purple/300/0.7"]
+          fg: ["700", "300"],
+          icon: ["700 75%", "300 75%"],
+          kbd: {
+            bg: ["white", "black"],
+            fg: ["700", "300"],
+            border: ["200", "800"]
           },
           link: {
-            fg: ["blue/700/0.7", "blue/300/0.7"]
+            fg: ["blue/700 70%", "blue/300 70%"]
           },
-          code: {
+          muted: {
             bg: ["100", "950"],
-            fg: ["600", "300"]
+            fg: ["700 75%", "300 75%"]
           },
           skeleton: {
             from: ["100", "900"],
-            to: ["100/0.5", "900/0.5"]
-          },
-          badge: {
-            "*": {
-              dot: ["300", "700"],
-              icon: ["600", "400"]
-            }
+            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",
-          fg: ["200", "800"],
-          muted: {
-            fg: ["200/0.6", "900/0.6"]
-          },
           accent: {
-            fg: ["200/0.6", "900/0.6"]
+            fg: ["200", "800"]
           },
-          link: {
-            fg: ["200/0.6", "900/0.6"]
+          badge: {
+            "*": {
+              _hue: "gray",
+              bg: ["50", "950"],
+              fg: ["gray/200", "gray/800"],
+              dot: ["gray/200", "gray/800"],
+              icon: ["gray/200", "gray/800"]
+            }
           },
           code: {
-            bg: ["50/0.5", "950/0.5"],
-            fg: ["200/0.6", "900/0.6"]
+            bg: ["50", "950"],
+            fg: ["200", "800"]
+          },
+          fg: ["200", "800"],
+          icon: ["200", "800"],
+          kbd: {
+            bg: ["white", "black"],
+            fg: ["200", "800"],
+            border: ["100", "900"]
+          },
+          link: {
+            fg: ["200", "800"]
+          },
+          muted: {
+            fg: ["200", "800"]
           }
         }
       }
@@ -2466,14 +2538,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: {
@@ -2492,52 +2564,40 @@ const defaultColorTokens = {
     "*": {
       "*": {
         _blend: ["multiply", "screen"],
-        bg: ["white", "black"],
-        fg: ["800", "200"],
-        icon: ["700/0.7", "300/0.7"],
-        avatar: {
+        accent: {
+          fg: ["purple/700 70%", "purple/300 70%"]
+        },
+        badge: {
           "*": {
-            _blend: ["screen", "multiply"],
-            bg: ["500", "400"],
-            fg: ["white", "black"]
+            bg: ["100", "900"],
+            fg: ["600", "400"],
+            dot: ["500", "500"],
+            icon: ["500", "500"]
           }
-          //   yellow: {bg: ['600', '400']},
-          //   green: {bg: ['600', '400']},
-          //   cyan: {bg: ['600', '400']},
         },
+        bg: ["white", "black"],
         border: ["200", "800"],
-        muted: {
+        code: {
           bg: ["50", "950"],
-          fg: ["700", "300"]
+          fg: ["600", "400"]
         },
-        accent: {
-          fg: ["purple/600", "purple/400"]
+        fg: ["700", "300"],
+        icon: ["700 75%", "300 75%"],
+        kbd: {
+          bg: ["white", "black"],
+          fg: ["600", "400"],
+          border: ["200", "800"]
         },
         link: {
-          fg: ["blue/700", "blue/300"]
+          fg: ["blue/700 70%", "blue/300 70%"]
         },
-        code: {
+        muted: {
           bg: ["100", "950"],
-          fg: ["700", "300"]
+          fg: ["700 75%", "300 75%"]
         },
         skeleton: {
           from: ["100", "900"],
-          to: ["100/0.5", "900/0.5"]
-        },
-        badge: {
-          "*": {
-            // _blend: ['multiply', 'screen'],
-            bg: ["100", "900"],
-            fg: ["600", "200"],
-            dot: ["300", "700"],
-            icon: ["600", "400"]
-          }
-        },
-        kbd: {
-          // _blend: ['multiply', 'screen'],
-          bg: ["white", "black"],
-          fg: ["600", "400"],
-          border: ["200", "800"]
+          to: ["100 50%", "900 50%"]
         }
       },
       hovered: {
@@ -2548,127 +2608,129 @@ const defaultColorTokens = {
       },
       selected: {
         _blend: ["screen", "multiply"],
-        bg: ["500", "400"],
-        fg: ["white", "black"],
-        icon: ["200", "800"],
+        accent: {
+          fg: ["purple/300", "purple/700"]
+        },
         avatar: {
           "*": {
             _blend: ["multiply", "screen"],
             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"]
+            bg: ["900", "100"],
+            fg: ["400", "600"],
+            dot: ["500", "500"],
+            icon: ["500", "500"]
           }
         },
-        border: ["500/0.2", "400/0.2"],
-        muted: {
-          bg: ["900", "50"],
-          fg: ["200", "800"]
-        },
-        accent: {
-          fg: ["purple/200", "purple/800"]
+        bg: ["500", "400"],
+        border: ["500 20%", "400 20%"],
+        code: {
+          bg: ["500 20%", "400 20%"],
+          fg: ["200", "600"]
         },
+        fg: ["white", "black"],
+        icon: ["100 70%", "900 70%"],
         kbd: {
-          bg: ["black/0", "white/0"],
-          fg: ["white", "black"],
-          border: ["gray/700", "gray/300"]
+          bg: ["black", "white"],
+          fg: ["200", "600"],
+          border: ["800", "200"]
         },
         link: {
-          fg: ["blue/200", "blue/800"]
+          fg: ["blue/200", "blue/600"]
         },
-        code: {
-          bg: ["500/0.2", "400/0.2"],
-          fg: ["200", "700"]
+        muted: {
+          bg: ["950", "50"],
+          fg: ["100 70%", "900 70%"]
         },
         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: {
+        _hue: "gray",
+        accent: {
+          fg: ["200", "800"]
+        },
+        badge: {
+          "*": {
+            _hue: "gray",
+            bg: ["50", "950"],
+            fg: ["gray/200", "gray/800"],
+            dot: ["gray/200", "gray/800"],
+            icon: ["gray/200", "gray/800"]
+          }
+        },
+        border: ["100", "900"],
+        code: {
+          bg: ["50", "950"],
+          fg: ["200", "800"]
+        },
         fg: ["200", "800"],
         icon: ["200", "800"],
-        muted: {
-          fg: ["200", "800/0.5"]
-        },
-        accent: {
-          fg: ["purple/200", "purple/800/0.5"]
+        kbd: {
+          bg: ["white", "black"],
+          fg: ["200", "800"],
+          border: ["100", "900"]
         },
         link: {
-          fg: ["blue/200", "blue/800/0.5"]
+          fg: ["200", "800"]
         },
-        code: {
-          bg: ["100", "950/0.5"],
-          fg: ["200", "800/0.5"]
+        muted: {
+          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/700", "purple/400"],
-    attrName: ["green/700", "green/400"],
-    attrValue: ["yellow/700", "yellow/400"],
-    attribute: ["yellow/700", "yellow/400"],
-    boolean: ["purple/700", "purple/400"],
-    builtin: ["purple/700", "purple/400"],
-    cdata: ["yellow/700", "yellow/400"],
-    char: ["yellow/700", "yellow/400"],
-    class: ["orange/700", "orange/400"],
-    className: ["cyan/700", "cyan/400"],
-    comment: ["gray/700/0.5", "gray/400/0.5"],
-    constant: ["purple/700", "purple/400"],
-    deleted: ["red/700", "red/400"],
-    entity: ["red/700", "red/400"],
-    function: ["green/700", "green/400"],
-    hexcode: ["blue/700", "blue/400"],
-    id: ["purple/700", "purple/400"],
-    important: ["purple/700", "purple/400"],
-    inserted: ["yellow/700", "yellow/400"],
-    keyword: ["magenta/700", "magenta/400"],
-    number: ["purple/700", "purple/400"],
-    operator: ["magenta/700", "magenta/400"],
-    property: ["blue/700", "blue/400"],
-    pseudoClass: ["yellow/700", "yellow/400"],
-    pseudoElement: ["yellow/700", "yellow/400"],
-    punctuation: ["gray/700", "gray/400"],
-    regex: ["blue/700", "blue/400"],
-    selector: ["red/700", "red/400"],
-    string: ["yellow/700", "yellow/400"],
-    symbol: ["purple/700", "purple/400"],
-    tag: ["red/700", "red/400"],
-    unit: ["orange/700", "orange/400"],
-    url: ["red/700", "red/400"],
-    variable: ["red/700", "red/400"]
+    atrule: ["purple/600", "purple/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/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/600", "green/400"],
+    hexcode: ["blue/600", "blue/400"],
+    id: ["purple/600", "purple/400"],
+    important: ["purple/600", "purple/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/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/600", "yellow/400"],
+    symbol: ["purple/600", "purple/400"],
+    tag: ["red/600", "red/400"],
+    unit: ["orange/600", "orange/400"],
+    url: ["red/600", "red/400"],
+    variable: ["red/600", "red/400"]
   }
 };
 function isRecord(value) {
@@ -3807,8 +3869,13 @@ 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.log("could not blend", hex, mixOptions);
+    console.warn("could not blend", hex, mixOptions);
     throw err;
   }
   if (hex === "#aN") {
@@ -4060,10 +4127,9 @@ function renderThemeColorBadgeColor(value, options) {
     colorPalette
   };
   return {
-    // _blend: blendMode,
     bg,
-    fg: renderColorValue(value.fg, colorOptions),
     dot: renderColorValue(value.dot, colorOptions),
+    fg: renderColorValue(value.fg, colorOptions),
     icon: renderColorValue(value.icon, colorOptions)
   };
 }
@@ -4122,7 +4188,7 @@ function renderThemeColorState(value, options) {
       blendMode
     }),
     badge: renderThemeColorBadge(value.badge, {
-      baseBg,
+      baseBg: bg,
       colorPalette,
       blendMode
     }),
@@ -4330,6 +4396,5 @@ function _setCachedTheme(rootTheme, scheme, tone, theme) {
   const toneCache = schemeCache.get(tone);
   toneCache.set(rootTheme, theme);
 }
-const defaultTheme = buildTheme();
-export { COLOR_CONFIG_AVATAR_COLORS, COLOR_CONFIG_BLEND_KEYS, COLOR_CONFIG_CARD_KEYS, COLOR_CONFIG_CARD_TONES, COLOR_CONFIG_INPUT_MODES, COLOR_CONFIG_INPUT_STATES, COLOR_CONFIG_STATES, COLOR_CONFIG_STATE_KEYS, COLOR_CONFIG_STATE_TONES, THEME_COLOR_AVATAR_COLORS, THEME_COLOR_BLEND_MODES, THEME_COLOR_BUTTON_MODES, THEME_COLOR_CARD_TONES, THEME_COLOR_INPUT_MODES, THEME_COLOR_INPUT_STATES, THEME_COLOR_STATES, THEME_COLOR_STATE_TONES, buildTheme, createColorTheme, defaultTheme, getContrastRatio, getScopedTheme, getTheme_v2, hexToRgb, hslToRgb, isColorBlendModeValue, isColorButtonMode, isColorConfigBaseKey, isColorConfigBaseTone, isColorConfigBlendKey, isColorConfigStateKey, isColorConfigStateTone, isColorHueKey, isColorOpacityValue, isColorTintKey, isColorTokenValue, isColorValue, is_v0, is_v2, mix, multiply, parseColor, parseTokenKey, parseTokenValue, rgbToHex, rgbToHsl, rgba, rgbaToRGBA, screen, v0_v2, v2_v0 };
+export { COLOR_CONFIG_AVATAR_COLORS, COLOR_CONFIG_BLEND_KEYS, COLOR_CONFIG_CARD_KEYS, COLOR_CONFIG_CARD_TONES, COLOR_CONFIG_INPUT_MODES, COLOR_CONFIG_INPUT_STATES, COLOR_CONFIG_STATES, COLOR_CONFIG_STATE_KEYS, COLOR_CONFIG_STATE_TONES, THEME_COLOR_AVATAR_COLORS, THEME_COLOR_BLEND_MODES, THEME_COLOR_BUTTON_MODES, THEME_COLOR_CARD_TONES, THEME_COLOR_INPUT_MODES, THEME_COLOR_INPUT_STATES, THEME_COLOR_SCHEMES, THEME_COLOR_STATES, THEME_COLOR_STATE_TONES, buildTheme, createColorTheme, getContrastRatio, getScopedTheme, getTheme_v2, hexToRgb, hslToRgb, isColorBlendModeValue, isColorButtonMode, isColorConfigBaseKey, isColorConfigBaseTone, isColorConfigBlendKey, isColorConfigStateKey, isColorConfigStateTone, isColorHueKey, isColorOpacityValue, isColorTintKey, isColorTokenValue, isColorValue, is_v0, is_v2, mix, multiply, parseColor, parseTokenKey, parseTokenValue, rgbToHex, rgbToHsl, rgba, rgbaToRGBA, screen, v0_v2, v2_v0 };
 //# sourceMappingURL=theme.esm.js.map