Skip to content

Commit

Permalink
Updated color system
Browse files Browse the repository at this point in the history 
— Scales back the plans for a full color system in v4.0.0 to instead build on a core set of colors. No shades or tints are coming just yet, but soon.

— Rearranges the variables file a bit to clean things up.

— Drops all `$brand-` color vars for `${color}-` vars for less abstraction in the colors setup. This differs from #18462 in that we don't reassign the `${color}` vars into a Sass map with different names; it's now `$red` and `map-get($colors,  red)`.

— Updates tables, list groups, alerts, form validation, and some docs CSS to use the new color variables.
  • Loading branch information
@mdo
mdo committed May 1, 2017
1 parent 6ee8e6d commit 92080aa
Show file tree
Hide file tree
Showing 13 changed files with 162 additions and 218 deletions.
26 changes: 6 additions & 20 deletions docs/assets/scss/_colors.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,9 @@
// Docs color palette classes
//

.bg-red-light { background-color: $red-light; }
.bg-orange-light { background-color: $orange-light; }
.bg-yellow-light { background-color: $yellow-light; }
.bg-green-light { background-color: $green-light; }
.bg-teal-light { background-color: $teal-light; }
.bg-blue-light { background-color: $blue-light; }
.bg-pink-light { background-color: $pink-light; }
.bg-purple-light { background-color: $purple-light; }

.bg-red-dark { background-color: $red-dark; }
.bg-orange-dark { background-color: $orange-dark; }
.bg-yellow-dark { background-color: $yellow-dark; }
.bg-green-dark { background-color: $green-dark; }
.bg-teal-dark { background-color: $teal-dark; }
.bg-blue-dark { background-color: $blue-dark; }
.bg-pink-dark { background-color: $pink-dark; }
.bg-purple-dark { background-color: $purple-dark; }

.bg-gray-light { background-color: $gray-lighter; }
.bg-gray-dark { background-color: $gray-dark; }
@each $color, $value in $colors {
.swatch-#{$color} {
background-color: #{$value};
@include color-yiq($value);
}
}
4 changes: 2 additions & 2 deletions docs/assets/scss/_component-examples.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down
2 changes: 1 addition & 1 deletion docs/assets/scss/_featurettes.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@
color: #333;
}
.bd-featurette-img:hover {
color: $brand-primary;
color: $blue;
text-decoration: none;
}
.bd-featurette-img img {
Expand Down
4 changes: 2 additions & 2 deletions docs/assets/scss/_sidebar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@
}
.bd-toc-link:hover,
.bd-toc-link:focus {
color: $brand-primary;
color: $blue;
text-decoration: none;
}
.active > .bd-toc-link {
Expand Down Expand Up @@ -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;
}
Expand Down
22 changes: 11 additions & 11 deletions docs/components/alerts.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand All @@ -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 %}
Expand All @@ -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>
Expand All @@ -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>
Expand Down
16 changes: 8 additions & 8 deletions docs/components/list-group.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,10 +92,10 @@ Use contextual classes to style list items with a stateful background and color.
{% example html %}
<ul class="list-group">
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
<li class="list-group-item list-group-item-green">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-teal">Cras sit amet nibh libero</li>
<li class="list-group-item list-group-item-orange">Porta ac consectetur ac</li>
<li class="list-group-item list-group-item-red">Vestibulum at eros</li>
</ul>
{% endexample %}

Expand All @@ -104,10 +104,10 @@ Contextual classes also work with `.list-group-item-action`. Note the addition o
{% example html %}
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info">Cras sit amet nibh libero</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">Vestibulum at eros</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-green">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-teal">Cras sit amet nibh libero</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-orange">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-red">Vestibulum at eros</a>
</div>
{% endexample %}

Expand Down
40 changes: 20 additions & 20 deletions docs/content/tables.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -444,11 +444,11 @@ Use contextual classes to color table rows or individual cells.

| Class | Description |
| --- | --- |
| `.table-active` | Applies the hover color to a particular row or cell |
| `.table-success` | Indicates a successful or positive action |
| `.table-info` | Indicates a neutral informative change or action |
| `.table-warning` | Indicates a warning that might need attention |
| `.table-danger` | Indicates a dangerous or potentially negative action |
| `.table-blue` | Applies the hover color to a particular row or cell |
| `.table-green` | Indicates a successful or positive action |
| `.table-teal` | Indicates a neutral informative change or action |
| `.table-orange` | Indicates a warning that might need attention |
| `.table-red` | Indicates a dangerous or potentially negative action |

<div class="bd-example">
<table class="table">
Expand All @@ -461,7 +461,7 @@ Use contextual classes to color table rows or individual cells.
</tr>
</thead>
<tbody>
<tr class="table-active">
<tr class="table-blue">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
Expand All @@ -473,7 +473,7 @@ Use contextual classes to color table rows or individual cells.
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-success">
<tr class="table-green">
<th scope="row">3</th>
<td>Column content</td>
<td>Column content</td>
Expand All @@ -485,7 +485,7 @@ Use contextual classes to color table rows or individual cells.
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-info">
<tr class="table-teal">
<th scope="row">5</th>
<td>Column content</td>
<td>Column content</td>
Expand All @@ -497,7 +497,7 @@ Use contextual classes to color table rows or individual cells.
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-warning">
<tr class="table-orange">
<th scope="row">7</th>
<td>Column content</td>
<td>Column content</td>
Expand All @@ -509,7 +509,7 @@ Use contextual classes to color table rows or individual cells.
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-danger">
<tr class="table-red">
<th scope="row">9</th>
<td>Column content</td>
<td>Column content</td>
Expand All @@ -521,19 +521,19 @@ Use contextual classes to color table rows or individual cells.

{% highlight html %}
<!-- On rows -->
<tr class="table-active">...</tr>
<tr class="table-success">...</tr>
<tr class="table-info">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-blue">...</tr>
<tr class="table-green">...</tr>
<tr class="table-teal">...</tr>
<tr class="table-orange">...</tr>
<tr class="table-red">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
<td class="table-active">...</td>
<td class="table-success">...</td>
<td class="table-info">...</td>
<td class="table-warning">...</td>
<td class="table-danger">...</td>
<td class="table-blue">...</td>
<td class="table-green">...</td>
<td class="table-teal">...</td>
<td class="table-orange">...</td>
<td class="table-red">...</td>
</tr>
{% endhighlight %}

Expand Down
55 changes: 7 additions & 48 deletions docs/getting-started/options.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,52 +45,11 @@ You can find and customize these variables for key global options in our `_varia
Many of Bootstrap's various components and utilities are built through a series of colors defined in a Sass map. This map can be looped over in Sass to quickly generate a series of rulesets.

<div class="row">
<div class="col-md-4 mb-3">
<div class="p-3 bg-red-light">Light</div>
<div class="p-3 bg-red">Red</div>
<div class="p-3 bg-red-dark">Dark</div>
</div>
<div class="col-md-4 mb-3">
<div class="p-3 bg-orange-light">Light</div>
<div class="p-3 bg-orange">Orange</div>
<div class="p-3 bg-orange-dark">Dark</div>
</div>
<div class="col-md-4 mb-3">
<div class="p-3 bg-yellow-light">Light</div>
<div class="p-3 bg-yellow">Yellow</div>
<div class="p-3 bg-yellow-dark">Dark</div>
</div>

<div class="col-md-4 mb-3">
<div class="p-3 bg-green-light">Light</div>
<div class="p-3 bg-green">Green</div>
<div class="p-3 bg-green-dark">Dark</div>
</div>
<div class="col-md-4 mb-3">
<div class="p-3 bg-teal-light">Light</div>
<div class="p-3 bg-teal">Teal</div>
<div class="p-3 bg-teal-dark">Dark</div>
</div>
<div class="col-md-4 mb-3">
<div class="p-3 bg-blue-light">Light</div>
<div class="p-3 bg-blue">Blue</div>
<div class="p-3 bg-blue-dark">Dark</div>
</div>

<div class="col-md-4 mb-3">
<div class="p-3 bg-pink-light">Light</div>
<div class="p-3 bg-pink">Pink</div>
<div class="p-3 bg-pink-dark">Dark</div>
</div>
<div class="col-md-4 mb-3">
<div class="p-3 bg-purple-light">Light</div>
<div class="p-3 bg-purple">Purple</div>
<div class="p-3 bg-purple-dark">Dark</div>
</div>
<div class="col-md-4 mb-3">
<div class="p-3 bg-gray-light">Light</div>
<div class="p-3 bg-gray">Gray</div>
<div class="p-3 bg-gray-dark">Dark</div>
</div>

{% for color in site.data.colors %}
<div class="col-md-4 mb-3">
{% unless color.name == "white" or color.name == "gray-dark" %}
<div class="p-3 swatch-{{ color.name }}">{{ color.name | capitalize }}</div>
{% endunless %}
</div>
{% endfor %}
</div>
16 changes: 4 additions & 12 deletions scss/_alert.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,15 +41,7 @@
//
// Generate contextual modifier classes for colorizing the alert.

.alert-success {
@include alert-variant($alert-success-bg, $alert-success-border-color, $alert-success-text);
}
.alert-info {
@include alert-variant($alert-info-bg, $alert-info-border-color, $alert-info-text);
}
.alert-warning {
@include alert-variant($alert-warning-bg, $alert-warning-border-color, $alert-warning-text);
}
.alert-danger {
@include alert-variant($alert-danger-bg, $alert-danger-border-color, $alert-danger-text);
}
.alert-green { @include alert-variant($alert-green-bg, $alert-green-border-color, $alert-green-text); }
.alert-teal { @include alert-variant($alert-teal-bg, $alert-teal-border-color, $alert-teal-text); }
.alert-orange { @include alert-variant($alert-orange-bg, $alert-orange-border-color, $alert-orange-text); }
.alert-red { @include alert-variant($alert-red-bg, $alert-red-border-color, $alert-red-text); }
6 changes: 3 additions & 3 deletions scss/_forms.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -260,23 +260,23 @@ select.form-control-lg {

// Form validation states
.has-success {
@include form-control-validation($brand-success);
@include form-control-validation($green);

.form-control-success {
background-image: $form-icon-success;
}
}

.has-warning {
@include form-control-validation($brand-warning);
@include form-control-validation($orange);

.form-control-warning {
background-image: $form-icon-warning;
}
}

.has-danger {
@include form-control-validation($brand-danger);
@include form-control-validation($red);

.form-control-danger {
background-image: $form-icon-danger;
Expand Down
8 changes: 4 additions & 4 deletions scss/_list-group.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.

// @include list-group-item-variant(success, $brand-success, $state-success-text);
// @include list-group-item-variant(info, $brand-info, $state-info-text);
// @include list-group-item-variant(warning, $brand-warning, $state-warning-text);
// @include list-group-item-variant(danger, $brand-danger, $state-danger-text);
@include list-group-item-variant(green, $list-green-bg, $list-green-text);
@include list-group-item-variant(teal, $list-teal-bg, $list-teal-text);
@include list-group-item-variant(orange, $list-orange-bg, $list-orange-text);
@include list-group-item-variant(red, $list-red-bg, $list-red-text);
10 changes: 5 additions & 5 deletions scss/_tables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,11 +93,11 @@
// inheritance to nested tables.

// Generate the contextual variants
@include table-row-variant(active, $table-bg-active);
@include table-row-variant(success, $brand-success);
@include table-row-variant(info, $brand-info);
@include table-row-variant(warning, $brand-warning);
@include table-row-variant(danger, $brand-danger);
@include table-row-variant(blue, $table-blue-bg);
@include table-row-variant(green, $table-green-bg);
@include table-row-variant(teal, $table-teal-bg);
@include table-row-variant(orange, $table-orange-bg);
@include table-row-variant(red, $table-red-bg);


// Inverse styles
Expand Down
Loading

0 comments on commit 92080aa

Please sign in to comment.