chore: Move hardcoded colors to variables - refs #157127

eea · Jul 4, 2023 · fe14e49 · fe14e49
1 parent f80b75d
commit fe14e49
Show file tree

Hide file tree

Showing 11 changed files with 171 additions and 140 deletions.
diff --git a/src/SearchBlock/less/answersbox.less b/src/SearchBlock/less/answersbox.less
@@ -29,7 +29,7 @@
 
     .loading-tip {
       z-index: 2;
-      color: black;
+      color: @black;
       font-size: x-large;
     }
   }
@@ -51,8 +51,8 @@
 }
 
 .answer__highlighted {
-  background-color: @paleLavender;
-  color: black;
+  background-color: @lightLavender;
+  color: @black;
 }
 
 .answers-feedback {

diff --git a/src/SearchBlock/less/datahub.less b/src/SearchBlock/less/datahub.less
@@ -186,7 +186,7 @@
   .dataset-view {
     .dataset-container:not(:first-of-type) {
       padding-top: 2.5em;
-      border-top: 1px solid #eee;
+      border-top: 1px solid @lighterGray;
     }
   }
 
@@ -210,7 +210,7 @@
 
   .ui.accordion {
     .active.title {
-      background-color: #efefef;
+      background-color: @mediumWhite;
       color: @deepBlue;
     }
 
@@ -246,8 +246,8 @@
   .info-wrapper {
     padding: 2em;
     margin: 3em 0;
-    background-color: #f9f9f9;
-    color: #2e3e4c;
+    background-color: @grey-1;
+    color: @lightBlack;
     font-size: 18px;
 
     .info-content {
@@ -304,7 +304,7 @@
     display: inline-block;
     padding: 2px 5px;
     margin: 5px;
-    background: #dcdcdc;
+    background: @whiteGray;
     border-radius: 0.5em;
     color: @black;
     font-size: 12px;
@@ -367,7 +367,7 @@
 
   .ui.label.archived-item {
     margin-right: 0.5em;
-    background-color: #ffb821;
+    background-color: @brightYellow;
     border-radius: 0.25em;
   }
 }
@@ -413,7 +413,7 @@
   white-space: nowrap;
 
   &:not(.inverted) {
-    background-color: #d3d3d3;
+    background-color: @mediumGray;
   }
 
   &.inverted {

diff --git a/src/SearchBlock/less/dropdown-filterlist.less b/src/SearchBlock/less/dropdown-filterlist.less
@@ -1,7 +1,7 @@
 .searchlib-block {
   .ui.dimmer.facet-dimmer {
     position: fixed;
-    background-color: rgba(249, 249, 249, 0.4) !important;
+    background-color: @dimmedGray !important;
   }
 
   .dropdown-facets-list {
@@ -15,7 +15,7 @@
         overflow: hidden;
         padding: 0.5em 1em;
         margin-bottom: 0;
-        background-color: white;
+        background-color: @white;
 
         i.icon {
           position: relative;
@@ -31,7 +31,7 @@
         &.active {
           > .facet-title {
             z-index: 99999 !important;
-            box-shadow: 0 5px 0 @white, 0 0 4px rgba(0, 0, 0, 0.25);
+            box-shadow: 0 5px 0 @white, 0 0 4px @dimmedLightBlack;
             color: @pineGreen;
             font-weight: 700;
           }
@@ -50,10 +50,10 @@
         max-width: 400px;
         padding: 1em;
         border: none;
-        border-bottom: 0.5px solid #4c677f;
+        border-bottom: 0.5px solid @blue-grey-4;
         margin-top: -6px;
         background-color: @white;
-        box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
+        box-shadow: 0px 0px 4px @dimmedLightBlack;
 
         .histogram-facet {
           width: 350px;
@@ -80,8 +80,8 @@
     }
 
     .ui.right.sidebar {
-      background-color: white;
-      box-shadow: -4px 0px 4px rgba(0, 0, 0, 0.25);
+      background-color: @white;
+      box-shadow: -4px 0px 4px @dimmedLightBlack;
     }
 
     .visible.sidebar {
@@ -197,7 +197,7 @@
     &.disabled {
       .header,
       span.count {
-        color: #bfbfbf;
+        color: @midDarkerGray;
       }
     }
 
@@ -277,7 +277,7 @@
   }
 
   .sui-facet-search {
-    border: 0.5px solid #c4c4c4;
+    border: 0.5px solid @midDarkGray;
     margin: 0.7em 0;
     border-radius: 0;
     font-size: 14px;
@@ -382,7 +382,7 @@
       left: 5px;
       width: 4px;
       height: 9px;
-      border: solid white;
+      border: solid @white;
       border-width: 0 2px 2px 0;
       -webkit-transform: rotate(45deg);
       -ms-transform: rotate(45deg);
@@ -396,7 +396,7 @@
     }
 
     ::-webkit-scrollbar-track {
-      background-color: #d9d9d9;
+      background-color: @darkWhiteGray;
       border-radius: 10px;
     }