rewrite navbar once more for lower key styles and a new take on modifiers for improved customization

3 files changed, 137 insertions, 149 deletions

diff --git a/docs/components/navbar.md b/docs/components/navbar.md
index 5cdf15803..d8ecfd21e 100644
--- a/docs/components/navbar.md
+++ b/docs/components/navbar.md
@@ -4,7 +4,7 @@ title: Navbar
 group: components
 ---
 
-The navbar is a simple wrapper for positioning branding, navigation, and other elements. It's easily extensible and, with the help of our collapse plugin, it can easily integrate offscreen content.
+The navbar is a simple wrapper for positioning branding, navigation, and other elements into a concise navigation header. It's easily extensible and, with the help of our collapse plugin, it can easily integrate offscreen content.
 
 ## Contents
 
@@ -28,11 +28,12 @@ Navbars come with built-in support for a handful of sub-components. Mix and matc
 - `.navbar-brand` for your company, product, or project name
 - `.navbar-nav` for a full-height and lightweight navigation (including support for dropdowns)
 - `.navbar-form` for vertically centering default-sized inputs and buttons.
+- `.navbar-toggler` for use with our collapse plugin and other navigation toggling behaviors.
 
 Here's an example of all the sub-components included in a default, light navbar:
 
 {% example html %}
-<nav class="navbar navbar-default">
+<nav class="navbar navbar-light bg-faded">
   <a class="navbar-brand" href="#">Navbar</a>
   <ul class="nav navbar-nav">
     <li class="nav-item active">
@@ -55,33 +56,91 @@ Here's an example of all the sub-components included in a default, light navbar:
 </nav>
 {% endexample %}
 
-## Inverse theme
+## Color schemes
 
-When you want a darker navbar with light text colors, replace the `.navbar-default` with `.navbar-inverse`.
+Theming the navbar has never been easier thanks to the combination of a simple link color modifier class and `background-color` utilities. Put another way, you specify light or dark and apply a background color.
 
-{% example html %}
-<nav class="navbar navbar-inverse">
-  <a class="navbar-brand" href="#">Navbar</a>
-  <ul class="nav navbar-nav">
-    <li class="nav-item active">
-      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
-    </li>
-    <li class="nav-item">
-      <a class="nav-link" href="#">Features</a>
-    </li>
-    <li class="nav-item">
-      <a class="nav-link" href="#">Pricing</a>
-    </li>
-    <li class="nav-item">
-      <a class="nav-link" href="#">About</a>
-    </li>
-  </ul>
-  <form class="form-inline navbar-form pull-right">
-    <input class="form-control" type="text" placeholder="Search">
-    <button class="btn btn-success-outline" type="submit">Search</button>
-  </form>
+Here are some examples to show what we mean.
+
+<div class="bd-example">
+  <nav class="navbar navbar-dark bg-inverse">
+    <a class="navbar-brand" href="#">Navbar</a>
+    <ul class="nav navbar-nav">
+      <li class="nav-item active">
+        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">Features</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">Pricing</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">About</a>
+      </li>
+    </ul>
+    <form class="form-inline navbar-form pull-right">
+      <input class="form-control" type="text" placeholder="Search">
+      <button class="btn btn-info-outline" type="submit">Search</button>
+    </form>
+  </nav>
+  <nav class="navbar navbar-dark bg-primary">
+    <a class="navbar-brand" href="#">Navbar</a>
+    <ul class="nav navbar-nav">
+      <li class="nav-item active">
+        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">Features</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">Pricing</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">About</a>
+      </li>
+    </ul>
+    <form class="form-inline navbar-form pull-right">
+      <input class="form-control" type="text" placeholder="Search">
+      <button class="btn btn-secondary-outline" type="submit">Search</button>
+    </form>
+  </nav>
+  <nav class="navbar navbar-light" style="background-color: #e3f2fd;">
+    <a class="navbar-brand" href="#">Navbar</a>
+    <ul class="nav navbar-nav">
+      <li class="nav-item active">
+        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">Features</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">Pricing</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">About</a>
+      </li>
+    </ul>
+    <form class="form-inline navbar-form pull-right">
+      <input class="form-control" type="text" placeholder="Search">
+      <button class="btn btn-primary-outline" type="submit">Search</button>
+    </form>
+  </nav>
+</div>
+
+{% highlight html %}
+<nav class="navbar navbar-dark bg-inverse">
+  <!-- Navbar content -->
 </nav>
-{% endexample %}
+
+<nav class="navbar navbar-dark bg-primary">
+  <!-- Navbar content -->
+</nav>
+
+<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
+  <!-- Navbar content -->
+</nav>
+{% endhighlight %}
 
 ## Containers
 
@@ -89,14 +148,14 @@ Although it's not required, you can wrap a navbar in a `.container` to center it
 
 {% example html %}
 <div class="container">
-  <nav class="navbar navbar-default">
+  <nav class="navbar navbar-light bg-faded">
     <a class="navbar-brand" href="#">Navbar</a>
   </nav>
 </div>
 {% endexample %}
 
 {% example html %}
-<nav class="navbar navbar-default">
+<nav class="navbar navbar-light bg-faded">
   <div class="container">
     <a class="navbar-brand" href="#">Navbar</a>
   </div>
@@ -109,12 +168,12 @@ Our collapse plugin allows you to use a `<button>` or `<a>` to toggle hidden con
 
 {% example html %}
 <div class="collapse" id="exCollapsingNavbar">
-  <div class="inverse p-a">
+  <div class="bg-inverse p-a">
     <h4>Collapsed content</h4>
     <span class="text-muted">Toggleable via the navbar brand.</span>
   </div>
 </div>
-<nav class="navbar navbar-default">
+<nav class="navbar navbar-light bg-faded">
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar">
     &#9776;
   </button>
@@ -124,7 +183,7 @@ Our collapse plugin allows you to use a `<button>` or `<a>` to toggle hidden con
 For more complex navbar patterns, like those used in Bootstrap v3, use the `.navbar-toggleable-*` classes in conjunction with the `.navbar-toggler`. These classes override our responsive utilities to show navigation only when content is meant to be shown.
 
 {% example html %}
-<nav class="navbar navbar-default">
+<nav class="navbar navbar-light bg-faded">
   <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
     &#9776;
   </button>
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index b1cdb0ea5..b845ff32d 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -5,6 +5,7 @@
 
 .navbar {
   position: relative;
+  padding: $navbar-padding-vertical $navbar-padding-horizontal;
   @include clearfix;
 
   @include media-breakpoint-up(sm) {
@@ -69,13 +70,12 @@
 
 .navbar-brand {
   float: left;
-  padding: .95rem 1rem;
+  margin-right: 1rem;
+  padding-top:    .25rem;
+  padding-bottom: .25rem;
   font-size: $font-size-lg;
-  line-height: 1;
-  color: $navbar-default-brand-color;
 
   @include hover-focus {
-    color: $navbar-default-brand-hover-color;
     text-decoration: none;
   }
 
@@ -92,11 +92,8 @@
 
 .navbar-toggler {
   padding: .5rem .75rem;
-  margin-top: .375rem;
-  margin-bottom: .375rem;
   font-size: $font-size-lg;
   line-height: 1;
-  color: $navbar-default-link-color;
   background: none;
   border: $border-width solid transparent;
   @include border-radius($btn-border-radius);
@@ -132,83 +129,56 @@
 
   .nav-link {
     display: block;
-    padding: .95rem .75rem;
-    line-height: 1.25; // Match the `.navbar-brand`
-    color: $navbar-default-link-color;
-
-    @include hover-focus {
-      color: $navbar-default-link-hover-color;
-      background-color: $navbar-default-link-hover-bg;
-    }
-  }
-
-  .open > .nav-link,
-  .active > .nav-link,
-  .nav-link.open,
-  .nav-link.active {
-    @include plain-hover-focus {
-      color: $navbar-default-link-active-color;
-      cursor: default;
-      background-color: $navbar-default-link-active-bg;
-    }
+    padding: .425rem .5rem;
   }
 }
 
-
-// Forms
-//
-// Additional modifier class to add to `.form-inline` to vertically center forms.
-
-.navbar-form {
-  margin-top: .375rem;
-  margin-bottom: .375rem;
-  margin-right: 1rem;
-}
-
-
-//
-// Alternate navbars
-//
-
-// todo: audit these styles
-
-// Default navbar
-.navbar-default {
-  background-color: $navbar-default-bg;
-  border-color: $navbar-default-border;
-
+// Dark links against a light background
+.navbar-light {
   .navbar-brand {
-    color: $navbar-default-brand-color;
+    color: $navbar-light-active-color;
 
     @include hover-focus {
-      color: $navbar-default-brand-hover-color;
-      background-color: $navbar-default-brand-hover-bg;
+      color: $navbar-light-active-color;
     }
   }
-}
 
-// Inverse navbar
+  .navbar-nav {
+    .nav-link {
+      color: $navbar-light-color;
 
-.navbar-inverse {
-  background-color: $navbar-inverse-bg;
-  border-color: $navbar-inverse-border;
+      @include hover-focus {
+        color: $navbar-light-hover-color;
+      }
+    }
 
+    .open > .nav-link,
+    .active > .nav-link,
+    .nav-link.open,
+    .nav-link.active {
+      @include plain-hover-focus {
+        color: $navbar-light-active-color;
+      }
+    }
+  }
+}
+
+// White links against a dark background
+.navbar-dark {
   .navbar-brand {
-    color: $navbar-inverse-brand-color;
+    color: $navbar-dark-active-color;
 
     @include hover-focus {
-      color: $navbar-inverse-brand-hover-color;
-      background-color: $navbar-inverse-brand-hover-bg;
+      color: $navbar-dark-active-color;
     }
   }
 
   .navbar-nav {
     .nav-link {
-      color: $navbar-inverse-link-color;
+      color: $navbar-dark-color;
 
       @include hover-focus {
-        color: $navbar-inverse-link-hover-color;
-        background-color: $navbar-inverse-link-hover-bg;
+        color: $navbar-dark-hover-color;
       }
     }
 
@@ -217,13 +187,8 @@
     .nav-link.open,
     .nav-link.active {
       @include plain-hover-focus {
-        color: $navbar-inverse-link-active-color;
-        background-color: $navbar-inverse-link-active-bg;
+        color: $navbar-dark-active-color;
       }
     }
   }
-
-  .navbar-toggler {
-    color: $navbar-inverse-link-color;
-  }
 }
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 7c8b33721..b655a3f08 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -336,56 +336,20 @@ $zindex-modal:             1050 !default;
 
 
 // Navbar
-//
-//
 
-// Basics of a navbar
-$navbar-margin-bottom:             $spacer-y !default;
-$navbar-border-radius:             $border-radius !default;
-$navbar-padding-horizontal:        $spacer !default;
-$navbar-padding-vertical:          ($spacer / 2) !default;
-
-$navbar-default-color:             #777 !default;
-$navbar-default-bg:                #f8f8f8 !default;
-$navbar-default-border:            darken($navbar-default-bg, 6.5%) !default;
-
-$navbar-default-link-color:                #777 !default;
-$navbar-default-link-hover-color:          #555 !default;
-$navbar-default-link-hover-bg:             transparent !default;
-$navbar-default-link-active-color:         #333 !default;
-$navbar-default-link-active-bg:            darken($navbar-default-bg, 5%) !default;
-$navbar-default-link-disabled-color:       #ccc !default;
-$navbar-default-link-disabled-bg:          transparent !default;
-
-$navbar-default-brand-color:               $navbar-default-link-color !default;
-$navbar-default-brand-hover-color:         $navbar-default-link-hover-color !default;
-$navbar-default-brand-hover-bg:            transparent !default;
-
-$navbar-default-toggle-hover-bg:           #ddd !default;
-$navbar-default-toggle-icon-bar-bg:        #888 !default;
-$navbar-default-toggle-border-color:       #ddd !default;
-
-
-// Inverted navbar
-$navbar-inverse-color:                      lighten($gray-light, 12%) !default;
-$navbar-inverse-bg:                         #373a3c !default;
-$navbar-inverse-border:                     darken($navbar-inverse-bg, 10%) !default;
-
-$navbar-inverse-link-color:                 lighten($gray-light, 15%) !default;
-$navbar-inverse-link-hover-color:           #fff !default;
-$navbar-inverse-link-hover-bg:              transparent !default;
-$navbar-inverse-link-active-color:          $navbar-inverse-link-hover-color !default;
-$navbar-inverse-link-active-bg:             darken($navbar-inverse-bg, 10%) !default;
-$navbar-inverse-link-disabled-color:        #444 !default;
-$navbar-inverse-link-disabled-bg:           transparent !default;
-
-$navbar-inverse-brand-color:                $navbar-inverse-link-color !default;
-$navbar-inverse-brand-hover-color:          #fff !default;
-$navbar-inverse-brand-hover-bg:             transparent !default;
-
-$navbar-inverse-toggle-hover-bg:            #333 !default;
-$navbar-inverse-toggle-icon-bar-bg:         #fff !default;
-$navbar-inverse-toggle-border-color:        #333 !default;
+$navbar-border-radius:              $border-radius !default;
+$navbar-padding-horizontal:         $spacer !default;
+$navbar-padding-vertical:           ($spacer / 2) !default;
+
+$navbar-dark-color:                 rgba(255,255,255,.5);
+$navbar-dark-hover-color:           rgba(255,255,255,.75);
+$navbar-dark-active-color:          rgba(255,255,255,1);
+$navbar-dark-disabled-color:        rgba(255,255,255,.25);
+
+$navbar-light-color:                rgba(0,0,0,.3);
+$navbar-light-hover-color:          rgba(0,0,0,.6);
+$navbar-light-active-color:         rgba(0,0,0,.8);
+$navbar-light-disabled-color:       rgba(0,0,0,.15);
 
 
 // Navs