Remove all direct gray color references from UI

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);
 }

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;
 }

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";

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);
 }