variablelab/theatre
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Style tweaks

Browse source
This commit is contained in:
Aria Minaei 2021-07-23 14:04:01 +02:00
parent 2a773b4100
commit da230fbacc
12 changed files with 201 additions and 962 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -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",

2
packages/dataverse-react/package.json
View file

@ -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"

2
packages/dataverse/package.json
View file

@ -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"

13
packages/playground/package.json
View file

@ -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"
}
}

6
packages/plugin-r3f/package.json
View file

@ -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"
}
}

2
theatre/package.json
View file

@ -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",

22
theatre/studio/src/panels/ObjectEditorPanel/propEditors/CompoundPropEditor.tsx
View file

@ -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;

20
theatre/studio/src/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor.tsx
View file

@ -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;

48
theatre/studio/src/panels/OutlinePanel/BaseItem.tsx
View file

@ -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;
}
`

44
theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx
View file

@ -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<

2
theatre/studio/src/uiComponents/toolbar/ToolbarSwitchSelect.tsx
View file

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

1000
yarn.lock
View file

File diff suppressed because it is too large Load diff