Color Fixes (#4317)

* fix play mode toolbar submenu padding * tweak bg2 * unify toolbar submenus, bg colors * tweak bg2 dark; * make and use bg1subdued * fix random dark mode responsive blue * element out of bounds arrow is theme-responsive blue * fix scene title bar colors in light mode
concrete-utopia · Oct 4, 2023 · 0b0ddfe · 0b0ddfe
1 parent 4295dcf
commit 0b0ddfe
Show file tree

Hide file tree

Showing 8 changed files with 20 additions and 18 deletions.
diff --git a/editor/src/components/canvas/controls/select-mode/canvas-strategy-picker.tsx b/editor/src/components/canvas/controls/select-mode/canvas-strategy-picker.tsx
@@ -93,7 +93,7 @@ export const CanvasStrategyPicker = React.memo(() => {
               alignItems: 'stretch',
               padding: 4,
               gap: 4,
-              background: colorTheme.bg0.value,
+              background: colorTheme.bg1.value,
               borderRadius: UtopiaTheme.panelStyles.panelBorderRadius,
               boxShadow: UtopiaTheme.panelStyles.shadows.medium,
             }}
@@ -108,7 +108,7 @@ export const CanvasStrategyPicker = React.memo(() => {
                     paddingRight: 4,
                     borderRadius: 6,
                     backgroundColor:
-                      strategy.id === activeStrategy ? colorTheme.bg5.value : undefined,
+                      strategy.id === activeStrategy ? colorTheme.bg3.value : undefined,
                     color: colorTheme.textColor.value,
                     opacity: isStrategyFailure && strategy.id === activeStrategy ? 0.5 : 1,
                   }}

diff --git a/editor/src/components/canvas/controls/select-mode/strategy-indicator.tsx b/editor/src/components/canvas/controls/select-mode/strategy-indicator.tsx
@@ -43,12 +43,12 @@ export const StrategyIndicator = React.memo(() => {
   return (
     <FlexRow
       style={{
-        marginLeft: 15,
+        marginLeft: 8,
         padding: '0 8px',
         height: 32,
         gap: 10,
         overflow: 'hidden',
-        backgroundColor: colorTheme.bg2.value,
+        backgroundColor: colorTheme.bg1subdued.value,
         borderRadius: '0px 10px 10px 10px',
         boxShadow: UtopiaTheme.panelStyles.shadows.medium,
         pointerEvents: 'initial',
@@ -78,12 +78,11 @@ const MoveReorderReparentIndicator = React.memo(() => {
     <FlexRow
       style={{
         height: 32,
-        color: colorTheme.primary.value,
-        minWidth: 110,
+        color: colorTheme.dynamicBlue.value,
+        padding: '0 8px',
       }}
       data-testid={MoveReorderReparentIndicatorID}
     >
-      <Icons.Checkmark color='primary' />
       {indicatorText}
     </FlexRow>
   )

diff --git a/editor/src/components/editor/canvas-toolbar.tsx b/editor/src/components/editor/canvas-toolbar.tsx
@@ -146,7 +146,7 @@ export const CanvasToolbarSearch = React.memo((props: CanvasToolbarSearchProps)
               padding: '0 8px',
               overflow: 'hidden',
               height: 'auto',
-              backgroundColor: theme.bg2.value,
+              backgroundColor: theme.bg1subdued.value,
               borderRadius: '0px 10px 10px 10px',
               boxShadow: UtopiaTheme.panelStyles.shadows.medium,
               pointerEvents: 'initial',
@@ -399,7 +399,7 @@ export const CanvasToolbar = React.memo(() => {
           marginLeft: 8,
           height: 32,
           overflow: 'hidden',
-          backgroundColor: colorTheme.bg2.value,
+          backgroundColor: colorTheme.bg1subdued.value,
           borderRadius: '0px 10px 10px 10px',
           boxShadow: UtopiaTheme.panelStyles.shadows.medium,
           pointerEvents: 'initial',

diff --git a/editor/src/components/editor/elements-outside-visible-area-indicator.tsx b/editor/src/components/editor/elements-outside-visible-area-indicator.tsx
@@ -41,7 +41,7 @@ export const ElementsOutsideVisibleAreaIndicator = React.memo(() => {
           height: 32,
           padding: '0 8px',
           position: 'relative',
-          color: colorTheme.primary.value,
+          color: colorTheme.dynamicBlue.value,
         }}
         onClick={scrollTo}
       >

diff --git a/editor/src/components/editor/remix-navigation-bar.tsx b/editor/src/components/editor/remix-navigation-bar.tsx
@@ -63,6 +63,7 @@ export const RemixNavigationBar = React.memo(() => {
         justifyContent: 'center',
         pointerEvents: 'initial',
         userSelect: 'none',
+        padding: '0 8px',
       }}
       onMouseDown={stopPropagation}
       onClick={stopPropagation}

diff --git a/editor/src/components/navigator/left-pane/github-pane/repository-listing.tsx b/editor/src/components/navigator/left-pane/github-pane/repository-listing.tsx
@@ -111,8 +111,8 @@ const RepositoryRow = (props: RepositoryRowProps) => {
         opacity: loadingRepos || !props.importPermitted ? 0.5 : 1,
         '&:hover': {
           background: colorTheme.dynamicBlue.value,
-          color: colorTheme.fg1.value,
-          svg: { stroke: colorTheme.fg1.value },
+          color: colorTheme.bg1.value,
+          svg: { stroke: colorTheme.bg1.value },
         },
       }}
       onClick={importRepository}

diff --git a/editor/src/uuiui/styles/theme/dark.ts b/editor/src/uuiui/styles/theme/dark.ts
@@ -39,7 +39,8 @@ const darkBase = {
   bg510solid: createUtopiColor('oklch(0.41 0.02 269.74)'),
   bg0: createUtopiColor('#000000'),
   bg1: createUtopiColor('#181C20'),
-  bg2: createUtopiColor('#20232C'),
+  bg1subdued: createUtopiColor('#1e2226'),
+  bg2: createUtopiColor('#232630'),
   bg3: createUtopiColor('#393d49'),
   bg4: createUtopiColor('#55575f'),
   bg5: createUtopiColor('#848998'),

diff --git a/editor/src/uuiui/styles/theme/light.ts b/editor/src/uuiui/styles/theme/light.ts
@@ -26,7 +26,7 @@ const lightBase = {
   componentOrange: createUtopiColor('oklch(68% 0.2 42)'),
   componentPurple: createUtopiColor('oklch(53% 0.31 290)'),
   componentPurple05: createUtopiColor('oklch(53.19% 0.307 289.7 / 5%)'),
-  componentPurple05solid: createUtopiColor('oklch(0.96 0.02 287)'),
+  componentPurple05solid: createUtopiColor('oklch(91.14% 0.018 303.4)'),
   dynamicBlue: createUtopiColor('oklch(59% 0.25 254)'),
   dynamicBlue10: createUtopiColor('oklch(58.98% 0.246 254.39 / 10%)'),
   dynamicBlue30: createUtopiColor('oklch(58.98% 0.246 254.39 / 30%)'),
@@ -35,11 +35,12 @@ const lightBase = {
   unavailableGrey10: createUtopiColor('oklch(0% 0 0 / 10%)'),
   aqua: createUtopiColor('oklch(0.74 0.18 218.28)'),
   aqua10: createUtopiColor('oklch(0.74 0.18 218.28 / 10%)'),
-  aqua05solid: createUtopiColor('oklch(0.95 0.02 208.7)'),
-  bg510solid: createUtopiColor('oklch(0.95 0 0)'),
+  aqua05solid: createUtopiColor('oklch(91.86% 0.016 216.68)'),
+  bg510solid: createUtopiColor('oklch(90.97% 0 0)'),
   bg0: createUtopiColor('hsl(0,0%,100%)'),
   bg1: createUtopiColor('lch(99.5 0.01 0)'),
-  bg2: createUtopiColor('lch(98.0 0.01 0)'),
+  bg1subdued: createUtopiColor('lch(98 0.01 0)'),
+  bg2: createUtopiColor('lch(96.0 0.01 0)'),
   bg3: createUtopiColor('hsl(0,0%,94%)'),
   bg4: createUtopiColor('hsl(0,0%,92%)'),
   bg5: createUtopiColor('hsl(0,0%,90%)'),
@@ -125,7 +126,7 @@ const lightTheme = {
   leftMenuBackground: lightPrimitives.neutralBackground,
   leftPaneBackground: lightPrimitives.neutralBackground,
   inspectorBackground: lightPrimitives.neutralBackground,
-  canvasBackground: lightPrimitives.secondaryBackground,
+  canvasBackground: lightBase.bg4,
   canvasLiveBackground: createUtopiColor('rgba(252,252,252,1)'),
   canvasLiveBorder: lightBase.primary,