Extract mixin to get a background with text contrast

This way we simplify the code a bit.

Note we're only using this function when variables for background colors
are already defined, since that means customizing the variable using the
background color will automatically change the color of the text.
Customization isn't easier when using raw colors.

app/assets/stylesheets/admin/machine_learning/setting.scss

@@ -1,8 +1,7 @@
 .admin .machine-learning-setting {
 
   .card-divider {
-    background: $primary-color;
+    @include background-with-text-contrast($primary-color);
-    color: color-pick-contrast($primary-color);
 
     h3 {
       margin-top: 0;

app/assets/stylesheets/admin/menu.scss

@@ -1,8 +1,7 @@
 .admin-sidebar {
-  background: $sidebar;
+  @include background-with-text-contrast($sidebar);
   background: linear-gradient(to bottom, $sidebar 0%, #488fb5 100%);
   border-right: 1px solid $border;
-  color: color-pick-contrast($sidebar);
 
   ul {
     list-style-type: none;

app/assets/stylesheets/budgets/phases.scss

@@ -87,8 +87,7 @@
 
       &[aria-selected="true"],
       &.is-active {
-        background: $dark;
+        @include background-with-text-contrast($dark);
-        color: color-pick-contrast($dark);
         font-weight: normal;
       }
 
@@ -99,8 +98,7 @@
     }
 
     &.current-phase-tab a {
-      background: $brand-secondary;
+      @include background-with-text-contrast($brand-secondary);
-      color: color-pick-contrast($brand-secondary);
       padding-top: $line-height / 2;
 
       &:hover {

app/assets/stylesheets/dashboard.scss

@@ -458,8 +458,7 @@
   max-width: rem-calc(600);
 
   .mail-header {
-    background: $pdf-primary;
+    @include background-with-text-contrast($pdf-primary);
-    color: color-pick-contrast($pdf-primary);
     padding: $line-height * 2;
 
     img {
@@ -513,8 +512,7 @@
 .dashboard-poster-preview,
 .dashboard-poster-pdf {
   .poster-header {
-    background: $pdf-primary;
+    @include background-with-text-contrast($pdf-primary);
-    color: color-pick-contrast($pdf-primary);
 
     h1 {
       text-align: left;

app/assets/stylesheets/layout.scss

@@ -696,8 +696,7 @@ body > header,
 }
 
 .top-links {
-  background: $dark;
+  @include background-with-text-contrast($dark);
-  color: color-pick-contrast($dark);
   display: flex;
   flex-wrap: wrap;
   font-size: $small-font-size;
@@ -808,10 +807,9 @@ body > header,
     padding-bottom: 0;
 
     button {
-      background: $border;
+      @include background-with-text-contrast($border);
       border: 1px solid #ccc;
       border-left: 0;
-      color: color-pick-contrast($border);
       height: $line-height * 1.5;
       line-height: $line-height * 1.5;
       padding-top: 0;
@@ -976,10 +974,9 @@ footer {
 }
 
 .auth-image {
-  background-color: $brand;
+  @include background-with-text-contrast($brand);
   background-repeat: no-repeat;
   background-size: cover;
-  color: color-pick-contrast($brand);
 
   @include breakpoint(medium) {
     min-height: $line-height * 42;

app/assets/stylesheets/milestones.scss

@@ -118,9 +118,8 @@ $progress-bar-color:      #fea230;
 }
 
 .milestone-status {
-  background: $budget;
+  @include background-with-text-contrast($budget);
   border-radius: rem-calc(4);
-  color: color-pick-contrast($budget);
   display: inline-block;
   margin-top: $line-height / 6;
   padding: $line-height / 4 $line-height / 2;

app/assets/stylesheets/mixins/colors.scss

@@ -1,6 +1,10 @@
-@mixin brand-background($color: $brand, $invert-selection: true) {
+@mixin background-with-text-contrast($color) {
   background-color: $color;
   color: color-pick-contrast($color);
+}
+
+@mixin brand-background($color: $brand, $invert-selection: true) {
+  @include background-with-text-contrast($color);
 
   @if $invert-selection {
     @include inverted-selection;

app/assets/stylesheets/participation.scss

@@ -657,8 +657,7 @@
     }
 
     .button-support {
-      background: $budget;
+      @include background-with-text-contrast($budget);
-      color: color-pick-contrast($budget);
       font-size: $base-font-size;
       font-weight: bold;
 
@@ -1483,8 +1482,7 @@
   cursor: pointer;
 
   &:hover {
-    background: $dark;
+    @include background-with-text-contrast($dark);
-    color: color-pick-contrast($dark);
     text-decoration: none;
   }
 }