Use pink from the light theme for grid controls accents (#6708)

**Problem:** The pink/magenta color used in the grid controls should always be the one from the light theme. **Fix:** Use a new `gridControlsPink` color that matches `brandNeonPink` from the light theme. Fixes #6707
concrete-utopia · Dec 6, 2024 · 8c77bb7 · 8c77bb7
1 parent c54189e
commit 8c77bb7
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -970,7 +970,7 @@ const GridControl = React.memo<GridControlProps>(({ grid, controlsVisible }) =>
           const activePositioningTarget = isActiveCell && !dontShowActiveCellHighlight // TODO: move the logic into runGridChangeElementLocation and do not set targetCell prop in these cases
 
           const borderColor = activePositioningTarget
-            ? colorTheme.brandNeonPink.value
+            ? colorTheme.gridControlsPink.value
             : colorTheme.grey65.value
 
           return (
@@ -2702,7 +2702,7 @@ const SnapLine = React.memo(
           height: !isColumn ? 1 : props.container.height * canvasScale,
           top: top * canvasScale,
           left: left * canvasScale,
-          backgroundColor: colorTheme.brandNeonPink.value,
+          backgroundColor: colorTheme.gridControlsPink.value,
           zoom: 1 / canvasScale,
         }}
       >
@@ -2713,7 +2713,7 @@ const SnapLine = React.memo(
               position: 'absolute',
               top: axis === 'column' ? -labelHeight - RulerMarkerIconSize - 5 : -10,
               left: axis === 'row' ? -(labelWidth - RulerMarkerIconSize + 30) : -7,
-              color: colorTheme.brandNeonPink.value,
+              color: colorTheme.gridControlsPink.value,
               fontWeight: 700,
               textAlign: axis === 'row' ? 'right' : undefined,
               width: labelWidth,

diff --git a/editor/src/uuiui/styles/theme/dark.ts b/editor/src/uuiui/styles/theme/dark.ts
@@ -75,6 +75,7 @@ const darkBase = {
   border2: createUtopiColor('#181C20'),
   border3: createUtopiColor('#181C20'),
   bg1transparentgradient: createUtopiColor('radial-gradient(circle, #181C20 15%, #181C2000 80%)'),
+  gridControlsPink: createUtopiColor('oklch(72.2% 0.36 331.7)'), // copy of light theme's brandNeonPink
 }
 
 const darkPrimitives = {

diff --git a/editor/src/uuiui/styles/theme/light.ts b/editor/src/uuiui/styles/theme/light.ts
@@ -75,6 +75,7 @@ const lightBase = {
   border2: createUtopiColor('hsl(0,0%,86%)'),
   border3: createUtopiColor('hsl(0,0%,83%)'),
   bg1transparentgradient: createUtopiColor('radial-gradient(circle, #ffffff 15%, #ffffff00 80%)'),
+  gridControlsPink: createUtopiColor('oklch(72.2% 0.36 331.7)'), // copy of brandNeonPink
 }
 
 const lightPrimitives = {