Design System Audit Color Swap Red (hackforla#3730)

* all instances of #fa114f changed to $color-red * removed lines 46-48 and added span tag with color class to lines 116 and 119. * changed instances of rgb(255, 173, 173) changed to $color-salmon * Changed instances of rgb(250, 17, 79) to $color-red
kgold2018 · Dec 10, 2022 · 34e1fb8 · 34e1fb8
1 parent 6002ae3
commit 34e1fb8
Show file tree

Hide file tree

Showing 8 changed files with 18 additions and 18 deletions.
diff --git a/_guide-pages/how-to-set-reminders-in-slack.md b/_guide-pages/how-to-set-reminders-in-slack.md
@@ -42,9 +42,9 @@ guide-author:
 ---
 
 <style>
-  
+
   code {
-    color: #FA114F;
+    color: $color-red;
   }
 
   h1 {
@@ -117,10 +117,10 @@ Reminders can be set up in two ways:
   ![alt_text](../assets/images/guides/how-to-set-reminders-in-slack/image10.png#content "image_tooltip")
 
 2. To Whom? @ or # <br>
-
+<span class="color-red">
    `If to a specific person: @someone` <br>
    `If the entire channel: #channel`
-
+<span>
 3. In quotes write the reminder text you want the Bot to send out.
 
 4. Last, input day and time you want the Bot to send out the message. **NOTE: the time zone listed will be your time zone.**

diff --git a/_layouts/guides.html b/_layouts/guides.html
@@ -95,9 +95,9 @@ <h1>Guide Authors</h1>
         </div>
 
         <p><b>Help us make this guide better:</b></p>
-        <p>If you are a member of the Hack for LA community you can post any comments directly in the iterative version of this guide: <a href="https://www.google.com/"style="color: #fa114f;" >{{page.title}}</a>.</p>
+        <p>If you are a member of the Hack for LA community you can post any comments directly in the iterative version of this guide: <a href="https://www.google.com/"style="color: $color-red;" >{{page.title}}</a>.</p>
 
-        <p>If you are outside the Hack for LA community, please use this <a href="https://www.google.com/"style="color: #fa114f;" >feedback form</a> to provide suggestions for improvement or how the guide is useful for you.</p>
+        <p>If you are outside the Hack for LA community, please use this <a href="https://www.google.com/"style="color: $color-red;" >feedback form</a> to provide suggestions for improvement or how the guide is useful for you.</p>
 
       </div>
 

diff --git a/_sass/components/_about.scss b/_sass/components/_about.scss
@@ -152,7 +152,7 @@ a.anchor {
   float: right;
   transform: rotate(-45deg);
   transition: transform 0.25s ease-in;
-  color: rgb(250, 17, 79);
+  color: $color-red;
   font-weight: bolder;
   font-size: 24px;
 }
@@ -173,7 +173,7 @@ a.anchor {
   float: right;
   transform: rotate(-45deg);
   transition: transform 0.25s ease-in;
-  color: rgb(250, 17, 79);
+  color: $color-red;
   font-weight: bolder;
   font-size: 24px;
 }
@@ -207,7 +207,7 @@ a.anchor {
   position: absolute;
   margin-left: 10px;
   transform: rotate(-45deg);
-  color: rgb(250, 17, 79);
+  color: $color-red;
   font-weight: bolder;
   font-size: 16px;
 }
@@ -224,7 +224,7 @@ a.anchor {
   position: absolute;
   margin-left: 10px;
   transform: rotate(135deg);
-  color: rgb(250, 17, 79);
+  color: $color-red;
   font-weight: bolder;
   font-size: 16px;
 }

diff --git a/_sass/components/_guides.scss b/_sass/components/_guides.scss
@@ -35,7 +35,7 @@
 
 .hero-heading--guides {
 	text-decoration: underline;
-	text-decoration-color: #fa114f;
+	text-decoration-color: $color-red;
 }
 
 /* ==========================================================*/
@@ -45,7 +45,7 @@
 /* ==========================================================*/
 
 .guide-links a {
-	color: #fa114f;
+	color: $color-red;
 }
 
 .guide-links ul {
@@ -91,7 +91,7 @@ img[src*='#examples'] {
 	z-index: 99;
 	border: none;
 	outline: none;
-	background-color: #fa114f;
+	background-color: $color-red;
 	color: white;
 	cursor: pointer;
 	padding: 15px;
@@ -137,7 +137,7 @@ img[src*='#examples'] {
 }
 
 .sticky-nav--guides a {
-	color: #fa114f;
+	color: $color-red;
 	text-decoration: none;
 }
 

diff --git a/_sass/components/_home.scss b/_sass/components/_home.scss
@@ -329,7 +329,7 @@ button {
 }
 
 .status-Completed {
-  background-color: rgb(255, 173, 173);
+  background-color: $color-salmon;
 }
 
 .project-card-field-inline {

diff --git a/_sass/components/_projects-page.scss b/_sass/components/_projects-page.scss
@@ -106,7 +106,7 @@
   }
 
   .status-Completed {
-    background-color: rgb(255, 173, 173);
+    background-color: $color-salmon;
   }
 
   .project-card-field-inline {

diff --git a/_sass/components/_projects.scss b/_sass/components/_projects.scss
@@ -106,7 +106,7 @@
 }
 
 .status-Completed {
-  background-color: rgb(255, 173, 173);
+  background-color: $color-salmon;
 }
 
 .project-card-field-inline {

diff --git a/pages/guides.html b/pages/guides.html
@@ -105,7 +105,7 @@ <h1>Guide Authors</h1>
       </div>
 
       <p><b>Help us make this guide better:</b></p>
-      <p>If you are a member of the Hack for LA community you can post any comments directly in the iterative version of this guide: <a href="https://www.google.com/"style="color: #fa114f;" >{{page.title}}</a>.</p>
+      <p>If you are a member of the Hack for LA community you can post any comments directly in the iterative version of this guide: <a href="https://www.google.com/"style="color: $color-red;" >{{page.title}}</a>.</p>
 
       <p>If you are outside the Hack for LA community, please use this feedback form to provide suggestions for improvement or how the guide is useful for you.</p>