v4 Color update

docs/_data/colors.yml

@@ -0,0 +1,32 @@
+- name: red
+  hex: "#d9534f"
+
+- name: orange
+  hex: "#f0ad4e"
+
+- name: yellow
+  hex: "#ffd500"
+
+- name: green
+  hex: "#5cb85c"
+
+- name: teal
+  hex: "#5bc0de"
+
+- name: blue
+  hex: "#5cb85c"
+
+- name: pink
+  hex: "#ff5b77"
+
+- name: purple
+  hex: "#613d7c"
+
+- name: white
+  hex: "#fff"
+
+- name: gray
+  hex: "#464a4c"
+
+- name: gray-dark
+  hex: "#292b2c"

docs/assets/scss/_colors.scss

@@ -0,0 +1,10 @@
+//
+// Docs color palette classes
+//
+
+@each $color, $value in $colors {
+  .swatch-#{$color} {
+    background-color: #{$value};
+    @include color-yiq($value);
+  }
+}

docs/assets/scss/_component-examples.scss

@@ -86,15 +86,15 @@
 .bd-example-container-header {
   height: 3rem;
   margin-bottom: .5rem;
-  background-color: lighten($brand-primary, 50%);
+  background-color: lighten($blue, 50%);
   border-radius: .25rem;
 }
 
 .bd-example-container-sidebar {
   float: right;
   width: 4rem;
   height: 8rem;
-  background-color: lighten($brand-warning, 25%);
+  background-color: lighten($orange, 25%);
   border-radius: .25rem;
 }
 
@@ -210,6 +210,12 @@
 }
 
 // Buttons
+.bd-example {
+  > .btn {
+    margin: .25rem;
+  }
+}
+
 .bd-example > .btn-group {
   margin-top: .25rem;
   margin-bottom: .25rem;
@@ -357,12 +363,12 @@
 
 .bd-example-border-utils {
   [class^="border-"] {
-    display: inline-block;
-    width: 6rem;
-    height: 6rem;
-    margin: .25rem;
-    background-color: #f5f5f5;
-    border: 1px solid;
+    // display: inline-block;
+    // width: 6rem;
+    // height: 6rem;
+    // margin: .25rem;
+    // background-color: #f5f5f5;
+    // border: 1px solid;
   }
 }
 

docs/assets/scss/_featurettes.scss

@@ -63,7 +63,7 @@
   color: #333;
 }
 .bd-featurette-img:hover {
-  color: $brand-primary;
+  color: $blue;
   text-decoration: none;
 }
 .bd-featurette-img img {

docs/assets/scss/_sidebar.scss

@@ -63,7 +63,7 @@
 }
 .bd-toc-link:hover,
 .bd-toc-link:focus {
-  color: $brand-primary;
+  color: $blue;
   text-decoration: none;
 }
 .active > .bd-toc-link {
@@ -94,7 +94,7 @@
 }
 .bd-sidebar .nav > li > a:hover,
 .bd-sidebar .nav > li > a:focus {
-  color: $brand-primary;
+  color: $blue;
   text-decoration: none;
   background-color: transparent;
 }

docs/assets/scss/docs.scss

@@ -57,6 +57,7 @@ $bd-info:           #5bc0de;
 @import "examples";
 @import "team";
 @import "browser-bugs";
+@import "colors";
 @import "brand";
 @import "clipboard-js";
 

docs/components/alerts.md

@@ -14,19 +14,19 @@ Provide contextual feedback messages for typical user actions with the handful o
 
 ## Examples
 
-Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the four **required** contextual classes (e.g., `.alert-success`). For inline dismissal, use the [alerts jQuery plugin](#dismissing).
+Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the four **required** contextual classes (e.g., `.alert-green`). For inline dismissal, use the [alerts jQuery plugin](#dismissing).
 
 {% example html %}
-<div class="alert alert-success" role="alert">
+<div class="alert alert-green" role="alert">
   <strong>Well done!</strong> You successfully read this important alert message.
 </div>
-<div class="alert alert-info" role="alert">
+<div class="alert alert-teal" role="alert">
   <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
 </div>
-<div class="alert alert-warning" role="alert">
+<div class="alert alert-orange" role="alert">
   <strong>Warning!</strong> Better check yourself, you're not looking too good.
 </div>
-<div class="alert alert-danger" role="alert">
+<div class="alert alert-red" role="alert">
   <strong>Oh snap!</strong> Change a few things up and try submitting again.
 </div>
 {% endexample %}
@@ -39,16 +39,16 @@ Alerts are available for any length of text, as well as an optional dismiss butt
 Use the `.alert-link` utility class to quickly provide matching colored links within any alert.
 
 {% example html %}
-<div class="alert alert-success" role="alert">
+<div class="alert alert-green" role="alert">
   <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
 </div>
-<div class="alert alert-info" role="alert">
+<div class="alert alert-teal" role="alert">
   <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
 </div>
-<div class="alert alert-warning" role="alert">
+<div class="alert alert-orange" role="alert">
   <strong>Warning!</strong> Better check yourself, you're <a href="#" class="alert-link">not looking too good</a>.
 </div>
-<div class="alert alert-danger" role="alert">
+<div class="alert alert-red" role="alert">
   <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
 </div>
 {% endexample %}
@@ -58,7 +58,7 @@ Use the `.alert-link` utility class to quickly provide matching colored links wi
 Alerts can also contain additional HTML elements like headings, paragraphs and dividers.
 
 {% example html %}
-<div class="alert alert-success" role="alert">
+<div class="alert alert-green" role="alert">
   <h4 class="alert-heading">Well done!</h4>
   <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
   <hr>
@@ -79,7 +79,7 @@ Using the alert JavaScript plugin, it's possible to dismiss any alert inline. He
 You can see this in action with a live demo:
 
 {% example html %}
-<div class="alert alert-warning alert-dismissible fade show" role="alert">
+<div class="alert alert-orange alert-dismissible fade show" role="alert">
   <button type="button" class="close" data-dismiss="alert" aria-label="Close">
     <span aria-hidden="true">&times;</span>
   </button>

docs/components/badge.md

@@ -5,7 +5,7 @@ description: Documentation and examples for badges, our small count and labeling
 group: components
 ---
 
-Small and adaptive tag for adding context to just about any content.
+Small and adaptive tag for adding context to just about any content. Use with background utilities to mix and match colors as you need them.
 
 ## Contents
 
@@ -17,25 +17,21 @@ Small and adaptive tag for adding context to just about any content.
 Badges scale to match the size of the immediate parent element by using relative font sizing and `em` units.
 
 {% example html %}
-<h1>Example heading <span class="badge badge-default">New</span></h1>
-<h2>Example heading <span class="badge badge-default">New</span></h2>
-<h3>Example heading <span class="badge badge-default">New</span></h3>
-<h4>Example heading <span class="badge badge-default">New</span></h4>
-<h5>Example heading <span class="badge badge-default">New</span></h5>
-<h6>Example heading <span class="badge badge-default">New</span></h6>
+<h1>Example heading <span class="badge bg-gray">New</span></h1>
+<h2>Example heading <span class="badge bg-gray">New</span></h2>
+<h3>Example heading <span class="badge bg-gray">New</span></h3>
+<h4>Example heading <span class="badge bg-gray">New</span></h4>
+<h5>Example heading <span class="badge bg-gray">New</span></h5>
+<h6>Example heading <span class="badge bg-gray">New</span></h6>
 {% endexample %}
 
 ## Contextual variations
 
-Add any of the below mentioned modifier classes to change the appearance of a badge.
+Add any of the below mentioned modifier classes to change the appearance of a badge. **Note the addition of `.text-gray` on the badge with `.bg-white`.**
 
 {% example html %}
-<span class="badge badge-default">Default</span>
-<span class="badge badge-primary">Primary</span>
-<span class="badge badge-success">Success</span>
-<span class="badge badge-info">Info</span>
-<span class="badge badge-warning">Warning</span>
-<span class="badge badge-danger">Danger</span>
+{% for color in site.data.colors %}
+<span class="badge bg-{{ color.name }}{% if color.name == "white" %} text-gray{% endif %}">{{ color.name | capitalize }}</span>{% endfor %}
 {% endexample %}
 
 {% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
@@ -46,23 +42,15 @@ Add any of the below mentioned modifier classes to change the appearance of a ba
 Use the `.badge-pill` modifier class to make badges more rounded (with a larger `border-radius` and additional horizontal `padding`). Useful if you miss the badges from v3.
 
 {% example html %}
-<span class="badge badge-pill badge-default">Default</span>
-<span class="badge badge-pill badge-primary">Primary</span>
-<span class="badge badge-pill badge-success">Success</span>
-<span class="badge badge-pill badge-info">Info</span>
-<span class="badge badge-pill badge-warning">Warning</span>
-<span class="badge badge-pill badge-danger">Danger</span>
+{% for color in site.data.colors %}
+<span class="badge badge-pill bg-{{ color.name }}{% if color.name == "white" %} text-gray{% endif %}">{{ color.name | capitalize }}</span>{% endfor %}
 {% endexample %}
 
 ## Links
 
-Using the `.badge` classes with the `<a>` element quickly provide _actionable_ badges with hover and focus states.
+Using the `.badge` classes with the `<a>` element quickly provide _actionable_ badges with hover states.
 
 {% example html %}
-<a href="#" class="badge badge-default">Default</a>
-<a href="#" class="badge badge-primary">Primary</a>
-<a href="#" class="badge badge-success">Success</a>
-<a href="#" class="badge badge-info">Info</a>
-<a href="#" class="badge badge-warning">Warning</a>
-<a href="#" class="badge badge-danger">Danger</a>
+{% for color in site.data.colors %}
+<a href="#" class="badge bg-{{ color.name }}{% if color.name == "white" %} text-gray{% endif %}">{{ color.name | capitalize }}</a>{% endfor %}
 {% endexample %}