Mirror
/
tildes
mirror of https://gitlab.com/tildes/tildes.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

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.
merge-requests/51/head
Deimos 6 years ago
parent
10d0f5e49c
commit
abde95f4d9
11 changed files with 291 additions and 255 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 17
      tildes/scss/_base.scss
  2. 6
      tildes/scss/_spectre_variables.scss
  3. 44
      tildes/scss/_variables.scss
  4. 2
      tildes/scss/modules/_comment.scss
  5. 7
      tildes/scss/modules/_topic.scss
  6. 3
      tildes/scss/styles.scss
  7. 14
      tildes/scss/themes/_black.scss
  8. 13
      tildes/scss/themes/_dark.scss
  9. 13
      tildes/scss/themes/_light.scss
  10. 78
      tildes/scss/themes/_solarized.scss
  11. 349
      tildes/scss/themes/_theme_base.scss

17
tildes/scss/_base.scss
View File

@ -12,23 +12,6 @@ a {
text-decoration: none; text-decoration: none;
} }
// this is probably unnecessary, but I'm running into specificity conflicts
// with the <code> colors being set in the theme - `body code` is overriding
// `a code` and not styling <code> elements inside <a> as links.
body a {
code {
color: $blue;
}
&:visited code {
color: $violet;
}
&:hover code {
text-decoration: underline;
}
}
blockquote { blockquote {
margin-left: 1rem; margin-left: 1rem;
max-width: $paragraph-max-width - 1rem; // subtract the left margin max-width: $paragraph-max-width - 1rem; // subtract the left margin

6
tildes/scss/_spectre_variables.scss
View File

@ -3,11 +3,7 @@
@import 'variables'; @import 'variables';
$primary-color: $blue;
$success-color: $green;
$warning-color: $orange;
$error-color: $red;
$primary-color: #268bd2; // Solarized
$border-radius: 0; $border-radius: 0;

44
tildes/scss/_variables.scss
View File

@ -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; $sidebar-width: 300px;
// Viewport width that the sidebar is shown by default // Viewport width that the sidebar is shown by default

2
tildes/scss/modules/_comment.scss
View File

@ -233,6 +233,6 @@
.is-comment-exemplary { .is-comment-exemplary {
& > .comment-itself { & > .comment-itself {
margin-left: -2px; margin-left: -2px;
border-left: 3px solid $comment-label-exemplary-color !important;
border-left: 3px solid;
} }
} }

7
tildes/scss/modules/_topic.scss
View File

@ -84,7 +84,7 @@
flex-shrink: 0; flex-shrink: 0;
margin-top: 2px; margin-top: 2px;
margin-right: 0.2rem; margin-right: 0.2rem;
border: 1px dashed $blue;
border: 1px dashed;
} }
.topic-log { .topic-log {
@ -133,11 +133,6 @@
.topic-voting-votes { .topic-voting-votes {
font-weight: bold; font-weight: bold;
} }
&:hover {
background-color: darken($blue, 3%);
border-color: darken($blue, 8%);
}
} }
} }

3
tildes/scss/styles.scss
View File

@ -38,5 +38,4 @@
// meta tag inside the base.jinja2 template, so mobile browsers can match // meta tag inside the base.jinja2 template, so mobile browsers can match
@import 'themes/theme_base'; @import 'themes/theme_base';
@import 'themes/black'; @import 'themes/black';
@import 'themes/dark';
@import 'themes/light';
@import 'themes/solarized';

14
tildes/scss/themes/_black.scss
View File

@ -1,11 +1,11 @@
$theme-black: ( $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 { body.theme-black {

13
tildes/scss/themes/_dark.scss
View File

@ -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);
}

13
tildes/scss/themes/_light.scss
View File

@ -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);
}

78
tildes/scss/themes/_solarized.scss
View File

@ -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);
}

349
tildes/scss/themes/_theme_base.scss
View File

@ -16,49 +16,48 @@
@mixin use-theme($theme) { @mixin use-theme($theme) {
$theme: init-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 // 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 { a {
color: $anchor-normal;
color: map-get($theme, "link");
&:hover { &:hover {
color: $anchor-normal-hover;
color: map-get($theme, "link-hover");
} }
&:visited { &: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-user,
a.link-group { a.link-group {
&:visited { &:visited {
color: $anchor-normal;
color: map-get($theme, "link");
} }
} }
a.logged-in-user-alert { a.logged-in-user-alert {
color: $orange;
color: map-get($theme, "alert");
&:visited { &:visited {
color: $orange;
color: map-get($theme, "alert");
} }
} }
@ -71,76 +70,76 @@
@include syntax-highlighting($is-light); @include syntax-highlighting($is-light);
blockquote { 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 { code, pre {
color: $foreground-highlight;
background-color: $background-secondary;
color: map-get($theme, "foreground-highlight");
background-color: map-get($theme, "background-secondary");
} }
fieldset { fieldset {
border-color: $border-primary;
border-color: map-get($theme, "border");
} }
figure { figure {
border-color: $border-primary;
border-color: map-get($theme, "border");
} }
main { main {
background-color: $background-primary;
background-color: map-get($theme, "background-primary");
} }
section { section {
border-color: $border-primary;
border-color: map-get($theme, "border");
} }
tbody tr:nth-of-type(2n+1) { tbody tr:nth-of-type(2n+1) {
background-color: $background-secondary;
background-color: map-get($theme, "background-secondary");
} }
td { td {
border-color: $border-primary;
border-color: map-get($theme, "border");
} }
th { th {
border-color: $foreground-highlight;
border-color: map-get($theme, "foreground-highlight");
} }
.btn { .btn {
color: $blue;
color: map-get($theme, "button");
background-color: transparent; background-color: transparent;
border-color: $blue;
border-color: map-get($theme, "button");
&:hover { &:hover {
background-color: rgba($blue, 0.2);
background-color: rgba(map-get($theme, "button"), 0.2);
} }
} }
.btn-comment-collapse { .btn-comment-collapse {
color: $foreground-secondary;
border-color: $border-primary;
color: map-get($theme, "foreground-secondary");
border-color: map-get($theme, "border");
&:hover { &:hover {
color: $anchor-normal;
color: map-get($theme, "link");
} }
} }
.btn-link {
color: $blue;
.btn.btn-link {
color: map-get($theme, "button");
background-color: transparent; background-color: transparent;
border-color: transparent; border-color: transparent;
} }
.btn-primary {
.btn.btn-primary {
color: #fff; color: #fff;
background-color: $blue;
border-color: $blue;
background-color: map-get($theme, "button");
border-color: map-get($theme, "button");
&:hover { &: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 { &:visited {
@ -149,53 +148,67 @@
} }
.btn-used { .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 { &: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; color: #fff;
} }
} }
.btn-comment-label-exemplary { .btn-comment-label-exemplary {
@include labelbutton($comment-label-exemplary-color);
@include labelbutton(map-get($theme, "comment-label-exemplary"));
} }
.btn-comment-label-joke { .btn-comment-label-joke {
@include labelbutton($comment-label-joke-color);
@include labelbutton(map-get($theme, "comment-label-joke"));
} }
.btn-comment-label-noise { .btn-comment-label-noise {
@include labelbutton($comment-label-noise-color);
@include labelbutton(map-get($theme, "comment-label-noise"));
} }
.btn-comment-label-offtopic { .btn-comment-label-offtopic {
@include labelbutton($comment-label-offtopic-color);
@include labelbutton(map-get($theme, "comment-label-offtopic"));
} }
.btn-comment-label-malice { .btn-comment-label-malice {
@include labelbutton($comment-label-malice-color);
@include labelbutton(map-get($theme, "comment-label-malice"));
} }
.comment-branch-counter { .comment-branch-counter {
color: $foreground-secondary;
color: map-get($theme, "foreground-secondary");
} }
.comment-nav-link, .comment-nav-link:visited { .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 { %collapsed-theme {
header { header {
background-color: $background-primary;
background-color: map-get($theme, "background-primary");
} }
} }
@ -210,216 +223,228 @@
} }
.comment { .comment {
border-color: $border-primary;
border-color: map-get($theme, "border");
header { 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"] { &[data-comment-depth="0"] {
border-color: $border-primary;
border-color: map-get($theme, "border");
} }
} }
.comment:target > .comment-itself { .comment:target > .comment-itself {
border-left-color: $yellow;
border-left-color: map-get($theme, "stripe-target");
} }
.comment-nav-link { .comment-nav-link {
color: $foreground-secondary;
color: map-get($theme, "foreground-secondary");
} }
.divider { .divider {
border-color: $border-primary;
border-color: map-get($theme, "border");
&[data-content]::after { &[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 { .empty-subtitle {
color: $foreground-secondary;
color: map-get($theme, "foreground-secondary");
} }
.foreground-secondary { .foreground-secondary {
color: $foreground-secondary;
color: map-get($theme, "foreground-secondary");
} }
.form-input { .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) { .form-input:not(:focus) {
border-color: $border-primary;
border-color: map-get($theme, "border");
} }
.form-select { .form-select {
border-color: $border-primary;
border-color: map-get($theme, "border");
&:not([multiple]):not([size]) { &:not([multiple]):not([size]) {
background-color: $background-input;
background-color: map-get($theme, "background-input");
} }
} }
.form-status-error { .form-status-error {
color: $red;
color: map-get($theme, "error");
} }
.label-topic-tag { .label-topic-tag {
color: $foreground-middle;
color: map-get($theme, "foreground-middle");
a, a,
a:hover, a:hover,
a:visited { a:visited {
color: $foreground-middle;
color: map-get($theme, "foreground-middle");
} }
} }
.label-topic-tag-nsfw { .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 { .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 { .logged-in-user-username {
color: $foreground-primary;
color: map-get($theme, "foreground-primary");
} }
.message { .message {
border-color: $border-primary;
border-color: map-get($theme, "border");
header { header {
color: $foreground-highlight;
background-color: $background-secondary;
color: map-get($theme, "foreground-highlight");
background-color: map-get($theme, "background-secondary");
} }
} }
.nav .nav-item { .nav .nav-item {
a { a {
color: $anchor-normal;
color: map-get($theme, "link");
&:hover { &:hover {
color: $anchor-normal-hover;
color: map-get($theme, "link-hover");
} }
} }
&.active a { &.active a {
color: $anchor-normal;
color: map-get($theme, "link");
} }
} }
.post-button { .post-button {
color: $foreground-secondary;
color: map-get($theme, "foreground-secondary");
&:hover { &:hover {
color: $foreground-extreme;
color: map-get($theme, "foreground-extreme");
} }
} }
.post-button-used { .post-button-used {
color: $violet;
color: map-get($theme, "button-used");
} }
.sidebar-controls { .sidebar-controls {
background-color: $background-secondary;
background-color: map-get($theme, "background-secondary");
} }
#sidebar { #sidebar {
background-color: $background-primary;
background-color: map-get($theme, "background-primary");
} }
.site-header-context, .site-header-context,
.site-header-username { .site-header-username {
color: $foreground-primary;
color: map-get($theme, "foreground-primary");
} }
.site-header-logo { .site-header-logo {
color: $foreground-highlight;
color: map-get($theme, "foreground-highlight");
} }
.site-header-sidebar-button.badge[data-badge]::after { .site-header-sidebar-button.badge[data-badge]::after {
background-color: $orange;
background-color: map-get($theme, "alert");
} }
.tab-listing-order { .tab-listing-order {
border-color: $border-primary;
border-color: map-get($theme, "border");
} }
.tab .tab-item { .tab .tab-item {
a { a {
color: $foreground-primary;
color: map-get($theme, "foreground-primary");
} }
&.active a { &.active a {
color: $anchor-normal;
color: map-get($theme, "link");
} }
} }
.text-secondary { .text-secondary {
color: $foreground-secondary;
color: map-get($theme, "foreground-secondary");
}
.text-warning {
color: map-get($theme, "warning");
} }
.toast { .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 // Toasts should have colored border + text for dark themes, instead of a
// brightly colored background // brightly colored background
@if ($is-light == false) { @if ($is-light == false) {
.toast-warning { .toast-warning {
border-color: $orange;
color: $orange;
border-color: map-get($theme, "warning");
color: map-get($theme, "warning");
background-color: transparent; background-color: transparent;
} }
} @else {
.toast-warning {
background-color: map-get($theme, "warning");
}
} }
.topic { .topic {
border-color: $border-primary;
border-color: map-get($theme, "border");
} }
.topic-listing { .topic-listing {
& > li:nth-of-type(2n) { & > 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 { .topic-content-metadata {
color: $foreground-secondary;
color: map-get($theme, "foreground-secondary");
} }
.topic-full-byline { .topic-full-byline {
color: $foreground-secondary;
color: map-get($theme, "foreground-secondary");
}
.topic-icon {
border-color: map-get($theme, "link");
} }
.topic-info { .topic-info {
color: $foreground-middle;
color: map-get($theme, "foreground-middle");
} }
.topic-info-comments-new { .topic-info-comments-new {
color: $orange;
color: map-get($theme, "alert");
} }
.topic-log-entry-time { .topic-log-entry-time {
color: $foreground-secondary;
color: map-get($theme, "foreground-secondary");
} }
.topic-text-excerpt { .topic-text-excerpt {
color: $foreground-secondary;
color: map-get($theme, "foreground-secondary");
summary::after { summary::after {
color: $foreground-secondary;
color: map-get($theme, "foreground-secondary");
} }
&[open] { &[open] {
color: $foreground-primary;
color: map-get($theme, "foreground-primary");
} }
} }
@ -427,46 +452,46 @@
border-color: transparent; border-color: transparent;
&:hover { &: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 { .is-comment-deleted, .is-comment-removed {
color: $foreground-secondary;
color: map-get($theme, "foreground-secondary");
} }
.is-comment-mine > .comment-itself { .is-comment-mine > .comment-itself {
border-left-color: $violet;
border-left-color: map-get($theme, "stripe-mine");
} }
.is-comment-new { .is-comment-new {
& > .comment-itself { & > .comment-itself {
border-left-color: $orange;
border-left-color: map-get($theme, "alert");
} }
.comment-text { .comment-text {
color: $foreground-highlight;
color: map-get($theme, "foreground-highlight");
} }
} }
.is-comment-exemplary { .is-comment-exemplary {
& > .comment-itself { & > .comment-itself {
border-left-color: $comment-label-exemplary-color;
border-left-color: map-get($theme, "comment-label-exemplary");
} }
} }
.is-message-mine, .is-message-mine,
.is-topic-mine { .is-topic-mine {
border-left-color: $violet;
border-left-color: map-get($theme, "stripe-mine");
} }
.is-topic-official { .is-topic-official {
border-left-color: $orange;
border-left-color: map-get($theme, "alert");
h1 { h1 {
a, a:visited { a, a:visited {
color: $orange;
color: map-get($theme, "alert");
} }
} }
} }
@ -477,7 +502,7 @@
background-color: $color; background-color: $color;
color: #fff; color: #fff;
a {
a, a:hover, a:visited {
color: #fff; color: #fff;
} }
} }
@ -486,7 +511,7 @@
color: $color; color: $color;
border: 1px solid $color; border: 1px solid $color;
a {
a, a:hover, a:visited {
color: $color; color: $color;
} }
} }
@ -656,33 +681,63 @@
$theme: map-merge($theme-base, $theme-map); $theme: map-merge($theme-base, $theme-map);
// set $is-light as a bool for whether background-primary seems light or dark // 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: 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: 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; $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, ( @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: ( $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 // define the default theme using the base values

Write Preview
Loading…
Cancel
Save