Rename container max-width Scss var + enhance documentation

scss/_containers.scss

@@ -56,7 +56,7 @@
   .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-container-max-width;
+      max-width: $ouds-grid-max-width;
 
       .row {
         --#{$prefix}gutter-x: #{map-get($grid-gutter-widths, get-breakpoint-from-width())};

scss/mixins/_breakpoints.scss

@@ -127,7 +127,7 @@
 }
 
 // Get the breakpoint infix corresponding to a given width
-@function get-breakpoint-from-width($width: $ouds-grid-container-max-width, $breakpoints: $grid-breakpoints) {
+@function get-breakpoint-from-width($width: $ouds-grid-max-width, $breakpoints: $grid-breakpoints) {
   $breakpoint-infix: "";
   @each $infix, $value in $grid-breakpoints {
     @if $width >= $value {

scss/tokens/_semantic.scss

@@ -428,7 +428,7 @@ $ouds-grid-2xl-column-gap: $ouds-grid-column-gap-600 !default;
 $ouds-grid-2xl-margin: $ouds-grid-margin-1700 !default;
 $ouds-grid-2xl-max-width-public-website: $ouds-grid-max-width-650 !default;
 $ouds-grid-2xl-max-width-specific-tools: $ouds-grid-max-width-700 !default;
-$ouds-grid-container-max-width: $ouds-grid-max-width-650 !default; // The 2 variables above will disappear with designers
+$ouds-grid-max-width: $ouds-grid-max-width-650 !default;
 $ouds-grid-2xl-min-width: $ouds-grid-min-width-700 !default;
 $ouds-grid-2xl-width: $ouds-grid-width-700 !default;
 $ouds-grid-2xs-column-count: $ouds-grid-column-count-400 !default;

site/content/docs/0.0/layout/containers.md

@@ -29,6 +29,10 @@ Please note that we apply an extra-padding on our containers (see [our mixin](#s
 
 {{< bootstrap-compatibility >}}
 
+{{< callout danger >}}
+**These containers should not be used for Orange sites.** Instead, use the containers provided by OUDS Web: `.container-fluid` associated or not with `.container-max-width`.
+{{< /callout >}}
+
 Bootstrap compatibility enables the use of three different containers:
 
 - `.container`, which sets a static `max-width` between each responsive breakpoint.
@@ -117,10 +121,24 @@ Comparison between `.container-fluid` with `.container-max-width` and `.containe
 
 ### Custom max width
 
-If needed, in specific cases, you can set a custom maximum width for the fluid container by overloading `$ouds-grid-container-max-width` before importing our OUDS scss files.
+If needed, in specific cases, you can set a custom maximum width for the fluid container by overloading `$ouds-grid-max-width` before importing our OUDS scss files.
 
 This will affect all containers that have `.container-max-width` and will make sure that your layout does not exceed this value.
-When going up the breakpoint above `$ouds-grid-container-max-width` value, the container margins and gutter values are kept as they are.
+When going up the breakpoint above `$ouds-grid-max-width` value, the container margins and gutter values are kept as they are.
+
+```scss
+@import "../node_modules/ouds-web/scss/functions";
+
+$ouds-grid-max-width: 3500px; // Custom container max width
+
+@import "../node_modules/ouds-web/tokens/raw";
+@import "../node_modules/ouds-web/tokens/semantic";
+@import "../node_modules/ouds-web/tokens/component";
+@import "../node_modules/ouds-web/ouds-maps";
+@import "../node_modules/ouds-web/variables";
+@import "../node_modules/ouds-web/variables-dark";
+// etc
+```
 
 ## CSS
 

site/content/docs/0.0/migration-from-boosted.md

@@ -300,7 +300,7 @@ Technically, it means that you can get rid of the following things:
       <li><code>$ouds-grid-xs-column-gap</code></li>
       <li><code>$ouds-grid-xs-margin</code></li>
       <li><code>$ouds-grid-xs-min-width</code></li>
-      <li><code>$ouds-grid-container-max-width</code></li>
+      <li><code>$ouds-grid-max-width</code></li>
       <li><code>$ouds-opacity-0</code></li>
       <li><code>$ouds-opacity-100</code></li>
       <li><code>$ouds-opacity-300</code></li>

site/content/docs/0.0/migration.md

@@ -223,7 +223,7 @@ toc: true
       <li><code>$ouds-grid-xs-column-gap</code></li>
       <li><code>$ouds-grid-xs-margin</code></li>
       <li><code>$ouds-grid-xs-min-width</code></li>
-      <li><code>$ouds-grid-container-max-width</code></li>
+      <li><code>$ouds-grid-max-width</code></li>
       <li><code>$ouds-opacity-medium</code></li>
       <li><code>$ouds-opacity-opaque</code></li>
       <li><code>$ouds-opacity-strong</code></li>