From e248a40ff31b113847f04773cd4f25c9a47877ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Fri, 28 Oct 2022 17:25:22 +0200
Subject: [PATCH] Automatically invert selection based on contrast

So now inverting the selection for brand-secondary backgrounds will
depend on the value of brand-secondary.
---
 app/assets/stylesheets/layout.scss         |  2 +-
 app/assets/stylesheets/mixins/buttons.scss |  2 +-
 app/assets/stylesheets/mixins/colors.scss  | 27 +++++++++++-----------
 3 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 6499ad178..fd81a2c16 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -125,7 +125,7 @@ button,
 
 .button {
   @extend %button;
-  @include inverted-selection;
+  @include inverted-selection($brand);
   background: $brand;
 
   &.medium {
diff --git a/app/assets/stylesheets/mixins/buttons.scss b/app/assets/stylesheets/mixins/buttons.scss
index 4ca8e0de6..fcc3e0786 100644
--- a/app/assets/stylesheets/mixins/buttons.scss
+++ b/app/assets/stylesheets/mixins/buttons.scss
@@ -19,7 +19,7 @@
 
 @mixin regular-button($color: $brand) {
   @include button($background: $color);
-  @include inverted-selection;
+  @include inverted-selection($color);
   @include base-button;
 }
 
diff --git a/app/assets/stylesheets/mixins/colors.scss b/app/assets/stylesheets/mixins/colors.scss
index 35bdb211c..eff3b260d 100644
--- a/app/assets/stylesheets/mixins/colors.scss
+++ b/app/assets/stylesheets/mixins/colors.scss
@@ -1,14 +1,14 @@
-@mixin background-with-text-contrast($color) {
+@mixin background-with-text-contrast($color, $check-invert-selection: true) {
   background-color: $color;
   color: color-pick-contrast($color);
+
+  @if $check-invert-selection {
+    @include inverted-selection($color);
+  }
 }
 
-@mixin brand-background($color: $brand, $invert-selection: true) {
+@mixin brand-background($color: $brand) {
   @include background-with-text-contrast($color);
-
-  @if $invert-selection {
-    @include inverted-selection;
-  }
 }
 
 @mixin brand-text {
@@ -25,16 +25,17 @@
 
   &::selection,
   *::selection {
-    @include brand-background($invert-selection: false);
+    @include background-with-text-contrast($brand, $check-invert-selection: false);
   }
 }
 
-@mixin inverted-selection {
-
-  &::selection,
-  *::selection {
-    background-color: rgba(color-pick-contrast($brand), 0.99);
-    color: $brand;
+@mixin inverted-selection($background-color) {
+  @if color-contrast($background-color, $brand) < 4.5 {
+    &::selection,
+    *::selection {
+      background-color: rgba(color-pick-contrast($brand), 0.99);
+      color: $brand;
+    }
   }
 }