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

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


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

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

// Primary color variables
// --------------------------------------------------

$yellow: lighten(#FFFF00, 20%);
$light_yellow: lighten($yellow, 20%) !default;
$lightest_yellow: lighten($yellow, 30%) !default;
$google: #5b76f7 !default;
$facebook: #3b5998 !default;
$cas: #70BA61 !default;
$twitter: #00bced !default;
$yahoo: #810293 !default;
$github: #6d6d6d !default;
$persona: #606060 !default;


$primary: #333 !default;
$secondary: #fff !default;
$tertiary: #0088cc !default;
$highlight: lighten(#FFFF00, 12%) !default;
$highlight_danger: #e45735 !default;
$heart: #fa6c8d !default;
$success: green !default;


//--------------------------------------------------- Main Variable Controllers


$primary_medium: lighten($primary, 35%) !default; //dark grey
$primary_light: lighten($primary, 50%) !default; // grey 
$primary_lighter: lighten($primary, 60%) !default; //light grey
$primary_lightest: lighten($primary, 76%) !default; //lighter grey

$tertiary_lightest: lighten($tertiary, 55%) !default; //lighte blue
$tertiary_light: lighten($tertiary, 30%) !default; // light blue
$tertiary_dark: darken($tertiary, 10%) !default; // dark blue

$highlight_danger_light: lighten($highlight_danger, 35%) !default; //lightest red
$highlight_danger_dark: darken($highlight_danger, 30%) !default; //dark red
$highlight_danger_darker: darken($highlight_danger, 60%) !default; //dark red

$heart_light: lighten($heart, 22%) !default; //light pink
$heart_dark: darken($heart, 10%) !default; // dark pink

$highlight_light: lighten($highlight, 30%) !default;

$success_light: lighten($success, 60%);
$success_dark: darken($success, 30%);
$success_darker: darken($success, 60%);

// Base
// --------------------------------------------------

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

// Links
// --------------------------------------------------

$link-color: $tertiary !default;
$link-color-visited: $tertiary_dark !default;
$link-color-hover: $tertiary_dark !default;
$link-color-active: $tertiary_dark !default;

// Badges
// --------------------------------------------------

// Notification badge

$badge-notification-background-color: $primary_medium !default;

// Posts badge

$badge-posts-color: $primary_medium !default;

// Buttons
// --------------------------------------------------

// Default button

$btn-default-color: $primary !default;
$btn-default-background-color: $primary_light !default;
$btn-default-background-color-hover: $primary_lightest !default;

// Primary button

$btn-primary-border-color: $tertiary_dark !default;
$btn-primary-background-color: $tertiary !default;
$btn-primary-background-color-dark: $tertiary !default;
$btn-primary-background-color-light: $tertiary_light !default;

// Danger button (delete, etc)

$btn-danger-border-color: $highlight_danger_dark !default;
$btn-danger-background-color: $highlight_danger !default;
$btn-danger-background-color-dark: $highlight_danger_dark !default;
$btn-danger-background-color-light: $highlight_danger !default;

// Navigation menus
// --------------------------------------------------

// Pill nav

$nav-pills-color: $primary !default;
$nav-pills-color-hover: $highlight_danger !default;
$nav-pills-border-color-hover: $highlight_danger_light !default;
$nav-pills-background-color-hover: $highlight_danger_light  !default;
$nav-pills-color-active: $highlight_danger !default;
$nav-pills-border-color-active: $highlight_danger_dark !default;
$nav-pills-background-color-active: $highlight_danger !default;

// Stacked nav

$nav-stacked-color: $primary !default;
$nav-stacked-border-color: $primary_lighter !default;
$nav-stacked-background-color: $primary_lightest !default;
$nav-stacked-divider-color: $primary_lighter !default;
$nav-stacked-chevron-color: $primary_light !default;
$nav-stacked-border-color-active: $highlight_danger !default;
$nav-stacked-background-color-active: $highlight_danger !default;

// Button nav

$nav-button-color: $primary_medium !default;
$nav-button-color-hover: $primary !default;
$nav-button-background-color-hover: $primary_lighter !default;
$nav-button-color-active: $primary !default;
$nav-button-background-color-active: $primary_lighter !default;

// Header

$modal-header-color: $highlight_danger !default;
$modal-header-border-color: $primary_light !default;
$modal-close-button-color: $primary_light;

$nav-like-button-color-hover: $heart !default;
$nav-like-button-background-color-hover: $heart_light !default;
$nav-like-button-color-active: $heart_dark !default; 
$nav-like-button-background-color-active: $heart_light !default;

// Topic list
// --------------------------------------------------

$topic-list-border-color: $primary_light !default;
$topic-list-th-color: $primary !default;
$topic-list-th-border-color: $primary_light !default;
$topic-list-th-background-color: $primary_lightest !default;
$topic-list-td-color: $primary_medium !default;
$topic-list-td-border-color: $primary_lighter !default;
$topic-list-star-color: $primary_lighter !default;
$topic-list-starred-color: $highlight_danger !default;



// -- ??

$link_color: $tertiary_dark;
$muted-link-color: $primary_medium;
$muted-important-link-color: $primary_medium;

$quote-background: $primary_lightest;

// Colors based on basics

$topicMenuColor: darken($secondary, 80%);
$bookmarkColor: $tertiary;

$tag_color: $tertiary_lightest;

$composer_background: lighten($primary_lighter, 10%);

$post_footer: $primary_lightest;
$inner_border: $primary_lighter;
$inner_line: $primary_light;

$controls: $primary_medium;
$controls_hover: $tertiary;
$controls_active: $tertiary_dark;

$attention_bg: $tertiary_lightest;
$attention_fg: $tertiary;

$header-item-highlight: $tertiary_lightest;