]> git.ipfire.org Git - thirdparty/bootstrap.git/commitdiff
projects / thirdparty / bootstrap.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: a21a9f3)
Drop the old $gray- variables for the new color range
authorMark Otto <markdotto@gmail.com>
Fri, 30 Jun 2017 06:15:16 +0000 (23:15 -0700)
committerMark Otto <markdotto@gmail.com>
Fri, 30 Jun 2017 06:15:27 +0000 (23:15 -0700)
assets/scss/_component-examples.scss patch | blob | blame | history
assets/scss/_footer.scss patch | blob | blame | history
assets/scss/_nav.scss patch | blob | blame | history
assets/scss/_sidebar.scss patch | blob | blame | history
docs/4.0/getting-started/options.md patch | blob | blame | history
scss/_variables.scss patch | blob | blame | history

diff --git a/assets/scss/_component-examples.scss b/assets/scss/_component-examples.scss
index f5b87d126336136529ec723f83f3bcc067958e3d..32e5aa66168c8ec335aa80cc83df500a12b2191d 100644 (file)
--- a/assets/scss/_component-examples.scss
+++ b/assets/scss/_component-examples.scss
@@ -411,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/_footer.scss b/assets/scss/_footer.scss
index e7ffac4806d341b7c8d3e5a3f68827c1a873f863..e6f56d51e3571797e0b42ef289553ccafc13e09c 100644 (file)
--- 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 2c0c016df785abb33308a4f670ddaeda8519d86f..7e831e67aac42269d1d94eb2f534dbc7985c0bec 100644 (file)
--- 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 05b93c100ad4f14527e96bc80b90b3abd692d28e..99775e3af22af835c81de333592c57c6128f6462 100644 (file)
--- a/assets/scss/_sidebar.scss
+++ b/assets/scss/_sidebar.scss
@@ -103,7 +103,7 @@
 
 .bd-search-docs-toggle {
   line-height: 1;
-  color: $gray-dark;
+  color: $gray-900;
 }
 
 .bd-sidenav {
diff --git a/docs/4.0/getting-started/options.md b/docs/4.0/getting-started/options.md
index 4dfac50cbd527789184c7833cb6c8b89fbc4c910..387b68a54eb3d7722f797ae02882899e975efda9 100644 (file)
--- a/docs/4.0/getting-started/options.md
+++ b/docs/4.0/getting-started/options.md
@@ -13,8 +13,8 @@ Every Sass variable in Bootstrap 4 includes the `!default` flag, meaning you can
 For example, to change out the `background-color` and `color` for the `<body>`, you'd do the following:
 
 {% highlight scss %}
-$body-bg:    $gray-dark;
-$body-color: $gray-light;
+$body-bg:    $gray-900;
+$body-color: $gray-600;
 {% endhighlight %}
 
 Do the same for any variable you need to override, including the global options listed below.
@@ -103,8 +103,8 @@ $colors: (
   pink: $pink,
   purple: $purple,
   white: $white,
-  gray: $gray-light,
-  gray-dark: $gray-dark
+  gray: $gray-600,
+  gray-dark: $gray-900
 ) !default;
 {% endhighlight %}
 
diff --git a/scss/_variables.scss b/scss/_variables.scss
index e72c6e7157c652e7a838c6c61ae8312f08161df0..0185d53470bc620fabbcbea0b8873953cf0e5605 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -110,17 +110,6 @@ $theme-colors: (
 // Set a specific jump point for requesting color jumps
 $theme-color-interval: 8% !default;
 
-// Colors
-//
-// Grayscale and brand colors for use across Bootstrap.
-
-// Create grayscale
-$gray-dark:                 #292b2c !default;
-$gray:                      #464a4c !default;
-$gray-light:                #636c72 !default;
-$gray-lighter:              #eceeef !default;
-$gray-lightest:             #f7f7f9 !default;
-
 
 // Options
 //
@@ -164,7 +153,7 @@ $sizes: (
 // Settings for the `<body>` element.
 
 $body-bg:       $white !default;
-$body-color:    $gray-dark !default;
+$body-color:    $gray-900 !default;
 
 // Links
 //
@@ -291,11 +280,11 @@ $lead-font-weight: 300 !default;
 
 $small-font-size: 80% !default;
 
-$text-muted: $gray-light !default;
+$text-muted: $gray-600 !default;
 
-$blockquote-small-color:  $gray-light !default;
+$blockquote-small-color:  $gray-600 !default;
 $blockquote-font-size:    ($font-size-base * 1.25) !default;
-$blockquote-border-color: $gray-lighter !default;
+$blockquote-border-color: $gray-200 !default;
 $blockquote-border-width: .25rem !default;
 
 $hr-border-color: rgba($black,.1) !default;
@@ -326,15 +315,15 @@ $table-hover-bg:                rgba($black,.075) !default;
 $table-active-bg:               $table-hover-bg !default;
 
 $table-border-width:            $border-width !default;
-$table-border-color:            $gray-lighter !default;
+$table-border-color:            $gray-200 !default;
 
-$table-head-bg:                 $gray-lighter !default;
-$table-head-color:              $gray !default;
+$table-head-bg:                 $gray-200 !default;
+$table-head-color:              $gray-700 !default;
 
-$table-inverse-bg:              $gray-dark !default;
+$table-inverse-bg:              $gray-900 !default;
 $table-inverse-accent-bg:       rgba($white, .05) !default;
 $table-inverse-hover-bg:        rgba($white, .075) !default;
-$table-inverse-border-color:    lighten($gray-dark, 7.5%) !default;
+$table-inverse-border-color:    lighten($gray-900, 7.5%) !default;
 $table-inverse-color:           $body-bg !default;
 
 
@@ -363,7 +352,7 @@ $btn-primary-color:              $white !default;
 $btn-primary-bg:                 theme-color("primary") !default;
 $btn-primary-border-color:       $btn-primary-bg !default;
 
-$btn-secondary-color:            $gray-dark !default;
+$btn-secondary-color:            $gray-900 !default;
 $btn-secondary-bg:               $white !default;
 $btn-secondary-border-color:     #ccc !default;
 
@@ -383,7 +372,7 @@ $btn-danger-color:               $white !default;
 $btn-danger-bg:                  theme-color("danger") !default;
 $btn-danger-border-color:        $btn-danger-bg !default;
 
-$btn-link-disabled-color:        $gray-light !default;
+$btn-link-disabled-color:        $gray-600 !default;
 
 $btn-block-spacing-y:            .5rem !default;
 
@@ -398,9 +387,9 @@ $btn-transition:                 all .2s ease-in-out !default;
 // Forms
 
 $input-bg:                       $white !default;
-$input-disabled-bg:              $gray-lighter !default;
+$input-disabled-bg:              $gray-200 !default;
 
-$input-color:                    $gray !default;
+$input-color:                    $gray-700 !default;
 $input-border-color:             rgba($black,.15) !default;
 $input-btn-border-width:         $border-width !default; // For form controls and buttons
 $input-box-shadow:               inset 0 1px 1px rgba($black,.075) !default;
@@ -414,7 +403,7 @@ $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;
 
-$input-placeholder-color:        $gray-light !default;
+$input-placeholder-color:        $gray-600 !default;
 
 $input-height-border:           $input-btn-border-width * 2 !default;
 
@@ -441,7 +430,7 @@ $form-check-inline-margin-x: .75rem !default;
 
 $form-group-margin-bottom:       1rem !default;
 
-$input-group-addon-bg:           $gray-lighter !default;
+$input-group-addon-bg:           $gray-200 !default;
 $input-group-addon-border-color: $input-border-color !default;
 
 $custom-control-gutter:   1.5rem !default;
@@ -453,8 +442,8 @@ $custom-control-indicator-bg:         #ddd !default;
 $custom-control-indicator-bg-size:    50% 50% !default;
 $custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba($black,.1) !default;
 
-$custom-control-indicator-disabled-bg:       $gray-lighter !default;
-$custom-control-description-disabled-color:  $gray-light !default;
+$custom-control-indicator-disabled-bg:       $gray-200 !default;
+$custom-control-description-disabled-color:  $gray-600 !default;
 
 $custom-control-indicator-checked-color:      $white !default;
 $custom-control-indicator-checked-bg:         theme-color("primary") !default;
@@ -483,9 +472,9 @@ $custom-select-height:              $input-height  !default;
 $custom-select-indicator-padding:   1rem !default; // Extra padding to account for the presence of the background-image based indicator
 $custom-select-line-height:         $input-btn-line-height !default;
 $custom-select-color:               $input-color !default;
-$custom-select-disabled-color:      $gray-light !default;
+$custom-select-disabled-color:      $gray-600 !default;
 $custom-select-bg:            $white !default;
-$custom-select-disabled-bg:   $gray-lighter !default;
+$custom-select-disabled-bg:   $gray-200 !default;
 $custom-select-bg-size:       8px 10px !default; // In pixels because image dimensions
 $custom-select-indicator-color: #333 !default;
 $custom-select-indicator:     str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"), "#", "%23") !default;
@@ -506,14 +495,14 @@ $custom-file-focus-box-shadow: 0 0 0 .075rem $white, 0 0 0 .2rem theme-color("pr
 $custom-file-padding-y:     1rem !default;
 $custom-file-padding-x:     .5rem !default;
 $custom-file-line-height:   1.5 !default;
-$custom-file-color:         $gray !default;
+$custom-file-color:         $gray-700 !default;
 $custom-file-bg:            $white !default;
 $custom-file-border-width:  $border-width !default;
 $custom-file-border-color:  $input-border-color !default;
 $custom-file-border-radius: $border-radius !default;
 $custom-file-box-shadow:    inset 0 .2rem .4rem rgba($black,.05) !default;
 $custom-file-button-color:  $custom-file-color !default;
-$custom-file-button-bg:     $gray-lighter !default;
+$custom-file-button-bg:     $gray-200 !default;
 $custom-file-text: (
   placeholder: (
     en: "Choose file..."
@@ -539,22 +528,22 @@ $dropdown-margin-top:            .125rem !default;
 $dropdown-bg:                    $white !default;
 $dropdown-border-color:          rgba($black,.15) !default;
 $dropdown-border-width:          $border-width !default;
-$dropdown-divider-bg:            $gray-lighter !default;
+$dropdown-divider-bg:            $gray-200 !default;
 $dropdown-box-shadow:            0 .5rem 1rem rgba($black,.175) !default;
 
-$dropdown-link-color:            $gray-dark !default;
-$dropdown-link-hover-color:      darken($gray-dark, 5%) !default;
-$dropdown-link-hover-bg:         $gray-lightest !default;
+$dropdown-link-color:            $gray-900 !default;
+$dropdown-link-hover-color:      darken($gray-900, 5%) !default;
+$dropdown-link-hover-bg:         $gray-100 !default;
 
 $dropdown-link-active-color:     $component-active-color !default;
 $dropdown-link-active-bg:        $component-active-bg !default;
 
-$dropdown-link-disabled-color:   $gray-light !default;
+$dropdown-link-disabled-color:   $gray-600 !default;
 
 $dropdown-item-padding-y:        .25rem !default;
 $dropdown-item-padding-x:        1.5rem !default;
 
-$dropdown-header-color:          $gray-light !default;
+$dropdown-header-color:          $gray-600 !default;
 
 
 // Z-index master list
@@ -574,13 +563,13 @@ $zindex-tooltip:            1070 !default;
 
 $nav-link-padding-y:            .5rem !default;
 $nav-link-padding-x:            1rem !default;
-$nav-link-disabled-color:       $gray-light !default;
+$nav-link-disabled-color:       $gray-600 !default;
 
 $nav-tabs-border-color:                       #ddd !default;
 $nav-tabs-border-width:                       $border-width !default;
 $nav-tabs-border-radius:                      $border-radius !default;
-$nav-tabs-link-hover-border-color:            $gray-lighter !default;
-$nav-tabs-link-active-color:                  $gray !default;
+$nav-tabs-link-hover-border-color:            $gray-200 !default;
+$nav-tabs-link-active-color:                  $gray-700 !default;
 $nav-tabs-link-active-bg:                     $body-bg !default;
 $nav-tabs-link-active-border-color:           #ddd !default;
 
@@ -634,14 +623,14 @@ $pagination-border-width:              $border-width !default;
 $pagination-border-color:              #ddd !default;
 
 $pagination-hover-color:               $link-hover-color !default;
-$pagination-hover-bg:                  $gray-lighter !default;
+$pagination-hover-bg:                  $gray-200 !default;
 $pagination-hover-border-color:        #ddd !default;
 
 $pagination-active-color:              $white !default;
 $pagination-active-bg:                 theme-color("primary") !default;
 $pagination-active-border-color:       theme-color("primary") !default;
 
-$pagination-disabled-color:            $gray-light !default;
+$pagination-disabled-color:            $gray-600 !default;
 $pagination-disabled-bg:               $white !default;
 $pagination-disabled-border-color:     #ddd !default;
 
@@ -649,7 +638,7 @@ $pagination-disabled-border-color:     #ddd !default;
 // Jumbotron
 
 $jumbotron-padding:              2rem !default;
-$jumbotron-bg:                   $gray-lighter !default;
+$jumbotron-bg:                   $gray-200 !default;
 
 
 // Cards
@@ -660,7 +649,7 @@ $card-border-width:        1px !default;
 $card-border-radius:       $border-radius !default;
 $card-border-color:        rgba($black,.125) !default;
 $card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default;
-$card-cap-bg:              $gray-lightest !default;
+$card-cap-bg:              $gray-100 !default;
 $card-bg:                  $white !default;
 
 $card-dark-link-hover-color:    $white !default;
@@ -718,7 +707,7 @@ $popover-arrow-outer-color:           fade-in($popover-border-color, .05) !defau
 
 // Badges
 
-$badge-default-bg:            $gray-light !default;
+$badge-default-bg:            $gray-600 !default;
 $badge-primary-bg:            theme-color("primary") !default;
 $badge-success-bg:            theme-color("success") !default;
 $badge-info-bg:               theme-color("info") !default;
@@ -756,7 +745,7 @@ $modal-content-box-shadow-sm-up: 0 5px 15px rgba($black,.5) !default;
 
 $modal-backdrop-bg:           $black !default;
 $modal-backdrop-opacity:      .5 !default;
-$modal-header-border-color:   $gray-lighter !default;
+$modal-header-border-color:   $gray-200 !default;
 $modal-footer-border-color:   $modal-header-border-color !default;
 $modal-header-border-width:   $modal-content-border-width !default;
 $modal-footer-border-width:   $modal-header-border-width !default;
@@ -785,7 +774,7 @@ $alert-border-width:          $border-width !default;
 
 $progress-height:               1rem !default;
 $progress-font-size:            .75rem !default;
-$progress-bg:                   $gray-lighter !default;
+$progress-bg:                   $gray-200 !default;
 $progress-border-radius:        $border-radius !default;
 $progress-box-shadow:           inset 0 .1rem .1rem rgba($black,.1) !default;
 $progress-bar-color:            $white !default;
@@ -804,19 +793,19 @@ $list-group-border-radius:       $border-radius !default;
 $list-group-item-padding-y:      .75rem !default;
 $list-group-item-padding-x:      1.25rem !default;
 
-$list-group-hover-bg:                 $gray-lightest !default;
+$list-group-hover-bg:                 $gray-100 !default;
 $list-group-active-color:             $component-active-color !default;
 $list-group-active-bg:                $component-active-bg !default;
 $list-group-active-border-color:      $list-group-active-bg !default;
 
-$list-group-disabled-color:      $gray-light !default;
+$list-group-disabled-color:      $gray-600 !default;
 $list-group-disabled-bg:         $list-group-bg !default;
 
-$list-group-action-color:             $gray !default;
+$list-group-action-color:             $gray-700 !default;
 $list-group-action-hover-color:       $list-group-action-color !default;
 
 $list-group-action-active-color:      $list-group-color !default;
-$list-group-action-active-bg:         $gray-lighter !default;
+$list-group-action-active-bg:         $gray-200 !default;
 
 
 // Image thumbnails
@@ -833,7 +822,7 @@ $thumbnail-transition:        all .2s ease-in-out !default;
 // Figures
 
 $figure-caption-font-size: 90% !default;
-$figure-caption-color:     $gray-light !default;
+$figure-caption-color:     $gray-600 !default;
 
 
 // Breadcrumbs
@@ -842,9 +831,9 @@ $breadcrumb-padding-y:          .75rem !default;
 $breadcrumb-padding-x:          1rem !default;
 $breadcrumb-item-padding:       .5rem !default;
 
-$breadcrumb-bg:                 $gray-lighter !default;
-$breadcrumb-divider-color:      $gray-light !default;
-$breadcrumb-active-color:       $gray-light !default;
+$breadcrumb-bg:                 $gray-200 !default;
+$breadcrumb-divider-color:      $gray-600 !default;
+$breadcrumb-active-color:       $gray-600 !default;
 $breadcrumb-divider:            "/" !default;
 
 
@@ -883,10 +872,10 @@ $code-font-size:              90% !default;
 $code-padding-y:              .2rem !default;
 $code-padding-x:              .4rem !default;
 $code-color:                  #bd4147 !default;
-$code-bg:                     $gray-lightest !default;
+$code-bg:                     $gray-100 !default;
 
 $kbd-color:                   $white !default;
-$kbd-bg:                      $gray-dark !default;
+$kbd-bg:                      $gray-900 !default;
 
-$pre-color:                   $gray-dark !default;
+$pre-color:                   $gray-900 !default;
 $pre-scrollable-max-height:   340px !default;
Mirror of https://github.com/twbs/bootstrap.git