mirror of
https://github.com/discourse/discourse.git
synced 2024-11-29 02:53:41 +08:00
7878e5007a
If a theme setting contained invalid SCSS, it would cause an error 500 on the site, with no way to recover. This commit stops loading theme settings in the core stylesheets, and instead only loads the color scheme variables. This change also makes `common/foundation/variables.scss` available to themes without an explicit import.
276 lines
7.3 KiB
SCSS
276 lines
7.3 KiB
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;
|
|
|
|
// Brand color variables
|
|
// --------------------------------------------------
|
|
|
|
$google: #ffffff !default;
|
|
$instagram: #125688 !default;
|
|
$facebook: #3b5998 !default;
|
|
$cas: #70ba61 !default;
|
|
$twitter: #00bced !default;
|
|
$yahoo: #810293 !default;
|
|
$github: #6d6d6d !default;
|
|
|
|
// Badge color variables
|
|
// --------------------------------------------------
|
|
|
|
$gold: rgb(231, 195, 0) !default;
|
|
$silver: #c0c0c0 !default;
|
|
$bronze: #cd7f32 !default;
|
|
|
|
// Fonts
|
|
// --------------------------------------------------
|
|
|
|
$base-font-size-smaller: 14px !default;
|
|
$base-font-size: 15px !default;
|
|
$base-font-size-larger: 17px !default;
|
|
$base-font-size-largest: 19px !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: 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;
|
|
|
|
// 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_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,
|
|
"header": 1000,
|
|
"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 8px 14px 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),
|
|
"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);
|
|
}
|
|
|
|
// 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 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%, -82%);
|
|
$primary-low: dark-light-diff($primary, $secondary, 90%, -78%);
|
|
$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%, -25%);
|
|
$primary-very-high: dark-light-diff($primary, $secondary, 15%, -10%);
|
|
|
|
//header_primary
|
|
$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%
|
|
);
|
|
|
|
$header_primary-medium: dark-light-diff(
|
|
$header_primary,
|
|
$header_background,
|
|
50%,
|
|
-35%
|
|
);
|
|
$header_primary-high: dark-light-diff(
|
|
$header_primary,
|
|
$header_background,
|
|
30%,
|
|
-25%
|
|
);
|
|
$header_primary-very-high: dark-light-diff(
|
|
$header_primary,
|
|
$header_background,
|
|
15%,
|
|
-10%
|
|
);
|
|
|
|
//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%);
|
|
$secondary-very-high: dark-light-diff($secondary, $primary, 7%, -7%);
|
|
|
|
//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, 85%, -64%);
|
|
$danger-medium: dark-light-diff($danger, $secondary, 30%, -35%);
|
|
|
|
//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%);
|
|
|
|
//wiki
|
|
$wiki: green;
|