mirror of
https://github.com/discourse/discourse.git
synced 2025-01-07 16:23:52 +08:00
a3e8c3cd7b
This feature introduces the concept of themes. Themes are an evolution
of site customizations.
Themes introduce two very big conceptual changes:
- A theme may include other "child themes", children can include grand
children and so on.
- A theme may specify a color scheme
The change does away with the idea of "enabled" color schemes.
It also adds a bunch of big niceties like
- You can source a theme from a git repo
- History for themes is much improved
- You can only have a single enabled theme. Themes can be selected by
users, if you opt for it.
On a technical level this change comes with a whole bunch of goodies
- All CSS is now compiled using a custom pipeline that uses libsass
see /lib/stylesheet
- There is a single pipeline for css compilation (in the past we used
one for customizations and another one for the rest of the app
- The stylesheet pipeline is now divorced of sprockets, there is no
reliance on sprockets for CSS bundling
- CSS is generated with source maps everywhere (including themes) this
makes debugging much easier
- Our "live reloader" is smarter and avoid a flash of unstyled content
we run a file watcher in "puma" in dev so you no longer need to run
rake autospec to watch for CSS changes
81 lines
2.4 KiB
SCSS
81 lines
2.4 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-line-height: 19px !default;
|
|
$base-font-family: Helvetica, Arial, sans-serif !default;
|
|
|
|
/* These files don't actually exist. They're injected by Stylesheet::Compiler. */
|
|
@import "theme_variables";
|
|
@import "plugins_variables";
|
|
@import "common/foundation/math";
|
|
|
|
// Color Utilities
|
|
|
|
// w3c definition of color brightness
|
|
@function 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 brightness($adjusted-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 brightness($primary) < brightness($secondary) {
|
|
@return $light-theme-result;
|
|
} @else {
|
|
@return $dark-theme-result;
|
|
}
|
|
}
|