From abde95f4d99649df9c451275d5bfca1497604ebd Mon Sep 17 00:00:00 2001 From: Deimos Date: Mon, 22 Oct 2018 23:49:47 -0600 Subject: [PATCH] Overhaul theme system: part 2 Continuing on with the theme-system overhaul, this adds some more definable colors, some more "fallback" logic, and moves Solarized colors into a particular theme file instead of using them throughout the CSS. Solarized colors are still used in the base theme, but all are hardcoded and labeled as such, so that they can be spotted/replaced more easily. --- tildes/scss/_base.scss | 17 -- tildes/scss/_spectre_variables.scss | 6 +- tildes/scss/_variables.scss | 44 ---- tildes/scss/modules/_comment.scss | 2 +- tildes/scss/modules/_topic.scss | 7 +- tildes/scss/styles.scss | 3 +- tildes/scss/themes/_black.scss | 14 +- tildes/scss/themes/_dark.scss | 13 -- tildes/scss/themes/_light.scss | 13 -- tildes/scss/themes/_solarized.scss | 78 +++++++ tildes/scss/themes/_theme_base.scss | 349 ++++++++++++++++------------ 11 files changed, 291 insertions(+), 255 deletions(-) delete mode 100644 tildes/scss/themes/_dark.scss delete mode 100644 tildes/scss/themes/_light.scss create mode 100644 tildes/scss/themes/_solarized.scss diff --git a/tildes/scss/_base.scss b/tildes/scss/_base.scss index 61bd70a..44c90e2 100644 --- a/tildes/scss/_base.scss +++ b/tildes/scss/_base.scss @@ -12,23 +12,6 @@ a { text-decoration: none; } -// this is probably unnecessary, but I'm running into specificity conflicts -// with the colors being set in the theme - `body code` is overriding -// `a code` and not styling elements inside as links. -body a { - code { - color: $blue; - } - - &:visited code { - color: $violet; - } - - &:hover code { - text-decoration: underline; - } -} - blockquote { margin-left: 1rem; max-width: $paragraph-max-width - 1rem; // subtract the left margin diff --git a/tildes/scss/_spectre_variables.scss b/tildes/scss/_spectre_variables.scss index 7591b84..d0ba4ec 100644 --- a/tildes/scss/_spectre_variables.scss +++ b/tildes/scss/_spectre_variables.scss @@ -3,11 +3,7 @@ @import 'variables'; -$primary-color: $blue; - -$success-color: $green; -$warning-color: $orange; -$error-color: $red; +$primary-color: #268bd2; // Solarized $border-radius: 0; diff --git a/tildes/scss/_variables.scss b/tildes/scss/_variables.scss index c9f94d6..3dbd13e 100644 --- a/tildes/scss/_variables.scss +++ b/tildes/scss/_variables.scss @@ -1,47 +1,3 @@ -// Color palette is Ethan Schoonover's "Solarized" -// (http://ethanschoonover.com/solarized) - -// "Official" color names from Solarized -$base03: #002b36; -$base02: #073642; -$base01: #586e75; -$base00: #657b83; -$base0: #839496; -$base1: #93a1a1; -$base2: #eee8d5; -$base3: #fdf6e3; - -$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; - -// Colors for special topic tags -$topic-tag-nsfw-color: $red; -$topic-tag-spoiler-color: $yellow; - -// Colors for comment labels -$comment-label-exemplary-color: $blue; -$comment-label-joke-color: $green; -$comment-label-noise-color: $yellow; -$comment-label-offtopic-color: $cyan; -$comment-label-malice-color: $red; - $sidebar-width: 300px; // Viewport width that the sidebar is shown by default diff --git a/tildes/scss/modules/_comment.scss b/tildes/scss/modules/_comment.scss index 304f7c8..8af5047 100644 --- a/tildes/scss/modules/_comment.scss +++ b/tildes/scss/modules/_comment.scss @@ -233,6 +233,6 @@ .is-comment-exemplary { & > .comment-itself { margin-left: -2px; - border-left: 3px solid $comment-label-exemplary-color !important; + border-left: 3px solid; } } diff --git a/tildes/scss/modules/_topic.scss b/tildes/scss/modules/_topic.scss index c0443e1..7aa5ac2 100644 --- a/tildes/scss/modules/_topic.scss +++ b/tildes/scss/modules/_topic.scss @@ -84,7 +84,7 @@ flex-shrink: 0; margin-top: 2px; margin-right: 0.2rem; - border: 1px dashed $blue; + border: 1px dashed; } .topic-log { @@ -133,11 +133,6 @@ .topic-voting-votes { font-weight: bold; } - - &:hover { - background-color: darken($blue, 3%); - border-color: darken($blue, 8%); - } } } diff --git a/tildes/scss/styles.scss b/tildes/scss/styles.scss index 78d5d9d..e79f107 100644 --- a/tildes/scss/styles.scss +++ b/tildes/scss/styles.scss @@ -38,5 +38,4 @@ // meta tag inside the base.jinja2 template, so mobile browsers can match @import 'themes/theme_base'; @import 'themes/black'; -@import 'themes/dark'; -@import 'themes/light'; +@import 'themes/solarized'; diff --git a/tildes/scss/themes/_black.scss b/tildes/scss/themes/_black.scss index 6b159da..d4ce29b 100644 --- a/tildes/scss/themes/_black.scss +++ b/tildes/scss/themes/_black.scss @@ -1,11 +1,11 @@ $theme-black: ( - 'foreground-primary': #ccc, - 'foreground-secondary': #888, - 'foreground-highlight': #ddd, - 'background-primary': #000, - 'background-secondary': #222, - 'background-input': #000, - 'border-primary': #444, + "foreground-primary": #ccc, + "foreground-secondary": #888, + "foreground-highlight": #ddd, + "background-primary": #000, + "background-secondary": #222, + "background-input": #000, + "border": #444, ); body.theme-black { diff --git a/tildes/scss/themes/_dark.scss b/tildes/scss/themes/_dark.scss deleted file mode 100644 index c162480..0000000 --- a/tildes/scss/themes/_dark.scss +++ /dev/null @@ -1,13 +0,0 @@ -$theme-dark: ( - 'foreground-primary': $fg-light, - 'foreground-secondary': $fg-darkest, - 'foreground-highlight': $fg-lightest, - 'background-primary': $bg-darkest, - 'background-secondary': $bg-dark, - 'background-input': #001f27, - 'border-primary': #33555e, -); - -body.theme-dark { - @include use-theme($theme-dark); -} diff --git a/tildes/scss/themes/_light.scss b/tildes/scss/themes/_light.scss deleted file mode 100644 index b7d6e25..0000000 --- a/tildes/scss/themes/_light.scss +++ /dev/null @@ -1,13 +0,0 @@ -$theme-light: ( - 'foreground-primary': $fg-dark, - 'foreground-secondary': $fg-lightest, - 'foreground-highlight': $fg-darkest, - 'background-primary': $bg-lightest, - 'background-secondary': $bg-light, - 'background-input': #fefbf1, - 'border-primary': #cbc5b6, -); - -body.theme-light { - @include use-theme($theme-light); -} diff --git a/tildes/scss/themes/_solarized.scss b/tildes/scss/themes/_solarized.scss new file mode 100644 index 0000000..a49f55f --- /dev/null +++ b/tildes/scss/themes/_solarized.scss @@ -0,0 +1,78 @@ +// Color palette is Ethan Schoonover's "Solarized" +// (http://ethanschoonover.com/solarized) + +// "Official" color names from Solarized +$base03: #002b36; +$base02: #073642; +$base01: #586e75; +$base00: #657b83; +$base0: #839496; +$base1: #93a1a1; +$base2: #eee8d5; +$base3: #fdf6e3; + +$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; + +// Actual themes below: + +$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, + "stripe-mine": $violet, + "stripe-target": $yellow, + "topic-tag-nsfw": $red, + "topic-tag-spoiler": $yellow, +); + +$theme-dark: map-merge($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-dark { + @include use-theme($theme-dark); +} + +$theme-light: map-merge($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, +)); + +body.theme-light { + @include use-theme($theme-light); +} diff --git a/tildes/scss/themes/_theme_base.scss b/tildes/scss/themes/_theme_base.scss index d5181e9..be8cba4 100644 --- a/tildes/scss/themes/_theme_base.scss +++ b/tildes/scss/themes/_theme_base.scss @@ -16,49 +16,48 @@ @mixin use-theme($theme) { $theme: init-theme($theme); - $foreground-primary: map-get($theme, 'foreground-primary'); - $foreground-secondary: map-get($theme, 'foreground-secondary'); - $foreground-highlight: map-get($theme, 'foreground-highlight'); - $foreground-middle: map-get($theme, 'foreground-middle'); - $foreground-extreme: map-get($theme, 'foreground-extreme'); - $background-primary: map-get($theme, 'background-primary'); - $background-secondary: map-get($theme, 'background-secondary'); - $background-input: map-get($theme, 'background-input'); - $border-primary: map-get($theme, 'border-primary'); - $anchor-normal: map-get($theme, 'anchor-normal'); - $anchor-normal-hover: map-get($theme, 'anchor-normal-hover'); - $anchor-normal-visited: map-get($theme, 'anchor-normal-visited'); - - color: $foreground-primary; - background-color: $background-secondary; + color: map-get($theme, "foreground-primary"); + background-color: map-get($theme, "background-secondary"); // set $is-light as a bool for whether $background-color seems light or dark - $is-light: lightness($background-primary) > 50; + $is-light: lightness(map-get($theme, "background-primary")) > 50; a { - color: $anchor-normal; + color: map-get($theme, "link"); &:hover { - color: $anchor-normal-hover; + color: map-get($theme, "link-hover"); } &:visited { - color: $anchor-normal-visited; + color: map-get($theme, "link-visited"); + } + + code { + color: map-get($theme, "link"); + + &:hover { + text-decoration: underline; + } + } + + &:visited code { + color: map-get($theme, "link-visited"); } } a.link-user, a.link-group { &:visited { - color: $anchor-normal; + color: map-get($theme, "link"); } } a.logged-in-user-alert { - color: $orange; + color: map-get($theme, "alert"); &:visited { - color: $orange; + color: map-get($theme, "alert"); } } @@ -71,76 +70,76 @@ @include syntax-highlighting($is-light); blockquote { - border-color: $foreground-highlight; - background-color: $background-secondary; + border-color: map-get($theme, "foreground-highlight"); + background-color: map-get($theme, "background-secondary"); } code, pre { - color: $foreground-highlight; - background-color: $background-secondary; + color: map-get($theme, "foreground-highlight"); + background-color: map-get($theme, "background-secondary"); } fieldset { - border-color: $border-primary; + border-color: map-get($theme, "border"); } figure { - border-color: $border-primary; + border-color: map-get($theme, "border"); } main { - background-color: $background-primary; + background-color: map-get($theme, "background-primary"); } section { - border-color: $border-primary; + border-color: map-get($theme, "border"); } tbody tr:nth-of-type(2n+1) { - background-color: $background-secondary; + background-color: map-get($theme, "background-secondary"); } td { - border-color: $border-primary; + border-color: map-get($theme, "border"); } th { - border-color: $foreground-highlight; + border-color: map-get($theme, "foreground-highlight"); } .btn { - color: $blue; + color: map-get($theme, "button"); background-color: transparent; - border-color: $blue; + border-color: map-get($theme, "button"); &:hover { - background-color: rgba($blue, 0.2); + background-color: rgba(map-get($theme, "button"), 0.2); } } .btn-comment-collapse { - color: $foreground-secondary; - border-color: $border-primary; + color: map-get($theme, "foreground-secondary"); + border-color: map-get($theme, "border"); &:hover { - color: $anchor-normal; + color: map-get($theme, "link"); } } - .btn-link { - color: $blue; + .btn.btn-link { + color: map-get($theme, "button"); background-color: transparent; border-color: transparent; } - .btn-primary { + .btn.btn-primary { color: #fff; - background-color: $blue; - border-color: $blue; + background-color: map-get($theme, "button"); + border-color: map-get($theme, "button"); &:hover { - background-color: darken($blue, 10%); - border-color: darken($blue, 10%); + background-color: darken(map-get($theme, "button"), 10%); + border-color: darken(map-get($theme, "button"), 10%); } &:visited { @@ -149,53 +148,67 @@ } .btn-used { - color: $violet; - border-color: darken($violet, 3%); + color: map-get($theme, "button-used"); + border-color: darken(map-get($theme, "button-used"), 3%); &:hover { - background-color: darken($violet, 3%); - border-color: darken($violet, 8%); + background-color: darken(map-get($theme, "button-used"), 3%); + border-color: darken(map-get($theme, "button-used"), 8%); color: #fff; } } .btn-comment-label-exemplary { - @include labelbutton($comment-label-exemplary-color); + @include labelbutton(map-get($theme, "comment-label-exemplary")); } .btn-comment-label-joke { - @include labelbutton($comment-label-joke-color); + @include labelbutton(map-get($theme, "comment-label-joke")); } .btn-comment-label-noise { - @include labelbutton($comment-label-noise-color); + @include labelbutton(map-get($theme, "comment-label-noise")); } .btn-comment-label-offtopic { - @include labelbutton($comment-label-offtopic-color); + @include labelbutton(map-get($theme, "comment-label-offtopic")); } .btn-comment-label-malice { - @include labelbutton($comment-label-malice-color); + @include labelbutton(map-get($theme, "comment-label-malice")); } .comment-branch-counter { - color: $foreground-secondary; + color: map-get($theme, "foreground-secondary"); } .comment-nav-link, .comment-nav-link:visited { - color: $foreground-secondary; + color: map-get($theme, "foreground-secondary"); } - .label-comment-exemplary { @include theme-special-label($comment-label-exemplary-color, $is-light); } - .label-comment-joke { @include theme-special-label($comment-label-joke-color, $is-light); } - .label-comment-noise { @include theme-special-label($comment-label-noise-color, $is-light); } - .label-comment-offtopic { @include theme-special-label($comment-label-offtopic-color, $is-light); } - .label-comment-malice { @include theme-special-label($comment-label-malice-color, $is-light); } + .label-comment-exemplary { + @include theme-special-label(map-get($theme, "comment-label-exemplary"), $is-light); + } + + .label-comment-joke { + @include theme-special-label(map-get($theme, "comment-label-joke"), $is-light); + } + + .label-comment-noise { + @include theme-special-label(map-get($theme, "comment-label-noise"), $is-light); + } + + .label-comment-offtopic { + @include theme-special-label(map-get($theme, "comment-label-offtopic"), $is-light); + } + + .label-comment-malice { + @include theme-special-label(map-get($theme, "comment-label-malice"), $is-light); + } %collapsed-theme { header { - background-color: $background-primary; + background-color: map-get($theme, "background-primary"); } } @@ -210,216 +223,228 @@ } .comment { - border-color: $border-primary; + border-color: map-get($theme, "border"); header { - color: $foreground-highlight; - background-color: $background-secondary; + color: map-get($theme, "foreground-highlight"); + background-color: map-get($theme, "background-secondary"); } &[data-comment-depth="0"] { - border-color: $border-primary; + border-color: map-get($theme, "border"); } } .comment:target > .comment-itself { - border-left-color: $yellow; + border-left-color: map-get($theme, "stripe-target"); } .comment-nav-link { - color: $foreground-secondary; + color: map-get($theme, "foreground-secondary"); } .divider { - border-color: $border-primary; + border-color: map-get($theme, "border"); &[data-content]::after { - color: $foreground-primary; - background-color: $background-primary; + color: map-get($theme, "foreground-primary"); + background-color: map-get($theme, "background-primary"); } } .empty-subtitle { - color: $foreground-secondary; + color: map-get($theme, "foreground-secondary"); } .foreground-secondary { - color: $foreground-secondary; + color: map-get($theme, "foreground-secondary"); } .form-input { - color: $foreground-primary; - background-color: $background-input; + color: map-get($theme, "foreground-primary"); + background-color: map-get($theme, "background-input"); } .form-input:not(:focus) { - border-color: $border-primary; + border-color: map-get($theme, "border"); } .form-select { - border-color: $border-primary; + border-color: map-get($theme, "border"); &:not([multiple]):not([size]) { - background-color: $background-input; + background-color: map-get($theme, "background-input"); } } .form-status-error { - color: $red; + color: map-get($theme, "error"); } .label-topic-tag { - color: $foreground-middle; + color: map-get($theme, "foreground-middle"); a, a:hover, a:visited { - color: $foreground-middle; + color: map-get($theme, "foreground-middle"); } } .label-topic-tag-nsfw { - @include theme-special-label($topic-tag-nsfw-color, $is-light); + @include theme-special-label(map-get($theme, "topic-tag-nsfw"), $is-light); } .label-topic-tag-spoiler { - @include theme-special-label($topic-tag-spoiler-color, $is-light); + @include theme-special-label(map-get($theme, "topic-tag-spoiler"), $is-light); } .logged-in-user-username { - color: $foreground-primary; + color: map-get($theme, "foreground-primary"); } .message { - border-color: $border-primary; + border-color: map-get($theme, "border"); header { - color: $foreground-highlight; - background-color: $background-secondary; + color: map-get($theme, "foreground-highlight"); + background-color: map-get($theme, "background-secondary"); } } .nav .nav-item { a { - color: $anchor-normal; + color: map-get($theme, "link"); &:hover { - color: $anchor-normal-hover; + color: map-get($theme, "link-hover"); } } &.active a { - color: $anchor-normal; + color: map-get($theme, "link"); } } .post-button { - color: $foreground-secondary; + color: map-get($theme, "foreground-secondary"); &:hover { - color: $foreground-extreme; + color: map-get($theme, "foreground-extreme"); } } .post-button-used { - color: $violet; + color: map-get($theme, "button-used"); } .sidebar-controls { - background-color: $background-secondary; + background-color: map-get($theme, "background-secondary"); } #sidebar { - background-color: $background-primary; + background-color: map-get($theme, "background-primary"); } .site-header-context, .site-header-username { - color: $foreground-primary; + color: map-get($theme, "foreground-primary"); } .site-header-logo { - color: $foreground-highlight; + color: map-get($theme, "foreground-highlight"); } .site-header-sidebar-button.badge[data-badge]::after { - background-color: $orange; + background-color: map-get($theme, "alert"); } .tab-listing-order { - border-color: $border-primary; + border-color: map-get($theme, "border"); } .tab .tab-item { a { - color: $foreground-primary; + color: map-get($theme, "foreground-primary"); } &.active a { - color: $anchor-normal; + color: map-get($theme, "link"); } } .text-secondary { - color: $foreground-secondary; + color: map-get($theme, "foreground-secondary"); + } + + .text-warning { + color: map-get($theme, "warning"); } .toast { - color: $foreground-highlight; - border-color: $border-primary; - background-color: $background-secondary; + color: map-get($theme, "foreground-highlight"); + border-color: map-get($theme, "border"); + background-color: map-get($theme, "background-secondary"); } // Toasts should have colored border + text for dark themes, instead of a // brightly colored background @if ($is-light == false) { .toast-warning { - border-color: $orange; - color: $orange; + border-color: map-get($theme, "warning"); + color: map-get($theme, "warning"); background-color: transparent; } + } @else { + .toast-warning { + background-color: map-get($theme, "warning"); + } } .topic { - border-color: $border-primary; + border-color: map-get($theme, "border"); } .topic-listing { & > li:nth-of-type(2n) { - color: mix($foreground-primary, $foreground-highlight); - background-color: mix($background-primary, $background-secondary); + color: mix(map-get($theme, "foreground-primary"), map-get($theme, "foreground-highlight")); + background-color: mix(map-get($theme, "background-primary"), map-get($theme, "background-secondary")); } } .topic-content-metadata { - color: $foreground-secondary; + color: map-get($theme, "foreground-secondary"); } .topic-full-byline { - color: $foreground-secondary; + color: map-get($theme, "foreground-secondary"); + } + + .topic-icon { + border-color: map-get($theme, "link"); } .topic-info { - color: $foreground-middle; + color: map-get($theme, "foreground-middle"); } .topic-info-comments-new { - color: $orange; + color: map-get($theme, "alert"); } .topic-log-entry-time { - color: $foreground-secondary; + color: map-get($theme, "foreground-secondary"); } .topic-text-excerpt { - color: $foreground-secondary; + color: map-get($theme, "foreground-secondary"); summary::after { - color: $foreground-secondary; + color: map-get($theme, "foreground-secondary"); } &[open] { - color: $foreground-primary; + color: map-get($theme, "foreground-primary"); } } @@ -427,46 +452,46 @@ border-color: transparent; &:hover { - background-color: darken($blue, 3%); - border-color: darken($blue, 8%); + background-color: darken(map-get($theme, "button"), 3%); + border-color: darken(map-get($theme, "button"), 8%); } } .is-comment-deleted, .is-comment-removed { - color: $foreground-secondary; + color: map-get($theme, "foreground-secondary"); } .is-comment-mine > .comment-itself { - border-left-color: $violet; + border-left-color: map-get($theme, "stripe-mine"); } .is-comment-new { & > .comment-itself { - border-left-color: $orange; + border-left-color: map-get($theme, "alert"); } .comment-text { - color: $foreground-highlight; + color: map-get($theme, "foreground-highlight"); } } .is-comment-exemplary { & > .comment-itself { - border-left-color: $comment-label-exemplary-color; + border-left-color: map-get($theme, "comment-label-exemplary"); } } .is-message-mine, .is-topic-mine { - border-left-color: $violet; + border-left-color: map-get($theme, "stripe-mine"); } .is-topic-official { - border-left-color: $orange; + border-left-color: map-get($theme, "alert"); h1 { a, a:visited { - color: $orange; + color: map-get($theme, "alert"); } } } @@ -477,7 +502,7 @@ background-color: $color; color: #fff; - a { + a, a:hover, a:visited { color: #fff; } } @@ -486,7 +511,7 @@ color: $color; border: 1px solid $color; - a { + a, a:hover, a:visited { color: $color; } } @@ -656,33 +681,63 @@ $theme: map-merge($theme-base, $theme-map); // set $is-light as a bool for whether background-primary seems light or dark - $is-light: lightness(map-get($theme, 'background-primary')) > 50; + $is-light: lightness(map-get($theme, "background-primary")) > 50; + + // button: if not defined, use link color + $button: map-get($theme, "button"); + $button: map-get($theme, "link") !default; + + // button-used: if not defined, use link-visited color + $button-used: map-get($theme, "button-used"); + $button-used: map-get($theme, "link-visited") !default; // foreground-middle: if not defined, mix foreground-primary and foreground-secondary - $foreground-middle: map-get($theme, 'foreground-middle'); - $foreground-middle: mix(map-get($theme, 'foreground-primary'), map-get($theme, 'foreground-secondary')) !default; + $foreground-middle: map-get($theme, "foreground-middle"); + $foreground-middle: mix(map-get($theme, "foreground-primary"), map-get($theme, "foreground-secondary")) !default; // foreground-extreme: if not defined, use white on a dark background and black on a light one - $foreground-extreme: map-get($theme, 'foreground-extreme'); + $foreground-extreme: map-get($theme, "foreground-extreme"); $foreground-extreme: if($is-light, #000, #fff) !default; + // link-hover: if not defined, darken the link color slightly + $link-hover: map-get($theme, "link-hover"); + $link-hover: darken(map-get($theme, "link"), 5%) !default; + + // warning: if not defined, use alert color + $warning: map-get($theme, "warning"); + $warning: map-get($theme, "alert") !default; + @return map-merge($theme, ( - 'foreground-extreme': $foreground-extreme, - 'foreground-middle': $foreground-middle, + "button": $button, + "button-used": $button-used, + "foreground-extreme": $foreground-extreme, + "foreground-middle": $foreground-middle, + "link-hover": $link-hover, + "warning": $warning, )); } $theme-base: ( - 'foreground-primary': #333, - 'foreground-secondary': #999, - 'foreground-highlight': #222, - 'background-primary': #fff, - 'background-secondary': #eee, - 'background-input': #f7f7f7, - 'border-primary': #ccc, - 'anchor-normal': $blue, - 'anchor-normal-hover': darken($blue, 5%), - 'anchor-normal-visited': $violet, + "alert": #cb4b16, // Solarized + "background-input": #fff, + "background-primary": #fff, + "background-secondary": #eee, + "border": #ccc, + "comment-label-exemplary": #268bd2, // Solarized + "comment-label-joke": #859900, // Solarized + "comment-label-noise": #b58900, // Solarized + "comment-label-offtopic": #2aa198, // Solarized + "comment-label-malice": #dc322f, // Solarized + "error": #f00, + "foreground-highlight": #222, + "foreground-primary": #333, + "foreground-secondary": #999, + "link": #268bd2, // Solarized + "link-visited": #6c71c4, // Solarized + "stripe-mine": #6c71c4, // Solarized + "stripe-target": #b58900, // Solarized + "topic-tag-nsfw": #dc322f, // Solarized + "topic-tag-spoiler": #b58900, // Solarized ); // define the default theme using the base values