chore: Move more hardcoded colors to variables - refs #157127

eea · Jul 5, 2023 · 78bfad7 · 78bfad7
1 parent fe14e49
commit 78bfad7
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 13 deletions.
diff --git a/src/SearchBlock/edit.less b/src/SearchBlock/edit.less
@@ -1,9 +1,11 @@
+@import '~./less/variables.less';
+
 @overlayZIndex: 1;
 
 .cms-ui {
   .aboveSearchblockOverlay {
     padding: 0.4rem;
-    background: #ffe5ea;
+    background: @pinkWhite;
   }
 }
 

diff --git a/src/SearchBlock/less/variables.less b/src/SearchBlock/less/variables.less
@@ -23,6 +23,7 @@ Colors
 @mediumDarkWhite: #ebebeb;
 @blueWhite: #edf0fd;
 @greyWhite: #ddd;
+@pinkWhite: #ffe5ea;
 @dimmedWhite: rgba(255, 255, 255, 0.5);
 @darkDimmedWhite: #ffffff81;
 
@@ -45,6 +46,7 @@ Colors
 @dimmedGray: rgba(249, 249, 249, 0.4);
 @dimmedDarkGray: rgba(59, 69, 79, 0.3);
 
+@s-light-gray: #edf1f2;
 @s-medium-gray: #e0e1e2;
 @s-medium-gray2: #545454;
 @sf-light-gray: #f2f2f2;
@@ -60,10 +62,14 @@ Colors
 @dimmedLightBlack: rgba(0, 0, 0, 0.25);
 @dimmedBlack: rgba(0, 0, 0, 0.3);
 @midDimmedBlack: rgba(0, 0, 0, 0.4);
+@s-medium-dimmed-gray: rgba(0, 0, 0, 0.67);
+@s-dark-gray: rgba(0, 0, 0, 0.87);
 @darkDimmedBlack: #000000ee;
 
 // Yellow Colors
+@s-light-orange: #ffdfbb;
 @brightYellow: #ffb821;
+@s-dark-orange: #9c5a0a;
 
 /*-------------------
 Base Sizes

diff --git a/src/SearchBlock/styles-old.less b/src/SearchBlock/styles-old.less
@@ -7,14 +7,8 @@
 @type: extra;
 @element: custom;
 
-@import (multiple) '~@eeacms/search-less/theme.less';
-
-@s-dark-gray: rgba(0, 0, 0, 0.87);
-@s-medium-gray2: rgba(0, 0, 0, 0.67);
-@s-medium-gray: #e0e1e2;
-@s-light-gray: #edf1f2;
-@s-light-orange: #ffdfbb;
-@s-dark-orange: #9c5a0a;
+// @import (multiple) '~@eeacms/search-less/theme.less';
+@import '~./less/variables.less';
 
 .sui-multi-checkbox-facet__option-input-wrapper {
   max-width: 15em;
@@ -41,12 +35,12 @@ a.centered.fluid.image.img-thumbnail {
 }
 
 .ui.cards > .card .meta {
-  color: @s-medium-gray2 !important;
+  color: @s-medium-dimmed-gray !important;
 }
 
 .sui-search-box #exact-phrases-facet label {
   padding-left: 3rem !important;
-  color: black !important;
+  color: @black !important;
 }
 
 div#page-document {
@@ -181,11 +175,11 @@ div#page-document {
       }
 
       .ui.divider {
-        border-top: 1px solid #000 !important;
+        border-top: 1px solid @black !important;
       }
 
       div.ui.label {
-        background: white;
+        background: @white;
       }
 
       button {