@sanity/ui 2.0.0-beta.9 → 2.0.0

package/dist/theme.d.ts

@@ -493,6 +493,12 @@ export declare const THEME_COLOR_STATES: readonly [
  */
 export declare type Theme_v2 = Omit<RootTheme_v2, 'color'> & {
   color: ThemeColorCard_v2
+  /**
+   * Indicates whether the theme is resolved or raw, it's necessary to avoid issues
+   * with sanity V2 components accessing a v1 <ThemeProvider>.
+   * See https://github.com/sanity-io/ui/pull/1203 for more info.
+   */
+  _resolved: boolean
 }
 
 /**
@@ -533,7 +539,6 @@ export declare interface ThemeColor extends Partial<Omit<ThemeColorGenericState,
   button: ThemeColorButton
   card: ThemeColorCard
   dark: boolean
-  focusRing?: string
   input: ThemeColorInput
   muted: ThemeColorMuted
   selectable?: ThemeColorSelectable
@@ -1117,7 +1122,13 @@ export declare interface ThemeColorState_v2 {
   accent: {
     fg: string
   }
+  /**
+   * @internal  This may be removed in a future release
+   * */
   avatar: ThemeColorAvatar_v2
+  /**
+   * @internal  This may be removed in a future release
+   * */
   badge: ThemeColorBadge_v2
   bg: string
   border: string

package/dist/theme.esm.js

@@ -1200,7 +1200,7 @@ const defaultThemeConfig = {
       outline: OUTLINE_WIDTH
     }
   },
-  container: [480, 640, 960, 1280, 1600, 1920],
+  container: [320, 640, 960, 1280, 1600, 1920],
   media: [360, 600, 900, 1200, 1800, 2400],
   layer: {
     dialog: {
@@ -1682,12 +1682,13 @@ function inputStateThemeColor_v0_v2(state) {
 }
 const cache$3 = /* @__PURE__ */new WeakMap();
 function getTheme_v2(theme) {
-  var _a;
-  if (theme.sanity.v2) return theme.sanity.v2;
+  var _a, _b;
+  if ((_a = theme.sanity.v2) == null ? void 0 : _a._resolved) return theme.sanity.v2;
   const cached_v2 = cache$3.get(theme);
   if (cached_v2) return cached_v2;
   const v2 = {
     _version: 2,
+    _resolved: true,
     avatar: {
       ...defaultThemeConfig.avatar,
       ...theme.sanity.avatar
@@ -1716,7 +1717,7 @@ function getTheme_v2(theme) {
         ...theme.sanity.input.switch
       }
     },
-    layer: (_a = theme.sanity.layer) != null ? _a : defaultThemeConfig.layer,
+    layer: (_b = theme.sanity.layer) != null ? _b : defaultThemeConfig.layer,
     media: theme.sanity.media,
     radius: theme.sanity.radius,
     shadow: theme.sanity.shadows,
@@ -1885,6 +1886,7 @@ function themeColor_v2_v0(color_v2) {
       ...color_v2.button.default,
       transparent: color_v2.button.default.default
     },
+    selectable: color_v2.selectable,
     spot: {
       gray: color_v2.avatar.gray.bg,
       blue: color_v2.avatar.blue.bg,
@@ -2163,7 +2165,7 @@ const defaultColorTokens = {
           fg: ["white", "black"]
         }
       },
-      backdrop: ["gray/200/0.2", "black/0.5"],
+      backdrop: ["gray/200/0.5", "black/0.5"],
       badge: {
         "*": {
           bg: ["100", "900"],
@@ -2184,10 +2186,11 @@ const defaultColorTokens = {
       border: ["200", "800"],
       code: {
         bg: ["50", "950"],
-        fg: ["600", "300"]
+        fg: ["600", "400"]
       },
       fg: ["800", "200"],
       focusRing: ["blue/500", "blue/500"],
+      icon: ["600", "400"],
       kbd: {
         bg: ["white", "black"],
         fg: ["600", "400"],
@@ -2198,7 +2201,7 @@ const defaultColorTokens = {
       },
       muted: {
         bg: ["50", "950"],
-        fg: ["700 70%", "300 70%"]
+        fg: ["700 75%", "300 75%"]
       },
       shadow: {
         outline: ["500/0.3", "500/0.4"],
@@ -2212,15 +2215,11 @@ const defaultColorTokens = {
       }
     },
     transparent: {
-      bg: ["50", "black"],
-      fg: ["600", "400"],
-      muted: {
-        fg: ["600", "400"]
-      }
+      bg: ["50", "black"]
     },
     default: {
       bg: ["white", "950"],
-      fg: ["black", "200"],
+      fg: ["800", "200"],
       muted: {
         fg: ["600", "400"]
       }
@@ -2252,6 +2251,13 @@ const defaultColorTokens = {
           accent: {
             fg: ["purple/300", "purple/700"]
           },
+          avatar: {
+            "*": {
+              _blend: ["multiply", "screen"],
+              bg: ["white", "black"],
+              fg: ["black", "white"]
+            }
+          },
           badge: {
             "*": {
               bg: ["900", "100"],
@@ -2267,18 +2273,18 @@ const defaultColorTokens = {
             fg: ["200", "600"]
           },
           fg: ["white", "black"],
-          icon: ["200", "800"],
+          icon: ["100 70%", "900 70%"],
           kbd: {
             bg: ["black", "white"],
-            fg: ["200", "800"],
+            fg: ["200", "600"],
             border: ["800", "200"]
           },
           link: {
-            fg: ["blue/200", "blue/700"]
+            fg: ["blue/200", "blue/600"]
           },
           muted: {
             bg: ["950", "50"],
-            fg: ["100 70%", "600"]
+            fg: ["100 70%", "900 70%"]
           },
           skeleton: {
             from: ["900", "100"],
@@ -2297,6 +2303,9 @@ const defaultColorTokens = {
         },
         disabled: {
           _hue: "gray",
+          accent: {
+            fg: ["100 70%", "900 70%"]
+          },
           badge: {
             "*": {
               bg: ["gray/700", "gray/300"],
@@ -2306,11 +2315,13 @@ const defaultColorTokens = {
             }
           },
           bg: ["200", "800"],
-          icon: ["white", "black"],
           kbd: {
             bg: ["black", "white"],
             fg: ["white", "black"],
             border: ["700", "300"]
+          },
+          link: {
+            fg: ["100 70%", "900 70%"]
           }
         }
       },
@@ -2355,7 +2366,7 @@ const defaultColorTokens = {
             fg: ["700 60%", "400 60%"]
           },
           fg: ["600", "400"],
-          icon: ["600", "500"],
+          icon: ["700 60%", "300 60%"],
           kbd: {
             bg: ["white", "black"],
             fg: ["600", "400"],
@@ -2448,14 +2459,14 @@ const defaultColorTokens = {
           bg: ["white", "black"],
           border: ["white/0", "black/0"],
           code: {
-            bg: ["100", "950"],
-            fg: ["600", "300"]
+            bg: ["50", "950"],
+            fg: ["700 75%", "300 75%"]
           },
           fg: ["700", "300"],
-          icon: ["700 70%", "300 70%"],
+          icon: ["700 75%", "300 75%"],
           kbd: {
             bg: ["white", "black"],
-            fg: ["600", "400"],
+            fg: ["700", "300"],
             border: ["200", "800"]
           },
           link: {
@@ -2463,7 +2474,7 @@ const defaultColorTokens = {
           },
           muted: {
             bg: ["100", "950"],
-            fg: ["700 70%", "300 70%"]
+            fg: ["700 75%", "300 75%"]
           },
           skeleton: {
             from: ["100", "900"],
@@ -2472,7 +2483,6 @@ const defaultColorTokens = {
         },
         hovered: {
           bg: ["50", "950"],
-          fg: ["700", "300"],
           icon: ["700 70%", "400 70%"]
         },
         pressed: {
@@ -2487,6 +2497,9 @@ const defaultColorTokens = {
         },
         disabled: {
           _hue: "gray",
+          accent: {
+            fg: ["200", "800"]
+          },
           badge: {
             "*": {
               _hue: "gray",
@@ -2496,13 +2509,12 @@ const defaultColorTokens = {
               icon: ["gray/200", "gray/800"]
             }
           },
-          fg: ["200", "800"],
-          muted: {
-            fg: ["200", "800"]
-          },
-          accent: {
+          code: {
+            bg: ["50", "950"],
             fg: ["200", "800"]
           },
+          fg: ["200", "800"],
+          icon: ["200", "800"],
           kbd: {
             bg: ["white", "black"],
             fg: ["200", "800"],
@@ -2511,8 +2523,7 @@ const defaultColorTokens = {
           link: {
             fg: ["200", "800"]
           },
-          code: {
-            bg: ["50", "950"],
+          muted: {
             fg: ["200", "800"]
           }
         }
@@ -2555,15 +2566,8 @@ const defaultColorTokens = {
     "*": {
       "*": {
         _blend: ["multiply", "screen"],
-        bg: ["white", "black"],
-        fg: ["800", "200"],
-        icon: ["700 70%", "300 70%"],
-        avatar: {
-          "*": {
-            _blend: ["screen", "multiply"],
-            bg: ["500", "400"],
-            fg: ["white", "black"]
-          }
+        accent: {
+          fg: ["purple/700 70%", "purple/300 70%"]
         },
         badge: {
           "*": {
@@ -2573,25 +2577,25 @@ const defaultColorTokens = {
             icon: ["500", "500"]
           }
         },
+        bg: ["white", "black"],
         border: ["200", "800"],
-        muted: {
+        code: {
           bg: ["50", "950"],
-          fg: ["700", "300"]
-        },
-        accent: {
-          fg: ["purple/600", "purple/400"]
+          fg: ["600", "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: {
-          bg: ["50", "950"],
-          fg: ["700", "300"]
+        muted: {
+          bg: ["100", "950"],
+          fg: ["700 75%", "300 75%"]
         },
         skeleton: {
           from: ["100", "900"],
@@ -2606,9 +2610,9 @@ 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"],
@@ -2618,31 +2622,31 @@ const defaultColorTokens = {
         },
         badge: {
           "*": {
-            bg: ["700", "300"],
-            fg: ["white", "black"],
-            dot: ["300", "700"],
-            icon: ["300", "700"]
+            bg: ["900", "100"],
+            fg: ["400", "600"],
+            dot: ["500", "500"],
+            icon: ["500", "500"]
           }
         },
+        bg: ["500", "400"],
         border: ["500 20%", "400 20%"],
-        muted: {
-          bg: ["950", "50"],
-          fg: ["200", "800"]
-        },
-        accent: {
-          fg: ["purple/200", "purple/800"]
+        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 20%", "400 20%"],
-          fg: ["300", "700"]
+        muted: {
+          bg: ["950", "50"],
+          fg: ["100 70%", "900 70%"]
         },
         skeleton: {
           from: ["900", "100"],
@@ -2650,20 +2654,36 @@ const defaultColorTokens = {
         }
       },
       disabled: {
-        fg: ["200", "800"],
-        icon: ["200", "800"],
-        muted: {
-          fg: ["200", "800"]
-        },
+        _hue: "gray",
         accent: {
-          fg: ["purple/200", "purple/800"]
+          fg: ["200", "800"]
         },
-        link: {
-          fg: ["blue/200", "blue/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"],
+        kbd: {
+          bg: ["white", "black"],
+          fg: ["200", "800"],
+          border: ["100", "900"]
+        },
+        link: {
+          fg: ["200", "800"]
+        },
+        muted: {
+          fg: ["200", "800"]
         }
       }
     },
@@ -4356,6 +4376,7 @@ function getScopedTheme(themeProp, scheme, tone) {
       layer: layer_v0,
       v2: {
         ...v2,
+        _resolved: true,
         color: color_v2,
         layer: layer_v2
       }