feat: update sanity and @sanity/ui version

apps/v1/components/HeaderCard.tsx

@@ -20,19 +20,16 @@ export const HeaderCard = memo(function HeaderCard({
   transition,
 }: Props) {
   return (
-    <RootCard
-      paddingLeft={[4]}
-      paddingY={[2]}
-      scheme="dark"
-      shadow={scheme === 'dark' ? 1 : undefined}
-    >
+    <RootCard paddingLeft={[4]} scheme={scheme} borderBottom>
       <Card
         borderRight
         style={{
           display: 'grid',
           gridTemplateColumns: '32px 1fr',
           alignItems: 'center',
           paddingLeft: 'env(safe-area-inset-left)',
+          paddingTop: '7px', // To match navbar height
+          paddingBottom: '7px',
         }}
       >
         <Logo spin={spins} transition={transition} />

apps/v1/components/Themer.tsx

@@ -7,6 +7,7 @@ import {
   ThemeProvider,
   ToastProvider,
 } from '@sanity/ui'
+import { BaseTheme } from '@sanity/ui/theme'
 import Head from 'components/Head'
 import { HeaderCard, useHeaderCard } from 'components/HeaderCard'
 import HuesFields from 'components/HuesFields'
@@ -74,7 +75,7 @@ export default function Themer({
     )
 
     return {
-      createTheme: createTheme as (hues: Hues) => StudioTheme,
+      createTheme: createTheme as (hues: Hues) => BaseTheme,
       initialHues: hues as Hues,
     }
   }, [preset.url])

apps/v1/package.json

@@ -25,8 +25,8 @@
     "@sanity/client": "^6.4.0",
     "@sanity/color": "^2.2.5",
     "@sanity/icons": "^2.4.1",
-    "@sanity/ui": "^1.7.4",
-    "@sanity/vision": "^3.14.5",
+    "@sanity/ui": "^2.0.0",
+    "@sanity/vision": "^3.25.0",
     "culori": "^3.2.0",
     "history": "^5.3.0",
     "json5": "^2.2.3",
@@ -38,7 +38,7 @@
     "react-dom": "^18.2.0",
     "react-icons": "^4.10.1",
     "rimraf": "^4.4.1",
-    "sanity": "^3.14.5",
+    "sanity": "^3.25.0",
     "sanity-plugin-asset-source-unsplash": "^1.1.0",
     "sanity-plugin-mux-input": "^2.2.1",
     "scroll-into-view-if-needed": "^3.0.10",

apps/v1/scripts/buildEdgeUtils.mjs

@@ -78,16 +78,16 @@ const buildTemplateString = async () => {
    **/
   const stdin = {
     contents: `
-  import {studioTheme} from './node_modules/@sanity/ui/src/theme/studioTheme/theme.ts'
+  import {studioTheme} from './node_modules/@sanity/ui/src/core/_compat.ts'
   import {themeFromHues} from 'utils/themeFromHues'
   import {
     multiply,
     parseColor,
     rgbToHex,
     screen,
     rgba,
-  } from './node_modules/@sanity/ui/src/theme/lib/color-fns/index.ts'
-  import {createColorTheme} from './node_modules/@sanity/ui/src/theme/lib/theme/color/factory.ts'
+  } from './node_modules/@sanity/ui/src/theme/build/lib/color-fns/index.ts'
+  import {createColorTheme} from './node_modules/@sanity/ui/src/theme/build/_deprecated/color/factory.ts'
 
 export const hues = process.env.__HUES__
 

apps/v1/studios/index.ts

@@ -1,6 +1,6 @@
-import { createConfig } from 'sanity'
+import { defineConfig } from 'sanity'
 
 import { config as blog } from './blog'
 import { config as movies } from './movies'
 
-export const config = createConfig([movies, blog])
+export const config = defineConfig([movies, blog])

apps/v1/studios/movies/index.tsx

@@ -1,6 +1,6 @@
 import { visionTool } from '@sanity/vision'
 import { BiMoviePlay } from 'react-icons/bi'
-import { createConfig } from 'sanity'
+import { WorkspaceOptions } from 'sanity'
 import { deskTool } from 'sanity/desk'
 import { unsplashImageAsset } from 'sanity-plugin-asset-source-unsplash'
 import { muxInput } from 'sanity-plugin-mux-input'
@@ -10,7 +10,7 @@ import { schemaTypes } from './schemas'
 const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID
 const dataset = process.env.NEXT_PUBLIC_SANITY_MOVIES_DATASET
 
-export const config = createConfig({
+export const config: WorkspaceOptions = {
   name: 'movies',
   title: 'Movies',
   basePath: '/movies',
@@ -26,4 +26,4 @@ export const config = createConfig({
   schema: {
     types: schemaTypes,
   },
-})
+}

apps/v1/utils/themeFromHues.ts

@@ -5,7 +5,7 @@ import type {
   ThemeColorSchemes,
   ThemeColorSpotKey,
 } from '@sanity/ui'
-import type { StudioTheme } from 'sanity'
+import { BaseTheme } from '@sanity/ui/theme'
 import type { PartialDeep } from 'type-fest'
 import { applyHues } from 'utils/applyHues'
 import {
@@ -27,7 +27,7 @@ interface Options {
   hues: PartialDeep<Hues>
   // if there's a color property on the studioTheme it will be overridden/ignored, thus we change the typing allowing it to be omitted
   // but at the same time not _enforcing_ it to be omitted and create unnecessary TS errors for those passing `import {studioTheme} from '@sanity/ui'` directly
-  studioTheme: Omit<StudioTheme, 'color'> & { color?: unknown }
+  studioTheme: Omit<BaseTheme, 'color'> & { color?: unknown }
   parseColor: (color: string) => RGB
   rgbToHex: (rgb: RGB) => string
   multiply: (bg: RGB, fg: RGB) => RGB
@@ -72,8 +72,12 @@ export function themeFromHues({
   rgbToHex,
   rgba,
   createColorTheme,
-}: Options): StudioTheme & {
+}: Options): BaseTheme & {
   __themer: true
+  /**
+   * This needs to be set as undefined, given it will be created internally by @sanity/ui
+   */
+  v2: undefined
 } {
   function multiply(bg: string, fg: string): string {
     const b = parseColor(bg)
@@ -194,6 +198,7 @@ export function themeFromHues({
           bg2: mix2(bg, tints[dark ? 50 : 950].hex),
           border: mix(base.bg, tints[dark ? 800 : 200].hex),
           fg: mix(base.bg, dark ? black.hex : white.hex),
+          icon: mix(base.bg, dark ? black.hex : white.hex),
           muted: {
             fg: mix(base.bg, tints[dark ? 950 : 50].hex),
           },
@@ -223,6 +228,7 @@ export function themeFromHues({
           bg2: mix2(bg, tints[dark ? 50 : 950].hex),
           border: mix(base.bg, tints[dark ? 300 : 600].hex),
           fg: mix(base.bg, dark ? black.hex : white.hex),
+          icon: mix(base.bg, dark ? black.hex : white.hex),
           muted: {
             fg: mix(base.bg, tints[dark ? 800 : 200].hex),
           },
@@ -252,6 +258,7 @@ export function themeFromHues({
           bg2: mix2(bg, tints[dark ? 50 : 950].hex),
           border: mix(base.bg, tints[dark ? 200 : 800].hex),
           fg: mix(base.bg, dark ? black.hex : white.hex),
+          icon: mix(base.bg, dark ? black.hex : white.hex),
           muted: {
             fg: mix(base.bg, tints[dark ? 800 : 200].hex),
           },
@@ -285,6 +292,7 @@ export function themeFromHues({
           bg2: mix2(bg, tints[dark ? 50 : 950].hex),
           border: mix(base.bg, tints[dark ? 200 : 800].hex),
           fg: mix(base.bg, dark ? black.hex : white.hex),
+          icon: mix(base.bg, dark ? black.hex : white.hex),
           muted: {
             fg: mix(base.bg, tints[dark ? 800 : 200].hex),
           },
@@ -314,6 +322,7 @@ export function themeFromHues({
         bg2: mix2(bg, tints[dark ? 50 : 950].hex),
         border: mix(base.bg, tints[dark ? 400 : 500].hex),
         fg: mix(base.bg, dark ? black.hex : white.hex),
+        icon: mix(base.bg, dark ? black.hex : white.hex),
         muted: {
           fg: mix(base.bg, tints[dark ? 900 : 100].hex),
         },
@@ -353,6 +362,7 @@ export function themeFromHues({
           bg2: mix(bg, tints[dark ? 950 : 50].hex),
           border: mix(bg, tints[dark ? 950 : 50].hex),
           fg: mix(bg, tints[dark ? 800 : 200].hex),
+          icon: mix(bg, tints[dark ? 800 : 200].hex),
           muted: {
             fg: mix(bg, tints[dark ? 900 : 100].hex),
           },
@@ -386,6 +396,7 @@ export function themeFromHues({
           bg2: mix(bg, tints[dark ? 950 : 50].hex),
           border: mix(bg, tints[dark ? 900 : 100].hex),
           fg: mix(base.bg, tints[dark ? 200 : 800].hex),
+          icon: mix(base.bg, tints[dark ? 200 : 800].hex),
           muted: {
             fg: mix(base.bg, tints[dark ? 400 : 600].hex),
           },
@@ -419,6 +430,7 @@ export function themeFromHues({
           bg2: mix(bg, tints[dark ? 950 : 50].hex),
           border: mix(bg, tints[dark ? 900 : 100].hex),
           fg: mix(base.bg, tints[dark ? 200 : 800].hex),
+          icon: mix(base.bg, tints[dark ? 200 : 800].hex),
           muted: {
             fg: mix(base.bg, tints[dark ? 400 : 600].hex),
           },
@@ -452,6 +464,7 @@ export function themeFromHues({
           bg2: mix(bg, tints[dark ? 950 : 50].hex),
           border: mix(bg, tints[dark ? 900 : 100].hex),
           fg: mix(base.bg, tints[dark ? 200 : 800].hex),
+          icon: mix(base.bg, tints[dark ? 200 : 800].hex),
           muted: {
             fg: mix(base.bg, tints[dark ? 400 : 600].hex),
           },
@@ -480,6 +493,7 @@ export function themeFromHues({
         bg2: mix(bg, tints[dark ? 950 : 50].hex),
         border: mix(bg, tints[dark ? 900 : 100].hex),
         fg: mix(base.bg, tints[dark ? 300 : 700].hex),
+        icon: mix(base.bg, tints[dark ? 300 : 700].hex),
         muted: {
           fg: mix(base.bg, tints[dark ? 400 : 600].hex),
         },
@@ -576,6 +590,7 @@ export function themeFromHues({
         bg,
         bg2: mix(bg, tints[dark ? 950 : 50].hex),
         fg: base.fg,
+        icon: base.fg,
         border: base.border,
         muted: {
           fg: mix(base.bg, tints[dark ? 400 : 600].hex),
@@ -605,6 +620,7 @@ export function themeFromHues({
 
         return {
           bg: mix(base.bg, tints[dark ? 950 : 50].hex),
+          bg2: mix(base.bg, tints[dark ? 800 : 200].hex),
           fg: mix(base.bg, tints[dark ? 400 : 600].hex),
           border: mix(base.bg, tints[dark ? 800 : 200].hex),
           placeholder: mix(base.bg, tints[dark ? 600 : 400].hex),
@@ -614,6 +630,7 @@ export function themeFromHues({
       if (state === 'hovered') {
         return {
           bg: base.bg,
+          bg2: mix(base.bg, gray[dark ? 700 : 300].hex),
           fg: base.fg,
           border: mix(base.bg, gray[dark ? 700 : 300].hex),
           placeholder: mix(base.bg, gray[dark ? 600 : 400].hex),
@@ -623,6 +640,7 @@ export function themeFromHues({
       if (state === 'disabled') {
         return {
           bg: mix(base.bg, gray[dark ? 950 : 50].hex),
+          bg2: mix(base.bg, gray[dark ? 900 : 100].hex),
           fg: mix(base.bg, gray[dark ? 700 : 300].hex),
           border: mix(base.bg, gray[dark ? 900 : 100].hex),
           placeholder: mix(base.bg, gray[dark ? 800 : 200].hex),
@@ -632,6 +650,7 @@ export function themeFromHues({
       if (state === 'readOnly') {
         return {
           bg: mix(base.bg, gray[dark ? 950 : 50].hex),
+          bg2: mix(base.bg, gray[dark ? 800 : 200].hex),
           fg: mix(base.bg, gray[dark ? 200 : 800].hex),
           border: mix(base.bg, gray[dark ? 800 : 200].hex),
           placeholder: mix(base.bg, gray[dark ? 600 : 400].hex),
@@ -640,6 +659,7 @@ export function themeFromHues({
 
       return {
         bg: base.bg,
+        bg2: base.border,
         fg: base.fg,
         border: base.border,
         placeholder: mix(base.bg, gray[dark ? 600 : 400].hex),
@@ -732,5 +752,5 @@ export function themeFromHues({
     },
   })
 
-  return { ...studioTheme, color, __themer: true }
+  return { ...studioTheme, color, __themer: true, v2: undefined }
 }

apps/v2/package.json

@@ -8,14 +8,14 @@
   },
   "dependencies": {
     "@sanity/icons": "^2.4.1",
-    "@sanity/ui": "^1.7.4",
+    "@sanity/ui": "^2.0.0",
     "@types/styled-components": "^5.1.26",
     "motion": "^10.16.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.10.1",
     "react-is": "^18.2.0",
-    "sanity": "^3.14.5",
+    "sanity": "^3.25.0",
     "sanity-plugin-mux-input": "^2.2.1",
     "styled-components": "^5.3.11"
   },

examples/advanced/package.json

@@ -11,7 +11,7 @@
     "react-dom": "^18.2.0",
     "react-icons": "^4.10.1",
     "react-is": "^18.2.0",
-    "sanity": "^3.14.5",
+    "sanity": "^3.25.0",
     "sanity-plugin-mux-input": "^2.2.1",
     "styled-components": "^5.3.11"
   },

examples/basic/package.json

@@ -11,7 +11,7 @@
     "react-dom": "^18.2.0",
     "react-icons": "^4.10.1",
     "react-is": "^18.2.0",
-    "sanity": "^3.14.5",
+    "sanity": "^3.25.0",
     "sanity-plugin-mux-input": "^2.2.1",
     "styled-components": "^5.3.11"
   },

examples/next-dynamic/package.json

@@ -13,7 +13,7 @@
     "react-dom": "^18.2.0",
     "react-icons": "^4.10.1",
     "react-is": "^18.2.0",
-    "sanity": "^3.14.5",
+    "sanity": "^3.25.0",
     "sanity-plugin-mux-input": "^2.2.1",
     "styled-components": "^5.3.11"
   },

examples/next-dynamic/themer.d.ts

@@ -12,7 +12,7 @@ declare module 'https://themer.sanity.build/api/hues?*' {
     critical: Hue
   }
   export const hues: Hues
-  type Theme = import('sanity').StudioTheme
+  type Theme = import('sanity').BaseTheme
   export function createTheme(_hues: Hues): Theme
   export const theme: Theme
 }

examples/next-static/package.json

@@ -13,7 +13,7 @@
     "react-dom": "^18.2.0",
     "react-icons": "^4.10.1",
     "react-is": "^18.2.0",
-    "sanity": "^3.14.5",
+    "sanity": "^3.25.0",
     "sanity-plugin-mux-input": "^2.2.1",
     "styled-components": "^5.3.11"
   },