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

package/dist/theme.js

@@ -1166,6 +1166,9 @@ const defaultThemeConfig = {
   _version: 2,
   avatar: {
     sizes: [{
+      distance: -4,
+      size: 19
+    }, {
       distance: -4,
       size: 25
     }, {
@@ -1403,35 +1406,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
@@ -1911,13 +1921,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"];
@@ -2095,6 +2102,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;
@@ -2111,22 +2130,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"],
@@ -2147,7 +2157,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"],
@@ -2162,7 +2174,7 @@ const defaultColorTokens = {
       border: ["200", "800"],
       code: {
         bg: ["50", "950"],
-        fg: ["600", "400"]
+        fg: ["700", "300"]
       },
       fg: ["800", "200"],
       focusRing: ["blue/500", "blue/500"],
@@ -2172,7 +2184,7 @@ const defaultColorTokens = {
         border: ["200", "800"]
       },
       link: {
-        fg: ["blue/600", "blue/400"]
+        fg: ["blue/700", "blue/300"]
       },
       muted: {
         bg: ["50", "950"],
@@ -2229,8 +2241,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"],
@@ -2242,8 +2256,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: {
@@ -2270,8 +2284,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: {
@@ -2321,12 +2348,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"]
@@ -2335,19 +2379,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: {
@@ -2364,21 +2398,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"]
           }
         }
       },
@@ -2397,33 +2445,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: {
@@ -2443,19 +2498,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"]
           }
         }
       }
@@ -2505,10 +2574,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: {
@@ -2518,6 +2602,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"]
         },
@@ -2528,21 +2617,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: {
@@ -3813,7 +3887,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") {
@@ -4065,10 +4139,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)
   };
 }
@@ -4127,7 +4200,7 @@ function renderThemeColorState(value, options) {
       blendMode
     }),
     badge: renderThemeColorBadge(value.badge, {
-      baseBg,
+      baseBg: bg,
       colorPalette,
       blendMode
     }),
@@ -4335,7 +4408,6 @@ function _setCachedTheme(rootTheme, scheme, tone, theme) {
   const toneCache = schemeCache.get(tone);
   toneCache.set(rootTheme, theme);
 }
-const defaultTheme = buildTheme();
 exports.COLOR_CONFIG_AVATAR_COLORS = COLOR_CONFIG_AVATAR_COLORS;
 exports.COLOR_CONFIG_BLEND_KEYS = COLOR_CONFIG_BLEND_KEYS;
 exports.COLOR_CONFIG_CARD_KEYS = COLOR_CONFIG_CARD_KEYS;
@@ -4351,11 +4423,11 @@ exports.THEME_COLOR_BUTTON_MODES = THEME_COLOR_BUTTON_MODES;
 exports.THEME_COLOR_CARD_TONES = THEME_COLOR_CARD_TONES;
 exports.THEME_COLOR_INPUT_MODES = THEME_COLOR_INPUT_MODES;
 exports.THEME_COLOR_INPUT_STATES = THEME_COLOR_INPUT_STATES;
+exports.THEME_COLOR_SCHEMES = THEME_COLOR_SCHEMES;
 exports.THEME_COLOR_STATES = THEME_COLOR_STATES;
 exports.THEME_COLOR_STATE_TONES = THEME_COLOR_STATE_TONES;
 exports.buildTheme = buildTheme;
 exports.createColorTheme = createColorTheme;
-exports.defaultTheme = defaultTheme;
 exports.getContrastRatio = getContrastRatio;
 exports.getScopedTheme = getScopedTheme;
 exports.getTheme_v2 = getTheme_v2;