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

Update selection colors (#200)

Browse source
This commit is contained in:
Elliot 2022-06-07 11:14:14 -04:00 committed by GitHub
parent fe12216ac8
commit 3b3a1b1d8a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 14 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregateKeyframeEditor/AggregateKeyframeVisualDot.tsx
View file

@ -55,7 +55,7 @@ export function AggregateKeyframeVisualDot(props: {
type IDotThemeValues = { type IDotThemeValues = {
isSelected: AggregateKeyframePositionIsSelected | undefined isSelected: AggregateKeyframePositionIsSelected | undefined
} }
const SELECTED_COLOR = '#b8e4e2' const SELECTED_COLOR = '#F2C95C'
const DEFAULT_PRIMARY_COLOR = '#40AAA4' const DEFAULT_PRIMARY_COLOR = '#40AAA4'
const DEFAULT_SECONDARY_COLOR = '#45747C' const DEFAULT_SECONDARY_COLOR = '#45747C'
const selectionColorAll = (theme: IDotThemeValues) => const selectionColorAll = (theme: IDotThemeValues) =>

4
theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/DeterminePropEditorForSingleKeyframe.tsx
View file

@ -45,8 +45,8 @@ const SingleKeyframePropLabel = styled.span`
/** /**
* Given a propConfig, this function gives the corresponding prop editor for * Given a propConfig, this function gives the corresponding prop editor for
* use in the dope sheet inline prop editor on a keyframe. * use in the dope sheet inline prop editor on a keyframe.
* {@link DetailDeterminePropEditor} does the same thing for the details panel. The main difference * {@link DeterminePropEditorForDetail} does the same thing for the details panel. The main difference
* between this function and {@link DetailDeterminePropEditor} is that this * between this function and {@link DeterminePropEditorForDetail} is that this
* one shows prop editors *without* keyframe navigation controls (that look * one shows prop editors *without* keyframe navigation controls (that look
* like `< ・ >`). * like `< ・ >`).
* *

5
theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/SingleKeyframeDot.tsx
View file

@ -1,4 +1,3 @@
import {lighten} from 'polished'
import React, {useMemo, useRef} from 'react' import React, {useMemo, useRef} from 'react'
import styled from 'styled-components' import styled from 'styled-components'
import last from 'lodash-es/last' import last from 'lodash-es/last'
@ -30,9 +29,7 @@ const DOT_HOVER_SIZE_PX = DOT_SIZE_PX + 5
const dotTheme = { const dotTheme = {
normalColor: '#40AAA4', normalColor: '#40AAA4',
get selectedColor() { selectedColor: '#F2C95C',
return lighten(0.35, dotTheme.normalColor)
},
} }
/** The keyframe diamond ◆ */ /** The keyframe diamond ◆ */

18
theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/keyframeRowUI/ConnectorLine.tsx
View file

@ -1,4 +1,4 @@
import {lighten} from 'polished' import {lighten, saturate} from 'polished'
import React from 'react' import React from 'react'
import styled from 'styled-components' import styled from 'styled-components'
import {DOT_SIZE_PX} from '@theatre/studio/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/SingleKeyframeDot' import {DOT_SIZE_PX} from '@theatre/studio/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/SingleKeyframeDot'
@ -13,18 +13,20 @@ export type IConnectorThemeValues = {
export const CONNECTOR_THEME = { export const CONNECTOR_THEME = {
normalColor: `#365b59`, // (greenish-blueish)ish normalColor: `#365b59`, // (greenish-blueish)ish
popoverOpenColor: `#817720`, // orangey yellowish selectedColor: `#8A7842`,
barColor: (values: IConnectorThemeValues) => { barColor: (values: IConnectorThemeValues) => {
const base = values.isPopoverOpen const base = values.isSelected
? CONNECTOR_THEME.popoverOpenColor ? CONNECTOR_THEME.selectedColor
: CONNECTOR_THEME.normalColor : CONNECTOR_THEME.normalColor
return values.isSelected ? lighten(0.2, base) : base return values.isPopoverOpen ? saturate(0.2, lighten(0.2, base)) : base
}, },
hoverColor: (values: IConnectorThemeValues) => { hoverColor: (values: IConnectorThemeValues) => {
const base = values.isPopoverOpen const base = values.isSelected
? CONNECTOR_THEME.popoverOpenColor ? CONNECTOR_THEME.selectedColor
: CONNECTOR_THEME.normalColor : CONNECTOR_THEME.normalColor
return values.isSelected ? lighten(0.4, base) : lighten(0.1, base) return values.isPopoverOpen
? saturate(0.2, lighten(0.2, base))
: saturate(0.1, lighten(0.1, base))
}, },
} }