Remove pink color references in UI

Author: hojberg

src/css/themes/unison/light.css

@@ -18,6 +18,8 @@
   --color-main-alert: var(--color-pink-1);
   --color-main-mark-fg: var(--color-blue-2);
   --color-main-mark-bg: var(--color-transparent);
+  --color-main-error-fg: var(--color-pink-1);
+  --color-main-error-subtle-fg: var(--color-pink-3);
 
   --color-app-header-fg: var(--color-gray-lighten-100);
   --color-app-header-bg: var(--color-gray-darken-10);

src/css/ui/composites/codebase-tree.css

@@ -21,13 +21,13 @@
   flex-direction: row;
   align-items: center;
   margin: 0.5rem 0;
-  color: var(--color-pink-3);
+  color: var(--color-main-error-subtle-fg);
 }
 
 .codebase-tree .error .icon {
   font-size: 1rem;
   margin-right: 0.25rem;
-  color: var(--color-pink-1);
+  color: var(--color-main-error-fg);
 }
 
 .codebase-tree .loading {
@@ -51,27 +51,27 @@
   text-decoration: none;
 }
 
-.codebase-tree .namespace-tree .node > .icon {
+.codebase-tree .namespace-tree .node>.icon {
   font-size: 0.875rem;
   text-align: center;
   margin-right: 0.5rem;
   transition: transform 0.1s ease-out;
   flex-shrink: 0;
 }
 
-.codebase-tree .namespace-tree .node > .icon.expanded {
+.codebase-tree .namespace-tree .node>.icon.expanded {
   transform: rotate(90deg);
 }
 
-.codebase-tree .namespace-tree .node > .icon.caret-right {
+.codebase-tree .namespace-tree .node>.icon.caret-right {
   color: var(--color-sidebar-subtle-fg);
 }
 
-.codebase-tree .namespace-tree .node:hover > .icon.caret-right {
+.codebase-tree .namespace-tree .node:hover>.icon.caret-right {
   color: var(--color-sidebar-focus-fg);
 }
 
-.codebase-tree .namespace-tree .node > label {
+.codebase-tree .namespace-tree .node>label {
   color: var(--color-sidebar-fg);
   transition: all 0.2s;
   cursor: pointer;
@@ -80,14 +80,15 @@
   line-height: 1.875;
 }
 
-.codebase-tree .namespace-tree .node > .tooltip-trigger {
+.codebase-tree .namespace-tree .node>.tooltip-trigger {
   margin-left: auto;
   opacity: 0;
 }
 
-.codebase-tree .namespace-tree .node:hover > .tooltip-trigger {
+.codebase-tree .namespace-tree .node:hover>.tooltip-trigger {
   opacity: 1;
 }
+
 .codebase-tree .namespace-tree .node:hover .tooltip {
   right: -0.3rem;
   min-width: calc(var(--main-sidebar-width) - 1.5rem);
@@ -111,4 +112,4 @@
 
 .codebase-tree .namespace-tree .namespace-content {
   margin-left: 1rem;
-}
+}

src/css/ui/elements.css

@@ -53,7 +53,7 @@ p {
   display: inline-block;
   height: calc(var(--font-size-base) * 0.65);
   border-radius: calc(var(--font-size-base) / 2);
-  background: var(--main-subtle-fg);
+  background: var(--color-main-subtle-fg);
   min-width: calc(var(--font-size-base) * 3);
 }
 
@@ -62,7 +62,7 @@ p {
 }
 
 .error-message {
-  color: var(--color-pink-1);
+  color: var(--color-main-error-fg);
 }
 
 .subtle {
@@ -134,9 +134,11 @@ p {
   flex-direction: row;
   /* gap: 0.25rem; */
 }
+
 .keyboard-shortcut .key {
   margin-right: 0.25rem;
 }
+
 .keyboard-shortcut:last-child .key {
   margin-right: 0;
 }
@@ -165,7 +167,7 @@ p {
   display: inline-flex;
   height: 1.5rem;
   font-size: 0.625rem;
-  line-heigth: 1;
+  line-height: 1;
   margin: 0 0.35rem;
   color: var(--color-keyboard-shortcut-then);
   align-items: center;
@@ -178,4 +180,4 @@ p {
 @import "./elements/fully-qualified-name.css";
 @import "./elements/card.css";
 @import "./elements/hashvatar.css";
-@import "./elements/toolbar.css";
+@import "./elements/toolbar.css";