Style tweaks

package.json

@@ -27,7 +27,7 @@
     "@babel/preset-typescript": "^7.13.0",
     "@typescript-eslint/eslint-plugin": "^4.26.0",
     "@typescript-eslint/parser": "^4.26.0",
-    "esbuild": "^0.12.5",
+    "esbuild": "^0.12.15",
     "esbuild-jest": "^0.5.0",
     "eslint": "^7.27.0",
     "eslint-plugin-jsx-a11y": "^6.4.1",

packages/dataverse-react/package.json

@@ -39,7 +39,7 @@
     "@types/node": "^15.6.2",
     "@types/react": "^17.0.9",
     "@types/react-dom": "^17.0.6",
-    "esbuild": "^0.12.5",
+    "esbuild": "^0.12.15",
     "esbuild-register": "^2.5.0",
     "npm-run-all": "^4.1.5",
     "typescript": "^4.3.2"

packages/dataverse/package.json

@@ -37,7 +37,7 @@
     "@types/jest": "^26.0.23",
     "@types/lodash-es": "^4.17.4",
     "@types/node": "^15.6.2",
-    "esbuild": "^0.12.5",
+    "esbuild": "^0.12.15",
     "esbuild-register": "^2.5.0",
     "npm-run-all": "^4.1.5",
     "typescript": "^4.3.2"

packages/playground/package.json

@@ -13,8 +13,8 @@
     "build": "tsc --build ./tsconfig.json"
   },
   "devDependencies": {
-    "@react-three/drei": "^5.3.1",
+    "@react-three/drei": "^7.2.2",
-    "@react-three/fiber": "^6.2.2",
+    "@react-three/fiber": "^7.0.6",
     "@theatre/core": "workspace:*",
     "@theatre/plugin-r3f": "workspace:*",
     "@theatre/studio": "workspace:*",
@@ -22,14 +22,9 @@
     "@types/lodash-es": "^4.17.4",
     "@types/node": "^15.6.2",
     "@types/react": "^17.0.9",
-    "esbuild": "^0.12.5",
+    "esbuild": "^0.12.15",
     "esbuild-register": "^2.5.0",
-    "three": "^0.129.0",
+    "three": "^0.130.1",
     "typescript": "^4.3.2"
-  },
-  "dependencies": {
-    "autoprefixer": "^10.2.6",
-    "esbuild-plugin-postcss2": "^0.0.9",
-    "tailwindcss": "^2.1.2"
   }
 }

packages/plugin-r3f/package.json

@@ -38,8 +38,8 @@
     "typescript": "^4.3.2"
   },
   "dependencies": {
-    "@react-three/drei": "^5.3.1",
+    "@react-three/drei": "^7.2.2",
-    "@react-three/fiber": "^6.2.2",
+    "@react-three/fiber": "^7.0.6",
     "@theatre/core": "workspace:*",
     "@theatre/studio": "workspace:*",
     "lodash-es": "^4.17.21",
@@ -52,7 +52,7 @@
     "react-use-measure": "^2.0.4",
     "reakit": "^1.3.8",
     "styled-components": "^5.3.0",
-    "three": "^0.129.0",
+    "three": "^0.130.1",
     "zustand": "^3.5.1"
   }
 }

theatre/package.json

@@ -50,7 +50,7 @@
     "babel-register": "^6.26.0",
     "circular-dependency-plugin": "^5.2.2",
     "cross-env": "^7.0.3",
-    "esbuild": "^0.12.5",
+    "esbuild": "^0.12.15",
     "esbuild-loader": "^2.13.1",
     "esbuild-register": "^2.5.0",
     "exec-loader": "^4.0.0",

theatre/studio/src/panels/ObjectEditorPanel/propEditors/CompoundPropEditor.tsx

@@ -8,9 +8,13 @@ import {getPointerParts} from '@theatre/dataverse'
 import last from 'lodash-es/last'
 import {darken, transparentize} from 'polished'
 import React from 'react'
-import styled, {css} from 'styled-components'
+import styled from 'styled-components'
 import DeterminePropEditor from './DeterminePropEditor'
-import {propNameText} from './utils/SingleRowPropEditor'
+import {
+  indentationFormula,
+  propNameText,
+  rowBg,
+} from './utils/SingleRowPropEditor'
 import DefaultOrStaticValueIndicator from './utils/DefaultValueIndicator'
 
 const Container = styled.div`
@@ -18,18 +22,6 @@ const Container = styled.div`
   --left-pad: 18px;
 `
 
-export const rowBg = css`
-  &:after {
-    position: absolute;
-    display: block;
-    inset: 0px 0 1px calc(-2px + var(--left-pad) + var(--depth) * var(--step));
-    content: ' ';
-    z-index: -1;
-    background-color: #282b2f;
-    opacity: 0.95;
-  }
-`
-
 const Header = styled.div`
   height: 30px;
   /* padding-left: calc(var(--left-pad) + var(--depth) * var(--step)); */
@@ -41,8 +33,6 @@ const Header = styled.div`
   ${rowBg};
 `
 
-export const indentationFormula = `calc(var(--left-pad) + var(--depth) * var(--step))`
-
 const Padding = styled.div`
   padding-left: ${indentationFormula};
   display: flex;

theatre/studio/src/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor.tsx

@@ -8,10 +8,22 @@ import React from 'react'
 import type {useEditingToolsForPrimitiveProp} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/utils/useEditingToolsForPrimitiveProp'
 import {shadeToColor} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/utils/useEditingToolsForPrimitiveProp'
 import styled, {css} from 'styled-components'
-import {
+import {transparentize} from 'polished'
-  indentationFormula,
+
-  rowBg,
+export const indentationFormula = `calc(var(--left-pad) + var(--depth) * var(--step))`
-} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/CompoundPropEditor'
+
+export const rowBgColor = transparentize(0.05, '#282b2f')
+
+export const rowBg = css`
+  &:after {
+    position: absolute;
+    display: block;
+    inset: 0px 0 1px calc(-2px + var(--left-pad) + var(--depth) * var(--step));
+    content: ' ';
+    z-index: -1;
+    background-color: ${rowBgColor};
+  }
+`
 
 export const propNameText = css`
   font-weight: 300;

theatre/studio/src/panels/OutlinePanel/BaseItem.tsx

@@ -3,7 +3,8 @@ import React from 'react'
 import {GoChevronRight, DiHtml53DEffects} from 'react-icons/all'
 import styled, {css} from 'styled-components'
 import noop from '@theatre/shared/utils/noop'
-import {lighten, transparentize} from 'polished'
+import {transparentize, darken, opacify, lighten} from 'polished'
+import {rowBgColor} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor'
 
 export const Container = styled.li<{depth: number}>`
   --depth: ${(props) => props.depth};
@@ -14,37 +15,44 @@ export const Container = styled.li<{depth: number}>`
 
 export const BaseHeader = styled.div<{}>``
 
+const baseBg = lighten(0.05, rowBgColor)
+
+const baseFontColor = transparentize(0.25, 'white')
+const baseBorderColor = transparentize(0.88, 'white')
+
+export const outlinePanelTheme = {baseBg, baseFontColor, baseBorderColor}
+
 const Header = styled(BaseHeader)`
   padding-left: calc(4px + var(--depth) * 16px);
-  height: 22px;
+  height: 24px;
   box-sizing: border-box;
   display: flex;
   align-items: center;
   pointer-events: none;
 
-  --item-bg: #393d42b8;
+  color: ${baseFontColor};
-  --item-border-color: ${() => lighten(0.05, '#393d42b8')};
+  --item-bg: ${baseBg};
-  color: ${() => transparentize(0.25, 'white')};
+  --item-border-color: ${baseBorderColor};
 
   &:hover {
-    color: white;
+    color: ${opacify(1, baseFontColor)};
 
-    --item-bg: ${() => lighten(0.1, '#393d42b8')};
+    --item-bg: ${() => darken(0.07, baseBg)};
-    --item-border-color: ${() => lighten(0.45, '#393d42b8')};
+    --item-border-color: ${opacify(0.1, baseBorderColor)};
   }
 
   &.selected {
-    color: white;
+    color: ${opacify(1, baseFontColor)};
 
-    --item-bg: ${() => lighten(0.2, '#393d42b8')};
+    --item-bg: ${() => darken(0.15, baseBg)};
-    --item-border-color: ${() => lighten(0.45, '#393d42b8')};
+    --item-border-color: ${opacify(0.05, baseBorderColor)};
   }
 
   &.descendant-is-selected {
-    color: ${() => transparentize(0.15, 'white')};
+    color: ${opacify(0.1, baseFontColor)};
 
-    --item-bg: ${() => lighten(0.05, '#393d42b8')};
+    --item-bg: ${() => darken(0.05, baseBg)};
-    --item-border-color: ${() => lighten(0.1, '#393d42b8')};
+    --item-border-color: ${baseBorderColor};
   }
 `
 
@@ -62,19 +70,21 @@ const Head_Label = styled.span`
   pointer-events: auto;
   position: relative;
   display: block;
-  height: 15px;
+  height: 13px;
   background-color: var(--item-bg);
-  border-radius: 2px;
+  /* border-radius: 2px; */
 
   &:after {
     border: 1px solid var(--item-border-color);
     position: absolute;
-    inset: 0px;
+    inset: -1px;
     display: block;
     content: ' ';
     z-index: -1;
     pointer-events: none;
     border-radius: 2px;
+    box-sizing: border-box;
+    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
   }
 
   &:before {
@@ -98,7 +108,7 @@ const Head_IconContainer = styled.span`
   align-items: center;
   justify-content: center;
   position: relative;
-  opacity: 0.9;
+  opacity: 0.99;
 
   &:after {
     display: block;
@@ -107,7 +117,7 @@ const Head_IconContainer = styled.span`
     inset: 0px;
     z-index: -1;
     background-color: var(--item-bg);
-    opacity: 0.3;
+    opacity: 0.75;
     border-radius: 2px;
   }
 `

theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx

@@ -8,6 +8,10 @@ import {
 } from '@theatre/studio/uiComponents/Tooltip'
 import type {ButtonProps} from 'reakit'
 import {Button} from 'reakit'
+import {outlinePanelTheme} from '@theatre/studio/panels/OutlinePanel/BaseItem'
+import {darken, opacify} from 'polished'
+
+const {baseBg, baseBorderColor, baseFontColor} = outlinePanelTheme
 
 export const TheButton = styled(TooltipReference)`
   pointer-events: auto;
@@ -21,25 +25,39 @@ export const TheButton = styled(TooltipReference)`
   height: 28px;
   outline: none;
 
+  color: ${baseFontColor};
+  --item-bg: ${baseBg};
+  --item-border-color: ${baseBorderColor};
+  background-color: var(--item-bg);
+
   &:hover {
-    background-color: #1a1d23;
+    color: ${opacify(1, baseFontColor)};
-    color: white;
+
-    border-color: #4f5661;
+    --item-bg: ${() => darken(0.07, baseBg)};
+    --item-border-color: ${opacify(0.1, baseBorderColor)};
   }
 
   &.selected {
-    background-color: #1a1d23;
+    color: ${opacify(1, baseFontColor)};
-    color: white;
+
-    &:hover {
+    --item-bg: ${() => darken(0.15, baseBg)};
-      border-color: #272a2d;
+    --item-border-color: ${opacify(0, baseBorderColor)};
-    }
   }
 
-  color: #c0c0c0;
+  &:before {
-  background-color: #222427;
+    border: 1px solid var(--item-border-color);
-  border: 1px solid #272a2d;
+    position: absolute;
-  border-radius: 3px;
+    inset: -1px;
-  box-shadow: 1px 1px 0px #0000001c;
+    display: block;
+    content: ' ';
+    z-index: -1;
+    pointer-events: none;
+    border-radius: 2px;
+    box-sizing: border-box;
+    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
+  }
+
+  border: 0;
 `
 
 const ToolbarIconButton: React.FC<

theatre/studio/src/uiComponents/toolbar/ToolbarSwitchSelect.tsx

@@ -50,7 +50,7 @@ interface Props<Option> {
 
 const Container = styled(Group)`
   display: flex;
-  gap: 2px;
+  gap: 5px;
 `
 
 const ToolbarSwitchSelect = <Option extends string | number>({