From f124828cd871e4bf43fc2373974408bffdf7cd79 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Fri, 12 Mar 2021 19:58:17 +0100
Subject: [PATCH] Fix invisible text selection on brand backgrounds

Since we were defining the selection to have the same text color and
background color as the element they were in, it resulted in the
selection being invisible.

It wasn't that noticeable because we were using this color combination
mainly in links and buttons, and selecting their text is not as common.
But we plan to use the `$brand` color on budget headers as well, and
this issue is more obvious there.

Browsers like Chrome weren't that affected because they automatically
make the selection semi-transparent and so the selected text still had a
slightly different color. In order to prevent this effect when the
selection is white, we're using a 0.99 opacity (in this case Chrome
ignores numbers higher that 0.998).
---
 app/assets/stylesheets/layout.scss         |  3 ++-
 app/assets/stylesheets/mixins/buttons.scss |  1 +
 app/assets/stylesheets/mixins/colors.scss  | 15 ++++++++++++++-
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 28c166cd8..c1f11ff35 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -30,7 +30,7 @@
 // -----------------
 
 ::selection {
-  @include brand-background;
+  @include brand-background($invert-selection: false);
 }
 
 html,
@@ -82,6 +82,7 @@ a {
 
 .button {
   @extend %button;
+  @include inverted-selection;
   background: $brand;
 
   &.warning,
diff --git a/app/assets/stylesheets/mixins/buttons.scss b/app/assets/stylesheets/mixins/buttons.scss
index 3d6cc984c..83c7fc394 100644
--- a/app/assets/stylesheets/mixins/buttons.scss
+++ b/app/assets/stylesheets/mixins/buttons.scss
@@ -9,6 +9,7 @@
 
 @mixin regular-button($color: $brand) {
   @include button($background: $color);
+  @include inverted-selection;
   @extend %button;
 }
 
diff --git a/app/assets/stylesheets/mixins/colors.scss b/app/assets/stylesheets/mixins/colors.scss
index 52b39bac3..d65f555cd 100644
--- a/app/assets/stylesheets/mixins/colors.scss
+++ b/app/assets/stylesheets/mixins/colors.scss
@@ -1,6 +1,19 @@
-@mixin brand-background {
+@mixin brand-background($invert-selection: true) {
   background-color: $brand;
   color: $white;
+
+  @if $invert-selection {
+    @include inverted-selection;
+  }
+}
+
+@mixin inverted-selection {
+
+  &::selection,
+  *::selection {
+    background-color: rgba($white, 0.99);
+    color: $brand;
+  }
 }
 
 %brand-background {