fix(fuselage): Sidebar colors (#810)

RocketChat · Aug 11, 2022 · 112f9e2 · 112f9e2
1 parent 48ff61b
commit 112f9e2
Showing 1 changed file with 8 additions and 6 deletions.
diff --git a/packages/fuselage/src/components/Sidebar/Sidebar.styles.scss b/packages/fuselage/src/components/Sidebar/Sidebar.styles.scss
@@ -16,7 +16,7 @@ $sidebar-item-background-color: theme(
   'sidebar-item-background-color',
   colors.surface(light)
 );
-$sidebar-item-color: theme('sidebar-item-color', colors.font(secondary-info));
+$sidebar-item-color: theme('sidebar-item-color', colors.font(annotation));
 $sidebar-item-color-highlighted: theme(
   'sidebar-item-color-highlighted',
   colors.font(white)
@@ -27,7 +27,7 @@ $sidebar-item-background-color-hover: theme(
 );
 $sidebar-item-color-hover: theme(
   'sidebar-item-color-hover',
-  colors.font(secondary-info)
+  colors.font(annotation)
 );
 $sidebar-item-color-focus: theme(
   'sidebar-item-color-focus',
@@ -39,17 +39,19 @@ $sidebar-item-background-color-selected: theme(
 );
 $sidebar-item-color-selected: theme(
   'sidebar-item-color-selected',
-  colors.font(secondary-info)
+  colors.font(annotation)
 );
 
+$sidebar-title-color: theme('sidebar-title-color', colors.font(annotation));
+
 $sidebar-footer-box-shadow: theme(
   'sidebar-footer-box-shadow',
   rgba(0, 0, 0, 0.1)
 );
 
 $sidebar-footer-highlight-color: theme(
   'sidebar-footer-highlight-color',
-  colors.font(secondary-info)
+  colors.font(annotation)
 );
 
 %sidebar-base {
@@ -102,7 +104,7 @@ $sidebar-footer-highlight-color: theme(
     &__title {
       @include typography.use-font-scale(p2m);
 
-      color: colors.neutral(900);
+      color: $sidebar-title-color;
     }
   }
 
@@ -243,7 +245,7 @@ $sidebar-footer-highlight-color: theme(
     @include typography.use-font-scale(c2);
     @include typography.use-with-truncated-text();
 
-    color: colors.font(secondary-info);
+    color: $sidebar-title-color;
   }
 
   &-section {