UX: Make button icons use lighter color instead of opacity

app/assets/javascripts/admin/templates/logs/screened-ip-addresses.hbs

@@ -78,11 +78,10 @@
           <td class="col actions">
             {{#unless item.editing}}
               {{d-button
-                class="btn-default"
+                class="btn-default btn-danger"
                 action=(action "destroy")
                 actionParam=item
-                icon="far-trash-alt"
+                icon="far-trash-alt"}}
-                class="btn-danger"}}
               {{d-button
                 class="btn-default"
                 action=(action "edit")

app/assets/javascripts/discourse/controllers/history.js.es6

@@ -199,17 +199,17 @@ export default Ember.Controller.extend(ModalFunctionality, {
 
   @computed("displayingInline")
   inlineClass(displayingInline) {
-    return displayingInline ? "btn-primary" : "";
+    return displayingInline ? "btn-danger" : "btn-flat";
   },
 
   @computed("displayingSideBySide")
   sideBySideClass(displayingSideBySide) {
-    return displayingSideBySide ? "btn-primary" : "";
+    return displayingSideBySide ? "btn-danger" : "btn-flat";
   },
 
   @computed("displayingSideBySideMarkdown")
   sideBySideMarkdownClass(displayingSideBySideMarkdown) {
-    return displayingSideBySideMarkdown ? "btn-primary" : "";
+    return displayingSideBySideMarkdown ? "btn-danger" : "btn-flat";
   },
 
   @computed("model.category_id_changes")

app/assets/stylesheets/common/admin/customize.scss

@@ -137,6 +137,10 @@
     display: inline-block;
     vertical-align: top;
 
+    .btn {
+      line-height: $line-height-medium; // Temporary button-height fix
+    }
+
     .title {
       font-size: $font-up-4;
       font-weight: bold;

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

@@ -98,7 +98,7 @@
     display: flex;
     align-items: center;
     .d-icon {
-      color: $primary-high;
+      color: $primary-medium;
     }
     .reply-details {
       max-width: calc(100% - 175px);

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

@@ -100,10 +100,6 @@
     width: 2.2857em;
     height: 2.2857em;
     padding: 0.2143em;
-    color: dark-light-choose(
-      scale-color($header_primary, $lightness: 50%),
-      $header_primary
-    );
     text-decoration: none;
     cursor: pointer;
     border-top: 1px solid transparent;
@@ -117,7 +113,6 @@
     }
     &:hover,
     &:focus {
-      color: $primary;
       background-color: $primary-low;
       border-top: 1px solid transparent;
       border-left: 1px solid transparent;
@@ -131,13 +126,14 @@
   .drop-down-mode & {
     .active .icon {
       position: relative;
-      color: #7b7b7b;
       background-color: $secondary;
       cursor: default;
       border-top: 1px solid $primary-low;
       border-left: 1px solid $primary-low;
       border-right: 1px solid $primary-low;
-
+      .d-icon {
+        color: $primary-medium;
+      }
       &:after {
         display: block;
         position: absolute;
@@ -160,6 +156,7 @@
     font-size: $font-up-4;
     line-height: $line-height-large;
     display: inline-block;
+    color: $header_primary-low-mid;
   }
   .notifications {
     position: relative;

app/assets/stylesheets/common/base/menu-panel.scss

@@ -153,11 +153,12 @@
       margin: 0.5em 0;
     }
 
-    .fa {
+    .d-icon,
-      color: dark-light-choose($primary-medium, $secondary-medium);
+    &:hover .d-icon {
+      color: $primary-medium;
     }
     .icon {
-      color: dark-light-choose($primary-high, $secondary-low);
+      color: $primary-high;
     }
     li {
       background-color: $tertiary-low;

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

@@ -318,6 +318,9 @@
 .d-modal-cancel {
   margin-left: 1em;
   color: $primary-medium;
+  &:hover {
+    color: $danger;
+  }
 }
 
 .delete-user-modal {

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

@@ -17,7 +17,9 @@
   transition: all 0.25s;
   box-sizing: border-box;
   min-height: 30px;
-
+  .d-icon {
+    transition: color 0.25s;
+  }
   &:active,
   &.btn-active {
     text-shadow: none;
@@ -49,6 +51,9 @@
   color: $primary;
   font-weight: normal;
   background: $primary-low;
+  .d-icon {
+    color: $primary-high;
+  }
 
   &[href] {
     color: $primary;
@@ -60,24 +65,29 @@
     &.btn-hover {
       background: $primary-medium;
       color: $secondary;
+      .d-icon {
+        color: $secondary-very-high;
+      }
     }
   }
   &[disabled],
   &.disabled {
     background: $primary-low;
+    .d-icon {
+      color: $primary-medium;
+    }
     &:hover {
       color: dark-light-choose($primary-low-mid, $secondary-high);
+      .d-icon {
+        color: $primary-low-mid;
+      }
     }
     cursor: not-allowed;
   }
 
   .d-icon {
-    opacity: 0.7;
     line-height: $line-height-medium; // Match button text line-height
   }
-  &.btn-primary .d-icon {
-    opacity: 1;
-  }
 }
 
 // Primary button
@@ -88,7 +98,9 @@
   font-weight: normal;
   color: $secondary;
   background: $tertiary;
-
+  .d-icon {
+    color: currentColor;
+  }
   &[href] {
     color: $secondary;
   }
@@ -100,6 +112,9 @@
         scale-color($tertiary, $lightness: -20%),
         scale-color($tertiary, $lightness: 20%)
       );
+      .d-icon {
+        color: currentColor;
+      }
     }
   }
   &:active,
@@ -112,6 +127,9 @@
   &[disabled],
   &.disabled {
     background: $tertiary;
+    .d-icon {
+      color: currentColor;
+    }
   }
 }
 
@@ -122,6 +140,9 @@
   color: $secondary;
   font-weight: normal;
   background: $danger;
+  .d-icon {
+    color: $danger-low;
+  }
   &[href] {
     color: $secondary;
   }
@@ -133,6 +154,9 @@
         scale-color($danger, $lightness: -20%),
         scale-color($danger, $lightness: 20%)
       );
+      .d-icon {
+        color: $danger-low;
+      }
     }
   }
   &:active,
@@ -142,6 +166,9 @@
   &[disabled],
   &.disabled {
     background: $danger;
+    .d-icon {
+      color: $danger-low;
+    }
   }
 }
 
@@ -214,7 +241,13 @@
   border: 0;
   outline: 0;
   line-height: $line-height-small;
+  transition: color .25s, background .25s;
   .d-icon {
-    opacity: 0.7;
+    color: $primary-low-mid;
+  }
+  &:hover {
+    .d-icon {
+      color: $primary;
+    }
   }
 }

app/assets/stylesheets/common/d-editor.scss

@@ -82,9 +82,11 @@
   .btn,
   .btn-default {
     background-color: transparent;
-    color: $primary-high;
     padding: 4px 8px;
     display: inline-block;
+    .d-icon {
+      color: $primary-medium;
+    }
     @media all and (max-width: 800px) {
       padding: 5px;
     }

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

@@ -203,9 +203,12 @@ $primary-low: dark-light-diff($primary, $secondary, 90%, -78%);
 $primary-low-mid: dark-light-diff($primary, $secondary, 70%, -45%);
 $primary-medium: dark-light-diff($primary, $secondary, 50%, -35%);
 $primary-high: dark-light-diff($primary, $secondary, 30%, -25%);
+$primary-very-high: dark-light-diff($primary, $secondary, 15%, -10%);
 
 //header_primary
 $header_primary-low: dark-light-diff($header_primary, $secondary, 90%, -78%);
+$header_primary-low-mid: dark-light-diff($primary, $secondary, 70%, -45%);
+
 $header_primary-medium: dark-light-diff($header_primary, $secondary, 50%, -35%);
 $header_primary-high: dark-light-diff(
   $header_primary,
@@ -213,11 +216,18 @@ $header_primary-high: dark-light-diff(
   30%,
   -25%
 );
+$header_primary-very-high: dark-light-diff(
+  $header_primary,
+  $header_background,
+  15%,
+  -10%
+);
 
 //secondary
 $secondary-low: dark-light-diff($secondary, $primary, 70%, -70%);
 $secondary-medium: dark-light-diff($secondary, $primary, 50%, -50%);
 $secondary-high: dark-light-diff($secondary, $primary, 30%, -35%);
+$secondary-very-high: dark-light-diff($secondary, $primary, 7%, -7%);
 
 //tertiary
 $tertiary-low: dark-light-diff($tertiary, $secondary, 85%, -65%);

app/assets/stylesheets/common/select-kit/select-kit.scss

@@ -55,7 +55,7 @@
   }
 
   .d-icon {
-    opacity: 0.7;
+    color: $primary-high;
   }
 
   .select-kit-header {

app/assets/stylesheets/desktop/history.scss

@@ -20,15 +20,6 @@
     text-align: right;
     display: inline-block;
     float: right;
-
-    .btn {
-      background-color: inherit;
-      color: blend-primary-secondary(50%);
-    }
-    .btn-primary {
-      color: $primary;
-      font-weight: bold;
-    }
   }
 
   #revisions {

app/assets/stylesheets/desktop/topic-post.scss

@@ -23,7 +23,7 @@
   .actions .fade-out {
     .discourse-no-touch & {
       opacity: 0.7;
-      transition: opacity 0.7s ease-in-out;
+      transition: background 0.25s, opacity 0.7s ease-in-out;
     }
     .discourse-touch & {
       opacity: 1;
@@ -65,6 +65,9 @@ nav.post-controls {
       .d-hover {
         background: none;
       }
+      .d-icon {
+        color: $love;
+      }
     }
     &:active {
       box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
@@ -146,6 +149,9 @@ nav.post-controls {
     margin-right: 0;
     color: dark-light-choose($primary-high, $secondary-low);
     margin-left: 10px;
+    .d-icon {
+      color: dark-light-choose($primary-high, $secondary-low);
+    }
   }
   .create .d-icon {
     margin-right: 5px;
@@ -172,16 +178,23 @@ nav.post-controls {
       position: relative;
     }
     &.delete.d-hover,
+    &.delete:hover,
     &.delete:focus {
       background: $danger;
       color: $secondary;
+      .d-icon {
+        color: $secondary;
+      }
     }
     &.like.d-hover,
     &.like:focus {
       color: $love;
       background: $love-low;
+      .d-icon {
+        color: $love;
+      }
     }
-    &.has-like {
+    &.has-like .d-icon {
       color: $love;
     }
     &.has-like[disabled]:hover {
@@ -192,7 +205,7 @@ nav.post-controls {
     }
     &.bookmark {
       padding: 8px 11px;
-      &.bookmarked {
+      &.bookmarked .d-icon {
         color: $tertiary;
       }
     }
@@ -364,7 +377,8 @@ nav.post-controls {
       font-size: $font-up-2;
       line-height: $line-height-medium;
     }
-    button .d-icon {
+    button .d-icon,
+    button:hover .d-icon {
       color: $primary-high;
     }
     .avatar a {