Merge branch 'main' into simpler-input-groups

twbs · Oct 1, 2020 · a3001d4 · a3001d4
2 parents 33cf218 + c5966de
commit a3001d4
Show file tree

Hide file tree

Showing 13 changed files with 60 additions and 56 deletions.
diff --git a/scss/_root.scss b/scss/_root.scss
@@ -1,16 +1,16 @@
 :root {
   // Custom variable values only support SassScript inside `#{}`.
   @each $color, $value in $colors {
-    --bs-#{$color}: #{$value};
+    --#{$variable-prefix}#{$color}: #{$value};
   }
 
   @each $color, $value in $theme-colors {
-    --bs-#{$color}: #{$value};
+    --#{$variable-prefix}#{$color}: #{$value};
   }
 
   // Use `inspect` for lists so that quoted items keep the quotes.
   // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
-  --bs-font-sans-serif: #{inspect($font-family-sans-serif)};
-  --bs-font-monospace: #{inspect($font-family-monospace)};
-  --bs-gradient: #{$gradient};
+  --#{$variable-prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
+  --#{$variable-prefix}font-monospace: #{inspect($font-family-monospace)};
+  --#{$variable-prefix}gradient: #{$gradient};
 }
diff --git a/scss/_tables.scss b/scss/_tables.scss
@@ -3,14 +3,14 @@
 //
 
 .table {
-  --bs-table-bg: #{$table-bg};
-  --bs-table-accent-bg: transparent;
-  --bs-table-striped-color: #{$table-striped-color};
-  --bs-table-striped-bg: #{$table-striped-bg};
-  --bs-table-active-color: #{$table-active-color};
-  --bs-table-active-bg: #{$table-active-bg};
-  --bs-table-hover-color: #{$table-hover-color};
-  --bs-table-hover-bg: #{$table-hover-bg};
+  --#{$variable-prefix}table-bg: #{$table-bg};
+  --#{$variable-prefix}table-accent-bg: transparent;
+  --#{$variable-prefix}table-striped-color: #{$table-striped-color};
+  --#{$variable-prefix}table-striped-bg: #{$table-striped-bg};
+  --#{$variable-prefix}table-active-color: #{$table-active-color};
+  --#{$variable-prefix}table-active-bg: #{$table-active-bg};
+  --#{$variable-prefix}table-hover-color: #{$table-hover-color};
+  --#{$variable-prefix}table-hover-bg: #{$table-hover-bg};
 
   width: 100%;
   margin-bottom: $spacer;
@@ -25,8 +25,8 @@
   // stylelint-disable-next-line selector-max-universal
   > :not(caption) > * > * {
     padding: $table-cell-padding-y $table-cell-padding-x;
-    background-color: var(--bs-table-bg);
-    background-image: linear-gradient(var(--bs-table-accent-bg), var(--bs-table-accent-bg));
+    background-color: var(--#{$variable-prefix}table-bg);
+    background-image: linear-gradient(var(--#{$variable-prefix}table-accent-bg), var(--#{$variable-prefix}table-accent-bg));
     border-bottom-width: $table-border-width;
   }
 
@@ -99,8 +99,8 @@
 
 .table-striped {
   > tbody > tr:nth-of-type(#{$table-striped-order}) {
-    --bs-table-accent-bg: var(--bs-table-striped-bg);
-    color: var(--bs-table-striped-color);
+    --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-striped-bg);
+    color: var(--#{$variable-prefix}table-striped-color);
   }
 }
 
@@ -109,8 +109,8 @@
 // The `.table-active` class can be added to highlight rows or cells
 
 .table-active {
-  --bs-table-accent-bg: var(--bs-table-active-bg);
-  color: var(--bs-table-active-color);
+  --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-active-bg);
+  color: var(--#{$variable-prefix}table-active-color);
 }
 
 // Hover effect
@@ -119,8 +119,8 @@
 
 .table-hover {
   > tbody > tr:hover {
-    --bs-table-accent-bg: var(--bs-table-hover-bg);
-    color: var(--bs-table-hover-color);
+    --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-hover-bg);
+    color: var(--#{$variable-prefix}table-hover-color);
   }
 }
 

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
@@ -448,7 +448,7 @@ $utilities: map-merge(
     "gradient": (
       property: background-image,
       class: bg,
-      values: (gradient: var(--bs-gradient))
+      values: (gradient: var(--#{$variable-prefix}gradient))
     ),
     "white-space": (
       property: white-space,
@@ -475,7 +475,7 @@ $utilities: map-merge(
     "font-family": (
       property: font-family,
       class: font,
-      values: (monospace: var(--bs-font-monospace))
+      values: (monospace: var(--#{$variable-prefix}font-monospace))
     ),
     "user-select": (
       property: user-select,

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -222,6 +222,10 @@ $enable-negative-margins:     false !default;
 $enable-deprecation-messages: true !default;
 $enable-important-utilities:  true !default;
 
+// Prefix for :root CSS variables
+
+$variable-prefix:             bs- !default;
+
 // Gradient
 //
 // The gradient which is added to components if `$enable-gradients` is `true`
@@ -395,8 +399,8 @@ $aspect-ratios: (
 $font-family-sans-serif:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
 $font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
 // stylelint-enable value-keyword-case
-$font-family-base:            var(--bs-font-sans-serif) !default;
-$font-family-code:            var(--bs-font-monospace) !default;
+$font-family-base:            var(--#{$variable-prefix}font-sans-serif) !default;
+$font-family-code:            var(--#{$variable-prefix}font-monospace) !default;
 
 // $font-size-root effects the value of `rem`, which is used for as well font sizes, paddings and margins
 // $font-size-base effects the font size of the body text

diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
@@ -53,15 +53,15 @@
 
     &[type="checkbox"] {
       @if $enable-gradients {
-        background-image: escape-svg($form-check-input-checked-bg-image), var(--bs-gradient);
+        background-image: escape-svg($form-check-input-checked-bg-image), var(--#{$variable-prefix}gradient);
       } @else {
         background-image: escape-svg($form-check-input-checked-bg-image);
       }
     }
 
     &[type="radio"] {
       @if $enable-gradients {
-        background-image: escape-svg($form-check-radio-checked-bg-image), var(--bs-gradient);
+        background-image: escape-svg($form-check-radio-checked-bg-image), var(--#{$variable-prefix}gradient);
       } @else {
         background-image: escape-svg($form-check-radio-checked-bg-image);
       }
@@ -73,7 +73,7 @@
     border-color: $form-check-input-indeterminate-border-color;
 
     @if $enable-gradients {
-      background-image: escape-svg($form-check-input-indeterminate-bg-image), var(--bs-gradient);
+      background-image: escape-svg($form-check-input-indeterminate-bg-image), var(--#{$variable-prefix}gradient);
     } @else {
       background-image: escape-svg($form-check-input-indeterminate-bg-image);
     }
@@ -122,7 +122,7 @@
       background-position: $form-switch-checked-bg-position;
 
       @if $enable-gradients {
-        background-image: escape-svg($form-switch-checked-bg-image), var(--bs-gradient);
+        background-image: escape-svg($form-switch-checked-bg-image), var(--#{$variable-prefix}gradient);
       } @else {
         background-image: escape-svg($form-switch-checked-bg-image);
       }

diff --git a/scss/forms/_form-file.scss b/scss/forms/_form-file.scss
@@ -1,13 +1,13 @@
 .form-file {
-  --bs-form-file-height: #{$form-file-height};
+  --#{$variable-prefix}form-file-height: #{$form-file-height};
   position: relative;
 }
 
 .form-file-input {
   position: relative;
   z-index: 2;
   width: 100%;
-  height: var(--bs-form-file-height);
+  height: var(--#{$variable-prefix}form-file-height);
   margin: 0;
   opacity: 0;
 
@@ -32,7 +32,7 @@
   left: 0;
   z-index: 1;
   display: flex;
-  height: var(--bs-form-file-height);
+  height: var(--#{$variable-prefix}form-file-height);
   border-color: $form-file-border-color;
   @include border-radius($form-file-border-radius);
   @include box-shadow($form-file-box-shadow);
@@ -71,7 +71,7 @@
 }
 
 .form-file-sm {
-  --bs-form-file-height: #{$form-file-height-sm};
+  --#{$variable-prefix}form-file-height: #{$form-file-height-sm};
   @include font-size($form-file-font-size-sm);
 
   .form-file-text,
@@ -81,7 +81,7 @@
 }
 
 .form-file-lg {
-  --bs-form-file-height: #{$form-file-height-lg};
+  --#{$variable-prefix}form-file-height: #{$form-file-height-lg};
   @include font-size($form-file-font-size-lg);
 
   .form-file-text,

diff --git a/scss/mixins/_gradients.scss b/scss/mixins/_gradients.scss
@@ -4,7 +4,7 @@
   background-color: $color;
 
   @if $enable-gradients {
-    background-image: var(--bs-gradient);
+    background-image: var(--#{$variable-prefix}gradient);
   }
 }
 

diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
@@ -3,13 +3,13 @@
 // Generate semantic grid columns with these mixins.
 
 @mixin make-row($gutter: $grid-gutter-width) {
-  --bs-gutter-x: #{$gutter};
-  --bs-gutter-y: 0;
+  --#{$variable-prefix}gutter-x: #{$gutter};
+  --#{$variable-prefix}gutter-y: 0;
   display: flex;
   flex-wrap: wrap;
-  margin-top: calc(var(--bs-gutter-y) * -1); // stylelint-disable-line function-disallowed-list
-  margin-right: calc(var(--bs-gutter-x) / -2); // stylelint-disable-line function-disallowed-list
-  margin-left: calc(var(--bs-gutter-x) / -2); // stylelint-disable-line function-disallowed-list
+  margin-top: calc(var(--#{$variable-prefix}gutter-y) * -1); // stylelint-disable-line function-disallowed-list
+  margin-right: calc(var(--#{$variable-prefix}gutter-x) / -2); // stylelint-disable-line function-disallowed-list
+  margin-left: calc(var(--#{$variable-prefix}gutter-x) / -2); // stylelint-disable-line function-disallowed-list
 }
 
 @mixin make-col-ready($gutter: $grid-gutter-width) {
@@ -21,9 +21,9 @@
   flex-shrink: 0;
   width: 100%;
   max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
-  padding-right: calc(var(--bs-gutter-x) / 2); // stylelint-disable-line function-disallowed-list
-  padding-left: calc(var(--bs-gutter-x) / 2); // stylelint-disable-line function-disallowed-list
-  margin-top: var(--bs-gutter-y);
+  padding-right: calc(var(--#{$variable-prefix}gutter-x) / 2); // stylelint-disable-line function-disallowed-list
+  padding-left: calc(var(--#{$variable-prefix}gutter-x) / 2); // stylelint-disable-line function-disallowed-list
+  margin-top: var(--#{$variable-prefix}gutter-y);
 }
 
 @mixin make-col($size, $columns: $grid-columns) {
@@ -107,12 +107,12 @@
       @each $key, $value in $gutters {
         .g#{$infix}-#{$key},
         .gx#{$infix}-#{$key} {
-          --bs-gutter-x: #{$value};
+          --#{$variable-prefix}gutter-x: #{$value};
         }
 
         .g#{$infix}-#{$key},
         .gy#{$infix}-#{$key} {
-          --bs-gutter-y: #{$value};
+          --#{$variable-prefix}gutter-y: #{$value};
         }
       }
     }

diff --git a/scss/mixins/_table-variants.scss b/scss/mixins/_table-variants.scss
@@ -6,13 +6,13 @@
     $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
     $active-bg: mix($color, $background, percentage($table-active-bg-factor));
 
-    --bs-table-bg: #{$background};
-    --bs-table-striped-bg: #{$striped-bg};
-    --bs-table-striped-color: #{color-contrast($striped-bg)};
-    --bs-table-active-bg: #{$active-bg};
-    --bs-table-active-color: #{color-contrast($active-bg)};
-    --bs-table-hover-bg: #{$hover-bg};
-    --bs-table-hover-color: #{color-contrast($hover-bg)};
+    --#{$variable-prefix}table-bg: #{$background};
+    --#{$variable-prefix}table-striped-bg: #{$striped-bg};
+    --#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)};
+    --#{$variable-prefix}table-active-bg: #{$active-bg};
+    --#{$variable-prefix}table-active-color: #{color-contrast($active-bg)};
+    --#{$variable-prefix}table-hover-bg: #{$hover-bg};
+    --#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)};
 
     color: $color;
     border-color: mix($color, $background, percentage($table-border-factor));

diff --git a/site/content/docs/5.0/components/close-button.md b/site/content/docs/5.0/components/close-button.md
@@ -24,7 +24,7 @@ Disabled close buttons change their `opacity`. We've also applied `pointer-event
 
 ## White variant
 
-Change the default `.btn-close` to be white with the `.btn-close-white` class. This class uses the `backdrop-filter` property to invert the `background-image`.
+Change the default `.btn-close` to be white with the `.btn-close-white` class. This class uses the `filter` property to invert the `background-image`.
 
 {{< example class="bg-dark" >}}
 <button type="button" class="btn-close btn-close-white" aria-label="Close"></button>

diff --git a/site/content/docs/5.0/forms/validation.md b/site/content/docs/5.0/forms/validation.md
@@ -386,6 +386,6 @@ This is the Sass map from `_variables.scss`. Override this and recompile your Sa
 
 {{< scss-docs name="form-validation-states" file="scss/_variables.scss" >}}
 
-This is the loop from `forms/_validation.scss.scss`. Any modifications to the above Sass map will be reflected in your compiled CSS via this loop:
+This is the loop from `forms/_validation.scss`. Any modifications to the above Sass map will be reflected in your compiled CSS via this loop:
 
 {{< scss-docs name="form-validation-states-loop" file="scss/forms/_validation.scss" >}}
diff --git a/site/content/docs/5.0/getting-started/webpack.md b/site/content/docs/5.0/getting-started/webpack.md
@@ -27,7 +27,7 @@ import Alert from 'bootstrap/js/dist/alert';
 {{< /highlight >}}
 
 Bootstrap depends on [Popper](https://popper.js.org/), which is specified in the `peerDependencies` property.
-This means that you will have to make sure to add both of them to your `package.json` using `npm install popper.js`.
+This means that you will have to make sure to add it to your `package.json` using `npm install popper.js`.
 
 ## Importing Styles
 

diff --git a/site/content/docs/5.0/migration.md b/site/content/docs/5.0/migration.md
@@ -80,7 +80,7 @@ toc: true
 - Renamed `.close` to `.btn-close` for a less generic name.
 - Close buttons now use a `background-image` (embedded SVG) instead of a `&times;` in the HTML, allowing for easier customization without the need to touch your markup.
 - Added new variables to better control the customization.
-- Added new `.btn-close-white` variant that uses `backdrop-filter: invert(1)` to enable higher contrast dismiss icons against darker backgrounds.
+- Added new `.btn-close-white` variant that uses `filter: invert(1)` to enable higher contrast dismiss icons against darker backgrounds.
 
 #### Collapse