Merge branch 'ouds/main-his-tokens-grid' into ouds/main-his-tokens-gr…

…id-xxl-compat # Conflicts: # site/content/docs/0.0/migration-from-boosted.md
Orange-OpenSource · Oct 16, 2024 · e2642a9 · e2642a9
2 parents 1ad8ebe + f2454cc
commit e2642a9
Show file tree

Hide file tree

Showing 7 changed files with 245 additions and 167 deletions.
diff --git a/scss/tokens/_raw.scss b/scss/tokens/_raw.scss
@@ -36,6 +36,12 @@ $ouds-border-width-100: $ouds-border-base !default;
 // $ouds-border-width-200: $ouds-border-base * 2 !default;
 // scss-docs-end ouds-raw-border
 
+// Dimension
+
+// scss-docs-start ouds-raw-dimension
+$ouds-dimension-base: 4px !default;
+// scss-docs-end ouds-raw-dimension
+
 // Elevation
 
 // scss-docs-start ouds-raw-elevation
@@ -69,60 +75,55 @@ $ouds-elevation-y-500:  12px !default;
 // Grid
 
 // scss-docs-start ouds-raw-grid
-//$ouds-grid-width-100: 360px !default;
-//$ouds-grid-width-200: 390px !default;
-//$ouds-grid-width-300: 480px !default;
-//$ouds-grid-width-400: 768px !default;
-//$ouds-grid-width-500: 1024px !default;
-//$ouds-grid-width-600: 1440px !default;
-//$ouds-grid-width-700: 1680px !default;
-//$ouds-grid-width-800: 1920px !default;
-
-//$ouds-grid-min-width-100: 1px !default; // 2xs
-$ouds-grid-min-width-200: 390px !default; // xs
-$ouds-grid-min-width-300: 480px !default; // sm
-$ouds-grid-min-width-400: 736px !default; // md
-$ouds-grid-min-width-500: 1024px !default; // lg
-$ouds-grid-min-width-600: 1320px !default; // xl
-$ouds-grid-min-width-700: 1640px !default; // xxl
-$ouds-grid-min-width-800: 1880px !default; // 3xl
-
-//$ouds-grid-max-width-100: 389px !default;
-//$ouds-grid-max-width-200: 479px !default;
-//$ouds-grid-max-width-300: 735px !default;
-//$ouds-grid-max-width-400: 1023px !default;
-//$ouds-grid-max-width-500: 1319px !default;
-//$ouds-grid-max-width-600: 1639px !default;
+// $ouds-grid-column-count-100: 1px !default;
+// $ouds-grid-column-count-200: 2px !default;
+$ouds-grid-column-count-400: 4px !default;
+$ouds-grid-column-count-600: 6px !default;
+// $ouds-grid-column-count-800: 8px !default;
+// $ouds-grid-column-count-1000: 10px !default;
+$ouds-grid-column-count-1200: 12px !default;
+$ouds-grid-max-width-100: 389px !default;
+$ouds-grid-max-width-200: 479px !default;
+$ouds-grid-max-width-300: 735px !default;
+$ouds-grid-max-width-400: 1023px !default;
+$ouds-grid-max-width-500: 1319px !default;
+$ouds-grid-max-width-600: 1639px !default;
 $ouds-grid-max-width-650: 1680px !default;
-//$ouds-grid-max-width-700: 1879px !default;
+$ouds-grid-max-width-700: 1879px !default;
 $ouds-grid-max-width-800: 1920px !default;
-
-$ouds-grid-margin-100: 16px !default;
-$ouds-grid-margin-300: 24px !default;
-$ouds-grid-margin-400: 28px !default;
-$ouds-grid-margin-500: 32px !default;
-//$ouds-grid-margin-600: 36px !default;
-$ouds-grid-margin-700: 40px !default;
-//$ouds-grid-margin-1000: 52px !default;
-$ouds-grid-margin-1100: 56px !default;
-$ouds-grid-margin-1700: 80px !default;
-$ouds-grid-margin-2500: 112px !default;
-
-//$ouds-grid-column-gap-10: 1px !default;
-$ouds-grid-column-gap-100: 8px !default;
-$ouds-grid-column-gap-200: 16px !default;
-//$ouds-grid-column-gap-300: 20px !default;
-$ouds-grid-column-gap-400: 24px !default;
-$ouds-grid-column-gap-600: 32px !default;
-$ouds-grid-column-gap-800: 40px !default;
-
-//$ouds-grid-column-count-100: 1px !default;
-//$ouds-grid-column-count-200: 2px !default;
-//$ouds-grid-column-count-400: 4px !default;
-//$ouds-grid-column-count-600: 6px !default;
-//$ouds-grid-column-count-800: 8px !default;
-//$ouds-grid-column-count-1000: 10px !default;
-//$ouds-grid-column-count-1200: 12px !default;
+$ouds-grid-min-width-100: 1px !default;
+$ouds-grid-min-width-200: 390px !default;
+$ouds-grid-min-width-300: 480px !default;
+$ouds-grid-min-width-400: 736px !default;
+$ouds-grid-min-width-500: 1024px !default;
+$ouds-grid-min-width-600: 1320px !default;
+$ouds-grid-min-width-700: 1640px !default;
+$ouds-grid-min-width-800: 1880px !default;
+$ouds-grid-width-100: 360px !default;
+$ouds-grid-width-200: 390px !default;
+$ouds-grid-width-300: 480px !default;
+$ouds-grid-width-400: 768px !default;
+$ouds-grid-width-500: 1024px !default;
+$ouds-grid-width-600: 1440px !default;
+$ouds-grid-width-700: 1680px !default;
+$ouds-grid-width-800: 1920px !default;
+// $ouds-grid-column-gap-10: $ouds-dimension-base * .25 !default; // 1
+$ouds-grid-column-gap-100: $ouds-dimension-base * 2 !default; // 8
+$ouds-grid-column-gap-200: $ouds-dimension-base * 4 !default; // 16
+// $ouds-grid-column-gap-300: $ouds-dimension-base * 5 !default; // 20
+$ouds-grid-column-gap-400: $ouds-dimension-base * 6 !default; // 24
+$ouds-grid-column-gap-600: $ouds-dimension-base * 8 !default; // 32
+$ouds-grid-column-gap-800: $ouds-dimension-base * 10 !default; // 40
+$ouds-grid-margin-100: $ouds-dimension-base * 4 !default; // 16
+$ouds-grid-margin-300: $ouds-dimension-base * 6 !default; // 24
+$ouds-grid-margin-400: $ouds-dimension-base * 7 !default; // 28
+$ouds-grid-margin-500: $ouds-dimension-base * 8 !default; // 32
+// $ouds-grid-margin-600: $ouds-dimension-base * 9 !default; // 36
+$ouds-grid-margin-700: $ouds-dimension-base * 10 !default; // 40
+// $ouds-grid-margin-1000: $ouds-dimension-base * 13 !default; // 52
+$ouds-grid-margin-1100: $ouds-dimension-base * 14 !default; // 56
+$ouds-grid-margin-1700: $ouds-dimension-base * 20 !default; // 80
+$ouds-grid-margin-2500: $ouds-dimension-base * 28 !default; // 112
 // scss-docs-end ouds-raw-grid
 
 // Opacity

diff --git a/scss/tokens/_semantic.scss b/scss/tokens/_semantic.scss
@@ -80,62 +80,55 @@ $ouds-elevation-y-sticky-navigation-scrolled: $ouds-elevation-y-300 !default;
 // Grid
 
 // scss-docs-start ouds-semantic-grid
-//$ouds-grid-2xs-width:         $ouds-grid-width-100 !default;
-//$ouds-grid-2xs-min-width:     $ouds-grid-min-width-100 !default;
-//$ouds-grid-2xs-max-width:     $ouds-grid-max-width-100 !default;
-$ouds-grid-2xs-margin:        $ouds-grid-margin-100 !default;
-$ouds-grid-2xs-column-gap:    $ouds-grid-column-gap-100 !default;
-//$ouds-grid-2xs-column-count:  $ouds-grid-column-count-400 !default;
-
-//$ouds-grid-xs-width:          $ouds-grid-width-200 !default;
-$ouds-grid-xs-min-width:      $ouds-grid-min-width-200 !default;
-//$ouds-grid-xs-max-width:      $ouds-grid-max-width-200 !default;
-$ouds-grid-xs-margin:         $ouds-grid-margin-300 !default;
-$ouds-grid-xs-column-gap:     $ouds-grid-column-gap-200 !default;
-//$ouds-grid-xs-column-count:   $ouds-grid-column-count-400 !default;
-
-//$ouds-grid-sm-width:          $ouds-grid-width-300 !default;
-$ouds-grid-sm-min-width:      $ouds-grid-min-width-300 !default;
-//$ouds-grid-sm-max-width:      $ouds-grid-max-width-300 !default;
-$ouds-grid-sm-margin:         $ouds-grid-margin-400 !default;
-$ouds-grid-sm-column-gap:     $ouds-grid-column-gap-200 !default;
-//$ouds-grid-sm-column-count:   $ouds-grid-column-count-400 !default;
-
-//$ouds-grid-md-width:          $ouds-grid-width-400 !default;
-$ouds-grid-md-min-width:      $ouds-grid-min-width-400 !default;
-//$ouds-grid-md-max-width:      $ouds-grid-max-width-400 !default;
-$ouds-grid-md-margin:         $ouds-grid-margin-500 !default;
-$ouds-grid-md-column-gap:     $ouds-grid-column-gap-400 !default;
-//$ouds-grid-md-column-count:   $ouds-grid-column-count-600 !default;
-
-//$ouds-grid-lg-width:          $ouds-grid-width-500 !default;
-$ouds-grid-lg-min-width:      $ouds-grid-min-width-500 !default;
-//$ouds-grid-lg-max-width:      $ouds-grid-max-width-500 !default;
-$ouds-grid-lg-margin:         $ouds-grid-margin-700 !default;
-$ouds-grid-lg-column-gap:     $ouds-grid-column-gap-400 !default;
-//$ouds-grid-lg-column-count:   $ouds-grid-column-count-600 !default;
-
-//$ouds-grid-xl-width:          $ouds-grid-width-600 !default;
-$ouds-grid-xl-min-width:      $ouds-grid-min-width-600 !default;
-//$ouds-grid-xl-max-width:      $ouds-grid-max-width-600 !default;
-$ouds-grid-xl-margin:         $ouds-grid-margin-1100 !default;
-$ouds-grid-xl-column-gap:     $ouds-grid-column-gap-600 !default;
-//$ouds-grid-xl-column-count:   $ouds-grid-column-count-1200 !default;
-
-//$ouds-grid-2xl-width:                     $ouds-grid-width-700 !default;
-$ouds-grid-2xl-min-width:                 $ouds-grid-min-width-700 !default;
-//$ouds-grid-2xl-max-width-specific-tools:  $ouds-grid-max-width-700 !default;
-$ouds-grid-2xl-max-width-public-website:  $ouds-grid-max-width-650 !default;
-$ouds-grid-2xl-margin:                    $ouds-grid-margin-1700 !default;
-$ouds-grid-2xl-column-gap:                $ouds-grid-column-gap-600 !default;
-//$ouds-grid-2xl-column-count:              $ouds-grid-column-count-1200 !default;
-
-//$ouds-grid-3xl-width:         $ouds-grid-width-800 !default;
-$ouds-grid-3xl-min-width:     $ouds-grid-min-width-800 !default;
-$ouds-grid-3xl-max-width:     $ouds-grid-max-width-800 !default;
-$ouds-grid-3xl-margin:        $ouds-grid-margin-2500 !default;
-$ouds-grid-3xl-column-gap:    $ouds-grid-column-gap-800 !default;
-//$ouds-grid-3xl-column-count:  $ouds-grid-column-count-1200 !default;
+// $ouds-grid-2xl-column-count: $ouds-grid-column-count-1200 !default;
+$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-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;
+$ouds-grid-2xs-column-gap: $ouds-grid-column-gap-100 !default;
+$ouds-grid-2xs-margin: $ouds-grid-margin-100 !default;
+// $ouds-grid-2xs-max-width: $ouds-grid-max-width-100 !default;
+// $ouds-grid-2xs-min-width: $ouds-grid-min-width-100 !default;
+// $ouds-grid-2xs-width: $ouds-grid-width-100 !default;
+// $ouds-grid-3xl-column-count: $ouds-grid-column-count-1200 !default;
+$ouds-grid-3xl-column-gap: $ouds-grid-column-gap-800 !default;
+$ouds-grid-3xl-margin: $ouds-grid-margin-2500 !default;
+$ouds-grid-3xl-max-width: $ouds-grid-max-width-800 !default;
+$ouds-grid-3xl-min-width: $ouds-grid-min-width-800 !default;
+// $ouds-grid-3xl-width: $ouds-grid-width-800 !default;
+// $ouds-grid-lg-column-count: $ouds-grid-column-count-600 !default;
+$ouds-grid-lg-column-gap: $ouds-grid-column-gap-400 !default;
+$ouds-grid-lg-margin: $ouds-grid-margin-700 !default;
+// $ouds-grid-lg-max-width: $ouds-grid-max-width-500 !default;
+$ouds-grid-lg-min-width: $ouds-grid-min-width-500 !default;
+// $ouds-grid-lg-width: $ouds-grid-width-500 !default;
+// $ouds-grid-md-column-count: $ouds-grid-column-count-600 !default;
+$ouds-grid-md-column-gap: $ouds-grid-column-gap-400 !default;
+$ouds-grid-md-margin: $ouds-grid-margin-500 !default;
+// $ouds-grid-md-max-width: $ouds-grid-max-width-400 !default;
+$ouds-grid-md-min-width: $ouds-grid-min-width-400 !default;
+// $ouds-grid-md-width: $ouds-grid-width-400 !default;
+// $ouds-grid-sm-column-count: $ouds-grid-column-count-400 !default;
+$ouds-grid-sm-column-gap: $ouds-grid-column-gap-200 !default;
+$ouds-grid-sm-margin: $ouds-grid-margin-400 !default;
+// $ouds-grid-sm-max-width: $ouds-grid-max-width-300 !default;
+$ouds-grid-sm-min-width: $ouds-grid-min-width-300 !default;
+// $ouds-grid-sm-width: $ouds-grid-width-300 !default;
+// $ouds-grid-xl-column-count: $ouds-grid-column-count-1200 !default;
+$ouds-grid-xl-column-gap: $ouds-grid-column-gap-600 !default;
+$ouds-grid-xl-margin: $ouds-grid-margin-1100 !default;
+// $ouds-grid-xl-max-width: $ouds-grid-max-width-600 !default;
+$ouds-grid-xl-min-width: $ouds-grid-min-width-600 !default;
+// $ouds-grid-xl-width: $ouds-grid-width-600 !default;
+// $ouds-grid-xs-column-count: $ouds-grid-column-count-400 !default;
+$ouds-grid-xs-column-gap: $ouds-grid-column-gap-200 !default;
+$ouds-grid-xs-margin: $ouds-grid-margin-300 !default;
+// $ouds-grid-xs-max-width: $ouds-grid-max-width-200 !default;
+$ouds-grid-xs-min-width: $ouds-grid-min-width-200 !default;
+// $ouds-grid-xs-width: $ouds-grid-width-200 !default;
 // scss-docs-end ouds-semantic-grid
 
 // Opacity

diff --git a/site/content/docs/0.0/examples/fake/fake.css b/site/content/docs/0.0/examples/fake/fake.css
diff --git a/site/content/docs/0.0/examples/fake/index.html b/site/content/docs/0.0/examples/fake/index.html
diff --git a/site/content/docs/0.0/migration-from-boosted.md b/site/content/docs/0.0/migration-from-boosted.md
@@ -59,12 +59,22 @@ Technically, it means that you can get rid of the following things:
   - `xxl` has been renamed `2xl`.
   - `2xs` and `3xl` have been added.
   - The breakpoints values have changed. Please refer to the [breakpoints' documentation]({{< docsref "/layout/breakpoints/" >}}).
+  - `.col-{breakpoint}-{number}`, `.g-col-{}
   - The default container to use is now `.container-fluid` associated to `.max-width-public-website` or `.max-width-specific-tools` instead of `.container-xxl`. Please refer to the [fluid containers' documentation]({{< docsref "/layout/containers/#fluid-containers" >}}).
+  - Default gutter inside grid have been changed to have a fully responsive behavior. It should be a transparent change for you.
+  - All gutter utilities have been changed. `.g{-breakpoint}-{value}`, `.gx{-breakpoint}-{value}` and `.gy{-breakpoint}-{value}` which value is inside `0|1|2|3|4|5`. Gutter utilities values now use `none|smash|shortest|shorter|short|medium|tall|taller|tallest|spacious|huge|jumbo`. Proportional equivalence between `0` → `none`, `1` → `shortest`, `2` → `shorter`, `3` → `medium`, `4` → `tall`, `5` → `spacious`.
 
   All responsive classes, helpers and utilities have been changed accordingly to the new breakpoints.
 
 - <span class="badge text-bg-info">Info</span> `xxl` breakpoint and thus all related classes (like `.container-xxl`) can still be available when <code>$enable-bootstrap-compatibility</code> is on.
 
+## Helpers
+
+### Position
+
+- <span class="badge text-bg-danger">Breaking</span> Responsive sticky helpers `.sticky-xxl-{top|bottom}` have been removed and replaced by their equivalent `.sticky-2xl-{top|bottom}`.
+- <span class="badge text-bg-success">New</span> Responsive sticky helpers: `.sticky-xs-{top|bottom}`, `.sticky-2xl-{top|bottom}` and `.sticky-3xl-{top|bottom}`.
+
 ## Utilities
 
 ### Border
@@ -132,6 +142,10 @@ Technically, it means that you can get rid of the following things:
 `shadow-none`, `shadow-raised`, `shadow-drag`, `shadow-overlay-default`, `shadow-overlay-emphasized`, `shadow-sticky-default`, `shadow-sticky-emphasized`, `shadow-sticky-navigation-scrolled` and `shadow-focus`.
 - <span class="badge text-bg-info">Info</span> `.shadow-{|sm|lg}` utilities can still be available when <code>$enable-bootstrap-compatibility</code> is on.
 
+## Examples
+
+- <span class="badge text-bg-success">New</span> New OUDS Web [example for the usable grids]({{< docsref "/examples/grid-system" >}}).
+
 ## CSS and Sass variables
 
 - <span class="badge text-bg-success">New</span> `$enable-bootstrap-compatibility` option set to `false` by default. This option allows you to compile the Sass files with a Bootstrap compatibility mode.
@@ -244,6 +258,53 @@ Technically, it means that you can get rid of the following things:
       <li><code>$ouds-elevation-y-sticky-default</code></li>
       <li><code>$ouds-elevation-y-sticky-emphasized</code></li>
       <li><code>$ouds-elevation-y-sticky-navigation-scrolled</code></li>
+      <li><code>$ouds-grid-2xl-column-gap</code></li>
+      <li><code>$ouds-grid-2xl-margin</code></li>
+      <li><code>$ouds-grid-2xl-max-width-public-website</code></li>
+      <li><code>$ouds-grid-2xl-min-width</code></li>
+      <li><code>$ouds-grid-2xs-column-gap</code></li>
+      <li><code>$ouds-grid-2xs-margin</code></li>
+      <li><code>$ouds-grid-3xl-column-gap</code></li>
+      <li><code>$ouds-grid-3xl-margin</code></li>
+      <li><code>$ouds-grid-3xl-max-width</code></li>
+      <li><code>$ouds-grid-3xl-min-width</code></li>
+      <li><code>$ouds-grid-column-gap-100</code></li>
+      <li><code>$ouds-grid-column-gap-200</code></li>
+      <li><code>$ouds-grid-column-gap-400</code></li>
+      <li><code>$ouds-grid-column-gap-600</code></li>
+      <li><code>$ouds-grid-column-gap-800</code></li>
+      <li><code>$ouds-grid-margin-100</code></li>
+      <li><code>$ouds-grid-margin-1100</code></li>
+      <li><code>$ouds-grid-margin-1700</code></li>
+      <li><code>$ouds-grid-margin-2500</code></li>
+      <li><code>$ouds-grid-margin-300</code></li>
+      <li><code>$ouds-grid-margin-400</code></li>
+      <li><code>$ouds-grid-margin-500</code></li>
+      <li><code>$ouds-grid-margin-700</code></li>
+      <li><code>$ouds-grid-max-width-650</code></li>
+      <li><code>$ouds-grid-max-width-800</code></li>
+      <li><code>$ouds-grid-md-column-gap</code></li>
+      <li><code>$ouds-grid-md-margin</code></li>
+      <li><code>$ouds-grid-md-min-width</code></li>
+      <li><code>$ouds-grid-min-width-200</code></li>
+      <li><code>$ouds-grid-min-width-300</code></li>
+      <li><code>$ouds-grid-min-width-400</code></li>
+      <li><code>$ouds-grid-min-width-500</code></li>
+      <li><code>$ouds-grid-min-width-600</code></li>
+      <li><code>$ouds-grid-min-width-700</code></li>
+      <li><code>$ouds-grid-min-width-800</code></li>
+      <li><code>$ouds-grid-lg-column-gap</code></li>
+      <li><code>$ouds-grid-lg-margin</code></li>
+      <li><code>$ouds-grid-lg-min-width</code></li>
+      <li><code>$ouds-grid-sm-column-gap</code></li>
+      <li><code>$ouds-grid-sm-margin</code></li>
+      <li><code>$ouds-grid-sm-min-width</code></li>
+      <li><code>$ouds-grid-xl-column-gap</code></li>
+      <li><code>$ouds-grid-xl-margin</code></li>
+      <li><code>$ouds-grid-xl-min-width</code></li>
+      <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-opacity-0</code></li>
       <li><code>$ouds-opacity-100</code></li>
       <li><code>$ouds-opacity-300</code></li>
@@ -262,6 +323,7 @@ Technically, it means that you can get rid of the following things:
 - <details class="mb-2">
     <summary><span class="badge text-bg-success">New</span> Sass maps:</summary>
     <ul>
+      <li><code>$grid-gutter-widths</code></li>
       <li><code>$ouds-border-radiuses</code></li>
       <li><code>$ouds-border-styles</code></li>
       <li><code>$ouds-border-widths</code></li>
@@ -315,6 +377,7 @@ Technically, it means that you can get rid of the following things:
       <li><code>$form-star-focus-color-dark</code></li>
       <li><code>$form-star-focus-outline</code></li>
       <li><code>$form-star-focus-outline-dark</code></li>
+      <li><code>$grid-gutter-breakpoint</code></li>
       <li><code>$orange-filter</code></li>
       <li><code>$outline-offset</code></li>
       <li><code>$outline-width</code></li>
@@ -350,7 +413,6 @@ Technically, it means that you can get rid of the following things:
       <li><code>--bs-box-shadow-inset</code></li>
       <li><code>--bs-box-shadow-lg</code></li>
       <li><code>--bs-box-shadow-sm</code></li>
-
     </ul>
   </details>
 
@@ -373,3 +435,5 @@ Technically, it means that you can get rid of the following things:
       <li><code>shadow</code></li>
     </ul>
   </details>
+
+- <span class="badge text-bg-warning">Warning</span> OUDS Web changes the signature of `make-row($gutter, $gutter-sm)` to have `make-row($gutter)`.