rework CSS

- use CSS variables for almost every colour
- make colours more consistent
- fix default colourscheme not being very friendly for colourblind people
- split CSS entrypoints into core & colourschemes

assets/less/comments.less → assets/less/_comments.less

-@import (reference) 'mixins';
-@import (reference) 'settings';
+@import (reference) '_mixins';
+@import (reference) '_variables';
 
 /*
  * 1. Hide label in comment form.
@@ -9,8 +9,8 @@
 }
 
 .comment-user.submitter {
-  background: @comment-submitter-background-color;
+  background: var(--primary);
   border-radius: 2px;
-  color: @comment-submitter-color;
+  color: var(--primary-fg);
   padding: 0 0.25rem;
 }

assets/less/common.less → assets/less/_common.less

-@import (reference) 'mixins';
+@import (reference) '_mixins';
 
 .content-wrapper {
   display: flex;
@@ -55,13 +55,13 @@
 .user-flag::after { content: ']'; }
 
 .user-flag-admin {
-  color: @user-flag-admin-color;
+  color: var(--fg-red);
 }
 
 .user-flag-moderator {
-  color: @user-flag-moderator-color;
+  color: var(--fg-green);
 }
 
 .forum-group-heading a {
-  color: @page-color;
+  color: var(--text);
 }

assets/less/components/alert.less → assets/less/_components/alert.less

-@import (reference) '../settings';
-
 .alert {
   border-radius: 0.5rem;
   display: flex;
@@ -12,11 +10,11 @@
   }
 
   &--notice {
-    background: @alert-notice-color;
+    background: var(--bg-blue);
   }
 
   &--success {
-    background: @alert-success-color;
+    background: var(--bg-green);
   }
 }
 

assets/less/components/button.less → assets/less/_components/button.less

-@import (reference) '../mixins';
-@import (reference) '../settings';
+@import (reference) '../_mixins';
 
 .button {
   .unbuttonize();
-  background-color: @button-background-color;
   border-radius: 4px;
-  color: @button-text-color;
   cursor: pointer;
   display: inline-block;
   font-size: 120%;
@@ -13,36 +10,28 @@
   text-align: center;
   white-space: nowrap;
 
-  &:hover {
-    background-color: @button-hover-background-color;
-    text-decoration: none;
-  }
-
-  &:active {
-    color: @button-active-text-color;
-  }
-
   &--inline {
     font-size: 100%;
     display: inline;
     padding: 0.25rem 0.5rem;
   }
 
-  // inverted button
-  &--secondary {
-    background: transparent;
-    color: @button-background-color;
-    border: solid 1px @button-background-color;
-    padding: ~'calc(0.5rem - 1px) calc(1rem - 1px)';
+  &:not(&--secondary) {
+    background-color: var(--primary);
+    color: var(--primary-fg);
 
-    &.button--inline {
-      padding: ~'calc(0.25rem - 1px) calc(0.5rem - 1px)';
+    &:hover {
+      background-color: var(--primary-alt);
+      text-decoration: none;
     }
+  }
+
+  &--secondary {
+    background: var(--accent);
+    color: var(--accent-fg);
 
     &:hover {
-      background: transparent;
-      color: @button-hover-background-color;
-      border-color: @button-hover-background-color;
+      background: var(--accent-alt);
     }
   }
 }

assets/less/components/clear-notification-button.less → assets/less/_components/clear-notification-button.less

+@import (reference) 'button';
+
 .clear-notification-button {
   .button;
 

assets/less/components/comment.less → assets/less/_components/comment.less

-@import (reference) '../mixins';
-@import (reference) '../settings';
+@import (reference) '../_mixins';
 
 /*
  * <article class="comment">
@@ -23,8 +22,8 @@
  * </article>
  */
 .comment {
-  background: @page-background-color;
-  border: solid 1px @comment-border-color;
+  background: var(--bg-page);
+  border: solid 1px var(--border);
   display: flex;
   flex-direction: column;
   margin-bottom: 1rem;
@@ -35,13 +34,13 @@
 
     & > .comment {
       &__row {
-        border: solid @comment-border-color;
+        border: solid var(--border);
         border-width: 1px 1px 0;
       }
 
       &__replies {
-        border: solid @comment-border-color;
-        border-width: 0 1px 0px 1px;
+        border: solid var(--border);
+        border-width: 0 1px 0 1px;
       }
     }
   }
@@ -85,21 +84,5 @@
   &--nested {
     margin-bottom: 0.5rem;
   }
-
-  &:target {
-    border-bottom: dotted 1px;
-
-    & > .comment__row {
-      background: @comment-highlight-background;
-      border: dotted 1px;
-      border-width: 1px 1px 0;
-    }
-
-    & > .comment__replies {
-      background: @comment-highlight-background;
-      border: dotted 1px;
-      border-width: 0 1px;
-    }
-  }
 }
 

assets/less/components/diff-table.less → assets/less/_components/diff-table.less

-@import '../settings';
+@import '../_variables';
 
 .diff-table {
   border-collapse: collapse;
@@ -6,11 +6,11 @@
   width: 100%;
 
   &__line-group {
-    border-bottom: solid 0.5rem @diff-table-line-group-border-color;
+    border-bottom: solid 0.5rem var(--border);
   }
 
   &__line-no {
-    background: @diff-table-line-no-background-color;
+    background: var(--bg-grey);
     padding: 0.25rem 0.5rem;
     text-align: right;
     vertical-align: top;
@@ -24,15 +24,15 @@
     width: 45%;
 
     &--changed {
-      background: @diff-table-changed-background-color;
+      background: var(--bg-blue);
     }
 
     &--removed {
-      background: @diff-table-removed-background-color;
+      background: var(--bg-red);
     }
 
     &--added {
-      background: @diff-table-added-background-color;
+      background: var(--bg-green);
     }
   }
 }

assets/less/components/dimmed.less → assets/less/_components/dimmed.less

-@import (reference) '../settings';
-
 .dimmed {
-  color: contrast(@page-color, lighten(@page-color, 50%), darken(@page-color, 50%));
+  color: var(--fg-grey);
 
   // <small> is the correct
   small& {

assets/less/components/form.less → assets/less/_components/form.less

-@import (reference) '../mixins';
-@import (reference) '../settings';
+@import (reference) '../_mixins';
 
 //
 // Standard, vertical, non-weird forms
@@ -14,21 +13,21 @@
   }
 
   .text-inputs({
-    background-color: @form-text-input-background-color;
-    border: solid 1px @form-text-input-border-color;
+    background-color: var(--bg-page);
+    border: solid 1px var(--border);
     border-radius: 2px;
     line-height: 1.35;
-    color: @form-text-input-color;
+    color: var(--text);
     padding: 0.5rem;
 
     &:focus {
-      border: solid 1px @form-text-input-focus-border-color;
+      border: solid 1px var(--primary);
       outline: none;
     }
 
     &[disabled] {
-      background-color: @form-text-input-disabled-background-color;
-      color: @form-text-input-disabled-color;
+      background-color: var(--bg-grey);
+      color: var(--fg-grey);
     }
   });
 
@@ -38,7 +37,7 @@
   }
 
   &__error {
-    color: @form-error-color;
+    color: var(--fg-red);
     font-weight: bold;
     list-style-position: inside;
     margin: 0;
@@ -59,13 +58,13 @@
   }
 
   &__group {
-    border: solid 1px @form-text-input-border-color;
+    border: solid 1px var(--border);
     margin-bottom: 1rem;
     padding: 0 1rem;
   }
 
   &__help {
-    color: @form-help-text-color;
+    color: var(--text-muted);
     font-size: 0.80rem;
   }
 

assets/less/components/markdown-input.less → assets/less/_components/markdown-input.less

-@import (reference) '../settings';
+@import (reference) '../_variables';
 
 .markdown-input {
   &__preview {
-    background: @markdown-preview-background-color;
+    background: var(--bg-red);
     border-radius: 4px;
     display: flex;
     flex-direction: column;

assets/less/components/sidebar.less → assets/less/_components/sidebar.less

-@import (reference) '../settings';
-
 .sidebar {
   display: flex;
   flex-direction: column;
@@ -15,7 +13,7 @@
   }
 
   &__section {
-    background: @sidebar-background-color;
+    background: var(--sidebar-card);
     padding: 1rem 1rem 0;
     margin-bottom: 1rem;
   }

assets/less/components/site-nav.less → assets/less/_components/site-nav.less

-@import (reference) '../settings';
+@import (reference) '../_variables';
 
 @media screen and (min-width: @desktop-min-width) {
   .site-nav {
-    background-color: @nav-background-color;
+    background-color: var(--primary);
     display: flex;
     margin-bottom: 1rem;
     padding: 0 1rem;
@@ -13,7 +13,7 @@
 
     &__logo,
     &__link {
-      color: @nav-link-color;
+      color: var(--primary-fg);
       display: block;
       font-size: @nav-font-size;
       padding: 1rem;
@@ -40,14 +40,14 @@
       display: block;
 
       &--has-notifications {
-        background: @nav-notifications-background-color;
+        background: var(--fg-orange); // todo
       }
 
       // todo: BEM
       &.dropdown-container {
         &.expanded,
         &:not(.js):hover {
-          background: @nav-active-background-color;
+          background: var(--primary-alt);
         }
       }
     }
@@ -58,7 +58,7 @@
 
 @media screen and (max-width: (@desktop-min-width - 1px)) {
   .site-nav {
-    background-color: @nav-background-color;
+    background-color: var(--primary);
     margin-bottom: 1rem;
 
     &__logo {
@@ -68,14 +68,14 @@
     &__logo,
     &__mobile-toggle,
     &__link {
-      color: @nav-link-color;
+      color: var(--primary-fg);
       font-size: @nav-font-size;
       padding: 1rem;
     }
 
     &__mobile-toggle {
       &--has-notifications {
-        background: @nav-notifications-background-color;
+        background: var(--fg-orange); // todo
       }
     }
 
@@ -91,13 +91,13 @@
 
     &__item {
       &--has-notifications {
-        background: @nav-notifications-background-color;
+        background: var(--fg-orange); // todo
       }
 
       &.dropdown-container {
         &.expanded,
         &:not(.js):hover {
-          background: @nav-active-background-color;
+          background: var(--primary-alt);
         }
       }
     }
@@ -107,7 +107,7 @@
     }
 
     &__inner {
-      background-color: @nav-inner-background-color;
+      background-color: var(--primary-alt);
       display: none;
 
       &--mobile-visible {

assets/less/components/subscribe-button.less → assets/less/_components/subscribe-button.less

-@import (reference) '../mixins';
-@import (reference) '../settings';
+@import (reference) '../_mixins';
 
 .subscribe-button {
   .unbuttonize;
@@ -13,8 +12,8 @@
 
   &__label,
   &__subscriber-count {
-    background-color: @button-background-color;
-    color: @button-text-color;
+    background-color: var(--primary);
+    color: var(--primary-fg);
     padding: 0.5rem 1rem;
   }
 
@@ -29,13 +28,13 @@
 
   &:active {
     .subscribe-button__label {
-      color: @button-active-text-color;
+      color: var(--fg-grey);
     }
   }
 
   &:hover {
     .subscribe-button__label {
-      background-color: @button-hover-background-color;
+      background-color: var(--primary-alt);
     }
   }
 

assets/less/components/table.less → assets/less/_components/table.less

-@import (reference) '../settings';
+@import (reference) '../_variables';
 
 // No real need to use BEM for the table structure since HTML places strict
 // restrictions on how tables are structured. Just make sure nested tables don't
@@ -13,7 +13,7 @@
   }
 
   & > thead {
-    border-bottom: solid 2px @table-header-separator-color;
+    border-bottom: solid 2px var(--border);
   }
 
   & > thead,
@@ -39,7 +39,7 @@
   & > tbody > tr:nth-child(even) {
     & > th,
     & > td {
-      background-color: @table-alternate-row-background-color;
+      border-top: solid 1px var(--bg-grey);
     }
   }
 }

assets/less/components/tabs.less → assets/less/_components/tabs.less

-@import '../settings';
+@import '../_variables';
 
 .tabs {
   display: flex;
@@ -6,24 +6,24 @@
   margin-right: -1rem;
 
   &__bar {
-    background: @tab-background-color;
+    background: var(--accent);
     display: flex;
     margin: 0 1rem 1rem 0;
     padding: 0;
   }
 
   &__tab {
-    border-bottom: solid 1px @tab-inactive-border-color;
+    border-bottom: solid 1px var(--border);
     display: block;
     padding: 0;
 
     &--active {
-      border-bottom: solid 3px @tab-active-border-color;
+      border-bottom: solid 3px var(--primary);
     }
   }
 
   &__link {
-    color: unset;
+    color: var(--accent-fg);
     display: block;
     padding: 0.4rem 0.7rem 0.2rem 0.7rem;
   }

assets/less/forums.less → assets/less/_forums.less

-@import (reference) 'mixins';
-@import (reference) 'settings';
+@import (reference) '_mixins';
+@import (reference) '_variables';
 
 .grouped-forum-listing {
   .columns(@counter) when (@counter <= 5) {
     @media screen and (min-width: (160px + 192px * @counter)) {
       columns: @counter;
-      column-rule: solid 1px @grouped-forum-listing-border-color;
+      column-rule: solid 1px var(--border);
     }
 
     .columns(@counter + 1);

assets/less/global.less → assets/less/_global.less

-@import (reference) 'mixins';
-@import (reference) 'settings';
+@import (reference) '_mixins';
+@import (reference) '_variables';
 
 html {
-  background: @page-background-color;
+  background: var(--bg-page);
   box-sizing: border-box;
-  color: @page-color;
-  font-family: @page-font-family;
-  font-size: @page-font-size;
+  color: var(--text);
+  font-family: var(--font-family);
+  font-size: var(--font-size);
   height: 100%;
-  line-height: @page-line-height;
+  line-height: var(--line-height);
 }
 
 *, *::before, *::after {
@@ -23,7 +23,7 @@ body {
 }
 
 a {
-  color: @page-link-color;
+  color: var(--link);
   text-decoration: none;
 }
 
@@ -41,19 +41,17 @@ h1, h2, h3, h4, h5, h6, p, dl, ol, ul, blockquote {
 
 // opinionated blockquote styling - should be safe?
 blockquote {
-  background-color: @blockquote-background-color;
-  border-left: 1px inset @blockquote-border-color;
-  margin: 0 0 0 0.5rem;
+  background-color: var(--bg-grey);
+  border-left: 1px solid var(--border);
+  margin: 0;
   padding: 0 0.5rem;
 
   & > * {
-    @day-color: lighten(@page-color, 25%);
-    @night-color: darken(@page-color, 25%);
-    color: contrast(@page-color, @day-color, @night-color);
+    color: var(--text-muted);
   }
 
   a {
-    color: @page-color;
+    color: var(--text);
   }
 }
 
@@ -73,6 +71,11 @@ textarea {
   font: inherit;
 }
 
+pre, code, kbd {
+  font-family: var(--mono-font-family, monospace);
+  font-size: var(--mono-font-size, 1em);
+}
+
 pre {
   overflow-x: auto;
 }

assets/less/messages.less → assets/less/_messages.less

-@import (reference) 'mixins';
-@import (reference) 'settings';
+@import (reference) '_mixins';
 
 .message-thread-inner,
 .message-reply {
-  border: solid 1px @message-border-color;
+  border: solid 1px var(--border);
   margin-bottom: 1rem;
   padding: 1rem 1rem 0;
 }

assets/less/mixins.less → assets/less/_mixins.less

-@import (reference) 'settings';
+@import (reference) '_variables';
 
 /*
  * Make certain things boring and grey.
@@ -6,7 +6,7 @@
  * This should be applied to paragraphs or navs only, never entire containers.
  */
 .meta() {
-  color: @meta-color;
+  color: var(--text-muted);
   font-size: 0.85rem;
   padding: 0.075rem 0;
 

assets/less/navigation.less → assets/less/_navigation.less

-@import (reference) 'components/button';
-@import (reference) 'mixins';
-@import (reference) 'settings';
+@import (reference) '_components/button';
+@import (reference) '_mixins';
 
 .dropdown-container {
   position: relative;
@@ -31,10 +30,10 @@
 }
 
 .dropdown-menu {
-  background: @dropdown-menu-background-color;
-  border: solid 1px @dropdown-menu-border-color;
+  background: var(--bg-page); // todo
+  border: solid 1px var(--border);
   border-top: none;
-  box-shadow: 0 0 1px @dropdown-menu-border-color;
+  box-shadow: 0 0 1px var(--border);
   display: none;
   margin-top: -1px;
   min-width: 12rem;
@@ -55,16 +54,13 @@
   }
 
   & > li > a {
+    color: var(--text);
     display: block;
     padding: 0.5rem 1rem;
 
-    &:not(:hover) > .icon {
-      color: @page-color;
-    }
-
     &:hover {
-      background: @page-link-color;
-      color: @page-background-color;
+      background: var(--accent);
+      color: var(--accent-fg);
       text-decoration: none;
     }
   }

assets/less/submissions.less → assets/less/_submissions.less

-@import (reference) 'mixins';
-@import (reference) 'settings';
+@import (reference) '_mixins';
+@import (reference) '_variables';
 
 .submission {
   margin-bottom: 1rem;
@@ -33,12 +33,16 @@
   }
 }
 
-.submission-link:visited {
-  color: @submission-link-color-visited;
-}
+.submission-link {
+  color: var(--submission-link);
+
+  &:visited {
+    color: var(--submission-link-visited);
+  }
 
-.submission-sticky .submission-link {
-  color: @submission-sticky-link-color;
+  .submission-sticky & {
+    color: var(--submission-link-sticky);
+  }
 }
 
 .submission-info {

assets/less/_variables.less

+@desktop-min-width: 768px;
+@nav-font-size: 16px;

assets/less/votes.less → assets/less/_votes.less

-@import (reference) 'mixins';
-@import (reference) 'settings';
+@import (reference) '_mixins';
 
 .vote {
   padding: 0.5rem 1.5rem;
@@ -16,16 +15,16 @@
 
 .vote-button {
   .unbuttonize();
-  color: @vote-arrow-color;
+  color: var(--fg-grey);
   line-height: 1.15;
   white-space: nowrap;
   cursor: pointer;
 }
 
 .vote-user-upvoted .vote-up {
-  color: @vote-arrow-color-upvoted;
+  color: var(--fg-orange)
 }
 
 .vote-user-downvoted .vote-down {
-  color: @vote-arrow-color-downvoted;
+  color: var(--fg-blue);
 }

assets/less/core.less

+@import (less) '~normalize.css';
+
+/*! https://postmill.xyz/ */
+
+// global element styles (must be first)
+@import '_global';
+
+// components
+@import '_components/alert';
+@import '_components/button';
+@import '_components/clear-notification-button';
+@import '_components/comment';
+@import '_components/diff-table';
+@import '_components/dimmed';
+@import '_components/form';
+@import '_components/icon';
+@import '_components/markdown-input';
+@import '_components/site-nav';
+@import '_components/sidebar';
+@import '_components/source-code';
+@import '_components/subscribe-button';
+@import '_components/table';
+@import '_components/tabs';
+@import '_components/user-bio';
+
+// legacy, non-BEM
+@import '_comments';
+@import '_common';
+@import '_forums';
+@import '_messages';
+@import '_navigation';
+@import '_submissions';
+@import '_votes';

assets/less/main-night.less

-@import 'main';
-@import 'settings-night';
-
-.select2-container {
-  // Fix for select2 being bad on dark pages.
-  // It doesn't matter that the select box is bright, since regular select boxes
-  // wouldn't have their colours overridden anyway.
-  color: #000;
-}

assets/less/main.less

-@import (less) '~normalize.css';
-
-/*! https://postmill.xyz/ */
-
-// global element styles (must be first)
-@import 'global';
-
-// components
-@import 'components/alert';
-@import 'components/button';
-@import 'components/clear-notification-button';
-@import 'components/comment';