From ccc66b9bb64b22d5b5e34b533dc8a8edf5dc97ef Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Wed, 17 Apr 2024 13:39:37 +0200
Subject: [PATCH] chore: use navigator colors from ds (#3187)

Trying to align the colors with the design system
---
 .../workspace/canvas-tools/outline/label.tsx  |  2 +-
 .../canvas-tools/outline/outline.tsx          |  2 +-
 .../src/components/tree/tree-node.tsx         | 24 ++++++++++++-------
 3 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/apps/builder/app/builder/features/workspace/canvas-tools/outline/label.tsx b/apps/builder/app/builder/features/workspace/canvas-tools/outline/label.tsx
index d9f10b56b1..98b43944f1 100644
--- a/apps/builder/app/builder/features/workspace/canvas-tools/outline/label.tsx
+++ b/apps/builder/app/builder/features/workspace/canvas-tools/outline/label.tsx
@@ -72,7 +72,7 @@ const LabelContainer = styled(
       },
       variant: {
         default: {
-          backgroundColor: theme.colors.backgroundInfoMain,
+          backgroundColor: theme.colors.backgroundItemCurrent,
         },
         component: {
           backgroundColor: theme.colors.backgroundSuccessMain,
diff --git a/apps/builder/app/builder/features/workspace/canvas-tools/outline/outline.tsx b/apps/builder/app/builder/features/workspace/canvas-tools/outline/outline.tsx
index a6337652ac..c7f40231d6 100644
--- a/apps/builder/app/builder/features/workspace/canvas-tools/outline/outline.tsx
+++ b/apps/builder/app/builder/features/workspace/canvas-tools/outline/outline.tsx
@@ -30,7 +30,7 @@ const baseStyle = css({
   variants: {
     variant: {
       default: {
-        outline: `1px solid ${theme.colors.backgroundInfoMain}`,
+        outline: `1px solid ${theme.colors.backgroundItemCurrent}`,
         outlineOffset: -1,
       },
       collaboration: {
diff --git a/packages/design-system/src/components/tree/tree-node.tsx b/packages/design-system/src/components/tree/tree-node.tsx
index cec45b1f43..c69f861751 100644
--- a/packages/design-system/src/components/tree/tree-node.tsx
+++ b/packages/design-system/src/components/tree/tree-node.tsx
@@ -14,7 +14,7 @@ import {
 import { Box } from "../box";
 import { Flex } from "../flex";
 import { Text } from "../text";
-import { styled } from "../../stitches.config";
+import { styled, type CSS } from "../../stitches.config";
 import { theme } from "../../stitches.config";
 import {
   type ItemId,
@@ -86,9 +86,11 @@ const NestingLine = styled(Box, {
   height: ITEM_HEIGHT,
   borderRight: "solid",
   borderRightWidth: 1,
-  borderColor: theme.colors.slate9,
+  borderColor: theme.colors.borderItemChildLine,
   variants: {
-    isSelected: { true: { borderColor: theme.colors.blue7 } },
+    isSelected: {
+      true: { borderColor: theme.colors.borderItemChildLineCurrent },
+    },
   },
 });
 
@@ -156,13 +158,14 @@ const SuffixContainer = styled(Flex, {
   pointerEvents: `var(${suffixContainerVars.pointerEvents})`,
 });
 
-const hoverStyle = {
+const hoverStyle: CSS = {
   content: "''",
   position: "absolute",
   left: 2,
   right: 2,
   height: ITEM_HEIGHT,
-  border: `solid ${theme.colors.blue10}`,
+  borderStyle: "solid",
+  borderColor: theme.colors.borderFocus,
   borderWidth: 2,
   borderRadius: theme.borderRadius[6],
   pointerEvents: "none",
@@ -170,7 +173,7 @@ const hoverStyle = {
 };
 
 const ItemContainer = styled(Flex, {
-  color: theme.colors.hiContrast,
+  color: theme.colors.foregroundMain,
   alignItems: "center",
   position: "relative",
   ...getItemButtonCssVars({ suffixVisible: false }),
@@ -178,10 +181,15 @@ const ItemContainer = styled(Flex, {
 
   variants: {
     isSelected: {
-      true: { color: theme.colors.loContrast, bc: theme.colors.blue10 },
+      true: {
+        color: theme.colors.foregroundContrastMain,
+        bc: theme.colors.backgroundItemCurrent,
+      },
     },
     parentIsSelected: {
-      true: { bc: theme.colors.blue4 },
+      true: {
+        bc: theme.colors.backgroundItemCurrentChild,
+      },
     },
     suffixVisible: {
       true: {