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

package/dist/theme.esm.js

@@ -1161,6 +1161,9 @@ const defaultThemeConfig = {
   _version: 2,
   avatar: {
     sizes: [{
+      distance: -4,
+      size: 19
+    }, {
       distance: -4,
       size: 25
     }, {
@@ -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"];
@@ -2090,6 +2097,18 @@ 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.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,22 +2125,13 @@ 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"],
@@ -2142,7 +2152,9 @@ const defaultColorTokens = {
       badge: {
         "*": {
           bg: ["100", "900"],
-          fg: ["600", "400"]
+          fg: ["600", "400"],
+          icon: ["500", "500"],
+          dot: ["500", "500"]
         },
         positive: {
           bg: ["200/0.6", "900"],
@@ -2157,7 +2169,7 @@ const defaultColorTokens = {
       border: ["200", "800"],
       code: {
         bg: ["50", "950"],
-        fg: ["600", "400"]
+        fg: ["700", "300"]
       },
       fg: ["800", "200"],
       focusRing: ["blue/500", "blue/500"],
@@ -2167,7 +2179,7 @@ const defaultColorTokens = {
         border: ["200", "800"]
       },
       link: {
-        fg: ["blue/600", "blue/400"]
+        fg: ["blue/700", "blue/300"]
       },
       muted: {
         bg: ["50", "950"],
@@ -2224,8 +2236,10 @@ const defaultColorTokens = {
           },
           badge: {
             "*": {
-              dot: ["300", "700"],
-              icon: ["600", "400"]
+              bg: ["900", "100"],
+              fg: ["400", "600"],
+              dot: ["500", "500"],
+              icon: ["500", "500"]
             }
           },
           bg: ["500", "400"],
@@ -2237,8 +2251,8 @@ const defaultColorTokens = {
           fg: ["white", "black"],
           icon: ["200", "800"],
           kbd: {
-            bg: ["900", "50"],
-            fg: ["white", "black"],
+            bg: ["black", "white"],
+            fg: ["200", "800"],
             border: ["800", "200"]
           },
           link: {
@@ -2265,8 +2279,21 @@ const defaultColorTokens = {
         },
         disabled: {
           _hue: "gray",
+          badge: {
+            "*": {
+              bg: ["gray/700", "gray/300"],
+              fg: ["white", "black"],
+              dot: ["white", "black"],
+              icon: ["white", "black"]
+            }
+          },
           bg: ["200", "800"],
-          icon: ["white", "black"]
+          icon: ["white", "black"],
+          kbd: {
+            bg: ["black", "white"],
+            fg: ["white", "black"],
+            border: ["700", "300"]
+          }
         }
       },
       default: {
@@ -2316,12 +2343,29 @@ const defaultColorTokens = {
       "*": {
         "*": {
           _blend: ["multiply", "screen"],
+          accent: {
+            fg: ["purple/700/0.6", "purple/400/0.8"]
+          },
+          badge: {
+            "*": {
+              bg: ["100", "900"],
+              fg: ["600", "400"],
+              dot: ["500", "500"],
+              icon: ["500", "500"]
+            }
+          },
           bg: ["50", "950"],
+          border: ["100", "900"],
+          code: {
+            bg: ["500/0.1", "400/0.1"],
+            fg: ["700/0.6", "400/0.6"]
+          },
           fg: ["700", "400"],
           icon: ["600", "500"],
-          border: ["100", "900"],
-          accent: {
-            fg: ["purple/700/0.6", "purple/400/0.8"]
+          kbd: {
+            bg: ["white", "black"],
+            fg: ["600", "400"],
+            border: ["200", "800"]
           },
           link: {
             fg: ["blue/700/0.6", "blue/400/0.8"]
@@ -2330,19 +2374,9 @@ const defaultColorTokens = {
             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"]
-          },
           skeleton: {
             from: ["100", "900"],
             to: ["100/0.5", "900/0.5"]
-          },
-          badge: {
-            "*": {
-              dot: ["300", "700"],
-              icon: ["600", "400"]
-            }
           }
         },
         hovered: {
@@ -2359,21 +2393,35 @@ 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"]
           }
         }
       },
@@ -2392,33 +2440,40 @@ const defaultColorTokens = {
       "*": {
         "*": {
           _blend: ["multiply", "screen"],
+          accent: {
+            fg: ["purple/700/0.7", "purple/300/0.7"]
+          },
+          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: {
+          code: {
             bg: ["100", "950"],
-            fg: ["700/0.7", "300/0.7"]
+            fg: ["600", "300"]
           },
-          accent: {
-            fg: ["purple/700/0.7", "purple/300/0.7"]
+          fg: ["700", "300"],
+          icon: ["700/0.7", "300/0.7"],
+          kbd: {
+            bg: ["white", "black"],
+            fg: ["600", "400"],
+            border: ["200", "800"]
           },
           link: {
             fg: ["blue/700/0.7", "blue/300/0.7"]
           },
-          code: {
+          muted: {
             bg: ["100", "950"],
-            fg: ["600", "300"]
+            fg: ["700/0.7", "300/0.7"]
           },
           skeleton: {
             from: ["100", "900"],
             to: ["100/0.5", "900/0.5"]
-          },
-          badge: {
-            "*": {
-              dot: ["300", "700"],
-              icon: ["600", "400"]
-            }
           }
         },
         hovered: {
@@ -2438,19 +2493,33 @@ const defaultColorTokens = {
         },
         disabled: {
           _hue: "gray",
+          badge: {
+            "*": {
+              _hue: "gray",
+              bg: ["50", "950"],
+              fg: ["gray/200", "gray/800"],
+              dot: ["gray/200", "gray/800"],
+              icon: ["gray/200", "gray/800"]
+            }
+          },
           fg: ["200", "800"],
           muted: {
-            fg: ["200/0.6", "900/0.6"]
+            fg: ["200", "800"]
           },
           accent: {
-            fg: ["200/0.6", "900/0.6"]
+            fg: ["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"]
+            bg: ["50", "950"],
+            fg: ["200", "800"]
           }
         }
       }
@@ -2500,10 +2569,25 @@ const defaultColorTokens = {
             _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"],
+            icon: ["500", "500"]
           }
-          //   yellow: {bg: ['600', '400']},
-          //   green: {bg: ['600', '400']},
-          //   cyan: {bg: ['600', '400']},
         },
         border: ["200", "800"],
         muted: {
@@ -2513,6 +2597,11 @@ const defaultColorTokens = {
         accent: {
           fg: ["purple/600", "purple/400"]
         },
+        kbd: {
+          bg: ["white", "black"],
+          fg: ["600", "400"],
+          border: ["200", "800"]
+        },
         link: {
           fg: ["blue/700", "blue/300"]
         },
@@ -2523,21 +2612,6 @@ const defaultColorTokens = {
         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"]
         }
       },
       hovered: {
@@ -3808,7 +3882,7 @@ function renderColorValue(str, options) {
   try {
     hex = mixThemeColor(hex, mixOptions);
   } catch (err) {
-    console.log("could not blend", hex, mixOptions);
+    console.warn("could not blend", hex, mixOptions);
     throw err;
   }
   if (hex === "#aN") {
@@ -4060,10 +4134,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 +4195,7 @@ function renderThemeColorState(value, options) {
       blendMode
     }),
     badge: renderThemeColorBadge(value.badge, {
-      baseBg,
+      baseBg: bg,
       colorPalette,
       blendMode
     }),
@@ -4330,6 +4403,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