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

@@ -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;
+  }
+}

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");