Use color-pick-contrast to get text colors

We were defining (for instance) white text against the `$brand`
background. That meant that, if somebody customized the `$brand` color
so it used a light color, they had to customize the text color as well
in order to guarantee proper contrast between text and background
colors.

So we're using `color-pick-contrast` instead, which means we don't have
to manually calculate whether white or black will be the color which
makes the text more readable.

app/assets/stylesheets/admin.scss

@@ -840,7 +840,7 @@ table {
 .fullscreen {
 
   .fullscreen-container {
-    color: $white;
+    color: color-pick-contrast($admin-color);
 
     a {
       line-height: 3rem;

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

@@ -2,7 +2,7 @@
 
   .card-divider {
     background: $primary-color;
-    color: $white;
+    color: color-pick-contrast($primary-color);
 
     h3 {
       margin-top: 0;

app/assets/stylesheets/admin/menu.scss

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

app/assets/stylesheets/budgets/phases.scss

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

app/assets/stylesheets/dashboard.scss

@@ -459,7 +459,7 @@
 
   .mail-header {
     background: $pdf-primary;
-    color: #fff;
+    color: color-pick-contrast($pdf-primary);
     padding: $line-height * 2;
 
     img {
@@ -514,7 +514,7 @@
 .dashboard-poster-pdf {
   .poster-header {
     background: $pdf-primary;
-    color: #fff;
+    color: color-pick-contrast($pdf-primary);
 
     h1 {
       text-align: left;

app/assets/stylesheets/layout.scss

@@ -697,7 +697,7 @@ body > header,
 
 .top-links {
   background: $dark;
-  color: $white;
+  color: color-pick-contrast($dark);
   display: flex;
   flex-wrap: wrap;
   font-size: $small-font-size;
@@ -811,7 +811,7 @@ body > header,
       background: $border;
       border: 1px solid #ccc;
       border-left: 0;
-      color: $text;
+      color: color-pick-contrast($border);
       height: $line-height * 1.5;
       line-height: $line-height * 1.5;
       padding-top: 0;
@@ -979,7 +979,7 @@ footer {
   background-color: $brand;
   background-repeat: no-repeat;
   background-size: cover;
-  color: $white;
+  color: color-pick-contrast($brand);
 
   @include breakpoint(medium) {
     min-height: $line-height * 42;

app/assets/stylesheets/layout/locale_switcher.scss

@@ -29,7 +29,7 @@
       background: #001d33;
       border: 0;
       border-radius: rem-calc(4);
-      color: #fff;
+      color: color-pick-contrast(#001d33);
       font-size: $small-font-size;
       height: $line-height;
       margin-bottom: 0;

app/assets/stylesheets/milestones.scss

@@ -23,7 +23,7 @@ $progress-bar-color:      #fea230;
     }
 
     .progress-meter-text {
-      color: #000;
+      color: color-pick-contrast($progress-bar-background);
       right: 12px;
       text-align: right;
       transform: translate(0%, -50%);
@@ -120,7 +120,7 @@ $progress-bar-color:      #fea230;
 .milestone-status {
   background: $budget;
   border-radius: rem-calc(4);
-  color: #fff;
+  color: color-pick-contrast($budget);
   display: inline-block;
   margin-top: $line-height / 6;
   padding: $line-height / 4 $line-height / 2;

app/assets/stylesheets/mixins/buttons.scss

@@ -57,7 +57,7 @@
   position: relative;
 
   &::after {
-    background: $white;
+    background: color-pick-contrast($primary-color);
     border-radius: 100%;
     content: "";
     display: block;

app/assets/stylesheets/mixins/colors.scss

@@ -1,6 +1,6 @@
 @mixin brand-background($color: $brand, $invert-selection: true) {
   background-color: $color;
-  color: $white;
+  color: color-pick-contrast($color);
 
   @if $invert-selection {
     @include inverted-selection;
@@ -29,7 +29,7 @@
 
   &::selection,
   *::selection {
-    background-color: rgba($white, 0.99);
+    background-color: rgba(color-pick-contrast($brand), 0.99);
     color: $brand;
   }
 }

app/assets/stylesheets/mixins/tags.scss

@@ -16,7 +16,7 @@
 %tag {
   background: #ececec;
   border-radius: rem-calc(6);
-  color: $text;
+  color: color-pick-contrast(#ececec);
   display: inline-block;
   font-size: $small-font-size;
   margin-bottom: $line-height / 3;

app/assets/stylesheets/participation.scss

@@ -658,7 +658,7 @@
 
     .button-support {
       background: $budget;
-      color: #fff;
+      color: color-pick-contrast($budget);
       font-size: $base-font-size;
       font-weight: bold;
 
@@ -781,7 +781,7 @@
     width: rem-calc(36);
 
     &::before {
-      color: $text;
+      color: color-pick-contrast(#eee);
       font-family: "icons";
     }
   }
@@ -1484,7 +1484,7 @@
 
   &:hover {
     background: $dark;
-    color: #fff;
+    color: color-pick-contrast($dark);
     text-decoration: none;
   }
 }
@@ -1635,7 +1635,7 @@
     &.answered {
       background: #f4f8ec;
       border: 2px solid #92ba48;
-      color: $text;
+      color: color-pick-contrast(#f4f8ec);
       position: relative;
 
       &::after {