Use brand colour for links and buttons by default. Add button hover a…

…nd hover text colours.
frjo · Jan 24, 2022 · 431441e · 431441e
1 parent 6df6316
commit 431441e
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 6 deletions.
diff --git a/assets/sass/_colors.scss b/assets/sass/_colors.scss
@@ -29,7 +29,7 @@ $colors: (
 
   link:                   $black,
   link-visited:           $black,
-  link-hover:             $nearblack,
+  link-hover:             $brand,
   link-active:            $red,
 
   border:                 $grey-light,
@@ -41,14 +41,16 @@ $colors: (
   autocomplete-select-bg: $blue,
 
   body-bg:                $white,
-  header-bg:              $nearblack,
+  header-bg:              $brand,
   backdrop:               $grey-extra-light,
 
-  mobile-menu:            $nearblack,
+  mobile-menu:            $brand,
   mobile-menu-cover:      rgba($black, .2),
 
-  button:                 $nearblack,
+  button:                 $brand,
+  button-hover:           $brand-dark,
   button-text:            $white,
+  button-text-hover:      $white,
   button-disabled:        $grey,
 
   form-error:             $red,

diff --git a/assets/sass/components/button/_button.scss b/assets/sass/components/button/_button.scss
@@ -35,8 +35,8 @@ button,
   &:active {
     // Override any link underlines and color changes.
     text-decoration: none;
-    color: var(--color-button);
-    background-color: var(--color-button-text);
+    color: var(--color-button-text-hover);
+    background-color: var(--color-button-hover);
   }
 }
 
@@ -50,6 +50,18 @@ button,
     @include padding(.1 .5);
   }
 
+  &--alt {
+    color: var(--color-button-text-hover);
+    background-color: var(--color-button-hover);
+
+    &:hover,
+    &:focus,
+    &:active {
+      color: var(--color-button-text);
+      background-color: var(--color-button);
+    }
+  }
+
   &--outline {
     color: var(--color-button);
     background-color: var(--color-button-text);