195 lines
6.0 KiB
SCSS
195 lines
6.0 KiB
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-font-family: Helvetica, Arial, sans-serif !default;
|
|
|
|
// Font-size defintions, multiplier ^ (step / interval)
|
|
$font-up-6: 2.296em;
|
|
$font-up-5: 2em;
|
|
$font-up-4: 1.7511em;
|
|
$font-up-3: 1.5157em;
|
|
$font-up-2: 1.3195em;
|
|
$font-up-1: 1.1487em; // 2^(1/5)
|
|
$font-0: 1em;
|
|
$font-down-1: .8706em; // 2^(-1/5)
|
|
$font-down-2: .7579em; // Smallest size we use based on the 1em base
|
|
$font-down-3: .6599em;
|
|
$font-down-4: .5745em;
|
|
$font-down-5: .5em;
|
|
$font-down-6: .4355em;
|
|
|
|
// Common line-heights
|
|
$line-height-small: 1;
|
|
$line-height-medium: 1.2; // Headings or large text
|
|
$line-height-large: 1.4; // Normal or small text
|
|
|
|
// These files don't actually exist. They're injected by Stylesheet::Compiler.
|
|
// --------------------------------------------------
|
|
|
|
@import "theme_variables";
|
|
@import "plugins_variables";
|
|
@import "common/foundation/math";
|
|
|
|
// Z-index
|
|
// --------------------------------------------------
|
|
|
|
$z-layers: (
|
|
"max": 9999,
|
|
"fullscreen": 1700,
|
|
"modal": (
|
|
"tooltip": 1600,
|
|
"popover": 1500,
|
|
"dropdown": 1400,
|
|
"content": 1300,
|
|
"overlay": 1200,
|
|
),
|
|
"mobile-composer": 1100,
|
|
"header": 1000,
|
|
"tooltip": 600,
|
|
"composer": (
|
|
"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...);
|
|
}
|
|
|
|
// 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%, -80%);
|
|
$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%, -35%);
|
|
$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%);
|
|
$highlight-high: dark-light-diff($highlight, $secondary, -50%, -10%);
|
|
|
|
//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%);
|