css changes

packages/playground/devEnv/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;
 

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: {

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; */
 

theatre/studio/src/panels/BasePanel/common.tsx

@@ -50,9 +50,8 @@ export const TitleBar = styled.div`
   align-items: center;
   padding: 0 10px;
   position: relative;
-  color: #ffffffb3;
+  color: black;
-  border-bottom: 1px solid rgb(0 0 0 / 13%);
+  background-color: #a5a5a5;
-  background-color: #0092ff;
   font-size: 10px;
   font-weight: 500;
   overflow: hidden;

theatre/studio/src/panels/DetailPanel/DetailPanel.tsx

@@ -28,23 +28,19 @@ const headerHeight = `32px`
 
 const Container = styled.div<{pin: boolean}>`
   ${pointerEventsAutoInNormalMode};
-  font-family: 'OPS-Cubic';
+  font-family: 'Tonka';
-  text-transform: uppercase;
+  // text-transform: uppercase;
-  background-color: rgba(255, 255, 255, 1);
+  background: rgba(242, 242, 242, 0.9);
-  border: 2px solid rgba(0, 146, 255, 1);
+  border-radius: 0px;
-  border-radius: 15px;
   color: black;
   position: fixed;
-  right: 8px;
+  right: 10px;
-  top: 50px;
+  top: 10px;
   // Temporary, see comment about CSS grid in SingleRowPropEditor.
   width: 280px;
   height: fit-content;
   z-index: ${panelZIndexes.propsPanel};
-
+  backdrop-filter: blur(2px);
-  box-shadow: 0 10px 10px rgba(0, 146, 255, 0.25),
-    0 10px 10px rgba(0, 146, 255 0.15);
-  backdrop-filter: blur(14px);
 
   display: ${({pin}) => (pin ? 'block' : 'none')};
 
@@ -53,13 +49,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,6 +69,7 @@ const Header = styled.div`
   height: ${headerHeight};
   display: flex;
   align-items: center;
+  border-bottom: 1px dashed #91919177;
 `
 
 const Body = styled.div`

theatre/studio/src/panels/OutlinePanel/BaseItem.tsx

@@ -33,23 +33,21 @@ const Header = styled(BaseHeader)`
   align-items: center;
   pointer-events: none;
   white-space: nowrap;
-  font-family: 'OPS-Cubic';
+  font-family: 'Tonka';
-
-  border-radius: 2px;
   /*box-shadow: 0 3px 4px -1px rgba(0, 0, 0, 0.48);*/
 
-  color: rgba(0, 146, 255, 0.9);
+  color: rgba(0, 0, 0, 0.8);
   background: rgba(255, 255, 255, 0.65);
   backdrop-filter: blur(14px);
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
 
   &.descendant-is-selected {
-    background: rgba(255, 255, 255, 0.7);
+    background: rgba(255, 255, 255, 1);
   }
 
   ${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);
   }
@@ -60,8 +58,7 @@ const Header = styled(BaseHeader)`
   }
 
   &.selected {
-    background: rgba(255, 255, 255, 0.7);
+    background: rgba(142, 142, 142, 1);
-    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
   }
 
   @supports not (backdrop-filter: blur()) {
@@ -71,7 +68,7 @@ const Header = styled(BaseHeader)`
 
 export const outlineItemFont = css`
   font-weight: 500;
-  font-size: 11px;
+  font-size: 12px;
   & {
   }
 `

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;

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

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)

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`

theatre/studio/src/panels/SequenceEditorPanel/GraphEditorToggle.tsx

@@ -10,15 +10,14 @@ import {includeLockFrameStampAttrs} from './FrameStampPositionProvider'
 
 const Container = styled.button`
   outline: none;
-  background-color: #1c1d21;
+  background-color: #ffffff;
-  border: 1px solid #191919;
+  border: none;
-  border-radius: 2px;
+  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 {

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 & {

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;

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;

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`,
+  backgroundColor: `#f2f2f2`,
-  borderColor: `#0092FF`,
+  borderColor: `#000000`,
 }
 
 const Container = styled.div`

theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx

@@ -36,16 +36,16 @@ const Container = styled(PanelWrapper)`
 `
 
 const LeftBackground = styled.div`
-  background-color: #ffffff;
+  background-color: #f3f3f3;
-  color: #ffffff;
+  color: #000000;
   position: absolute;
   left: 0;
   top: 0;
   bottom: 0;
   z-index: -1;
   pointer-events: none;
-  /* border-bottom: 2px solid #0092FF;
+  /* border-bottom: 2px solid #000000;
-  border-left: 2px solid #0092FF; */
+  border-left: 2px solid #000000; */
 `
 
 export const zIndexes = (() => {

theatre/studio/src/propEditors/NextPrevKeyframeCursors.tsx

@@ -78,7 +78,7 @@ const Button = styled.div`
 
 export const nextPrevCursorsTheme = {
   offColor: '#555',
-  onColor: '#0092FF',
+  onColor: '#000000',
 }
 
 const CurButton = styled(Button)<{
@@ -86,7 +86,7 @@ const CurButton = styled(Button)<{
   presence: PresenceFlag | undefined
 }>`
   &:hover {
-    color: #0092ff;
+    color: #000000;
   }
 
   color: ${(props) =>

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;

theatre/studio/src/propEditors/simpleEditors/RgbaPropEditor.tsx

@@ -32,10 +32,10 @@ const ColorPreviewPuck = styled.div.attrs<ColorPreviewPuckProps>((props) => ({
     background: rgba2hex(props.rgbaColor),
   },
 }))<ColorPreviewPuckProps>`
-  height: 18px;
+  height: 23px;
   aspect-ratio: 1;
   border-radius: 99999px;
-  border: 1px solid #0092ff;
+  border: 1px solid #000000;
 `
 
 const HexInput = styled(BasicStringInput)`

theatre/studio/src/propEditors/utils/propNameTextCSS.tsx

@@ -3,8 +3,6 @@ import {css} from 'styled-components'
 
 export const propNameTextCSS = css<{isHighlighted?: PropHighlighted}>`
   font-weight: 300;
-  font-size: 14px;
+  font-size: 12px;
-  color: ${(props) =>
+  color: ${(props) => (props.isHighlighted === 'self' ? '#000000' : '#000000')};
-    props.isHighlighted === 'self' ? '#FFFFFF77' : '#0092FF'};
-  text-shadow: 0.5px 0.5px 2px rgba(0, 146, 255, 0.3);
 `

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

theatre/studio/src/toolbars/MoreMenu/MoreMenu.tsx

@@ -62,7 +62,7 @@ const Link = styled(Item)`
 
   &:hover {
     /* background-color: #398995; */
-    color: white !important;
+    color: grey;
     &:before {
       opacity: 1;
     }

theatre/studio/src/uiComponents/form/BasicNumberInput.tsx

@@ -34,16 +34,15 @@ const Container = styled.div`
   &.dragging,
   &.editingViaKeyboard {
     &:after {
-      background-color: rgba(0, 146, 255, 0.8);
+      // background-color: rgba(255, 255, 255, 1);
-      border-color: rgba(0, 146, 255, 1);
     }
   }
 `
 
 const Input = styled.input`
-  background: rgba(0, 146, 255, 0.1);
+  background: rgba(255, 255, 255, 1);
-  border: 3px solid white;
+  border: none;
-  color: rgba(0, 146, 255, 1);
+  color: rgba(0, 0, 0, 1);
   padding: 1px 6px;
   font: inherit;
   outline: none;
@@ -51,7 +50,8 @@ const Input = styled.input`
   text-align: left;
   width: 100%;
   height: calc(100% - 4px);
-  border-radius: 5px;
+  border-radius: 0px;
+  margin-bottom: 10px;
 
   &:focus {
     cursor: text;
@@ -60,16 +60,17 @@ const Input = styled.input`
 
 const FillIndicator = styled.div`
   position: absolute;
-  inset: 3px 2px 4px;
+  inset: 0px 0px 10px;
   transform: scale(var(--percentage), 1);
   transform-origin: top left;
-  background-color: #2d5561;
+  background-color: #b4b4b4;
-  z-index: -1;
+  z-index: 0;
   border-radius: 2px;
-  pointer-events: none;
+  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);
   }
 `
 

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

theatre/studio/src/uiComponents/form/BasicStringInput.tsx

@@ -7,9 +7,9 @@ import useRefAndState from '@theatre/studio/utils/useRefAndState'
 import useOnClickOutside from '@theatre/studio/uiComponents/useOnClickOutside'
 
 const StyledTextarea = styled.textarea.attrs({type: 'text'})`
-  background: transparent;
+  background: #ffffff;
-  border: 1px solid transparent;
+  border: none;
-  color: rgba(0, 146, 255, 1);
+  color: rgba(0, 0, 0, 1);
   padding: 1px 6px;
   font: inherit;
   outline: none;
@@ -17,9 +17,9 @@ const StyledTextarea = styled.textarea.attrs({type: 'text'})`
   text-align: left;
   width: 100%;
   height: calc(100% - 4px);
-  border-radius: 2px;
+  border-radius: 0px;
-  border: 1px solid transparent;
   box-sizing: border-box;
+  margin-bottom: 10px;
 
   &:hover {
     background-color: #10101042;