Extract code to define brand background

Setting the color to `$white` or `#fff` while setting the background to
`$brand` is a pattern we were using in many places. Since we're going to
edit it in order to fix the `::selection` behavior, we're defining the
pattern in one place.

app/assets/stylesheets/budgets/phases.scss

@@ -102,8 +102,7 @@
     }
 
     &.current-phase-tab a {
-      background: $brand;
+      @include brand-background;
-      color: $white;
       padding-top: $line-height / 2;
 
       &:hover {
@@ -141,9 +140,8 @@
     .budget-next-phase,
     .budget-prev-phase-disabled,
     .budget-next-phase-disabled {
-      background: $brand;
+      @extend %brand-background;
       border-radius: rem-calc(3);
-      color: $white;
       display: flex;
       font-size: rem-calc(36);
       height: 1em * 4 / 3;

app/assets/stylesheets/datepicker_overrides.scss

@@ -2,8 +2,7 @@
 //
 
 .ui-datepicker-header {
-  background: $brand;
+  @extend %brand-background;
-  color: #fff;
   font-weight: bold;
 }
 
@@ -16,8 +15,7 @@
 
   .ui-state-hover,
   .ui-state-active {
-    background: $brand;
+    @extend %brand-background;
-    color: #fff;
   }
 
   thead {

app/assets/stylesheets/layout.scss

@@ -30,8 +30,7 @@
 // -----------------
 
 ::selection {
-  color: #fff;
+  @include brand-background;
-  background-color: $brand;
 }
 
 html,
@@ -386,7 +385,7 @@ a {
 }
 
 .pagination .current {
-  background: $brand;
+  @extend %brand-background;
 }
 
 .pagination li {
@@ -489,7 +488,7 @@ a {
 
 body > header,
 .wrapper > header {
-  background: $brand;
+  @extend %brand-background;
   border-bottom: 1px solid $border;
   margin-bottom: $line-height;
 
@@ -552,8 +551,7 @@ body > header,
 }
 
 .top-bar {
-  background: $brand !important;
+  @extend %brand-background;
-  color: #fff;
   padding-bottom: 0;
   padding-top: 0;
 
@@ -941,8 +939,7 @@ footer {
 
   &:hover,
   &.is-active {
-    background: $brand;
+    @extend %brand-background;
-    color: #fff;
   }
 }
 

app/assets/stylesheets/legislation_process.scss

@@ -239,8 +239,7 @@
 
       &:hover,
       &:active {
-        background: $brand;
+        @extend %brand-background;
-        color: #fff;
         text-decoration: none;
       }
     }

app/assets/stylesheets/mixins/colors.scss

@@ -0,0 +1,8 @@
+@mixin brand-background {
+  background-color: $brand;
+  color: $white;
+}
+
+%brand-background {
+  @include brand-background;
+}