diff --git a/package.json b/package.json
index eced955..2f4df8f 100644
--- a/package.json
+++ b/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",
diff --git a/packages/dataverse-react/package.json b/packages/dataverse-react/package.json
index 8e2a2d2..8b293d1 100644
--- a/packages/dataverse-react/package.json
+++ b/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"
diff --git a/packages/dataverse/package.json b/packages/dataverse/package.json
index ca756b8..21388e9 100644
--- a/packages/dataverse/package.json
+++ b/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"
diff --git a/packages/playground/package.json b/packages/playground/package.json
index ebdd2fd..bc43005 100644
--- a/packages/playground/package.json
+++ b/packages/playground/package.json
@@ -13,8 +13,8 @@
"build": "tsc --build ./tsconfig.json"
},
"devDependencies": {
- "@react-three/drei": "^5.3.1",
- "@react-three/fiber": "^6.2.2",
+ "@react-three/drei": "^7.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"
}
}
diff --git a/packages/plugin-r3f/package.json b/packages/plugin-r3f/package.json
index b0b2b92..0f62e2d 100644
--- a/packages/plugin-r3f/package.json
+++ b/packages/plugin-r3f/package.json
@@ -38,8 +38,8 @@
"typescript": "^4.3.2"
},
"dependencies": {
- "@react-three/drei": "^5.3.1",
- "@react-three/fiber": "^6.2.2",
+ "@react-three/drei": "^7.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"
}
}
diff --git a/theatre/package.json b/theatre/package.json
index 8c36ad4..4deaade 100644
--- a/theatre/package.json
+++ b/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",
diff --git a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/CompoundPropEditor.tsx b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/CompoundPropEditor.tsx
index 1c5f1e8..1efd1a4 100644
--- a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/CompoundPropEditor.tsx
+++ b/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;
diff --git a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor.tsx b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor.tsx
index f8291e1..860cd6b 100644
--- a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor.tsx
+++ b/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 {
- indentationFormula,
- rowBg,
-} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/CompoundPropEditor'
+import {transparentize} from 'polished'
+
+export const indentationFormula = `calc(var(--left-pad) + var(--depth) * var(--step))`
+
+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;
diff --git a/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx b/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx
index 962a955..6c6ecb7 100644
--- a/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx
+++ b/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;
- --item-border-color: ${() => lighten(0.05, '#393d42b8')};
- color: ${() => transparentize(0.25, 'white')};
+ color: ${baseFontColor};
+ --item-bg: ${baseBg};
+ --item-border-color: ${baseBorderColor};
&:hover {
- color: white;
+ color: ${opacify(1, baseFontColor)};
- --item-bg: ${() => lighten(0.1, '#393d42b8')};
- --item-border-color: ${() => lighten(0.45, '#393d42b8')};
+ --item-bg: ${() => darken(0.07, baseBg)};
+ --item-border-color: ${opacify(0.1, baseBorderColor)};
}
&.selected {
- color: white;
+ color: ${opacify(1, baseFontColor)};
- --item-bg: ${() => lighten(0.2, '#393d42b8')};
- --item-border-color: ${() => lighten(0.45, '#393d42b8')};
+ --item-bg: ${() => darken(0.15, baseBg)};
+ --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-border-color: ${() => lighten(0.1, '#393d42b8')};
+ --item-bg: ${() => darken(0.05, baseBg)};
+ --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;
}
`
diff --git a/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx b/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx
index 90c4fc9..3bbf617 100644
--- a/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx
+++ b/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: white;
- border-color: #4f5661;
+ color: ${opacify(1, baseFontColor)};
+
+ --item-bg: ${() => darken(0.07, baseBg)};
+ --item-border-color: ${opacify(0.1, baseBorderColor)};
}
&.selected {
- background-color: #1a1d23;
- color: white;
- &:hover {
- border-color: #272a2d;
- }
+ color: ${opacify(1, baseFontColor)};
+
+ --item-bg: ${() => darken(0.15, baseBg)};
+ --item-border-color: ${opacify(0, baseBorderColor)};
}
- color: #c0c0c0;
- background-color: #222427;
- border: 1px solid #272a2d;
- border-radius: 3px;
- box-shadow: 1px 1px 0px #0000001c;
+ &:before {
+ border: 1px solid var(--item-border-color);
+ position: absolute;
+ 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);
+ }
+
+ border: 0;
`
const ToolbarIconButton: React.FC<
diff --git a/theatre/studio/src/uiComponents/toolbar/ToolbarSwitchSelect.tsx b/theatre/studio/src/uiComponents/toolbar/ToolbarSwitchSelect.tsx
index 3061b62..e9c9ac3 100644
--- a/theatre/studio/src/uiComponents/toolbar/ToolbarSwitchSelect.tsx
+++ b/theatre/studio/src/uiComponents/toolbar/ToolbarSwitchSelect.tsx
@@ -50,7 +50,7 @@ interface Props