From 71b49f2e8a6fe9d972353b6a50f1ad518418f54b Mon Sep 17 00:00:00 2001 From: Bartek Szopka Date: Wed, 25 Mar 2020 15:02:00 +0100 Subject: [PATCH 1/9] Add side navigation dark theme support --- scss/_patterns_side-navigation.scss | 42 +++++++++++++++---- .../patterns/side-navigation/_default.html | 2 +- .../patterns/side-navigation/_icons.html | 16 +++---- .../patterns/side-navigation/dark.html | 22 ++++++++++ 4 files changed, 65 insertions(+), 17 deletions(-) create mode 100644 templates/docs/examples/patterns/side-navigation/dark.html diff --git a/scss/_patterns_side-navigation.scss b/scss/_patterns_side-navigation.scss index ff3cad425..e2f9bdad1 100644 --- a/scss/_patterns_side-navigation.scss +++ b/scss/_patterns_side-navigation.scss @@ -96,7 +96,14 @@ } // default light theme - @include vf-side-navigation-theme; + .p-side-navigation, + .p-side-navigation--icons { + @include vf-side-navigation-theme-light; + + &.is-dark { + @include vf-side-navigation-theme-dark; + } + } } // helper @@ -127,18 +134,17 @@ // theme @mixin vf-side-navigation-theme( // default text color in sidebar - $color-sidenav-text-default: $colors--light-theme--text-muted, + $color-sidenav-text-default, // text color of highlighted items - $color-sidenav-text-active: $colors--light-theme--text-default, + $color-sidenav-text-active, // background color of active/hovered items - $color-sidenav-item-background-highlight: $colors--light-theme--background-highlighted, + $color-sidenav-item-background-highlight, // border color of active item - $color-sidenav-item-border-highlight: $color-brand, + $color-sidenav-item-border-highlight, // border color of items list - $color-sidenav-list-border: $colors--light-theme--border-default + $color-sidenav-list-border ) { - .p-side-navigation, - .p-side-navigation--icons { + & { color: $color-sidenav-text-default; } @@ -163,3 +169,23 @@ } } } + +@mixin vf-side-navigation-theme-light { + @include vf-side-navigation-theme( + $color-sidenav-text-default: $colors--light-theme--text-muted, + $color-sidenav-text-active: $colors--light-theme--text-default, + $color-sidenav-item-background-highlight: $colors--light-theme--background-highlighted, + $color-sidenav-item-border-highlight: $color-brand, + $color-sidenav-list-border: $colors--light-theme--border-default + ); +} + +@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-active: $colors--dark-theme--text-default, + $color-sidenav-item-background-highlight: rgba($colors--dark-theme--text-default, 0.05), + $color-sidenav-item-border-highlight: $colors--dark-theme--text-default, + $color-sidenav-list-border: rgba($colors--dark-theme--text-default, 0.05) + ); +} diff --git a/templates/docs/examples/patterns/side-navigation/_default.html b/templates/docs/examples/patterns/side-navigation/_default.html index 40b62cc74..27c92ab39 100644 --- a/templates/docs/examples/patterns/side-navigation/_default.html +++ b/templates/docs/examples/patterns/side-navigation/_default.html @@ -1,4 +1,4 @@ -
+
  • Title that is a link diff --git a/templates/docs/examples/patterns/side-navigation/_icons.html b/templates/docs/examples/patterns/side-navigation/_icons.html index 0cd9b45f6..04e97499f 100644 --- a/templates/docs/examples/patterns/side-navigation/_icons.html +++ b/templates/docs/examples/patterns/side-navigation/_icons.html @@ -1,19 +1,19 @@ -
    +
  • - First level item that is not a link + First level item that is not a link
  • First level link with a label
    New
  • - First level link with a label is long and wraps wraps wraps wraps wraps wraps
    Updated
     + First level link with a label is long and wraps wraps wraps wraps wraps wraps
    Updated
  • First level link with label that is truncated because it's long long long long long long long
    Validated
     diff --git a/templates/docs/examples/patterns/side-navigation/dark.html b/templates/docs/examples/patterns/side-navigation/dark.html new file mode 100644 index 000000000..925fd195f --- /dev/null +++ b/templates/docs/examples/patterns/side-navigation/dark.html @@ -0,0 +1,22 @@ +{% extends "_layouts/examples.html" %} +{% block title %}Side navigation / Dark{% endblock %} + +{% block standalone_css %}patterns_side-navigation{% endblock %} + +{% block content %} +{% set is_dark = True %} + + +
    +
    + {% include "docs/examples/patterns/side-navigation/_default.html" %} +
    +
    + {% include "docs/examples/patterns/side-navigation/_icons.html" %} +
    +
    + + +{% endblock %} From 92d40cfff71171efd30c4904ed9cf34ffe0ac53f Mon Sep 17 00:00:00 2001 From: Bartek Szopka Date: Thu, 26 Mar 2020 08:08:04 +0100 Subject: [PATCH 2/9] Add side navigation default theme setting --- scss/_patterns_side-navigation.scss | 23 +++++++++++++++++------ scss/_settings_themes.scss | 1 + 2 files changed, 18 insertions(+), 6 deletions(-) diff --git a/scss/_patterns_side-navigation.scss b/scss/_patterns_side-navigation.scss index e2f9bdad1..7145d191d 100644 --- a/scss/_patterns_side-navigation.scss +++ b/scss/_patterns_side-navigation.scss @@ -95,13 +95,24 @@ padding-left: $spv-inner--small; } - // default light theme - .p-side-navigation, - .p-side-navigation--icons { - @include vf-side-navigation-theme-light; - - &.is-dark { + // Theming + @if ($theme-default-p-side-navigation == 'dark') { + .p-side-navigation, + .p-side-navigation--icons { @include vf-side-navigation-theme-dark; + + &.is-light { + @include vf-side-navigation-theme-light; + } + } + } @else { + .p-side-navigation, + .p-side-navigation--icons { + @include vf-side-navigation-theme-light; + + &.is-dark { + @include vf-side-navigation-theme-dark; + } } } } diff --git a/scss/_settings_themes.scss b/scss/_settings_themes.scss index 6fddfeadf..c79fb2a75 100644 --- a/scss/_settings_themes.scss +++ b/scss/_settings_themes.scss @@ -1,5 +1,6 @@ $theme-default-forms: 'light' !default; $theme-default-hr: 'light' !default; $theme-default-nav: 'light' !default; +$theme-default-p-side-navigation: 'light' !default; $theme-default-p-search-box: 'light' !default; $theme-default-p-contextual-menu: 'light' !default; From d6dbd90e08e3ef99c4e6ed01c4be3df07e542387 Mon Sep 17 00:00:00 2001 From: Bartek Szopka Date: Thu, 26 Mar 2020 13:28:09 +0100 Subject: [PATCH 3/9] Rename theme colors `--background-highlighted` to `--background-alt` --- scss/_patterns_contextual-menu.scss | 4 ++-- scss/_patterns_navigation.scss | 4 ++-- scss/_patterns_side-navigation.scss | 2 +- scss/_patterns_subnav.scss | 2 +- scss/_settings_colors.scss | 4 ++-- 5 files changed, 8 insertions(+), 8 deletions(-) diff --git a/scss/_patterns_contextual-menu.scss b/scss/_patterns_contextual-menu.scss index fe757168f..6634892f8 100644 --- a/scss/_patterns_contextual-menu.scss +++ b/scss/_patterns_contextual-menu.scss @@ -139,7 +139,7 @@ $color-contextual-menu-background: $colors--light-theme--background, $color-contextual-menu-border: $colors--light-theme--border-default, $color-contextual-menu-text: $colors--light-theme--text-default, - $color-contextual-menu-hover-background: $colors--light-theme--background-highlighted + $color-contextual-menu-hover-background: $colors--light-theme--background-alt ); } @@ -148,6 +148,6 @@ $color-contextual-menu-background: $colors--dark-theme--background, $color-contextual-menu-border: $colors--dark-theme--border-default, $color-contextual-menu-text: $colors--dark-theme--text-default, - $color-contextual-menu-hover-background: $colors--dark-theme--background-highlighted + $color-contextual-menu-hover-background: $colors--dark-theme--background-alt ); } diff --git a/scss/_patterns_navigation.scss b/scss/_patterns_navigation.scss index b3360ee39..6a1569a54 100644 --- a/scss/_patterns_navigation.scss +++ b/scss/_patterns_navigation.scss @@ -356,13 +356,13 @@ $lightness-threshold: 70; @mixin vf-navigation-dark-theme($override-default: false) { @if ($override-default) { @include vf-navigation-theme( - $color-navigation-background: $colors--dark-theme--background-highlighted, + $color-navigation-background: $colors--dark-theme--background-alt, $color-navigation-text: $colors--dark-theme--text-default, $color-navigation-separator: $colors--dark-theme--border-default ); } @else { // take $color-navigation-background (that can be overridden) into account - $color-navigation-background: $colors--dark-theme--background-highlighted !default; + $color-navigation-background: $colors--dark-theme--background-alt !default; $color-navigation-text: if(lightness($color-navigation-background) > $lightness-threshold, $colors--light-theme--text-default, $colors--dark-theme--text-default) !default; @include vf-navigation-theme( diff --git a/scss/_patterns_side-navigation.scss b/scss/_patterns_side-navigation.scss index 7145d191d..69eec636a 100644 --- a/scss/_patterns_side-navigation.scss +++ b/scss/_patterns_side-navigation.scss @@ -185,7 +185,7 @@ @include vf-side-navigation-theme( $color-sidenav-text-default: $colors--light-theme--text-muted, $color-sidenav-text-active: $colors--light-theme--text-default, - $color-sidenav-item-background-highlight: $colors--light-theme--background-highlighted, + $color-sidenav-item-background-highlight: $colors--light-theme--background-alt, $color-sidenav-item-border-highlight: $color-brand, $color-sidenav-list-border: $colors--light-theme--border-default ); diff --git a/scss/_patterns_subnav.scss b/scss/_patterns_subnav.scss index 5d9326ea7..e8cad4dd6 100644 --- a/scss/_patterns_subnav.scss +++ b/scss/_patterns_subnav.scss @@ -167,7 +167,7 @@ @mixin vf-subnav-dark-theme { @include vf-subnav-theme( $color-subnav-icon: $colors--dark-theme--border-high-contrast, - $color-subnav-background: $colors--dark-theme--background-highlighted, + $color-subnav-background: $colors--dark-theme--background-alt, $color-subnav-text: $colors--dark-theme--text-default, $color-subnav-text-hover: $colors--dark-theme--text-hover, $color-subnav-separator: $colors--dark-theme--border-default diff --git a/scss/_settings_colors.scss b/scss/_settings_colors.scss index 9833f1ba2..a1962c90e 100644 --- a/scss/_settings_colors.scss +++ b/scss/_settings_colors.scss @@ -36,7 +36,7 @@ $states: ( ); $colors--light-theme--background: #fff !default; -$colors--light-theme--background-highlighted: #f7f7f7 !default; +$colors--light-theme--background-alt: #f7f7f7 !default; $colors--light-theme--border-default: #cdcdcd !default; $colors--light-theme--border-high-contrast: #999 !default; $colors--light-theme--text-hover: #757575 !default; @@ -46,7 +46,7 @@ $colors--light-theme--text-default: #111 !default; //text-hover: minimum contrast on primary that satisfies contrast checker AA $colors--dark-theme--background: hsl(0, 0%, 15%) !default; -$colors--dark-theme--background-highlighted: hsl(0, 0%, 20%) !default; +$colors--dark-theme--background-alt: hsl(0, 0%, 20%) !default; $colors--dark-theme--border-default: hsl(0, 0%, 27%) !default; $colors--dark-theme--border-high-contrast: hsl(0, 0%, 42%) !default; $colors--dark-theme--text-hover: hsl(0, 0%, 56%) !default; From 477ee6a56f057cd26c7ef7baa879b6c8d9cf4905 Mon Sep 17 00:00:00 2001 From: Bartek Szopka Date: Thu, 26 Mar 2020 13:33:17 +0100 Subject: [PATCH 4/9] Consistently use theme colors in side navigation component --- scss/_patterns_side-navigation.scss | 10 +++--- scss/_settings_colors.scss | 47 ++++++++++++++++++++++------- 2 files changed, 41 insertions(+), 16 deletions(-) diff --git a/scss/_patterns_side-navigation.scss b/scss/_patterns_side-navigation.scss index 69eec636a..68718c729 100644 --- a/scss/_patterns_side-navigation.scss +++ b/scss/_patterns_side-navigation.scss @@ -185,18 +185,18 @@ @include vf-side-navigation-theme( $color-sidenav-text-default: $colors--light-theme--text-muted, $color-sidenav-text-active: $colors--light-theme--text-default, - $color-sidenav-item-background-highlight: $colors--light-theme--background-alt, - $color-sidenav-item-border-highlight: $color-brand, + $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 ); } @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.05), + $color-sidenav-item-background-highlight: $colors--dark-theme--background-highlight, $color-sidenav-item-border-highlight: $colors--dark-theme--text-default, - $color-sidenav-list-border: rgba($colors--dark-theme--text-default, 0.05) + $color-sidenav-list-border: $colors--dark-theme--border-default ); } diff --git a/scss/_settings_colors.scss b/scss/_settings_colors.scss index a1962c90e..074111466 100644 --- a/scss/_settings_colors.scss +++ b/scss/_settings_colors.scss @@ -35,21 +35,46 @@ $states: ( information: $color-information ); +// THEME COLORS +// ============== +// +// Text colors: +// --text-default - default text color +// --text-hover - dimmed version of default text color, to be used in hover effects (when background doesn't change) +// --text-disabled - dimmed version of default text color, to be used on disabled controls +// --text-muted - muted version of default text color, to be used on elements with less prominence +// +// Background colors: +// --background - default background color +// --background-alt - alternative version of background color, to be used to diffrenciate given surface +// --background-highlight - background used on highlighted elements (for example selected elements in the navigation) +// +// Border colors: +// --border-default - default border color +// --border-high-contrast - high contrast version of border color, to be used when border needs more visibility + +// Light theme +$colors--light-theme--text-default: #111 !default; +$colors--light-theme--text-hover: #757575 !default; +$colors--light-theme--text-disabled: #666 !default; +$colors--light-theme--text-muted: #666 !default; + $colors--light-theme--background: #fff !default; $colors--light-theme--background-alt: #f7f7f7 !default; +$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--text-hover: #757575 !default; -$colors--light-theme--text-disabled: #666 !default; -$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 +// Dark theme +$colors--dark-theme--text-default: hsl(0, 0%, 100%) !default; +$colors--dark-theme--text-hover: hsl(0, 0%, 56%) !default; // minimum contrast on primary that satisfies contrast checker AA +$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--background: hsl(0, 0%, 15%) !default; $colors--dark-theme--background-alt: hsl(0, 0%, 20%) !default; -$colors--dark-theme--border-default: hsl(0, 0%, 27%) !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; +$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-high-contrast: rgba($colors--dark-theme--text-default, 0.4) !default; From d4815517c7f1ea9cd1231f412c95b0adda1b2ee7 Mon Sep 17 00:00:00 2001 From: Bartek Szopka Date: Thu, 26 Mar 2020 13:37:01 +0100 Subject: [PATCH 5/9] Rename theme colors `--background` to `--background-default` for consistency with other theme colors --- scss/_base_forms-tick-elements.scss | 12 ++++++------ scss/_patterns_contextual-menu.scss | 4 ++-- scss/_patterns_navigation.scss | 4 ++-- scss/_patterns_search-box.scss | 4 ++-- scss/_patterns_subnav.scss | 2 +- scss/_settings_colors.scss | 4 ++-- 6 files changed, 15 insertions(+), 15 deletions(-) diff --git a/scss/_base_forms-tick-elements.scss b/scss/_base_forms-tick-elements.scss index a93345afb..49522a08d 100644 --- a/scss/_base_forms-tick-elements.scss +++ b/scss/_base_forms-tick-elements.scss @@ -511,16 +511,16 @@ $box-offsets-top: ( @mixin vf-checkbox-light-theme { @include vf-checkbox-theme( $color-tick-text: $colors--light-theme--text-default, - $color-tick-background: $colors--light-theme--background, + $color-tick-background: $colors--light-theme--background-default, $color-tick-border: $colors--light-theme--border-high-contrast, - $color-checkbox-tick: $colors--light-theme--background + $color-checkbox-tick: $colors--light-theme--background-default ); } @mixin vf-checkbox-dark-theme { @include vf-checkbox-theme( $color-tick-text: $colors--dark-theme--text-default, - $color-tick-background: $colors--dark-theme--background, + $color-tick-background: $colors--dark-theme--background-default, $color-tick-border: $colors--dark-theme--border-high-contrast, $color-checkbox-tick: $colors--dark-theme--text-default ); @@ -549,16 +549,16 @@ $box-offsets-top: ( @mixin vf-radio-light-theme { @include vf-radio-theme( $color-tick-text: $colors--light-theme--text-default, - $color-tick-background: $colors--light-theme--background, + $color-tick-background: $colors--light-theme--background-default, $color-tick-border: $colors--light-theme--border-high-contrast, - $color-radio-dot: $colors--light-theme--background + $color-radio-dot: $colors--light-theme--background-default ); } @mixin vf-radio-dark-theme { @include vf-radio-theme( $color-tick-text: $colors--dark-theme--text-default, - $color-tick-background: $colors--dark-theme--background, + $color-tick-background: $colors--dark-theme--background-default, $color-tick-border: $colors--dark-theme--border-high-contrast, $color-radio-dot: $colors--dark-theme--text-default ); diff --git a/scss/_patterns_contextual-menu.scss b/scss/_patterns_contextual-menu.scss index 6634892f8..097f584bc 100644 --- a/scss/_patterns_contextual-menu.scss +++ b/scss/_patterns_contextual-menu.scss @@ -136,7 +136,7 @@ @mixin vf-contextual-menu-light-theme { @include vf-contextual-menu-theme( - $color-contextual-menu-background: $colors--light-theme--background, + $color-contextual-menu-background: $colors--light-theme--background-default, $color-contextual-menu-border: $colors--light-theme--border-default, $color-contextual-menu-text: $colors--light-theme--text-default, $color-contextual-menu-hover-background: $colors--light-theme--background-alt @@ -145,7 +145,7 @@ @mixin vf-contextual-menu-dark-theme { @include vf-contextual-menu-theme( - $color-contextual-menu-background: $colors--dark-theme--background, + $color-contextual-menu-background: $colors--dark-theme--background-default, $color-contextual-menu-border: $colors--dark-theme--border-default, $color-contextual-menu-text: $colors--dark-theme--text-default, $color-contextual-menu-hover-background: $colors--dark-theme--background-alt diff --git a/scss/_patterns_navigation.scss b/scss/_patterns_navigation.scss index 6a1569a54..7c2ccc035 100644 --- a/scss/_patterns_navigation.scss +++ b/scss/_patterns_navigation.scss @@ -336,13 +336,13 @@ $lightness-threshold: 70; @mixin vf-navigation-light-theme($override-default: false) { @if ($override-default) { @include vf-navigation-theme( - $color-navigation-background: $colors--light-theme--background, + $color-navigation-background: $colors--light-theme--background-default, $color-navigation-text: $colors--light-theme--text-default, $color-navigation-separator: $colors--light-theme--border-default ); } @else { // take $color-navigation-background (that can be overridden) into account - $color-navigation-background: $colors--light-theme--background !default; + $color-navigation-background: $colors--light-theme--background-default !default; $color-navigation-text: if(lightness($color-navigation-background) > $lightness-threshold, $colors--light-theme--text-default, $colors--dark-theme--text-default) !default; @include vf-navigation-theme( diff --git a/scss/_patterns_search-box.scss b/scss/_patterns_search-box.scss index 56b875ac2..a78c5de59 100644 --- a/scss/_patterns_search-box.scss +++ b/scss/_patterns_search-box.scss @@ -124,7 +124,7 @@ @mixin vf-search-box-light-theme { @include vf-search-box-theme( - $color-search-box-background: $colors--light-theme--background, + $color-search-box-background: $colors--light-theme--background-default, $color-search-box-border: $colors--light-theme--border-high-contrast, $color-search-box-text: $colors--light-theme--text-default ); @@ -132,7 +132,7 @@ @mixin vf-search-box-dark-theme { @include vf-search-box-theme( - $color-search-box-background: $colors--dark-theme--background, + $color-search-box-background: $colors--dark-theme--background-default, $color-search-box-border: $colors--dark-theme--border-high-contrast, $color-search-box-text: $colors--dark-theme--text-default ); diff --git a/scss/_patterns_subnav.scss b/scss/_patterns_subnav.scss index e8cad4dd6..287536d7a 100644 --- a/scss/_patterns_subnav.scss +++ b/scss/_patterns_subnav.scss @@ -157,7 +157,7 @@ @mixin vf-subnav-light-theme { @include vf-subnav-theme( $color-subnav-icon: $colors--light-theme--border-high-contrast, - $color-subnav-background: $colors--light-theme--background, + $color-subnav-background: $colors--light-theme--background-default, $color-subnav-text: $colors--light-theme--text-default, $color-subnav-text-hover: $colors--light-theme--text-hover, $color-subnav-separator: $colors--light-theme--border-default diff --git a/scss/_settings_colors.scss b/scss/_settings_colors.scss index 074111466..e159af84c 100644 --- a/scss/_settings_colors.scss +++ b/scss/_settings_colors.scss @@ -59,7 +59,7 @@ $colors--light-theme--text-hover: #757575 !default; $colors--light-theme--text-disabled: #666 !default; $colors--light-theme--text-muted: #666 !default; -$colors--light-theme--background: #fff !default; +$colors--light-theme--background-default: #fff !default; $colors--light-theme--background-alt: #f7f7f7 !default; $colors--light-theme--background-highlight: #f7f7f7 !default; @@ -72,7 +72,7 @@ $colors--dark-theme--text-hover: hsl(0, 0%, 56%) !default; // minimum contrast o $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--background: hsl(0, 0%, 15%) !default; +$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; From e6a3fd04e4a1c28b36cd5946ac924bddc86ec554 Mon Sep 17 00:00:00 2001 From: Bartek Szopka Date: Thu, 26 Mar 2020 15:01:08 +0100 Subject: [PATCH 6/9] Add some spacing to hr examples to make line visible on the background --- templates/docs/examples/base/hr-dark.html | 7 +++++++ templates/docs/examples/base/hr.html | 6 ++++++ 2 files changed, 13 insertions(+) diff --git a/templates/docs/examples/base/hr-dark.html b/templates/docs/examples/base/hr-dark.html index 7f233ca96..b5755dec1 100644 --- a/templates/docs/examples/base/hr-dark.html +++ b/templates/docs/examples/base/hr-dark.html @@ -4,5 +4,12 @@ {% block standalone_css %}base{% endblock %} {% block content %} + +
    {% endblock %} diff --git a/templates/docs/examples/base/hr.html b/templates/docs/examples/base/hr.html index e87093b97..0a9149325 100644 --- a/templates/docs/examples/base/hr.html +++ b/templates/docs/examples/base/hr.html @@ -4,5 +4,11 @@ {% block standalone_css %}base{% endblock %} {% block content %} + +
    {% endblock %} From c3ed7fc8b40a16dbf8ec8c1367edb09f74b8d862 Mon Sep 17 00:00:00 2001 From: Bartek Szopka Date: Thu, 26 Mar 2020 16:52:49 +0100 Subject: [PATCH 7/9] Use `text-muted` color for navigation chevrons --- scss/_patterns_subnav.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/scss/_patterns_subnav.scss b/scss/_patterns_subnav.scss index 287536d7a..052bbe0a5 100644 --- a/scss/_patterns_subnav.scss +++ b/scss/_patterns_subnav.scss @@ -156,7 +156,7 @@ @mixin vf-subnav-light-theme { @include vf-subnav-theme( - $color-subnav-icon: $colors--light-theme--border-high-contrast, + $color-subnav-icon: $colors--light-theme--text-muted, $color-subnav-background: $colors--light-theme--background-default, $color-subnav-text: $colors--light-theme--text-default, $color-subnav-text-hover: $colors--light-theme--text-hover, @@ -166,7 +166,7 @@ @mixin vf-subnav-dark-theme { @include vf-subnav-theme( - $color-subnav-icon: $colors--dark-theme--border-high-contrast, + $color-subnav-icon: $colors--dark-theme--text-muted, $color-subnav-background: $colors--dark-theme--background-alt, $color-subnav-text: $colors--dark-theme--text-default, $color-subnav-text-hover: $colors--dark-theme--text-hover, From 5805ecc6432db066b253d3f2179142ec47405dce Mon Sep 17 00:00:00 2001 From: Bartek Szopka Date: Thu, 26 Mar 2020 17:14:44 +0100 Subject: [PATCH 8/9] Add `border-low-contrast` color to themes to use with separators --- scss/_patterns_side-navigation.scss | 4 ++-- scss/_settings_colors.scss | 7 +++++-- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/scss/_patterns_side-navigation.scss b/scss/_patterns_side-navigation.scss index 68718c729..860393ddc 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 e159af84c..5608e28c1 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; From b10cc5b40abd9c15e5256c9b76f33132290304c3 Mon Sep 17 00:00:00 2001 From: Bartek Szopka Date: Thu, 26 Mar 2020 17:15:56 +0100 Subject: [PATCH 9/9] Fix chevrons in dark theme navigation --- scss/_patterns_subnav.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/scss/_patterns_subnav.scss b/scss/_patterns_subnav.scss index 052bbe0a5..e20f99d76 100644 --- a/scss/_patterns_subnav.scss +++ b/scss/_patterns_subnav.scss @@ -165,8 +165,12 @@ } @mixin vf-subnav-dark-theme { + // FIXME: + // $color-subnav-icon color should be $colors--dark-theme--text-muted, + // but vf-url-friendly-color doesn't support rgba(), + // so we are using #999 as fallback for now @include vf-subnav-theme( - $color-subnav-icon: $colors--dark-theme--text-muted, + $color-subnav-icon: #999, $color-subnav-background: $colors--dark-theme--background-alt, $color-subnav-text: $colors--dark-theme--text-default, $color-subnav-text-hover: $colors--dark-theme--text-hover,