Add border-low-contrast color to themes to use with separators

canonical · Mar 27, 2020 · a2a8ea0 · a2a8ea0
1 parent 6aee141
commit a2a8ea0
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/scss/_patterns_side-navigation.scss b/scss/_patterns_side-navigation.scss
@@ -187,7 +187,7 @@
     $color-sidenav-text-active: $colors--light-theme--text-default,
     $color-sidenav-item-background-highlight: $colors--light-theme--background-highlight,
     $color-sidenav-item-border-highlight: $colors--light-theme--text-default,
-    $color-sidenav-list-border: $colors--light-theme--border-default
+    $color-sidenav-list-border: $colors--light-theme--border-low-contrast
   );
 }
 
@@ -197,6 +197,6 @@
     $color-sidenav-text-active: $colors--dark-theme--text-default,
     $color-sidenav-item-background-highlight: $colors--dark-theme--background-highlight,
     $color-sidenav-item-border-highlight: $colors--dark-theme--text-default,
-    $color-sidenav-list-border: $colors--dark-theme--border-default
+    $color-sidenav-list-border: $colors--dark-theme--border-low-contrast
   );
 }
diff --git a/scss/_settings_colors.scss b/scss/_settings_colors.scss
@@ -51,7 +51,8 @@ $states: (
 //
 // Border colors:
 // --border-default       - default border color
-// --border-high-contrast - high contrast version of border color, to be used when border needs more visibility
+// --border-high-contrast - high contrast version of border color, to be used when border needs more visibility (form inputs, etc)
+// --border-low-contrast  - low contrast version of border color, to be used when border needs more visibility (separators)
 
 // Light theme
 $colors--light-theme--text-default: #111 !default;
@@ -65,6 +66,7 @@ $colors--light-theme--background-highlight: #f7f7f7 !default;
 
 $colors--light-theme--border-default: #cdcdcd !default;
 $colors--light-theme--border-high-contrast: #999 !default;
+$colors--light-theme--border-low-contrast: #e5e5e5 !default;
 
 // Dark theme
 $colors--dark-theme--text-default: hsl(0, 0%, 100%) !default;
@@ -76,5 +78,6 @@ $colors--dark-theme--background-default: hsl(0, 0%, 15%) !default;
 $colors--dark-theme--background-alt: hsl(0, 0%, 20%) !default;
 $colors--dark-theme--background-highlight: 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-default: rgba($colors--dark-theme--text-default, 0.2) !default;
 $colors--dark-theme--border-high-contrast: rgba($colors--dark-theme--text-default, 0.4) !default;
+$colors--dark-theme--border-low-contrast: rgba($colors--dark-theme--text-default, 0.1) !default;