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..92ea288384 --- /dev/null +++ b/_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" 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/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/_component-examples.scss b/assets/scss/_component-examples.scss index 4424d3a17a..32e5aa6616 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; } @@ -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 } 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/_footer.scss b/assets/scss/_footer.scss index e7ffac4806..e6f56d51e3 100644 --- a/assets/scss/_footer.scss +++ b/assets/scss/_footer.scss @@ -11,7 +11,7 @@ a { font-weight: 500; - color: $gray; + color: $gray-700; &:hover, &:focus { diff --git a/assets/scss/_nav.scss b/assets/scss/_nav.scss index 2c0c016df7..7e831e67aa 100644 --- a/assets/scss/_nav.scss +++ b/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; diff --git a/assets/scss/_sidebar.scss b/assets/scss/_sidebar.scss index ebcc23c449..99775e3af2 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; } } @@ -103,7 +103,7 @@ .bd-search-docs-toggle { line-height: 1; - color: $gray-dark; + color: $gray-900; } .bd-sidenav { 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 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/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/docs/4.0/components/buttons.md b/docs/4.0/components/buttons.md index cfd243dad0..cfddfe18d5 100644 --- a/docs/4.0/components/buttons.md +++ b/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 %} - - +{% for color in site.data.theme-colors %} +{% endfor %} - - - - - - - - - - - - - - - - {% endexample %} @@ -56,15 +40,10 @@ When using button classes on `` 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 %} - - - - - - +{% for color in site.data.theme-colors %} +{% endfor %} {% endexample %} - ## Sizes Fancy larger or smaller buttons? Add `.btn-lg` or `.btn-sm` for additional sizes. diff --git a/docs/4.0/components/card.md b/docs/4.0/components/card.md index bc20da88fc..56c4442c9a 100644 --- a/docs/4.0/components/card.md +++ b/docs/4.0/components/card.md @@ -52,7 +52,7 @@ Card titles are used by adding `.card-title` to a `` tag. In the same way, l Subtitles are used by adding a `.card-subtitle` to a `` tag. If the `.card-title` and the `.card-subtitle` items are placed in a `.card-body` item, the card title and subtitle are aligned nicely. {% example html %} -
+

Card title

Card subtitle
@@ -68,7 +68,7 @@ Subtitles are used by adding a `.card-subtitle` to a `` tag. If the `.card-t `.card-img-top` places an image to the top of the card. With `.card-text`, text can be added to the card. Text within `.card-text` can also be styled with the standard HTML tags. {% example html %} -
+
Card image cap

Some quick example text to build on the card title and make up the bulk of the card's content.

@@ -81,7 +81,7 @@ Subtitles are used by adding a `.card-subtitle` to a `` tag. If the `.card-t Create lists of content in a card with a flush list group. {% example html %} -
+
  • Cras justo odio
  • Dapibus ac facilisis in
    • @@ -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
    @@ -349,10 +349,10 @@ Similar to headers and footers, cards can include top and bottom "image caps"— ### Image overlays -Turn an image into a card background and overlay your card's text. Depending on the image, you may or may not need `.card-inverse` (see below). +Turn an image into a card background and overlay your card's text. Depending on the image, you may or may not need `.card-dark` (see below). {% example html %} -
    +
    Card image

    Card title

    @@ -366,17 +366,17 @@ Turn an image into a card background and overlay your card's text. Depending on Cards include various options for customizing their backgrounds, borders, and color. -### Inverted text +### Dark cards -By default, cards use dark text and assume a light background. You can reverse that by toggling the `color` of text within, as well as that of the card's subcomponents, with `.card-inverse`. Then, specify a dark `background-color` and `border-color` to go with it. +By default, cards use dark text and assume a light background. You can reverse that by toggling the `color` of text within, as well as that of the card's subcomponents, with `.card-dark`. Then, specify a dark `background-color` and `border-color` to go with it. -You can also use `.card-inverse` with the [contextual backgrounds variants](#background-variants). +You can also use `.card-dark` with the [contextual backgrounds variants](#background-variants). {% example html %} -
    +
    Header
    -

    Special title treatment

    +

    Special title treatment

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

    Go somewhere
    @@ -386,10 +386,10 @@ You can also use `.card-inverse` with the [contextual backgrounds variants](#bac ### Background variants -Cards include their own variant classes for quickly changing the `background-color` and `border-color` of a card. **Darker colors require the use of `.card-inverse`.** +Cards include their own variant classes for quickly changing the `background-color` and `border-color` of a card. **Darker colors require the use of `.card-dark`.** {% example html %} -
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

    @@ -397,7 +397,7 @@ Cards include their own variant classes for quickly changing the `background-col
    -
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

    @@ -405,7 +405,7 @@ Cards include their own variant classes for quickly changing the `background-col
    -
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

    @@ -413,7 +413,7 @@ Cards include their own variant classes for quickly changing the `background-col
    -
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

    @@ -421,7 +421,7 @@ Cards include their own variant classes for quickly changing the `background-col
    -
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

    @@ -666,7 +666,7 @@ Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns

    Last updated 3 mins ago

    -
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

    diff --git a/docs/4.0/components/list-group.md b/docs/4.0/components/list-group.md index 4e544ce184..66d76a77dd 100644 --- a/docs/4.0/components/list-group.md +++ b/docs/4.0/components/list-group.md @@ -87,10 +87,9 @@ Use contextual classes to style list items with a stateful background and color. {% example html %}
    • Dapibus ac facilisis in
      • -
    • Dapibus ac facilisis in
      • -
    • Cras sit amet nibh libero
      • -
    • Porta ac consectetur ac
      • -
    • Vestibulum at eros
      • + + {% for color in site.data.theme-colors %} +
    • This is a {{ color.name }} list group item
      • {% endfor %}
    {% endexample %} @@ -99,10 +98,9 @@ Contextual classes also work with `.list-group-item-action`. Note the addition o {% example html %}
    Dapibus ac facilisis in - Dapibus ac facilisis in - Cras sit amet nibh libero - Porta ac consectetur ac - Vestibulum at eros + + {% for color in site.data.theme-colors %} + This is a {{ color.name }} list group item{% endfor %}
    {% endexample %} 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 %} -
    -
    -
    -
    -