DEV: More color transformation refactoring

app/assets/stylesheets/common/base/code_highlighting.scss

@@ -7,12 +7,12 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
 .hljs {
   display: block;
   padding: 0.5em;
-  color: dark-light-choose(#333, #f8f8f8);
+  color: $primary-very-high;
 }
 
 .hljs-comment,
 .hljs-doctag {
-  color: dark-light-choose(#998, #bba);
+  color: $hljs-comment;
   font-style: italic;
 }
 
@@ -22,26 +22,26 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
 .hljs-subst,
 .hljs-request,
 .hljs-status {
-  color: dark-light-choose(#333, #f8f8f8);
+  color: $primary-very-high;
   font-weight: bold;
 }
 
 .hljs-number,
 .ruby .hljs-constant {
-  color: dark-light-choose(#099, #aff);
+  color: $hljs-number;
 }
 
 .hljs-string,
 .hljs-tag .hljs-string,
 .tex .hljs-formula {
-  color: dark-light-choose(#d14, #f99);
+  color: $hljs-string;
 }
 
 .hljs-title,
 .hljs-name,
 .coffeescript .hljs-params,
 .scss .hljs-meta {
-  color: dark-light-choose(#d14, #f99);
+  color: $hljs-string;
   font-weight: bold;
 }
 
@@ -56,14 +56,14 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
 .haskell .hljs-type,
 .vhdl .hljs-literal,
 .tex .hljs-command {
-  color: dark-light-choose(#458, #9ae);
+  color: $hljs-literal;
   font-weight: bold;
 }
 
 .hljs-tag,
 .hljs-tag .hljs-title,
 .django .hljs-tag .hljs-keyword {
-  color: dark-light-choose(#000080, #99f);
+  color: $hljs-tag;
   font-weight: normal;
 }
 
@@ -71,7 +71,7 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
 .css .hljs-keyword,
 .hljs-variable,
 .lisp .hljs-body {
-  color: dark-light-choose(#008080, #0ee);
+  color: $hljs-attribute;
 }
 
 .hljs-regexp {
@@ -83,7 +83,7 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
 .lisp .hljs-keyword,
 .tex .hljs-special,
 .hljs-prompt {
-  color: dark-light-choose(#990073, #fbe);
+  color: $hljs-symbol;
 }
 
 .hljs-built_in,
@@ -119,8 +119,8 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
 p > code,
 li > code,
 pre > code {
-  color: dark-light-choose(#333, #f8f8f8);
+  color: $primary-very-high;
-  background: dark-light-choose(#f8f8f8, #333);
+  background: $hljs-bg;
 }
 
 // removed some unnecessary styles here

app/assets/stylesheets/common/base/header.scss

@@ -200,7 +200,7 @@
   .unread-notifications {
     left: auto;
     right: -3px;
-    background-color: dark-light-choose($tertiary-medium, $tertiary);
+    background-color: $tertiary-med-or-tertiary;
   }
   .unread-high-priority-notifications,
   .ring {

app/assets/stylesheets/common/base/onebox.scss

@@ -372,7 +372,7 @@ pre.onebox code ol.lines li {
 }
 
 pre.onebox code li.selected {
-  background-color: dark-light-choose(#f8eec7, #541);
+  background-color: $highlight-low-or-medium;
 }
 
 pre.onebox code {

app/assets/stylesheets/common/base/reviewables.scss

@@ -227,7 +227,7 @@
 
 .reviewable-item {
   padding-top: 2em;
-  border-top: 1px solid dark-light-choose($primary-low, $secondary-low);
+  border-top: 1px solid $primary-low;
 
   .topic-statuses {
     font-size: $font-up-2;

app/assets/stylesheets/common/base/share_link.scss

@@ -49,15 +49,15 @@
     margin-right: 8px;
     font-size: $font-up-4;
     .d-icon {
-      color: dark-light-choose($tertiary, white);
+      color: $tertiary-or-white;
     }
     .d-icon-fab-facebook {
       // Adheres to Facebook brand guidelines
-      color: dark-light-choose($facebook, white);
+      color: $facebook-or-white;
     }
     .d-icon-fab-twitter-square {
       // Adheres to Twitter brand guidelines
-      color: dark-light-choose($twitter, white);
+      color: $twitter-or-white;
     }
   }
 

app/assets/stylesheets/common/base/tagging.scss

@@ -61,11 +61,9 @@
   }
 }
 
-$tag-color: $primary-medium;
-
 .discourse-tag-count {
   font-size: $font-down-1;
-  color: $tag-color;
+  color: $primary-medium;
   line-height: $line-height-small;
   vertical-align: middle;
 }
@@ -79,11 +77,11 @@ $tag-color: $primary-medium;
 
 .discourse-tag {
   margin: 0;
-  color: $tag-color;
+  color: $primary-medium;
 
   &:visited,
   &:hover {
-    color: $tag-color;
+    color: $primary-medium;
   }
 
   .extra-info-wrapper & {
@@ -181,7 +179,7 @@ $tag-color: $primary-medium;
 }
 
 header .discourse-tag {
-  color: $tag-color;
+  color: $primary-medium;
 }
 
 .list-tags {
@@ -210,13 +208,14 @@ header .discourse-tag {
 }
 
 .autocomplete {
-  .d-icon-tag {
+  a {
-    color: dark-light-choose($primary, $primary-low-mid);
+    color: $primary-medium;
-    padding-right: 5px;
   }
 
-  a {
+  .d-icon-tag {
-    color: $tag-color;
+    padding-right: 5px;
+    vertical-align: middle;
+    height: 0.9em;
   }
 }
 

app/assets/stylesheets/common/base/topic-post.scss

@@ -307,7 +307,7 @@ blockquote {
   .btn:hover,
   .d-icon,
   .btn:hover .d-icon {
-    color: dark-light-choose($secondary, $primary);
+    color: $secondary-or-primary;
   }
 
   .insert-quote + .quote-sharing {
@@ -693,8 +693,8 @@ pre {
 
 kbd {
   align-items: center;
-  background: dark-light-choose(#fafafa, #303030);
+  border: 1px solid $primary-low-mid;
-  border: 1px solid dark-light-choose(#d0d0d0, #505050);
+  background: $primary-very-low;
   border-bottom-width: 2px;
   border-radius: 3px;
   box-sizing: border-box;

app/assets/stylesheets/common/components/badges.scss

@@ -169,7 +169,7 @@
   font-size: $font-down-2;
   line-height: $line-height-small;
   text-align: center;
-  background-color: dark-light-choose($primary-low-mid, $secondary-low);
+  background-color: $primary-low-mid-or-secondary-low;
   &[href] {
     color: $secondary;
   }
@@ -182,7 +182,7 @@
 
   &.new-posts,
   &.unread-posts {
-    background-color: dark-light-choose($tertiary-medium, $tertiary);
+    background-color: $tertiary-med-or-tertiary;
     color: $secondary;
     font-weight: dark-light-choose(normal, bold);
   }

app/assets/stylesheets/common/components/hashtag.scss

@@ -1,10 +1,10 @@
 a.hashtag {
-  color: dark-light-choose($primary, $primary-low-mid);
+  color: $primary-or-primary-low-mid;
   font-weight: bold;
 
   &:visited,
   &:hover {
-    color: dark-light-choose($primary, $primary-low-mid);
+    color: $primary-or-primary-low-mid;
   }
 
   &:hover {

app/assets/stylesheets/common/foundation/color_transformations.scss

@@ -91,21 +91,63 @@ $blend-primary-secondary-5: blend-primary-secondary(5%) !default;
 $primary-med-or-secondary-med: dark-light-choose(
   $primary-medium,
   $secondary-medium
-);
+) !default;
 
 $primary-med-or-secondary-high: dark-light-choose(
   $primary-medium,
   $secondary-high
-);
+) !default;
 
 $primary-high-or-secondary-low: dark-light-choose(
   $primary-high,
   $secondary-low
-);
+) !default;
 
 $primary-low-mid-or-secondary-high: dark-light-choose(
   $primary-low-mid,
   $secondary-high
-);
+) !default;
 
-$highlight-low-or-medium: dark-light-choose($highlight-low, $highlight-medium);
+$primary-low-mid-or-secondary-low: dark-light-choose(
+  $primary-low-mid,
+  $secondary-low
+) !default;
+
+$primary-or-primary-low-mid: dark-light-choose(
+  $primary,
+  $primary-low-mid
+) !default;
+
+$highlight-low-or-medium: dark-light-choose(
+  $highlight-low,
+  $highlight-medium
+) !default;
+
+$tertiary-low-or-tertiary-high: dark-light-choose(
+  $tertiary-low,
+  $tertiary-high
+) !default;
+
+$tertiary-med-or-tertiary: dark-light-choose(
+  $tertiary-medium,
+  $tertiary
+) !default;
+
+$secondary-or-primary: dark-light-choose($secondary, $primary) !default;
+
+$tertiary-or-white: dark-light-choose($tertiary, unquote("#fff")) !default;
+$facebook-or-white: dark-light-choose($facebook, unquote("#fff")) !default;
+$twitter-or-white: dark-light-choose($twitter, unquote("#fff")) !default;
+
+// code highlighting
+$hljs-comment: dark-light-choose(unquote("#998"), unquote("#bba")) !default;
+$hljs-number: dark-light-choose(unquote("#099"), unquote("#aff")) !default;
+$hljs-string: dark-light-choose(unquote("#d14"), unquote("#f99")) !default;
+$hljs-literal: dark-light-choose(unquote("#458"), unquote("#9ae")) !default;
+$hljs-tag: dark-light-choose(unquote("#000080"), unquote("#99f")) !default;
+$hljs-attribute: dark-light-choose(
+  unquote("#008080"),
+  unquote("#0ee")
+) !default;
+$hljs-symbol: dark-light-choose(unquote("#990073"), unquote("#fbe")) !default;
+$hljs-bg: dark-light-choose(unquote("#f8f8f8"), unquote("#333")) !default;

app/assets/stylesheets/common/topic-timeline.scss

@@ -57,7 +57,7 @@
     bottom: 0;
     left: 0;
     right: 0;
-    border-top: 1px solid dark-light-choose($primary-low, $secondary-low);
+    border-top: 1px solid $primary-low;
     box-shadow: shadow("composer");
     padding: 20px 0px;
     z-index: z("fullscreen");
@@ -204,7 +204,7 @@
       margin-top: 0.5em;
       margin-left: 0.5em;
       border-left: 1px solid;
-      border-color: dark-light-choose($tertiary-low, $tertiary-high);
+      border-color: $tertiary-low-or-tertiary-high;
       position: relative;
       -webkit-transform: translate3d(0, 0, 0);
     }
@@ -220,7 +220,7 @@
     .timeline-handle {
       border-radius: 0.8em;
       width: 0.35em;
-      background-color: dark-light-choose($tertiary-low, $tertiary-high);
+      background-color: $tertiary-low-or-tertiary-high;
       height: 100%;
       float: left;
       z-index: z("base") + 1;

app/assets/stylesheets/desktop/header.scss

@@ -37,7 +37,7 @@
 }
 
 .search-link .blurb {
-  color: dark-light-choose($primary-high, $secondary-medium);
+  color: $secondary-medium;
   display: block;
   word-wrap: break-word;
   font-size: $font-down-2;

app/assets/stylesheets/mobile/components/user-stream-item.scss

@@ -6,10 +6,7 @@
 
   .notification {
     &.unread {
-      background-color: dark-light-choose(
+      background-color: $tertiary-low;
-        $tertiary-low,
-        srgb-scale($tertiary, $secondary, 15%)
-      );
     }
   }
 

app/assets/stylesheets/mobile/topic-list.scss

@@ -382,7 +382,6 @@ tr.category-topic-link {
     figure {
       float: left;
       margin: 3px 7px 0 0;
-      color: dark-light-choose($primary, $secondary-low);
       font-weight: bold;
       font-size: $font-down-1;
     }