FEATURE: WCAG compliant color schemes (#10882)

FEATURE: WCAG compliant color schemes (#10882)

Co-authored-by: Kris kris.aubuchon@discourse.org

diff --git a/app/assets/stylesheets/wcag.scss b/app/assets/stylesheets/wcag.scss
new file mode 100644
index 0000000..ade65af
--- /dev/null
+++ b/app/assets/stylesheets/wcag.scss
@@ -0,0 +1,307 @@
+// Overrides for WCAG color schemes only
+
+// Global
+
+::placeholder {
+  color: var(--primary-medium);
+  opacity: 1;
+}
+
+.discourse-no-touch {
+  .btn-default,
+  .btn-icon {
+    &.btn-default {
+      .d-icon {
+        color: var(--primary-medium);
+      }
+    }
+    &:hover,
+    &.btn-hover {
+      .d-icon {
+        color: var(--secondary);
+      }
+    }
+  }
+  .btn-primary .d-icon {
+    color: var(--secondary);
+  }
+  .btn-icon.ok,
+  .btn-icon.cancel,
+  .btn-danger {
+    .d-icon {
+      color: var(--secondary);
+    }
+  }
+  .btn-flat.delete.d-hover {
+    background: var(--danger);
+  }
+}
+
+.nav-pills > li > a:not(.active):hover {
+  background: var(--tertiary-low);
+  color: var(--primary);
+}
+
+// Composer
+
+#reply-control .reply-to .reply-details .d-icon {
+  opacity: 1;
+  color: var(--primary-low-mid);
+}
+
+.d-editor-button-bar {
+  .btn-icon.btn-default .d-icon {
+    color: var(--primary-low-mid);
+    .discourse-no-touch & {
+      &:hover {
+        color: var(--secondary);
+      }
+    }
+  }
+}
+
+// Site header
+
+.menu-panel li a.widget-link:hover,
+.menu-panel li a.widget-link:focus,
+.menu-panel li.heading a.widget-link:hover,
+.menu-panel li.heading a.widget-link:focus {
+  color: var(--primary);
+  background-color: var(--highlight-medium);
+  .d-icon {
+    color: var(--primary);
+  }
+}
+
+.menu-panel .panel-body-bottom .btn:hover {
+  .d-icon {
+    color: var(--primary);
+  }
+}
+
+.d-header-icons .d-icon {
+  color: var(--primary-low-mid);
+}
+
+.d-header-icons .icon:hover .d-icon,
+.d-header-icons .icon:focus .d-icon {
+  color: var(--primary-high);
+}
+
+.d-header-icons .unread-notifications {
+  background: var(--tertiary);
+}
+
+// Topic list
+
+table th {
+  color: var(--primary-medium);
+}
+
+.coldmap {
+  &-high {
+    color: #6c77cc !important;
+  }
+
+  &-med {
+    color: #548eaa !important;
+  }
+
+  &-low {
+    color: #32a1a5 !important;
+  }
+}
+
+.heatmap-high,
+.heatmap-high a {
+  color: #dc3249 !important;
+}
+.heatmap-med,
+.heatmap-med a {
+  color: #ae5b54 !important;
+}
+.heatmap-low,
+.heatmap-low a {
+  color: #8f6d5b !important;
+}
+
+.badge-notification {
+  background: var(--primary-medium);
+}
+
+.badge-notification.new-posts,
+.badge-notification.unread-posts {
+  background: var(--tertiary);
+}
+.select-kit.dropdown-select-box.period-chooser
+  .period-chooser-header
+  h2.selected-name
+  .top-date-string,
+.select-kit.dropdown-select-box.period-chooser
+  .period-chooser-row
+  .top-date-string {
+  color: var(--primary-high);
+}
+
+// Posts
+
+.discourse-no-touch .topic-body .actions .fade-out {
+  opacity: 1;
+}
+
+.topic-body .reply-to-tab {
+  color: var(--primary-medium);
+  .d-icon {
+    color: var(--primary-low-mid);
+  }
+}
+
+.timeline-container .topic-timeline {
+  .timeline-scrollarea {
+    border-color: var(--primary-low-mid);
+  }
+  .timeline-handle {
+    background: var(--primary-low-mid);
+  }
+}
+
+.topic-map h4 {
+  color: var(--primary);
+}
+
+.quote-controls,
+.quote-controls .d-icon {
+  color: var(--primary-medium);
+}
+
+blockquote {
+  a,
+  a:visited {
+    color: var(--tertiary);
+  }
+}
+.meta .d-icon + .filename,
+.meta .informations {
+  color: var(--secondary);
+}
+
+#topic-footer-buttons .bookmark.bookmarked:hover .d-icon-bookmark {
+  color: var(--secondary);
+}
+
+.gap {
+  color: var(--primary-medium);
+}
+
+.badge-notification.clicks {
+  color: var(--primary-high);
+}
+
+.topic-map {
+  background: transparent;
+}
+
+// Post controls
+
+nav.post-controls {
+  // this is a bit tedious
+  a,
+  button {
+    color: var(--primary-medium);
+    .d-icon {
+      color: var(--primary-low-mid);
+    }
+    .discourse-no-touch & {
+      &:hover {
+        color: var(--secondary);
+        background: var(--primary-medium);
+        .d-icon {
+          color: var(--secondary);
+        }
+      }
+    }
+    &:focus {
+      background: var(--primary-medium);
+    }
+  }
+  .discourse-no-touch & {
+    .double-button:hover {
+      button {
+        background: var(--primary-medium);
+        color: var(--secondary);
+        .d-icon {
+          color: var(--secondary);
+        }
+        &.has-like {
+          .d-icon {
+            color: var(--secondary);
+          }
+        }
+      }
+    }
+  }
+  button.bookmark.bookmarked.d-hover .d-icon {
+    color: var(--secondary);
+  }
+  .double-button button.button-count + .toggle-like.d-hover {
+    background: var(--primary-medium);
+    .d-icon {
+      color: var(--love-low);
+    }
+  }
+  .discourse-no-touch & {
+    .double-button button.button-count.d-hover {
+      background: var(--primary-medium);
+      color: var(--secondary);
+    }
+  }
+  button.create {
+    .d-icon {
+      color: var(--primary-low-mid);
+    }
+    &.d-hover {
+      color: var(--secondary);
+      .d-icon {
+        color: var(--secondary);
+      }
+    }
+  }
+  .actions a,
+  .actions button {
+    color: var(--primary-medium);
+  }
+}
+
+nav.post-controls
+  .actions
+  .double-button
+  button.button-count
+  + .toggle-like.d-hover {
+  background: var(--primary-medium);
+}
+
+.topic-admin-menu-button-container,
+.timeline-controls {
+  .btn .d-icon {
+    // admin wrenches
+    color: var(--primary-medium);
+  }
+}
+
+// Categories
+
+.list-cell,
+.table-heading,
+.category-list td,
+.category-list th {
+  color: var(--primary-medium);
+}
+
+// Admin
+
+.admin-controls {
+  .nav-pills > li > a:not(.active):hover {
+    background: var(--primary-medium);
+    color: var(--secondary);
+  }
+}
diff --git a/app/models/color_scheme.rb b/app/models/color_scheme.rb
index 6632872..19a88cc 100644
--- a/app/models/color_scheme.rb
+++ b/app/models/color_scheme.rb
@@ -94,6 +94,37 @@ class ColorScheme < ActiveRecord::Base
       "danger" =>            '6c3e63',
       "success" =>           'd9b2bb',
       "love" =>              'd9b2bb'
+    },
+    "WCAG": {
+      "primary" =>           '000000',
+      "primary-medium" =>    '696969',
+      "primary-low-mid" =>   '909090',
+      "secondary" =>         'ffffff',
+      "tertiary" =>          '3369FF',
+      "quaternary" =>        '3369FF',
+      "header_background" => 'ffffff',
+      "header_primary" =>    '000000',
+      "highlight" =>         '3369FF',
+      "highlight-high" =>    '0036E6',
+      "highlight-medium" =>  'e0e9ff',
+      "highlight-low" =>     'e0e9ff',
+      "danger" =>            'BB1122',
+      "success" =>           '3d854d',
+      "love" =>              '9D256B'
+    },
+    "WCAG Dark": {
+      "primary" =>           'ffffff',
+      "primary-medium" =>    '999999',
+      "primary-low-mid" =>   '888888',
+      "secondary" =>         '0c0c0c',
+      "tertiary" =>          '759AFF',
+      "quaternary" =>        '759AFF',
+      "header_background" => '000000',
+      "header_primary" =>    'ffffff',
+      "highlight" =>         '3369FF',
+      "danger" =>            'BB1122',
+      "success" =>           '3d854d',
+      "love" =>              '9D256B'
     }
   }
 
@@ -307,6 +338,10 @@ class ColorScheme < ActiveRecord::Base
     primary_b > secondary_b
   end
 
+  def is_wcag?
+    base_scheme_id&.start_with?('WCAG')
+  end
+
   # Equivalent to dc-color-brightness() in variables.scss
   def brightness(color)
     rgb = color.scan(/../).map { |c| c.to_i(16) }
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 0f5ed52..3ab9841 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -4058,6 +4058,12 @@ en:
           primary:
             name: "primary"
             description: "Most text, icons, and borders."
+          primary-medium:
+            name: "primary-medium"
+            description: ""
+          primary-low-mid:

[... diff too long, it was truncated ...]

GitHub sha: 57633099

This commit appears in #10882 which was approved by awesomerobot. It was merged by pmusaraj.