discourse/app/assets/stylesheets/common/foundation/variables.scss

// --------------------------------------------------
// Variables used throughout the theme
// --------------------------------------------------

// Layout dimensions
// --------------------------------------------------

$small-width: 800px !default;
$medium-width: 995px !default;
$large-width: 1110px !default;

// Brand color variables
// --------------------------------------------------

$google: #5b76f7 !default;
$instagram: #125688 !default;
$facebook: #3b5998 !default;
$cas: #70BA61 !default;
$twitter: #00bced !default;
$yahoo: #810293 !default;
$github: #6d6d6d !default;


// Fonts
// --------------------------------------------------

$base-font-size: 14px !default;
$base-line-height: 19px !default;
$base-font-family: Helvetica, Arial, sans-serif !default;

/* These files don't actually exist. They're injected by Stylesheet::Compiler. */
@import "theme_variables";
@import "plugins_variables";
@import "common/foundation/math";

// Color Utilities

// w3c definition of color brightness https://www.w3.org/TR/AERT#color-contrast
@function dc-color-brightness($color) {
  @return ((red($color) * .299) + (green($color) * .587) + (blue($color) * .114));
}

// Uses an approximation of sRGB blending, GAMMA=2 instead of GAMMA=2.2
@function srgb-scale($foreground, $background, $percent) {
  $ratio: ($percent / 100%);
  $iratio: 1 - $ratio;
  $f_r2: red($foreground) * red($foreground);
  $f_g2: green($foreground) * green($foreground);
  $f_b2: blue($foreground) * blue($foreground);
  $b_r2: red($background) * red($background);
  $b_g2: green($background) * green($background);
  $b_b2: blue($background) * blue($background);
  $r_r2: $f_r2 * $ratio + $b_r2 * $iratio;
  $r_g2: $f_g2 * $ratio + $b_g2 * $iratio;
  $r_b2: $f_b2 * $ratio + $b_b2 * $iratio;
  $r_r: sqrt($r_r2);
  $r_g: sqrt($r_g2);
  $r_b: sqrt($r_b2);
  @return rgb($r_r, $r_g, $r_b);
}

// Replaces dark-light-diff($primary, $secondary, 50%, -50%)
@function blend-primary-secondary($percent) {
  @return srgb-scale($primary, $secondary, $percent);
}

@function dark-light-diff($adjusted-color, $comparison-color, $lightness, $darkness) {
  @if dc-color-brightness($adjusted-color) < dc-color-brightness($comparison-color) {
    @return scale-color($adjusted-color, $lightness: $lightness);
  } @else {
    @return scale-color($adjusted-color, $lightness: $darkness);
  }
}
@function dark-light-choose($light-theme-result, $dark-theme-result) {
  @if dc-color-brightness($primary) < dc-color-brightness($secondary) {
    @return $light-theme-result;
  } @else {
    @return $dark-theme-result;
  }
}

// standard color transformations, use these if possible, and add any new dark-light-diffs here

//primary
$primary-very-low: dark-light-diff($primary, $secondary, 97%, -75%);
$primary-low: dark-light-diff($primary, $secondary, 90%, -65%);
$primary-low-mid: dark-light-diff($primary, $secondary, 70%, -45%);
$primary-medium: dark-light-diff($primary, $secondary, 50%, -20%);
$primary-high: dark-light-diff($primary, $secondary, 30%, -10%);

//header_primary
$header_primary-low: dark-light-diff($header_primary, $secondary, 90%, -65%);
$header_primary-medium: dark-light-diff($header_primary, $secondary, 50%, -20%);
$header_primary-high: dark-light-diff($header_primary, $secondary, 20%, 20%);


//secondary
$secondary-low: dark-light-diff($secondary, $primary, 70%, -70%);
$secondary-medium: dark-light-diff($secondary, $primary, 50%, -50%);
$secondary-high: dark-light-diff($secondary, $primary, 30%, -35%);

//tertiary
$tertiary-low: dark-light-diff($tertiary, $secondary, 85%, -65%);
$tertiary-medium: dark-light-diff($tertiary, $secondary, 50%, -45%);
$tertiary-high: dark-light-diff($tertiary, $secondary, 20%, -25%);

//quaternary
$quaternary-low: dark-light-diff($quaternary, $secondary, 70%, -70%);

//highlight
$highlight-low: dark-light-diff($highlight, $secondary, 70%, -80%);
$highlight-medium: dark-light-diff($highlight, $secondary, 50%, -55%);

//danger
$danger-low: dark-light-diff($danger, $secondary, 50%, -40%);
$danger-medium: dark-light-diff($danger, $secondary, 30%, -60%);

//success
$success-low: dark-light-diff($success, $secondary, 80%, -60%);
$success-medium: dark-light-diff($success, $secondary, 50%, -40%);

//love
$love-low: dark-light-diff($love, $secondary, 85%, -60%);