v4: Colors redux

_data/colors.yml

@@ -0,0 +1,26 @@
+- name: blue
+  hex: "#007aff"
+- name: indigo
+  hex: "#2b29bb"
+- name: purple
+  hex: "#882ae0"
+- name: pink
+  hex: "#f14095"
+- name: red
+  hex: "#ea0242"
+- name: orange
+  hex: "#ff8d00"
+- name: yellow
+  hex: "#ffec00"
+- name: green
+  hex: "#34da36"
+- name: teal
+  hex: "#1dde8e"
+- name: cyan
+  hex: "#08eff3"
+- name: white
+  hex: "#fff"
+- name: gray
+  hex: "#464a4c"
+- name: gray-dark
+  hex: "#292b2c"

_data/grays.yml

@@ -0,0 +1,18 @@
+- name: 100
+  hex: "#f8f9fa"
+- name: 200
+  hex: "#ebedef"
+- name: 300
+  hex: "#ced3d8"
+- name: 400
+  hex: "#abb3bd"
+- name: 500
+  hex: "#7c8a99"
+- name: 600
+  hex: "#55626f"
+- name: 700
+  hex: "#4a5560"
+- name: 800
+  hex: "#384048"
+- name: 900
+  hex: "#131619"

_data/theme-colors.yml

@@ -0,0 +1,16 @@
+- name: primary
+  hex: "#007aff"
+- name: secondary
+  hex: "#868e96"
+- name: success
+  hex: "#28a745"
+- name: danger
+  hex: "#dc3545"
+- name: warning
+  hex: "#ffc107"
+- name: info
+  hex: "#17a2b8"
+- name: light
+  hex: "#f8f9fa"
+- name: dark
+  hex: "#343a40"

_includes/docs-navbar.html

@@ -1,4 +1,4 @@
-<header class="navbar navbar-inverse flex-column flex-md-row bd-navbar">
+<header class="navbar navbar-dark flex-column flex-md-row bd-navbar">
   <a class="navbar-brand mr-0 mr-md-2" href="{{ site.baseurl }}/" aria-label="Bootstrap">
     {% include icons/bootstrap.svg width="36" height="36" class="d-block" %}
   </a>

assets/scss/_colors.scss

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

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($blue, 25%);
   border-radius: .25rem;
 }
 
@@ -375,28 +375,11 @@
   overflow: auto;
 }
 
-// Helpers
-.bd-example > {
-  .bg-primary,
-  .bg-success,
-  .bg-info,
-  .bg-warning,
-  .bg-danger,
-  .bg-inverse,
-  .bg-faded {
-    &:not(.navbar) {
-      padding: .5rem;
-      margin-top: .5rem;
-      margin-bottom: .5rem;
-    }
-  }
-}
-
 .bd-example-border-utils {
-  [class^="border-"] {
+  [class^="border"] {
     display: inline-block;
-    width: 6rem;
-    height: 6rem;
+    width: 5rem;
+    height: 5rem;
     margin: .25rem;
     background-color: #f5f5f5;
     border: 1px solid;
@@ -428,5 +411,5 @@
 }
 .highlight pre code {
   font-size: inherit;
-  color: $gray-dark; // Effectively the base text color
+  color: $gray-900; // Effectively the base text color
 }

assets/scss/_featurettes.scss

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

assets/scss/_footer.scss

@@ -11,7 +11,7 @@
 
   a {
     font-weight: 500;
-    color: $gray;
+    color: $gray-700;
 
     &:hover,
     &:focus {

assets/scss/_nav.scss

@@ -66,7 +66,7 @@
 
   .dropdown-item.active {
     font-weight: 500;
-    color: $gray-dark;
+    color: $gray-900;
     background-color: transparent;
     background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23292b2c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E");
     background-repeat: no-repeat;

assets/scss/_sidebar.scss

@@ -39,7 +39,7 @@
     color: #99979c;
 
     &:hover {
-      color: $brand-primary;
+      color: $blue;
       text-decoration: none;
     }
   }
@@ -103,7 +103,7 @@
 
 .bd-search-docs-toggle {
   line-height: 1;
-  color: $gray-dark;
+  color: $gray-900;
 }
 
 .bd-sidenav {

assets/scss/docs.scss

@@ -10,7 +10,7 @@
 //
 // Background information on nomenclature and architecture decisions here.
 //
-// - Bootstrap variables and mixins are included for easy reuse.
+// - Bootstrap functions, variables, and mixins are included for easy reuse.
 //   Doing so gives us access to the same core utilities provided by Bootstrap.
 //   For example, consistent media queries through those mixins.
 //
@@ -48,6 +48,7 @@
 @import "team";
 @import "browser-bugs";
 @import "brand";
+@import "colors";
 @import "clipboard-js";
 
 // Load docs dependencies

docs/4.0/components/alerts.md

@@ -11,18 +11,10 @@ toc: true
 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).
 
 {% example html %}
-<div class="alert alert-success" role="alert">
-  <strong>Well done!</strong> You successfully read this important alert message.
-</div>
-<div class="alert alert-info" 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">
-  <strong>Warning!</strong> Better check yourself, you're not looking too good.
-</div>
-<div class="alert alert-danger" role="alert">
-  <strong>Oh snap!</strong> Change a few things up and try submitting again.
-</div>
+{% for color in site.data.theme-colors %}
+<div class="alert alert-{{ color.name }}" role="alert">
+  This is a {{ color.name }} alert—check it out!
+</div>{% endfor %}
 {% endexample %}
 
 {% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
@@ -33,18 +25,10 @@ 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">
-  <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">
-  <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">
-  <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">
-  <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
-</div>
+{% for color in site.data.theme-colors %}
+<div class="alert alert-{{ color.name }}" role="alert">
+  This is a {{ color.name }} alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>{% endfor %}
 {% endexample %}
 
 ### Additional content

docs/4.0/components/badge.md

@@ -11,34 +11,30 @@ toc: true
 Badges scale to match the size of the immediate parent element by using relative font sizing and `em` units.
 
 <div class="bd-example">
-<div class="h1">Example heading <span class="badge badge-default">New</span></div>
-<div class="h2">Example heading <span class="badge badge-default">New</span></div>
-<div class="h3">Example heading <span class="badge badge-default">New</span></div>
-<div class="h4">Example heading <span class="badge badge-default">New</span></div>
-<div class="h5">Example heading <span class="badge badge-default">New</span></div>
-<div class="h6">Example heading <span class="badge badge-default">New</span></div>
+<div class="h1">Example heading <span class="badge badge-secondary">New</span></div>
+<div class="h2">Example heading <span class="badge badge-secondary">New</span></div>
+<div class="h3">Example heading <span class="badge badge-secondary">New</span></div>
+<div class="h4">Example heading <span class="badge badge-secondary">New</span></div>
+<div class="h5">Example heading <span class="badge badge-secondary">New</span></div>
+<div class="h6">Example heading <span class="badge badge-secondary">New</span></div>
 </div>
 
 {% highlight 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 badge-secondary">New</span></h1>
+<h2>Example heading <span class="badge badge-secondary">New</span></h2>
+<h3>Example heading <span class="badge badge-secondary">New</span></h3>
+<h4>Example heading <span class="badge badge-secondary">New</span></h4>
+<h5>Example heading <span class="badge badge-secondary">New</span></h5>
+<h6>Example heading <span class="badge badge-secondary">New</span></h6>
 {% endhighlight %}
 
 ## Contextual variations
 
 Add any of the below mentioned modifier classes to change the appearance of a badge.
 
 {% 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.theme-colors %}
+<span class="badge badge-{{ color.name }}">{{ color.name | capitalize }}</span>{% endfor %}
 {% endexample %}
 
 {% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
@@ -49,23 +45,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.theme-colors %}
+<span class="badge badge-pill badge-{{ color.name }}">{{ color.name | capitalize }}</span>{% endfor %}
 {% endexample %}
 
 ## Links
 
 Using the `.badge` classes with the `<a>` element quickly provide _actionable_ badges with hover and focus 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.theme-colors %}
+<a href="#" class="badge badge-{{ color.name }}">{{ color.name | capitalize }}</a>{% endfor %}
 {% endexample %}

docs/4.0/components/buttons.md

@@ -9,28 +9,12 @@ toc: true
 
 ## Examples
 
-Bootstrap includes six predefined button styles, each serving its own semantic purpose.
+Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.
 
 {% example html %}
-<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
-<button type="button" class="btn btn-primary">Primary</button>
+{% for color in site.data.theme-colors %}
+<button type="button" class="btn btn-{{ color.name }}">{{ color.name | capitalize }}</button>{% endfor %}
 
-<!-- Secondary, outline button -->
-<button type="button" class="btn btn-secondary">Secondary</button>
-
-<!-- Indicates a successful or positive action -->
-<button type="button" class="btn btn-success">Success</button>
-
-<!-- Contextual button for informational alert messages -->
-<button type="button" class="btn btn-info">Info</button>
-
-<!-- Indicates caution should be taken with this action -->
-<button type="button" class="btn btn-warning">Warning</button>
-
-<!-- Indicates a dangerous or potentially negative action -->
-<button type="button" class="btn btn-danger">Danger</button>
-
-<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
 <button type="button" class="btn btn-link">Link</button>
 {% endexample %}
 
@@ -56,15 +40,10 @@ When using button classes on `<a>` elements that are used to trigger in-page fun
 In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the `.btn-outline-*` ones to remove all background images and colors on any button.
 
 {% example html %}
-<button type="button" class="btn btn-outline-primary">Primary</button>
-<button type="button" class="btn btn-outline-secondary">Secondary</button>
-<button type="button" class="btn btn-outline-success">Success</button>
-<button type="button" class="btn btn-outline-info">Info</button>
-<button type="button" class="btn btn-outline-warning">Warning</button>
-<button type="button" class="btn btn-outline-danger">Danger</button>
+{% for color in site.data.theme-colors %}
+<button type="button" class="btn btn-outline-{{ color.name }}">{{ color.name | capitalize }}</button>{% endfor %}
 {% endexample %}
 
-
 ## Sizes
 
 Fancy larger or smaller buttons? Add `.btn-lg` or `.btn-sm` for additional sizes.