diff --git a/scss/_patterns_side-navigation.scss b/scss/_patterns_side-navigation.scss index 68718c729e..860393ddc4 100644 --- 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 index e159af84c3..5608e28c17 100644 --- 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;