From 12990253b841d02bdbcd7a46a68a9d0679a7b8db Mon Sep 17 00:00:00 2001
From: Deimos <deimos@tildes.net>
Date: Tue, 6 Aug 2019 16:22:52 -0600
Subject: [PATCH] SCSS: use perceived-brightness everywhere

Adds a couple of new utility functions, and replaces all the previous
checks that were based on lightness() with checks against
perceived-brightness() instead.

In the end, the only actual changes this makes to the CSS is flipping
the foreground color of error chips (topic tags with invalid characters)
in the Black and Atom One Dark themes.
---
 tildes/scss/_functions.scss         | 17 ++++++++++
 tildes/scss/themes/_theme_base.scss | 51 ++++++++---------------------
 2 files changed, 31 insertions(+), 37 deletions(-)

diff --git a/tildes/scss/_functions.scss b/tildes/scss/_functions.scss
index 483cb9c..3adfa66 100644
--- a/tildes/scss/_functions.scss
+++ b/tildes/scss/_functions.scss
@@ -37,3 +37,20 @@
   // Convert to percentage and return
   @return 100% * $number / 255;
 }
+
+@function is-color-bright($color) {
+  // Return a bool for whether the color seems to be bright or not.
+  // Threshold of 60 is arbitrary, not sure if there's a "correct" value
+  @return perceived-brightness($color) > 60;
+}
+
+@function choose-by-brightness($based-on-color, $if-light, $if-dark) {
+  // Used for choosing a color based on the brightness of another, for cases like
+  // picking a text color depending whether the background is light or dark.
+  // Returns the $if-light color if $based-on-color is light, or $if-dark otherwise.
+  @if (is-color-bright($based-on-color)) {
+    @return $if-light;
+  } @else {
+    @return $if-dark;
+  }
+}
diff --git a/tildes/scss/themes/_theme_base.scss b/tildes/scss/themes/_theme_base.scss
index f19529d..94208d8 100644
--- a/tildes/scss/themes/_theme_base.scss
+++ b/tildes/scss/themes/_theme_base.scss
@@ -19,8 +19,8 @@
   color: map-get($theme, "foreground-primary");
   background-color: map-get($theme, "background-secondary");
 
-  // set $is-light as a bool for whether $background-color seems light or dark
-  $is-light: lightness(map-get($theme, "background-primary")) > 50;
+  // set $is-light as a bool for whether the background seems light or dark
+  $is-light: is-color-bright(map-get($theme, "background-primary"));
 
   a {
     color: map-get($theme, "link");
@@ -142,13 +142,7 @@
   }
 
   .btn.btn-primary {
-    $is-button-bg-light: lightness(map-get($theme, "button")) > 50;
-
-    @if ($is-button-bg-light) {
-      color: #000;
-    } @else {
-      color: #fff;
-    }
+    color: choose-by-brightness(map-get($theme, "button"), #000, #fff);
 
     background-color: map-get($theme, "button");
     border-color: map-get($theme, "button");
@@ -159,11 +153,7 @@
     }
 
     &:visited {
-      @if ($is-button-bg-light) {
-        color: #000;
-      } @else {
-        color: #fff;
-      }
+      color: choose-by-brightness(map-get($theme, "button"), #000, #fff);
     }
   }
 
@@ -216,35 +206,20 @@
 
     &.active {
       background-color: map-get($theme, "button");
-
-      $active-color: #fff;
-      $is-active-bg-light: lightness(map-get($theme, "button")) > 50;
-
-      @if ($is-active-bg-light) {
-        $active-color: #000;
-      }
-
-      color: $active-color;
+      color: choose-by-brightness(map-get($theme, "button"), #000, #fff);
 
       .btn {
-        color: $active-color;
+        color: choose-by-brightness(map-get($theme, "button"), #000, #fff);
       }
     }
 
     &.error {
       background-color: map-get($theme, "error");
 
-      $error-color: #fff;
-      $is-error-bg-light: perceived-brightness(map-get($theme, "error")) > 50;
-
-      @if ($is-error-bg-light) {
-        $error-color: #000;
-      }
-
-      color: $error-color;
+      color: choose-by-brightness(map-get($theme, "error"), #000, #fff);
 
       .btn {
-        color: $error-color;
+        color: choose-by-brightness(map-get($theme, "error"), #000, #fff);
       }
     }
   }
@@ -909,9 +884,6 @@
     }
   }
 
-  // set $is-light as a bool for whether background-primary seems light or dark
-  $is-light: lightness(map-get($theme, "background-primary")) > 50;
-
   // colors that simply fall back to another if not defined
   $background-input: map-get-fallback($theme, "background-input", "background-primary");
   $border: map-get-fallback($theme, "border", "foreground-secondary");
@@ -933,7 +905,12 @@
 
   // foreground-extreme: if not defined, use white on a dark bg and black on a light one
   $foreground-extreme: map-get($theme, "foreground-extreme");
-  $foreground-extreme: if($is-light, #000, #fff) !default;
+  $foreground-extreme:
+    choose-by-brightness(
+      map-get($theme, "background-primary"),
+      #000,
+      #fff,
+    ) !default;
 
   // foreground-middle: if not defined, mix foreground-primary and foreground-secondary
   $foreground-middle: map-get($theme, "foreground-middle");