tildes/tildes/scss/_functions.scss

// Copyright (c) 2019 Tildes contributors <code@tildes.net>
// SPDX-License-Identifier: AGPL-3.0-or-later

@function sqrt($r) {
  // Adapted from https://www.antimath.info/css/sass-sqrt-function/
  // stylelint-disable scss/dollar-variable-pattern
  $x0: 1;
  $x1: $x0;

  @for $i from 1 through 10 {
    $x1: $x0 - ($x0 * $x0 - abs($r)) / (2 * $x0);
    $x0: $x1;
  }

  @return $x1;
}

@function perceived-brightness($color) {
  // Adapted from https://gist.github.com/jlong/f06f5843104ee10006fe
  // Perceived Brightness math based on: http://alienryderflex.com/hsp.html
  $red-magic-number: 299;
  $green-magic-number: 587;
  $blue-magic-number: 114;
  $brightness-divisor: $red-magic-number + $green-magic-number + $blue-magic-number;

  // Extract color components
  $red-component: red($color);
  $green-component: green($color);
  $blue-component: blue($color);

  // Calculate a brightness value in 3d color space between 0 and 255
  $red: $red-component * $red-component * $red-magic-number;
  $green: $green-component * $green-component * $green-magic-number;
  $blue: $blue-component * $blue-component * $blue-magic-number;
  $number: sqrt(($red + $green + $blue) / $brightness-divisor);

  // 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;
  }
}