Design System Audit: Audit for hardcoded colors (#4783)

* Change hardcoded value to a variable * Change color values to color variables
hackforla · Jun 14, 2023 · 6d33e6c · 6d33e6c
1 parent 214d5ad
commit 6d33e6c
Show file tree

Hide file tree

Showing 6 changed files with 8 additions and 8 deletions.
diff --git a/_sass/components/_donate-components.scss b/_sass/components/_donate-components.scss
@@ -54,7 +54,7 @@
 
 .inside-circle-text {
     text-align: center;
-    color: #030D2D;
+    color: $color-darkblue;
     margin: 0;    
 }
 
@@ -66,7 +66,7 @@
 .circle-title{
     padding: 0.5em;
     font-size: 1.5em;
-    color: #030D2D;
+    color: $color-darkblue;
     margin: 0;
 }
 

diff --git a/_sass/components/_home.scss b/_sass/components/_home.scss
@@ -321,7 +321,7 @@ button {
 }
 
 .status-Active {
-  background-color: rgb(187, 255, 187);
+  background-color: $color-lightgreen;
 }
 
 .status-Rebooting {

diff --git a/_sass/components/_privacy-policy.scss b/_sass/components/_privacy-policy.scss
@@ -66,7 +66,7 @@
       line-height: 1.375;
       font-family: "Roboto", sans-serif;
       font-weight: 400;
-      color: #333;
+      color: $color-black;
     }
     h2 {
       margin-top: 32px;

diff --git a/_sass/components/_project-page.scss b/_sass/components/_project-page.scss
@@ -254,15 +254,15 @@
     margin-right: -40px;
     margin-bottom: -65px;
     padding: 26px 33px 33px 50px;
-    background: #F7F5F5;
+    background: $color-pink;
     border-top-left-radius: 0px;
     border-top-right-radius: 0px;
   }
 }
 
 .sdg-description-grid-item {
   padding: 25px 19px;
-  background: #F6F6F6;
+  background: $color-whitesmoke;
   border-radius: 0px 0px 10px 10px;
   height: 80%;
 

diff --git a/_sass/components/_projects-page.scss b/_sass/components/_projects-page.scss
@@ -98,7 +98,7 @@
   }
 
   .status-Active {
-    background-color: rgb(187, 255, 187);
+    background-color: $color-lightgreen;
   }
 
   .status-Rebooting {

diff --git a/_sass/components/_projects.scss b/_sass/components/_projects.scss
@@ -98,7 +98,7 @@
 }
 
 .status-Active {
-  background-color: rgb(187, 255, 187);
+  background-color: $color-lightgreen;
 }
 
 .status-Rebooting {