rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-29 21:52:22 +01:00
Code Issues Actions Packages Releases Activity

Drop the old $gray- variables for the new color range

Browse Source
This commit is contained in:
Mark Otto 2017-06-29 23:15:16 -07:00
parent a21a9f341b
commit 964e06800a
6 changed files with 56 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/scss/_component-examples.scss
View File

@ -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
}

2
assets/scss/_footer.scss
View File

@ -11,7 +11,7 @@
a {
font-weight: 500;
color: $gray;
color: $gray-700;
&:hover,
&:focus {

2
assets/scss/_nav.scss
View File

@ -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;

2
assets/scss/_sidebar.scss
View File

@ -103,7 +103,7 @@
.bd-search-docs-toggle {
line-height: 1;
color: $gray-dark;
color: $gray-900;
}
.bd-sidenav {

8
docs/4.0/getting-started/options.md
View File

@ -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 %}

107
scss/_variables.scss
View File

@ -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;