Fix instances of 2xl, fix utilities generation (#41774)

diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 4fc098482a53ba1dd610152ebedb162230d9096b..1880b9cbdb454c1a0883a784e493de110e39d0f2 100644 (file)
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -280,7 +280,7 @@ $navbar-dark-brand-hover-color:     $navbar-dark-active-color !default;
           }
 
           .navbar-toggler {
-            display: none;
+            display: none !important; // stylelint-disable-line declaration-no-important
           }
 
           .offcanvas {

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index 890bff981304727cef742f2deafcb9a44c181c5a..63c818b328084157e67492c871645232af549072 100644 (file)
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -95,7 +95,6 @@ $utilities: map.merge(
       print: true,
       property: display,
       class: d,
-      important: true,
       values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex flow-root none
     ),
     // scss-docs-end utils-display

diff --git a/scss/mixins/_utilities.scss b/scss/mixins/_utilities.scss
index 63ac616dc89981cd34e3f7348516ec9454f56d36..d7dc3a6af134221ef209ad1e5f4fc408562d81e6 100644 (file)
--- a/scss/mixins/_utilities.scss
+++ b/scss/mixins/_utilities.scss
@@ -38,7 +38,8 @@
   }
 
   // Calculate infix once, before the loop
-  $infix: if($infix == "", "", "-" + $infix);
+  // Note: $infix already includes the leading dash from breakpoint-infix()
+  // $infix: if($infix == "", "", "-" + $infix);
 
   @each $key, $value in $values {
     $properties: map.get($utility, property);

diff --git a/site/src/assets/examples/buttons/index.astro b/site/src/assets/examples/buttons/index.astro
index 7990e7845a3121d7e911dcb0ac2b26ab29a41fdb..f99b7b53bd1eadf3634e0e9d0f7c7db16ffeff59 100644 (file)
--- a/site/src/assets/examples/buttons/index.astro
+++ b/site/src/assets/examples/buttons/index.astro
@@ -26,7 +26,7 @@ export const title = 'Buttons'
 
 <div class="b-example-divider"></div>
 
-<div class="col-lg-6 col-xxl-4 my-5 mx-auto">
+<div class="col-lg-6 col-2xl-4 my-5 mx-auto">
   <div class="d-grid gap-2">
     <button class="btn btn-outline-secondary" type="button">Secondary action</button>
     <button class="btn btn-primary" type="button">Primary action</button>

diff --git a/site/src/assets/examples/grid/index.astro b/site/src/assets/examples/grid/index.astro
index 2c01d8de9dbf7d83fb5beb36fcc8b80ff270e83a..499e887fe2065a3f3790309635799af21101831d 100644 (file)
--- a/site/src/assets/examples/grid/index.astro
+++ b/site/src/assets/examples/grid/index.astro
@@ -45,9 +45,9 @@ export const body_class = 'py-4'
     </div>
 
     <div class="row mb-3 text-center">
-      <div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
-      <div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
-      <div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
+      <div class="col-2xl-4 themed-grid-col">.col-2xl-4</div>
+      <div class="col-2xl-4 themed-grid-col">.col-2xl-4</div>
+      <div class="col-2xl-4 themed-grid-col">.col-2xl-4</div>
     </div>
 
     <h2 class="mt-4">Three equal columns</h2>
@@ -107,8 +107,8 @@ export const body_class = 'py-4'
     <hr class="my-4">
 
     <h2 class="mt-4">Mixed: mobile and desktop</h2>
-    <p>The Bootstrap v5 grid system has six tiers of classes: xs (extra small, this class infix is not used), sm (small), md (medium), lg (large), xl (x-large), and xxl (xx-large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.</p>
-    <p>Each tier of classes scales up, meaning if you plan on setting the same widths for md, lg, xl and xxl, you only need to specify md.</p>
+    <p>The Bootstrap v5 grid system has six tiers of classes: xs (extra small, this class infix is not used), sm (small), md (medium), lg (large), xl (x-large), and 2xl (xx-large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.</p>
+    <p>Each tier of classes scales up, meaning if you plan on setting the same widths for md, lg, xl and 2xl, you only need to specify md.</p>
     <div class="row mb-3 text-center">
       <div class="col-md-8 themed-grid-col">.col-md-8</div>
       <div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
@@ -172,7 +172,7 @@ export const body_class = 'py-4'
     <hr class="my-4">
 
     <h2 class="mt-4">Containers</h2>
-    <p>Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint. v5 adds a new <code>xxl</code> breakpoint.</p>
+    <p>Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint. v5 adds a new <code>2xl</code> breakpoint.</p>
   </div>
 
   <div class="container themed-container text-center">.container</div>
@@ -180,6 +180,6 @@ export const body_class = 'py-4'
   <div class="container-md themed-container text-center">.container-md</div>
   <div class="container-lg themed-container text-center">.container-lg</div>
   <div class="container-xl themed-container text-center">.container-xl</div>
-  <div class="container-xxl themed-container text-center">.container-xxl</div>
+  <div class="container-2xl themed-container text-center">.container-2xl</div>
   <div class="container-fluid themed-container text-center">.container-fluid</div>
 </main>

diff --git a/site/src/assets/examples/heroes/index.astro b/site/src/assets/examples/heroes/index.astro
index 853776e7bc9004950d80e737a91898d447dff999..8ac2a70ac38d9a7d8e1b6a686804fcbffebfce66 100644 (file)
--- a/site/src/assets/examples/heroes/index.astro
+++ b/site/src/assets/examples/heroes/index.astro
@@ -40,7 +40,7 @@ export const extra_css = ['heroes.css']
 
   <div class="b-example-divider"></div>
 
-  <div class="container col-xxl-8 px-4 py-5">
+  <div class="container col-2xl-8 px-4 py-5">
     <div class="row flex-lg-row-reverse align-items-center g-5 py-5">
       <div class="col-10 col-sm-8 col-lg-6">
         <img src="bootstrap-themes.png" class="d-block mx-lg-auto img-fluid" alt="Bootstrap Themes" width="700" height="500" loading="lazy">
@@ -58,7 +58,7 @@ export const extra_css = ['heroes.css']
 
   <div class="b-example-divider"></div>
 
-  <div class="container col-xl-10 col-xxl-8 px-4 py-5">
+  <div class="container col-xl-10 col-2xl-8 px-4 py-5">
     <div class="row align-items-center g-lg-5 py-5">
       <div class="col-lg-7 text-center text-lg-start">
         <h1 class="display-4 fw-bold lh-1 text-body-emphasis mb-3">Vertically centered hero sign-up form</h1>

diff --git a/site/src/assets/examples/navbars/index.astro b/site/src/assets/examples/navbars/index.astro
index 63d65ffb4c50b234ba39571b8b34ee0ec7d73cd9..43c73f87ca3f40f7c42602fbb12fead5983cf355 100644 (file)
--- a/site/src/assets/examples/navbars/index.astro
+++ b/site/src/assets/examples/navbars/index.astro
@@ -199,14 +199,14 @@ export const extra_css = ['navbars.css']
     </div>
   </nav>
 
-  <nav class="navbar navbar-expand-xxl navbar-dark bg-dark" aria-label="Seventh navbar example">
+  <nav class="navbar navbar-expand-2xl navbar-dark bg-dark" aria-label="Seventh navbar example">
     <div class="container-fluid">
-      <a class="navbar-brand" href="#">Expand at xxl</a>
-      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExampleXxl" aria-controls="navbarsExampleXxl" aria-expanded="false" aria-label="Toggle navigation">
+      <a class="navbar-brand" href="#">Expand at 2xl</a>
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample2xl" aria-controls="navbarsExample2xl" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>
 
-      <div class="collapse navbar-collapse" id="navbarsExampleXxl">
+      <div class="collapse navbar-collapse" id="navbarsExample2xl">
         <ul class="navbar-nav me-auto mb-2 mb-xl-0">
           <li class="nav-item">
             <a class="nav-link active" aria-current="page" href="#">Home</a>

diff --git a/site/src/components/header/Navigation.astro b/site/src/components/header/Navigation.astro
index b1ebe458b21cc4179b5ce78c8f5c361e8c7ca268..43d8fb7521bd71eb695fdafe2b9bb03814cb97a3 100644 (file)
--- a/site/src/components/header/Navigation.astro
+++ b/site/src/components/header/Navigation.astro
@@ -22,7 +22,7 @@ const { addedIn, layout, title } = Astro.props
 ---
 
 <header class="navbar navbar-expand-lg bd-navbar sticky-top">
-  <nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
+  <nav class="container-2xl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
     {
       layout === 'docs' && (
         <div class="bd-navbar-toggle">

diff --git a/site/src/components/home/MastHead.astro b/site/src/components/home/MastHead.astro
index f9054bac34fe1fcbfadc216bd44703c88eb551d2..dedc2f630d91b569a891eaa01a7a40d7a4457eac 100644 (file)
--- a/site/src/components/home/MastHead.astro
+++ b/site/src/components/home/MastHead.astro
@@ -7,7 +7,7 @@ import ResponsiveImage from '@layouts/partials/ResponsiveImage.astro'
 ---
 
 <div class="bd-masthead mb-3" id="content">
-  <div class="container-xxl bd-gutter">
+  <div class="container-2xl bd-gutter">
     <div class="col-md-8 mx-auto text-center">
       <a
         class="d-flex flex-column flex-lg-row justify-content-center align-items-center mb-4 text-dark lh-sm text-decoration-none"

diff --git a/site/src/content/docs/migration.mdx b/site/src/content/docs/migration.mdx
index 2f9edd328533efccfcd0a0795865e4fd4f7271ec..ae06aa7819c8fe1e9ebfebf151790ff61b2617fe 100644 (file)
--- a/site/src/content/docs/migration.mdx
+++ b/site/src/content/docs/migration.mdx
@@ -60,7 +60,7 @@ Bootstrap 6 is a major release with many breaking changes to modernize our codeb
 - **Updated lg, xl, and 2xl breakpoints and containers.**
   - Increased the `lg` breakpoint from 992px to 1024px; it's container remains the same at 960px.
   - Increased the `xl` breakpoint from 1200px to 1280px, and it's container from 1140px to 1200px.
-  - Renamed `xxl` to `2xl` for better scaling with additional custom breakpoints
+  - Renamed `2xl` to `2xl` for better scaling with additional custom breakpoints
   - Increased the `2xl` breakpoint from 1400px to 1536px, and it's container from 1320px to 1440px.
 
 ### Sass
@@ -74,7 +74,7 @@ Bootstrap 6 is a major release with many breaking changes to modernize our codeb
   - Removed `muted`, `black-50`, and `white-50` from text colors utilities map
   - Consolidated carousel dark variables, removing `$carousel-dark-indicator-active-bg`, `$carousel-dark-caption-color`, and `$carousel-dark-control-icon-filter` for their reassigned counterparts.
   - Removed `$btn-close-white-filter` for `$btn-close-filter-dark`.
-  - Removed `$border-radius-2xl`, use `$border-radius-xxl`.
+  - Removed `$border-radius-2xl`, use `$border-radius-2xl`.
   - Removed `$text-muted` for secondary color.
   - Removed `$hr-bg-color` for `$hr-border-color` and `$hr-height` for `$hr-border-width`.
   - Removed unused `$dropdown-header-padding` for the `-x`/`-y` split variables.

diff --git a/site/src/content/docs/utilities/margin.mdx b/site/src/content/docs/utilities/margin.mdx
index 43d9c19cc4b435b137a729ebc2e38b7cf752d003..35017df128c849deb2d9ca22cc6ec6e78cfb274a 100644 (file)
--- a/site/src/content/docs/utilities/margin.mdx
+++ b/site/src/content/docs/utilities/margin.mdx
@@ -59,9 +59,9 @@ Use margin utilities to control the outer space around elements. Margin utilitie
 
 ## Notation
 
-Margin utilities that apply to all breakpoints, from `xs` to `xxl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
+Margin utilities that apply to all breakpoints, from `xs` to `2xl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
 
-The classes are named using the format `{property}{sides}-{size}` for `xs` and `{property}{sides}-{breakpoint}-{size}` for `sm`, `md`, `lg`, `xl`, and `xxl`.
+The classes are named using the format `{property}{sides}-{size}` for `xs` and `{property}{sides}-{breakpoint}-{size}` for `sm`, `md`, `lg`, `xl`, and `2xl`.
 
 Where *property* is:
 

diff --git a/site/src/content/docs/utilities/padding.mdx b/site/src/content/docs/utilities/padding.mdx
index bb812459a31a85362a86a11a88bd9aaaaa6e0c8f..c80901cce36ed3e83283ddb39e8145fbded00577 100644 (file)
--- a/site/src/content/docs/utilities/padding.mdx
+++ b/site/src/content/docs/utilities/padding.mdx
@@ -52,9 +52,9 @@ Use padding utilities to control the inner space within elements. Padding utilit
 
 ## Notation
 
-Padding utilities that apply to all breakpoints, from `xs` to `xxl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
+Padding utilities that apply to all breakpoints, from `xs` to `2xl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
 
-The classes are named using the format `{property}{sides}-{size}` for `xs` and `{property}{sides}-{breakpoint}-{size}` for `sm`, `md`, `lg`, `xl`, and `xxl`.
+The classes are named using the format `{property}{sides}-{size}` for `xs` and `{property}{sides}-{breakpoint}-{size}` for `sm`, `md`, `lg`, `xl`, and `2xl`.
 
 Where *property* is:
 

diff --git a/site/src/content/docs/utilities/text-alignment.mdx b/site/src/content/docs/utilities/text-alignment.mdx
index fd28a9bfbdaee87c0225011df92b83b4e563d066..12623dcb7c0f6ac15a42d43a5dc5a86a22c9f607 100644 (file)
--- a/site/src/content/docs/utilities/text-alignment.mdx
+++ b/site/src/content/docs/utilities/text-alignment.mdx
@@ -31,7 +31,7 @@ Easily realign text to components with text alignment classes. For start, end, a
 <p class="text-md-end">End aligned text on viewports sized MD (medium) or wider.</p>
 <p class="text-lg-end">End aligned text on viewports sized LG (large) or wider.</p>
 <p class="text-xl-end">End aligned text on viewports sized XL (extra large) or wider.</p>
-<p class="text-xxl-end">End aligned text on viewports sized XXL (extra extra large) or wider.</p>`} />
+<p class="text-2xl-end">End aligned text on viewports sized 2xl (extra extra large) or wider.</p>`} />
 
 <Callout>
 Note that we don't provide utility classes for justified text. While, aesthetically, justified text might look more appealing, it does make word-spacing more random and therefore harder to read.

diff --git a/site/src/layouts/DocsLayout.astro b/site/src/layouts/DocsLayout.astro
index 4d7ba422e381454fa09973f65288c4541883a45e..67b4dfbe3a9cb348f32d1f5c9cb5df283c4df73b 100644 (file)
--- a/site/src/layouts/DocsLayout.astro
+++ b/site/src/layouts/DocsLayout.astro
@@ -72,7 +72,7 @@ if (currentPageIndex < allPages.length - 1) {
 ---
 
 <BaseLayout {...Astro.props} layout="docs" overrides={{ body: bodyProps }}>
-  <div slot="main" class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
+  <div slot="main" class="container-2xl bd-gutter mt-3 my-md-4 bd-layout">
     <aside class="bd-sidebar">
       <div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
         <div class="offcanvas-header border-bottom">

diff --git a/site/src/layouts/SingleLayout.astro b/site/src/layouts/SingleLayout.astro
index 7103aa4a2d49325ed14dc736861700a2d9baa5db..2a9cfaca7a9f26a8a4598c13c32466bcbe347b69 100644 (file)
--- a/site/src/layouts/SingleLayout.astro
+++ b/site/src/layouts/SingleLayout.astro
@@ -13,7 +13,7 @@ const { description, title } = Astro.props
 <BaseLayout {...Astro.props} layout="single">
   <Fragment slot="main">
     <header class="py-5 border-bottom">
-      <div class="container-xxl bd-gutter pt-md-1 pb-md-4">
+      <div class="container-2xl bd-gutter pt-md-1 pb-md-4">
         <div class="row">
           <div class="col-xl-8">
             <h1 class="bd-title mt-0">{title}</h1>
@@ -28,7 +28,7 @@ const { description, title } = Astro.props
     </header>
 
     <main class="bd-content order-1 py-5" id="content">
-      <div class="container-xxl bd-gutter">
+      <div class="container-2xl bd-gutter">
         <slot />
         <slot name="main-content" />
       </div>

diff --git a/site/src/pages/index.astro b/site/src/pages/index.astro
index f5a1fb0024aa8147e5a232e1f4c5601d45e6e4bd..2dc27c57ec0444353fbc5f232cb738f29ddf9dc7 100644 (file)
--- a/site/src/pages/index.astro
+++ b/site/src/pages/index.astro
@@ -11,7 +11,7 @@ import Icons from '@components/home/Icons.astro'
 
 <BaseLayout>
   <MastHead />
-  <div class="container-xxl bd-gutter masthead-followup">
+  <div class="container-2xl bd-gutter masthead-followup">
     <GetStarted />
     <Customize />
     <CSSVariables />