Fix invisible text selection on brand text

When an element had a text using the brand color and was a child of an
element with a brand background, the selection was invisible.

app/assets/stylesheets/admin.scss

@@ -204,8 +204,8 @@ $table-header:   #ecf1f6;
       line-height: $line-height * 2;
 
       .button {
+        @include brand-text;
         background: #fff;
-        color: $brand;
       }
     }
   }
@@ -677,7 +677,7 @@ code {
     display: block;
 
     &.is-active {
-      color: $brand;
+      @include brand-text;
       font-weight: bold;
       text-decoration: underline;
     }

app/assets/stylesheets/dashboard.scss

@@ -320,7 +320,7 @@
   }
 
   .is-active {
-    color: $brand;
+    @include brand-text;
     position: relative;
 
     &::before {
@@ -335,7 +335,7 @@
     }
 
     a {
-      color: $brand;
+      @include brand-text;
 
       ~ a {
         color: $text;
@@ -343,7 +343,7 @@
     }
 
     [class^="icon-"] {
-      color: $brand;
+      @include brand-text;
     }
   }
 
@@ -358,7 +358,7 @@
     border-bottom: 2px solid $brand;
 
     .has-tip {
-      color: $brand;
+      @include brand-text;
       font-weight: bold;
     }
   }

app/assets/stylesheets/layout.scss

@@ -29,8 +29,8 @@
 // 01. Global styles
 // -----------------
 
-::selection {
+* {
-  @include brand-background($invert-selection: false);
+  @include normal-selection;
 }
 
 html,
@@ -96,6 +96,7 @@ a {
 }
 
 .button.hollow {
+  @include normal-selection;
   border: 1px solid $link;
   color: $link;
 }
@@ -248,12 +249,12 @@ a {
     }
 
     &.is-active {
+      @include brand-text;
       border-bottom: 2px solid $brand;
-      color: $brand;
       padding-bottom: rem-calc(1);
 
       h2 a {
-        color: $brand;
+        @include brand-text;
       }
     }
 
@@ -279,8 +280,8 @@ a {
       padding: 0;
 
       &.is-active {
+        @include brand-text;
         font-weight: bold;
-        color: $brand;
       }
     }
 
@@ -289,8 +290,8 @@ a {
     }
 
     &.is-active {
+      @include brand-text;
       border-bottom: 2px solid $brand;
-      color: $brand;
     }
   }
 
@@ -352,15 +353,15 @@ a {
     position: relative;
 
     &:hover {
+      @include brand-text;
       background: none;
-      color: $brand;
       text-decoration: none;
     }
 
     &[aria-selected="true"],
     &.is-active {
+      @include brand-text;
       border-bottom: 0;
-      color: $brand;
       font-weight: bold;
 
       &::after {
@@ -527,11 +528,11 @@ body > header,
       padding: rem-calc(6);
 
       [type="submit"] {
+        @include brand-text;
         background: none;
         border: 0;
         cursor: pointer;
         font-weight: bold;
-        color: $brand;
 
         &:hover {
           text-decoration: underline;
@@ -615,8 +616,8 @@ body > header,
       text-align: left;
 
       @include breakpoint(medium) {
+        @include brand-text;
         background: #fff;
-        color: $brand;
         text-align: center;
       }
     }
@@ -776,8 +777,8 @@ body > header,
       color: #fff;
 
       @include breakpoint(medium) {
+        @include brand-text;
         border-bottom: 2px solid $brand;
-        color: $brand;
       }
     }
   }
@@ -848,8 +849,8 @@ body > header,
   }
 
   .is-active {
+    @include brand-text;
     border-bottom: 2px solid $brand;
-    color: $brand;
 
     &:hover {
       text-decoration: none;
@@ -1638,7 +1639,7 @@ table {
     text-decoration: none;
 
     &:hover {
-      color: $brand;
+      @include brand-text;
     }
   }
 }

app/assets/stylesheets/legislation_process.scss

@@ -144,8 +144,8 @@
     margin-bottom: rem-calc(40);
 
     .debate-type {
+      @include brand-text;
       text-transform: uppercase;
-      color: $brand;
       font-weight: 700;
       font-size: $small-font-size;
 
@@ -155,7 +155,7 @@
     }
 
     .debate-title a {
-      color: $brand;
+      @include brand-text;
     }
   }
 
@@ -208,7 +208,7 @@
     }
 
     h4 a {
-      color: $brand;
+      @include brand-text;
 
       &:hover {
         text-decoration: none;
@@ -225,8 +225,8 @@
     }
 
     .quiz-next {
+      @include brand-text;
       background: #ccdbe5;
-      color: $brand;
       font-size: $small-font-size;
       font-weight: bold;
       text-align: right;

app/assets/stylesheets/mixins/buttons.scss

@@ -15,6 +15,7 @@
 
 @mixin hollow-button($color: $link) {
   @include button($style: hollow, $background: $color);
+  @include normal-selection;
   @extend %button;
   margin-bottom: 0;
 }

app/assets/stylesheets/mixins/colors.scss

@@ -7,6 +7,19 @@
   }
 }
 
+@mixin brand-text {
+  @include normal-selection;
+  color: $brand;
+}
+
+@mixin normal-selection {
+
+  &::selection,
+  *::selection {
+    @include brand-background($invert-selection: false);
+  }
+}
+
 @mixin inverted-selection {
 
   &::selection,
@@ -19,3 +32,7 @@
 %brand-background {
   @include brand-background;
 }
+
+%brand-text {
+  @include brand-text;
+}

app/assets/stylesheets/pages.scss

@@ -52,7 +52,7 @@
 .more-info-content {
 
   h3 {
-    color: $brand;
+    @include brand-text;
   }
 
   .additional-info {

app/assets/stylesheets/participation.scss

@@ -991,7 +991,7 @@
   }
 
   .is-active {
-    color: $brand;
+    @include brand-text;
 
     &::after {
       content: "\6c";
@@ -1211,15 +1211,15 @@
   }
 
   .button {
+    @include brand-text;
     background: #fff;
-    color: $brand;
     margin-bottom: rem-calc(3);
     text-decoration: none;
   }
 }
 
 .current-phase {
-  color: $brand;
+  @include brand-text;
 }
 
 .progress-votes {