From b62b7a54ee4c5cd04e1157a74cf79ab8acdf5c8f Mon Sep 17 00:00:00 2001
From: qum <qum@miamioh.edu>
Date: Mon, 23 Nov 2020 21:15:41 -0500
Subject: [PATCH] updated button styles in color-test page

---
 assets/_scss/_color-test.scss | 40 +++++++++++++++++++++++++----------
 color-test.md                 |  6 +++---
 2 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/assets/_scss/_color-test.scss b/assets/_scss/_color-test.scss
index cb08a2a1..3d9d34e3 100644
--- a/assets/_scss/_color-test.scss
+++ b/assets/_scss/_color-test.scss
@@ -20,6 +20,9 @@ $cultured-white-lighter: #FFF;
 $turquoise-lighter: lighten($turquoise, 10%);
 $crayola-pink-lighter: lighten($crayola-pink, 10%);
 $honey-yellow-lighter: lighten($honey-yellow, 10%);
+$turquoise-darker: darken($turquoise, 10%);
+$crayola-pink-darker: darken($crayola-pink, 10%);
+$honey-yellow-darker: darken($honey-yellow, 10%);
 //
 // Settings
 // --------------------------------------------------
@@ -37,9 +40,15 @@ $honey-yellow-lighter: lighten($honey-yellow, 10%);
     color: $turquoise !important;
 }
 
+// .CT-body a:hover, .CT-body a:focus {
+//     background-color: $black !important;
+//     color: $cultured-white !important;
+// }
+
+
+// Alternative hover effect:
 .CT-body a:hover, .CT-body a:focus {
-    background-color: $black !important;
-    color: $cultured-white !important;
+    color: $crayola-pink !important;
 }
 
 .CT-body hr{
@@ -74,7 +83,9 @@ $honey-yellow-lighter: lighten($honey-yellow, 10%);
     background-color: $honey-yellow;
     color: $black;
     &:hover {
-        background-color: $honey-yellow-lighter;
+        background-color: transparent;
+        color: $honey-yellow-lighter;
+        border-color: $honey-yellow-darker;
     }
 }
 
@@ -82,8 +93,9 @@ $honey-yellow-lighter: lighten($honey-yellow, 10%);
     border-color: $honey-yellow;
     color: $honey-yellow;
     &:hover {
-        border-color: $honey-yellow-lighter;
-        color: $honey-yellow-lighter;
+        background-color: $honey-yellow;
+        color: black;
+        border-color: $honey-yellow-darker;
     }
 }
 
@@ -91,7 +103,9 @@ $honey-yellow-lighter: lighten($honey-yellow, 10%);
     background-color: $crayola-pink;
     color: $black;
     &:hover {
-        background-color: $crayola-pink-lighter;
+        background-color: transparent;
+        color: $crayola-pink;
+        border-color: $crayola-pink-darker;
     }
 }
 
@@ -99,8 +113,9 @@ $honey-yellow-lighter: lighten($honey-yellow, 10%);
     border-color: $crayola-pink;
     color: $crayola-pink;
     &:hover {
-        border-color: $crayola-pink-lighter;
-        color: $crayola-pink-lighter;
+        background-color: $crayola-pink;
+        color: black;
+        border-color: $crayola-pink-darker;
     }
 }
 
@@ -108,7 +123,9 @@ $honey-yellow-lighter: lighten($honey-yellow, 10%);
     background-color: $turquoise;
     color: $black;
     &:hover {
-        background-color: $turquoise-lighter;
+        background-color: transparent;
+        color: $turquoise-lighter;
+        border-color: $turquoise-darker;
     }
 }
 
@@ -116,8 +133,9 @@ $honey-yellow-lighter: lighten($honey-yellow, 10%);
     border-color: $turquoise;
     color: $turquoise;
     &:hover {
-        border-color: $turquoise-lighter;
-        color: $turquoise-lighter;
+        background-color: $turquoise;
+        color: black;
+        border-color: $turquoise-darker;
     }
 }
 
diff --git a/color-test.md b/color-test.md
index f9cf133c..11798b67 100644
--- a/color-test.md
+++ b/color-test.md
@@ -16,18 +16,18 @@ title: Color Test Page
 visual components (icons, etc.).
 
 - Turquoise (#00D5C0) can be used as a foreground with Oxford Blue (#061A40) or Dark Jungle Green (#041F1E) background
-with sufficient contrast to WCAG 2.0 AAA for regular font, larger font, and visual components (icons, etc.).
+with sufficient contrast to WCAG 2.0 AAA for regular font, [larger font](#), and visual components (icons, etc.).
 
 - Shocking Crayola Pink (#FA62F0) can be used as a foreground with Dark Jungle Green (#041F1E) background for WCAG AA,
 but it does not meet WCAG AAA for regular font (large font and visual components like icons okay).
 
-- For any other combination (e.g. "Cultured" white (#F5F5F5) on Turquoise (#00D5C0) , Shocking Crayola Pink (#FA62F0) on
+- For any other combination (e.g. ["Cultured" white (#F5F5F5)](#) on Turquoise (#00D5C0) , Shocking Crayola Pink (#FA62F0) on
 Oxford Blue (#061A40), do a test.)
 
 - Feel free to use shades or tints of colors to achieve accessible results.
 
+## [Buttons](#)
 <div class="mt-5">
-##Buttons
     <p>Customized buttons here <button class="btn ct-btn-light">button light</button> <button type="button" class="btn ct-btn-outline-light">light outline</button></p>
     <p>Customized buttons here <button class="btn ct-btn-middle">button middle</button> <button type="button" class="btn ct-btn-outline-middle">middle outline</button></p>
     <p>Customized buttons here <button class="btn ct-btn-dark">button dark</button> <button type="button" class="btn ct-btn-outline-dark">middle dark</button></p>