Dark theme for side navigation dark

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
   );

scss/_patterns_contextual-menu.scss

@@ -136,18 +136,18 @@
 
 @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-highlighted
+    $color-contextual-menu-hover-background: $colors--light-theme--background-alt
   );
 }
 
 @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-highlighted
+    $color-contextual-menu-hover-background: $colors--dark-theme--background-alt
   );
 }

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(
@@ -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(

scss/_patterns_search-box.scss

@@ -124,15 +124,15 @@
 
 @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
   );
 }
 
 @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
   );

scss/_patterns_side-navigation.scss

@@ -95,8 +95,26 @@
     padding-left: $spv-inner--small;
   }
 
-  // default light theme
-  @include vf-side-navigation-theme;
+  // 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;
+      }
+    }
+  }
 }
 
 // helper
@@ -127,18 +145,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 +180,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-highlight,
+    $color-sidenav-item-border-highlight: $colors--light-theme--text-default,
+    $color-sidenav-list-border: $colors--light-theme--border-low-contrast
+  );
+}
+
+@mixin vf-side-navigation-theme-dark {
+  @include vf-side-navigation-theme(
+    $color-sidenav-text-default: $colors--dark-theme--text-muted,
+    $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-low-contrast
+  );
+}

scss/_patterns_subnav.scss

@@ -156,18 +156,22 @@
 
 @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-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,
     $color-subnav-separator: $colors--light-theme--border-default
   );
 }
 
 @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--border-high-contrast,
-    $color-subnav-background: $colors--dark-theme--background-highlighted,
+    $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,
     $color-subnav-separator: $colors--dark-theme--border-default

scss/_settings_colors.scss

@@ -35,21 +35,49 @@ $states: (
   information: $color-information
 );
 
-$colors--light-theme--background: #fff !default;
-$colors--light-theme--background-highlighted: #f7f7f7 !default;
-$colors--light-theme--border-default: #cdcdcd !default;
-$colors--light-theme--border-high-contrast: #999 !default;
+// 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 (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;
 $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
-$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--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--light-theme--background-default: #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--border-low-contrast: #e5e5e5 !default;
+
+// 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-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.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;

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;

templates/docs/examples/base/hr-dark.html

@@ -4,5 +4,12 @@
 {% block standalone_css %}base{% endblock %}
 
 {% block content %}
+<style>
+  body {
+    background: #111;
+    padding: 1rem 0;
+  }
+</style>
+
 <hr class="is-dark">
 {% endblock %}

templates/docs/examples/base/hr.html

@@ -4,5 +4,11 @@
 {% block standalone_css %}base{% endblock %}
 
 {% block content %}
+<style>
+  body {
+    padding: 1rem 0;
+  }
+</style>
+
 <hr>
 {% endblock %}

templates/docs/examples/patterns/side-navigation/_default.html

@@ -1,4 +1,4 @@
-<div class="p-side-navigation">
+<div class="p-side-navigation {% if is_dark %}is-dark{% endif %}">
   <ul class="p-side-navigation__list">
     <li class="p-side-navigation__item--title">
       <a class="p-side-navigation__link" href="#">Title that is a link</a>

templates/docs/examples/patterns/side-navigation/_icons.html

@@ -1,19 +1,19 @@
-<div class="p-side-navigation--icons">
+<div class="p-side-navigation--icons {% if is_dark %}is-dark{% endif %}">
   <ul class="p-side-navigation__list">
     <li class="p-side-navigation__item--title">
       <a class="p-side-navigation__link" href="#">Title that is a link</a>
     </li>
     <li class="p-side-navigation__item">
-      <a class="p-side-navigation__link" href="#"><i class="p-icon--information p-side-navigation__icon"></i>First level link</a>
+      <a class="p-side-navigation__link" href="#"><i class="p-icon--information {% if is_dark %}is-light{% endif %} p-side-navigation__icon"></i>First level link</a>
     </li>
     <li class="p-side-navigation__item">
-      <a class="p-side-navigation__link" href="#"><i class="p-icon--help p-side-navigation__icon"></i>First level link with status<div class="p-side-navigation__status"><i class="p-icon--error"></i></div></a>
+      <a class="p-side-navigation__link" href="#"><i class="p-icon--help {% if is_dark %}is-light{% endif %} p-side-navigation__icon"></i>First level link with status<div class="p-side-navigation__status"><i class="p-icon--error {% if is_dark %}is-light{% endif %}"></i></div></a>
     </li>
     <li class="p-side-navigation__item">
-      <a class="p-side-navigation__link" href="#"><i class="p-icon--user p-side-navigation__icon"></i>Link with children</a>
+      <a class="p-side-navigation__link" href="#"><i class="p-icon--user {% if is_dark %}is-light{% endif %} p-side-navigation__icon"></i>Link with children</a>
       <ul class="p-side-navigation__list">
         <li class="p-side-navigation__item">
-          <a class="p-side-navigation__link" href="#">Second level link<div class="p-side-navigation__status"><i class="p-icon--warning"></i></div></a>
+          <a class="p-side-navigation__link" href="#">Second level link<div class="p-side-navigation__status"><i class="p-icon--warning {% if is_dark %}is-light{% endif %}"></i></div></a>
         </li>
         <li class="p-side-navigation__item ">
           <span class="p-side-navigation__text">Second level text</span>
@@ -31,20 +31,20 @@
               <a class="p-side-navigation__link is-active" href="#">Third level active link</a>
             </li>
             <li class="p-side-navigation__item ">
-              <a class="p-side-navigation__link" href="#">Third level link with status<div class="p-side-navigation__status"><i class="p-icon--success"></i></div></a>
+              <a class="p-side-navigation__link" href="#">Third level link with status<div class="p-side-navigation__status"><i class="p-icon--success {% if is_dark %}is-light{% endif %}"></i></div></a>
             </li>
           </ul>
         </li>
       </ul>
     </li>
     <li class="p-side-navigation__item ">
-      <span class="p-side-navigation__text"><i class="p-icon--collapse p-side-navigation__icon"></i>First level item that is not a link</span>
+      <span class="p-side-navigation__text"><i class="p-icon--collapse {% if is_dark %}is-light{% endif %} p-side-navigation__icon"></i>First level item that is not a link</span>
     </li>
     <li class="p-side-navigation__item ">
       <a class="p-side-navigation__link" href="#">First level link with a label<div class="p-side-navigation__status"><span class="p-label--new">New</span></div></a>
     </li>
     <li class="p-side-navigation__item ">
-      <a class="p-side-navigation__link" href="#"><i class="p-icon--search p-side-navigation__icon"></i>First level link with a label is long and wraps wraps wraps wraps wraps wraps<div class="p-side-navigation__status"><span class="p-label--updated">Updated</span></div></a>
+      <a class="p-side-navigation__link" href="#"><i class="p-icon--search {% if is_dark %}is-light{% endif %} p-side-navigation__icon"></i>First level link with a label is long and wraps wraps wraps wraps wraps wraps<div class="p-side-navigation__status"><span class="p-label--updated">Updated</span></div></a>
     </li>
     <li class="p-side-navigation__item ">
       <a class="p-side-navigation__link" href="#"><span class="u-truncate">First level link with label that is truncated because it's long long long long long long long</span><div class="p-side-navigation__status"><span class="p-label--validated">Validated</span></div></a>

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 %}
+<style>body { background: #111 }</style>
+
+<div class="row">
+  <div class="col-4">
+      {% include "docs/examples/patterns/side-navigation/_default.html" %}
+  </div>
+  <div class="col-4" style="background: #003b4e">
+      {% include "docs/examples/patterns/side-navigation/_icons.html" %}
+  </div>
+</div>
+
+<script>
+  {% include "docs/examples/patterns/side-navigation/_script.js" %}
+</script>
+{% endblock %}