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

282 lines
7.5 KiB
SCSS
Raw Normal View History

2013-02-05 14:16:51 -05:00
// --------------------------------------------------
// 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;
2014-05-06 23:53:04 -04:00
// Brand color variables
// --------------------------------------------------
2018-10-24 22:11:19 -04:00
$google: #ffffff !default;
$instagram: #e1306c !default;
$facebook: #4267b2 !default;
$cas: #70ba61 !default;
$twitter: #1da1f2 !default;
$github: #100e0f !default;
// Badge color variables
// --------------------------------------------------
$gold: rgb(231, 195, 0) !default;
$silver: #c0c0c0 !default;
$bronze: #cd7f32 !default;
2014-03-26 21:16:41 -04:00
// Fonts
2013-02-05 14:16:51 -05:00
// --------------------------------------------------
2019-01-17 12:11:31 -05:00
$base-font-size-smaller: 14px !default;
$base-font-size: 15px !default;
$base-font-size-larger: 17px !default;
$base-font-size-largest: 19px !default;
2014-04-06 20:06:55 -04:00
$base-font-family: Helvetica, Arial, sans-serif !default;
2013-02-05 14:16:51 -05:00
// Font-size defintions, multiplier ^ (step / interval)
2018-01-12 17:27:38 -05:00
$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)
2018-01-12 17:27:38 -05:00
$font-0: 1em;
$font-down-1: 0.8706em; // 2^(-1/5)
$font-down-2: 0.7579em; // Smallest size we use based on the 1em base
$font-down-3: 0.6599em;
$font-down-4: 0.5745em;
$font-down-5: 0.5em;
$font-down-6: 0.4355em;
2018-01-12 17:27:38 -05:00
// 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;
2018-01-12 17:27:38 -05:00
// 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.
2018-01-12 17:27:38 -05:00
// --------------------------------------------------
@import "theme_colors";
@import "plugins_variables";
@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),
2019-03-28 15:13:53 -04:00
"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),
2019-04-12 12:29:54 -04:00
"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 6px 0 $tertiary,
"focus-danger": 0 0 6px 0 $danger
);
@function shadow($key) {
@return map-get($box-shadow, $key);
}
2018-01-12 17:27:38 -05:00
// 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)
);
2014-08-06 09:31:13 -04:00
}
// Uses an approximation of sRGB blending, GAMMA=2 instead of GAMMA=2.2
2015-08-20 16:31:00 -04:00
@function srgb-scale($foreground, $background, $percent) {
$ratio: ($percent / 100%);
$iratio: 1 - $ratio;
2015-08-20 16:31:00 -04:00
$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) {
2015-08-20 16:31:00 -04:00
@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);
2014-08-06 09:31:13 -04:00
} @else {
@return scale-color($adjusted-color, $lightness: $darkness);
2014-08-06 09:31:13 -04:00
}
}
@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;
}
}
2017-06-11 22:20:14 -04:00
// 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%, -82%);
$primary-low: dark-light-diff($primary, $secondary, 90%, -78%);
2017-10-10 16:07:46 -04:00
$primary-low-mid: dark-light-diff($primary, $secondary, 70%, -45%);
2017-11-27 18:20:07 -05:00
$primary-medium: dark-light-diff($primary, $secondary, 50%, -35%);
$primary-high: dark-light-diff($primary, $secondary, 30%, -25%);
$primary-very-high: dark-light-diff($primary, $secondary, 15%, -10%);
2017-10-10 16:07:46 -04:00
//header_primary
2019-02-01 09:51:12 -05:00
$header_primary-low: dark-light-diff(
$header_primary,
$header_background,
90%,
-78%
);
$header_primary-low-mid: dark-light-diff(
$header_primary,
$header_background,
70%,
-45%
);
2019-02-01 09:51:12 -05:00
$header_primary-medium: dark-light-diff(
$header_primary,
$header_background,
50%,
-35%
);
2018-12-07 20:01:38 -05:00
$header_primary-high: dark-light-diff(
$header_primary,
$header_background,
30%,
-25%
2018-12-07 20:01:38 -05:00
);
$header_primary-very-high: dark-light-diff(
$header_primary,
$header_background,
15%,
-10%
);
2017-10-10 16:07:46 -04:00
2017-06-11 22:20:14 -04:00
//secondary
2017-10-10 16:07:46 -04:00
$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%);
$secondary-very-high: dark-light-diff($secondary, $primary, 7%, -7%);
2017-06-11 22:20:14 -04:00
//tertiary
$tertiary-low: dark-light-diff($tertiary, $secondary, 85%, -65%);
2017-10-10 16:07:46 -04:00
$tertiary-medium: dark-light-diff($tertiary, $secondary, 50%, -45%);
$tertiary-high: dark-light-diff($tertiary, $secondary, 20%, -25%);
2017-06-11 22:20:14 -04:00
//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%);
2017-06-11 22:20:14 -04:00
//danger
$danger-low: dark-light-diff($danger, $secondary, 85%, -64%);
$danger-medium: dark-light-diff($danger, $secondary, 30%, -35%);
2017-06-11 22:20:14 -04:00
//success
2017-10-10 16:07:46 -04:00
$success-low: dark-light-diff($success, $secondary, 80%, -60%);
$success-medium: dark-light-diff($success, $secondary, 50%, -40%);
2017-06-11 22:20:14 -04:00
//love
$love-low: dark-light-diff($love, $secondary, 85%, -60%);
//wiki
$wiki: green;