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;

$input-padding: 4px 10px;
$topic-body-width: 690px;
$topic-body-width-padding: 11px;
$topic-avatar-width: 45px;
$reply-area-max-width: 1475px !default;

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

$google: #ffffff !default;
$google-hover: darken($google, 5%) !default;
$instagram: #e1306c !default;
$instagram-hover: darken($instagram, 15%) !default;
$facebook: #1877f2 !default;
$facebook-hover: darken($facebook, 15%) !default;
$cas: #70ba61 !default;
$twitter: #1da1f2 !default;
$twitter-hover: darken($twitter, 10%) !default;
$github: #100e0f !default;
$github-hover: lighten($github, 20%) !default;
$discord: #7289da !default;
$discord-hover: darken($discord, 10%) !default;

// Badge color variables
// --------------------------------------------------

$gold: rgb(231, 195, 0) !default;
$silver: #c0c0c0 !default;
$bronze: #cd7f32 !default;

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

$base-font-size-smallest: 0.815em !default; // eq. to 13px
$base-font-size-smaller: 0.875em !default; // eq. to 14px
$base-font-size: 0.938em !default; // eq. to 15px
$base-font-size-larger: 1.063em !default; // eq. to 17px
$base-font-size-largest: 1.118em !default; // eq. to 19px
$base-font-family: var(--font-family) !default;
$heading-font-family: var(--heading-font-family) !default;

// Font-size defintions, multiplier ^ (step / interval)
$font-up-6: 2.296em !default;
$font-up-5: 2em !default;
$font-up-4: 1.7511em !default;
$font-up-3: 1.5157em !default;
$font-up-2: 1.3195em !default;
$font-up-1: 1.1487em !default; // 2^(1/5)
$font-0: 1em;
$font-down-1: 0.8706em !default; // 2^(-1/5)
$font-down-2: 0.7579em !default; // Smallest size we use based on the 1em base
$font-down-3: 0.6599em !default;
$font-down-4: 0.5745em !default;
$font-down-5: 0.5em !default;
$font-down-6: 0.4355em !default;

// inputs/textareas in iOS need to be at least 16px to avoid triggering zoom on focus
// with base at 15px, the below gives 16.05px
$font-size-ios-input: 1.07em !default;

// Common line-heights
$line-height-small: 1 !default;
$line-height-medium: 1.2 !default; // Headings or large text
$line-height-large: 1.4 !default; // Normal or small text

@import "common/foundation/math";

// Z-index
// --------------------------------------------------

$z-layers: (
  "max": 9999,
  "modal": (
    "tooltip": 1600,
    "popover": 1500,
    "dropdown": 1400,
    "content": 1300,
    "overlay": 1200,
  ),
  "fullscreen": 1150,
  "mobile-composer": 1100,
  "ipad-header-nav": 1020,
  "header": 1000,
  "footer-nav": 900,
  "tooltip": 600,
  "composer": (
    "dropdown": 700,
    "tooltip": 600,
    "popover": 500,
    "content": 400,
  ),
  "dropdown": 300,
  "usercard": 200,
  "timeline": 100,
  "base": 1,
);

@function map-has-nested-keys($map, $keys...) {
  @each $key in $keys {
    @if not map-has-key($map, $key) {
      @return false;
    }
    $map: map-get($map, $key);
  }
  @return true;
}

@function map-deep-get($map, $keys...) {
  @each $key in $keys {
    $map: map-get($map, $key);
  }
  @return $map;
}

@function z($layers...) {
  @if not map-has-nested-keys($z-layers, $layers...) {
    @warn "No layer defined for `#{inspect($layers...)}` in $z-layers map. Check variables.scss, property omitted.";
  }
  @return map-deep-get($z-layers, $layers...);
}

// Box-shadow
// --------------------------------------------------

$box-shadow: (
  "modal": 0 8px 60px rgba(0, 0, 0, 0.6),
  "composer": 0 -1px 40px rgba(0, 0, 0, 0.12),
  "menu-panel": 0 12px 12px rgba(0, 0, 0, 0.15),
  "card": 0 4px 14px rgba(0, 0, 0, 0.15),
  "dropdown": 0 2px 3px 0 rgba(0, 0, 0, 0.2),
  "header": 0 2px 4px -1px rgba(0, 0, 0, 0.25),
  "footer-nav": 0 0 2px 0 rgba(0, 0, 0, 0.25),
  "kbd": (
    0 2px 0 rgba(0, 0, 0, 0.2),
    0 0 0 1px dark-light-choose(#fff, #000) inset,
  ),
  "focus": 0 0 3px 0 $tertiary,
  "focus-danger": 0 0 6px 0 $danger,
);

@function shadow($key) {
  @return map-get($box-shadow, $key);
}

// Color utilities
// --------------------------------------------------

// w3c definition of color brightness https://www.w3.org/TR/AERT#color-contrast
@function dc-color-brightness($color) {
  @return (
    (red($color) * 0.299) + (green($color) * 0.587) + (blue($color) * 0.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 blend-header-primary-background($percent) {
  @return srgb-scale($header_primary, $header_background, $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 is-light-color-scheme() {
    @return $light-theme-result;
  } @else {
    @return $dark-theme-result;
  }
}

@function is-light-color-scheme() {
  @if dc-color-brightness($primary) < dc-color-brightness($secondary) {
    @return true;
  } @else {
    @return false;
  }
}

@function is-dark-color-scheme() {
  @return not is-light-color-scheme();
}

@import "color_transformations";