CSS: Move all theme color rules into normal places

Now that we've switched to CSS custom properties, all the color rules
don't need to be repeated for each theme via a mixin, so the
_theme_base.scss could be split up with all its rules going into the
expected modules/locations along with all the other associated styles.

tildes/scss/_base.scss

@@ -10,6 +10,28 @@ html {
 
 a {
   text-decoration: none;
+
+  color: var(--link-color);
+
+  &:hover {
+    color: var(--link-hover-color);
+  }
+
+  &:visited {
+    color: var(--link-visited-color);
+  }
+
+  code {
+    color: var(--link-color);
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  &:visited code {
+    color: var(--link-visited-color);
+  }
 }
 
 blockquote {
@@ -19,6 +41,9 @@ blockquote {
 
   border-left: 1px dotted;
 
+  border-color: var(--foreground-highlight-color);
+  background-color: var(--background-secondary-color);
+
   // nested blockquotes need reduced margin/padding
   > blockquote {
     margin: 0;
@@ -26,6 +51,11 @@ blockquote {
     padding-top: 0;
     padding-bottom: 0;
   }
+
+  code,
+  pre {
+    background-color: var(--background-primary-color);
+  }
 }
 
 body {
@@ -33,6 +63,9 @@ body {
   min-height: 100vh;
 
   @include font-shrink-on-mobile(0.8rem);
+
+  color: var(--foreground-primary-color);
+  background-color: var(--background-secondary-color);
 }
 
 button {
@@ -44,6 +77,9 @@ code {
   font-size: inherit;
   -moz-tab-size: 4;
   tab-size: 4;
+
+  color: var(--foreground-highlight-color);
+  background-color: var(--background-secondary-color);
 }
 
 dl dd {
@@ -139,6 +175,8 @@ main {
   overflow: hidden;
   max-width: 100vw;
 
+  background-color: var(--background-primary-color);
+
   @media (min-width: $size-md) {
     padding: 0.4rem;
   }
@@ -153,6 +191,40 @@ menu {
   padding: 0;
 }
 
+meter {
+  // Crazy styles to get this to work adapted from Spectre.css's _meters.scss
+  background: var(--background-secondary-color);
+
+  &::-webkit-meter-bar {
+    background: var(--background-secondary-color);
+  }
+
+  // For some mysterious reason, none of the below rules can be merged
+  &::-webkit-meter-optimum-value {
+    background: var(--success-color);
+  }
+
+  &:-moz-meter-optimum::-moz-meter-bar {
+    background: var(--success-color);
+  }
+
+  &::-webkit-meter-suboptimum-value {
+    background: var(--warning-color);
+  }
+
+  &:-moz-meter-sub-optimum::-moz-meter-bar {
+    background: var(--warning-color);
+  }
+
+  &::-webkit-meter-even-less-good-value {
+    background: var(--error-color);
+  }
+
+  &:-moz-meter-sub-sub-optimum::-moz-meter-bar {
+    background: var(--error-color);
+  }
+}
+
 // We'll use lists for their semantic value sometimes, so we don't want them to
 // have the normal list numbering/etc. by default. We'll specifically add that
 // back in for text-based lists in places where it's needed.
@@ -178,6 +250,8 @@ p:last-child {
 
 pre {
   overflow: auto;
+  color: var(--foreground-highlight-color);
+  background-color: var(--background-secondary-color);
 
   code {
     display: block;
@@ -202,6 +276,10 @@ table {
   margin-bottom: 1rem;
 }
 
+tbody tr:nth-of-type(2n + 1) {
+  background-color: var(--background-secondary-color);
+}
+
 td,
 th {
   border: $border-width solid;

tildes/scss/modules/_breadcrumbs.scss

@@ -1,3 +1,28 @@
+// Copyright (c) 2019 Tildes contributors <code@tildes.net>
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+.breadcrumb .breadcrumb-item {
+  color: var(--foreground-secondary-color);
+
+  &:not(:last-child) {
+    a {
+      color: var(--foreground-secondary-color);
+    }
+  }
+
+  &:not(:first-child) {
+    &::before {
+      color: var(--foreground-secondary-color);
+    }
+  }
+
+  &:last-child {
+    a {
+      color: var(--link-color);
+    }
+  }
+}
+
 ol.breadcrumb,
 ul.breadcrumb {
   margin-left: 0;

tildes/scss/modules/_btn.scss

@@ -10,12 +10,30 @@
 
   font-size: 0.6rem;
   font-weight: bold;
+
+  color: var(--button-color);
+  background-color: transparent;
+  border-color: var(--button-color);
+
+  &:hover {
+    background-color: var(--button-transparent-color);
+  }
 }
 
 .btn.btn-sm {
   font-size: 0.6rem;
 }
 
+.btn.btn-link {
+  color: var(--link-color);
+  background-color: transparent;
+  border-color: transparent;
+
+  &:hover {
+    color: var(--link-color);
+  }
+}
+
 .btn-link-minimal {
   display: inline;
   height: auto;
@@ -44,6 +62,10 @@
     margin-right: 0.2rem;
     min-width: 0.8rem;
   }
+
+  &:hover {
+    border-color: var(--border-color);
+  }
 }
 
 .btn-comment-collapse-label::after {
@@ -73,8 +95,49 @@
   }
 }
 
+@mixin label-button($color) {
+  color: $color;
+  border-color: $color;
+
+  &:hover {
+    color: $color;
+  }
+
+  &.btn-used:hover {
+    background-color: $color;
+    color: var(--white-color);
+  }
+}
+
+.btn-comment-label-exemplary {
+  @include label-button(var(--comment-label-exemplary-color));
+}
+
+.btn-comment-label-joke {
+  @include label-button(var(--comment-label-joke-color));
+}
+
+.btn-comment-label-noise {
+  @include label-button(var(--comment-label-noise-color));
+}
+
+.btn-comment-label-offtopic {
+  @include label-button(var(--comment-label-offtopic-color));
+}
+
+.btn-comment-label-malice {
+  @include label-button(var(--comment-label-malice-color));
+}
+
 .btn-light {
   font-weight: normal;
+
+  color: var(--foreground-secondary-color);
+  border-color: var(--border-color);
+
+  &:hover {
+    color: var(--link-color);
+  }
 }
 
 .btn-post {
@@ -122,8 +185,42 @@
   line-height: 0.6rem;
 
   cursor: pointer;
+
+  color: var(--foreground-secondary-color);
+
+  &:hover {
+    color: var(--foreground-extreme-color);
+  }
 }
 
 .btn-post-action-used {
   text-decoration: underline;
+  color: var(--button-used-color);
+}
+
+.btn.btn-primary {
+  color: var(--button-by-brightness-color);
+
+  background-color: var(--button-color);
+  border-color: var(--button-color);
+
+  &:hover {
+    background-color: var(--button-darkened-10-color);
+    border-color: var(--button-darkened-10-color);
+  }
+
+  &:visited {
+    color: var(--button-by-brightness-color);
+  }
+}
+
+.btn-used {
+  color: var(--button-used-color);
+  border-color: var(--button-used-darkened-3-color);
+
+  &:hover {
+    background-color: var(--button-used-darkened-3-color);
+    border-color: var(--button-used-darkened-8-color);
+    color: var(--white-color);
+  }
 }

tildes/scss/modules/_chip.scss

@@ -3,4 +3,26 @@
 
 .chip {
   border-radius: 0;
+
+  background-color: var(--background-secondary-color);
+  color: var(--foreground-highlight-color);
+
+  &.active {
+    background-color: var(--button-color);
+    color: var(--button-by-brightness-color);
+
+    .btn {
+      color: var(--button-by-brightness-color);
+    }
+  }
+
+  &.error {
+    background-color: var(--error-color);
+
+    color: var(--error-by-brightness-color);
+
+    .btn {
+      color: var(--error-by-brightness-color);
+    }
+  }
 }

tildes/scss/modules/_comment.scss

@@ -7,7 +7,7 @@
   margin-bottom: 0.4rem;
 
   &:target > .comment-itself {
-    border-left: 3px solid;
+    border-left: 3px solid var(--stripe-target-color);
   }
 }
 
@@ -28,6 +28,9 @@
   @media (min-width: $size-md) {
     padding: 0.2rem;
   }
+
+  color: var(--foreground-highlight-color);
+  background-color: var(--background-secondary-color);
 }
 
 .comment-user-info {
@@ -65,6 +68,8 @@
   display: none;
 
   margin-right: 0.4rem;
+
+  color: var(--foreground-secondary-color);
 }
 
 .comment-exemplary-reasons {
@@ -96,6 +101,12 @@
   @media (min-width: $size-md) {
     margin-left: 1rem;
   }
+
+  color: var(--foreground-secondary-color);
+
+  &:visited {
+    color: var(--foreground-secondary-color);
+  }
 }
 
 .comment-tree {
@@ -164,6 +175,7 @@
 .comment-removed-warning {
   font-weight: bold;
   font-size: 0.6rem;
+  color: var(--warning-color);
 }
 
 .comment-votes {
@@ -217,6 +229,7 @@
     font-size: 0.6rem;
     line-height: 0.8rem;
     white-space: nowrap;
+    background-color: var(--background-primary-color);
   }
 
   .btn-comment-collapse-label::after {
@@ -249,26 +262,31 @@
 .is-comment-removed {
   font-size: 0.7rem;
   font-style: italic;
+  color: var(--foreground-secondary-color);
 }
 
 .is-comment-mine {
   > .comment-itself {
     margin-left: -2px;
-    border-left: 3px solid;
+    border-left: 3px solid var(--stripe-mine-color);
   }
 }
 
 .is-comment-new {
   > .comment-itself {
     margin-left: -2px;
-    border-left: 3px solid;
+    border-left: 3px solid var(--alert-color);
+  }
+
+  .comment-text {
+    color: var(--foreground-highlight-color);
   }
 }
 
 .is-comment-exemplary {
   > .comment-itself {
     margin-left: -2px;
-    border-left: 3px solid;
+    border-left: 3px solid var(--comment-label-exemplary-color);
   }
 }
 

tildes/scss/modules/_divider.scss

@@ -4,4 +4,10 @@
 .divider,
 .divider[data-content] {
   margin: 1rem;
+  border-color: var(--border-color);
+}
+
+.divider[data-content]::after {
+  color: var(--foreground-primary-color);
+  background-color: var(--background-primary-color);
 }

tildes/scss/modules/_donation.scss

@@ -34,6 +34,14 @@
   height: 0.4rem;
 }
 
+.donation-goal-meter-over-goal {
+  background: var(--comment-label-exemplary-color);
+
+  &::-webkit-meter-bar {
+    background: var(--comment-label-exemplary-color);
+  }
+}
+
 .donation-goal-progress {
   display: flex;
   align-items: center;

tildes/scss/modules/_dropdown.scss

@@ -8,6 +8,10 @@
     .btn-post-action {
       justify-content: left;
       width: 100%;
+
+      &:hover {
+        background-color: var(--background-secondary-color);
+      }
     }
   }
 

tildes/scss/modules/_empty.scss

@@ -5,3 +5,7 @@
   background: inherit;
   color: inherit;
 }
+
+.empty-subtitle {
+  color: var(--foreground-secondary-color);
+}

tildes/scss/modules/_form.scss

@@ -1,6 +1,16 @@
 // Copyright (c) 2018 Tildes contributors <code@tildes.net>
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
+.form-autocomplete {
+  .menu {
+    background-color: var(--background-secondary-color);
+  }
+
+  .form-autocomplete-input .form-input {
+    border-color: transparent;
+  }
+}
+
 .form-group {
   .form-radio {
     margin-left: 1rem;
@@ -15,10 +25,13 @@
   }
 }
 
-select.form-select:not([multiple]) {
+select.form-select:not([multiple]):not([size]) {
   // would be better to implement autoprefixer to do this
   -moz-appearance: none;
   -webkit-appearance: none;
+
+  border-color: var(--border-color);
+  background-color: var(--background-input-color);
 }
 
 .form-listing-options {
@@ -59,6 +72,8 @@ select.form-select:not([multiple]) {
   padding: 0.4rem;
   border: 1px dashed;
   overflow: auto;
+
+  border-color: var(--border-color);
 }
 
 .form-buttons {
@@ -85,6 +100,26 @@ textarea.form-input {
 
 .form-input {
   max-width: 40rem;
+
+  // error colors for :invalid inputs, using same approach as Spectre
+  &:not(:placeholder-shown):invalid {
+    border-color: var(--error-color);
+
+    &:focus {
+      box-shadow: 0 0 0 1px var(--error-color);
+    }
+
+    + .form-input-hint {
+      color: var(--error-color);
+    }
+  }
+}
+
+.form-input,
+.form-input[readonly] {
+  color: var(--foreground-primary-color);
+  background-color: var(--background-input-color);
+  border-color: var(--border-color);
 }
 
 .form-input-note {

tildes/scss/modules/_group.scss

@@ -28,6 +28,12 @@
   line-height: 0.8rem;
 }
 
+.group-list-item-not-subscribed {
+  a.link-group {
+    color: var(--warning-color);
+  }
+}
+
 .group-subscription {
   display: flex;
   align-items: center;

tildes/scss/modules/_input.scss

@@ -3,6 +3,8 @@
 
 .input-group .input-group-addon {
   border-color: inherit;
+  background-color: var(--background-secondary-color);
+  color: var(--foreground-highlight-color);
 }
 
 .input-invite-code {

tildes/scss/modules/_label.scss

@@ -12,15 +12,76 @@
   text-transform: capitalize;
 }
 
+@mixin theme-special-label($background-color, $foreground-color, $border-color) {
+  background-color: $background-color;
+  color: $foreground-color;
+  border: 1px solid $border-color;
+  padding: 0 0.2rem;
+  line-height: 0.9rem;
+
+  a,
+  a:hover,
+  a:visited {
+    color: $foreground-color;
+  }
+}
+
+.label-comment-exemplary {
+  @include theme-special-label(
+    var(--background-label-exemplary-color),
+    var(--foreground-label-exemplary-color),
+    var(--comment-label-exemplary-color)
+  );
+}
+
+.label-comment-joke {
+  @include theme-special-label(
+    var(--background-label-joke-color),
+    var(--foreground-label-joke-color),
+    var(--comment-label-joke-color)
+  );
+}
+
+.label-comment-noise {
+  @include theme-special-label(
+    var(--background-label-noise-color),
+    var(--foreground-label-noise-color),
+    var(--comment-label-noise-color)
+  );
+}
+
+.label-comment-offtopic {
+  @include theme-special-label(
+    var(--background-label-offtopic-color),
+    var(--foreground-label-offtopic-color),
+    var(--comment-label-offtopic-color)
+  );
+}
+
+.label-comment-malice {
+  @include theme-special-label(
+    var(--background-label-malice-color),
+    var(--foreground-label-malice-color),
+    var(--comment-label-malice-color)
+  );
+}
+
 .label-topic-tag {
   background-color: transparent;
   margin: 0 0.4rem 0 0;
+  padding: 0;
   word-wrap: break-word;
   max-width: 100%;
 
   & + & {
     margin-left: 0.2rem;
   }
+
+  a,
+  a:hover,
+  a:visited {
+    color: var(--foreground-primary-color);
+  }
 }
 
 .label-topic-tag-spoiler,
@@ -29,3 +90,21 @@
 .label-topic-tag[class*="label-topic-tag-spoiler-"] {
   font-weight: bold;
 }
+
+.label-topic-tag-nsfw,
+.label-topic-tag[class*="label-topic-tag-nsfw-"] {
+  @include theme-special-label(
+    var(--topic-tag-nsfw-color),
+    var(--topic-tag-nsfw-foreground-color),
+    var(--topic-tag-nsfw-border-color)
+  );
+}
+
+.label-topic-tag-spoiler,
+.label-topic-tag[class*="label-topic-tag-spoiler-"] {
+  @include theme-special-label(
+    var(--topic-tag-spoiler-color),
+    var(--topic-tag-spoiler-foreground-color),
+    var(--topic-tag-spoiler-border-color)
+  );
+}

tildes/scss/modules/_link.scss

@@ -9,4 +9,20 @@ a.link-group {
   &:hover {
     text-decoration: underline;
   }
+
+  &:visited {
+    color: var(--link-color);
+  }
+}
+
+.link-no-visited-color:visited {
+  color: var(--link-color);
+}
+
+a.logged-in-user-alert {
+  color: var(--alert-color);
+
+  &:visited {
+    color: var(--alert-color);
+  }
 }

tildes/scss/modules/_logged-in-user.scss

@@ -19,3 +19,8 @@
   font-weight: bold;
   font-size: 0.5rem;
 }
+
+.logged-in-user-username,
+.logged-in-user-username:visited {
+  color: var(--foreground-primary-color);
+}

tildes/scss/modules/_menu.scss

@@ -3,7 +3,9 @@
 
 .menu {
   box-shadow: none;
-  border: 1px outset;
+  border: 1px outset var(--border-color);
+
+  background-color: var(--background-primary-color);
 
   .menu-item {
     > a:hover,

tildes/scss/modules/_message.scss

@@ -13,6 +13,9 @@
     font-size: 0.7rem;
     line-height: 0.9rem;
 
+    color: var(--foreground-highlight-color);
+    background-color: var(--background-secondary-color);
+
     .link-user {
       margin-right: 0.2rem;
     }
@@ -40,5 +43,5 @@
 
 .is-message-mine {
   margin-left: -2px;
-  border-left: 3px solid;
+  border-left: 3px solid var(--stripe-mine-color);
 }

tildes/scss/modules/_nav.scss

@@ -28,12 +28,18 @@
 
   .nav-item a {
     cursor: pointer;
+    color: var(--link-color);
 
     &:hover {
       text-decoration: underline;
+      color: var(--link-hover-color);
     }
   }
 
+  .nav-item.active a {
+    color: var(--link-color);
+  }
+
   .nav-item .btn-link {
     height: auto;
     font-size: 0.8rem;

tildes/scss/modules/_settings.scss

@@ -2,6 +2,10 @@
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
 .settings-list {
+  a:visited {
+    color: var(--link-color);
+  }
+
   li {
     margin-bottom: 1rem;
   }

tildes/scss/modules/_sidebar.scss

@@ -6,6 +6,11 @@
   // that don't support *either* custom properties or the @supports test for them
   background-color: $body-bg;
 
+  // stylelint-disable-next-line declaration-block-no-duplicate-properties
+  background-color: var(--background-primary-color);
+
+  border-left-color: var(--border-color);
+
   .btn {
     width: 100%;
   }
@@ -47,6 +52,8 @@
   padding: 0.2rem 0.4rem;
   align-items: center;
   justify-content: space-between;
+
+  background-color: var(--background-secondary-color);
 }
 
 .is-sidebar-displayed {

tildes/scss/modules/_site-footer.scss

@@ -10,6 +10,10 @@
 
   font-size: 0.6rem;
   text-align: center;
+
+  a:visited {
+    color: var(--link-color);
+  }
 }
 
 .site-footer-links {

tildes/scss/modules/_site-header.scss

@@ -34,6 +34,16 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+
+  a,
+  a:visited {
+    color: var(--foreground-primary-color);
+  }
+
+  .toast a,
+  .toast a:visited {
+    color: var(--link-color);
+  }
 }
 
 .site-header-logo {
@@ -60,6 +70,12 @@
   font-size: 1.2rem;
   font-weight: bold;
 
+  color: var(--foreground-highlight-color);
+
+  &:visited {
+    color: var(--foreground-highlight-color);
+  }
+
   &:hover,
   &:active,
   &:focus {
@@ -83,6 +99,7 @@
       font-size: 0.5rem;
       height: 0.7rem;
       transform: translate(50%, -40%);
+      background-color: var(--alert-color);
     }
   }
 }

tildes/scss/modules/_tab.scss

@@ -3,6 +3,19 @@
 
 .tab {
   font-size: 0.6rem;
+  border-color: var(--border-color);
+
+  .tab-item {
+    a {
+      color: var(--foreground-primary-color);
+    }
+
+    &.active a,
+    &.active button {
+      color: var(--link-color);
+      border-bottom-color: var(--link-color);
+    }
+  }
 }
 
 .tab-item {

tildes/scss/modules/_table.scss

@@ -1,6 +1,14 @@
 // Copyright (c) 2019 Tildes contributors <code@tildes.net>
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
+.table td {
+  border-bottom-color: var(--border-color);
+}
+
+.table th {
+  border-bottom-color: var(--foreground-highlight-color);
+}
+
 .table-financials {
   max-width: $paragraph-max-width;
   margin-top: 1rem;

tildes/scss/modules/_text.scss

@@ -1,10 +1,22 @@
 // Copyright (c) 2018 Tildes contributors <code@tildes.net>
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
+.text-error {
+  color: var(--error-color);
+}
+
 .text-formatted {
   @extend %text-container;
 }
 
+.text-link {
+  color: var(--link-color);
+}
+
+.text-secondary {
+  color: var(--foreground-secondary-color);
+}
+
 .text-small {
   font-size: 0.6rem;
   line-height: 0.9rem;
@@ -14,6 +26,10 @@
   font-size: 0.6rem;
 }
 
+.text-warning {
+  color: var(--warning-color);
+}
+
 // special formatting rules for wiki pages
 .text-wiki {
   h1,
@@ -24,6 +40,7 @@
   h6 {
     a {
       text-decoration: none;
+      color: var(--foreground-highlight-color);
     }
   }
 

tildes/scss/modules/_toast.scss

@@ -7,6 +7,14 @@
   margin: 1rem 0;
   font-weight: bold;
 
+  color: var(--foreground-highlight-color);
+  background-color: var(--background-secondary-color);
+  border-color: var(--border-color);
+
+  a {
+    color: var(--link-color);
+  }
+
   ul {
     margin-bottom: 1rem;
   }
@@ -23,3 +31,9 @@
     font-weight: bold;
   }
 }
+
+.toast.toast-warning {
+  border-color: var(--warning-color);
+  color: var(--warning-foreground-color);
+  background-color: var(--warning-background-color);
+}

tildes/scss/modules/_topic.scss

@@ -3,6 +3,11 @@
 
 .topic-listing > li {
   margin: 0;
+
+  &:nth-of-type(2n) {
+    color: var(--foreground-mixed-color);
+    background-color: var(--background-mixed-color);
+  }
 }
 
 .topic-listing-filter {
@@ -90,6 +95,11 @@
 
   .btn-post-action {
     font-weight: normal;
+    color: var(--link-color);
+  }
+
+  .btn-post-action-used {
+    color: var(--link-visited-color);
   }
 
   .dropdown-toggle .icon {
@@ -155,6 +165,10 @@
   margin-bottom: 0.8rem;
 }
 
+.topic-log-entry-time {
+  color: var(--foreground-secondary-color);
+}
+
 .topic-metadata {
   display: flex;
   flex-wrap: wrap;
@@ -194,6 +208,11 @@
   &.btn-used {
     border-color: transparent;
 
+    &:hover {
+      background-color: var(--button-darkened-3-color);
+      border-color: var(--button-darkened-8-color);
+    }
+
     .topic-voting-votes {
       font-weight: bold;
     }
@@ -224,6 +243,8 @@
   overflow: hidden;
   font-style: italic;
 
+  color: var(--foreground-secondary-color);
+
   h1 {
     margin: 0 0 0.4rem;
   }
@@ -236,11 +257,13 @@
     font-style: italic;
     content: "Re-collapse topic text";
     display: none;
+    color: var(--foreground-secondary-color);
   }
 
   &[open] {
     font-style: normal;
     font-size: 0.8rem;
+    color: var(--foreground-primary-color);
 
     summary {
       font-size: 0.6rem;
@@ -275,6 +298,10 @@
   }
 }
 
+.topic-info-comments-new {
+  color: var(--alert-color);
+}
+
 .topic-info-source {
   display: flex;
   align-items: center;
@@ -284,6 +311,7 @@
 
 .topic-info-source-scheduled {
   font-style: italic;
+  color: var(--foreground-secondary-color);
 }
 
 .topic-full {
@@ -299,6 +327,7 @@
 .topic-full-byline {
   margin-bottom: 0.4rem;
   font-size: 0.6rem;
+  color: var(--foreground-secondary-color);
 }
 
 .topic-full-content-metadata {
@@ -335,9 +364,11 @@
 .topic-full-tags {
   margin-bottom: 0.4rem;
   font-size: 0.6rem;
+  color: var(--foreground-secondary-color);
 
   a {
     text-decoration: underline;
+    color: var(--foreground-secondary-color);
 
     &:hover {
       text-decoration: none;
@@ -396,11 +427,18 @@
 }
 
 .is-topic-mine {
-  border-left: 3px solid;
+  border-left: 3px solid var(--stripe-mine-color);
   margin-left: -3px;
 }
 
 .is-topic-official {
-  border-left: 3px solid;
+  border-left: 3px solid var(--alert-color);
   margin-left: -3px;
+
+  h1 {
+    a,
+    a:visited {
+      color: var(--alert-color);
+    }
+  }
 }

tildes/scss/styles.scss

@@ -47,7 +47,6 @@
 // Note: if you add a new theme, you may also want to add a new theme-color
 // meta tag inside the base.jinja2 template, so mobile browsers can match
 @import "themes/theme_mixins";
-@import "themes/theme_base";
 @import "themes/default";
 @import "themes/black";
 @import "themes/dracula";

tildes/scss/themes/_theme_base.scss

@@ -1,686 +0,0 @@
-// Copyright (c) 2018 Tildes contributors <code@tildes.net>
-// SPDX-License-Identifier: AGPL-3.0-or-later
-
-// This file should only contain rules that need to be affected by all the
-// different themes, defined inside the `use-theme` mixin below.
-
-// Each theme should be defined in its own SCSS file, and consist of a SCSS map
-// and a unique `body.theme-<name>` selector.
-// The `use-theme` mixin is called inside the body.theme-<name> block and takes
-// the theme's map as its only argument, applying each defined color available
-// in the map. If a color variable is left undefined in the theme's map, it
-// will fall back to the default value from `$default-theme` instead.
-
-body {
-  color: var(--foreground-primary-color);
-  background-color: var(--background-secondary-color);
-
-  * {
-    border-color: var(--border-color);
-  }
-
-  a {
-    color: var(--link-color);
-
-    &:hover {
-      color: var(--link-hover-color);
-    }
-
-    &:visited {
-      color: var(--link-visited-color);
-    }
-
-    code {
-      color: var(--link-color);
-
-      &:hover {
-        text-decoration: underline;
-      }
-    }
-
-    &:visited code {
-      color: var(--link-visited-color);
-    }
-  }
-
-  a.link-user,
-  a.link-group {
-    &:visited {
-      color: var(--link-color);
-    }
-  }
-
-  a.logged-in-user-alert {
-    color: var(--alert-color);
-
-    &:visited {
-      color: var(--alert-color);
-    }
-  }
-
-  blockquote {
-    border-color: var(--foreground-highlight-color);
-    background-color: var(--background-secondary-color);
-
-    code,
-    pre {
-      background-color: var(--background-primary-color);
-    }
-  }
-
-  code,
-  pre {
-    color: var(--foreground-highlight-color);
-    background-color: var(--background-secondary-color);
-  }
-
-  main {
-    background-color: var(--background-primary-color);
-  }
-
-  meter {
-    // Crazy styles to get this to work adapted from Spectre.css's _meters.scss
-    background: var(--background-secondary-color);
-
-    &::-webkit-meter-bar {
-      background: var(--background-secondary-color);
-    }
-
-    // For some mysterious reason, none of the below rules can be merged
-    &::-webkit-meter-optimum-value {
-      background: var(--success-color);
-    }
-
-    &:-moz-meter-optimum::-moz-meter-bar {
-      background: var(--success-color);
-    }
-
-    &::-webkit-meter-suboptimum-value {
-      background: var(--warning-color);
-    }
-
-    &:-moz-meter-sub-optimum::-moz-meter-bar {
-      background: var(--warning-color);
-    }
-
-    &::-webkit-meter-even-less-good-value {
-      background: var(--error-color);
-    }
-
-    &:-moz-meter-sub-sub-optimum::-moz-meter-bar {
-      background: var(--error-color);
-    }
-  }
-
-  tbody tr:nth-of-type(2n + 1) {
-    background-color: var(--background-secondary-color);
-  }
-
-  .table td {
-    border-bottom-color: var(--border-color);
-  }
-
-  .table th {
-    border-bottom-color: var(--foreground-highlight-color);
-  }
-
-  .form-autocomplete {
-    .menu {
-      background-color: var(--background-secondary-color);
-    }
-  }
-
-  .breadcrumb .breadcrumb-item {
-    color: var(--foreground-secondary-color);
-
-    &:not(:last-child) {
-      a {
-        color: var(--foreground-secondary-color);
-      }
-    }
-
-    &:not(:first-child) {
-      &::before {
-        color: var(--foreground-secondary-color);
-      }
-    }
-
-    &:last-child {
-      a {
-        color: var(--link-color);
-      }
-    }
-  }
-
-  .btn {
-    color: var(--button-color);
-    background-color: transparent;
-    border-color: var(--button-color);
-
-    &:hover {
-      background-color: var(--button-transparent-color);
-    }
-  }
-
-  .btn-comment-collapse:hover {
-    border-color: var(--border-color);
-  }
-
-  .btn-light {
-    color: var(--foreground-secondary-color);
-    border-color: var(--border-color);
-
-    &:hover {
-      color: var(--link-color);
-    }
-  }
-
-  .btn.btn-link {
-    color: var(--link-color);
-    background-color: transparent;
-    border-color: transparent;
-
-    &:hover {
-      color: var(--link-color);
-    }
-  }
-
-  .btn.btn-primary {
-    color: var(--button-by-brightness-color);
-
-    background-color: var(--button-color);
-    border-color: var(--button-color);
-
-    &:hover {
-      background-color: var(--button-darkened-10-color);
-      border-color: var(--button-darkened-10-color);
-    }
-
-    &:visited {
-      color: var(--button-by-brightness-color);
-    }
-  }
-
-  .btn-used {
-    color: var(--button-used-color);
-    border-color: var(--button-used-darkened-3-color);
-
-    &:hover {
-      background-color: var(--button-used-darkened-3-color);
-      border-color: var(--button-used-darkened-8-color);
-      color: var(--white-color);
-    }
-  }
-
-  .btn-post-action {
-    color: var(--foreground-secondary-color);
-
-    &:hover {
-      color: var(--foreground-extreme-color);
-    }
-  }
-
-  .btn-post-action-used {
-    color: var(--button-used-color);
-  }
-
-  .btn-comment-label-exemplary {
-    @include label-button(var(--comment-label-exemplary-color));
-  }
-
-  .btn-comment-label-joke {
-    @include label-button(var(--comment-label-joke-color));
-  }
-
-  .btn-comment-label-noise {
-    @include label-button(var(--comment-label-noise-color));
-  }
-
-  .btn-comment-label-offtopic {
-    @include label-button(var(--comment-label-offtopic-color));
-  }
-
-  .btn-comment-label-malice {
-    @include label-button(var(--comment-label-malice-color));
-  }
-
-  .chip {
-    background-color: var(--background-secondary-color);
-    color: var(--foreground-highlight-color);
-
-    &.active {
-      background-color: var(--button-color);
-      color: var(--button-by-brightness-color);
-
-      .btn {
-        color: var(--button-by-brightness-color);
-      }
-    }
-
-    &.error {
-      background-color: var(--error-color);
-
-      color: var(--error-by-brightness-color);
-
-      .btn {
-        color: var(--error-by-brightness-color);
-      }
-    }
-  }
-
-  .comment-branch-counter {
-    color: var(--foreground-secondary-color);
-  }
-
-  .comment-nav-link,
-  .comment-nav-link:visited {
-    color: var(--foreground-secondary-color);
-  }
-
-  .comment-removed-warning {
-    color: var(--warning-color);
-  }
-
-  .label-comment-exemplary {
-    @include theme-special-label(
-      var(--background-label-exemplary-color),
-      var(--foreground-label-exemplary-color),
-      var(--comment-label-exemplary-color)
-    );
-  }
-
-  .label-comment-joke {
-    @include theme-special-label(
-      var(--background-label-joke-color),
-      var(--foreground-label-joke-color),
-      var(--comment-label-joke-color)
-    );
-  }
-
-  .label-comment-noise {
-    @include theme-special-label(
-      var(--background-label-noise-color),
-      var(--foreground-label-noise-color),
-      var(--comment-label-noise-color)
-    );
-  }
-
-  .label-comment-offtopic {
-    @include theme-special-label(
-      var(--background-label-offtopic-color),
-      var(--foreground-label-offtopic-color),
-      var(--comment-label-offtopic-color)
-    );
-  }
-
-  .label-comment-malice {
-    @include theme-special-label(
-      var(--background-label-malice-color),
-      var(--foreground-label-malice-color),
-      var(--comment-label-malice-color)
-    );
-  }
-
-  %collapsed-theme {
-    .comment-header {
-      background-color: var(--background-primary-color);
-    }
-  }
-
-  .is-comment-collapsed:not(:target) {
-    @extend %collapsed-theme;
-  }
-
-  .is-comment-collapsed-individual:not(:target) {
-    > .comment-itself {
-      @extend %collapsed-theme;
-    }
-  }
-
-  .comment-header {
-    color: var(--foreground-highlight-color);
-    background-color: var(--background-secondary-color);
-  }
-
-  .comment:target > .comment-itself {
-    border-left-color: var(--stripe-target-color);
-  }
-
-  .divider {
-    border-color: var(--border-color);
-  }
-
-  .divider[data-content]::after {
-    color: var(--foreground-primary-color);
-    background-color: var(--background-primary-color);
-  }
-
-  .donation-goal-meter-over-goal {
-    background: var(--comment-label-exemplary-color);
-
-    &::-webkit-meter-bar {
-      background: var(--comment-label-exemplary-color);
-    }
-  }
-
-  .dropdown .menu .btn-post-action:hover {
-    background-color: var(--background-secondary-color);
-  }
-
-  .empty-subtitle {
-    color: var(--foreground-secondary-color);
-  }
-
-  .form-autocomplete .form-autocomplete-input .form-input {
-    border-color: transparent;
-  }
-
-  .form-input,
-  .form-input[readonly] {
-    color: var(--foreground-primary-color);
-    background-color: var(--background-input-color);
-    border-color: var(--border-color);
-  }
-
-  // error colors for :invalid inputs, using same approach as Spectre
-  .form-input:not(:placeholder-shown):invalid {
-    border-color: var(--error-color);
-
-    &:focus {
-      box-shadow: 0 0 0 1px var(--error-color);
-    }
-
-    + .form-input-hint {
-      color: var(--error-color);
-    }
-  }
-
-  .form-markdown-preview {
-    border-color: var(--border-color);
-  }
-
-  .form-select {
-    border-color: var(--border-color);
-  }
-
-  .form-select:not([multiple]):not([size]) {
-    background-color: var(--background-input-color);
-  }
-
-  .group-list-item-not-subscribed {
-    a.link-group {
-      color: var(--warning-color);
-    }
-  }
-
-  .input-group-addon {
-    background-color: var(--background-secondary-color);
-    color: var(--foreground-highlight-color);
-  }
-
-  .label-topic-tag {
-    padding: 0;
-
-    a,
-    a:hover,
-    a:visited {
-      color: var(--foreground-primary-color);
-    }
-  }
-
-  .label-topic-tag-nsfw,
-  .label-topic-tag[class*="label-topic-tag-nsfw-"] {
-    @include theme-special-label(
-      var(--topic-tag-nsfw-color),
-      var(--topic-tag-nsfw-foreground-color),
-      var(--topic-tag-nsfw-border-color)
-    );
-  }
-
-  .label-topic-tag-spoiler,
-  .label-topic-tag[class*="label-topic-tag-spoiler-"] {
-    @include theme-special-label(
-      var(--topic-tag-spoiler-color),
-      var(--topic-tag-spoiler-foreground-color),
-      var(--topic-tag-spoiler-border-color)
-    );
-  }
-
-  .link-no-visited-color:visited {
-    color: var(--link-color);
-  }
-
-  .logged-in-user-username,
-  .logged-in-user-username:visited {
-    color: var(--foreground-primary-color);
-  }
-
-  .menu {
-    background-color: var(--background-primary-color);
-    border-color: var(--border-color);
-  }
-
-  .message {
-    header {
-      color: var(--foreground-highlight-color);
-      background-color: var(--background-secondary-color);
-    }
-  }
-
-  .nav .nav-item {
-    a {
-      color: var(--link-color);
-
-      &:hover {
-        color: var(--link-hover-color);
-      }
-    }
-
-    &.active a {
-      color: var(--link-color);
-    }
-  }
-
-  .settings-list {
-    a:visited {
-      color: var(--link-color);
-    }
-  }
-
-  .sidebar-controls {
-    background-color: var(--background-secondary-color);
-  }
-
-  #sidebar {
-    background-color: var(--background-primary-color);
-    border-left-color: var(--border-color);
-  }
-
-  #site-footer a:visited {
-    color: var(--link-color);
-  }
-
-  .site-header-context {
-    a,
-    a:visited {
-      color: var(--foreground-primary-color);
-    }
-
-    .toast a,
-    .toast a:visited {
-      color: var(--link-color);
-    }
-  }
-
-  .site-header-logo,
-  .site-header-logo:visited {
-    color: var(--foreground-highlight-color);
-  }
-
-  .site-header-sidebar-button.badge[data-badge]::after {
-    background-color: var(--alert-color);
-  }
-
-  .tab {
-    border-color: var(--border-color);
-  }
-
-  .tab .tab-item {
-    a {
-      color: var(--foreground-primary-color);
-    }
-
-    &.active a,
-    &.active button {
-      color: var(--link-color);
-      border-bottom-color: var(--link-color);
-    }
-  }
-
-  .text-error {
-    color: var(--error-color);
-  }
-
-  .text-link {
-    color: var(--link-color);
-  }
-
-  .text-secondary {
-    color: var(--foreground-secondary-color);
-  }
-
-  .text-warning {
-    color: var(--warning-color);
-  }
-
-  .text-wiki {
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      a {
-        color: var(--foreground-highlight-color);
-      }
-    }
-  }
-
-  .toast {
-    color: var(--foreground-highlight-color);
-    background-color: var(--background-secondary-color);
-
-    a {
-      color: var(--link-color);
-    }
-  }
-
-  .toast.toast-warning {
-    border-color: var(--warning-color);
-    color: var(--warning-foreground-color);
-    background-color: var(--warning-background-color);
-  }
-
-  .topic-actions {
-    .btn-post-action {
-      color: var(--link-color);
-    }
-
-    .btn-post-action-used {
-      color: var(--link-visited-color);
-    }
-  }
-
-  .topic-listing {
-    > li:nth-of-type(2n) {
-      color: var(--foreground-mixed-color);
-      background-color: var(--background-mixed-color);
-    }
-  }
-
-  .topic-full-byline {
-    color: var(--foreground-secondary-color);
-  }
-
-  .topic-full-tags {
-    color: var(--foreground-secondary-color);
-
-    a {
-      color: var(--foreground-secondary-color);
-    }
-  }
-
-  .topic-info-comments-new {
-    color: var(--alert-color);
-  }
-
-  .topic-info-source-scheduled {
-    color: var(--foreground-secondary-color);
-  }
-
-  .topic-log-entry-time {
-    color: var(--foreground-secondary-color);
-  }
-
-  .topic-text-excerpt {
-    color: var(--foreground-secondary-color);
-
-    summary::after {
-      color: var(--foreground-secondary-color);
-    }
-
-    &[open] {
-      color: var(--foreground-primary-color);
-    }
-  }
-
-  .topic-voting.btn-used {
-    border-color: transparent;
-
-    &:hover {
-      background-color: var(--button-darkened-3-color);
-      border-color: var(--button-darkened-8-color);
-    }
-  }
-
-  .is-comment-deleted,
-  .is-comment-removed {
-    color: var(--foreground-secondary-color);
-  }
-
-  .is-comment-mine > .comment-itself {
-    border-left-color: var(--stripe-mine-color);
-  }
-
-  .is-comment-exemplary {
-    > .comment-itself {
-      border-left-color: var(--comment-label-exemplary-color);
-    }
-  }
-
-  .is-comment-new {
-    > .comment-itself {
-      border-left-color: var(--alert-color);
-    }
-
-    .comment-text {
-      color: var(--foreground-highlight-color);
-    }
-  }
-
-  .is-message-mine,
-  .is-topic-mine {
-    border-left-color: var(--stripe-mine-color);
-  }
-
-  .is-topic-official {
-    border-left-color: var(--alert-color);
-
-    h1 {
-      a,
-      a:visited {
-        color: var(--alert-color);
-      }
-    }
-  }
-}

tildes/scss/themes/_theme_mixins.scss

@@ -1,20 +1,6 @@
 // Copyright (c) 2020 Tildes contributors <code@tildes.net>
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
-@mixin label-button($color) {
-  color: $color;
-  border-color: $color;
-
-  &:hover {
-    color: $color;
-  }
-
-  &.btn-used:hover {
-    background-color: $color;
-    color: var(--white-color);
-  }
-}
-
 @mixin theme-preview-block($name, $foreground, $background) {
   .theme-preview-block-#{$name} {
     background-color: $background;
@@ -23,20 +9,6 @@
   }
 }
 
-@mixin theme-special-label($background-color, $foreground-color, $border-color) {
-  background-color: $background-color;
-  color: $foreground-color;
-  border: 1px solid $border-color;
-  padding: 0 0.2rem;
-  line-height: 0.9rem;
-
-  a,
-  a:hover,
-  a:visited {
-    color: $foreground-color;
-  }
-}
-
 @function map-get-fallback($map, $preferred-key, $fallback-key) {
   // map-get that will fall back to a second key if the first isn't set
   @if (map-has-key($map, $preferred-key)) {