fix: replace inline styles

Author: stipsan

src/core/WorkshopCanvas.tsx

@@ -1,8 +1,14 @@
 import {Card, Container, Flex, Heading, Spinner, Stack, Text} from '@sanity/ui'
-import type {Display} from '@sanity/ui/css'
-import {memo, useMemo, useState} from 'react'
+import {assignInlineVars} from '@vanilla-extract/dynamic'
+import {memo, useState} from 'react'
 
-import {iframe} from '#styles'
+import {
+  iframe,
+  iframeContainer,
+  viewportMaxHeight,
+  viewportMaxWidth,
+  zoom as zoomVar,
+} from '#styles'
 
 import {VIEWPORT_OPTIONS} from './constants'
 import {buildFrameUrl} from './helpers'
@@ -23,27 +29,8 @@ export const WorkshopCanvas = memo(function WorkshopCanvas(props: {
     buildFrameUrl({baseUrl: frameUrl, path, payload, scheme, viewport, zoom}),
   )
 
-  const containerStyle = useMemo(
-    () => ({
-      maxWidth: viewportW === 'auto' ? undefined : `${(viewportW || 1) * zoom}px`,
-      maxHeight: viewportH ? `${(viewportH || 1) * zoom}px` : undefined,
-    }),
-    [viewportW, viewportH, zoom],
-  )
-
-  const display = useMemo<Display>(() => (hidden ? 'none' : 'block'), [hidden])
-
-  const frameStyle = useMemo(
-    () => ({
-      transform: `scale(${zoom})`,
-      width: `${100 / zoom}%`,
-      height: `${100 / zoom}%`,
-    }),
-    [zoom],
-  )
-
   return (
-    <Card display={display} flex={1} overflow="hidden" tone="transparent">
+    <Card display={hidden ? 'none' : 'block'} flex={1} overflow="hidden" tone="transparent">
       <Flex align="center" height="fill" justify="center" sizing="border">
         {path === '/' && (
           <Container width={0}>
@@ -59,13 +46,18 @@ export const WorkshopCanvas = memo(function WorkshopCanvas(props: {
         {!frameReady && path !== '/' && <Spinner muted />}
 
         <Container
+          className={iframeContainer}
           height="fill"
           hidden={!frameReady || path === '/'}
-          style={containerStyle}
+          style={assignInlineVars({
+            [viewportMaxWidth]: viewportW === 'auto' ? undefined : `${viewportW}px`,
+            [viewportMaxHeight]: viewportH ? `${viewportH}px` : undefined,
+            [zoomVar]: `${zoom}`,
+          })}
           width="auto"
         >
           <Card height="fill" shadow={1}>
-            <iframe className={iframe} ref={frameRef} src={initialFrameUrl} style={frameStyle} />
+            <iframe className={iframe} ref={frameRef} src={initialFrameUrl} />
           </Card>
         </Container>
       </Flex>

src/core/inspector/InspectorHeader.tsx

@@ -1,5 +1,7 @@
 import {Card, Layer, Tab, TabList} from '@sanity/ui'
-import {CSSProperties, memo, useCallback, useMemo} from 'react'
+import {memo, useCallback} from 'react'
+
+import {inspectorHeader} from '#styles'
 
 import {InspectorTab} from './types'
 
@@ -10,10 +12,8 @@ export const InspectorHeader = memo(function InspectorHeader(props: {
 }) {
   const {currentTabId, onTabChange, tabs} = props
 
-  const layerStyle: CSSProperties = useMemo(() => ({flex: 'none', position: 'sticky', top: 0}), [])
-
   return (
-    <Layer style={layerStyle}>
+    <Layer className={inspectorHeader} flex="none" position="sticky">
       <Card padding={2} shadow={1}>
         <TabList gap={1}>
           {tabs.map((tab) => (

src/core/navbar/NavbarBreadcrumbs.tsx

@@ -1,6 +1,8 @@
 import {Breadcrumbs, Text} from '@sanity/ui'
 import {memo, useCallback} from 'react'
 
+import {forceColorInherit} from '#styles'
+
 import {useWorkshop} from '../useWorkshop'
 
 /** @internal */
@@ -43,7 +45,7 @@ const NavbarBreadcrumbsView = memo(function NavbarBreadcrumbsView(props: {
       gap={2}
     >
       <Text size={[2, 2, 1]} weight="bold">
-        <a href="/" onClick={onHomeClick} style={{color: 'inherit'}}>
+        <a className={forceColorInherit} href="/" onClick={onHomeClick}>
           {title}
         </a>
       </Text>

src/core/navbar/WorkshopNavbar.tsx

@@ -2,6 +2,8 @@ import {ControlsIcon, MenuIcon} from '@sanity/icons'
 import {Box, Button, Card, Flex, Inline, Text, useMediaIndex} from '@sanity/ui'
 import {memo} from 'react'
 
+import {force0LineHeight, forceMinWidth250} from '#styles'
+
 import {useWorkshop} from '../useWorkshop'
 import {NavbarBreadcrumbs} from './NavbarBreadcrumbs'
 import {OpenCanvasButton} from './OpenCanvasButton'
@@ -21,7 +23,7 @@ export const WorkshopNavbar = memo(function WorkshopNavbar(props: {
   const {story, title} = useWorkshop()
 
   return (
-    <Card borderBottom flex="none" padding={2} style={{lineHeight: 0}}>
+    <Card className={force0LineHeight} borderBottom flex="none" padding={2}>
       <Flex gap={1}>
         <Box display={['block', 'block', 'none']} flex="none">
           <Button
@@ -36,11 +38,11 @@ export const WorkshopNavbar = memo(function WorkshopNavbar(props: {
         </Box>
 
         <Flex
+          className={forceMinWidth250}
           flex={1}
           justify={['center', 'center', 'flex-start']}
           padding={2}
           sizing="border"
-          style={{minWidth: 250}}
         >
           {mediaIndex < 2 && <Text weight="bold">{story?.title || title}</Text>}
           {mediaIndex >= 2 && <NavbarBreadcrumbs />}

src/core/navigator/WorkshopNavigator.tsx

@@ -4,7 +4,7 @@ import type {Display, ResponsiveProp} from '@sanity/ui/css'
 import {FontTextSize} from '@sanity/ui/theme'
 import {memo, useCallback, useMemo, useState} from 'react'
 
-import {workshopNavigator} from '#styles'
+import {force0LineHeight, workshopNavigator} from '#styles'
 
 import {WorkshopScope, WorkshopStory} from '../config'
 import {EMPTY_ARRAY} from '../constants'
@@ -14,8 +14,6 @@ import {SearchResults} from './SearchResults'
 import {StoryTree} from './StoryTree'
 import {MenuCollection, MenuList, MenuScope} from './types'
 
-const flexNoneStyle: React.CSSProperties = {flex: 'none'}
-const lineHeightNoneStyle: React.CSSProperties = {lineHeight: 0}
 const textInputFontSize: ResponsiveProp<FontTextSize> = [2, 2, 1]
 
 /** @internal */
@@ -107,8 +105,8 @@ const NavigatorView = memo(function NavigatorView(props: {
       overflow={['hidden', 'hidden', 'auto']}
     >
       <Flex direction="column" height="fill">
-        <Layer style={flexNoneStyle}>
-          <Card padding={2} shadow={1} style={lineHeightNoneStyle}>
+        <Layer flex="none">
+          <Card className={force0LineHeight} padding={2} shadow={1}>
             <TextInput
               border={false}
               clearButton={Boolean(query)}

src/core/plugins/props/components/booleanProp.tsx

@@ -1,6 +1,8 @@
 import {Box, Checkbox, Flex, Text} from '@sanity/ui'
 import {memo} from 'react'
 
+import {force0LineHeight} from '#styles'
+
 import {BooleanPropSchema} from '../types'
 import {useProps} from '../useProps'
 
@@ -14,7 +16,7 @@ export const BooleanProp = memo(function BooleanProp(props: {
 
   return (
     <Flex as="label" padding={3}>
-      <Box marginRight={2} style={{lineHeight: 0}}>
+      <Box className={force0LineHeight} marginRight={2}>
         <Checkbox
           checked={value || false}
           onChange={(event) => setPropValue(schema.name, event.currentTarget.checked)}

src/plugin-perf/PerfInspector.tsx

@@ -2,6 +2,8 @@ import {PlayIcon, TrashIcon} from '@sanity/icons'
 import {Box, Button, Card, Flex, Stack, Text} from '@sanity/ui'
 import {memo} from 'react'
 
+import {force0LineHeight} from '#styles'
+
 import {usePerf} from './hooks'
 
 /** @internal */
@@ -26,7 +28,7 @@ export const PerfInspector = memo(function PerfInspector(): React.ReactNode {
         const testResults = results.filter((r) => r.name === detail.name)
 
         return (
-          <Card border key={detail.name} overflow="hidden" radius={2} style={{lineHeight: 0}}>
+          <Card className={force0LineHeight} border key={detail.name} overflow="hidden" radius={2}>
             <Flex>
               <Stack flex={1} padding={2} gap={2}>
                 <Text size={1} weight="semibold">