Finished switching to styled-components in r3f

packages/plugin-r3f/package.json

@@ -43,7 +43,6 @@
     "@theatre/core": "workspace:*",
     "@theatre/studio": "workspace:*",
     "lodash-es": "^4.17.21",
-    "prism-react-renderer": "1.2.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-icons": "^4.2.0",

packages/plugin-r3f/src/components/Editor.tsx

@@ -6,7 +6,6 @@ import {useEditorStore} from '../store'
 import {OrbitControls} from '@react-three/drei'
 import shallow from 'zustand/shallow'
 import root from 'react-shadow/styled-components'
-import styles from '../bundle.css.txt'
 import UI from './UI'
 import ProxyManager from './ProxyManager'
 import studio from '@theatre/studio'
@@ -131,7 +130,6 @@ const Editor: VFC = () => {
           </>
         ) : null}
       </Wrapper>
-      <style type="text/css">{styles}</style>
     </root.div>
   )
 }

packages/plugin-r3f/src/components/ReferenceWindow.tsx

@@ -4,11 +4,18 @@ import {useEditorStore} from '../store'
 import shallow from 'zustand/shallow'
 import type {WebGLRenderer} from 'three'
 import useMeasure from 'react-use-measure'
+import styled from 'styled-components'
 
 interface ReferenceWindowProps {
   height: number
 }
 
+const Container = styled.div`
+  box-shadow: 0 25px 50px -12px gray;
+  overflow: hidden;
+  border-radius: 0.25rem;
+`
+
 const ReferenceWindow: VFC<ReferenceWindowProps> = ({height}) => {
   const canvasRef = useRef<HTMLCanvasElement>(null)
 
@@ -52,7 +59,7 @@ const ReferenceWindow: VFC<ReferenceWindowProps> = ({height}) => {
   }, [gl, height])
 
   return gl?.domElement ? (
-    <div className="rounded overflow-hidden shadow-2xl">
+    <Container>
       <canvas
         ref={canvasRef}
         width={
@@ -62,7 +69,7 @@ const ReferenceWindow: VFC<ReferenceWindowProps> = ({height}) => {
         }
         height={height}
       />
-    </div>
+    </Container>
   ) : null
 }
 

packages/plugin-r3f/src/components/elements/CompactModeSelect.tsx

@@ -13,7 +13,44 @@ interface OptionButtonProps<Option> {
   onClick: () => void
 }
 
-// const Ro = styled(TooltipReference)``
+const _TooltipRef = styled(TooltipReference)<{selected: boolean}>`
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  width: auto;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 600;
+  height: 1.75rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  border: 0 transparent;
+
+  &:first-child {
+    border-top-left-radius: 0.25rem;
+    border-bottom-left-radius: 0.25rem;
+  }
+
+  &:last-child {
+    border-top-right-radius: 0.25rem;
+    border-bottom-right-radius: 0.25rem;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  color: ${({selected}) => (selected ? 'white' : 'rgba(55, 65, 81, 1)')};
+  background-color: ${({selected}) =>
+    selected ? 'rgba(6, 95, 70, 1)' : 'rgba(243, 244, 246, 1);'};
+
+  &:hover {
+    background-color: ${({selected}) =>
+      selected ? 'rgba(6, 78, 59, 1)' : 'rgba(229, 231, 235, 1);'};
+  }
+`
 
 function OptionButton<Option>({
   value,
@@ -25,19 +62,15 @@ function OptionButton<Option>({
   const tooltip = useTooltipState()
   return (
     <>
-      <TooltipReference
+      <_TooltipRef
         {...tooltip}
-        as={Button}
+        forwardedAs={Button}
-        className={`flex relative items-center justify-center align-middle w-auto text-sm font-semibold h-7 px-2 first:rounded-l last:rounded-r focus:outline-none focus:ring focus:ring-blue-300 focus:ring-inset ${
+        selected={option === value}
-          option === value
-            ? 'bg-green-800 hover:bg-green-900 text-white'
-            : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
-        }`}
         aria-label={label}
         onClick={onClick}
       >
         {icon}
-      </TooltipReference>
+      </_TooltipRef>
       <Tooltip {...tooltip}>{label}</Tooltip>
     </>
   )

packages/plugin-r3f/src/components/elements/IconButton.tsx

@@ -4,27 +4,63 @@ import type {ButtonProps} from 'reakit'
 import {Button} from 'reakit'
 import type {IconType} from 'react-icons'
 import {Tooltip, TooltipReference, useTooltipState} from './Tooltip'
+import styled from 'styled-components'
 
 export interface IconButtonProps extends Exclude<ButtonProps, 'children'> {
   icon: ReactElement<IconType>
   label: string
 }
 
+const _TooltipRef = styled(TooltipReference)`
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  width: auto;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 600;
+  height: 1.75rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+
+  &:first-child {
+    border-top-left-radius: 0.25rem;
+    border-bottom-left-radius: 0.25rem;
+  }
+
+  &:last-child {
+    border-top-right-radius: 0.25rem;
+    border-bottom-right-radius: 0.25rem;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  color: rgba(55, 65, 81, 1);
+  background-color: rgba(243, 244, 246, 1);
+
+  &:hover {
+    background-color: rgba(229, 231, 235, 1);
+  }
+
+  border: 0 transparent;
+`
 const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
   ({label, icon, className, ...props}, ref) => {
     const tooltip = useTooltipState()
     return (
       <>
-        <TooltipReference
+        <_TooltipRef
-          ref={ref}
           {...props}
           {...tooltip}
-          as={Button}
+          forwardedAs={Button}
-          className={`${className} flex relative items-center justify-center align-middle w-auto text-sm font-semibold h-7 px-2 first:rounded-l last:rounded-r bg-gray-100 text-gray-700 hover:bg-gray-200 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-inset`}
           aria-label={label}
         >
           {icon}
-        </TooltipReference>
+        </_TooltipRef>
         <Tooltip {...tooltip}>{label}</Tooltip>
       </>
     )

packages/plugin-r3f/src/components/elements/Tooltip.tsx

@@ -3,15 +3,24 @@ import React from 'react'
 import {Tooltip as TooltipImpl, TooltipReference, useTooltipState} from 'reakit'
 
 import type {TooltipProps} from 'reakit'
+import styled from 'styled-components'
 
 export {TooltipReference, useTooltipState}
 
+const Container = styled(TooltipImpl)`
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  border-radius: 0.125rem;
+  background-color: rgba(55, 65, 81, 1);
+  color: white;
+  pointer-events: none;
+`
+
 export const Tooltip: VFC<TooltipProps> = ({className, ...props}) => (
-  <TooltipImpl
+  <Container {...props} className={className as string} />
-    // @ts-ignore
-    {...props}
-    className={
-      `${className} px-2 py-1  text-white bg-gray-700 rounded-sm text-sm pointer-events-none shadow-md` as string
-    }
-  />
 )

packages/plugin-r3f/src/styles.css

@@ -1,26 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  /*
-    Shadow dom base styles
-    ========
-    */
-
-  #react-three-editable-editor-root {
-    -moz-tab-size: 4;
-    tab-size: 4;
-    line-height: 1.15; /* 1 */
-    -webkit-text-size-adjust: 100%; /* 2 */
-    margin: 0;
-    font-family: system-ui, -apple-system,
-      /* Firefox supports this but not yet `system-ui` */ 'Segoe UI', Roboto,
-      Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
-  }
-
-  canvas {
-    outline: none
-  }
-}
-

yarn.lock

@@ -3804,7 +3804,6 @@ __metadata:
     "@types/react": ^17.0.9
     "@types/styled-components": ^5.1.9
     lodash-es: ^4.17.21
-    prism-react-renderer: 1.2.1
     react: ^17.0.2
     react-dom: ^17.0.2
     react-icons: ^4.2.0
@@ -14880,15 +14879,6 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"prism-react-renderer@npm:1.2.1":
-  version: 1.2.1
-  resolution: "prism-react-renderer@npm:1.2.1"
-  peerDependencies:
-    react: ">=0.14.9"
-  checksum: b27670bd96e4320075f9a2932d440b3025f9ce1ff64ddd8d8e71867701aabd6c9d2914d5deecb7bef7e92ed59baaef538a31559ca71c76efee3711a064f3e8ff
-  languageName: node
-  linkType: hard
-
 "private@npm:^0.1.8":
   version: 0.1.8
   resolution: "private@npm:0.1.8"