UX: Globally dim categories slightly

UX: Globally dim categories slightly
From 050c02228e2ce680554159d1d7d4d35e4f795a95 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Fri, 7 Dec 2018 20:01:38 -0500
Subject: [PATCH] UX: Globally dim categories slightly


diff --git a/app/assets/stylesheets/common/base/_topic-list.scss b/app/assets/stylesheets/common/base/_topic-list.scss
index a55d1e0..4cb6257 100644
--- a/app/assets/stylesheets/common/base/_topic-list.scss
+++ b/app/assets/stylesheets/common/base/_topic-list.scss
@@ -50,9 +50,6 @@
   a.title:not(.badge-notification) {
     color: $primary-medium;
   }
-  a.badge-wrapper {
-    opacity: 0.6;
-  }
 }
 
 .topic-list-main-link {
@@ -136,6 +133,10 @@
 
   .link-bottom-line {
     font-size: $font-down-1;
+    a.badge-wrapper.box {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
   }
 
   .topic-featured-link {
diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss
index a46b3f3..732f06d 100644
--- a/app/assets/stylesheets/common/base/header.scss
+++ b/app/assets/stylesheets/common/base/header.scss
@@ -264,12 +264,22 @@
       min-width: 5px;
     }
   }
+  .badge-wrapper {
+    &.bullet,
+    &.bar,
+    &.none {
+      span.badge-category {
+        color: $header_primary-high;
+      }
+    }
+  }
   .topic-header-extra {
     display: inline-flex;
     align-items: center;
     max-width: 100%;
     flex: 1 0 0%; // unit on flex-basis is required for IE11
     .discourse-tags {
+      color: $header_primary-high;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
diff --git a/app/assets/stylesheets/common/base/tagging.scss b/app/assets/stylesheets/common/base/tagging.scss
index 122f694..e85e138 100644
--- a/app/assets/stylesheets/common/base/tagging.scss
+++ b/app/assets/stylesheets/common/base/tagging.scss
@@ -80,7 +80,7 @@ $tag-color: $primary-medium;
   }
 
   .extra-info-wrapper & {
-    color: $header-primary !important;
+    color: $header-primary_high !important;
   }
 
   &.box {
diff --git a/app/assets/stylesheets/common/components/badges.scss b/app/assets/stylesheets/common/components/badges.scss
index 2a8df08..d86e14d 100644
--- a/app/assets/stylesheets/common/components/badges.scss
+++ b/app/assets/stylesheets/common/components/badges.scss
@@ -42,7 +42,7 @@
   &.bullet {
     margin-right: 12px;
     span.badge-category {
-      color: $primary;
+      color: $primary-high;
       overflow: hidden;
       text-overflow: ellipsis;
       .extra-info-wrapper & {
@@ -114,7 +114,7 @@
     margin-right: 5px;
 
     span.badge-category {
-      color: $primary;
+      color: $primary-high;
       padding: 1px 3px;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -139,7 +139,7 @@
   // ----- No category style
 
   &.none {
-    color: $primary;
+    color: $primary-high;
     margin-right: 5px;
   }
 }
diff --git a/app/assets/stylesheets/common/foundation/variables.scss b/app/assets/stylesheets/common/foundation/variables.scss
index 7ddc1e1..f7a26de 100644
--- a/app/assets/stylesheets/common/foundation/variables.scss
+++ b/app/assets/stylesheets/common/foundation/variables.scss
@@ -204,7 +204,12 @@ $primary-high: dark-light-diff($primary, $secondary, 30%, -10%);
 //header_primary
 $header_primary-low: dark-light-diff($header_primary, $secondary, 90%, -65%);
 $header_primary-medium: dark-light-diff($header_primary, $secondary, 50%, -20%);
-$header_primary-high: dark-light-diff($header_primary, $secondary, 20%, 20%);
+$header_primary-high: dark-light-diff(
+  $header_primary,
+  $header_background,
+  30%,
+  -10%
+);
 
 //secondary
 $secondary-low: dark-light-diff($secondary, $primary, 70%, -70%);
diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss
index b706e4b..49cc6f9 100644
--- a/app/assets/stylesheets/mobile/topic-list.scss
+++ b/app/assets/stylesheets/mobile/topic-list.scss
@@ -208,10 +208,6 @@
     }
   }
 
-  .visited .topic-item-stats .category {
-    opacity: 0.6;
-  }
-
   .age {
     white-space: nowrap;
     a {

GitHub

1 Like