From: Mark Otto <markd.otto@gmail.com>
Date: Sun, 8 Mar 2026 00:34:09 +0000 (-0800)
Subject: Rename `$grid-breakpoints` to `$breakpoints`, add to root tokens (#42124)
X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=a5717e607efde3870154f7bb4e64d0aa03840d17;p=thirdparty%2Fbootstrap.git

Rename `$grid-breakpoints` to `$breakpoints`, add to root tokens (#42124)

* Rename breakpoints var, output to root

* fixes
---

diff --git a/js/src/util/floating-ui.js b/js/src/util/floating-ui.js
index 39527dab6a..37ce24ee91 100644
--- a/js/src/util/floating-ui.js
+++ b/js/src/util/floating-ui.js
@@ -8,7 +8,7 @@
 import { isRTL } from './index.js'
 
 /**
- * Breakpoints for responsive placement (matches SCSS $grid-breakpoints)
+ * Breakpoints for responsive placement (matches SCSS $breakpoints)
  */
 export const BREAKPOINTS = {
   sm: 576,
diff --git a/scss/_config.scss b/scss/_config.scss
index 95d496d0de..626d3089c1 100644
--- a/scss/_config.scss
+++ b/scss/_config.scss
@@ -56,13 +56,13 @@ $sizes: (
   12: calc($spacer * 12),
 ) !default;
 
-// Grid breakpoints
+// Breakpoints
 //
 // Define the minimum dimensions at which your layout will change,
 // adapting to different screen sizes, for use in media queries.
 
-// scss-docs-start grid-breakpoints
-$grid-breakpoints: (
+// scss-docs-start breakpoints
+$breakpoints: (
   xs: 0,
   sm: 576px,
   md: 768px,
@@ -70,10 +70,10 @@ $grid-breakpoints: (
   xl: 1280px,
   2xl: 1536px
 ) !default;
-// scss-docs-end grid-breakpoints
+// scss-docs-end breakpoints
 
-// @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
-// @include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
+// @include _assert-ascending($breakpoints, "$breakpoints");
+// @include _assert-starts-at-zero($breakpoints, "$breakpoints");
 
 // Grid columns
 //
diff --git a/scss/_dialog.scss b/scss/_dialog.scss
index 56e3a6243b..b5bd2f1951 100644
--- a/scss/_dialog.scss
+++ b/scss/_dialog.scss
@@ -180,8 +180,8 @@ $dialog-sizes: defaults(
   }
 
   // Responsive fullscreen dialogs
-  @each $breakpoint in map.keys($grid-breakpoints) {
-    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+  @each $breakpoint in map.keys($breakpoints) {
+    $infix: breakpoint-infix($breakpoint, $breakpoints);
     // stylelint-disable-next-line scss/at-function-named-arguments
     $postfix: if(sass($infix != ""): #{$infix}-down; else: "");
 
diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index 1d78eadac5..2be90c2d33 100644
--- a/scss/_list-group.scss
+++ b/scss/_list-group.scss
@@ -138,9 +138,9 @@ $list-group-tokens: defaults(
   //
   // Change the layout of list group items from vertical (default) to horizontal.
 
-  @each $breakpoint in map.keys($grid-breakpoints) {
+  @each $breakpoint in map.keys($breakpoints) {
     @include media-breakpoint-up($breakpoint) {
-      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+      $infix: breakpoint-infix($breakpoint, $breakpoints);
 
       .list-group-horizontal#{$infix} {
         flex-direction: row;
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 6021764cb2..697d96df5a 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -9,7 +9,7 @@
 // mdo-do: fix nav-link-height and navbar-brand-height, which we previously calculated with font-size, line-height, and block padding
 
 // scss-docs-start navbar-breakpoints
-$navbar-breakpoints: $grid-breakpoints !default;
+$navbar-breakpoints: $breakpoints !default;
 // scss-docs-end navbar-breakpoints
 
 $navbar-tokens: () !default;
diff --git a/scss/_root.scss b/scss/_root.scss
index 256e8139de..221caae814 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -1,9 +1,9 @@
 @use "sass:map";
 @use "colors" as *;
+@use "config" as *;
 @use "functions" as *;
 @use "variables" as *;
 @use "theme" as *;
-// @use "maps" as *;
 @use "mixins/tokens" as *;
 @use "forms/form-variables" as *;
 
@@ -184,6 +184,11 @@ $root-tokens: defaults(
 }
 // scss-docs-end root-theme-tokens
 
+// Generate breakpoint tokens
+@each $name, $value in $breakpoints {
+  $root-tokens: map.set($root-tokens, --breakpoint-#{$name}, $value);
+}
+
 :root {
   @include tokens($root-tokens);
 
diff --git a/scss/_stepper.scss b/scss/_stepper.scss
index bd2bf4e0fa..9ba2921ed2 100644
--- a/scss/_stepper.scss
+++ b/scss/_stepper.scss
@@ -120,9 +120,9 @@ $stepper-tokens: defaults(
   }
 }
 
-@each $breakpoint in map.keys($grid-breakpoints) {
+@each $breakpoint in map.keys($breakpoints) {
   @include media-breakpoint-up($breakpoint) {
-    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+    $infix: breakpoint-infix($breakpoint, $breakpoints);
 
     .stepper-horizontal#{$infix} {
       @include stepper-horizontal();
diff --git a/scss/bootstrap-grid.scss b/scss/bootstrap-grid.scss
index 75b291e71b..cb71b88127 100644
--- a/scss/bootstrap-grid.scss
+++ b/scss/bootstrap-grid.scss
@@ -4,7 +4,6 @@
 
 @use "config" as *;
 @use "functions" as *;
-// @use "maps" as *;
 
 @forward "utilities"; // Make utilities available downstream
 @use "utilities" as *; // Bring utilities into the current namespace
@@ -55,3 +54,9 @@ $utilities: map-get-multiple(
 
 // check-unused-imports-disable-next-line — side-effect import: generates utility CSS.
 @use "utilities/api";
+
+:root {
+  @each $name, $value in $breakpoints {
+    --breakpoint-#{$name}: #{$value};
+  }
+}
diff --git a/scss/content/_tables.scss b/scss/content/_tables.scss
index a817ac3a17..29d3de7ed4 100644
--- a/scss/content/_tables.scss
+++ b/scss/content/_tables.scss
@@ -182,8 +182,8 @@ $table-striped-columns-order: even !default;
   // Generate series of `.table-responsive-*` classes for configuring the screen
   // size of where your table will overflow.
 
-  @each $breakpoint in map.keys($grid-breakpoints) {
-    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+  @each $breakpoint in map.keys($breakpoints) {
+    $infix: breakpoint-infix($breakpoint, $breakpoints);
 
     @include media-breakpoint-down($breakpoint) {
       .table-responsive#{$infix} {
diff --git a/scss/helpers/_position.scss b/scss/helpers/_position.scss
index ead77a4956..0a7c9de07d 100644
--- a/scss/helpers/_position.scss
+++ b/scss/helpers/_position.scss
@@ -17,9 +17,9 @@
   }
 
   // Responsive sticky top and bottom
-  @each $breakpoint in map.keys($grid-breakpoints) {
+  @each $breakpoint in map.keys($breakpoints) {
     @include media-breakpoint-up($breakpoint) {
-      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+      $infix: breakpoint-infix($breakpoint, $breakpoints);
 
       .sticky#{$infix}-top {
         position: sticky;
diff --git a/scss/layout/_breakpoints.scss b/scss/layout/_breakpoints.scss
index db7323dedb..00f3fc7149 100644
--- a/scss/layout/_breakpoints.scss
+++ b/scss/layout/_breakpoints.scss
@@ -8,7 +8,7 @@
 //
 //    (xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px)
 //
-// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
+// The map defined in the `$breakpoints` global variable is used as the `$breakpoints` argument by default.
 
 // Name of the next breakpoint, or null for the last breakpoint.
 //
@@ -18,7 +18,7 @@
 //    md
 //    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl 2xl))
 //    md
-@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map.keys($breakpoints)) {
+@function breakpoint-next($name, $breakpoints: $breakpoints, $breakpoint-names: map.keys($breakpoints)) {
   $n: list.index($breakpoint-names, $name);
   @if not $n {
     @error "breakpoint `#{$name}` not found in `#{$breakpoint-names}`";
@@ -35,7 +35,7 @@
 //
 //    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px))
 //    576px
-@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
+@function breakpoint-min($name, $breakpoints: $breakpoints) {
   $min: map.get($breakpoints, $name);
   @return if(sass($min != 0): $min; else: null);
 }
@@ -47,7 +47,7 @@
 //    576px
 //    >> breakpoint-max(xxl, (xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px))
 //    null
-@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
+@function breakpoint-max($name, $breakpoints: $breakpoints) {
   @if $name == null {
     @return null;
   }
@@ -62,7 +62,7 @@
 //    ""  (Returns a blank string)
 //    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px))
 //    "-sm"
-@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
+@function breakpoint-infix($name, $breakpoints: $breakpoints) {
   @return if(sass(breakpoint-min($name, $breakpoints) == null): ""; else: "-#{$name}");
 }
 
@@ -71,7 +71,7 @@
 //    @include loop-breakpoints-up() using ($breakpoint, $infix) {
 //      // ...
 //    }
-@mixin loop-breakpoints-up($breakpoints: $grid-breakpoints) {
+@mixin loop-breakpoints-up($breakpoints: $breakpoints) {
   @each $breakpoint in map.keys($breakpoints) {
     $infix: breakpoint-infix($breakpoint, $breakpoints);
     @content($breakpoint, $infix);
@@ -83,7 +83,7 @@
 //    @include loop-breakpoints-down() using ($breakpoint, $next, $infix) {
 //      // ...
 //    }
-@mixin loop-breakpoints-down($breakpoints: $grid-breakpoints) {
+@mixin loop-breakpoints-down($breakpoints: $breakpoints) {
   @each $breakpoint in map.keys($breakpoints) {
     $next: breakpoint-next($breakpoint, $breakpoints);
     $infix: breakpoint-infix($next, $breakpoints);
@@ -92,7 +92,7 @@
 }
 
 // Backwards-compatible alias for next/down breakpoint loops.
-@mixin loop-breakpoints($breakpoints: $grid-breakpoints) {
+@mixin loop-breakpoints($breakpoints: $breakpoints) {
   @include loop-breakpoints-down($breakpoints) using ($breakpoint, $next, $infix) {
     @content($breakpoint, $next, $infix);
   }
@@ -100,7 +100,7 @@
 
 // Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
 // Makes the @content apply to the given breakpoint and wider.
-@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
+@mixin media-breakpoint-up($name, $breakpoints: $breakpoints) {
   $min: breakpoint-min($name, $breakpoints);
   @if $min {
     @media (width >= $min) {
@@ -113,7 +113,7 @@
 
 // Media of at most the maximum breakpoint width. No query for the largest breakpoint.
 // Makes the @content apply to the given breakpoint and narrower.
-@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
+@mixin media-breakpoint-down($name, $breakpoints: $breakpoints) {
   $max: breakpoint-max($name, $breakpoints);
   @if $max {
     @media (width < $max) {
@@ -126,7 +126,7 @@
 
 // Media that spans multiple breakpoint widths.
 // Makes the @content apply between the min and max breakpoints
-@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
+@mixin media-breakpoint-between($lower, $upper, $breakpoints: $breakpoints) {
   $min: breakpoint-min($lower, $breakpoints);
   $max: breakpoint-max($upper, $breakpoints);
 
@@ -148,7 +148,7 @@
 // Media between the breakpoint's minimum and maximum widths.
 // No minimum for the smallest breakpoint, and no maximum for the largest one.
 // Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
-@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
+@mixin media-breakpoint-only($name, $breakpoints: $breakpoints) {
   $min:  breakpoint-min($name, $breakpoints);
   $next: breakpoint-next($name, $breakpoints);
   $max:  breakpoint-max($next, $breakpoints);
@@ -196,7 +196,7 @@
 //    @include container-breakpoint-up(md) { ... }
 //    @include container-breakpoint-up(lg, sidebar) { ... }  // Query named container
 //
-@mixin container-breakpoint-up($name, $container-name: null, $breakpoints: $grid-breakpoints) {
+@mixin container-breakpoint-up($name, $container-name: null, $breakpoints: $breakpoints) {
   $min: breakpoint-min($name, $breakpoints);
   @if $min {
     @if $container-name {
@@ -219,7 +219,7 @@
 //    @include container-breakpoint-down(lg) { ... }
 //    @include container-breakpoint-down(lg, sidebar) { ... }  // Query named container
 //
-@mixin container-breakpoint-down($name, $container-name: null, $breakpoints: $grid-breakpoints) {
+@mixin container-breakpoint-down($name, $container-name: null, $breakpoints: $breakpoints) {
   $max: breakpoint-max($name, $breakpoints);
   @if $max {
     @if $container-name {
@@ -242,7 +242,7 @@
 //    @include container-breakpoint-between(md, xl) { ... }
 //    @include container-breakpoint-between(md, xl, sidebar) { ... }  // Query named container
 //
-@mixin container-breakpoint-between($lower, $upper, $container-name: null, $breakpoints: $grid-breakpoints) {
+@mixin container-breakpoint-between($lower, $upper, $container-name: null, $breakpoints: $breakpoints) {
   $min: breakpoint-min($lower, $breakpoints);
   $max: breakpoint-max($upper, $breakpoints);
 
@@ -274,7 +274,7 @@
 //    @include container-breakpoint-only(md) { ... }
 //    @include container-breakpoint-only(md, sidebar) { ... }  // Query named container
 //
-@mixin container-breakpoint-only($name, $container-name: null, $breakpoints: $grid-breakpoints) {
+@mixin container-breakpoint-only($name, $container-name: null, $breakpoints: $breakpoints) {
   $min:  breakpoint-min($name, $breakpoints);
   $next: breakpoint-next($name, $breakpoints);
   $max:  breakpoint-max($next, $breakpoints);
diff --git a/scss/layout/_containers.scss b/scss/layout/_containers.scss
index 465d5f5340..b82fd17d9d 100644
--- a/scss/layout/_containers.scss
+++ b/scss/layout/_containers.scss
@@ -29,7 +29,7 @@
         @extend .container-fluid;
       }
 
-      @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
+      @include media-breakpoint-up($breakpoint, $breakpoints) {
         // Extend each breakpoint which is smaller or equal to the current breakpoint
         $extend-breakpoint: true;
 
@@ -37,9 +37,9 @@
           max-width: $container-max-width;
         }
 
-        @each $name, $width in $grid-breakpoints {
+        @each $name, $width in $breakpoints {
           @if ($extend-breakpoint) {
-            .container#{breakpoint-infix($name, $grid-breakpoints)} {
+            .container#{breakpoint-infix($name, $breakpoints)} {
               @extend %responsive-container-#{$breakpoint};
             }
 
diff --git a/scss/layout/_grid.scss b/scss/layout/_grid.scss
index b2aadaf0bf..c15ba84e4d 100644
--- a/scss/layout/_grid.scss
+++ b/scss/layout/_grid.scss
@@ -4,12 +4,6 @@
 // mdo-do
 // - check gap utilities as replacement for gutter classes from v5
 
-:root {
-  @each $name, $value in $grid-breakpoints {
-    --breakpoint-#{$name}: #{$value};
-  }
-}
-
 @layer layout {
   @if $enable-grid-classes {
     .row {
diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index c17415b034..e6c5a82a4e 100644
--- a/scss/mixins/_grid.scss
+++ b/scss/mixins/_grid.scss
@@ -71,7 +71,7 @@
 // Used only by Bootstrap to generate the correct number of grid classes given
 // any value of `$grid-columns`.
 
-@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
+@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $breakpoints) {
   @each $breakpoint in map.keys($breakpoints) {
     $infix: breakpoint-infix($breakpoint, $breakpoints);
 
@@ -132,7 +132,7 @@
   }
 }
 
-@mixin make-cssgrid($columns: $grid-columns, $breakpoints: $grid-breakpoints) {
+@mixin make-cssgrid($columns: $grid-columns, $breakpoints: $breakpoints) {
   @each $breakpoint in map.keys($breakpoints) {
     $infix: breakpoint-infix($breakpoint, $breakpoints);
 
diff --git a/scss/tests/utilities/_api.test.scss b/scss/tests/utilities/_api.test.scss
index abd1c10d63..cf8a8a8dc4 100644
--- a/scss/tests/utilities/_api.test.scss
+++ b/scss/tests/utilities/_api.test.scss
@@ -28,7 +28,7 @@ $utilities: ();
       )
     ) !global;
 
-    $grid-breakpoints: (
+    $breakpoints: (
       xs: 0,
       sm: 333px,
       md: 666px
diff --git a/scss/utilities/_api.scss b/scss/utilities/_api.scss
index 9f12172a4e..0fe8ff71ec 100644
--- a/scss/utilities/_api.scss
+++ b/scss/utilities/_api.scss
@@ -7,11 +7,11 @@
 
 @layer utilities {
   // Loop over each breakpoint
-  @each $breakpoint in map.keys($grid-breakpoints) {
+  @each $breakpoint in map.keys($breakpoints) {
 
     // Generate media query if needed
     @include media-breakpoint-up($breakpoint) {
-      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+      $infix: breakpoint-infix($breakpoint, $breakpoints);
 
       // Loop over each utility property
       @each $key, $utility in $utilities {
diff --git a/site/src/content/docs/components/navbar.mdx b/site/src/content/docs/components/navbar.mdx
index 8769cf356c..32de4d340e 100644
--- a/site/src/content/docs/components/navbar.mdx
+++ b/site/src/content/docs/components/navbar.mdx
@@ -715,7 +715,7 @@ When you do this, we recommend including additional JavaScript to move the focus
 
 ### Sass map
 
-We reassign the global `$grid-breakpoints` map to `$navbar-breakpoints` in `scss/_navbar.scss` and use this for our loop to generate the responsive navbar expand/collapse classes. This allows you to customize the breakpoints for navbars independently of the global breakpoints.
+We reassign the global `$breakpoints` map to `$navbar-breakpoints` in `scss/_navbar.scss` and use this for our loop to generate the responsive navbar expand/collapse classes. This allows you to customize the breakpoints for navbars independently of the global breakpoints.
 
 <ScssDocs name="navbar-breakpoints" file="scss/_navbar.scss" />
 
diff --git a/site/src/content/docs/customize/components.mdx b/site/src/content/docs/customize/components.mdx
index c9c798b8c5..c2833e36d8 100644
--- a/site/src/content/docs/customize/components.mdx
+++ b/site/src/content/docs/customize/components.mdx
@@ -20,13 +20,13 @@ Check out [our Sass maps and loops docs]([[docsref:/customize/sass#maps-and-loop
 
 ## Responsive
 
-These Sass loops aren't limited to color maps, either. You can also generate responsive variations of your components. Take for example our responsive navbar expand classes where we mix an `@each` loop for the `$grid-breakpoints` Sass map with a media query include.
+These Sass loops aren't limited to color maps, either. You can also generate responsive variations of your components. Take for example our responsive navbar expand classes where we mix an `@each` loop for the `$breakpoints` Sass map with a media query include.
 
 <ScssDocs name="navbar-expand-loop" file="scss/_navbar.scss" />
 
-Should you modify your `$grid-breakpoints`, your changes will apply to all the loops iterating over that map.
+Should you modify your `$breakpoints`, your changes will apply to all the loops iterating over that map.
 
-<ScssDocs name="grid-breakpoints" file="scss/_config.scss" />
+<ScssDocs name="breakpoints" file="scss/_config.scss" />
 
 For more information and examples on how to modify our Sass maps and variables, please refer to [the CSS section of the Grid documentation]([[docsref:/layout/grid#css]]).
 
diff --git a/site/src/content/docs/layout/breakpoints.mdx b/site/src/content/docs/layout/breakpoints.mdx
index 79bc2b1e0c..99b42714cb 100644
--- a/site/src/content/docs/layout/breakpoints.mdx
+++ b/site/src/content/docs/layout/breakpoints.mdx
@@ -32,7 +32,7 @@ Each breakpoint was chosen to comfortably hold containers whose widths are multi
 
 These breakpoints are customizable via Sass—you’ll find them in a Sass map in our `_variables.scss` stylesheet.
 
-<ScssDocs name="grid-breakpoints" file="scss/_config.scss" />
+<ScssDocs name="breakpoints" file="scss/_config.scss" />
 
 For more information and examples on how to modify our Sass maps and variables, please refer to [the CSS section of the Grid documentation]([[docsref:/layout/grid#css]]).
 
diff --git a/site/src/content/docs/layout/grid.mdx b/site/src/content/docs/layout/grid.mdx
index 0ea0d04034..99fb2ee11f 100644
--- a/site/src/content/docs/layout/grid.mdx
+++ b/site/src/content/docs/layout/grid.mdx
@@ -378,7 +378,7 @@ $grid-gutter-width: 1.5rem;
 $grid-row-columns:  6;
 ```
 
-<ScssDocs name="grid-breakpoints" file="scss/_config.scss" />
+<ScssDocs name="breakpoints" file="scss/_config.scss" />
 
 <ScssDocs name="container-max-widths" file="scss/_config.scss" />
 
@@ -463,10 +463,10 @@ $grid-row-columns: 6 !default;
 
 ### Grid tiers
 
-Moving beyond the columns themselves, you may also customize the number of grid tiers. If you wanted just four grid tiers, you’d update the `$grid-breakpoints` and `$container-max-widths` to something like this:
+Moving beyond the columns themselves, you may also customize the number of grid tiers. If you wanted just four grid tiers, you’d update the `$breakpoints` and `$container-max-widths` to something like this:
 
 ```scss
-$grid-breakpoints: (
+$breakpoints: (
   xs: 0,
   sm: 480px,
   md: 768px,