Extract mixin to use body background and text color

This way we reduce the usages of the `$body-background` and `$text`
variables, making it easier to replace them with CSS variables in the
future.

app/assets/stylesheets/layout.scss

@@ -637,8 +637,7 @@ body > header,
     }
 
     &.is-dropdown-submenu {
-      background: $body-background;
+      @extend %body-colors;
-      color: $text;
       margin: 0;
       margin-top: rem-calc(-12);
       padding: 0;
@@ -2614,9 +2613,8 @@ table {
     }
 
     span {
-      background: $body-background;
+      @extend %body-colors;
       border-radius: rem-calc(4);
-      color: $text;
       display: inline-block;
       font-size: $small-font-size;
       font-weight: bold;

app/assets/stylesheets/layout/locale_switcher.scss

@@ -44,8 +44,7 @@
       }
 
       option {
-        background: $body-background;
+        @extend %body-colors;
-        color: $text;
         border: 0;
         outline: none;
       }

app/assets/stylesheets/mixins/colors.scss

@@ -12,6 +12,11 @@
   color: $brand;
 }
 
+@mixin body-colors {
+  background-color: $body-background;
+  color: $text;
+}
+
 @mixin normal-selection {
 
   &::selection,
@@ -36,3 +41,7 @@
 %brand-text {
   @include brand-text;
 }
+
+%body-colors {
+  @include body-colors;
+}

app/assets/stylesheets/participation.scss

@@ -932,8 +932,7 @@
       margin-top: 0;
 
       &:hover {
-        background: $body-background;
+        @extend %body-colors;
-        color: $text;
       }
     }
 
@@ -1473,9 +1472,8 @@
 }
 
 .zoom-link {
-  background: $body-background;
+  @extend %body-colors;
   border-radius: rem-calc(48);
-  color: $text;
   font-size: rem-calc(24);
   font-weight: bold;
   height: rem-calc(48);