From 9e2500c1b239b19c719e29d6c27dc4aafd01dea3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20H=C3=B8jberg?= <r.hackr@gmail.com>
Date: Thu, 7 Apr 2022 17:06:13 -0400
Subject: [PATCH] Remove all direct gray color references from UI

---
 src/css/themes/unison/light.css                 | 16 ++++++++++++++++
 src/css/ui/composites/copy-field.css            | 17 +++++++++--------
 src/css/ui/elements.css                         |  3 +--
 src/css/ui/page-layout.css                      |  4 ++--
 .../{ui/elements => unison-share}/banner.css    |  0
 5 files changed, 28 insertions(+), 12 deletions(-)
 rename src/css/{ui/elements => unison-share}/banner.css (100%)

diff --git a/src/css/themes/unison/light.css b/src/css/themes/unison/light.css
index 86fc66d..3362982 100644
--- a/src/css/themes/unison/light.css
+++ b/src/css/themes/unison/light.css
@@ -280,4 +280,20 @@
   --color-syntax-monochrome-em: var(--color-main-fg);
 
   --color-syntax-plain: var(--color-main-fg);
+
+  /* Page Hero Layout */
+  --color-page-hero-fg: var(--color-gray-lighten-100);
+  --color-page-hero-bg: var(--color-gray-darken-10);
+
+  /* CopyField */
+  --color-copy-field-fg: var(--color-gray-darken-25);
+  --color-copy-field-bg: var(--color-gray-lighten-60);
+  --color-copy-field-border: var(--color-gray-lighten-40);
+  --color-copy-field-focus-fg: var(--color-gray-darken-25);
+  --color-copy-field-focus-bg: var(--color-gray-lighten-60);
+  --color-copy-field-focus-border: var(--color-blue-1);
+  --color-copy-field-focus-glow: var(--color-blue-3);
+  --color-copy-field-prefix: var(--color-gray-lighten-20);
+  --color-copy-field-button-border: var(--color-gray-lighten-40);
+  --color-copy-field-button-hover-border: var(--color-gray-lighten-30);
 }
diff --git a/src/css/ui/composites/copy-field.css b/src/css/ui/composites/copy-field.css
index f58a509..dd6c337 100644
--- a/src/css/ui/composites/copy-field.css
+++ b/src/css/ui/composites/copy-field.css
@@ -12,16 +12,16 @@
   position: relative;
   display: flex;
   flex-direction: row;
-  background: var(--color-gray-lighten-60);
-  border: 1px solid var(--color-gray-lighten-40);
+  background: var(--color-copy-field-bg);
+  border: 1px solid var(--color-copy-field-border);
   border-radius: var(--border-radius-base) 0 0 var(--border-radius-base);
   flex-grow: 1;
 }
 
 .copy-field .copy-field-field:focus-within {
-  box-shadow: 0 0 0 2px var(--color-blue-3);
-  border-color: var(--color-blue-1);
-  border-right: 1px solid var(--color-blue-1);
+  box-shadow: 0 0 0 2px var(--color-copy-field-focus-glow);
+  border-color: var(--color-copy-field-focus-border);
+  border-right: 1px solid var(--color-copy-field-focus-border);
   /* z-index is to help cover the left border of the button when focused */
   z-index: 2;
 }
@@ -32,7 +32,7 @@
   font-size: var(--font-size-medium);
   align-items: center;
   display: flex;
-  color: var(--color-gray-lighten-20);
+  color: var(--color-copy-field-prefix);
 }
 
 .copy-field .copy-field-input {
@@ -46,6 +46,7 @@
   font-size: var(--font-size-medium);
   font-weight: 600;
   background: transparent;
+  color: var(--color-copy-field-fg);
 }
 
 .copy-field input:focus {
@@ -56,7 +57,7 @@
 .copy-field button {
   width: 2.25rem;
   height: 2.25rem;
-  border: 1px solid var(--color-gray-lighten-40);
+  border: 1px solid var(--color-copy-field-button-border);
   border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0;
   /* move 1 px left such that borders of field and button overlap
    * (visible when clicking the button) */
@@ -65,7 +66,7 @@
 }
 
 .copy-field button:hover {
-  border-color: var(--color-gray-lighten-30);
+  border-color: var(--color-copy-field-button-hover-border);
   /* z-index is to show the buttons left border on hover */
   z-index: 1;
 }
diff --git a/src/css/ui/elements.css b/src/css/ui/elements.css
index c250d70..5febc5f 100644
--- a/src/css/ui/elements.css
+++ b/src/css/ui/elements.css
@@ -97,7 +97,7 @@ p {
 
 .option-badge .icon {
   font-size: 0.625rem;
-  color: var(--color-gray-option-badge-icon);
+  color: var(--color-option-badge-icon);
   margin-right: 0.375rem;
   line-height: 1;
 }
@@ -172,7 +172,6 @@ p {
 }
 
 @import "./elements/icon.css";
-@import "./elements/banner.css";
 @import "./elements/button.css";
 @import "./elements/tooltip.css";
 @import "./elements/fold-toggle.css";
diff --git a/src/css/ui/page-layout.css b/src/css/ui/page-layout.css
index 4e171f8..0d75551 100644
--- a/src/css/ui/page-layout.css
+++ b/src/css/ui/page-layout.css
@@ -381,8 +381,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--color-gray-darken-10);
-  color: var(--color-gray-lighten-100);
+  background: var(--color-page-hero-bg);
+  color: var(--color-page-hero-fg);
   height: var(--page-hero-height);
 }
 
diff --git a/src/css/ui/elements/banner.css b/src/css/unison-share/banner.css
similarity index 100%
rename from src/css/ui/elements/banner.css
rename to src/css/unison-share/banner.css