From da230fbacc98f99976caba37e5a36f450c9ae66e Mon Sep 17 00:00:00 2001 From: Aria Minaei Date: Fri, 23 Jul 2021 14:04:01 +0200 Subject: [PATCH] Style tweaks --- package.json | 2 +- packages/dataverse-react/package.json | 2 +- packages/dataverse/package.json | 2 +- packages/playground/package.json | 13 +- packages/plugin-r3f/package.json | 6 +- theatre/package.json | 2 +- .../propEditors/CompoundPropEditor.tsx | 22 +- .../propEditors/utils/SingleRowPropEditor.tsx | 20 +- .../src/panels/OutlinePanel/BaseItem.tsx | 48 +- .../toolbar/ToolbarIconButton.tsx | 44 +- .../toolbar/ToolbarSwitchSelect.tsx | 2 +- yarn.lock | 1000 ++--------------- 12 files changed, 201 insertions(+), 962 deletions(-) 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