Add paper background support to side navigation

scss/_patterns_side-navigation.scss

@@ -539,7 +539,7 @@
     .p-side-navigation--raw-html {
       @include vf-side-navigation-raw-html-theme-light;
 
-      &.is-light {
+      &.is-dark {
         @include vf-side-navigation-raw-html-theme-dark;
       }
     }
@@ -723,6 +723,21 @@
     $color-sidenav-list-border: $colors--light-theme--border-low-contrast,
     $color-sidenav-toggle-icon: $colors--light-theme--text-inactive
   );
+
+  .is-paper &,
+  &.is-paper {
+    @include vf-side-navigation-theme(
+      $color-sidenav-text-default: $colors--light-theme--text-inactive,
+      $color-sidenav-background-default: $color-paper,
+      $color-sidenav-background-overlay: $colors--light-theme--background-overlay,
+      $color-sidenav-text-active: $colors--light-theme--text-default,
+      $color-sidenav-item-background-active: $colors--paper-theme--background-active,
+      $color-sidenav-item-background-hover: $colors--paper-theme--background-hover,
+      $color-sidenav-item-border-highlight: $colors--light-theme--text-default,
+      $color-sidenav-list-border: $colors--light-theme--border-low-contrast,
+      $color-sidenav-toggle-icon: $colors--light-theme--text-inactive
+    );
+  }
 }
 
 @mixin vf-side-navigation-theme-dark {
@@ -804,6 +819,18 @@
     $color-sidenav-item-border-highlight: $colors--light-theme--text-default,
     $color-sidenav-list-border: $colors--light-theme--border-low-contrast
   );
+
+  .is-paper &,
+  &.is-paper {
+    @include vf-side-navigation-raw-html-theme(
+      $color-sidenav-text-default: $colors--light-theme--text-inactive,
+      $color-sidenav-text-active: $colors--light-theme--text-default,
+      $color-sidenav-item-background-active: $colors--paper-theme--background-active,
+      $color-sidenav-item-background-hover: $colors--paper-theme--background-hover,
+      $color-sidenav-item-border-highlight: $colors--light-theme--text-default,
+      $color-sidenav-list-border: $colors--light-theme--border-low-contrast
+    );
+  }
 }
 
 @mixin vf-side-navigation-raw-html-theme-dark {

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

@@ -9,7 +9,7 @@
   <!-- dark background color should be changed via color theme variables, inline style is used here for example purposes -->
   {% endif %}
   <nav class="p-side-navigation__drawer" aria-label="Example side navigation with icons"
-    style="background: {% if is_dark %}#003b4e{% else %}#f7f7f7{% endif %}">
+    style="background: {% if is_dark %}#003b4e{% elif is_paper %}transparent{% else %}#f7f7f7{% endif %}">
     <div class="p-side-navigation__drawer-header" style="background: {% if is_dark %}#003b4e{% else %}#f7f7f7{% endif %}">
       <a href="#" class="p-side-navigation__toggle--in-drawer js-drawer-toggle" aria-controls="drawer-icons">
         Toggle side navigation

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

@@ -0,0 +1,26 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Side navigation / Paper{% endblock %}
+
+{% block standalone_css %}patterns_side-navigation{% endblock %}
+
+{% set is_paper = True %}
+{% block content %}
+<div class="row">
+  <div class="col-4">
+      {% include "docs/examples/patterns/side-navigation/_default.html" %}
+  </div>
+  <div class="col-4">
+      {% include "docs/examples/patterns/side-navigation/_icons.html" %}
+  </div>
+  <div class="col-4">
+    {% with is_sticky = True %}
+      {% include "docs/examples/patterns/side-navigation/_default.html" %}
+    {% endwith %}
+  </div>
+</div>
+
+<script>
+  {% include "docs/examples/patterns/side-navigation/_example_script.js" %}
+  {% include "docs/examples/patterns/side-navigation/_toggle_script.js" %}
+</script>
+{% endblock %}