mirror of https://gitlab.com/tildes/tildes.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
107 lines
2.5 KiB
107 lines
2.5 KiB
// Color palette is Ethan Schoonover's "Solarized"
|
|
// (http://ethanschoonover.com/solarized)
|
|
|
|
// "Official" color names from Solarized
|
|
// stylelint-disable scss/dollar-variable-pattern
|
|
$base03: #002b36;
|
|
$base02: #073642;
|
|
$base01: #586e75;
|
|
$base00: #657b83;
|
|
$base0: #839496;
|
|
$base1: #93a1a1;
|
|
$base2: #eee8d5;
|
|
$base3: #fdf6e3;
|
|
// stylelint-enable scss/dollar-variable-pattern
|
|
|
|
// Accent colors
|
|
$blue: #268bd2;
|
|
$cyan: #2aa198;
|
|
$green: #859900;
|
|
$magenta: #d33682;
|
|
$orange: #cb4b16;
|
|
$red: #dc322f;
|
|
$violet: #6c71c4;
|
|
$yellow: #b58900;
|
|
|
|
// More usable color names for monotone colors
|
|
$bg-darkest: $base03;
|
|
$bg-dark: $base02;
|
|
$bg-light: $base2;
|
|
$bg-lightest: $base3;
|
|
$fg-darkest: $base01;
|
|
$fg-dark: $base00;
|
|
$fg-light: $base0;
|
|
$fg-lightest: $base1;
|
|
|
|
// Shared between both "light" and "dark" variants
|
|
$theme-solarized-base: (
|
|
"alert": $orange,
|
|
"comment-label-exemplary": $blue,
|
|
"comment-label-joke": $green,
|
|
"comment-label-noise": $yellow,
|
|
"comment-label-offtopic": $cyan,
|
|
"comment-label-malice": $red,
|
|
"error": $red,
|
|
"link": $blue,
|
|
"link-visited": $violet,
|
|
"success": $green,
|
|
"syntax-builtin": $cyan,
|
|
"syntax-comment": $green,
|
|
"syntax-constant": $red,
|
|
"syntax-keyword": $blue,
|
|
"syntax-literal": $violet,
|
|
"syntax-string": $yellow,
|
|
"warning": $yellow,
|
|
);
|
|
|
|
// Dark theme definition
|
|
$theme-solarized-dark:
|
|
map.merge(
|
|
$theme-solarized-base,
|
|
(
|
|
"background-input": #001f27,
|
|
"background-primary": $bg-darkest,
|
|
"background-secondary": $bg-dark,
|
|
"border": #33555e,
|
|
"foreground-highlight": $fg-lightest,
|
|
"foreground-primary": $fg-light,
|
|
"foreground-secondary": $fg-darkest,
|
|
)
|
|
);
|
|
|
|
body.theme-solarized-dark {
|
|
@include use-theme($theme-solarized-dark);
|
|
}
|
|
|
|
@include theme-preview-block(
|
|
"solarized-dark",
|
|
map.get($theme-solarized-dark, "foreground-primary"),
|
|
map.get($theme-solarized-dark, "background-primary")
|
|
);
|
|
|
|
// Light theme definition
|
|
$theme-solarized-light:
|
|
map.merge(
|
|
$theme-solarized-base,
|
|
(
|
|
"background-input": #fefbf1,
|
|
"background-primary": $bg-lightest,
|
|
"background-secondary": $bg-light,
|
|
"border": #cbc5b6,
|
|
"foreground-highlight": $fg-darkest,
|
|
"foreground-primary": $fg-dark,
|
|
"foreground-secondary": $fg-lightest,
|
|
"stripe-target": $yellow,
|
|
"warning": $orange,
|
|
)
|
|
);
|
|
|
|
body.theme-solarized-light {
|
|
@include use-theme($theme-solarized-light);
|
|
}
|
|
|
|
@include theme-preview-block(
|
|
"solarized-light",
|
|
map.get($theme-solarized-light, "foreground-primary"),
|
|
map.get($theme-solarized-light, "background-primary")
|
|
);
|