From 33eea0b21aa8166029c653b458398ae23e14610f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Tue, 11 Oct 2022 03:20:52 +0200
Subject: [PATCH] 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                 | 6 ++----
 app/assets/stylesheets/layout/locale_switcher.scss | 3 +--
 app/assets/stylesheets/mixins/colors.scss          | 9 +++++++++
 app/assets/stylesheets/participation.scss          | 6 ++----
 4 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 91be981d1..1f6ee28f6 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -637,8 +637,7 @@ body > header,
     }
 
     &.is-dropdown-submenu {
-      background: $body-background;
-      color: $text;
+      @extend %body-colors;
       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;
diff --git a/app/assets/stylesheets/layout/locale_switcher.scss b/app/assets/stylesheets/layout/locale_switcher.scss
index 8b6a24ce5..afbf2e510 100644
--- a/app/assets/stylesheets/layout/locale_switcher.scss
+++ b/app/assets/stylesheets/layout/locale_switcher.scss
@@ -44,8 +44,7 @@
       }
 
       option {
-        background: $body-background;
-        color: $text;
+        @extend %body-colors;
         border: 0;
         outline: none;
       }
diff --git a/app/assets/stylesheets/mixins/colors.scss b/app/assets/stylesheets/mixins/colors.scss
index fd8d96cab..2d54e5214 100644
--- a/app/assets/stylesheets/mixins/colors.scss
+++ b/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;
+}
diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss
index 0782dc7ef..0a7aa2a08 100644
--- a/app/assets/stylesheets/participation.scss
+++ b/app/assets/stylesheets/participation.scss
@@ -932,8 +932,7 @@
       margin-top: 0;
 
       &:hover {
-        background: $body-background;
-        color: $text;
+        @extend %body-colors;
       }
     }
 
@@ -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);