From 597e9f861807868d8d13bac93e8a328493fe6d54 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 18 Jun 2017 02:57:16 -0700 Subject: [PATCH] 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