diff --git a/buildAndCopy.sh b/buildAndCopy.sh index a290967..e408087 100755 --- a/buildAndCopy.sh +++ b/buildAndCopy.sh @@ -3,8 +3,9 @@ PREVIOUS_DIR=$(pwd) DIR=${0:a:h} SOURCE="$DIR/packages/browser-bundles/dist" -DESTINATION="/Users/asuk/Documents/Variable Font Tool/msdf-theatre/bin/data/web/node_modules/@theatre/browser-bundles/dist" -# DESTINATION="jrkb@nature.fritz.box:/home/jrkb/openFrameworks/apps/celinesTypeGarden/msdf-theatre/bin/data/web/node_modules/@theatre/browser-bundles/dist" +DESTINATION="/Users/asuk/Documents/openFrameworks/apps/variableLab/msdf-theatre/bin/web/node_modules/@theatre/browser-bundles/dist" +# DESTINATION="/Users/asuk/Documents/Variable Font Tool/msdf-theatre/bin/web/node_modules/@theatre/browser-bundles/dist" +# DESTINATION="jrkb@nature.fritz.box:/home/jrkb/openFrameworks/apps/celinesTypeGarden/msdf-theatre/bin/web/node_modules/@theatre/browser-bundles/dist" cd $DIR yarn build diff --git a/packages/playground/src/home/PlaygroundHeader.tsx b/packages/playground/src/home/PlaygroundHeader.tsx index 3b1fcef..3a4d5d3 100644 --- a/packages/playground/src/home/PlaygroundHeader.tsx +++ b/packages/playground/src/home/PlaygroundHeader.tsx @@ -52,7 +52,7 @@ const HeaderLink = styled.a` /* identical to box height, or 169% */ /* White/White100 */ - color: #ffffff; + color: #000000; transition: color 0.2s ease-in; diff --git a/packages/r3f/src/extension/components/SnapshotEditor.tsx b/packages/r3f/src/extension/components/SnapshotEditor.tsx index ec842f6..0a39d50 100644 --- a/packages/r3f/src/extension/components/SnapshotEditor.tsx +++ b/packages/r3f/src/extension/components/SnapshotEditor.tsx @@ -131,7 +131,7 @@ const WaitForSceneInitMessage = styled.div<{active?: boolean}>` background: rgba(40, 43, 47, 0.8); @supports not (backdrop-filter: blur()) { - background-color: rgba(40, 43, 47, 0.95); + // background-color: rgba(40, 43, 47, 0.95); } ` diff --git a/theatre/core/src/sheets/TheatreSheet.ts b/theatre/core/src/sheets/TheatreSheet.ts index 09ac383..79fb5c3 100644 --- a/theatre/core/src/sheets/TheatreSheet.ts +++ b/theatre/core/src/sheets/TheatreSheet.ts @@ -166,20 +166,18 @@ export default class TheatreSheet implements ISheet { if (process.env.NODE_ENV !== 'production') { const prevConfig = weakMapOfUnsanitizedProps.get(existingObject) if (prevConfig) { - if (!deepEqual(config, prevConfig)) { - if (opts?.reconfigure === true) { - const sanitizedConfig = compound(config) - existingObject.template.reconfigure(sanitizedConfig) - weakMapOfUnsanitizedProps.set(existingObject, config) - return existingObject.publicApi as $IntentionalAny - } else { - throw new Error( - `You seem to have called sheet.object("${key}", config) twice, with different values for \`config\`. ` + - `This is disallowed because changing the config of an object on the fly would make it difficult to reason about.\n\n` + - `You can fix this by either re-using the existing object, or calling sheet.object("${key}", config) with the same config.\n\n` + - `If you mean to reconfigure the object's config, set \`{reconfigure: true}\` in sheet.object("${key}", config, {reconfigure: true})`, - ) - } + if (opts?.reconfigure === true) { + const sanitizedConfig = compound(config) + existingObject.template.reconfigure(sanitizedConfig) + weakMapOfUnsanitizedProps.set(existingObject, config) + return existingObject.publicApi as $IntentionalAny + } else if (!deepEqual(config, prevConfig)) { + throw new Error( + `You seem to have called sheet.object("${key}", config) twice, with different values for \`config\`. ` + + `This is disallowed because changing the config of an object on the fly would make it difficult to reason about.\n\n` + + `You can fix this by either re-using the existing object, or calling sheet.object("${key}", config) with the same config.\n\n` + + `If you mean to reconfigure the object's config, set \`{reconfigure: true}\` in sheet.object("${key}", config, {reconfigure: true})`, + ) } } } diff --git a/theatre/studio/src/css.tsx b/theatre/studio/src/css.tsx index 00f4af8..a56a9e6 100644 --- a/theatre/studio/src/css.tsx +++ b/theatre/studio/src/css.tsx @@ -25,13 +25,13 @@ export const pointerEventsAutoInNormalMode = css` export const theme = { panel: { - bg: `#0092FF77`, + bg: `#AAAAAA`, head: { title: { - color: `#0092FF`, + color: `#000000`, }, punctuation: { - color: `#0092FF`, + color: `#000000`, }, }, body: { diff --git a/theatre/studio/src/notify.tsx b/theatre/studio/src/notify.tsx index b94971f..3946d51 100644 --- a/theatre/studio/src/notify.tsx +++ b/theatre/studio/src/notify.tsx @@ -94,7 +94,7 @@ const NotificationContainer = styled.div` backdrop-filter: blur(14px); @supports not (backdrop-filter: blur()) { - background: rgba(40, 43, 47, 0.95); + // background: rgba(40, 43, 47, 0.95); } ` @@ -300,7 +300,7 @@ const Button = styled.button<{danger?: boolean}>` } @supports not (backdrop-filter: blur()) { - background: rgba(40, 43, 47, 0.95); + // background: rgba(40, 43, 47, 0.95); } ` diff --git a/theatre/studio/src/panels/BasePanel/ExtensionPaneWrapper.tsx b/theatre/studio/src/panels/BasePanel/ExtensionPaneWrapper.tsx index c10ab12..d4e5df5 100644 --- a/theatre/studio/src/panels/BasePanel/ExtensionPaneWrapper.tsx +++ b/theatre/studio/src/panels/BasePanel/ExtensionPaneWrapper.tsx @@ -64,7 +64,7 @@ const ClosePanelButton = styled.button` display: flex; align-items: center; justify-content: center; - border-radius: 2px; + border-radius: 0px; font-size: 11px; height: 10px; width: 18px; diff --git a/theatre/studio/src/panels/BasePanel/PanelWrapper.tsx b/theatre/studio/src/panels/BasePanel/PanelWrapper.tsx index 035e65f..350321d 100644 --- a/theatre/studio/src/panels/BasePanel/PanelWrapper.tsx +++ b/theatre/studio/src/panels/BasePanel/PanelWrapper.tsx @@ -8,7 +8,7 @@ const Container = styled.div` position: absolute; user-select: none; box-sizing: border-box; - font-family: 'OPS-Cubic'; + font-family: 'Tonka'; ${pointerEventsAutoInNormalMode}; /* box-shadow: 1px 2px 10px -5px black; */ diff --git a/theatre/studio/src/panels/BasePanel/common.tsx b/theatre/studio/src/panels/BasePanel/common.tsx index 7f7fd4c..d94acca 100644 --- a/theatre/studio/src/panels/BasePanel/common.tsx +++ b/theatre/studio/src/panels/BasePanel/common.tsx @@ -50,14 +50,15 @@ export const TitleBar = styled.div` align-items: center; padding: 0 10px; position: relative; - color: #ffffffb3; - border-bottom: 1px solid rgb(0 0 0 / 13%); - background-color: #0092ff; + color: black; + // background-color: #a5a5a5; + border-bottom: 1px dashed #91919177; font-size: 10px; font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; + background: #f2f2f2; ` // the minimum visible width or height when the panel is partially offscreen diff --git a/theatre/studio/src/panels/DetailPanel/DetailPanel.tsx b/theatre/studio/src/panels/DetailPanel/DetailPanel.tsx index 6953281..71040ec 100644 --- a/theatre/studio/src/panels/DetailPanel/DetailPanel.tsx +++ b/theatre/studio/src/panels/DetailPanel/DetailPanel.tsx @@ -12,7 +12,6 @@ import {isProject, isSheetObject} from '@theatre/shared/instanceTypes' import { panelZIndexes, TitleBar_Piece, - TitleBar_Punctuation, } from '@theatre/studio/panels/BasePanel/common' import {pointerEventsAutoInNormalMode} from '@theatre/studio/css' import ObjectDetails from './ObjectDetails' @@ -28,23 +27,19 @@ const headerHeight = `32px` const Container = styled.div<{pin: boolean}>` ${pointerEventsAutoInNormalMode}; - font-family: 'OPS-Cubic'; - text-transform: uppercase; - background-color: rgba(255, 255, 255, 1); - border: 2px solid rgba(0, 146, 255, 1); - border-radius: 15px; + font-family: 'Tonka'; + // text-transform: uppercase; + background: rgba(242, 242, 242, 0.9); + border-radius: 0px; color: black; position: fixed; - right: 8px; - top: 50px; + right: 0px; + top: 0px; // Temporary, see comment about CSS grid in SingleRowPropEditor. width: 280px; - height: fit-content; + height: 100vh; z-index: ${panelZIndexes.propsPanel}; - - box-shadow: 0 10px 10px rgba(0, 146, 255, 0.25), - 0 10px 10px rgba(0, 146, 255 0.15); - backdrop-filter: blur(14px); + backdrop-filter: blur(2px); display: ${({pin}) => (pin ? 'block' : 'none')}; @@ -53,13 +48,13 @@ const Container = styled.div<{pin: boolean}>` } @supports not (backdrop-filter: blur()) { - background: rgba(0, 146, 255 0.75); + background: rgba(242, 242, 242, 0.9); } ` const Title = styled.div` margin: 0 10px; - color: #0092ff; + color: #000000; font-weight: bold; font-size: 10px; user-select: none; @@ -73,18 +68,30 @@ const Header = styled.div` height: ${headerHeight}; display: flex; align-items: center; + border-bottom: 1px dashed #91919177; ` const Body = styled.div` ${pointerEventsAutoInNormalMode}; - max-height: calc(100vh - 100px); + max-height: calc(80vh - 100px); + height: inherit; + border-bottom: 1px dashed #91919177; overflow-y: scroll; &::-webkit-scrollbar { - display: none; + width: 6px; + } + &::-webkit-scrollbar-track { + background: #f1f1f1; + } + &::-webkit-scrollbar-thumb { + background: #c2c2c2; + } + &::-webkit-scrollbar-thumb:hover { + background: #888; } - scrollbar-width: none; - padding: 0; + scrollbar-width: 10px; + padding: 10px; user-select: none; /* Set the font-size for input values in the detail panel */ @@ -150,14 +157,14 @@ const DetailPanel: React.FC<{}> = (props) => { ${obj.address.objectKey}`} > - <TitleBar_Piece>{obj.sheet.address.sheetId} </TitleBar_Piece> + {/*<TitleBar_Piece>{obj.sheet.address.sheetId} </TitleBar_Piece> <TitleBar_Punctuation>{':'} </TitleBar_Punctuation> <TitleBar_Piece> {obj.sheet.address.sheetInstanceId}{' '} </TitleBar_Piece> - <TitleBar_Punctuation> → </TitleBar_Punctuation> + <TitleBar_Punctuation> → </TitleBar_Punctuation>*/} <TitleBar_Piece>{obj.address.objectKey}</TitleBar_Piece> diff --git a/theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/DetailCompoundPropEditor.tsx b/theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/DetailCompoundPropEditor.tsx index 602e68f..759c5a1 100644 --- a/theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/DetailCompoundPropEditor.tsx +++ b/theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/DetailCompoundPropEditor.tsx @@ -39,13 +39,14 @@ const Container = styled.div` const Header = styled.div<{isHighlighted: PropHighlighted}>` height: 30px; - display: flex; + display: grid; align-items: stretch; position: relative; + opacity: 0.8; ` const Padding = styled.div<{isVectorProp: boolean}>` - padding-left: ${rowIndentationFormulaCSS}; + /* padding-left: ${rowIndentationFormulaCSS}; */ display: flex; align-items: center; overflow: hidden; @@ -74,16 +75,17 @@ const PropName = deriver(styled.div<{isHighlighted: PropHighlighted}>` `) const CollapseIcon = styled.span<{isCollapsed: boolean; isVector: boolean}>` - width: 28px; - height: 28px; + width: 10px; + height: 10px; + padding-left: 10px; font-size: 9px; display: flex; align-items: center; justify-content: center; - + display: none; transition: transform 0.05s ease-out, color 0.1s ease-out; transform: rotateZ(${(props) => (props.isCollapsed ? 0 : 90)}deg); - color: #66686a; + color: black; visibility: ${(props) => // If it's a vector, show the collapse icon only when it's expanded @@ -91,7 +93,7 @@ const CollapseIcon = styled.span<{isCollapsed: boolean; isVector: boolean}>` // If it's a regular compond prop, show the collapse icon only when it's collapsed (props.isVector && !props.isCollapsed) ? 'visible' - : 'hidden'}; + : 'visible'}; ${Header}:hover & { visibility: visible; @@ -99,7 +101,7 @@ const CollapseIcon = styled.span<{isCollapsed: boolean; isVector: boolean}>` &:hover { transform: rotateZ(${(props) => (props.isCollapsed ? 15 : 75)}deg); - color: #c0c4c9; + color: black; } ` @@ -147,12 +149,14 @@ const InputContainer = styled.div` display: flex; align-items: center; justify-content: stretch; - padding: 0 8px 0 2px; + padding: 0 0px 0 0px; box-sizing: border-box; height: 100%; - width: var(--right-width); + width: 100%; flex-shrink: 0; flex-grow: 0; + padding-bottom: 4px; + padding-top: 4px; ` export type ICompoundPropDetailEditorProps< diff --git a/theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/SingleRowPropEditor.tsx b/theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/SingleRowPropEditor.tsx index dad5529..8d6b893 100644 --- a/theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/SingleRowPropEditor.tsx +++ b/theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/SingleRowPropEditor.tsx @@ -18,6 +18,8 @@ const Container = deriver(styled.div<{ isHighlighted: PropHighlighted }>` display: flex; + width: 100%; + padding-bottom: 0px; // min-height: 30px; justify-content: flex-start; align-items: stretch; @@ -38,16 +40,16 @@ const Container = deriver(styled.div<{ const Left = styled.div` box-sizing: border-box; - padding-left: ${rowIndentationFormulaCSS}; - padding-right: 4px; + /* padding-left: ${rowIndentationFormulaCSS}; */ + /* padding-right: 4px;*/ display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; gap: 4px; - flex-grow: 0; - flex-shrink: 0; - width: calc(100% - var(--right-width)); + flex-grow: 1; + flex-shrink: 1; + width: 100%; ` const PropNameContainer = deriver(styled.div<{ @@ -65,7 +67,6 @@ const PropNameContainer = deriver(styled.div<{ ${propNameTextCSS}; &:hover { - color: white; } `) @@ -80,12 +81,14 @@ const InputContainer = styled.div` display: flex; align-items: center; justify-content: stretch; - padding: 0 8px 0 2px; + padding: 0 0px 0 0px; box-sizing: border-box; height: 100%; - width: var(--right-width); + width: 50%; flex-shrink: 0; flex-grow: 0; + padding-bottom: 4px; + padding-top: 4px; ` type ISingleRowPropEditorProps = { diff --git a/theatre/studio/src/panels/DetailPanel/EmptyState.tsx b/theatre/studio/src/panels/DetailPanel/EmptyState.tsx index 8defa0e..3c38421 100644 --- a/theatre/studio/src/panels/DetailPanel/EmptyState.tsx +++ b/theatre/studio/src/panels/DetailPanel/EmptyState.tsx @@ -5,9 +5,10 @@ import {Outline} from '@theatre/studio/uiComponents/icons' const Container = styled.div` padding: 16px; - display: flex; + display: none; flex-direction: column; gap: 24px; + pointer-events: none; ` const Message = styled.div` diff --git a/theatre/studio/src/panels/DetailPanel/ObjectDetails.tsx b/theatre/studio/src/panels/DetailPanel/ObjectDetails.tsx index 58c146d..9bbd1b7 100644 --- a/theatre/studio/src/panels/DetailPanel/ObjectDetails.tsx +++ b/theatre/studio/src/panels/DetailPanel/ObjectDetails.tsx @@ -19,7 +19,7 @@ const ActionButton = styled.button` align-items: center; justify-content: center; outline: none; - border-radius: 2px; + border-radius: 0px; color: #a8a8a9; background: rgba(255, 255, 255, 0.1); diff --git a/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx b/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx index 6d285b1..c701b85 100644 --- a/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx +++ b/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx @@ -3,7 +3,7 @@ import React from 'react' import styled, {css} from 'styled-components' import noop from '@theatre/shared/utils/noop' import {pointerEventsAutoInNormalMode} from '@theatre/studio/css' -import {ChevronDown, Package} from '@theatre/studio/uiComponents/icons' +import {Package} from '@theatre/studio/uiComponents/icons' export const Container = styled.li` margin: 0; @@ -19,13 +19,11 @@ export const BaseHeader = styled.div`` const Header = styled(BaseHeader)` position: relative; - margin-top: 2px; margin-bottom: 2px; margin-left: calc(4px + var(--depth) * 16px); - padding-left: 4px; padding-right: 8px; gap: 4px; - height: 21px; + min-height: 21px; line-height: 0; box-sizing: border-box; display: flex; @@ -33,45 +31,41 @@ const Header = styled(BaseHeader)` align-items: center; pointer-events: none; white-space: nowrap; - font-family: 'OPS-Cubic'; - - border-radius: 2px; + font-family: 'Tonka'; /*box-shadow: 0 3px 4px -1px rgba(0, 0, 0, 0.48);*/ - color: rgba(0, 146, 255, 0.9); - background: rgba(255, 255, 255, 0.65); - backdrop-filter: blur(14px); - border-bottom: 1px solid rgba(255, 255, 255, 0.08); + color: rgba(0, 0, 0, 0.8); + background: rgba(255, 255, 255, 0); + backdrop-filter: blur(0px); &.descendant-is-selected { - background: rgba(255, 255, 255, 0.7); + background: rgba(255, 255, 255, 0); } ${pointerEventsAutoInNormalMode}; &:not(.not-selectable):not(.selected):hover { - background: rgba(59, 63, 69, 0.9); + /* background: rgba(142, 142, 142, 1); - border-bottom: 1px solid rgba(255, 255, 255, 0.24); + border-bottom: 1px solid rgba(255, 255, 255, 0.24); */ } &:not(.not-selectable):not(.selected):active { - background: rgba(82, 88, 96, 0.9); - border-bottom: 1px solid rgba(255, 255, 255, 0.24); + /* background: rgba(82, 88, 96, 0.9); + border-bottom: 1px solid rgba(255, 255, 255, 0.24);*/ } &.selected { - background: rgba(255, 255, 255, 0.7); - border-bottom: 1px solid rgba(255, 255, 255, 0.08); + /* background: rgba(142, 142, 142, 1);*/ } @supports not (backdrop-filter: blur()) { - background: rgba(40, 43, 47, 0.95); + // background: rgba(40, 43, 47, 0.95); } ` export const outlineItemFont = css` font-weight: 500; - font-size: 11px; + font-size: 12px; & { } ` @@ -84,7 +78,7 @@ const Head_Label = styled.span` // Compensate for border bottom top: 0.5px; display: flex; - height: 20px; + min-height: 20px; align-items: center; box-sizing: border-box; ` @@ -160,7 +154,11 @@ const BaseItem: React.FC<{ /* @ts-ignore */ {'--depth': depth} } - className={collapsed ? 'collapsed' : ''} + className={ + collapsed + ? `collapsed layerMover layerMover${label}` + : `layerMover layerMover${label}` + } >
@@ -171,9 +169,7 @@ const BaseItem: React.FC<{ evt.preventDefault() setIsCollapsed?.(!collapsed) }} - > - - + > ) : ( )} diff --git a/theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx b/theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx index 0c0f63a..151b321 100644 --- a/theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx +++ b/theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx @@ -14,10 +14,10 @@ const Container = styled.div<{pin: boolean}>` ${pointerEventsAutoInNormalMode}; background-color: transparent; position: absolute; - left: 8px; + left: 10px; z-index: ${panelZIndexes.outlinePanel}; - top: calc(${headerHeight} + 8px); + top: 10px; height: fit-content; max-height: calc(100% - ${headerHeight}); overflow-y: scroll; diff --git a/theatre/studio/src/panels/OutlinePanel/ProjectsList/ProjectListItem.tsx b/theatre/studio/src/panels/OutlinePanel/ProjectsList/ProjectListItem.tsx index 4d159ff..e3073e0 100644 --- a/theatre/studio/src/panels/OutlinePanel/ProjectsList/ProjectListItem.tsx +++ b/theatre/studio/src/panels/OutlinePanel/ProjectsList/ProjectListItem.tsx @@ -14,7 +14,7 @@ const ConflictNotice = styled.div` margin-left: 11px; background: #4c282d; padding: 2px 8px; - border-radius: 2px; + border-radius: 0px; font-size: 10px; box-shadow: 0 2px 8px -4px black; ` 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 1af3b40..b60271b 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 @@ -58,9 +58,9 @@ type IDotThemeValues = { isSelected: AggregateKeyframePositionIsSelected | undefined flag: PresenceFlag | undefined } -const SELECTED_COLOR = '#F2C95C' -const DEFAULT_PRIMARY_COLOR = '#40AAA4' -const DEFAULT_SECONDARY_COLOR = '#45747C' +const SELECTED_COLOR = '#5280d5' +const DEFAULT_PRIMARY_COLOR = '#ea2333' +const DEFAULT_SECONDARY_COLOR = '#c073b8' const selectionColorAll = (theme: IDotThemeValues) => theme.isSelected === AggregateKeyframePositionIsSelected.AllSelected ? SELECTED_COLOR @@ -84,19 +84,20 @@ const AggregateDotAllHereSvg = (theme: IDotThemeValues) => ( xmlns="http://www.w3.org/2000/svg" > - + ( diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/BasicKeyframedTrack.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/BasicKeyframedTrack.tsx index 1254844..aa9be4d 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/BasicKeyframedTrack.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/BasicKeyframedTrack.tsx @@ -62,6 +62,19 @@ const BasicKeyframedTrack: React.VFC = React.memo( props, ) + const toVT = { + sequenced: true, + panelID: leaf.sheetObject.address.objectKey, + prop: leaf.pathToProp, + origin: 'BasicKeyframedTrack.tsx', + } + const event = new CustomEvent('sequenceEvent', { + bubbles: false, + detail: toVT, + }) + window.dispatchEvent(event) + //console.log('sequence this', {toVT}); + const snapPositionsState = useVal(snapPositionsStateD) const snapPositions = diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/CurveEditorPopover.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/CurveEditorPopover.tsx index 3c976b6..04f9e4b 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/CurveEditorPopover.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/CurveEditorPopover.tsx @@ -65,7 +65,7 @@ const OptionsContainer = styled.div` const SearchBox = styled.input.attrs({type: 'text'})` background-color: ${COLOR_BASE}; border: none; - border-radius: 2px; + border-radius: 0px; color: rgba(255, 255, 255, 0.8); padding: 6px; font-size: 12px; diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/EasingOption.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/EasingOption.tsx index a358ce9..92b04fd 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/EasingOption.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/EasingOption.tsx @@ -17,7 +17,7 @@ const Wrapper = styled.div<{isSelected: boolean}>` transition: background-color 0.15s; background-color: ${COLOR_BASE}; - border-radius: 2px; + border-radius: 0px; cursor: pointer; outline: none; diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/colors.ts b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/colors.ts index ad1c9c9..fd6d849 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/colors.ts +++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/colors.ts @@ -1,5 +1,5 @@ -export const COLOR_POPOVER_BACK = 'rgba(26, 28, 30, 0.97);' +export const COLOR_POPOVER_BACK = 'rgba(156, 156, 156, 0.97);' -export const COLOR_BASE = '#272B2F' +export const COLOR_BASE = '#FFFFFF' -export const COLOR_FOCUS_OUTLINE = '#0A4540' +export const COLOR_FOCUS_OUTLINE = '#ffffff' 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 fa9d79e..62e3af1 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 @@ -31,7 +31,7 @@ const SingleKeyframePropLabel = styled.div` width: 40%; - color: #919191; + color: #606060; overflow: hidden; ` 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 13f6636..bb34f42 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 @@ -28,12 +28,12 @@ import usePresence, { PresenceFlag, } from '@theatre/studio/uiComponents/usePresence' -export const DOT_SIZE_PX = 6 +export const DOT_SIZE_PX = 8 const DOT_HOVER_SIZE_PX = DOT_SIZE_PX + 2 const dotTheme = { - normalColor: '#40AAA4', - selectedColor: '#F2C95C', + normalColor: '#ea2333', + selectedColor: '#1cba94', inlineEditorOpenColor: '#FCF3DC', selectedAndInlineEditorOpenColor: '#CBEBEA', } @@ -66,6 +66,7 @@ const Diamond = styled.div` background: ${(props) => selectBackgroundForDiamond(props)}; transform: rotateZ(45deg); + border-radius: 2px; ${(props) => props.flag === PresenceFlag.Primary ? 'outline: 2px solid white;' : ''}; diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/DopeSheetBackground.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/DopeSheetBackground.tsx index 1269ca0..a9ab192 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/DopeSheetBackground.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/DopeSheetBackground.tsx @@ -1,9 +1,8 @@ -import {theme} from '@theatre/studio/css' import type {SequenceEditorPanelLayout} from '@theatre/studio/panels/SequenceEditorPanel/layout/layout' import {zIndexes} from '@theatre/studio/panels/SequenceEditorPanel/SequenceEditorPanel' import {useVal} from '@theatre/react' import type {Pointer} from '@theatre/dataverse' -import {darken, transparentize} from 'polished' +import {transparentize} from 'polished' import React from 'react' import styled from 'styled-components' import FrameGrid from '@theatre/studio/panels/SequenceEditorPanel/FrameGrid/FrameGrid' @@ -15,7 +14,7 @@ const Container = styled.div` bottom: 0; z-index: ${() => zIndexes.rightBackground}; overflow: hidden; - background: ${transparentize(0.01, darken(1 * 0.03, theme.panel.bg))}; + background: ${transparentize(0.1, '#f2f2f2')}; pointer-events: none; ` diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/LengthIndicator/LengthIndicator.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/LengthIndicator/LengthIndicator.tsx index 461aebf..a7e9ff9 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/LengthIndicator/LengthIndicator.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/LengthIndicator/LengthIndicator.tsx @@ -71,7 +71,7 @@ const Tooltip = styled.div` font-size: 10px; white-space: nowrap; padding: 2px 8px; - border-radius: 2px; + border-radius: 0px; ${pointerEventsAutoInNormalMode}; cursor: ew-resize; color: #464646; @@ -89,7 +89,7 @@ const Tumb = styled.div` font-size: 10px; white-space: nowrap; padding: 1px 2px; - border-radius: 2px; + border-radius: 0px; ${pointerEventsAutoInNormalMode}; justify-content: center; align-items: center; 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 bf36b14..3e23cb9 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/keyframeRowUI/ConnectorLine.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/keyframeRowUI/ConnectorLine.tsx @@ -13,7 +13,7 @@ export type IConnectorThemeValues = { export const CONNECTOR_THEME = { normalColor: `#FFFFFF`, // (greenish-blueish)ish - selectedColor: `#8A7842`, + selectedColor: `#65d8bc`, barColor: (values: IConnectorThemeValues) => { const base = values.isSelected ? CONNECTOR_THEME.selectedColor diff --git a/theatre/studio/src/panels/SequenceEditorPanel/FrameGrid/StampsGrid.tsx b/theatre/studio/src/panels/SequenceEditorPanel/FrameGrid/StampsGrid.tsx index 84ef686..596b1c6 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/FrameGrid/StampsGrid.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/FrameGrid/StampsGrid.tsx @@ -17,7 +17,7 @@ const Container = styled.div` ` export const stampsGridTheme = { - fullUnitStampColor: `#ffffff`, + fullUnitStampColor: `#000000`, stampFontSize: '10px', get subUnitStampColor(): string { return darken(0.2, stampsGridTheme.fullUnitStampColor) diff --git a/theatre/studio/src/panels/SequenceEditorPanel/GraphEditor/GraphEditor.tsx b/theatre/studio/src/panels/SequenceEditorPanel/GraphEditor/GraphEditor.tsx index fad801c..ee2dc5c 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/GraphEditor/GraphEditor.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/GraphEditor/GraphEditor.tsx @@ -27,7 +27,8 @@ const Container = styled.div` position: absolute; right: 0; bottom: 0; - background: ${transparentize(0.1, '#0092FF')}; + background: ${transparentize(0.1, '#c9c9c9')}; + backdrop-filter: blur(2px); ` const SVGContainer = styled.svg` diff --git a/theatre/studio/src/panels/SequenceEditorPanel/GraphEditorToggle.tsx b/theatre/studio/src/panels/SequenceEditorPanel/GraphEditorToggle.tsx index 549378a..a38b88a 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/GraphEditorToggle.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/GraphEditorToggle.tsx @@ -10,15 +10,14 @@ import {includeLockFrameStampAttrs} from './FrameStampPositionProvider' const Container = styled.button` outline: none; - background-color: #1c1d21; - border: 1px solid #191919; - border-radius: 2px; + background-color: #ffffff; + border: none; + border-radius: 0px; display: flex; bottom: 14px; right: 8px; z-index: 1; position: absolute; - padding: 4px 8px; display: flex; color: #656d77; @@ -26,7 +25,7 @@ const Container = styled.button` font-size: 10px; &:hover { - color: white; + color: black; } & > svg { diff --git a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/FocusRangeZone/FocusRangeThumb.tsx b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/FocusRangeZone/FocusRangeThumb.tsx index 8045d52..138295a 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/FocusRangeZone/FocusRangeThumb.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/FocusRangeZone/FocusRangeThumb.tsx @@ -53,9 +53,9 @@ const TheDiv = styled.div<{enabled: boolean; type: 'start' | 'end'}>` #pointer-root.normal & { pointer-events: auto; - border-radius: 15px; + border-radius: 0px; overflow: hidden; - border: 2px solid #0092ff; + border: 2px solid #000000; } #pointer-root.draggingPositionInSequenceEditor & { diff --git a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/HorizontalScrollbar.tsx b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/HorizontalScrollbar.tsx index 828f662..d5814cf 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/HorizontalScrollbar.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/HorizontalScrollbar.tsx @@ -14,7 +14,7 @@ import useDrag from '@theatre/studio/uiComponents/useDrag' const Container = styled.div` --threadHeight: 6px; - --bg-inactive: #32353b; + --bg-inactive: #a5a5a5; --bg-active: #5b5c5d; position: absolute; height: 0; diff --git a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/Playhead.tsx b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/Playhead.tsx index 49780a9..dd0db39 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/Playhead.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/Playhead.tsx @@ -33,7 +33,7 @@ import { } from '@theatre/studio/panels/SequenceEditorPanel/DopeSheet/Right/KeyframeSnapTarget' const Container = styled.div<{isVisible: boolean}>` - --thumbColor: #00e0ff; + --thumbColor: #ff2a00; position: absolute; top: 0; left: 0; @@ -50,7 +50,7 @@ const Rod = styled.div` top: 8px; width: 0; height: calc(100% - 8px); - border-left: 1px solid #27e0fd; + border-left: 1px solid #ff2a00; z-index: 10; pointer-events: none; @@ -177,7 +177,7 @@ const Tooltip = styled.div` left: 4px; padding: 0 2px; transform: translateX(-50%); - background: #0092ff; + background: #000000; border-radius: 4px; color: #fff; font-size: 10px; diff --git a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/TopStrip.tsx b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/TopStrip.tsx index 01be055..2259a42 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/TopStrip.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/TopStrip.tsx @@ -11,8 +11,8 @@ import FocusRangeZone from './FocusRangeZone/FocusRangeZone' export const topStripHeight = 18 export const topStripTheme = { - backgroundColor: `#0092FFeb`, - borderColor: `#0092FF`, + backgroundColor: `#f2f2f2`, + borderColor: `#000000`, } const Container = styled.div` @@ -23,7 +23,7 @@ const Container = styled.div` height: ${topStripHeight}px; box-sizing: border-box; background: ${topStripTheme.backgroundColor}; - border-bottom: 1px solid ${topStripTheme.borderColor}; + border-bottom: 1px dashed #91919177; ${pointerEventsAutoInNormalMode}; ` diff --git a/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx b/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx index f2d88b9..0404efb 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx @@ -25,7 +25,6 @@ import { panelZIndexes, TitleBar, TitleBar_Piece, - TitleBar_Punctuation, } from '@theatre/studio/panels/BasePanel/common' import type {UIPanelId} from '@theatre/shared/utils/ids' import {usePresenceListenersOnRootElement} from '@theatre/studio/uiComponents/usePresence' @@ -36,16 +35,16 @@ const Container = styled(PanelWrapper)` ` const LeftBackground = styled.div` - background-color: #ffffff; - color: #ffffff; + background-color: #f3f3f3; + color: #000000; position: absolute; left: 0; top: 0; bottom: 0; z-index: -1; pointer-events: none; - /* border-bottom: 2px solid #0092FF; - border-left: 2px solid #0092FF; */ + /* border-bottom: 2px solid #000000; + border-left: 2px solid #000000; */ ` export const zIndexes = (() => { @@ -203,12 +202,12 @@ const Header: React.FC<{layoutP: Pointer}> = ({ }} > - {sheet.address.sheetId} + {/* {sheet.address.sheetId} {':'}  {sheet.address.sheetInstanceId} -  {'>'}  +  {'>'} */} Sequence diff --git a/theatre/studio/src/panels/SequenceEditorPanel/VerticalScrollContainer.tsx b/theatre/studio/src/panels/SequenceEditorPanel/VerticalScrollContainer.tsx index 1b5326a..69f1b1a 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/VerticalScrollContainer.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/VerticalScrollContainer.tsx @@ -11,6 +11,7 @@ const Container = styled.div` bottom: 0; overflow-x: hidden; overflow-y: scroll; + border-bottom: 1px dashed #91919177; z-index: ${() => zIndexes.scrollableArea}; &::-webkit-scrollbar { diff --git a/theatre/studio/src/propEditors/DefaultValueIndicator.tsx b/theatre/studio/src/propEditors/DefaultValueIndicator.tsx index c046403..e379a77 100644 --- a/theatre/studio/src/propEditors/DefaultValueIndicator.tsx +++ b/theatre/studio/src/propEditors/DefaultValueIndicator.tsx @@ -46,20 +46,27 @@ const Container = styled.div<{ ` const DefaultIcon = styled.div` - width: 5px; - height: 5px; - border-radius: 1px; + width: 8px; + height: 8px; + border-radius: 2px; transform: rotate(45deg); - /* border: 1px solid currentColor; */ - background-color: currentColor; + background: #a3a3a3; + cursor: pointer; + &:hover { + background: red; + } ` const FilledIcon = styled.div` - width: 5px; - height: 5px; - background-color: currentColor; - border-radius: 1px; + width: 8px; + height: 8px; + border-radius: 2px; transform: rotate(45deg); + background: #a3a3a3; + cursor: pointer; + &:hover { + background: red; + } ` const DefaultOrStaticValueIndicator: React.FC<{ diff --git a/theatre/studio/src/propEditors/NextPrevKeyframeCursors.tsx b/theatre/studio/src/propEditors/NextPrevKeyframeCursors.tsx index 9c132d6..027f351 100644 --- a/theatre/studio/src/propEditors/NextPrevKeyframeCursors.tsx +++ b/theatre/studio/src/propEditors/NextPrevKeyframeCursors.tsx @@ -2,7 +2,6 @@ import type {Keyframe} from '@theatre/core/projects/store/types/SheetState_Histo import type {StudioSheetItemKey} from '@theatre/shared/utils/ids' import type {VoidFn} from '@theatre/shared/utils/types' import {pointerEventsAutoInNormalMode} from '@theatre/studio/css' -import {transparentize} from 'polished' import React from 'react' import styled, {css} from 'styled-components' import {PresenceFlag} from '@theatre/studio/uiComponents/usePresence' @@ -30,7 +29,7 @@ const Container = styled.div` margin: 0 0px 0 2px; position: relative; z-index: 0; - opacity: 0.7; + opacity: 1; &:after { position: absolute; @@ -41,7 +40,7 @@ const Container = styled.div` content: ' '; display: none; z-index: -1; - background: ${transparentize(0.2, 'black')}; + background: transparent; } &:hover { @@ -78,7 +77,7 @@ const Button = styled.div` export const nextPrevCursorsTheme = { offColor: '#555', - onColor: '#0092FF', + onColor: '#000000', } const CurButton = styled(Button)<{ @@ -86,7 +85,7 @@ const CurButton = styled(Button)<{ presence: PresenceFlag | undefined }>` &:hover { - color: #0092ff; + color: #000000; } color: ${(props) => @@ -122,7 +121,7 @@ const Prev = styled(PrevOrNextButton)<{ }>` transform: translateX(2px); ${Container}:hover & { - transform: translateX(-7px); + transform: translateX(-2px); } ` const Next = styled(PrevOrNextButton)<{ @@ -131,7 +130,7 @@ const Next = styled(PrevOrNextButton)<{ }>` transform: translateX(-2px); ${Container}:hover & { - transform: translateX(7px); + transform: translateX(2px); } ` @@ -145,28 +144,40 @@ namespace Icons { export const Prev = () => ( - - + + ) export const Next = () => ( - - + + ) @@ -174,21 +185,25 @@ namespace Icons { const Cur_Group = styled.g` stroke-width: 0; ${CurButton}:hover & path { - stroke: currentColor; - stroke-width: 2; } ` export const Cur = () => ( - - + + ) diff --git a/theatre/studio/src/propEditors/simpleEditors/BooleanPropEditor.tsx b/theatre/studio/src/propEditors/simpleEditors/BooleanPropEditor.tsx index ff460c1..72fc396 100644 --- a/theatre/studio/src/propEditors/simpleEditors/BooleanPropEditor.tsx +++ b/theatre/studio/src/propEditors/simpleEditors/BooleanPropEditor.tsx @@ -5,7 +5,7 @@ import BasicCheckbox from '@theatre/studio/uiComponents/form/BasicCheckbox' import type {ISimplePropEditorReactProps} from './ISimplePropEditorReactProps' const Input = styled(BasicCheckbox)` - margin-left: 6px; + margin-bottom: 10px; :focus { outline: 1px solid #555; diff --git a/theatre/studio/src/propEditors/simpleEditors/RgbaPropEditor.tsx b/theatre/studio/src/propEditors/simpleEditors/RgbaPropEditor.tsx index cd4355d..a4a01c7 100644 --- a/theatre/studio/src/propEditors/simpleEditors/RgbaPropEditor.tsx +++ b/theatre/studio/src/propEditors/simpleEditors/RgbaPropEditor.tsx @@ -32,10 +32,10 @@ const ColorPreviewPuck = styled.div.attrs((props) => ({ background: rgba2hex(props.rgbaColor), }, }))` - height: 18px; + height: 23px; aspect-ratio: 1; border-radius: 99999px; - border: 1px solid #0092ff; + border: 1px solid #000000; ` const HexInput = styled(BasicStringInput)` diff --git a/theatre/studio/src/propEditors/utils/propNameTextCSS.tsx b/theatre/studio/src/propEditors/utils/propNameTextCSS.tsx index 46e53dc..e041d50 100644 --- a/theatre/studio/src/propEditors/utils/propNameTextCSS.tsx +++ b/theatre/studio/src/propEditors/utils/propNameTextCSS.tsx @@ -3,8 +3,7 @@ import {css} from 'styled-components' export const propNameTextCSS = css<{isHighlighted?: PropHighlighted}>` font-weight: 300; - font-size: 14px; - color: ${(props) => - props.isHighlighted === 'self' ? '#FFFFFF77' : '#0092FF'}; - text-shadow: 0.5px 0.5px 2px rgba(0, 146, 255, 0.3); + font-size: 12px; + font-variation-settings: 'wght' 130; + color: ${(props) => (props.isHighlighted === 'self' ? '#000000' : '#000000')}; ` diff --git a/theatre/studio/src/store/stateEditors.ts b/theatre/studio/src/store/stateEditors.ts index 6fa9414..0aee371 100644 --- a/theatre/studio/src/store/stateEditors.ts +++ b/theatre/studio/src/store/stateEditors.ts @@ -703,6 +703,17 @@ namespace stateEditors { tracks.trackData[trackId] = track tracks.trackIdByPropPath[pathEncoded] = trackId + const toVT = { + sequenced: true, + panelID: p.objectKey, + prop: p.pathToProp, + origin: 'stateEditors.ts', + } + const event = new CustomEvent('sequenceEvent', { + bubbles: false, + detail: toVT, + }) + window.dispatchEvent(event) } export function setPrimitivePropAsStatic( @@ -722,6 +733,18 @@ namespace stateEditors { stateEditors.coreByProject.historic.sheetsById.staticOverrides.byObject.setValueOfPrimitiveProp( p, ) + const toVT = { + sequenced: false, + panelID: p.objectKey, + prop: p.pathToProp, + origin: 'stateEditors.ts', + } + const event = new CustomEvent('sequenceEvent', { + bubbles: false, + detail: toVT, + }) + window.dispatchEvent(event) + //console.log('make this static', {toVT}); } export function setCompoundPropAsStatic( diff --git a/theatre/studio/src/toolbars/GlobalToolbar.tsx b/theatre/studio/src/toolbars/GlobalToolbar.tsx index 936cd95..fb5b616 100644 --- a/theatre/studio/src/toolbars/GlobalToolbar.tsx +++ b/theatre/studio/src/toolbars/GlobalToolbar.tsx @@ -29,7 +29,7 @@ const Container = styled.div` height: 36px; pointer-events: none; - display: flex; + display: none; justify-content: space-between; padding: 12px; ` diff --git a/theatre/studio/src/toolbars/MoreMenu/MoreMenu.tsx b/theatre/studio/src/toolbars/MoreMenu/MoreMenu.tsx index 315e586..ee75ca9 100644 --- a/theatre/studio/src/toolbars/MoreMenu/MoreMenu.tsx +++ b/theatre/studio/src/toolbars/MoreMenu/MoreMenu.tsx @@ -6,7 +6,7 @@ import styled from 'styled-components' const Container = styled.div` width: 138px; - border-radius: 2px; + border-radius: 0px; background-color: rgba(42, 45, 50, 0.9); position: absolute; display: flex; @@ -62,7 +62,7 @@ const Link = styled(Item)` &:hover { /* background-color: #398995; */ - color: white !important; + color: grey; &:before { opacity: 1; } diff --git a/theatre/studio/src/uiComponents/DetailPanelButton.tsx b/theatre/studio/src/uiComponents/DetailPanelButton.tsx index 3a1d29c..aca62ee 100644 --- a/theatre/studio/src/uiComponents/DetailPanelButton.tsx +++ b/theatre/studio/src/uiComponents/DetailPanelButton.tsx @@ -3,7 +3,7 @@ import styled from 'styled-components' const DetailPanelButton = styled.button<{disabled?: boolean}>` text-align: center; padding: 8px; - border-radius: 2px; + border-radius: 0px; border: 1px solid #627b7b87; background-color: #4b787d3d; color: #eaeaea; diff --git a/theatre/studio/src/uiComponents/Popover/BasicPopover.tsx b/theatre/studio/src/uiComponents/Popover/BasicPopover.tsx index 5dcf576..168e880 100644 --- a/theatre/studio/src/uiComponents/Popover/BasicPopover.tsx +++ b/theatre/studio/src/uiComponents/Popover/BasicPopover.tsx @@ -5,7 +5,7 @@ import React from 'react' import styled from 'styled-components' import PopoverArrow from './PopoverArrow' -export const popoverBackgroundColor = transparentize(0.05, `#2a2a31`) +export const popoverBackgroundColor = transparentize(0.08, `#999999`) const Container = styled.div` position: absolute; @@ -15,7 +15,7 @@ const Container = styled.div` background: var(--popover-bg); - color: white; + color: black; padding: 0; margin: 0; cursor: default; @@ -23,7 +23,6 @@ const Container = styled.div` border-radius: 3px; z-index: 10000; border: 1px solid var(--popover-inner-stroke); - box-shadow: 0 0 0 1px var(--popover-outer-stroke), 0 6px 8px -4px black; backdrop-filter: blur(8px); & a { diff --git a/theatre/studio/src/uiComponents/colorPicker/components/common/Alpha.tsx b/theatre/studio/src/uiComponents/colorPicker/components/common/Alpha.tsx index 74fb397..8503df7 100644 --- a/theatre/studio/src/uiComponents/colorPicker/components/common/Alpha.tsx +++ b/theatre/studio/src/uiComponents/colorPicker/components/common/Alpha.tsx @@ -13,7 +13,7 @@ import styled from 'styled-components' const Container = styled.div` position: relative; height: 16px; - border-radius: 2px; + border-radius: 0px; // Checkerboard background-color: #fff; background-image: url('data:image/svg+xml,'); diff --git a/theatre/studio/src/uiComponents/colorPicker/components/common/Hue.tsx b/theatre/studio/src/uiComponents/colorPicker/components/common/Hue.tsx index 9b39f9b..0088b67 100644 --- a/theatre/studio/src/uiComponents/colorPicker/components/common/Hue.tsx +++ b/theatre/studio/src/uiComponents/colorPicker/components/common/Hue.tsx @@ -12,7 +12,7 @@ import styled from 'styled-components' const Container = styled.div` position: relative; height: 16px; - border-radius: 2px; + border-radius: 0px; background: linear-gradient( to right, diff --git a/theatre/studio/src/uiComponents/colorPicker/components/common/Pointer.tsx b/theatre/studio/src/uiComponents/colorPicker/components/common/Pointer.tsx index a6fa83c..c140a37 100644 --- a/theatre/studio/src/uiComponents/colorPicker/components/common/Pointer.tsx +++ b/theatre/studio/src/uiComponents/colorPicker/components/common/Pointer.tsx @@ -14,7 +14,7 @@ const Container = styled.div` transform: translate(-50%, -50%); background-color: #fff; border: 1px solid #ffffff00; - border-radius: 2px; + border-radius: 0px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); ${StyledInteractive}:focus & { diff --git a/theatre/studio/src/uiComponents/colorPicker/components/common/Saturation.tsx b/theatre/studio/src/uiComponents/colorPicker/components/common/Saturation.tsx index 5b6dfbe..5b5942b 100644 --- a/theatre/studio/src/uiComponents/colorPicker/components/common/Saturation.tsx +++ b/theatre/studio/src/uiComponents/colorPicker/components/common/Saturation.tsx @@ -13,7 +13,7 @@ const Container = styled.div` flex-grow: 1; border-color: transparent; /* Fixes https://github.com/omgovich/react-colorful/issues/139 */ border-bottom: 12px solid #000; - border-radius: 2px; + border-radius: 0px; background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0)), linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); diff --git a/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx b/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx index d9e6a29..056cb10 100644 --- a/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx +++ b/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx @@ -27,31 +27,33 @@ const Container = styled.div` border: 1px solid transparent; z-index: -2; box-sizing: border-box; - border-radius: 1px; + border-radius: 0px; } &:hover, &.dragging, &.editingViaKeyboard { &:after { - background-color: rgba(0, 146, 255, 0.8); - border-color: rgba(0, 146, 255, 1); + // background-color: rgba(255, 255, 255, 1); } } ` const Input = styled.input` - background: rgba(0, 146, 255, 0.1); - border: 3px solid white; - color: rgba(0, 146, 255, 1); - padding: 1px 6px; + background: rgba(255, 255, 255, 1); + border: none; + color: rgba(0, 0, 0, 1); + padding: 3px 6px 1px 6px; font: inherit; outline: none; cursor: ew-resize; text-align: left; width: 100%; height: calc(100% - 4px); - border-radius: 5px; + border-radius: 0px; + margin-bottom: 0px; + text-align: center; + font-variation-settings: 'wght' 200; &:focus { cursor: text; @@ -60,16 +62,17 @@ const Input = styled.input` const FillIndicator = styled.div` position: absolute; - inset: 3px 2px 4px; + inset: 0px 0px 0px; transform: scale(var(--percentage), 1); transform-origin: top left; - background-color: #2d5561; - z-index: -1; - border-radius: 2px; - pointer-events: none; + background-color: #b4b4b4; + z-index: 0; + border-radius: 0px; + pointer-events: none !important; + mix-blend-mode: multiply; ${Container}.dragging &, ${Container}.noFocus:hover & { - background-color: rgba(0, 146, 255, 0.8); + background-color: rgba(188, 188, 188, 0.8); } ` diff --git a/theatre/studio/src/uiComponents/form/BasicSelect.tsx b/theatre/studio/src/uiComponents/form/BasicSelect.tsx index abfec78..9c3a3fd 100644 --- a/theatre/studio/src/uiComponents/form/BasicSelect.tsx +++ b/theatre/studio/src/uiComponents/form/BasicSelect.tsx @@ -22,16 +22,16 @@ const IconContainer = styled.div` const Select = styled.select` appearance: none; - background-color: transparent; + background-color: white; box-sizing: border-box; border: 1px solid transparent; - color: rgba(255, 255, 255, 0.85); + color: rgba(0, 0, 0, 1); padding: 1px 6px; font: inherit; outline: none; text-align: left; width: 100%; - border-radius: 2px; + border-radius: 0px; /* looks like putting percentages in the height of a select box doesn't work in Firefox. Not sure why. So we're hard-coding the height to 26px, unlike all other inputs that use a relative height. @@ -46,7 +46,6 @@ const Select = styled.select` &:hover, &:focus { background-color: #10101042; - border-color: #00000059; } ` diff --git a/theatre/studio/src/uiComponents/form/BasicStringInput.tsx b/theatre/studio/src/uiComponents/form/BasicStringInput.tsx index fd6750e..527807a 100644 --- a/theatre/studio/src/uiComponents/form/BasicStringInput.tsx +++ b/theatre/studio/src/uiComponents/form/BasicStringInput.tsx @@ -7,19 +7,21 @@ import useRefAndState from '@theatre/studio/utils/useRefAndState' import useOnClickOutside from '@theatre/studio/uiComponents/useOnClickOutside' const StyledTextarea = styled.textarea.attrs({type: 'text'})` - background: transparent; - border: 1px solid transparent; - color: rgba(0, 146, 255, 1); - padding: 1px 6px; + background: #ffffff; + border: none; + color: rgba(0, 0, 0, 1); + padding: 3px 6px 1px 6px; font: inherit; outline: none; cursor: text; text-align: left; width: 100%; height: calc(100% - 4px); - border-radius: 2px; - border: 1px solid transparent; + border-radius: 0px; box-sizing: border-box; + margin-bottom: 10px; + margin-top: 10px; + font-variation-settings: 'wght' 200; &:hover { background-color: #10101042; diff --git a/theatre/studio/src/uiComponents/icons/Package.tsx b/theatre/studio/src/uiComponents/icons/Package.tsx index 0f6952f..7f247fb 100644 --- a/theatre/studio/src/uiComponents/icons/Package.tsx +++ b/theatre/studio/src/uiComponents/icons/Package.tsx @@ -10,10 +10,7 @@ function Package(props: React.SVGProps) { xmlns="http://www.w3.org/2000/svg" {...props} > - + ) } diff --git a/theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/BaseMenu.tsx b/theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/BaseMenu.tsx index bb8bd68..820da75 100644 --- a/theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/BaseMenu.tsx +++ b/theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/BaseMenu.tsx @@ -14,22 +14,21 @@ const MenuContainer = styled.ul` position: absolute; min-width: ${minWidth}px; z-index: 10000; - background: ${transparentize(0.2, '#111')}; + background: ${transparentize(0.0, '#d3d3d3')}; backdrop-filter: blur(2px); - color: white; + color: black; list-style-type: none; - padding: 2px 0; + overflow: hidden; margin: 0; - border-radius: 1px; cursor: default; ${pointerEventsAutoInNormalMode}; - border-radius: 3px; + border-radius: 9px; ` const MenuTitle = styled.div` padding: 4px 10px; border-bottom: 1px solid #6262626d; - color: #adadadb3; + color: #000000; font-size: 11px; font-weight: 500; ` diff --git a/theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/Item.tsx b/theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/Item.tsx index 43c839a..a56d667 100644 --- a/theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/Item.tsx +++ b/theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/Item.tsx @@ -14,22 +14,24 @@ const ItemContainer = styled.li<{enabled: boolean}>` font-size: 11px; font-weight: 400; position: relative; - color: ${(props) => (props.enabled ? 'white' : '#8f8f8f')}; + font-family: 'Tonka'; + text-transform: uppercase; + color: ${(props) => (props.enabled ? 'white' : '#484848')}; cursor: ${(props) => (props.enabled ? 'normal' : 'not-allowed')}; &:after { position: absolute; - inset: 2px 1px; + inset: 0px 1px; display: block; content: ' '; pointer-events: none; z-index: -1; - border-radius: 3px; + border-radius: 0px; } &:hover:after { background-color: ${(props) => - props.enabled ? 'rgba(63, 174, 191, 0.75)' : 'initial'}; + props.enabled ? 'rgba(133, 133, 133, 0.75)' : 'initial'}; } ` diff --git a/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx b/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx index 5a3fa8f..55b7d89 100644 --- a/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx +++ b/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx @@ -25,7 +25,7 @@ export const Container = styled.button` backdrop-filter: blur(14px); border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.08); - border-radius: 2px; + border-radius: 0px; svg { display: block; @@ -63,7 +63,7 @@ export const Container = styled.button` } @supports not (backdrop-filter: blur()) { - background: rgba(40, 43, 47, 0.95); + // background: rgba(40, 43, 47, 0.95); } ` diff --git a/theatre/studio/src/uiComponents/toolbar/ToolbarSwitchSelectContainer.ts b/theatre/studio/src/uiComponents/toolbar/ToolbarSwitchSelectContainer.ts index 459608c..3cebb4d 100644 --- a/theatre/studio/src/uiComponents/toolbar/ToolbarSwitchSelectContainer.ts +++ b/theatre/studio/src/uiComponents/toolbar/ToolbarSwitchSelectContainer.ts @@ -5,7 +5,7 @@ const Container = styled(Group)` display: flex; height: fit-content; backdrop-filter: blur(14px); - border-radius: 2px; + border-radius: 0px; ` export default Container