feat(lib): add 3xl max width and use rem

scss/_containers.scss

@@ -56,17 +56,30 @@
   }
 
   // OUDS mod
-  // scss-docs-start containers-max
+  // scss-docs-start containers-max-default
   .container-max-width {
     @include media-breakpoint-up(get-breakpoint-from-width()) {
       --#{$prefix}container-margin-x: #{map-get($container-fluid-margin, get-breakpoint-from-width())};
-      max-width: $ouds-grid-2xl-max-width-alt;
+      max-width: max(px-to-rem($ouds-grid-2xl-max-width-alt), $ouds-grid-2xl-max-width-alt); // make sure the max-width does not shrink if the font size is reduced
 
       .row {
         --#{$prefix}gutter-x: #{map-get($grid-gutter-widths, get-breakpoint-from-width())};
       }
     }
   }
-  // scss-docs-end containers-max
+  // scss-docs-end containers-max-default
+
+  // scss-docs-start containers-max-alt
+  .container-max-width-alt {
+    @include media-breakpoint-up(get-breakpoint-from-width($ouds-grid-3xl-max-width)) {
+      --#{$prefix}container-margin-x: #{map-get($container-fluid-margin, get-breakpoint-from-width($ouds-grid-3xl-max-width))};
+      max-width: max(px-to-rem($ouds-grid-3xl-max-width), $ouds-grid-3xl-max-width); // make sure the max-width does not shrink if the font size is reduced
+
+      .row {
+        --#{$prefix}gutter-x: #{map-get($grid-gutter-widths, get-breakpoint-from-width($ouds-grid-3xl-max-width))};
+      }
+    }
+  }
+  // scss-docs-end containers-max-alt
   // End mod
 }

scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css

@@ -1822,13 +1822,23 @@ dialog,
 @media (min-width: 1640px) {
   .container-max-width {
     --bs-container-margin-x: 80px;
-    max-width: 1680px;
+    max-width: max(105rem, 1680px);
   }
   .container-max-width .row {
     --bs-gutter-x: 32px;
   }
 }
 
+@media (min-width: 1880px) {
+  .container-max-width-alt {
+    --bs-container-margin-x: 112px;
+    max-width: max(120rem, 1920px);
+  }
+  .container-max-width-alt .row {
+    --bs-gutter-x: 40px;
+  }
+}
+
 :root {
   --bs-breakpoint-2xs: 0;
   --bs-breakpoint-xs: 390px;

scss/tests/snapshot-tests/__snapshots__/ouds-web.css

@@ -1559,13 +1559,23 @@ dialog,
 @media (min-width: 1640px) {
   .container-max-width {
     --bs-container-margin-x: 80px;
-    max-width: 1680px;
+    max-width: max(105rem, 1680px);
   }
   .container-max-width .row {
     --bs-gutter-x: 32px;
   }
 }
 
+@media (min-width: 1880px) {
+  .container-max-width-alt {
+    --bs-container-margin-x: 112px;
+    max-width: max(120rem, 1920px);
+  }
+  .container-max-width-alt .row {
+    --bs-gutter-x: 40px;
+  }
+}
+
 :root {
   --bs-breakpoint-2xs: 0;
   --bs-breakpoint-xs: 390px;

site/src/assets/examples/grid-system/index.astro

@@ -47,6 +47,31 @@ export const aliases = [
     </div>
   </div>
 
+  <div class="container-fluid container-max-width mb-large pt-large">
+    <h2>Need a little more space?</h2>
+    <p>
+      If more space is needed, use only the <code>.container-fluid.container-max-width-alt</code> class.
+    </p>
+  </div>
+  <div class="bg-example py-large">
+    <div class="container-fluid container-max-width-alt bg-container">
+      <div class="row">
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col"></div>
+      </div>
+    </div>
+  </div>
+
   <div class="container-fluid container-max-width mb-large pt-large">
     <h2>Need more space?</h2>
     <p>

site/src/assets/examples/grid/index.astro

@@ -198,4 +198,5 @@ export const aliases = [
   <!-- OUDS mod: drop unused Bootstrap container classes -->
   <div class="container-fluid themed-container text-center"><code>.container-fluid</code></div>
   <div class="container-fluid container-max-width themed-container text-center"><code>.container-fluid.container-max-width</code></div>
+  <div class="container-fluid container-max-width-alt themed-container text-center"><code>.container-fluid.container-max-width-alt</code></div>
 </main>

site/src/content/docs/getting-started/update-guide.mdx

@@ -63,6 +63,12 @@ toc: true
 
 - <span class="tag tag-small tag-positive"><span class="tag-status-icon"></span>New</span> Categorical tag has been implemented. Read more in our [tags page]([[docsref:/components/tags#categorical-tag]]).
 
+### Layout
+
+- <span class="tag tag-small tag-positive"><span class="tag-status-icon"></span>New</span> A new `.container-max-width-alt` class has been added for project that need a larger maximum container width. Read more in our [layout page]([[docsref:/layout/containers#alternative-max-width]]).
+
+- <span class="tag tag-small tag-positive"><span class="tag-status-icon"></span>New</span> The `max-width` enforced by `.container-max-width-alt` and `.container-max-width` classes are now expressed in `rem` so they will scale appropriately with the font size.
+
 ### Tools
 
 - <span class="tag tag-small tag-info"><span class="tag-status-icon"></span>Info</span> OUDS Web's AI agent skills now have a [dedicated repository](https://github.com/Orange-OpenSource/ouds-web-skills). To install or update them, run `npx skills add Orange-OpenSource/ouds-web-skills`.

site/src/content/docs/layout/containers.mdx

@@ -13,9 +13,9 @@ import { getTokenValue } from '@libs/sass-variables'
 
 Containers are the most basic layout element in OUDS Web and are **required when using our default grid system**. Containers are used to contain, pad, and (sometimes) center the content within them. While containers *can* be nested, most layouts do not require a nested container.
 
-OUDS Web provides a single responsive container, `.container-fluid`, which ensures a `width: 100%` at all breakpoints. To optimize its use, pair it with the `.container-max-width` class. For further details, refer to the [Fluid containers](#fluid-containers) section.
+OUDS Web provides a single responsive container, `.container-fluid`, which ensures a `width: 100%` at all breakpoints. To optimize its use, pair it with the `.container-max-width` or `.container-max-width-alt` classes. For further details, refer to the [Fluid containers](#fluid-containers) section.
 
-The table below compares `.container-fluid` `max-width` with and without `.container-max-width` across each breakpoint.
+The table below compares `.container-fluid` `max-width` with `.container-max-width` or `.container-max-width-alt` across each breakpoint.
 
 See them in action and compare them in our [Grid example]([[docsref:/examples/grid/#containers]]) and [Grid system example]([[docsref:/examples/grid-system/]]).
 
@@ -25,6 +25,7 @@ Please note that we apply an extra-padding on our containers (see [our mixin](#s
 |  | 2x-small<div class="fw-normal">&lt;{getTokenValue('$ouds-grid-xs-min-width')}</div> | X-small<div class="fw-normal">&ge;{getTokenValue('$ouds-grid-xs-min-width')}</div> | Small<div class="fw-normal">&ge;{getTokenValue('$ouds-grid-sm-min-width')}</div> | Medium<div class="fw-normal">&ge;{getTokenValue('$ouds-grid-md-min-width')}</div> | Large<div class="fw-normal">&ge;{getTokenValue('$ouds-grid-lg-min-width')}</div> | X-large<div class="fw-normal">&ge;{getTokenValue('$ouds-grid-xl-min-width')}</div> | 2x-large<div class="fw-normal">&ge;{getTokenValue('$ouds-grid-2xl-min-width')}</div> | 3x-large<div class="fw-normal">&ge;{getTokenValue('$ouds-grid-3xl-min-width')}</div> |
 | --- | --- | --- | --- | --- | --- | --- | --- | --- |
 | `.container-fluid` with `.container-max-width`  | <span class="text-muted">100% -<br />(2 * {getTokenValue('$ouds-grid-2xs-margin')})</span> | <span class="text-muted">100% -<br />(2 * {getTokenValue('$ouds-grid-xs-margin')})</span> | <span class="text-muted">100% -<br />(2 * {getTokenValue('$ouds-grid-sm-margin')})</span> | <span class="text-muted">100% -<br />(2 * {getTokenValue('$ouds-grid-md-margin')})</span> | <span class="text-muted">100% -<br />(2 * {getTokenValue('$ouds-grid-lg-margin')})</span> | <span class="text-muted">100% -<br />(2 * {getTokenValue('$ouds-grid-xl-margin')})</span> | {getTokenValue('$ouds-grid-2xl-max-width-alt').slice(0, -2) - 2 * getTokenValue('$ouds-grid-2xl-margin').slice(0, -2)}px | {getTokenValue('$ouds-grid-2xl-max-width-alt').slice(0, -2) - 2 * getTokenValue('$ouds-grid-2xl-margin').slice(0, -2)}px |
+| `.container-fluid` with `.container-max-width-alt`  | <span class="text-muted">100% -<br />(2 * {getTokenValue('$ouds-grid-2xs-margin')})</span> | <span class="text-muted">100% -<br />(2 * {getTokenValue('$ouds-grid-xs-margin')})</span> | <span class="text-muted">100% -<br />(2 * {getTokenValue('$ouds-grid-sm-margin')})</span> | <span class="text-muted">100% -<br />(2 * {getTokenValue('$ouds-grid-md-margin')})</span> | <span class="text-muted">100% -<br />(2 * {getTokenValue('$ouds-grid-lg-margin')})</span> | <span class="text-muted">100% -<br />(2 * {getTokenValue('$ouds-grid-xl-margin')})</span> | <span class="text-muted">100% -<br />(2 * {getTokenValue('$ouds-grid-2xl-margin')})</span> | {getTokenValue('$ouds-grid-3xl-max-width').slice(0, -2) - 2 * getTokenValue('$ouds-grid-3xl-margin').slice(0, -2)}px |
 | `.container-fluid` | <span class="text-muted">100% -<br />(2 * {getTokenValue('$ouds-grid-2xs-margin')})</span> | <span class="text-muted">100% -<br />(2 * {getTokenValue('$ouds-grid-xs-margin')})</span> | <span class="text-muted">100% -<br />(2 * {getTokenValue('$ouds-grid-sm-margin')})</span> | <span class="text-muted">100% -<br />(2 * {getTokenValue('$ouds-grid-md-margin')})</span> | <span class="text-muted">100% -<br />(2 * {getTokenValue('$ouds-grid-lg-margin')})</span> | <span class="text-muted">100% -<br />(2 * {getTokenValue('$ouds-grid-xl-margin')})</span> | <span class="text-muted">100% -<br />(2 * {getTokenValue('$ouds-grid-2xl-margin')})</span> | <span class="text-muted">100% -<br />(2 * {getTokenValue('$ouds-grid-3xl-margin')})</span> |
 </BsTable>
 
@@ -97,20 +98,32 @@ Use `.container-fluid` for a full width container with minimum margins, spanning
 
 ### Default max width
 
-This container should be associated by default with the class `.container-max-width`. After breakpoint `2xl`, this class:
-- limits the container width to 1680px (including margins),
-- limits container margin to 80px each side,
-- limits gutters width to 32px.
+Most of the time, this container should be associated by default with the class `.container-max-width`. After breakpoint `2xl`, this class:
+- limits the container width to {getTokenValue('$ouds-grid-2xl-max-width-alt')} (including margins),
+- limits container margin to {getTokenValue('$ouds-grid-2xl-margin')} each side,
+- limits gutters width to {getTokenValue('$ouds-grid-2xl-column-gap')}.
 
 It is defined as follows:
 
-<ScssDocs name="containers-max" file="scss/_containers.scss" buttonLabel="container max width"/>
+<ScssDocs name="containers-max-default" file="scss/_containers.scss" buttonLabel="container max width"/>
 
-Comparison between `.container-fluid` with `.container-max-width` and `.container-fluid` alone can be seen in the following table:
+### Alternative max width
+
+If you need even more space, consider using the `.container-max-width-alt` class instead. After breakpoint `3xl`, this class:
+- limits the container width to {getTokenValue('$ouds-grid-3xl-max-width')} (including margins),
+- limits container margin to {getTokenValue('$ouds-grid-3xl-margin')} each side,
+- limits gutters width to {getTokenValue('$ouds-grid-3xl-column-gap')}.
+
+<ScssDocs name="containers-max-alt" file="scss/_containers.scss" buttonLabel="container max width"/>
+
+### Comparison of fluid and max-width containers
+
+Comparison between `.container-fluid` with `.container-max-width` or `.container-max-width-alt` and `.container-fluid` alone can be seen in the following table:
 
 <BsTable class="table">
 |  | X-large<div class="fw-normal">&ge;{getTokenValue('$ouds-grid-xl-min-width')}</div> | 2x-large<div class="fw-normal">&ge;{getTokenValue('$ouds-grid-2xl-min-width')}</div> | 3x-large<div class="fw-normal">&ge;{getTokenValue('$ouds-grid-3xl-min-width')}</div> |
 | --- | --- | --- | --- |
 | `.container-fluid` with <br />`.container-max-width` | <ul class="mb-none"><li>Width <code>100% - (2 * {getTokenValue('$ouds-grid-xl-margin')})</code></li><li>Margin <code>2 * {getTokenValue('$ouds-grid-xl-margin')}</code></li><li>Gutter <code>{getTokenValue('$ouds-grid-xl-column-gap')}</code></li></ul> | <ul class="mb-none"><li>Width <code>100% - (2 * {getTokenValue('$ouds-grid-2xl-margin')})</code></li><li><b>Max-width <code>{getTokenValue('$ouds-grid-2xl-max-width-alt').slice(0, -2) - 2 * getTokenValue('$ouds-grid-2xl-margin').slice(0, -2)}px</code></b></li><li>Margin <code>2 * {getTokenValue('$ouds-grid-2xl-margin')}</code></li><li>Gutter <code>{getTokenValue('$ouds-grid-2xl-column-gap')}</code></li></ul> | <ul class="mb-none"><li><b>Width <code>{getTokenValue('$ouds-grid-2xl-max-width-alt').slice(0, -2) - 2 * getTokenValue('$ouds-grid-2xl-margin').slice(0, -2)}px</code></b></li><li><b>Margin <code>2 * {getTokenValue('$ouds-grid-2xl-margin')}</code></b></li><li><b>Gutter <code>{getTokenValue('$ouds-grid-2xl-column-gap')}</code></b></li></ul> |
+| `.container-fluid` | <ul class="mb-none"><li>Width <code>100% - (2 * {getTokenValue('$ouds-grid-xl-margin')})</code></li><li>Margin <code>2 * {getTokenValue('$ouds-grid-xl-margin')}</code></li><li>Gutter <code>{getTokenValue('$ouds-grid-xl-column-gap')}</code></li></ul> | <ul class="mb-none"><li>Width <code>100% - (2 * {getTokenValue('$ouds-grid-2xl-margin')})</code></li><li>Margin <code>2 * {getTokenValue('$ouds-grid-2xl-margin')}</code></li><li>Gutter <code>{getTokenValue('$ouds-grid-2xl-column-gap')}</code></li></ul> | <ul class="mb-none"><li>Width <code>100% - (2 * {getTokenValue('$ouds-grid-3xl-margin')})</code></li><li><b>Max-width <code>{getTokenValue('$ouds-grid-3xl-max-width').slice(0, -2) - 2 * getTokenValue('$ouds-grid-3xl-margin').slice(0, -2)}px</code></b></li><li>Margin <code>2 * {getTokenValue('$ouds-grid-3xl-margin')}</code></li><li>Gutter <code>{getTokenValue('$ouds-grid-3xl-column-gap')}</code></li></ul> |
 | `.container-fluid` | <ul class="mb-none"><li>Width <code>100% - (2 * {getTokenValue('$ouds-grid-xl-margin')})</code></li><li>Margin <code>2 * {getTokenValue('$ouds-grid-xl-margin')}</code></li><li>Gutter <code>{getTokenValue('$ouds-grid-xl-column-gap')}</code></li></ul> | <ul class="mb-none"><li>Width <code>100% - (2 * {getTokenValue('$ouds-grid-2xl-margin')})</code></li><li>Margin <code>2 * {getTokenValue('$ouds-grid-2xl-margin')}</code></li><li>Gutter <code>{getTokenValue('$ouds-grid-2xl-column-gap')}</code></li></ul> | <ul class="mb-none"><li>Width <code>100% - (2 * {getTokenValue('$ouds-grid-3xl-margin')})</code></li><li>Margin <code>2 * {getTokenValue('$ouds-grid-3xl-margin')}</code></li><li>Gutter <code>{getTokenValue('$ouds-grid-3xl-column-gap')}</code></li></ul> |
 </BsTable>

skills/using-ouds-web-version-major-minor/references/layout/containers.md

@@ -14,6 +14,14 @@ Use `.container-fluid` with `.container-max-width`:
 </div>
 ```
 
+For layouts that need more space, use `.container-max-width-alt` instead:
+
+```html
+<div class="container-fluid container-max-width-alt">
+  <!-- Content here -->
+</div>
+```
+
 ### `.container-fluid`
 
 - `width: 100%` at all breakpoints
@@ -24,6 +32,11 @@ Use `.container-fluid` with `.container-max-width`:
 - Pair with `.container-fluid`
 - After `2xl` breakpoint: limits container width to 1680px (including margins), margins to 80px per side, gutters to 32px
 
+### `.container-max-width-alt`
+
+- Pair with `.container-fluid` instead of `.container-max-width`
+- After `3xl` breakpoint: limits container width to the `3xl` max-width (including margins), margins to the `3xl` margin per side, and gutters to the `3xl` column gap
+
 ## Container Padding
 
 Extra padding applied on containers per breakpoint via Sass mixin. Each breakpoint has its own margin token (e.g. `$ouds-grid-2xs-margin`, `$ouds-grid-xs-margin`, etc.).