_topics.scss in thredded-0.3.0

- old
+ new

@@ -13,11 +13,11 @@
   font-size: 1.125rem; // 18px
   line-height: 1.5;
 
   a {
     @extend %thredded--link;
-    color: $thredded-base-font-color;
+    color: $thredded-text-color;
     display: inline;
 
     &:hover {
       color: $thredded-action-color;
     }
@@ -32,30 +32,30 @@
   line-height: 1rem;
 
   li {
     font-size: .5rem;
     display: inline-block;
-    color: $thredded-base-font-color;
-    background-color: lighten($thredded-base-font-color, 55%);
-    box-shadow: inset 0 -1px 0 lighten($thredded-base-font-color, 40%);
+    color: $thredded-text-color;
+    background-color: lighten($thredded-text-color, 55%);
+    box-shadow: inset 0 -1px 0 lighten($thredded-text-color, 40%);
     padding: 1px 6px;
     border-radius: 2px;
     text-transform: lowercase;
     letter-spacing: 1px;
     vertical-align: bottom;
   }
 }
 
 &--topics--started-by,
 &--topics--updated-by {
-  color: lighten($thredded-base-font-color, 30%);
+  color: $thredded-secondary-text-color;
   font-size: $thredded-font-size-small;
   font-style: normal;
 
   a {
     @extend %thredded--link;
-    color: lighten($thredded-base-font-color, 20%);
+    color: lighten($thredded-text-color, 20%);
 
     &:hover {
 
       color: $thredded-action-color;
     }
@@ -88,11 +88,10 @@
   }
 }
 
 &--topics--posts-count {
   border-radius: 50%;
-  color: white;
   display: inline-block;
   font-weight: 900;
   font-size: 0.8rem;
   height: 2rem;
   left: -3rem;
@@ -100,14 +99,17 @@
   margin-right: $thredded-base-spacing;
   position: absolute;
   text-align: center;
   top: 0;
   width: 2rem;
+  transition: background 0.1s linear, color 0.1s linear;
 }
 
-&--topic--unread > &--topics--posts-count {
-  background: $thredded-action-color;
+&--topic-unread > &--topics--posts-count {
+  background: $thredded-badge-active-background;
+  color: $thredded-badge-active-color;
 }
 
-&--topic--read > &--topics--posts-count {
-  background: lighten($thredded-base-font-color, 45%);
+&--topic-read > &--topics--posts-count {
+  background: $thredded-badge-inactive-background;
+  color: $thredded-badge-inactive-color;
 }