From 3b3a1b1d8a922f8fdb88b1c179ba6a9d4768e903 Mon Sep 17 00:00:00 2001 From: Elliot Date: Tue, 7 Jun 2022 11:14:14 -0400 Subject: [PATCH] Update selection colors (#200) --- .../AggregateKeyframeVisualDot.tsx | 2 +- .../DeterminePropEditorForSingleKeyframe.tsx | 4 ++-- .../KeyframeEditor/SingleKeyframeDot.tsx | 5 +---- .../Right/keyframeRowUI/ConnectorLine.tsx | 18 ++++++++++-------- 4 files changed, 14 insertions(+), 15 deletions(-) diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregateKeyframeEditor/AggregateKeyframeVisualDot.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregateKeyframeEditor/AggregateKeyframeVisualDot.tsx index 9636647..1278745 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregateKeyframeEditor/AggregateKeyframeVisualDot.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregateKeyframeEditor/AggregateKeyframeVisualDot.tsx @@ -55,7 +55,7 @@ export function AggregateKeyframeVisualDot(props: { type IDotThemeValues = { isSelected: AggregateKeyframePositionIsSelected | undefined } -const SELECTED_COLOR = '#b8e4e2' +const SELECTED_COLOR = '#F2C95C' const DEFAULT_PRIMARY_COLOR = '#40AAA4' const DEFAULT_SECONDARY_COLOR = '#45747C' const selectionColorAll = (theme: IDotThemeValues) => diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/DeterminePropEditorForSingleKeyframe.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/DeterminePropEditorForSingleKeyframe.tsx index 3843c22..3c7b928 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/DeterminePropEditorForSingleKeyframe.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/DeterminePropEditorForSingleKeyframe.tsx @@ -45,8 +45,8 @@ const SingleKeyframePropLabel = styled.span` /** * Given a propConfig, this function gives the corresponding prop editor for * use in the dope sheet inline prop editor on a keyframe. - * {@link DetailDeterminePropEditor} does the same thing for the details panel. The main difference - * between this function and {@link DetailDeterminePropEditor} is that this + * {@link DeterminePropEditorForDetail} does the same thing for the details panel. The main difference + * between this function and {@link DeterminePropEditorForDetail} is that this * one shows prop editors *without* keyframe navigation controls (that look * like `< ・ >`). * diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/SingleKeyframeDot.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/SingleKeyframeDot.tsx index ecf4a13..e472e08 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/SingleKeyframeDot.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/SingleKeyframeDot.tsx @@ -1,4 +1,3 @@ -import {lighten} from 'polished' import React, {useMemo, useRef} from 'react' import styled from 'styled-components' import last from 'lodash-es/last' @@ -30,9 +29,7 @@ const DOT_HOVER_SIZE_PX = DOT_SIZE_PX + 5 const dotTheme = { normalColor: '#40AAA4', - get selectedColor() { - return lighten(0.35, dotTheme.normalColor) - }, + selectedColor: '#F2C95C', } /** The keyframe diamond ◆ */ diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/keyframeRowUI/ConnectorLine.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/keyframeRowUI/ConnectorLine.tsx index 457725a..ac30dd2 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/keyframeRowUI/ConnectorLine.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/keyframeRowUI/ConnectorLine.tsx @@ -1,4 +1,4 @@ -import {lighten} from 'polished' +import {lighten, saturate} from 'polished' import React from 'react' import styled from 'styled-components' 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 = { normalColor: `#365b59`, // (greenish-blueish)ish - popoverOpenColor: `#817720`, // orangey yellowish + selectedColor: `#8A7842`, barColor: (values: IConnectorThemeValues) => { - const base = values.isPopoverOpen - ? CONNECTOR_THEME.popoverOpenColor + const base = values.isSelected + ? CONNECTOR_THEME.selectedColor : 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) => { - const base = values.isPopoverOpen - ? CONNECTOR_THEME.popoverOpenColor + const base = values.isSelected + ? CONNECTOR_THEME.selectedColor : 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)) }, }