From 0f4890dda5b901f4af1fef08bcb178e5087fed6e Mon Sep 17 00:00:00 2001
From: Deimos <deimos@tildes.net>
Date: Thu, 24 Sep 2020 16:43:31 -0600
Subject: [PATCH] CSS: add "-color" suffix to all custom properties

I think it's best to be specific that all of these are colors, otherwise
there could be some confusing usages (and potential collisions) with
ones like --border.

Sorry @Bauke (and probably some others), I know this will most likely
mess with any changes you've already made to override these properties,
but I wanted to do it eventually and it's only going to get worse the
longer I wait.
---
 tildes/scss/themes/_theme_base.scss   | 346 +++++++++++++-------------
 tildes/scss/themes/_theme_mixins.scss | 310 +++++++++++------------
 2 files changed, 328 insertions(+), 328 deletions(-)

diff --git a/tildes/scss/themes/_theme_base.scss b/tildes/scss/themes/_theme_base.scss
index f7d76a6..0a1f6f2 100644
--- a/tildes/scss/themes/_theme_base.scss
+++ b/tildes/scss/themes/_theme_base.scss
@@ -12,26 +12,26 @@
 // will fall back to the default value from `$default-theme` instead.
 
 body {
-  color: var(--foreground-primary);
-  background-color: var(--background-secondary);
+  color: var(--foreground-primary-color);
+  background-color: var(--background-secondary-color);
 
   * {
-    border-color: var(--border);
+    border-color: var(--border-color);
   }
 
   a {
-    color: var(--link);
+    color: var(--link-color);
 
     &:hover {
-      color: var(--link-hover);
+      color: var(--link-hover-color);
     }
 
     &:visited {
-      color: var(--link-visited);
+      color: var(--link-visited-color);
     }
 
     code {
-      color: var(--link);
+      color: var(--link-color);
 
       &:hover {
         text-decoration: underline;
@@ -39,293 +39,293 @@ body {
     }
 
     &:visited code {
-      color: var(--link-visited);
+      color: var(--link-visited-color);
     }
   }
 
   a.link-user,
   a.link-group {
     &:visited {
-      color: var(--link);
+      color: var(--link-color);
     }
   }
 
   a.logged-in-user-alert {
-    color: var(--alert);
+    color: var(--alert-color);
 
     &:visited {
-      color: var(--alert);
+      color: var(--alert-color);
     }
   }
 
   @include syntax-highlighting;
 
   blockquote {
-    border-color: var(--foreground-highlight);
-    background-color: var(--background-secondary);
+    border-color: var(--foreground-highlight-color);
+    background-color: var(--background-secondary-color);
 
     code,
     pre {
-      background-color: var(--background-primary);
+      background-color: var(--background-primary-color);
     }
   }
 
   code,
   pre {
-    color: var(--foreground-highlight);
-    background-color: var(--background-secondary);
+    color: var(--foreground-highlight-color);
+    background-color: var(--background-secondary-color);
   }
 
   main {
-    background-color: var(--background-primary);
+    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);
+    background: var(--background-secondary-color);
 
     &::-webkit-meter-bar {
-      background: var(--background-secondary);
+      background: var(--background-secondary-color);
     }
 
     // For some mysterious reason, none of the below rules can be merged
     &::-webkit-meter-optimum-value {
-      background: var(--success);
+      background: var(--success-color);
     }
 
     &:-moz-meter-optimum::-moz-meter-bar {
-      background: var(--success);
+      background: var(--success-color);
     }
 
     &::-webkit-meter-suboptimum-value {
-      background: var(--warning);
+      background: var(--warning-color);
     }
 
     &:-moz-meter-sub-optimum::-moz-meter-bar {
-      background: var(--warning);
+      background: var(--warning-color);
     }
 
     &::-webkit-meter-even-less-good-value {
-      background: var(--error);
+      background: var(--error-color);
     }
 
     &:-moz-meter-sub-sub-optimum::-moz-meter-bar {
-      background: var(--error);
+      background: var(--error-color);
     }
   }
 
   tbody tr:nth-of-type(2n + 1) {
-    background-color: var(--background-secondary);
+    background-color: var(--background-secondary-color);
   }
 
   .table td {
-    border-bottom-color: var(--border);
+    border-bottom-color: var(--border-color);
   }
 
   .table th {
-    border-bottom-color: var(--foreground-highlight);
+    border-bottom-color: var(--foreground-highlight-color);
   }
 
   .form-autocomplete {
     .menu {
-      background-color: var(--background-secondary);
+      background-color: var(--background-secondary-color);
     }
   }
 
   .breadcrumb .breadcrumb-item {
-    color: var(--foreground-secondary);
+    color: var(--foreground-secondary-color);
 
     &:not(:last-child) {
       a {
-        color: var(--foreground-secondary);
+        color: var(--foreground-secondary-color);
       }
     }
 
     &:not(:first-child) {
       &::before {
-        color: var(--foreground-secondary);
+        color: var(--foreground-secondary-color);
       }
     }
 
     &:last-child {
       a {
-        color: var(--link);
+        color: var(--link-color);
       }
     }
   }
 
   .btn {
-    color: var(--button);
+    color: var(--button-color);
     background-color: transparent;
-    border-color: var(--button);
+    border-color: var(--button-color);
 
     &:hover {
-      background-color: var(--button-transparent);
+      background-color: var(--button-transparent-color);
     }
   }
 
   .btn-comment-collapse:hover {
-    border-color: var(--border);
+    border-color: var(--border-color);
   }
 
   .btn-light {
-    color: var(--foreground-secondary);
-    border-color: var(--border);
+    color: var(--foreground-secondary-color);
+    border-color: var(--border-color);
 
     &:hover {
-      color: var(--link);
+      color: var(--link-color);
     }
   }
 
   .btn.btn-link {
-    color: var(--link);
+    color: var(--link-color);
     background-color: transparent;
     border-color: transparent;
 
     &:hover {
-      color: var(--link);
+      color: var(--link-color);
     }
   }
 
   .btn.btn-primary {
-    color: var(--button-by-brightness);
+    color: var(--button-by-brightness-color);
 
-    background-color: var(--button);
-    border-color: var(--button);
+    background-color: var(--button-color);
+    border-color: var(--button-color);
 
     &:hover {
-      background-color: var(--button-darkened-10);
-      border-color: var(--button-darkened-10);
+      background-color: var(--button-darkened-10-color);
+      border-color: var(--button-darkened-10-color);
     }
 
     &:visited {
-      color: var(--button-by-brightness);
+      color: var(--button-by-brightness-color);
     }
   }
 
   .btn-used {
-    color: var(--button-used);
-    border-color: var(--button-used-darkened-3);
+    color: var(--button-used-color);
+    border-color: var(--button-used-darkened-3-color);
 
     &:hover {
-      background-color: var(--button-used-darkened-3);
-      border-color: var(--button-used-darkened-8);
-      color: var(--white);
+      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: var(--foreground-secondary-color);
 
     &:hover {
-      color: var(--foreground-extreme);
+      color: var(--foreground-extreme-color);
     }
   }
 
   .btn-post-action-used {
-    color: var(--button-used);
+    color: var(--button-used-color);
   }
 
   .btn-comment-label-exemplary {
-    @include label-button(var(--comment-label-exemplary));
+    @include label-button(var(--comment-label-exemplary-color));
   }
 
   .btn-comment-label-joke {
-    @include label-button(var(--comment-label-joke));
+    @include label-button(var(--comment-label-joke-color));
   }
 
   .btn-comment-label-noise {
-    @include label-button(var(--comment-label-noise));
+    @include label-button(var(--comment-label-noise-color));
   }
 
   .btn-comment-label-offtopic {
-    @include label-button(var(--comment-label-offtopic));
+    @include label-button(var(--comment-label-offtopic-color));
   }
 
   .btn-comment-label-malice {
-    @include label-button(var(--comment-label-malice));
+    @include label-button(var(--comment-label-malice-color));
   }
 
   .chip {
-    background-color: var(--background-secondary);
-    color: var(--foreground-highlight);
+    background-color: var(--background-secondary-color);
+    color: var(--foreground-highlight-color);
 
     &.active {
-      background-color: var(--button);
-      color: var(--button-by-brightness);
+      background-color: var(--button-color);
+      color: var(--button-by-brightness-color);
 
       .btn {
-        color: var(--button-by-brightness);
+        color: var(--button-by-brightness-color);
       }
     }
 
     &.error {
-      background-color: var(--error);
+      background-color: var(--error-color);
 
-      color: var(--error-by-brightness);
+      color: var(--error-by-brightness-color);
 
       .btn {
-        color: var(--error-by-brightness);
+        color: var(--error-by-brightness-color);
       }
     }
   }
 
   .comment-branch-counter {
-    color: var(--foreground-secondary);
+    color: var(--foreground-secondary-color);
   }
 
   .comment-nav-link,
   .comment-nav-link:visited {
-    color: var(--foreground-secondary);
+    color: var(--foreground-secondary-color);
   }
 
   .comment-removed-warning {
-    color: var(--warning);
+    color: var(--warning-color);
   }
 
   .label-comment-exemplary {
     @include theme-special-label(
-      var(--background-label-exemplary),
-      var(--foreground-label-exemplary),
-      var(--comment-label-exemplary)
+      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),
-      var(--foreground-label-joke),
-      var(--comment-label-joke)
+      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),
-      var(--foreground-label-noise),
-      var(--comment-label-noise)
+      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),
-      var(--foreground-label-offtopic),
-      var(--comment-label-offtopic)
+      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),
-      var(--foreground-label-malice),
-      var(--comment-label-malice)
+      var(--background-label-malice-color),
+      var(--foreground-label-malice-color),
+      var(--comment-label-malice-color)
     );
   }
 
   %collapsed-theme {
     .comment-header {
-      background-color: var(--background-primary);
+      background-color: var(--background-primary-color);
     }
   }
 
@@ -340,37 +340,37 @@ body {
   }
 
   .comment-header {
-    color: var(--foreground-highlight);
-    background-color: var(--background-secondary);
+    color: var(--foreground-highlight-color);
+    background-color: var(--background-secondary-color);
   }
 
   .comment:target > .comment-itself {
-    border-left-color: var(--stripe-target);
+    border-left-color: var(--stripe-target-color);
   }
 
   .divider {
-    border-color: var(--border);
+    border-color: var(--border-color);
   }
 
   .divider[data-content]::after {
-    color: var(--foreground-primary);
-    background-color: var(--background-primary);
+    color: var(--foreground-primary-color);
+    background-color: var(--background-primary-color);
   }
 
   .donation-goal-meter-over-goal {
-    background: var(--comment-label-exemplary);
+    background: var(--comment-label-exemplary-color);
 
     &::-webkit-meter-bar {
-      background: var(--comment-label-exemplary);
+      background: var(--comment-label-exemplary-color);
     }
   }
 
   .dropdown .menu .btn-post-action:hover {
-    background-color: var(--background-secondary);
+    background-color: var(--background-secondary-color);
   }
 
   .empty-subtitle {
-    color: var(--foreground-secondary);
+    color: var(--foreground-secondary-color);
   }
 
   .form-autocomplete .form-autocomplete-input .form-input {
@@ -379,45 +379,45 @@ body {
 
   .form-input,
   .form-input[readonly] {
-    color: var(--foreground-primary);
-    background-color: var(--background-input);
-    border-color: var(--border);
+    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);
+    border-color: var(--error-color);
 
     &:focus {
-      box-shadow: 0 0 0 1px var(--error);
+      box-shadow: 0 0 0 1px var(--error-color);
     }
 
     + .form-input-hint {
-      color: var(--error);
+      color: var(--error-color);
     }
   }
 
   .form-markdown-preview {
-    border-color: var(--border);
+    border-color: var(--border-color);
   }
 
   .form-select {
-    border-color: var(--border);
+    border-color: var(--border-color);
   }
 
   .form-select:not([multiple]):not([size]) {
-    background-color: var(--background-input);
+    background-color: var(--background-input-color);
   }
 
   .group-list-item-not-subscribed {
     a.link-group {
-      color: var(--warning);
+      color: var(--warning-color);
     }
   }
 
   .input-group-addon {
-    background-color: var(--background-secondary);
-    color: var(--foreground-highlight);
+    background-color: var(--background-secondary-color);
+    color: var(--foreground-highlight-color);
   }
 
   .label-topic-tag {
@@ -426,133 +426,133 @@ body {
     a,
     a:hover,
     a:visited {
-      color: var(--foreground-primary);
+      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),
-      var(--topic-tag-nsfw-foreground),
-      var(--topic-tag-nsfw-border)
+      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),
-      var(--topic-tag-spoiler-foreground),
-      var(--topic-tag-spoiler-border)
+      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: var(--link-color);
   }
 
   .logged-in-user-username,
   .logged-in-user-username:visited {
-    color: var(--foreground-primary);
+    color: var(--foreground-primary-color);
   }
 
   .menu {
-    background-color: var(--background-primary);
-    border-color: var(--border);
+    background-color: var(--background-primary-color);
+    border-color: var(--border-color);
   }
 
   .message {
     header {
-      color: var(--foreground-highlight);
-      background-color: var(--background-secondary);
+      color: var(--foreground-highlight-color);
+      background-color: var(--background-secondary-color);
     }
   }
 
   .nav .nav-item {
     a {
-      color: var(--link);
+      color: var(--link-color);
 
       &:hover {
-        color: var(--link-hover);
+        color: var(--link-hover-color);
       }
     }
 
     &.active a {
-      color: var(--link);
+      color: var(--link-color);
     }
   }
 
   .settings-list {
     a:visited {
-      color: var(--link);
+      color: var(--link-color);
     }
   }
 
   .sidebar-controls {
-    background-color: var(--background-secondary);
+    background-color: var(--background-secondary-color);
   }
 
   #sidebar {
-    background-color: var(--background-primary);
-    border-left-color: var(--border);
+    background-color: var(--background-primary-color);
+    border-left-color: var(--border-color);
   }
 
   #site-footer a:visited {
-    color: var(--link);
+    color: var(--link-color);
   }
 
   .site-header-context {
     a,
     a:visited {
-      color: var(--foreground-primary);
+      color: var(--foreground-primary-color);
     }
 
     .toast a,
     .toast a:visited {
-      color: var(--link);
+      color: var(--link-color);
     }
   }
 
   .site-header-logo,
   .site-header-logo:visited {
-    color: var(--foreground-highlight);
+    color: var(--foreground-highlight-color);
   }
 
   .site-header-sidebar-button.badge[data-badge]::after {
-    background-color: var(--alert);
+    background-color: var(--alert-color);
   }
 
   .tab {
-    border-color: var(--border);
+    border-color: var(--border-color);
   }
 
   .tab .tab-item {
     a {
-      color: var(--foreground-primary);
+      color: var(--foreground-primary-color);
     }
 
     &.active a,
     &.active button {
-      color: var(--link);
-      border-bottom-color: var(--link);
+      color: var(--link-color);
+      border-bottom-color: var(--link-color);
     }
   }
 
   .text-error {
-    color: var(--error);
+    color: var(--error-color);
   }
 
   .text-link {
-    color: var(--link);
+    color: var(--link-color);
   }
 
   .text-secondary {
-    color: var(--foreground-secondary);
+    color: var(--foreground-secondary-color);
   }
 
   .text-warning {
-    color: var(--warning);
+    color: var(--warning-color);
   }
 
   .text-wiki {
@@ -563,76 +563,76 @@ body {
     h5,
     h6 {
       a {
-        color: var(--foreground-highlight);
+        color: var(--foreground-highlight-color);
       }
     }
   }
 
   .toast {
-    color: var(--foreground-highlight);
-    background-color: var(--background-secondary);
+    color: var(--foreground-highlight-color);
+    background-color: var(--background-secondary-color);
 
     a {
-      color: var(--link);
+      color: var(--link-color);
     }
   }
 
   .toast.toast-warning {
-    border-color: var(--warning);
-    color: var(--warning-foreground);
-    background-color: var(--warning-background);
+    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: var(--link-color);
     }
 
     .btn-post-action-used {
-      color: var(--link-visited);
+      color: var(--link-visited-color);
     }
   }
 
   .topic-listing {
     > li:nth-of-type(2n) {
-      color: var(--foreground-mixed);
-      background-color: var(--background-mixed);
+      color: var(--foreground-mixed-color);
+      background-color: var(--background-mixed-color);
     }
   }
 
   .topic-full-byline {
-    color: var(--foreground-secondary);
+    color: var(--foreground-secondary-color);
   }
 
   .topic-full-tags {
-    color: var(--foreground-secondary);
+    color: var(--foreground-secondary-color);
 
     a {
-      color: var(--foreground-secondary);
+      color: var(--foreground-secondary-color);
     }
   }
 
   .topic-info-comments-new {
-    color: var(--alert);
+    color: var(--alert-color);
   }
 
   .topic-info-source-scheduled {
-    color: var(--foreground-secondary);
+    color: var(--foreground-secondary-color);
   }
 
   .topic-log-entry-time {
-    color: var(--foreground-secondary);
+    color: var(--foreground-secondary-color);
   }
 
   .topic-text-excerpt {
-    color: var(--foreground-secondary);
+    color: var(--foreground-secondary-color);
 
     summary::after {
-      color: var(--foreground-secondary);
+      color: var(--foreground-secondary-color);
     }
 
     &[open] {
-      color: var(--foreground-primary);
+      color: var(--foreground-primary-color);
     }
   }
 
@@ -640,48 +640,48 @@ body {
     border-color: transparent;
 
     &:hover {
-      background-color: var(--button-darkened-3);
-      border-color: var(--button-darkened-8);
+      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: var(--foreground-secondary-color);
   }
 
   .is-comment-mine > .comment-itself {
-    border-left-color: var(--stripe-mine);
+    border-left-color: var(--stripe-mine-color);
   }
 
   .is-comment-exemplary {
     > .comment-itself {
-      border-left-color: var(--comment-label-exemplary);
+      border-left-color: var(--comment-label-exemplary-color);
     }
   }
 
   .is-comment-new {
     > .comment-itself {
-      border-left-color: var(--alert);
+      border-left-color: var(--alert-color);
     }
 
     .comment-text {
-      color: var(--foreground-highlight);
+      color: var(--foreground-highlight-color);
     }
   }
 
   .is-message-mine,
   .is-topic-mine {
-    border-left-color: var(--stripe-mine);
+    border-left-color: var(--stripe-mine-color);
   }
 
   .is-topic-official {
-    border-left-color: var(--alert);
+    border-left-color: var(--alert-color);
 
     h1 {
       a,
       a:visited {
-        color: var(--alert);
+        color: var(--alert-color);
       }
     }
   }
diff --git a/tildes/scss/themes/_theme_mixins.scss b/tildes/scss/themes/_theme_mixins.scss
index 3957c22..517ed6f 100644
--- a/tildes/scss/themes/_theme_mixins.scss
+++ b/tildes/scss/themes/_theme_mixins.scss
@@ -11,7 +11,7 @@
 
   &.btn-used:hover {
     background-color: $color;
-    color: var(--white);
+    color: var(--white-color);
   }
 }
 
@@ -199,355 +199,355 @@
 
   // When creating CSS custom properties and using any of Sass' capabilities
   // you'll have to interpolate it with the Sass syntax `#{...}` as seen below.
-  --alert: #{map-get($theme, "alert")};
+  --alert-color: #{map-get($theme, "alert")};
 
-  --background-input: #{map-get($theme, "background-input")};
-  --background-mixed:
+  --background-input-color: #{map-get($theme, "background-input")};
+  --background-mixed-color:
     #{mix(
       map-get($theme, "background-primary"),
       map-get($theme, "background-secondary")
     )};
-  --background-primary: #{map-get($theme, "background-primary")};
-  --background-secondary: #{map-get($theme, "background-secondary")};
+  --background-primary-color: #{map-get($theme, "background-primary")};
+  --background-secondary-color: #{map-get($theme, "background-secondary")};
 
-  --border: #{map-get($theme, "border")};
+  --border-color: #{map-get($theme, "border")};
 
-  --button: #{map-get($theme, "button")};
-  --button-by-brightness:
+  --button-color: #{map-get($theme, "button")};
+  --button-by-brightness-color:
     #{choose-by-brightness(
       map-get($theme, "button"),
       map-get($theme, "black"),
       map-get($theme, "white")
     )};
-  --button-transparent: #{rgba(map-get($theme, "button"), 0.2)};
+  --button-transparent-color: #{rgba(map-get($theme, "button"), 0.2)};
 
-  --button-darkened-3: #{darken(map-get($theme, "button"), 3%)};
-  --button-darkened-8: #{darken(map-get($theme, "button"), 8%)};
-  --button-darkened-10: #{darken(map-get($theme, "button"), 10%)};
+  --button-darkened-3-color: #{darken(map-get($theme, "button"), 3%)};
+  --button-darkened-8-color: #{darken(map-get($theme, "button"), 8%)};
+  --button-darkened-10-color: #{darken(map-get($theme, "button"), 10%)};
 
-  --button-used: #{map-get($theme, "button-used")};
-  --button-used-darkened-3: #{darken(map-get($theme, "button-used"), 3%)};
-  --button-used-darkened-8: #{darken(map-get($theme, "button-used"), 8%)};
+  --button-used-color: #{map-get($theme, "button-used")};
+  --button-used-darkened-3-color: #{darken(map-get($theme, "button-used"), 3%)};
+  --button-used-darkened-8-color: #{darken(map-get($theme, "button-used"), 8%)};
 
-  --error: #{map-get($theme, "error")};
-  --error-by-brightness:
+  --error-color: #{map-get($theme, "error")};
+  --error-by-brightness-color:
     #{choose-by-brightness(
       map-get($theme, "error"),
       map-get($theme, "black"),
       map-get($theme, "white")
     )};
 
-  --foreground-extreme:
+  --foreground-extreme-color:
     #{choose-by-brightness(
       map-get($theme, "background-primary"),
       map-get($theme, "black"),
       map-get($theme, "white")
     )};
-  --foreground-highlight: #{map-get($theme, "foreground-highlight")};
-  --foreground-mixed:
+  --foreground-highlight-color: #{map-get($theme, "foreground-highlight")};
+  --foreground-mixed-color:
     #{mix(
       map-get($theme, "foreground-primary"),
       map-get($theme, "foreground-highlight")
     )};
-  --foreground-primary: #{map-get($theme, "foreground-primary")};
-  --foreground-secondary: #{map-get($theme, "foreground-secondary")};
+  --foreground-primary-color: #{map-get($theme, "foreground-primary")};
+  --foreground-secondary-color: #{map-get($theme, "foreground-secondary")};
 
-  --link: #{map-get($theme, "link")};
-  --link-hover: #{darken(map-get($theme, "link"), 5%)};
-  --link-visited: #{map-get($theme, "link-visited")};
+  --link-color: #{map-get($theme, "link")};
+  --link-hover-color: #{darken(map-get($theme, "link"), 5%)};
+  --link-visited-color: #{map-get($theme, "link-visited")};
 
-  --stripe-mine: #{map-get($theme, "stripe-mine")};
-  --stripe-target: #{map-get($theme, "stripe-target")};
+  --stripe-mine-color: #{map-get($theme, "stripe-mine")};
+  --stripe-target-color: #{map-get($theme, "stripe-target")};
 
-  --success: #{map-get($theme, "success")};
+  --success-color: #{map-get($theme, "success")};
 
-  --syntax-builtin: #{map-get($theme, "syntax-builtin")};
-  --syntax-comment: #{map-get($theme, "syntax-comment")};
-  --syntax-constant: #{map-get($theme, "syntax-constant")};
-  --syntax-keyword: #{map-get($theme, "syntax-keyword")};
-  --syntax-literal: #{map-get($theme, "syntax-literal")};
-  --syntax-string: #{map-get($theme, "syntax-string")};
+  --syntax-builtin-color: #{map-get($theme, "syntax-builtin")};
+  --syntax-comment-color: #{map-get($theme, "syntax-comment")};
+  --syntax-constant-color: #{map-get($theme, "syntax-constant")};
+  --syntax-keyword-color: #{map-get($theme, "syntax-keyword")};
+  --syntax-literal-color: #{map-get($theme, "syntax-literal")};
+  --syntax-string-color: #{map-get($theme, "syntax-string")};
 
   // Colors for the special topic tags
   @if $is-light {
-    --topic-tag-nsfw: #{map-get($theme, "topic-tag-nsfw")};
-    --topic-tag-nsfw-foreground: #{map-get($theme, "white")};
-    --topic-tag-nsfw-border: transparent;
+    --topic-tag-nsfw-color: #{map-get($theme, "topic-tag-nsfw")};
+    --topic-tag-nsfw-foreground-color: #{map-get($theme, "white")};
+    --topic-tag-nsfw-border-color: transparent;
 
-    --topic-tag-spoiler: #{map-get($theme, "topic-tag-spoiler")};
-    --topic-tag-spoiler-foreground: #{map-get($theme, "white")};
-    --topic-tag-spoiler-border: transparent;
+    --topic-tag-spoiler-color: #{map-get($theme, "topic-tag-spoiler")};
+    --topic-tag-spoiler-foreground-color: #{map-get($theme, "white")};
+    --topic-tag-spoiler-border-color: transparent;
   } @else {
-    --topic-tag-nsfw: transparent;
-    --topic-tag-nsfw-foreground: #{map-get($theme, "topic-tag-nsfw")};
-    --topic-tag-nsfw-border: #{map-get($theme, "topic-tag-nsfw")};
+    --topic-tag-nsfw-color: transparent;
+    --topic-tag-nsfw-foreground-color: #{map-get($theme, "topic-tag-nsfw")};
+    --topic-tag-nsfw-border-color: #{map-get($theme, "topic-tag-nsfw")};
 
-    --topic-tag-spoiler: transparent;
-    --topic-tag-spoiler-foreground: #{map-get($theme, "topic-tag-spoiler")};
-    --topic-tag-spoiler-border: #{map-get($theme, "topic-tag-spoiler")};
+    --topic-tag-spoiler-color: transparent;
+    --topic-tag-spoiler-foreground-color: #{map-get($theme, "topic-tag-spoiler")};
+    --topic-tag-spoiler-border-color: #{map-get($theme, "topic-tag-spoiler")};
   }
 
-  --warning: #{map-get($theme, "warning")};
+  --warning-color: #{map-get($theme, "warning")};
 
   // Colors for warning toasts
   @if $is-light {
-    --warning-background: #{rgba(map-get($theme, "warning"), 0.9)};
-    --warning-foreground: #{map-get($theme, "black")};
+    --warning-background-color: #{rgba(map-get($theme, "warning"), 0.9)};
+    --warning-foreground-color: #{map-get($theme, "black")};
   } @else {
-    --warning-background: transparent;
-    --warning-foreground: #{map-get($theme, "warning")};
+    --warning-background-color: transparent;
+    --warning-foreground-color: #{map-get($theme, "warning")};
   }
 
   // Colors that were hardcoded in previously.
-  --white: #{map-get($theme, "white")};
+  --white-color: #{map-get($theme, "white")};
 
   // Variables for the comment labels.
   @if $is-light {
-    --background-label-exemplary: #{map-get($theme, "comment-label-exemplary")};
-    --background-label-joke: #{map-get($theme, "comment-label-joke")};
-    --background-label-noise: #{map-get($theme, "comment-label-noise")};
-    --background-label-offtopic: #{map-get($theme, "comment-label-offtopic")};
-    --background-label-malice: #{map-get($theme, "comment-label-malice")};
-
-    --comment-label-exemplary: #{map-get($theme, "comment-label-exemplary")};
-    --comment-label-joke: #{map-get($theme, "comment-label-joke")};
-    --comment-label-noise: #{map-get($theme, "comment-label-noise")};
-    --comment-label-offtopic: #{map-get($theme, "comment-label-offtopic")};
-    --comment-label-malice: #{map-get($theme, "comment-label-malice")};
-
-    --foreground-label-exemplary: #{map-get($theme, "white")};
-    --foreground-label-joke: #{map-get($theme, "white")};
-    --foreground-label-noise: #{map-get($theme, "white")};
-    --foreground-label-offtopic: #{map-get($theme, "white")};
-    --foreground-label-malice: #{map-get($theme, "white")};
+    --background-label-exemplary-color: #{map-get($theme, "comment-label-exemplary")};
+    --background-label-joke-color: #{map-get($theme, "comment-label-joke")};
+    --background-label-noise-color: #{map-get($theme, "comment-label-noise")};
+    --background-label-offtopic-color: #{map-get($theme, "comment-label-offtopic")};
+    --background-label-malice-color: #{map-get($theme, "comment-label-malice")};
+
+    --comment-label-exemplary-color: #{map-get($theme, "comment-label-exemplary")};
+    --comment-label-joke-color: #{map-get($theme, "comment-label-joke")};
+    --comment-label-noise-color: #{map-get($theme, "comment-label-noise")};
+    --comment-label-offtopic-color: #{map-get($theme, "comment-label-offtopic")};
+    --comment-label-malice-color: #{map-get($theme, "comment-label-malice")};
+
+    --foreground-label-exemplary-color: #{map-get($theme, "white")};
+    --foreground-label-joke-color: #{map-get($theme, "white")};
+    --foreground-label-noise-color: #{map-get($theme, "white")};
+    --foreground-label-offtopic-color: #{map-get($theme, "white")};
+    --foreground-label-malice-color: #{map-get($theme, "white")};
   } @else {
-    --background-label-exemplary: transparent;
-    --background-label-joke: transparent;
-    --background-label-noise: transparent;
-    --background-label-offtopic: transparent;
-    --background-label-malice: transparent;
-
-    --comment-label-exemplary: #{map-get($theme, "comment-label-exemplary")};
-    --comment-label-joke: #{map-get($theme, "comment-label-joke")};
-    --comment-label-noise: #{map-get($theme, "comment-label-noise")};
-    --comment-label-offtopic: #{map-get($theme, "comment-label-offtopic")};
-    --comment-label-malice: #{map-get($theme, "comment-label-malice")};
-
-    --foreground-label-exemplary: #{map-get($theme, "comment-label-exemplary")};
-    --foreground-label-joke: #{map-get($theme, "comment-label-joke")};
-    --foreground-label-noise: #{map-get($theme, "comment-label-noise")};
-    --foreground-label-offtopic: #{map-get($theme, "comment-label-offtopic")};
-    --foreground-label-malice: #{map-get($theme, "comment-label-malice")};
+    --background-label-exemplary-color: transparent;
+    --background-label-joke-color: transparent;
+    --background-label-noise-color: transparent;
+    --background-label-offtopic-color: transparent;
+    --background-label-malice-color: transparent;
+
+    --comment-label-exemplary-color: #{map-get($theme, "comment-label-exemplary")};
+    --comment-label-joke-color: #{map-get($theme, "comment-label-joke")};
+    --comment-label-noise-color: #{map-get($theme, "comment-label-noise")};
+    --comment-label-offtopic-color: #{map-get($theme, "comment-label-offtopic")};
+    --comment-label-malice-color: #{map-get($theme, "comment-label-malice")};
+
+    --foreground-label-exemplary-color: #{map-get($theme, "comment-label-exemplary")};
+    --foreground-label-joke-color: #{map-get($theme, "comment-label-joke")};
+    --foreground-label-noise-color: #{map-get($theme, "comment-label-noise")};
+    --foreground-label-offtopic-color: #{map-get($theme, "comment-label-offtopic")};
+    --foreground-label-malice-color: #{map-get($theme, "comment-label-malice")};
   }
 }
 
 @mixin syntax-highlighting {
   .highlight {
     .syntax-c {
-      color: var(--syntax-comment);
+      color: var(--syntax-comment-color);
     } // Comment
     .syntax-err {
-      color: var(--foreground);
+      color: var(--foreground-color);
     } // Error
     .syntax-g {
-      color: var(--foreground);
+      color: var(--foreground-color);
     } // Generic
     .syntax-k {
-      color: var(--syntax-keyword);
+      color: var(--syntax-keyword-color);
     } // Keyword
     .syntax-l {
-      color: var(--foreground);
+      color: var(--foreground-color);
     } // Literal
     .syntax-n {
-      color: var(--foreground);
+      color: var(--foreground-color);
     } // Name
     .syntax-o {
-      color: var(--syntax-comment);
+      color: var(--syntax-comment-color);
     } // Operator
     .syntax-x {
-      color: var(--syntax-constant);
+      color: var(--syntax-constant-color);
     } // Other
     .syntax-p {
-      color: var(--foreground);
+      color: var(--foreground-color);
     } // Punctuation
     .syntax-cm {
-      color: var(--syntax-comment);
+      color: var(--syntax-comment-color);
     } // Comment.Multiline
     .syntax-cp {
-      color: var(--syntax-comment);
+      color: var(--syntax-comment-color);
     } // Comment.Preproc
     .syntax-c1 {
-      color: var(--syntax-comment);
+      color: var(--syntax-comment-color);
     } // Comment.Single
     .syntax-cs {
-      color: var(--syntax-comment);
+      color: var(--syntax-comment-color);
     } // Comment.Special
     .syntax-gd {
-      color: var(--syntax-comment);
+      color: var(--syntax-comment-color);
     } // Generic.Deleted
     .syntax-ge {
-      color: var(--foreground);
+      color: var(--foreground-color);
       font-style: italic;
     } // Generic.Emph
     .syntax-gr {
-      color: var(--syntax-constant);
+      color: var(--syntax-constant-color);
     } // Generic.Error
     .syntax-gh {
-      color: var(--syntax-constant);
+      color: var(--syntax-constant-color);
     } // Generic.Heading
     .syntax-gi {
-      color: var(--syntax-comment);
+      color: var(--syntax-comment-color);
     } // Generic.Inserted
     .syntax-go {
-      color: var(--foreground);
+      color: var(--foreground-color);
     } // Generic.Output
     .syntax-gp {
-      color: var(--foreground);
+      color: var(--foreground-color);
     } // Generic.Prompt
     .syntax-gs {
-      color: var(--foreground);
+      color: var(--foreground-color);
       font-weight: bold;
     } // Generic.Strong
     .syntax-gu {
-      color: var(--syntax-constant);
+      color: var(--syntax-constant-color);
     } // Generic.Subheading
     .syntax-gt {
-      color: var(--foreground);
+      color: var(--foreground-color);
     } // Generic.Traceback
     .syntax-kc {
-      color: var(--syntax-constant);
+      color: var(--syntax-constant-color);
     } // Keyword.Constant
     .syntax-kd {
-      color: var(--syntax-keyword);
+      color: var(--syntax-keyword-color);
     } // Keyword.Declaration
     .syntax-kn {
-      color: var(--syntax-comment);
+      color: var(--syntax-comment-color);
     } // Keyword.Namespace
     .syntax-kp {
-      color: var(--syntax-comment);
+      color: var(--syntax-comment-color);
     } // Keyword.Pseudo
     .syntax-kr {
-      color: var(--syntax-keyword);
+      color: var(--syntax-keyword-color);
     } // Keyword.Reserved
     .syntax-kt {
-      color: var(--syntax-keyword);
+      color: var(--syntax-keyword-color);
     } // Keyword.Type
     .syntax-ld {
-      color: var(--foreground);
+      color: var(--foreground-color);
     } // Literal.Date
     .syntax-m {
-      color: var(--syntax-comment);
+      color: var(--syntax-comment-color);
     } // Literal.Number
     .syntax-s {
-      color: var(--syntax-comment);
+      color: var(--syntax-comment-color);
     } // Literal.String
     .syntax-na {
-      color: var(--foreground);
+      color: var(--foreground-color);
     } // Name.Attribute
     .syntax-nb {
-      color: var(--syntax-builtin);
+      color: var(--syntax-builtin-color);
     } // Name.Builtin
     .syntax-nc {
-      color: var(--syntax-keyword);
+      color: var(--syntax-keyword-color);
     } // Name.Class
     .syntax-no {
-      color: var(--syntax-constant);
+      color: var(--syntax-constant-color);
     } // Name.Constant
     .syntax-nd {
-      color: var(--syntax-keyword);
+      color: var(--syntax-keyword-color);
     } // Name.Decorator
     .syntax-ni {
-      color: var(--syntax-builtin);
+      color: var(--syntax-builtin-color);
     } // Name.Entity
     .syntax-ne {
-      color: var(--syntax-builtin);
+      color: var(--syntax-builtin-color);
     } // Name.Exception
     .syntax-nf {
-      color: var(--syntax-builtin);
+      color: var(--syntax-builtin-color);
     } // Name.Function
     .syntax-nl {
-      color: var(--foreground);
+      color: var(--foreground-color);
     } // Name.Label
     .syntax-nn {
-      color: var(--foreground);
+      color: var(--foreground-color);
     } // Name.Namespace
     .syntax-nx {
-      color: var(--foreground);
+      color: var(--foreground-color);
     } // Name.Other
     .syntax-py {
-      color: var(--foreground);
+      color: var(--foreground-color);
     } // Name.Property
     .syntax-nt {
-      color: var(--syntax-keyword);
+      color: var(--syntax-keyword-color);
     } // Name.Tag
     .syntax-nv {
-      color: var(--syntax-keyword);
+      color: var(--syntax-keyword-color);
     } // Name.Variable
     .syntax-ow {
-      color: var(--syntax-comment);
+      color: var(--syntax-comment-color);
     } // Operator.Word
     .syntax-w {
-      color: var(--foreground);
+      color: var(--foreground-color);
     } // Text.Whitespace
     .syntax-mf {
-      color: var(--syntax-literal);
+      color: var(--syntax-literal-color);
     } // Literal.Number.Float
     .syntax-mh {
-      color: var(--syntax-literal);
+      color: var(--syntax-literal-color);
     } // Literal.Number.Hex
     .syntax-mi {
-      color: var(--syntax-literal);
+      color: var(--syntax-literal-color);
     } // Literal.Number.Integer
     .syntax-mo {
-      color: var(--syntax-literal);
+      color: var(--syntax-literal-color);
     } // Literal.Number.Oct
     .syntax-sb {
-      color: var(--syntax-string);
+      color: var(--syntax-string-color);
     } // Literal.String.Backtick
     .syntax-sc {
-      color: var(--syntax-string);
+      color: var(--syntax-string-color);
     } // Literal.String.Char
     .syntax-sd {
-      color: var(--syntax-comment);
+      color: var(--syntax-comment-color);
     } // Literal.String.Doc
     .syntax-s2 {
-      color: var(--syntax-string);
+      color: var(--syntax-string-color);
     } // Literal.String.Double
     .syntax-se {
-      color: var(--syntax-constant);
+      color: var(--syntax-constant-color);
     } // Literal.String.Escape
     .syntax-sh {
-      color: var(--syntax-comment);
+      color: var(--syntax-comment-color);
     } // Literal.String.Heredoc
     .syntax-si {
-      color: var(--syntax-string);
+      color: var(--syntax-string-color);
     } // Literal.String.Interpol
     .syntax-sx {
-      color: var(--syntax-string);
+      color: var(--syntax-string-color);
     } // Literal.String.Other
     .syntax-sr {
-      color: var(--syntax-constant);
+      color: var(--syntax-constant-color);
     } // Literal.String.Regex
     .syntax-s1 {
-      color: var(--syntax-string);
+      color: var(--syntax-string-color);
     } // Literal.String.Single
     .syntax-ss {
-      color: var(--syntax-string);
+      color: var(--syntax-string-color);
     } // Literal.String.Symbol
     .syntax-bp {
-      color: var(--syntax-keyword);
+      color: var(--syntax-keyword-color);
     } // Name.Builtin.Pseudo
     .syntax-vc {
-      color: var(--syntax-keyword);
+      color: var(--syntax-keyword-color);
     } // Name.Variable.Class
     .syntax-vg {
-      color: var(--syntax-keyword);
+      color: var(--syntax-keyword-color);
     } // Name.Variable.Global
     .syntax-vi {
-      color: var(--syntax-keyword);
+      color: var(--syntax-keyword-color);
     } // Name.Variable.Instance
     .syntax-il {
-      color: var(--syntax-comment);
+      color: var(--syntax-comment-color);
     } // Literal.Number.Integer.Long
   }
 }