feat(sanity): render global font and background color

packages/sanity/src/core/studio/GlobalStyle.tsx

@@ -0,0 +1,15 @@
+import {createGlobalStyle} from 'styled-components'
+
+export const GlobalStyle = createGlobalStyle(({theme}) => {
+  const {color, fonts} = theme.sanity
+
+  return {
+    html: {
+      backgroundColor: color.base.bg,
+    },
+
+    '#sanity': {
+      fontFamily: fonts.text.family,
+    },
+  }
+})

packages/sanity/src/core/studio/Studio.tsx

@@ -2,6 +2,7 @@ import {ThemeColorSchemeKey} from '@sanity/ui'
 import {History} from 'history'
 import React, {ReactElement} from 'react'
 import {Config} from '../config'
+import {GlobalStyle} from './GlobalStyle'
 import {StudioProvider} from './StudioProvider'
 import {useWorkspace} from './workspace'
 
@@ -10,7 +11,11 @@ export interface StudioProps {
   config: Config
   onSchemeChange?: (nextScheme: ThemeColorSchemeKey) => void
   scheme?: ThemeColorSchemeKey
+  /** @beta */
   unstable_history?: History
+  /** @beta */
+  unstable_globalStyles?: boolean
+  /** @beta */
   unstable_noAuthBoundary?: boolean
 }
 
@@ -22,8 +27,11 @@ function StudioLayout() {
 
 /** @beta */
 export function Studio(props: StudioProps): ReactElement {
+  const {unstable_globalStyles: globalStyles, ...restProps} = props
+
   return (
-    <StudioProvider {...props}>
+    <StudioProvider {...restProps}>
+      {globalStyles && <GlobalStyle />}
       <StudioLayout />
     </StudioProvider>
   )

packages/sanity/src/core/studio/StudioThemeProvider.tsx

@@ -13,7 +13,7 @@ export function StudioThemeProvider({children}: StudioThemeProviderProps) {
   const {scheme} = useColorScheme()
 
   return (
-    <ThemeProvider scheme={scheme} theme={theme}>
+    <ThemeProvider scheme={scheme} theme={theme} tone="transparent">
       <LayerProvider>{children}</LayerProvider>
     </ThemeProvider>
   )

packages/sanity/src/core/studio/colorScheme.tsx

@@ -37,7 +37,7 @@ export function ColorSchemeProvider({
       {/* that may render before the StudioThemeProvider renders. this is */}
       {/* required because the StudioThemeProvider has a dependence on the */}
       {/* active workspace provided via the ActiveWorkspaceMatcher */}
-      <ThemeProvider scheme={scheme} theme={studioTheme}>
+      <ThemeProvider scheme={scheme} theme={studioTheme} tone="transparent">
         {children}
       </ThemeProvider>
     </ColorSchemeContext.Provider>

packages/sanity/src/core/studio/renderStudio.tsx

@@ -8,20 +8,22 @@ export function renderStudio(
   rootElement: HTMLElement | null,
   config: Config,
   reactStrictMode = false
-) {
+): () => void {
   if (!rootElement) {
     throw new Error('Missing root element to mount application into')
   }
 
   const root = createRoot(rootElement)
+
   root.render(
     reactStrictMode ? (
       <StrictMode>
-        <Studio config={config} />
+        <Studio config={config} unstable_globalStyles />
       </StrictMode>
     ) : (
-      <Studio config={config} />
+      <Studio config={config} unstable_globalStyles />
     )
   )
+
   return () => root.unmount()
 }