Update dark theme colors to use opacity

canonical · Mar 25, 2020 · 6e92076 · 6e92076
1 parent 30c838f
commit 6e92076
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 9 deletions.
diff --git a/scss/_patterns_side-navigation.scss b/scss/_patterns_side-navigation.scss
@@ -182,10 +182,10 @@
 
 @mixin vf-side-navigation-theme-dark {
   @include vf-side-navigation-theme(
-    $color-sidenav-text-default: rgba($colors--dark-theme--text-default, 0.55),
+    $color-sidenav-text-default: $colors--dark-theme--text-muted,
     $color-sidenav-text-active: $colors--dark-theme--text-default,
-    $color-sidenav-item-background-highlight: rgba($colors--dark-theme--text-default, 0.5),
+    $color-sidenav-item-background-highlight: $colors--dark-theme--background-highlighted,
     $color-sidenav-item-border-highlight: $colors--dark-theme--text-default,
-    $color-sidenav-list-border: rgba($colors--dark-theme--text-default, 0.5)
+    $color-sidenav-list-border: $colors--dark-theme--border-default
   );
 }
diff --git a/scss/_settings_colors.scss b/scss/_settings_colors.scss
@@ -45,11 +45,11 @@ $colors--light-theme--text-muted: #666 !default;
 $colors--light-theme--text-default: #111 !default;
 
 //text-hover: minimum contrast on primary that satisfies contrast checker AA
+$colors--dark-theme--text-default: hsl(0, 0%, 100%) !default;
+$colors--dark-theme--text-disabled: rgba($colors--dark-theme--text-default, 0.55) !default;
+$colors--dark-theme--text-muted: rgba($colors--dark-theme--text-default, 0.55) !default;
+$colors--dark-theme--text-hover: hsl(0, 0%, 56%) !default;
 $colors--dark-theme--background: hsl(0, 0%, 15%) !default;
-$colors--dark-theme--background-highlighted: hsl(0, 0%, 20%) !default;
-$colors--dark-theme--border-default: hsl(0, 0%, 27%) !default;
+$colors--dark-theme--background-highlighted: rgba($colors--dark-theme--text-default, 0.05) !default;
+$colors--dark-theme--border-default: rgba($colors--dark-theme--text-default, 0.05) !default;
 $colors--dark-theme--border-high-contrast: hsl(0, 0%, 42%) !default;
-$colors--dark-theme--text-hover: hsl(0, 0%, 56%) !default;
-// TODO: add --text-disabled
-// TODO: add --text-muted
-$colors--dark-theme--text-default: hsl(0, 0%, 100%) !default;