css: standardize body text colors.

* Standardize on one shade of grey for all grey text.
* Use very dark grey instead of black for body text.

app/javascript/src/styles/base/020_base.scss

@@ -1,6 +1,7 @@
 @import "../base/000_vars.scss";
 
 body {
+  color: var(--text-color);
   background-color: var(--body-background-color);
   font-family: $base_font_family;
   font-size: 87.5%;
@@ -81,7 +82,7 @@ table tfoot {
 }
 
 .fineprint {
-  color: var(--fineprint-color);
+  color: var(--muted-text-color);
   font-style: italic;
   font-size: 0.8em;
 }

app/javascript/src/styles/base/040_colors.css

@@ -1,14 +1,23 @@
+:root {
+  --very-light-grey: hsl(0, 0%, 95%);
+  --light-grey: hsl(0, 0%, 90%);
+  --grey: hsl(0, 0%, 55%);
+  --dark-grey: hsl(0, 0%, 40%);
+  --very-dark-grey: hsl(0, 0%, 15%);
+}
+
 :root {
   --body-background-color: white;
 
+  --text-color: var(--very-dark-grey);
+  --muted-text-color: var(--grey);
+
   --link-color: hsl(213, 100%, 50%);
   --link-hover-color: hsl(213, 100%, 75%);
 
-  --fineprint-color: #888;
+  --error-background-color: hsl(0, 100%, 95%); /* light red */
-
+  --success-background-color: hsl(120, 100%, 95%); /* light green */
-  --error-background-color: hsl(0, 100%, 95%); // light red
+  --warning-background-color: hsl(50, 100%, 95%); /* light yellow */
-  --success-background-color: hsl(120, 100%, 95%); // light green
-  --warning-background-color: hsl(50, 100%, 95%); // light yellow
 
   --subnav-menu-background-color: #F5F5FF;
 
@@ -22,7 +31,6 @@
   --user-upgrade-table-row-hover-background-color: #FEF;
 
   --table-header-border: 2px solid #666;
-  --table-header-text-color: #333;
   --table-row-border: 1px solid #CCC;
   --table-row-hover-background: hsl(213, 100%, 95%);
   --table-even-row-background: #FAFAFA;
@@ -46,9 +54,7 @@
   --uploads-dropzone-progress-bar-background-color: var(--link-hover-color);
 
   --forum-new-topic-color: red;
-  --forum-locked-topic-color: gray;
   --forum-level-restricted-topic-color: #F66;
-  --forum-deleted-topic-color: gray;
   --forum-vote-up-color: green;
   --forum-vote-meh-color: goldrenrod;
   --forum-vote-down-color: red;
@@ -72,7 +78,7 @@
 
   --autocomplete-selected-background-color: var(--subnav-menu-background-color);
   --autocomplete-border: 1px solid #CCC;
-  --autocomplete-arrow-color: black;
+  --autocomplete-arrow-color: var(--text-color);
 
   --diff-list-added-color: green;
   --diff-list-removed-color: red;
@@ -96,7 +102,6 @@
 
   --post-artist-commentary-container-background: #F8F8F8;
   --post-artist-commentary-container-border: 1px solid #CCC;
-  --post-artist-commentary-disabled-color: gray;
 
   --note-body-background: #FFE;
   --note-body-border: 1px solid black;
@@ -107,7 +112,7 @@
   --note-preview-border: 1px solid red;
   --note-preview-background: white;
   --note-highlight-color: blue;
-  --note-tn-color: gray;
+  --note-tn-color: var(--muted-text-color);
 
   --series-pool-color: #A0A;
   --series-pool-hover-color: #B6B;
@@ -115,10 +120,7 @@
   --collection-pool-color: var(--general-tag-color);
   --collection-pool-hover-color: var(--general-tag-hover-color);
 
-  --profile-page-header-color: #333;
+  --fetch-source-data-border: 1px solid #666;
-  --settings-page-active-tab-color: black;
-
-  --fetch-source-data-border-color: #666;
 
   --post-mode-menu-view-background: white;
   --post-mode-menu-edit-background: #5C5;
@@ -133,7 +135,7 @@
   --post-mode-menu-translation-background: #5CD;
   --post-mode-menu-ban-background: #F33;
 
-  --tag-count-color: #CCC;
+  --tag-count-color: var(--muted-text-color);
   --low-post-count-color: red;
 
   --tag-count-indicator-frown-color: red;
@@ -145,12 +147,6 @@
   --ugoira-seek-slider-background: #EEE;
   --ugoira-seek-slider-progressbar-background: white;
 
-  // used for "(deleted)" messages
-  --inactive-color: #AAA;
-
-  // used for "page N" links in /forum_topics and /pools
-  --last-page-link-color: #666;
-
   --keyboard-shortcut-color: white;
   --keyboard-shortcut-background-color: #333;
 

app/javascript/src/styles/common/inline.scss

@@ -25,10 +25,12 @@ kbd.key {
   border-radius: 3px;
 }
 
+/* used for "(deleted)" messages */
 span.inactive {
-  color: var(--inactive-color);
+  color: var(--muted-text-color);
 }
 
+/* used for "page N" links in /forum_topics and /pools */
 td a.last-page {
-  color: var(--last-page-link-color);
+  color: var(--muted-text-color);
 }

app/javascript/src/styles/common/tables.scss

@@ -25,7 +25,6 @@ table.striped {
     th {
       font-weight: bold;
       text-align: left;
-      color: var(--table-header-text-color);
     }
   }
 

app/javascript/src/styles/specific/forum.scss

@@ -64,7 +64,7 @@ div#c-forum-topics {
   }
 
   span.locked-topic {
-    color: var(--forum-locked-topic-color);
+    color: var(--muted-text-color);
   }
 
   span.level-topic {
@@ -81,7 +81,7 @@ div#c-forum-topics {
   tr[data-topic-is-deleted="true"] .forum-post-topic-title::after,
   tr[data-is-deleted="true"] .forum-post-excerpt::after {
     content: " (deleted)";
-    color: var(--forum-deleted-topic-color);
+    color: var(--muted-text-color);
   }
 }
 

app/javascript/src/styles/specific/posts.scss

@@ -395,10 +395,6 @@ div#c-posts {
         max-height: 20em;
         overflow-y: auto;
       }
-
-      .disabled {
-        color: var(--post-artist-commentary-disabled-color);
-      }
     }
   }
 
@@ -425,7 +421,7 @@ div#c-posts, div#c-uploads {
     border-radius: 4px;
     margin: 1em 0;
     padding: 1em;
-    border: 1px solid var(--fetch-source-data-border-color);
+    border: var(--fetch-source-data-border);
 
     &:not(.loading) #source-info-loading { display: none; }
     &.loading #source-info-content { display: none; }

app/javascript/src/styles/specific/users.scss

@@ -1,10 +1,6 @@
 div#c-users {
   div#a-show {
     div.box {
-      h2, h3 {
-        color: var(--profile-page-header-color);
-      }
-
       margin-bottom: 2em;
     }
 
@@ -55,7 +51,7 @@ div#c-users {
     }
 
     .active {
-      color: var(--settings-page-active-tab-color);
+      color: var(--text-color);
     }
   }
 

app/views/artist_commentaries/_show.html.erb

@@ -26,14 +26,14 @@
       <% if artist_commentary.translated_title.present? %>
         <%= artist_commentary.translated_title %>
       <% else %>
-        <span class="disabled"><%= artist_commentary.original_title %></span>
+        <span class="inactive"><%= artist_commentary.original_title %></span>
       <% end %>
     </h3>
     <div class="prose">
       <% if artist_commentary.translated_description.present? %>
         <%= format_text(artist_commentary.translated_description, :disable_mentions => true) %>
       <% else %>
-        <span class="disabled"><%= format_text(artist_commentary.original_description, :disable_mentions => true) %></span>
+        <span class="inactive"><%= format_text(artist_commentary.original_description, :disable_mentions => true) %></span>
       <% end %>
     </div>
   </section>