From 516af795094605a2771c221c9e8b4894a758a455 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 15 Jun 2017 11:15:28 -0700 Subject: [PATCH 01/27] prep docs for displaying the colors --- _data/colors.yml | 26 ++++++++++++++++++++++++++ _data/grays.yml | 18 ++++++++++++++++++ _data/theme-colors.yml | 16 ++++++++++++++++ assets/scss/_colors.scss | 24 ++++++++++++++++++++++++ assets/scss/docs.scss | 3 ++- 5 files changed, 86 insertions(+), 1 deletion(-) create mode 100644 _data/colors.yml create mode 100644 _data/grays.yml create mode 100644 _data/theme-colors.yml create mode 100644 assets/scss/_colors.scss diff --git a/_data/colors.yml b/_data/colors.yml new file mode 100644 index 0000000000..4208ec75ac --- /dev/null +++ b/_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" diff --git a/_data/grays.yml b/_data/grays.yml new file mode 100644 index 0000000000..bf9750ee9c --- /dev/null +++ b/_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" diff --git a/_data/theme-colors.yml b/_data/theme-colors.yml new file mode 100644 index 0000000000..25f86c364e --- /dev/null +++ b/_data/theme-colors.yml @@ -0,0 +1,16 @@ +- name: primary + hex: "#007aff" +- name: secondary + hex: "#ced4da" +- name: success + hex: "#51cf66" +- name: info + hex: "#38d9a9" +- name: warning + hex: "#ff922b" +- name: danger + hex: "#f03e3e" +- name: foreground + hex: "#343a40" +- name: background + hex: "#fff" diff --git a/assets/scss/_colors.scss b/assets/scss/_colors.scss new file mode 100644 index 0000000000..d09d3a2c57 --- /dev/null +++ b/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); + } +} diff --git a/assets/scss/docs.scss b/assets/scss/docs.scss index 0991d5bdf6..6535c0ce11 100644 --- a/assets/scss/docs.scss +++ b/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 From c31d52499811d5c68d122db806ce27a112b489bd Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 15 Jun 2017 11:15:48 -0700 Subject: [PATCH 02/27] add color contrast and map-get functions --- scss/_functions.scss | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/scss/_functions.scss b/scss/_functions.scss index 5aa9f66209..6c85bbd4ef 100644 --- a/scss/_functions.scss +++ b/scss/_functions.scss @@ -47,3 +47,26 @@ @return $string; } + +// Color contrast +@mixin color-yiq($color) { + $r: red($color); + $g: green($color); + $b: blue($color); + + $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000; + + @if ($yiq >= 128) { + color: #111; + } @else { + color: #fff; + } +} + +// Retreive color Sass maps +@function color($key: "blue") { + @return map-get($colors, $key); +} +@function theme-color($key: "primary") { + @return map-get($theme-colors, $key); +} From 2ad2d71f66c7801345047cd00175c41d24ba1e4c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 15 Jun 2017 11:16:27 -0700 Subject: [PATCH 03/27] add new color vars and maps --- scss/_variables.scss | 76 +++++++++++++++++++++++++++++++++++++------- 1 file changed, 64 insertions(+), 12 deletions(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index e106282ed3..ad5212caf5 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -43,23 +43,75 @@ // Close // Code +// New colors + +$white: #fff !default; +$gray-100: #f8f9fa !default; +$gray-200: #e9ecef !default; +$gray-300: #dee2e6 !default; +$gray-400: #ced4da !default; +$gray-500: #adb5bd !default; +$gray-600: #868e96 !default; +$gray-700: #495057 !default; +$gray-800: #343a40 !default; +$gray-900: #212529 !default; +$black: #000 !default; + +$grays: ( + 100: $gray-100, + 200: $gray-200, + 300: $gray-300, + 400: $gray-400, + 500: $gray-500, + 600: $gray-600, + 700: $gray-700, + 800: $gray-800, + 900: $gray-900 +) !default; + +$blue: #007bff !default; +$indigo: #4263eb !default; +$purple: #882ae0 !default; +$pink: #e64980 !default; +$red: #f03e3e !default; +$orange: #ff922b !default; +$yellow: #ffd43b !default; +$green: #51cf66 !default; +$teal: #38d9a9 !default; +$cyan: #3bc9db !default; + +$colors: ( + blue: $blue, + indigo: $indigo, + purple: $purple, + pink: $pink, + red: $red, + orange: $orange, + yellow: $yellow, + green: $green, + teal: $teal, + cyan: $cyan, + white: $white, + gray: $gray-600, + gray-dark: $gray-800 +) !default; + +$theme-colors: ( + primary: $blue, + secondary: $gray-400, + success: $green, + info: $cyan, + warning: $orange, + danger: $red, + foreground: $gray-800, + background: $white +) !default; + // Colors // // Grayscale and brand colors for use across Bootstrap. -// Start with assigning color names to specific hex values. -$white: #fff !default; -$black: #000 !default; -$red: #d9534f !default; -$orange: #f0ad4e !default; -$yellow: #ffd500 !default; -$green: #5cb85c !default; -$blue: #0275d8 !default; -$teal: #5bc0de !default; -$pink: #ff5b77 !default; -$purple: #613d7c !default; - // Create grayscale $gray-dark: #292b2c !default; $gray: #464a4c !default; From 09e3509ff3b4ffcec0832d501cd0c766e86ec7f7 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 15 Jun 2017 11:16:40 -0700 Subject: [PATCH 04/27] render the colors --- docs/4.0/getting-started/options.md | 80 +++++++++++++++++++++++++++++ 1 file changed, 80 insertions(+) diff --git a/docs/4.0/getting-started/options.md b/docs/4.0/getting-started/options.md index acc7ce451c..13dc8dcf02 100644 --- a/docs/4.0/getting-started/options.md +++ b/docs/4.0/getting-started/options.md @@ -40,3 +40,83 @@ You can find and customize these variables for key global options in our `_varia | `$enable-hover-media-query` | `true` or `false` (default) | ... | | `$enable-grid-classes` | `true` (default) or `false` | Enables the generation of CSS classes for the grid system (e.g., `.container`, `.row`, `.col-md-1`, etc.). | | `$enable-print-styles` | `true` (default) or `false` | Enables styles for optimizing printing. | + +## Color + +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. + +### All colors + +All colors available in Bootstrap 4, available as Sass variables and a Sass map in our `scss/_variables.scss` file. This will be expanded upon in subsequent minor releases to add additional shades, much like the [grayscale palette](#grays) we already include. + +
+ {% for color in site.data.colors %} +
+ {% unless color.name == "white" or color.name == "gray" or color.name == "gray-dark" %} +
{{ color.name | capitalize }}
+ {% endunless %} +
+ {% endfor %} +
+ +Here's how you can use these in your Sass: + +{% highlight scss %} +// With variable +.alpha { color: $purple; } + +// From the Sass map with our `color()` function +.beta { color: color("purple"); } +{% endhighlight %} + +[Color utility classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/colors/) are also available for setting `color` and `background-color`. + +### Theme colors + +We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in our `scss/_variables.scss` file. + +
+ {% for color in site.data.theme-colors %} +
+ {% if color.name == "background" %} +
+ {{ color.name | capitalize }} +
+ {% else %} +
{{ color.name | capitalize }}
+ {% endif %} +
+ {% endfor %} +
+ +### Grays + +An expansive set of gray variables and a Sass map in `scss/_variables.scss` for consistent shades of gray across your project. + +
+
+ {% for color in site.data.grays %} +
{{ color.name | capitalize }}
+ {% endfor %} +
+
+ +Within `_variables.scss`, you'll find our color variables and Sass map. Here's an example of the `$colors` Sass map: + +{% highlight scss %} +$colors: ( + red: $red, + orange: $orange, + yellow: $yellow, + green: $green, + teal: $teal, + blue: $blue, + pink: $pink, + purple: $purple, + white: $white, + gray: $gray-light, + gray-dark: $gray-dark +) !default; +{% endhighlight %} + +Add, remove, or modify values within the map to update how they're used in many other components. Unfortunately at this time, not _every_ component utilizes this Sass map. Future updates will strive to improve upon this. Until then, plan on making use of the `${color}` variables and this Sass map. From 597e9f861807868d8d13bac93e8a328493fe6d54 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 18 Jun 2017 02:57:16 -0700 Subject: [PATCH 05/27] remove - vars, update docs to generate from data yml files, update mixins, and generate card, button, bg, and color classes from the sass map --- assets/scss/_component-examples.scss | 4 +- assets/scss/_featurettes.scss | 2 +- assets/scss/_sidebar.scss | 2 +- docs/4.0/components/card.md | 14 +++---- docs/4.0/utilities/colors.md | 27 +++---------- scss/_buttons.scss | 43 ++++----------------- scss/_card.scss | 41 +++++--------------- scss/_variables.scss | 58 ++++++++++++---------------- scss/mixins/_buttons.scss | 14 +++---- scss/utilities/_background.scss | 14 ++----- scss/utilities/_text.scss | 18 ++------- 11 files changed, 72 insertions(+), 165 deletions(-) diff --git a/assets/scss/_component-examples.scss b/assets/scss/_component-examples.scss index 84dc457810..84f4f2ccf4 100644 --- a/assets/scss/_component-examples.scss +++ b/assets/scss/_component-examples.scss @@ -86,7 +86,7 @@ .bd-example-container-header { height: 3rem; margin-bottom: .5rem; - background-color: lighten($brand-primary, 50%); + background-color: lighten($blue, 50%); border-radius: .25rem; } @@ -94,7 +94,7 @@ float: right; width: 4rem; height: 8rem; - background-color: lighten($brand-warning, 25%); + background-color: lighten($blue, 25%); border-radius: .25rem; } diff --git a/assets/scss/_featurettes.scss b/assets/scss/_featurettes.scss index 764fcffee7..f214eb927d 100644 --- a/assets/scss/_featurettes.scss +++ b/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 { diff --git a/assets/scss/_sidebar.scss b/assets/scss/_sidebar.scss index b8f311f209..46ab37fb7b 100644 --- a/assets/scss/_sidebar.scss +++ b/assets/scss/_sidebar.scss @@ -39,7 +39,7 @@ color: #99979c; &:hover { - color: $brand-primary; + color: $blue; text-decoration: none; } } diff --git a/docs/4.0/components/card.md b/docs/4.0/components/card.md index bc20da88fc..1c8117a9aa 100644 --- a/docs/4.0/components/card.md +++ b/docs/4.0/components/card.md @@ -134,7 +134,7 @@ Card headers can be styled by adding `.card-header` to `` elements. {% example html %}
-

Featured

+

Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

@@ -186,7 +186,7 @@ Using the grid, wrap cards in columns and rows as needed.
-

Special title treatment

+

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
@@ -195,7 +195,7 @@ Using the grid, wrap cards in columns and rows as needed.
-

Special title treatment

+

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
@@ -211,7 +211,7 @@ Use our handful of [available sizing utilities]({{ site.baseurl }}/docs/{{ site. {% example html %}
-

Card title

+

Card title

With supporting text below as a natural lead-in to additional content.

Button
@@ -219,7 +219,7 @@ Use our handful of [available sizing utilities]({{ site.baseurl }}/docs/{{ site.
-

Card title

+

Card title

With supporting text below as a natural lead-in to additional content.

Button
@@ -233,7 +233,7 @@ Use custom CSS in your stylesheets or as inline styles to set a width. {% example html %}
-

Special title treatment

+

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
@@ -376,7 +376,7 @@ You can also use `.card-inverse` with the [contextual backgrounds variants](#bac
Header
-

Special title treatment

+

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
diff --git a/docs/4.0/utilities/colors.md b/docs/4.0/utilities/colors.md index 80e096cf95..3d06b3e4e2 100644 --- a/docs/4.0/utilities/colors.md +++ b/docs/4.0/utilities/colors.md @@ -7,37 +7,22 @@ toc: true --- {% example html %} -

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

-

Nullam id dolor id nibh ultricies vehicula ut id elit.

-

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

-

Maecenas sed diam eget risus varius blandit sit amet non magna.

-

Etiam porta sem malesuada magna mollis euismod.

-

Donec ullamcorper nulla non metus auctor fringilla.

-

Eget risus varius blandit sit ultricies vehicula amet non magna.

-

Etiam porta sem malesuada ultricies vehicula.

+{% for color in site.data.theme-colors %} +

.text-{{ color.name }}

{% endfor %} {% endexample %} Contextual text classes also work well on anchors with the provided hover and focus states. **Note that the `.text-white` class has no link styling.** {% example html %} -Muted link -Primary link -Success link -Info link -Warning link -Danger link +{% for color in site.data.theme-colors %} +

{{ color.name | capitalize }} link

{% endfor %} {% endexample %} Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Background utilities **do not set `color`**, so in some cases you'll want to use `.text-*` utilities. {% example html %} -
Nullam id dolor id nibh ultricies vehicula ut id elit.
-
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
-
Maecenas sed diam eget risus varius blandit sit amet non magna.
-
Etiam porta sem malesuada magna mollis euismod.
-
Donec ullamcorper nulla non metus auctor fringilla.
-
Cras mattis consectetur purus sit amet fermentum.
-
Cras mattis consectetur purus sit amet fermentum.
+{% for color in site.data.theme-colors %} +
.bg-{{ color.name }}
{% endfor %} {% endexample %} {% callout info %} diff --git a/scss/_buttons.scss b/scss/_buttons.scss index 05c54e4ee0..944eb5ffaf 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -50,43 +50,16 @@ fieldset[disabled] a.btn { // Alternate buttons // -.btn-primary { - @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border-color); -} -.btn-secondary { - @include button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border-color); -} -.btn-info { - @include button-variant($btn-info-color, $btn-info-bg, $btn-info-border-color); -} -.btn-success { - @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border-color); -} -.btn-warning { - @include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border-color); -} -.btn-danger { - @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border-color); +@each $color, $value in $theme-colors { + .btn-#{$color} { + @include button-variant($value, $value); + } } -// Remove all backgrounds -.btn-outline-primary { - @include button-outline-variant($btn-primary-bg, $btn-primary-color); -} -.btn-outline-secondary { - @include button-outline-variant($btn-secondary-border-color, $btn-secondary-color); -} -.btn-outline-info { - @include button-outline-variant($btn-info-bg, $btn-info-color); -} -.btn-outline-success { - @include button-outline-variant($btn-success-bg, $btn-success-color); -} -.btn-outline-warning { - @include button-outline-variant($btn-warning-bg, $btn-warning-color); -} -.btn-outline-danger { - @include button-outline-variant($btn-danger-bg, $btn-danger-color); +@each $color, $value in $theme-colors { + .btn-outline-#{$color} { + @include button-outline-variant($value, #fff); + } } diff --git a/scss/_card.scss b/scss/_card.scss index 436df300fa..df5c20fe12 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -105,42 +105,19 @@ // Background variations // -.card-primary { - @include card-variant($brand-primary, $brand-primary); -} -.card-success { - @include card-variant($brand-success, $brand-success); -} -.card-info { - @include card-variant($brand-info, $brand-info); -} -.card-warning { - @include card-variant($brand-warning, $brand-warning); -} -.card-danger { - @include card-variant($brand-danger, $brand-danger); +@each $color, $value in $theme-colors { + .card-#{$color} { + @include card-variant($value, $value); + } } -// Remove all backgrounds -.card-outline-primary { - @include card-outline-variant($btn-primary-bg); -} -.card-outline-secondary { - @include card-outline-variant($btn-secondary-border-color); -} -.card-outline-info { - @include card-outline-variant($btn-info-bg); -} -.card-outline-success { - @include card-outline-variant($btn-success-bg); -} -.card-outline-warning { - @include card-outline-variant($btn-warning-bg); -} -.card-outline-danger { - @include card-outline-variant($btn-danger-bg); +@each $color, $value in $theme-colors { + .card-outline-#{$color} { + @include card-variant($value, $value); + } } + // // Inverse text within a card for use with dark backgrounds // diff --git a/scss/_variables.scss b/scss/_variables.scss index 087e353a84..7d4a3ddbdb 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -119,14 +119,6 @@ $gray-light: #636c72 !default; $gray-lighter: #eceeef !default; $gray-lightest: #f7f7f9 !default; -// Reassign color vars to semantic color scheme -$brand-primary: $blue !default; -$brand-success: $green !default; -$brand-info: $teal !default; -$brand-warning: $orange !default; -$brand-danger: $red !default; -$brand-inverse: $gray-dark !default; - // Options // @@ -176,7 +168,7 @@ $body-color: $gray-dark !default; // // Style anchor elements. -$link-color: $brand-primary !default; +$link-color: theme-color("primary") !default; $link-decoration: none !default; $link-hover-color: darken($link-color, 15%) !default; $link-hover-decoration: underline !default; @@ -240,7 +232,7 @@ $border-radius-lg: .3rem !default; $border-radius-sm: .2rem !default; $component-active-color: $white !default; -$component-active-bg: $brand-primary !default; +$component-active-bg: theme-color("primary") !default; $caret-width: .3em !default; @@ -360,11 +352,11 @@ $input-btn-line-height-lg: 1.5 !default; $btn-font-weight: $font-weight-normal !default; $btn-box-shadow: inset 0 1px 0 rgba($white,.15), 0 1px 1px rgba($black,.075) !default; -$btn-focus-box-shadow: 0 0 0 3px rgba($brand-primary, .25) !default; +$btn-focus-box-shadow: 0 0 0 3px rgba(theme-color("primary"), .25) !default; $btn-active-box-shadow: inset 0 3px 5px rgba($black,.125) !default; $btn-primary-color: $white !default; -$btn-primary-bg: $brand-primary !default; +$btn-primary-bg: theme-color("primary") !default; $btn-primary-border-color: $btn-primary-bg !default; $btn-secondary-color: $gray-dark !default; @@ -372,19 +364,19 @@ $btn-secondary-bg: $white !default; $btn-secondary-border-color: #ccc !default; $btn-info-color: $white !default; -$btn-info-bg: $brand-info !default; +$btn-info-bg: theme-color("info") !default; $btn-info-border-color: $btn-info-bg !default; $btn-success-color: $white !default; -$btn-success-bg: $brand-success !default; +$btn-success-bg: theme-color("success") !default; $btn-success-border-color: $btn-success-bg !default; $btn-warning-color: $white !default; -$btn-warning-bg: $brand-warning !default; +$btn-warning-bg: theme-color("warning") !default; $btn-warning-border-color: $btn-warning-bg !default; $btn-danger-color: $white !default; -$btn-danger-bg: $brand-danger !default; +$btn-danger-bg: theme-color("danger") !default; $btn-danger-border-color: $btn-danger-bg !default; $btn-link-disabled-color: $gray-light !default; @@ -414,7 +406,7 @@ $input-border-radius-lg: $border-radius-lg !default; $input-border-radius-sm: $border-radius-sm !default; $input-focus-bg: $input-bg !default; -$input-focus-border-color: lighten($brand-primary, 25%) !default; +$input-focus-border-color: lighten(theme-color("primary"), 25%) !default; $input-focus-box-shadow: $input-box-shadow, $btn-focus-box-shadow !default; $input-focus-color: $input-color !default; @@ -461,19 +453,19 @@ $custom-control-indicator-disabled-bg: $gray-lighter !default; $custom-control-description-disabled-color: $gray-light !default; $custom-control-indicator-checked-color: $white !default; -$custom-control-indicator-checked-bg: $brand-primary !default; +$custom-control-indicator-checked-bg: theme-color("primary") !default; $custom-control-indicator-checked-box-shadow: none !default; -$custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, 0 0 0 3px $brand-primary !default; +$custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, 0 0 0 3px theme-color("primary") !default; $custom-control-indicator-active-color: $white !default; -$custom-control-indicator-active-bg: lighten($brand-primary, 35%) !default; +$custom-control-indicator-active-bg: lighten(theme-color("primary"), 35%) !default; $custom-control-indicator-active-box-shadow: none !default; $custom-checkbox-border-radius: $border-radius !default; $custom-checkbox-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23") !default; -$custom-checkbox-indeterminate-bg: $brand-primary !default; +$custom-checkbox-indeterminate-bg: theme-color("primary") !default; $custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default; $custom-checkbox-icon-indeterminate: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3E%3C/svg%3E"), "#", "%23") !default; $custom-checkbox-indeterminate-box-shadow: none !default; @@ -497,7 +489,7 @@ $custom-select-border-width: $input-btn-border-width !default; $custom-select-border-color: $input-border-color !default; $custom-select-border-radius: $border-radius !default; -$custom-select-focus-border-color: lighten($brand-primary, 25%) !default; +$custom-select-focus-border-color: lighten(theme-color("primary"), 25%) !default; $custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default; $custom-select-font-size-sm: 75% !default; @@ -505,7 +497,7 @@ $custom-select-height-sm: $input-height-sm !default; $custom-file-height: 2.5rem !default; $custom-file-width: 14rem !default; -$custom-file-focus-box-shadow: 0 0 0 .075rem $white, 0 0 0 .2rem $brand-primary !default; +$custom-file-focus-box-shadow: 0 0 0 .075rem $white, 0 0 0 .2rem theme-color("primary") !default; $custom-file-padding-y: 1rem !default; $custom-file-padding-x: .5rem !default; @@ -529,8 +521,8 @@ $custom-file-text: ( // Form validation -$form-feedback-valid-color: $brand-success !default; -$form-feedback-invalid-color: $brand-danger !default; +$form-feedback-valid-color: theme-color("success") !default; +$form-feedback-invalid-color: theme-color("danger") !default; // Dropdowns @@ -642,8 +634,8 @@ $pagination-hover-bg: $gray-lighter !default; $pagination-hover-border-color: #ddd !default; $pagination-active-color: $white !default; -$pagination-active-bg: $brand-primary !default; -$pagination-active-border-color: $brand-primary !default; +$pagination-active-bg: theme-color("primary") !default; +$pagination-active-border-color: theme-color("primary") !default; $pagination-disabled-color: $gray-light !default; $pagination-disabled-bg: $white !default; @@ -745,11 +737,11 @@ $popover-arrow-outer-color: fade-in($popover-border-color, .05) !defau // Badges $badge-default-bg: $gray-light !default; -$badge-primary-bg: $brand-primary !default; -$badge-success-bg: $brand-success !default; -$badge-info-bg: $brand-info !default; -$badge-warning-bg: $brand-warning !default; -$badge-danger-bg: $brand-danger !default; +$badge-primary-bg: theme-color("primary") !default; +$badge-success-bg: theme-color("success") !default; +$badge-info-bg: theme-color("info") !default; +$badge-warning-bg: theme-color("warning") !default; +$badge-danger-bg: theme-color("danger") !default; $badge-color: $white !default; $badge-link-hover-color: $white !default; @@ -831,7 +823,7 @@ $progress-bg: $gray-lighter !default; $progress-border-radius: $border-radius !default; $progress-box-shadow: inset 0 .1rem .1rem rgba($black,.1) !default; $progress-bar-color: $white !default; -$progress-bar-bg: $brand-primary !default; +$progress-bar-bg: theme-color("primary") !default; $progress-bar-animation-timing: 1s linear infinite !default; $progress-bar-transition: width .6s ease !default; diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss index f5ca3aa71c..c22a5cc3f9 100644 --- a/scss/mixins/_buttons.scss +++ b/scss/mixins/_buttons.scss @@ -3,21 +3,22 @@ // Easily pump out default styles, as well as :hover, :focus, :active, // and disabled options for all buttons -@mixin button-variant($color, $background, $border) { - $active-background: darken($background, 10%); - $active-border: darken($border, 12%); +@mixin button-variant($background, $border) { + $active-background: darken($background, 7.5%); + $active-border: darken($border, 10%); - color: $color; + @include color-yiq($background); background-color: $background; border-color: $border; @include box-shadow($btn-box-shadow); // Hover and focus styles are shared - @include hover { - color: $color; + &:hover { + @include color-yiq($background); background-color: $active-background; border-color: $active-border; } + &:focus, &.focus { // Avoid using mixin so we can pass custom focus shadow properly @@ -38,7 +39,6 @@ &:active, &.active, .show > &.dropdown-toggle { - color: $color; background-color: $active-background; background-image: none; // Remove the gradient for the pressed/active state border-color: $active-border; diff --git a/scss/utilities/_background.scss b/scss/utilities/_background.scss index b9ac295231..cc21859e83 100644 --- a/scss/utilities/_background.scss +++ b/scss/utilities/_background.scss @@ -6,14 +6,6 @@ background-color: darken($body-bg, 3%); } -@include bg-variant('.bg-primary', $brand-primary); - -@include bg-variant('.bg-success', $brand-success); - -@include bg-variant('.bg-info', $brand-info); - -@include bg-variant('.bg-warning', $brand-warning); - -@include bg-variant('.bg-danger', $brand-danger); - -@include bg-variant('.bg-inverse', $brand-inverse); +@each $color, $value in $theme-colors { + @include bg-variant('.bg-#{$color}', $value); +} diff --git a/scss/utilities/_text.scss b/scss/utilities/_text.scss index 4ac90533ac..90e06f5c43 100644 --- a/scss/utilities/_text.scss +++ b/scss/utilities/_text.scss @@ -38,21 +38,9 @@ color: #fff !important; } -@include text-emphasis-variant('.text-muted', $text-muted); - -@include text-emphasis-variant('.text-primary', $brand-primary); - -@include text-emphasis-variant('.text-success', $brand-success); - -@include text-emphasis-variant('.text-info', $brand-info); - -@include text-emphasis-variant('.text-warning', $brand-warning); - -@include text-emphasis-variant('.text-danger', $brand-danger); - -// Font color - -@include text-emphasis-variant('.text-gray-dark', $gray-dark); +@each $color, $value in $theme-colors { + @include text-emphasis-variant('.text-#{$color}', $value); +} // Misc From 1a23321fc01ee58b1ea1a20ec32ae2146177ffc8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 18 Jun 2017 10:53:27 -0700 Subject: [PATCH 06/27] Update _buttons.scss --- scss/mixins/_buttons.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss index c22a5cc3f9..1e01de867d 100644 --- a/scss/mixins/_buttons.scss +++ b/scss/mixins/_buttons.scss @@ -18,7 +18,7 @@ background-color: $active-background; border-color: $active-border; } - + &:focus, &.focus { // Avoid using mixin so we can pass custom focus shadow properly From b973fe6b945c59422458996aa016b0bb678b80d2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 25 Jun 2017 18:08:43 -0700 Subject: [PATCH 07/27] update theme colors --- _data/theme-colors.yml | 20 ++++++++++---------- scss/_variables.scss | 26 +++++++++++++------------- 2 files changed, 23 insertions(+), 23 deletions(-) diff --git a/_data/theme-colors.yml b/_data/theme-colors.yml index 25f86c364e..92ea288384 100644 --- a/_data/theme-colors.yml +++ b/_data/theme-colors.yml @@ -1,16 +1,16 @@ - name: primary hex: "#007aff" - name: secondary - hex: "#ced4da" + hex: "#868e96" - name: success - hex: "#51cf66" -- name: info - hex: "#38d9a9" -- name: warning - hex: "#ff922b" + hex: "#28a745" - name: danger - hex: "#f03e3e" -- name: foreground + hex: "#dc3545" +- name: warning + hex: "#ffc107" +- name: info + hex: "#17a2b8" +- name: light + hex: "#f8f9fa" +- name: dark hex: "#343a40" -- name: background - hex: "#fff" diff --git a/scss/_variables.scss b/scss/_variables.scss index 7d4a3ddbdb..864e0c5306 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -70,15 +70,15 @@ $grays: ( ) !default; $blue: #007bff !default; -$indigo: #4263eb !default; -$purple: #882ae0 !default; -$pink: #e64980 !default; -$red: #f03e3e !default; -$orange: #ff922b !default; -$yellow: #ffd43b !default; -$green: #51cf66 !default; -$teal: #38d9a9 !default; -$cyan: #3bc9db !default; +$indigo: #6610f2 !default; +$purple: #6f42c1 !default; +$pink: #e83e8c !default; +$red: #dc3545 !default; +$orange: #fd7e14 !default; +$yellow: #ffc107 !default; +$green: #28a745 !default; +$teal: #20c997 !default; +$cyan: #17a2b8 !default; $colors: ( blue: $blue, @@ -98,13 +98,13 @@ $colors: ( $theme-colors: ( primary: $blue, - secondary: $gray-400, + secondary: $gray-600, success: $green, info: $cyan, - warning: $orange, + warning: $yellow, danger: $red, - foreground: $gray-800, - background: $white + light: $gray-100, + dark: $gray-800 ) !default; From 370e299c6be30b077497eef762c567df00a0b407 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 25 Jun 2017 18:11:16 -0700 Subject: [PATCH 08/27] modify contrast value --- scss/_functions.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/_functions.scss b/scss/_functions.scss index 6c85bbd4ef..98a2587a1a 100644 --- a/scss/_functions.scss +++ b/scss/_functions.scss @@ -56,7 +56,7 @@ $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000; - @if ($yiq >= 128) { + @if ($yiq >= 150) { color: #111; } @else { color: #fff; From a0fb4966357ee8bb288994bb61efe1a670b785c6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 25 Jun 2017 18:12:50 -0700 Subject: [PATCH 09/27] update rendering of colors in options.md --- docs/4.0/getting-started/options.md | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/docs/4.0/getting-started/options.md b/docs/4.0/getting-started/options.md index 5145758c3c..4dfac50cbd 100644 --- a/docs/4.0/getting-started/options.md +++ b/docs/4.0/getting-started/options.md @@ -73,13 +73,7 @@ We use a subset of all colors to create a smaller color palette for generating c
{% for color in site.data.theme-colors %}
- {% if color.name == "background" %} -
- {{ color.name | capitalize }} -
- {% else %} -
{{ color.name | capitalize }}
- {% endif %} +
{{ color.name | capitalize }}
{% endfor %}
From b4879ec40f88ee86b7c08d1e9f86563b713a6d42 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 25 Jun 2017 18:14:02 -0700 Subject: [PATCH 10/27] remove bg styles --- assets/scss/_component-examples.scss | 17 ----------------- 1 file changed, 17 deletions(-) diff --git a/assets/scss/_component-examples.scss b/assets/scss/_component-examples.scss index 84f4f2ccf4..f85daf7596 100644 --- a/assets/scss/_component-examples.scss +++ b/assets/scss/_component-examples.scss @@ -362,23 +362,6 @@ 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-"] { display: inline-block; From aa83c4f4170a3ad102a69f601bd822a833c23099 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 25 Jun 2017 18:15:32 -0700 Subject: [PATCH 11/27] update badges to use the theme colors sass map --- docs/4.0/components/badge.md | 48 ++++++++++++++---------------------- scss/_badge.scss | 36 +++------------------------ scss/mixins/_badge.scss | 11 +++++---- 3 files changed, 28 insertions(+), 67 deletions(-) diff --git a/docs/4.0/components/badge.md b/docs/4.0/components/badge.md index 764e5a1cbb..e2d92b08b3 100644 --- a/docs/4.0/components/badge.md +++ b/docs/4.0/components/badge.md @@ -11,21 +11,21 @@ toc: true Badges scale to match the size of the immediate parent element by using relative font sizing and `em` units.
-
Example heading New
-
Example heading New
-
Example heading New
-
Example heading New
-
Example heading New
-
Example heading New
+
Example heading New
+
Example heading New
+
Example heading New
+
Example heading New
+
Example heading New
+
Example heading New
{% highlight html %} -

Example heading New

-

Example heading New

-

Example heading New

-

Example heading New

-
Example heading New
-
Example heading New
+

Example heading New

+

Example heading New

+

Example heading New

+

Example heading New

+
Example heading New
+
Example heading New
{% endhighlight %} ## Contextual variations @@ -33,12 +33,8 @@ Badges scale to match the size of the immediate parent element by using relative Add any of the below mentioned modifier classes to change the appearance of a badge. {% example html %} -Default -Primary -Success -Info -Warning -Danger +{% for color in site.data.theme-colors %} +{{ color.name | capitalize }}{% endfor %} {% endexample %} {% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %} @@ -49,12 +45,8 @@ 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 %} -Default -Primary -Success -Info -Warning -Danger +{% for color in site.data.theme-colors %} +{{ color.name | capitalize }}{% endfor %} {% endexample %} ## Links @@ -62,10 +54,6 @@ Use the `.badge-pill` modifier class to make badges more rounded (with a larger Using the `.badge` classes with the `` element quickly provide _actionable_ badges with hover and focus states. {% example html %} -Default -Primary -Success -Info -Warning -Danger +{% for color in site.data.theme-colors %} +{{ color.name | capitalize }}{% endfor %} {% endexample %} diff --git a/scss/_badge.scss b/scss/_badge.scss index 175b19d86e..8a76263444 100644 --- a/scss/_badge.scss +++ b/scss/_badge.scss @@ -27,16 +27,6 @@ top: -1px; } -// scss-lint:disable QualifyingElement -// Add hover effects, but only for links -a.badge { - @include hover-focus { - color: $badge-link-hover-color; - text-decoration: none; - } -} -// scss-lint:enable QualifyingElement - // Pill badges // // Make them extra rounded with a modifier to replace v3's badges. @@ -51,26 +41,8 @@ a.badge { // // Contextual variations (linked badges get darker on :hover). -.badge-default { - @include badge-variant($badge-default-bg); -} - -.badge-primary { - @include badge-variant($badge-primary-bg); -} - -.badge-success { - @include badge-variant($badge-success-bg); -} - -.badge-info { - @include badge-variant($badge-info-bg); -} - -.badge-warning { - @include badge-variant($badge-warning-bg); -} - -.badge-danger { - @include badge-variant($badge-danger-bg); +@each $color, $value in $theme-colors { + .badge-#{$color} { + @include badge-variant($value); + } } diff --git a/scss/mixins/_badge.scss b/scss/mixins/_badge.scss index 9fa44b6478..257a6abb7d 100644 --- a/scss/mixins/_badge.scss +++ b/scss/mixins/_badge.scss @@ -1,11 +1,12 @@ -// Badges - -@mixin badge-variant($color) { - background-color: $color; +@mixin badge-variant($bg) { + @include color-yiq($bg); + background-color: $bg; &[href] { @include hover-focus { - background-color: darken($color, 10%); + @include color-yiq($bg); + text-decoration: none; + background-color: darken($bg, 10%); } } } From fc053ed096a16a4c0840fc9a942394390847b12c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 25 Jun 2017 18:16:37 -0700 Subject: [PATCH 12/27] update background utils --- docs/4.0/utilities/colors.md | 4 ++-- scss/utilities/_background.scss | 8 -------- 2 files changed, 2 insertions(+), 10 deletions(-) diff --git a/docs/4.0/utilities/colors.md b/docs/4.0/utilities/colors.md index 3d06b3e4e2..11ac0be604 100644 --- a/docs/4.0/utilities/colors.md +++ b/docs/4.0/utilities/colors.md @@ -15,14 +15,14 @@ Contextual text classes also work well on anchors with the provided hover and fo {% example html %} {% for color in site.data.theme-colors %} -

{{ color.name | capitalize }} link

{% endfor %} +

{{ color.name | capitalize }} link

{% endfor %} {% endexample %} Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Background utilities **do not set `color`**, so in some cases you'll want to use `.text-*` utilities. {% example html %} {% for color in site.data.theme-colors %} -
.bg-{{ color.name }}
{% endfor %} +
.bg-{{ color.name }}
{% endfor %} {% endexample %} {% callout info %} diff --git a/scss/utilities/_background.scss b/scss/utilities/_background.scss index cc21859e83..853d08ebdd 100644 --- a/scss/utilities/_background.scss +++ b/scss/utilities/_background.scss @@ -1,11 +1,3 @@ -// -// Contextual backgrounds -// - -.bg-faded { - background-color: darken($body-bg, 3%); -} - @each $color, $value in $theme-colors { @include bg-variant('.bg-#{$color}', $value); } From 2392047a0ccc270897c3c451e9646e81a4ff3035 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 25 Jun 2017 18:22:51 -0700 Subject: [PATCH 13/27] update alert component to use theme sass map and add a ton of options in the process --- docs/4.0/components/alerts.md | 32 ++++++++------------------------ scss/_alert.scss | 15 ++++----------- scss/mixins/_alert.scss | 9 ++++----- 3 files changed, 16 insertions(+), 40 deletions(-) diff --git a/docs/4.0/components/alerts.md b/docs/4.0/components/alerts.md index 3acfd2a797..ed63da9525 100644 --- a/docs/4.0/components/alerts.md +++ b/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 %} - - - - +{% for color in site.data.theme-colors %} +{% 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 %} - - - - +{% for color in site.data.theme-colors %} +{% endfor %} {% endexample %} ### Additional content diff --git a/scss/_alert.scss b/scss/_alert.scss index 562821a58b..3dfd13f56a 100644 --- a/scss/_alert.scss +++ b/scss/_alert.scss @@ -41,15 +41,8 @@ // // 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); +@each $color, $value in $theme-colors { + .alert-#{$color} { + @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6)); + } } diff --git a/scss/mixins/_alert.scss b/scss/mixins/_alert.scss index 1e9307ebbe..d938e89722 100644 --- a/scss/mixins/_alert.scss +++ b/scss/mixins/_alert.scss @@ -1,14 +1,13 @@ -// Alerts - -@mixin alert-variant($background, $border, $body-color) { - color: $body-color; +@mixin alert-variant($background, $border, $color) { + color: $color; background-color: $background; border-color: $border; hr { border-top-color: darken($border, 5%); } + .alert-link { - color: darken($body-color, 10%); + color: darken($color, 10%); } } From 36e482ed2728eec37188b5ec486283334bb3034f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 25 Jun 2017 18:29:43 -0700 Subject: [PATCH 14/27] update navbars to rename .navbar-inverse to .navbar-dark, update all navbar examples and variables --- _includes/docs-navbar.html | 2 +- docs/4.0/components/navbar.md | 60 +++++++++---------- docs/4.0/components/scrollspy.md | 8 +-- docs/4.0/examples/album/index.html | 2 +- docs/4.0/examples/carousel/index.html | 2 +- docs/4.0/examples/dashboard/index.html | 2 +- docs/4.0/examples/jumbotron/index.html | 2 +- docs/4.0/examples/justified-nav/index.html | 2 +- docs/4.0/examples/navbar-top-fixed/index.html | 2 +- docs/4.0/examples/navbar-top/index.html | 2 +- docs/4.0/examples/navbars/index.html | 20 +++---- docs/4.0/examples/offcanvas/index.html | 2 +- docs/4.0/examples/starter-template/index.html | 2 +- .../examples/sticky-footer-navbar/index.html | 2 +- docs/4.0/migration.md | 2 +- js/tests/visual/dropdown.html | 2 +- js/tests/visual/modal.html | 2 +- js/tests/visual/scrollspy.html | 2 +- scss/_navbar.scss | 22 +++---- scss/_variables.scss | 12 ++-- 20 files changed, 76 insertions(+), 76 deletions(-) diff --git a/_includes/docs-navbar.html b/_includes/docs-navbar.html index 71db111d8a..79742a4a2a 100644 --- a/_includes/docs-navbar.html +++ b/_includes/docs-navbar.html @@ -1,4 +1,4 @@ -
+
{% include icons/bootstrap.svg width="36" height="36" class="d-block" %} diff --git a/docs/4.0/components/navbar.md b/docs/4.0/components/navbar.md index 07c86c938c..350e970dab 100644 --- a/docs/4.0/components/navbar.md +++ b/docs/4.0/components/navbar.md @@ -32,7 +32,7 @@ Navbars come with built-in support for a handful of sub-components. Choose from Here's an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the `lg` (large) breakpoint. {% example html %} -
{% highlight html %} -
-
+
Album diff --git a/docs/4.0/examples/navbar-top-fixed/index.html b/docs/4.0/examples/navbar-top-fixed/index.html index f27b42dd8e..9a81499d0b 100644 --- a/docs/4.0/examples/navbar-top-fixed/index.html +++ b/docs/4.0/examples/navbar-top-fixed/index.html @@ -18,7 +18,7 @@ -
-
-
-
-
-
-