@sanity/ui 2.0.0-beta.9 → 2.0.0

package/src/theme/defaults/colorTokens.ts

@@ -14,7 +14,7 @@ export const defaultColorTokens: ThemeColorTokens = {
           fg: ['white', 'black'],
         },
       },
-      backdrop: ['gray/200/0.2', 'black/0.5'],
+      backdrop: ['gray/200/0.5', 'black/0.5'],
       badge: {
         '*': {
           bg: ['100', '900'],
@@ -35,10 +35,11 @@ export const defaultColorTokens: ThemeColorTokens = {
       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'],
@@ -49,7 +50,7 @@ export const defaultColorTokens: ThemeColorTokens = {
       },
       muted: {
         bg: ['50', '950'],
-        fg: ['700 70%', '300 70%'],
+        fg: ['700 75%', '300 75%'],
       },
       shadow: {
         outline: ['500/0.3', '500/0.4'],
@@ -64,14 +65,10 @@ export const defaultColorTokens: ThemeColorTokens = {
     },
     transparent: {
       bg: ['50', 'black'],
-      fg: ['600', '400'],
-      muted: {
-        fg: ['600', '400'],
-      },
     },
     default: {
       bg: ['white', '950'],
-      fg: ['black', '200'],
+      fg: ['800', '200'],
       muted: {
         fg: ['600', '400'],
       },
@@ -95,6 +92,13 @@ export const defaultColorTokens: ThemeColorTokens = {
           accent: {
             fg: ['purple/300', 'purple/700'],
           },
+          avatar: {
+            '*': {
+              _blend: ['multiply', 'screen'],
+              bg: ['white', 'black'],
+              fg: ['black', 'white'],
+            },
+          },
           badge: {
             '*': {
               bg: ['900', '100'],
@@ -110,18 +114,18 @@ export const defaultColorTokens: ThemeColorTokens = {
             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'],
@@ -140,6 +144,9 @@ export const defaultColorTokens: ThemeColorTokens = {
         },
         disabled: {
           _hue: 'gray',
+          accent: {
+            fg: ['100 70%', '900 70%'],
+          },
           badge: {
             '*': {
               bg: ['gray/700', 'gray/300'],
@@ -149,12 +156,14 @@ export const defaultColorTokens: ThemeColorTokens = {
             },
           },
           bg: ['200', '800'],
-          icon: ['white', 'black'],
           kbd: {
             bg: ['black', 'white'],
             fg: ['white', 'black'],
             border: ['700', '300'],
           },
+          link: {
+            fg: ['100 70%', '900 70%'],
+          },
         },
       },
       default: {
@@ -198,7 +207,7 @@ export const defaultColorTokens: ThemeColorTokens = {
             fg: ['700 60%', '400 60%'],
           },
           fg: ['600', '400'],
-          icon: ['600', '500'],
+          icon: ['700 60%', '300 60%'],
           kbd: {
             bg: ['white', 'black'],
             fg: ['600', '400'],
@@ -291,14 +300,14 @@ export const defaultColorTokens: ThemeColorTokens = {
           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: {
@@ -306,7 +315,7 @@ export const defaultColorTokens: ThemeColorTokens = {
           },
           muted: {
             bg: ['100', '950'],
-            fg: ['700 70%', '300 70%'],
+            fg: ['700 75%', '300 75%'],
           },
           skeleton: {
             from: ['100', '900'],
@@ -315,7 +324,6 @@ export const defaultColorTokens: ThemeColorTokens = {
         },
         hovered: {
           bg: ['50', '950'],
-          fg: ['700', '300'],
           icon: ['700 70%', '400 70%'],
         },
         pressed: {
@@ -330,6 +338,9 @@ export const defaultColorTokens: ThemeColorTokens = {
         },
         disabled: {
           _hue: 'gray',
+          accent: {
+            fg: ['200', '800'],
+          },
           badge: {
             '*': {
               _hue: 'gray',
@@ -339,13 +350,12 @@ export const defaultColorTokens: ThemeColorTokens = {
               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'],
@@ -354,8 +364,7 @@ export const defaultColorTokens: ThemeColorTokens = {
           link: {
             fg: ['200', '800'],
           },
-          code: {
-            bg: ['50', '950'],
+          muted: {
             fg: ['200', '800'],
           },
         },
@@ -398,15 +407,8 @@ export const defaultColorTokens: ThemeColorTokens = {
     '*': {
       '*': {
         _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: {
           '*': {
@@ -416,25 +418,25 @@ export const defaultColorTokens: ThemeColorTokens = {
             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'],
@@ -449,9 +451,9 @@ export const defaultColorTokens: ThemeColorTokens = {
       },
       selected: {
         _blend: ['screen', 'multiply'],
-        bg: ['500', '400'],
-        fg: ['white', 'black'],
-        icon: ['200', '800'],
+        accent: {
+          fg: ['purple/300', 'purple/700'],
+        },
         avatar: {
           '*': {
             _blend: ['multiply', 'screen'],
@@ -461,31 +463,31 @@ export const defaultColorTokens: ThemeColorTokens = {
         },
         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'],
@@ -493,19 +495,35 @@ export const defaultColorTokens: ThemeColorTokens = {
         },
       },
       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: {
+        kbd: {
+          bg: ['white', 'black'],
           fg: ['200', '800'],
-        },
-        accent: {
-          fg: ['purple/200', 'purple/800'],
+          border: ['100', '900'],
         },
         link: {
-          fg: ['blue/200', 'blue/800'],
+          fg: ['200', '800'],
         },
-        code: {
-          bg: ['50', '950'],
+        muted: {
           fg: ['200', '800'],
         },
       },

package/src/theme/defaults/config.ts

@@ -24,7 +24,7 @@ export const defaultThemeConfig: Omit<RootTheme_v2, 'color' | 'font'> = {
     focusRing: {offset: -1, width: 1},
     shadow: {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: {zOffset: 600},

package/src/theme/getScopedTheme.ts

@@ -36,6 +36,7 @@ export function getScopedTheme(
       layer: layer_v0,
       v2: {
         ...v2,
+        _resolved: true,
         color: color_v2,
         layer: layer_v2,
       },

package/src/theme/system/color/state.ts

@@ -12,7 +12,13 @@ export 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/src/theme/system/theme.ts

@@ -114,7 +114,15 @@ export type RootTheme = BaseTheme
 /**
  * @public
  */
-export type Theme_v2 = Omit<RootTheme_v2, 'color'> & {color: ThemeColorCard_v2}
+export 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
+}
 
 /**
  * @public

package/src/theme/system/v0/color/color.ts

@@ -18,7 +18,6 @@ export interface ThemeColor extends Partial<Omit<ThemeColorGenericState, 'muted'
   button: ThemeColorButton
   card: ThemeColorCard
   dark: boolean
-  focusRing?: string
   input: ThemeColorInput
   muted: ThemeColorMuted
   selectable?: ThemeColorSelectable

package/src/theme/versioning/getTheme_v2.ts

@@ -6,7 +6,7 @@ const cache = new WeakMap<Theme, Theme_v2>()
 
 /** @public */
 export function getTheme_v2(theme: Theme): Theme_v2 {
-  if (theme.sanity.v2) return theme.sanity.v2
+  if (theme.sanity.v2?._resolved) return theme.sanity.v2
 
   const cached_v2 = cache.get(theme)
 
@@ -14,6 +14,7 @@ export function getTheme_v2(theme: Theme): Theme_v2 {
 
   const v2: Theme_v2 = {
     _version: 2,
+    _resolved: true,
     avatar: {
       ...defaultThemeConfig.avatar,
       ...theme.sanity.avatar,

package/src/theme/versioning/v2_v0.ts

@@ -91,6 +91,7 @@ function themeColor_v2_v0(color_v2: ThemeColorCard_v2): ThemeColor {
       ...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,