fix: use vanilla-extract

Author: stipsan

src/core/GlobalStyle.ts

@@ -4,6 +4,8 @@ import {debounce} from 'lodash'
 import {isEqual} from 'lodash'
 import {memo, useCallback, useEffect, useMemo, useRef, useState} from 'react'
 
+import {forceMinWidth320} from '#styles'
+
 import {WorkshopConfig} from './config'
 import {DEFAULT_VIEWPORT_VALUE, DEFAULT_ZOOM_VALUE} from './constants'
 import {WorkshopInspector} from './inspector'
@@ -235,7 +237,7 @@ export const Workshop = memo(function Workshop(props: WorkshopProps): React.Reac
       viewport={viewport}
       zoom={zoom}
     >
-      <Flex data-boundary="" direction="column" height="fill" style={{minWidth: 320}}>
+      <Flex className={forceMinWidth320} direction="column" height="fill">
         {withNavbar && (
           <WorkshopNavbar
             inspectorExpanded={inspectorExpanded}

src/core/Workshop.tsx

@@ -1,11 +1,10 @@
-import {ButtonTone} from '@sanity/ui'
-import {ReactNode} from 'react'
+import type {ElementTone} from '@sanity/ui/theme'
 
 import {WorkshopPlugin} from '../config'
 
 export interface InspectorTab {
   id: string
-  label: ReactNode
+  label: React.ReactNode
   plugin: WorkshopPlugin
-  tone?: ButtonTone
+  tone?: ElementTone
 }

src/core/inspector/types.ts

@@ -6,7 +6,6 @@ import {StrictMode, useEffect, useState} from 'react'
 import {createRoot} from 'react-dom/client'
 
 import {WorkshopConfig} from './config'
-import {GlobalStyle} from './GlobalStyle'
 import {createLocationStore} from './location'
 import {Workshop} from './Workshop'
 
@@ -35,7 +34,6 @@ function App(props: {config: WorkshopConfig}) {
 
   return (
     <Root scheme={scheme}>
-      <GlobalStyle />
       <Workshop
         config={config}
         locationStore={locationStore}

src/core/mount.tsx

@@ -7,7 +7,6 @@ import {createRoot} from 'react-dom/client'
 
 import {WorkshopConfig} from './config'
 import {WorkshopFrame} from './frame'
-import {GlobalStyle} from './GlobalStyle'
 
 /** @beta */
 export function mountFrame(options: {config: WorkshopConfig}): void {
@@ -29,7 +28,6 @@ function App(props: {config: WorkshopConfig}) {
 
   return (
     <Root scheme={scheme}>
-      <GlobalStyle />
       <WorkshopFrame config={config} setScheme={setScheme} />
     </Root>
   )

src/core/mountFrame.tsx

@@ -1,8 +1,8 @@
-import {useWorkshop} from '@sanity/ui-workshop'
 import axe, {AxeResults} from 'axe-core'
 import {memo, useEffect, useMemo, useState} from 'react'
 
-import {A11yContext, A11yContextValue} from './A11yContext'
+import {useWorkshop} from '../core/useWorkshop'
+import {A11yContext, type A11yContextValue} from './A11yContext'
 import {A11yMsg} from './msg'
 
 /** @internal */

src/plugin-a11y/A11yProvider.tsx

@@ -1,4 +1,4 @@
-import {WorkshopPlugin} from '@sanity/ui-workshop'
+import type {WorkshopPlugin} from '@sanity/ui-workshop'
 
 import {A11yInspector} from './A11yInspector'
 import {A11yProvider} from './A11yProvider'

src/plugin-a11y/index.ts

@@ -1,11 +1,11 @@
-import {useWorkshop} from '@sanity/ui-workshop'
 import {memo, useCallback, useEffect, useMemo, useState} from 'react'
 
+import {useWorkshop} from '../core/useWorkshop'
 import {_runTest} from './_runTest'
-import {PerfMsg} from './msg'
-import {PerfContext, PerfContextValue} from './PerfContext'
+import type {PerfMsg} from './msg'
+import {PerfContext, type PerfContextValue} from './PerfContext'
 import {perfReducer} from './perfReducer'
-import {PerfState, PerfTest, PerfTestRenderResult} from './types'
+import type {PerfState, PerfTest, PerfTestRenderResult} from './types'
 
 /** @internal */
 export const PerfProvider = memo(function PerfProvider(props: {

src/plugin-perf/PerfProvider.tsx

@@ -1,5 +1,5 @@
 export type {PerfContextValue} from './PerfContext'
-import {WorkshopPlugin} from '@sanity/ui-workshop'
+import type {WorkshopPlugin} from '@sanity/ui-workshop'
 
 import {PerfInspector} from './PerfInspector'
 import {PerfProvider} from './PerfProvider'

src/plugin-perf/index.ts

@@ -1,7 +1,7 @@
-import {WorkshopMsg} from '@sanity/ui-workshop'
+import type {WorkshopMsg} from '@sanity/ui-workshop'
 
-import {PerfMsg} from './msg'
-import {PerfState} from './types'
+import type {PerfMsg} from './msg'
+import type {PerfState} from './types'
 
 /** @internal */
 export function perfReducer(state: PerfState, msg: PerfMsg | WorkshopMsg): PerfState {