From 7bdabdf2b4b3f6a7116a080919690e3ec0ea42b0 Mon Sep 17 00:00:00 2001
From: Cinder <cinder@e621.net>
Date: Thu, 25 Jul 2024 14:21:32 -0700
Subject: [PATCH] [CSS] Clean up colors and implement colorblind palettes
 (#682)

---
 app/helpers/tags_helper.rb                    |  2 +-
 app/helpers/takedowns_helper.rb               |  8 ++--
 .../src/javascripts/replacement_uploader.vue  |  2 +-
 .../src/javascripts/uploader/file_input.vue   |  4 +-
 .../src/javascripts/uploader/file_preview.vue |  4 +-
 .../src/javascripts/uploader/sources.vue      |  2 +-
 .../src/javascripts/uploader/uploader.vue.erb | 12 +++---
 app/javascript/src/styles/base.scss           |  2 +
 app/javascript/src/styles/base/_base.scss     | 12 ------
 app/javascript/src/styles/base/_colors.scss   | 33 ++++----------
 app/javascript/src/styles/base/_palette.scss  | 43 +++++++++++++++++++
 app/javascript/src/styles/base/_themable.scss |  3 ++
 .../src/styles/common/_helper_classes.scss    | 14 +++---
 .../src/styles/common/_helper_palette.scss    | 17 ++++++++
 app/javascript/src/styles/common/_scores.scss | 18 ++++----
 .../src/styles/common/containers.scss         | 23 +++-------
 app/javascript/src/styles/specific/blips.scss |  2 +-
 .../src/styles/specific/comments.scss         |  2 +-
 app/javascript/src/styles/specific/forum.scss | 12 +++---
 app/javascript/src/styles/specific/posts.scss |  6 +--
 .../src/styles/specific/tickets.scss          |  9 ++++
 .../src/styles/specific/user_feedback.scss    | 20 ++++-----
 .../styles/themes/_palette_deutranomaly.scss  | 31 +++++++++++++
 .../styles/themes/_palette_tritanomaly.scss   | 32 ++++++++++++++
 app/views/layouts/_theme_include.html.erb     |  2 +
 .../user/email_changes/new.html.erb           |  2 +-
 app/views/static/theme.html.erb               | 19 +++++++-
 app/views/tag_relationships/_listing.html.erb |  2 +-
 app/views/takedowns/_editor.html.erb          |  4 +-
 app/views/takedowns/index.html.erb            |  2 +-
 app/views/takedowns/show.html.erb             | 22 +++++-----
 app/views/tickets/index.html.erb              |  4 +-
 app/views/tickets/types/_blip.html.erb        |  6 +--
 app/views/tickets/types/_comment.html.erb     |  6 +--
 app/views/tickets/types/_forum.html.erb       |  6 +--
 app/views/uploads/new.html.erb                |  4 +-
 app/views/user_votes/_common_index.html.erb   |  6 +--
 app/views/users/new.html.erb                  |  2 +-
 38 files changed, 257 insertions(+), 143 deletions(-)
 create mode 100644 app/javascript/src/styles/base/_palette.scss
 create mode 100644 app/javascript/src/styles/common/_helper_palette.scss
 create mode 100644 app/javascript/src/styles/themes/_palette_deutranomaly.scss
 create mode 100644 app/javascript/src/styles/themes/_palette_tritanomaly.scss

diff --git a/app/helpers/tags_helper.rb b/app/helpers/tags_helper.rb
index 7d9324181..c441f8b81 100644
--- a/app/helpers/tags_helper.rb
+++ b/app/helpers/tags_helper.rb
@@ -2,7 +2,7 @@
 
 module TagsHelper
   def format_transitive_item(transitive)
-    html = "<strong class=\"redtext\">#{transitive[0].to_s.titlecase}</strong> ".html_safe
+    html = "<strong class=\"text-error\">#{transitive[0].to_s.titlecase}</strong> ".html_safe
     if transitive[0] == :alias
       html << "#{transitive[2]} -> #{transitive[3]} will become #{transitive[2]} -> #{transitive[4]}"
     else
diff --git a/app/helpers/takedowns_helper.rb b/app/helpers/takedowns_helper.rb
index 23eb2c208..062991a0b 100644
--- a/app/helpers/takedowns_helper.rb
+++ b/app/helpers/takedowns_helper.rb
@@ -4,10 +4,10 @@ module TakedownsHelper
   def pretty_takedown_status(takedown)
     status = takedown.status.capitalize
     classes = {
-      "inactive" => "sect_grey",
-      "denied" => "sect_red",
-      "partial" => "sect_green",
-      "approved" => "sect_green",
+      "inactive" => "background-grey",
+      "denied" => "background-red",
+      "partial" => "background-green",
+      "approved" => "background-green",
     }
     tag.td(status, class: classes[takedown.status])
   end
diff --git a/app/javascript/src/javascripts/replacement_uploader.vue b/app/javascript/src/javascripts/replacement_uploader.vue
index 0980ad65f..56e6ea3a4 100644
--- a/app/javascript/src/javascripts/replacement_uploader.vue
+++ b/app/javascript/src/javascripts/replacement_uploader.vue
@@ -25,7 +25,7 @@
     </label>
   </div>
 
-  <div class="sect_red error_message" v-if="showErrors && errorMessage !== undefined">
+  <div class="background-red error_message" v-if="showErrors && errorMessage !== undefined">
     {{ errorMessage }}
   </div>
 
diff --git a/app/javascript/src/javascripts/uploader/file_input.vue b/app/javascript/src/javascripts/uploader/file_input.vue
index 8b06db463..3f63fa168 100644
--- a/app/javascript/src/javascripts/uploader/file_input.vue
+++ b/app/javascript/src/javascripts/uploader/file_input.vue
@@ -1,7 +1,7 @@
 <template>
   <span>
     <div v-if="!disableFileUpload">
-      <div class="box-section sect_red" v-if="fileTooLarge">
+      <div class="box-section background-red" v-if="fileTooLarge">
         The file you are trying to upload is too large. Maximum allowed is {{this.maxFileSize / (1024*1024) }} MiB.<br>
         Check out <a href="/help/supported_filetypes">the Supported Formats</a> for more information.
       </div>
@@ -13,7 +13,7 @@
       <button @click.prevent="clearFileUpload" v-show="disableURLUpload">Clear</button>
     </div>
     <div v-if="!disableURLUpload">
-      <div class="box-section sect_red" v-if="badDirectURL">
+      <div class="box-section background-red" v-if="badDirectURL">
         The direct URL entered has the following problem: {{ directURLProblem }}<br>
         You should review <a href="/wiki_pages/howto:sites_and_sources">the sourcing guide</a>.
       </div>
diff --git a/app/javascript/src/javascripts/uploader/file_preview.vue b/app/javascript/src/javascripts/uploader/file_preview.vue
index 6b0241144..d19562dde 100644
--- a/app/javascript/src/javascripts/uploader/file_preview.vue
+++ b/app/javascript/src/javascripts/uploader/file_preview.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="upload_preview_container" :class="classes">
-    <div class="box-section sect_red" v-show="overDims">
+    <div class="box-section background-red" v-show="overDims">
       One of the image dimensions is above the maximum allowed of 15,000px and will fail to upload.
     </div>
     <div v-if="!failed">
@@ -12,7 +12,7 @@
         referrerpolicy="no-referrer"
         v-on:load="updateDimensions($event)" v-on:error="previewFailed()"/>
     </div>
-    <div v-else class="preview-fail box-section sect_yellow">
+    <div v-else class="preview-fail box-section background-yellow">
       <p>The preview for this file failed to load. Please, double check that the URL you provided is correct.</p>
       Note that some sites intentionally prevent images they host from being displayed on other sites. The file can still be uploaded despite that.
     </div>
diff --git a/app/javascript/src/javascripts/uploader/sources.vue b/app/javascript/src/javascripts/uploader/sources.vue
index 2c39ebc1f..b5ce34ca7 100644
--- a/app/javascript/src/javascripts/uploader/sources.vue
+++ b/app/javascript/src/javascripts/uploader/sources.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="box-section sect_red source_warning" v-show="showErrors && sourceWarning">
+  <div class="box-section background-red source_warning" v-show="showErrors && sourceWarning">
     A source must be provided or you must select that there is no available source.
   </div>
   <div v-if="!noSource">
diff --git a/app/javascript/src/javascripts/uploader/uploader.vue.erb b/app/javascript/src/javascripts/uploader/uploader.vue.erb
index f29d32f1a..1301c9a68 100644
--- a/app/javascript/src/javascripts/uploader/uploader.vue.erb
+++ b/app/javascript/src/javascripts/uploader/uploader.vue.erb
@@ -113,7 +113,7 @@
                     </div>
                 </div>
                 <div class="col2">
-                    <div class="box-section sect_red" v-if="showErrors && invalidRating">
+                    <div class="box-section background-red" v-if="showErrors && invalidRating">
                         You must select an appropriate rating for this image.
                     </div>
                     <div>
@@ -144,7 +144,7 @@
                 </div>
                 <div class="col2">
                   <file-preview classes="box-section in-editor" :data="previewData"></file-preview>
-                    <div class="box-section sect_red" v-show="showErrors && notEnoughTags">
+                    <div class="box-section background-red" v-show="showErrors && notEnoughTags">
                         You must provide at least <b>{{4 - tagCount}}</b> more tags. Tags in other sections count
                         towards this total.
                     </div>
@@ -218,16 +218,16 @@
             <div class="flex-grid">
                 <div class="col"></div>
                 <div class="col2">
-                    <div class="box-section sect_red" v-show="preventUpload && showErrors">
+                    <div class="box-section background-red" v-show="preventUpload && showErrors">
                         Unmet requirements above prevent the submission of the post.
                     </div>
-                    <div class="box-section sect_green" v-show="submitting">
+                    <div class="box-section background-green" v-show="submitting">
                         Submitting your post, please wait.
                     </div>
-                    <div class="box-section sect_red" v-show="error">
+                    <div class="box-section background-red" v-show="error">
                         {{ error }}
                     </div>
-                    <div class="box-section sect_red" v-show="duplicateId">
+                    <div class="box-section background-red" v-show="duplicateId">
                         Post is a duplicate of <a :href="duplicatePath">post #{{duplicateId}}.</a>
                     </div>
                     <button @click="submit" :disabled="(showErrors && preventUpload) || submitting" accesskey="s">
diff --git a/app/javascript/src/styles/base.scss b/app/javascript/src/styles/base.scss
index 3d3901be0..74b652581 100644
--- a/app/javascript/src/styles/base.scss
+++ b/app/javascript/src/styles/base.scss
@@ -1,4 +1,5 @@
 @import "base/functions";
+@import "base/palette";
 @import "base/themable"; //Drags in themes automatically
 @import "base/colors";
 @import "base/vars";
@@ -8,6 +9,7 @@
 @import "base/fontawesome";
 
 @import "common/helper_classes";
+@import "common/helper_palette";
 @import "common/ads.scss";
 @import "common/autocomplete.scss";
 @import "common/blacklists.scss";
diff --git a/app/javascript/src/styles/base/_base.scss b/app/javascript/src/styles/base/_base.scss
index 3c6f5c86a..7e99d0ce0 100644
--- a/app/javascript/src/styles/base/_base.scss
+++ b/app/javascript/src/styles/base/_base.scss
@@ -100,15 +100,3 @@ table tfoot {
   font-style: italic;
   font-size: 80%;
 }
-
-.greentext, .greentext a, .approved-ticket { color: $green-text-color !important; font-weight:bold; }
-.greytext, .greytext a { color: $grey-text-color !important; font-weight:bold; }
-.yellowtext, .yellowtext a, .partial-ticket { color: $yellow-text-color !important; font-weight:bold; }
-.redtext, .redtext a { color: $red-text-color !important; font-weight:bold; }
-
-
-.sect_green { background-color: $section-green-background; /* green */ }
-.sect_red { background-color: $section-red-background; /* red */ }
-.sect_yellow { background-color: $section-yellow-background; /* yellow */ }
-.sect_grey { background-color: $section-grey-background; /* yellow */ }
-.sect_green a:hover, .sect_red a:hover, .sect_yellow a:hover { color: $section-link-hover-color; }
diff --git a/app/javascript/src/styles/base/_colors.scss b/app/javascript/src/styles/base/_colors.scss
index 667eb2104..a55590d2b 100644
--- a/app/javascript/src/styles/base/_colors.scss
+++ b/app/javascript/src/styles/base/_colors.scss
@@ -1,16 +1,5 @@
 // Font
 $inverted-text-color: invert(#fff);
-$green-text-color: #3e9e49;
-$yellow-text-color: #e4e150;
-$red-text-color: #e45f5f;
-$grey-text-color: #959595;
-
-
-$section-green-background: #288233;
-$section-yellow-background: #828028;
-$section-red-background: #822828;
-$section-grey-background: #5d656e;
-$section-link-hover-color: white;
 
 // Main background colors
 $lighten-background-5: rgba(255,255,255,0.05);
@@ -22,9 +11,6 @@ $state-error-color: #e45f5f;
 // DText
 $dtext-code-background: rgba(255,255,255,0.2);
 
-// Blips
-$blip-hidden-background: $section-red-background;
-
 // Forms
 $form-focus-color: black;
 $form-focus-background: #FFC;
@@ -37,11 +23,11 @@ $form-submit-button-background: #eee;
 $page-header-sign-in-link-color: #e00;
 
 // Post previews
-$preview-has-children-color: #0F0;
-$preview-has-parent-color: #CC0;
-$preview-deleted-color: #000;
-$preview-pending-color: #00F;
-$preview-flagged-color: #F00;
+$preview-has-children-color: palette("plain-green");
+$preview-has-parent-color: palette("plain-yellow");
+$preview-deleted-color: palette("plain-black");
+$preview-pending-color: palette("plain-blue");
+$preview-flagged-color: palette("plain-red");
 
 // Autocomplete
 $autocomplete-border: #C5C5C5;
@@ -88,7 +74,6 @@ $negative-record-color: $red-color;
 $neutral-record-color: $dark-grey-color;
 
 $comment-highlight-background: rgba(255,255,255,0.25);
-$comment-hidden-background: $section-red-background;
 $comment-vote-background: rgba(255, 255, 255, 0.2);
 
 // Keyboard shortcuts
@@ -111,8 +96,6 @@ $forum-vote-down-color: red;
 $forum-vote-meh-color: goldenrod;
 $forum-topic-new-color: red;
 $forum-topic-except-color: gray;
-$forum-topic-hidden-background: rgba(130,40,40,0.75);
-$forum-post-hidden-background: rgba(130,40,40,0.75);
 
 // IQDB lookup
 $iqdb-post-border: lightgrey;
@@ -142,12 +125,12 @@ $post-preview-highlight-background: rgba(0,0,0,0.1);
 $post-tag-low-count-color: red;
 
 // Post Mode
-$post-mode-edit: $section-yellow-background;
+$post-mode-edit: palette("background-yellow");
 $post-mode-tag-script: #4f114f;
 $post-mode-add-fav: #104e17;
 $post-mode-remove-fav: darken($post-mode-add-fav, 10%);
-$post-mode-vote-up: $section-green-background;
-$post-mode-vote-down: $section-red-background;
+$post-mode-vote-up: palette("background-green");
+$post-mode-vote-down: palette("background-red");
 $post-mode-add-pool: #104b57;
 $post-mode-lock-rating: #AA3;
 $post-mode-lock-note: #3AA;
diff --git a/app/javascript/src/styles/base/_palette.scss b/app/javascript/src/styles/base/_palette.scss
new file mode 100644
index 000000000..a0b2766a1
--- /dev/null
+++ b/app/javascript/src/styles/base/_palette.scss
@@ -0,0 +1,43 @@
+// Base color palette.
+// These colors should not normally change between
+// themes, but could still be overriden if need be.
+
+// Palette definitions
+$palette: (
+  "background-red": #76312e,
+  "background-yellow": #827428,
+  "background-green": #227d2a,
+  "background-grey": #60686f,
+
+  "background-red-d5": #{darken(#76312e, 5%)},
+  "background-yellow-d5": #{darken(#827428, 5%)},
+  "background-green-d5": #{darken(#227d2a, 5%)},
+  "background-grey-d5": #{darken(#60686f, 5%)},
+
+  "text-white": #ffffff,
+  "text-red": #FE6A64,
+  "text-yellow": #F5D76E,
+  "text-green": #76C376,
+  "text-grey": #aaaaaa,
+
+  // Just here for the post borders, nothing else
+  "plain-black": #000,
+  "plain-green": #0F0,
+  "plain-yellow": #CC0,
+  "plain-blue": #00F,
+  "plain-red": #F00,
+);
+
+:root {
+  @each $name, $color in $palette {
+    --palette-#{$name}: #{$color};
+  }
+}
+
+// Helper function
+@function palette($key) {
+  @return var(--palette-#{$key});
+}
+
+// Element-specific
+$background-article-hidden: palette("background-red");
diff --git a/app/javascript/src/styles/base/_themable.scss b/app/javascript/src/styles/base/_themable.scss
index 17c0e075f..2c7dee3aa 100644
--- a/app/javascript/src/styles/base/_themable.scss
+++ b/app/javascript/src/styles/base/_themable.scss
@@ -4,6 +4,9 @@
 @import "../themes/theme_serpent";
 @import "../themes/theme_hotdog";
 
+@import "../themes/palette_deutranomaly";
+@import "../themes/palette_tritanomaly";
+
 @import "../themes/extra_none";
 @import "../themes/extra_autumn";
 @import "../themes/extra_winter";
diff --git a/app/javascript/src/styles/common/_helper_classes.scss b/app/javascript/src/styles/common/_helper_classes.scss
index bc1a55200..960a212a1 100644
--- a/app/javascript/src/styles/common/_helper_classes.scss
+++ b/app/javascript/src/styles/common/_helper_classes.scss
@@ -87,21 +87,21 @@
     }
   }
   &.score-positive {
-    color: themed("color-score-positive");
-    background: themed("color-success");
+    color: palette("text-white");
+    background: palette("background-green");
     &:hover {
-      background: themed("color-success-darken-5");
+      background: palette("background-green-d5");
     }
   }
   &.score-negative {
-    color: themed("color-score-negative");
-    background: themed("color-danger");
+    color: palette("text-white");
+    background: palette("background-red");
     &:hover {
-      background: themed("color-danger-darken-5");
+      background: palette("background-red-d5");
     }
   }
   &.score-neutral {
-    color: themed("color-text-muted");
+    color: palette("text-grey");
     background: themed("color-section");
     &:hover {
       background: themed("color-section-darken-5");
diff --git a/app/javascript/src/styles/common/_helper_palette.scss b/app/javascript/src/styles/common/_helper_palette.scss
new file mode 100644
index 000000000..d45f37785
--- /dev/null
+++ b/app/javascript/src/styles/common/_helper_palette.scss
@@ -0,0 +1,17 @@
+@each $name in ("red", "yellow", "green", "grey") {
+  .background-#{$name} {
+    background: palette("background-#{$name}") !important;
+  }
+  .text-#{$name} {
+    color: palette("text-#{$name}") !important;
+  }
+}
+
+.text-error {
+  color: palette("text-red") !important;
+  font-weight: bold;
+}
+
+.text-bold {
+  font-weight: bold;
+}
diff --git a/app/javascript/src/styles/common/_scores.scss b/app/javascript/src/styles/common/_scores.scss
index a7c25967b..3294fbad3 100644
--- a/app/javascript/src/styles/common/_scores.scss
+++ b/app/javascript/src/styles/common/_scores.scss
@@ -6,33 +6,33 @@
 }
 
 .score-positive, span.score-positive {
-  color: themed("color-score-positive");
+  color: palette("text-green");
 
   a {
-    color: themed("color-score-positive");
+    color: palette("text-green");
   }
 }
 .score-negative, span.score-negative {
-  color: themed("color-score-negative");
+  color: palette("text-red");
 
   a {
-    color: themed("color-score-negative");
+    color: palette("text-red");
   }
 }
 .score-neutral, span.score-neutral {
-  color: themed("color-text-muted");
+  color: palette("text-grey");
 
   a {
-    color: themed("color-text-muted");
+    color: palette("text-grey");
   }
 }
 
 .post-rating-text-safe {
-  color: themed("color-rating-safe");
+  color: palette("text-green");
 }
 .post-rating-text-questionable {
-  color: themed("color-rating-questionable");
+  color: palette("text-yellow");
 }
 .post-rating-text-explicit {
-  color: themed("color-rating-explicit");
+  color: palette("text-red");
 }
diff --git a/app/javascript/src/styles/common/containers.scss b/app/javascript/src/styles/common/containers.scss
index 74e9901ee..5b72fe9f4 100644
--- a/app/javascript/src/styles/common/containers.scss
+++ b/app/javascript/src/styles/common/containers.scss
@@ -1,24 +1,13 @@
-
-
 .box-section {
   background-color: themed("color-section");
   padding: $base-padding;
   margin-bottom: 1.5rem;
   border-radius: $border-radius-half;
-}
 
-.box-section.sect_green {
-  background-color: $section-green-background;
-}
-
-.box-section.sect_grey {
-  background-color: $section-grey-background;
-}
-
-.box-section.sect_red {
-  background-color: $section-red-background;
-}
-
-.box-section.sect_yellow {
-  background-color: $section-yellow-background;
+  // For some reason, link hover color was overriden in the original stylesheet.
+  &.background-green, &.background-grey, &.background-red, &.background-yellow {
+    a:hover {
+      color: themed("color-text");
+    }
+  }
 }
diff --git a/app/javascript/src/styles/specific/blips.scss b/app/javascript/src/styles/specific/blips.scss
index 0180b27aa..ca1ee658f 100644
--- a/app/javascript/src/styles/specific/blips.scss
+++ b/app/javascript/src/styles/specific/blips.scss
@@ -3,7 +3,7 @@ div#c-blips {
     margin-bottom: $base-padding;
 
     &[data-is-deleted="true"] {
-      background-color: $blip-hidden-background;
+      background-color: $background-article-hidden;
     }
   }
 }
diff --git a/app/javascript/src/styles/specific/comments.scss b/app/javascript/src/styles/specific/comments.scss
index 64121233a..6c82211af 100644
--- a/app/javascript/src/styles/specific/comments.scss
+++ b/app/javascript/src/styles/specific/comments.scss
@@ -17,7 +17,7 @@ div.comments-for-post {
       }
 
       &[data-is-deleted="true"] {
-        background: $comment-hidden-background;
+        background: $background-article-hidden;
       }
 
       div.content {
diff --git a/app/javascript/src/styles/specific/forum.scss b/app/javascript/src/styles/specific/forum.scss
index 8e1f212cf..328a67f9b 100644
--- a/app/javascript/src/styles/specific/forum.scss
+++ b/app/javascript/src/styles/specific/forum.scss
@@ -15,19 +15,19 @@ div.list-of-forum-posts {
     }
 
     &[data-is-hidden="true"] {
-      background-color: $forum-post-hidden-background;
+      background-color: $background-article-hidden;
     }
 
     .vote-score-up {
-      color: $forum-vote-up-color;
+      color: palette("text-green");
     }
 
     .vote-score-meh {
-      color: $forum-vote-meh-color;
+      color: palette("text-yellow");
     }
 
     .vote-score-down {
-      color: $forum-vote-down-color;
+      color: palette("text-red");
     }
 
     div.content-menu {
@@ -71,7 +71,7 @@ div#c-forum-topics {
 
   tr.forum-topic-row {
     &[data-topic-is-hidden="true"] {
-      background-color: $forum-topic-hidden-background;
+      background-color: $background-article-hidden;
     }
 
     td:last-child {
@@ -91,6 +91,6 @@ div#c-forum-topics {
     color: $forum-topic-except-color;
   }
   tr[data-is-hidden="true"], tr[data-topic-is-hidden="true"] {
-    background-color: $forum-topic-hidden-background;
+    background-color: $background-article-hidden;
   }
 }
diff --git a/app/javascript/src/styles/specific/posts.scss b/app/javascript/src/styles/specific/posts.scss
index bcd60cb24..cb38b137a 100644
--- a/app/javascript/src/styles/specific/posts.scss
+++ b/app/javascript/src/styles/specific/posts.scss
@@ -30,15 +30,15 @@ article.post-preview {
   }
 
   &.post-rating-explicit .post-score-rating {
-    color: $post-rating-explicit-color;
+    color: palette("text-red");
   }
 
   &.post-rating-safe .post-score-rating {
-    color: $post-rating-safe-color;
+    color: palette("text-green");
   }
 
   &.post-rating-questionable .post-score-rating {
-    color: $post-rating-questionable-color;
+    color: palette("text-yellow");
   }
 
   img {
diff --git a/app/javascript/src/styles/specific/tickets.scss b/app/javascript/src/styles/specific/tickets.scss
index 8251dd74a..12e1cdc27 100644
--- a/app/javascript/src/styles/specific/tickets.scss
+++ b/app/javascript/src/styles/specific/tickets.scss
@@ -20,3 +20,12 @@
     }
   }
 } 
+
+.approved-ticket {
+  color: palette("text-green");
+  font-weight: bold;
+}
+.partial-ticket { 
+  color: palette("text-yellow");
+  font-weight: bold;
+}
diff --git a/app/javascript/src/styles/specific/user_feedback.scss b/app/javascript/src/styles/specific/user_feedback.scss
index af8046155..63232cccc 100644
--- a/app/javascript/src/styles/specific/user_feedback.scss
+++ b/app/javascript/src/styles/specific/user_feedback.scss
@@ -1,30 +1,30 @@
 .user-feedback-positive {
-  color: $positive-record-color;
+  color: palette("text-green");
 }
 
 .user-feedback-neutral {
-  color: $neutral-record-color;
+  color: palette("text-grey");
 }
 
 .user-feedback-negative {
-  color: $negative-record-background;
+  color: palette("text-red");
 }
 
 div#c-user-feedbacks, div#c-moderator-dashboards .activity-container {
   .feedback-category-positive {
-    background: $positive-record-background;
-  }
-
-  .feedback-category-negative {
-    background: $negative-record-background;
+    background: palette("background-green");
   }
 
   .feedback-category-neutral {
-    background: $neutral-record-background;
+    background: palette("background-grey");
+  }
+
+  .feedback-category-negative {
+    background: palette("background-red");
   }
 
   tr.user-feedback[data-is-deleted="true"] {
-    background: #827428;
+    background: palette("background-yellow");
   }
 
   blockquote {
diff --git a/app/javascript/src/styles/themes/_palette_deutranomaly.scss b/app/javascript/src/styles/themes/_palette_deutranomaly.scss
new file mode 100644
index 000000000..336496ed5
--- /dev/null
+++ b/app/javascript/src/styles/themes/_palette_deutranomaly.scss
@@ -0,0 +1,31 @@
+$palette: (
+  "background-red": #bc4c00,
+  "background-yellow": #4b8099,
+  "background-green": #794eb1,
+  "background-grey": #666664,
+
+  "background-red-d5": #{darken(#bc4c00, 5%)},
+  "background-yellow-d5": #{darken(#4b8099, 5%)},
+  "background-green-d5": #{darken(#794eb1, 5%)},
+  "background-grey-d5": #{darken(#666664, 5%)},
+
+  "text-white": #ffffff,
+  "text-red": #ff6f1b,
+  "text-yellow": #fdff94,
+  "text-green": #9f98ff,
+  "text-grey": #aaaaaa,
+
+  "plain-black": #000,
+  "plain-green": #9e1fff,
+  "plain-yellow": #CC0,
+  "plain-blue": #afb1ff,
+  "plain-red": #bc4c00,
+);
+
+body[data-th-palette="deut"] {
+
+  @each $name, $color in $palette {
+    --palette-#{$name}: #{$color};
+  }
+
+}
\ No newline at end of file
diff --git a/app/javascript/src/styles/themes/_palette_tritanomaly.scss b/app/javascript/src/styles/themes/_palette_tritanomaly.scss
new file mode 100644
index 000000000..ab302fcf8
--- /dev/null
+++ b/app/javascript/src/styles/themes/_palette_tritanomaly.scss
@@ -0,0 +1,32 @@
+$palette: (
+  "background-red": #76312e,
+  "background-yellow": #827428,
+  "background-green": #8529c9,
+  "background-grey": #60686f,
+
+  "background-red-d5": #{darken(#76312e, 5%)},
+  "background-yellow-d5": #{darken(#827428, 5%)},
+  "background-green-d5": #{darken(#8529c9, 5%)},
+  "background-grey-d5": #{darken(#60686f, 5%)},
+
+  "text-white": #ffffff,
+  "text-red": #FE6A64,
+  "text-yellow": #ffff00,
+  "text-green": #c16dff,
+  "text-grey": #aaaaaa,
+
+  // Just here for the post borders, nothing else
+  "plain-black": #000,
+  "plain-green": #0F0,
+  "plain-yellow": #c4c415,
+  "plain-blue": #00F,
+  "plain-red": #F00,
+);
+
+body[data-th-palette="trit"] {
+
+  @each $name, $color in $palette {
+    --palette-#{$name}: #{$color};
+  }
+
+}
\ No newline at end of file
diff --git a/app/views/layouts/_theme_include.html.erb b/app/views/layouts/_theme_include.html.erb
index 14503fc3a..254e88379 100644
--- a/app/views/layouts/_theme_include.html.erb
+++ b/app/views/layouts/_theme_include.html.erb
@@ -3,10 +3,12 @@
   try {
     var theme = localStorage.getItem('theme') || 'hexagon';
     var extra = localStorage.getItem('theme-extra') || 'hexagon';
+    var palette = localStorage.getItem('theme-palette') || 'default';
     var nav = localStorage.getItem('theme-nav') || 'top';
     var b = document.body;
     b.setAttribute('data-th-main', theme);
     b.setAttribute('data-th-extra', extra);
+    b.setAttribute('data-th-palette', palette);
     b.setAttribute('data-th-nav', nav);
   } catch(e) {
   }
diff --git a/app/views/maintenance/user/email_changes/new.html.erb b/app/views/maintenance/user/email_changes/new.html.erb
index 385763bdd..e744ec10e 100644
--- a/app/views/maintenance/user/email_changes/new.html.erb
+++ b/app/views/maintenance/user/email_changes/new.html.erb
@@ -2,7 +2,7 @@
   <div id="a-new">
     <h1>Change Email</h1>
 
-    <div class="box-section sect_red">
+    <div class="box-section background-red">
     <p>Warning: Changing the email on your account will mark it as unactivated until you confirm the new email address.</p>
 
     <p>You must confirm your password in order to change your email address.</p>
diff --git a/app/views/static/theme.html.erb b/app/views/static/theme.html.erb
index f252c29fc..b58cc9024 100644
--- a/app/views/static/theme.html.erb
+++ b/app/views/static/theme.html.erb
@@ -1,10 +1,10 @@
 <p>Theme settings are saved using cookies and javascript. This means that they will not persist across private browsing
   sessions, or work inside incognito mode on mobile devices.</p>
 
-<h3 class="redtext" id="no_save_warning" style="display:none;">Your device does not allow the site to save theme
+<h3 class="text-error" id="no_save_warning" style="display:none;">Your device does not allow the site to save theme
   settings.</h3>
 <noscript>
-  <h3 class="redtext" id="no_save_warning">Your device does not allow the site to save theme settings.</h3>
+  <h3 class="text-error" id="no_save_warning">Your device does not allow the site to save theme settings.</h3>
 </noscript>
 
 <div class="simple_form">
@@ -31,6 +31,14 @@
       <option value="winter">Eternal Winter</option>
     </select>
   </div>
+  <div class="input">
+    <label for="theme_palette">Theme</label>
+    <select id="theme_palette">
+      <option value="default">Default</option>
+      <option value="deut">Protanopia & Deuteranopia</option>
+      <option value="trit">Tritanopia</option>
+    </select>
+  </div>
   <div class="input">
     <label for="theme_navbar">Navigation bar location</label>
     <select id="theme_navbar">
@@ -60,10 +68,12 @@
       ls.removeItem('test');
       var theme = ls.getItem('theme') || 'hexagon';
       var extra = ls.getItem('theme-extra') || 'hexagon';
+      var palette = ls.getItem('theme-palette') || 'default';
       var nav = ls.getItem('theme-nav') || 'top';
       var emg = ls.getItem('emg') || 'false';
       $('#theme_name').val(theme);
       $('#theme_extra').val(extra);
+      $('#theme_palette').val(palette);
       $('#theme_navbar').val(nav);
       $('#gestures_enable').val(emg);
     } catch(e) {
@@ -79,6 +89,11 @@
       $body.attr('data-th-extra', extra);
       window.localStorage.setItem('theme-extra', extra);
     });
+    $("#theme_palette").on('change', function(e) {
+      var palette = e.target.value;
+      $body.attr('data-th-palette', palette);
+      window.localStorage.setItem('theme-palette', palette);
+    });
     $("#theme_navbar").on('change', function(e) {
       var pos = e.target.value;
       $body.attr('data-th-nav', pos);
diff --git a/app/views/tag_relationships/_listing.html.erb b/app/views/tag_relationships/_listing.html.erb
index 2843cb5e2..db93980eb 100644
--- a/app/views/tag_relationships/_listing.html.erb
+++ b/app/views/tag_relationships/_listing.html.erb
@@ -22,7 +22,7 @@
           <span class="count"><%= tag_relation.consequent_tag.post_count rescue 0 %></span>
           <% if tag_relation.is_a?(TagAlias) %>
             <% if CurrentUser.is_member? && tag_relation.status == "pending" && tag_relation.has_transitives %>
-              <span class="redtext"> HAS TRANSITIVES</span>
+              <span class="text-error"> HAS TRANSITIVES</span>
             <% end %>
           <% end %>
         </td>
diff --git a/app/views/takedowns/_editor.html.erb b/app/views/takedowns/_editor.html.erb
index 83d163fc8..e36979eb9 100644
--- a/app/views/takedowns/_editor.html.erb
+++ b/app/views/takedowns/_editor.html.erb
@@ -71,8 +71,8 @@
         <td colspan='2'><%= check_box "takedown", "reason_hidden", checked: @takedown.reason_hidden %>
           <label for="takedown_reason_hidden">Hide Reason?
             (Currently
-            <% if !@takedown.reason_hidden %><span class='greentext'>not hidden</span>
-            <% else %><span class='redtext'>hidden</span>
+            <% if !@takedown.reason_hidden %><span class="text-green text-bold">not hidden</span>
+            <% else %><span class="text-red text-bold">hidden</span>
             <% end %>)
           </label></td>
       </tr>
diff --git a/app/views/takedowns/index.html.erb b/app/views/takedowns/index.html.erb
index d724e44c7..344fe41ae 100644
--- a/app/views/takedowns/index.html.erb
+++ b/app/views/takedowns/index.html.erb
@@ -30,7 +30,7 @@
                 <%= link_to takedown.source, "https://#{takedown.source}", rel: "noopener noreferrer nofollow" %>
               <% end %>
             <% else %>
-              <span class="redtext">(Source hidden)</span>
+              <span class="text-error">(Source hidden)</span>
             <% end %>
           </td>
 
diff --git a/app/views/takedowns/show.html.erb b/app/views/takedowns/show.html.erb
index 341e87845..9c2251ce7 100644
--- a/app/views/takedowns/show.html.erb
+++ b/app/views/takedowns/show.html.erb
@@ -1,7 +1,7 @@
 <div id="c-takedowns">
   <div id="c-show">
     <% if @show_instructions && (!@takedown.completed?) %>
-      <div class='box-section sect_red'>
+      <div class="box-section background-red">
         <div style="font-size:2rem;margin-top:0;margin-bottom:1rem;">Wait! You're not done yet!</div>
         <p>Your verification code is <span class='takedown-vericode'><%= @takedown.vericode %></span></p>
         <p>Your takedown request has been successfully created. Using the gallery account that you specified below as the "source", <span style="font-weight:bold;">please send your verification code via PM/note to</span>:</p>
@@ -26,7 +26,7 @@
                 <%= link_to @takedown.source, "https://#{@takedown.source}", rel: "noopener noreferrer nofollow" %>
               <% end %>
             <% else %>
-              <span class="redtext">[Source hidden by submitter]</span>
+              <span class="text-error">[Source hidden by submitter]</span>
             <% end %>
           </td>
         </tr>
@@ -35,9 +35,9 @@
           <td><label>Reason</label></td>
           <% if !@takedown.reason_hidden || CurrentUser.is_moderator? || @show_instructions %>
             <td><%= h @takedown.reason %>
-              <% if @takedown.reason_hidden %><span class="redtext">(HIDDEN)</span><% end %></td>
+              <% if @takedown.reason_hidden %><span class="text-error">(HIDDEN)</span><% end %></td>
           <% else %>
-            <td><span class="redtext">[Reason hidden by submitter]</span></td>
+            <td><span class="text-error">[Reason hidden by submitter]</span></td>
           <% end %>
         </tr>
 
@@ -101,9 +101,9 @@
       <div class="box-section dtext-container">
         <% if !@takedown.reason_hidden || CurrentUser.is_moderator? %>
           <%= format_text(@takedown.notes) %>
-          <% if @takedown.reason_hidden %><span class="redtext">(HIDDEN)</span><% end %>
+          <% if @takedown.reason_hidden %><span class="text-error">(HIDDEN)</span><% end %>
         <% else %>
-          <span class="redtext">[Admin notes hidden]</span>
+          <span class="text-error">[Admin notes hidden]</span>
         <% end %>
       </div>
     <% end %>
@@ -137,7 +137,7 @@
         </div>
 
       <% elsif @takedown.status == "inactive" && !@takedown.takedown_posts.blank? %>
-        <div class='box-section sect_grey'>
+        <div class="box-section background-grey">
           <p style="margin-bottom:0px;">This takedown request has been marked as inactive as the submitter has not responded in a reasonable time frame. It will be handled once the submitter responds.</p>
             <br>
             <p>The following posts are up for dispute:</p>
@@ -147,7 +147,7 @@
         </div>
 
       <% elsif @takedown.status == "denied" %>
-        <div class='box-section sect_red'>
+        <div class="box-section background-red">
           <p>The request has been denied. The following posts were not removed:</p>
           <% @takedown.actual_kept_posts.each do |post| %>
             <%= link_to("post ##{post.id}", post_path(post)) %><br>
@@ -155,14 +155,14 @@
         </div>
 
       <% elsif @takedown.status == "partial" %>
-        <div class='box-section sect_green'>
+        <div class="box-section background-green">
           <p>The request has been partially approved. The following posts were removed:</p>
           <% @takedown.actual_deleted_posts.each do |post| %>
             <%= link_to("post ##{post.id}", post_path(post), class: "takedown_post_deleted") %><br>
           <% end %>
         </div>
 
-        <div class='box-section sect_red'>
+        <div class="box-section background-red">
           <p>The following posts were kept:</p>
           <% @takedown.actual_kept_posts.each do |post| %>
             <%= link_to("post ##{post.id}", post_path(post), class: "takedown_post_kept") %><br>
@@ -170,7 +170,7 @@
         </div>
 
       <% elsif @takedown.status == "approved" %>
-        <div class='box-section sect_green'>
+        <div class="box-section background-green">
           <p>The request has been approved. The following posts were removed:</p>
           <% @takedown.actual_deleted_posts.each do |post| %>
             <%= link_to("post ##{post.id}", post_path(post)) %><br>
diff --git a/app/views/tickets/index.html.erb b/app/views/tickets/index.html.erb
index dfbe66765..35ddfccf1 100644
--- a/app/views/tickets/index.html.erb
+++ b/app/views/tickets/index.html.erb
@@ -33,7 +33,7 @@
               </td>
               <td>
               <% if ticket.claimant.nil? %>
-                <span class="redtext">Unclaimed</span>
+                <span class="text-error">Unclaimed</span>
               <% else %>
                 <%= link_to_user ticket.claimant %>
               <% end %>
@@ -42,7 +42,7 @@
             <td><%= link_to ticket.type_title, ticket_path(ticket) %></td>
 
             <% if !ticket.can_see_details?(CurrentUser.user) %>
-              <td><span style="cursor:help;" class="redtext" title="Due to privacy concerns, this information is confidential">Confidential</span></td>
+              <td><span style="cursor:help;" class="text-error" title="Due to privacy concerns, this information is confidential">Confidential</span></td>
             <% else %>
               <%= tag.td class: "ticket-subject full-width-link", title: truncate(strip_tags(format_text(ticket.reason)), length: 200) do %>
                 <%= link_to truncate(strip_tags(format_text(ticket.subject)), length: 200), ticket_path(ticket.id) %>
diff --git a/app/views/tickets/types/_blip.html.erb b/app/views/tickets/types/_blip.html.erb
index 415799359..1c28708b2 100644
--- a/app/views/tickets/types/_blip.html.erb
+++ b/app/views/tickets/types/_blip.html.erb
@@ -1,13 +1,13 @@
 <% if @ticket.content %>
     <tr>
-      <td><span class='title'>Reported Blip</span></td>
+      <td><span class="title">Reported Blip</span></td>
       <td>
         <%= link_to "Blip by #{@ticket.content.creator_name}", blip_path(@ticket.content) %>
       </td>
     </tr>
 <% else %>
     <tr>
-      <td><span class='title'>Reported Blip</span></td>
-      <td><span class='redtext'>Blip has been deleted</span></td>
+      <td><span class="title">Reported Blip</span></td>
+      <td><span class="text-error">Blip has been deleted</span></td>
     </tr>
 <% end %>
diff --git a/app/views/tickets/types/_comment.html.erb b/app/views/tickets/types/_comment.html.erb
index f510a1134..ebb152f7b 100644
--- a/app/views/tickets/types/_comment.html.erb
+++ b/app/views/tickets/types/_comment.html.erb
@@ -1,6 +1,6 @@
 <% if @ticket.content %>
   <tr>
-    <td><span class='title'>Reported Comment</span></td>
+    <td><span class="title">Reported Comment</span></td>
     <td>
       <%= link_to("Comment by #{@ticket.content.creator_name}", comment_path(@ticket.content)) %> on
       <%= link_to("post ##{@ticket.content.post_id}", post_path(@ticket.content.post_id)) %>
@@ -8,7 +8,7 @@
   </tr>
 <% else %>
   <tr>
-    <td><span class='title'>Reported Comment</span></td>
-    <td><span class='redtext'>Comment has been deleted</span></td>
+    <td><span class="title">Reported Comment</span></td>
+    <td><span class="text-error">Comment has been deleted</span></td>
   </tr>
 <% end %>
diff --git a/app/views/tickets/types/_forum.html.erb b/app/views/tickets/types/_forum.html.erb
index f3fc08965..a5a05f6b0 100644
--- a/app/views/tickets/types/_forum.html.erb
+++ b/app/views/tickets/types/_forum.html.erb
@@ -1,13 +1,13 @@
 <% if @ticket.content %>
   <tr>
-    <td><span class='title'>Reported Forum Post</span></td>
+    <td><span class="title">Reported Forum Post</span></td>
     <td>
       <%= link_to("Post by #{@ticket.content.creator.name} in '#{@ticket.content.topic.title}'", forum_post_path(@ticket.content)) %>
     </td>
   </tr>
 <% else %>
   <tr>
-    <td><span class='title'>Reported Forum Post</span></td>
-    <td><span class='redtext'>Forum post has been deleted</span></td>
+    <td><span class="title">Reported Forum Post</span></td>
+    <td><span class="text-error">Forum post has been deleted</span></td>
   </tr>
 <% end %>
diff --git a/app/views/uploads/new.html.erb b/app/views/uploads/new.html.erb
index 28387e082..5e9f3825e 100644
--- a/app/views/uploads/new.html.erb
+++ b/app/views/uploads/new.html.erb
@@ -13,7 +13,7 @@
   <div id="uploader"></div>
   <% if CurrentUser.upload_limit <= 5 || CurrentUser.post_upload_throttle <= 5 %>
     <% @limit_pieces = CurrentUser.upload_limit_pieces %>
-    <div id="post-uploads-remaining" class="box-section section<% if [CurrentUser.upload_limit, CurrentUser.post_upload_throttle].min <= 0 %> sect_red<% end %>" style="width:640px;">
+    <div id="post-uploads-remaining" class="box-section section<% if [CurrentUser.upload_limit, CurrentUser.post_upload_throttle].min <= 0 %> background-red<% end %>" style="width:640px;">
       <p>
         You currently have <span class="post-uploads-remaining-count"><%= CurrentUser.upload_limit %></span> upload<%= CurrentUser.upload_limit!=1?"s":"" %> remaining.
 
@@ -25,7 +25,7 @@
       See <%= link_to "here", upload_limit_users_path %> for more details.
     </div>
   <% elsif CurrentUser.post_upload_throttle <= 5 %>
-    <div id="post-uploads-remaining" class="section<% if CurrentUser.post_upload_throttle <= 0 %> sect_red<% end %>" style="width:640px;">
+    <div id="post-uploads-remaining" class="section<% if CurrentUser.post_upload_throttle <= 0 %> background-red<% end %>" style="width:640px;">
       You have <span class="post-uploads-remaining-count"><%= CurrentUser.post_upload_throttle %></span> uploads remaining this hour.
       See <%= link_to "here", upload_limit_users_path %> for more details.
     </div>
diff --git a/app/views/user_votes/_common_index.html.erb b/app/views/user_votes/_common_index.html.erb
index 5b4db6b85..ca9540bc3 100644
--- a/app/views/user_votes/_common_index.html.erb
+++ b/app/views/user_votes/_common_index.html.erb
@@ -45,9 +45,9 @@
           <% end %>
           <td><%= time_ago_in_words_tagged(vote.user.created_at) %></td>
           <td>
-            <% if vote.is_positive? %><span class='greentext'>Up</span>
-            <% elsif vote.is_locked? %><span class='yellowtext'>Locked</span>
-            <% else %><span class='redtext'>Down</span>
+            <% if vote.is_positive? %><span class="text-green text-bold">Up</span>
+            <% elsif vote.is_locked? %><span class="text-yellow text-bold">Locked</span>
+            <% else %><span class="text-red text-bold">Down</span>
             <% end %>
           </td>
           <td><%= time_ago_in_words_tagged(vote.created_at) %></td>
diff --git a/app/views/users/new.html.erb b/app/views/users/new.html.erb
index f2620ec7e..3bf422fef 100644
--- a/app/views/users/new.html.erb
+++ b/app/views/users/new.html.erb
@@ -4,7 +4,7 @@
 
     <p>An account is <strong>free</strong> and lets you keep favorites, upload artwork, and write comments.</p>
 
-    <div class="box-section sect_red">
+    <div class="box-section background-red">
       <p>Make sure to read the <a href="/wiki_pages/e621:rules">site rules</a> before continuing.</p>
       <p>You must confirm your email address, so use something you can receive email with.</p>
       <p>This site is open to web crawlers so whatever name you choose will be public!</p>