First version with icon, missing links and the end of the icon page

scss/_helpers.scss

@@ -2,6 +2,7 @@
 @import "helpers/color-bg";
 @import "helpers/colored-links";
 @import "helpers/focus-ring";
+@import "helpers/icon";
 @import "helpers/icon-link";
 @import "helpers/ratio";
 @import "helpers/position";

scss/_maps.scss

@@ -107,6 +107,8 @@ $ouds-font-weights: (
   normal: $ouds-font-weight-web-default,
   bold: $ouds-font-weight-web-strong
 ) !default;
+
+$ouds-icon-sizes: ("short", "medium", "tall") !default;
 // scss-docs-end ouds-maps-fonts
 
 // scss-docs-start ouds-maps-opacities

scss/_reboot.scss

@@ -185,8 +185,7 @@ h6 {
 p {
   margin-top: 0;
   margin-bottom: $paragraph-margin-bottom;
-  // todo lm: Decide if we keep this as-is or not.
-  // @extend %body-medium;
+  @extend %body-medium; // OUDS mod
 }
 
 

scss/_type.scss

@@ -101,3 +101,12 @@
     content: "\2014\00A0"; // em dash, nbsp
   }
 }
+
+// OUDS mod
+// Selection
+// TODO LM: Change the used variables once we have the good tokens
+::selection {
+  color: var(--#{$prefix}highlight-color);
+  background-color: var(--#{$prefix}highlight-bg);
+}
+// End mod

scss/helpers/_icon.scss

@@ -0,0 +1,120 @@
+[class*="-icon"] {
+  width: 1em;
+  height: 1em;
+  fill: currentcolor;
+}
+
+@each $icon-size in $ouds-icon-sizes {
+  .hxl-#{$icon-size}-icon {
+    font-size: var(--#{$prefix}icon-#{$icon-size}-with-heading-xlarge) if($enable-important-utilities, !important, null);
+  }
+
+  .hl-#{$icon-size}-icon {
+    font-size: var(--#{$prefix}icon-#{$icon-size}-with-heading-large) if($enable-important-utilities, !important, null);
+  }
+
+  .hm-#{$icon-size}-icon {
+    font-size: var(--#{$prefix}icon-#{$icon-size}-with-heading-medium) if($enable-important-utilities, !important, null);
+  }
+
+  .hs-#{$icon-size}-icon {
+    font-size: var(--#{$prefix}icon-#{$icon-size}-with-heading-small) if($enable-important-utilities, !important, null);
+  }
+
+  .bl-#{$icon-size}-icon {
+    font-size: var(--#{$prefix}icon-#{$icon-size}-with-body-large) if($enable-important-utilities, !important, null);
+  }
+
+  .bm-#{$icon-size}-icon {
+    font-size: var(--#{$prefix}icon-#{$icon-size}-with-body-medium) if($enable-important-utilities, !important, null);
+  }
+
+  .bs-#{$icon-size}-icon {
+    font-size: var(--#{$prefix}icon-#{$icon-size}-with-body-small) if($enable-important-utilities, !important, null);
+  }
+}
+
+.lxl-short-icon {
+  font-size: $ouds-size-icon-with-label-xlarge-size-short if($enable-important-utilities, !important, null);
+}
+
+.lxl-medium-icon {
+  font-size: $ouds-size-icon-with-label-xlarge-size-medium if($enable-important-utilities, !important, null);
+}
+
+.lxl-tall-icon {
+  font-size: $ouds-size-icon-with-label-xlarge-size-tall if($enable-important-utilities, !important, null);
+}
+
+// TODO LM: Why is there 2 more sizes for label-large ?
+.ll-shorter-icon {
+  font-size: $ouds-size-icon-with-label-large-size-shorter if($enable-important-utilities, !important, null);
+}
+
+.ll-short-icon {
+  font-size: $ouds-size-icon-with-label-large-size-short if($enable-important-utilities, !important, null);
+}
+
+.ll-medium-icon {
+  font-size: $ouds-size-icon-with-label-large-size-medium if($enable-important-utilities, !important, null);
+}
+
+.ll-tall-icon {
+  font-size: $ouds-size-icon-with-label-large-size-tall if($enable-important-utilities, !important, null);
+}
+
+.ll-taller-icon {
+  font-size: $ouds-size-icon-with-label-large-size-taller if($enable-important-utilities, !important, null);
+}
+
+.lm-short-icon {
+  font-size: $ouds-size-icon-with-label-medium-size-short if($enable-important-utilities, !important, null);
+}
+
+.lm-medium-icon {
+  font-size: $ouds-size-icon-with-label-medium-size-medium if($enable-important-utilities, !important, null);
+}
+
+.lm-tall-icon {
+  font-size: $ouds-size-icon-with-label-medium-size-tall if($enable-important-utilities, !important, null);
+}
+
+.ls-short-icon {
+  font-size: $ouds-size-icon-with-label-small-size-short if($enable-important-utilities, !important, null);
+}
+
+.ls-medium-icon {
+  font-size: $ouds-size-icon-with-label-small-size-medium if($enable-important-utilities, !important, null);
+}
+
+.ls-tall-icon {
+  font-size: $ouds-size-icon-with-label-small-size-tall if($enable-important-utilities, !important, null);
+}
+
+.decorative-shortest-icon {
+  font-size: $ouds-size-icon-decorative-shortest if($enable-important-utilities, !important, null);
+}
+
+.decorative-shorter-icon {
+  font-size: $ouds-size-icon-decorative-shorter if($enable-important-utilities, !important, null);
+}
+
+.decorative-short-icon {
+  font-size: $ouds-size-icon-decorative-short if($enable-important-utilities, !important, null);
+}
+
+.decorative-medium-icon {
+  font-size: $ouds-size-icon-decorative-medium if($enable-important-utilities, !important, null);
+}
+
+.decorative-tall-icon {
+  font-size: $ouds-size-icon-decorative-tall if($enable-important-utilities, !important, null);
+}
+
+.decorative-taller-icon {
+  font-size: $ouds-size-icon-decorative-taller if($enable-important-utilities, !important, null);
+}
+
+.decorative-tallest-icon {
+  font-size: $ouds-size-icon-decorative-tallest if($enable-important-utilities, !important, null);
+}

scss/tokens/_composite.scss

@@ -49,25 +49,6 @@ $ouds-elevation-sticky-navigation-scrolled: $ouds-elevation-x-sticky-navigation-
 
   /* rtl:remove */
   letter-spacing: var(--#{$prefix}font-letter-spacing-heading-xlarge);
-  // todo lm: Should we add default svg img height and width ? If yes, then we should add it here. Do we introduce new classes in here ?
-
-  // img,
-  // svg,
-  // .#{$prefix}icon,
-  // .#{$prefix}icon-sm,
-  // .#{$prefix}icon-lg {
-  //   width: 1em;
-  //   height: 1em;
-  //   font-size: var(--#{$prefix}icon-medium-with-heading-xlarge);
-  // }
-
-  // .#{$prefix}icon-sm {
-  //   font-size: var(--#{$prefix}icon-small-with-heading-xlarge);
-  // }
-
-  // .#{$prefix}icon-lg {
-  //   font-size: var(--#{$prefix}icon-large-with-heading-xlarge);
-  // }
 }
 
 %heading-large {

site/content/docs/0.0/helpers/icon.md

@@ -0,0 +1,124 @@
+---
+layout: docs
+title: Icon link
+description: Quickly see the icon sizes you should use with a specific typography.
+group: helpers
+aliases:
+  - "/docs/helpers/icon-link/"
+toc: true
+---
+
+## Core concept
+
+Free to use how you want with img, svg or icon font
+Inside or outside of the text element
+
+## Displays
+
+You should not use any icon with our `.display-*` font sizes, because we prefer to keep the place for the text.
+
+## Headings
+
+{{< example >}}
+<h1> <!-- h1 uses heading-xlarge font reference so all related classes as `.h1`, `.fs-hxl`, etc... -->
+  <svg class="hxl-tall-icon me-shortest text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
+  </svg>
+  H1 with tall icon
+</h1>
+<h1> <!-- h1 uses heading-xlarge font reference so all related classes as `.h1`, `.fs-hxl`, etc... -->
+  <svg class="hxl-medium-icon me-shortest text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
+  </svg>
+  H1 with medium icon
+</h1>
+<h1> <!-- h1 uses heading-xlarge font reference so all related classes as `.h1`, `.fs-hxl`, etc... -->
+  <svg class="hxl-short-icon me-shortest text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
+  </svg>
+  H1 with short icon
+</h1>
+
+<hr>
+
+<h2> <!-- h2 uses heading-large font reference so all related classes as `.h2`, `.fs-hl`, etc... -->
+  <svg class="hl-tall-icon me-shortest text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
+  </svg>
+  H2 with tall icon
+</h2>
+<h2> <!-- h2 uses heading-large font reference so all related classes as `.h2`, `.fs-hl`, etc... -->
+  <svg class="hl-medium-icon me-shortest text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
+  </svg>
+  H2 with medium icon
+</h2>
+<h2> <!-- h2 uses heading-large font reference so all related classes as `.h2`, `.fs-hl`, etc... -->
+  <svg class="hl-short-icon me-shortest text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
+  </svg>
+  H2 with short icon
+</h2>
+
+<hr>
+
+<h3> <!-- h3 uses heading-medium font reference so all related classes as `.h3`, `.fs-hm`, etc... -->
+  <svg class="hm-tall-icon me-shortest text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
+  </svg>
+  H3 with tall icon
+</h3>
+<h3> <!-- h3 uses heading-medium font reference so all related classes as `.h3`, `.fs-hm`, etc... -->
+  <svg class="hm-medium-icon me-shortest text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
+  </svg>
+  H3 with medium icon
+</h3>
+<h3> <!-- h3 uses heading-medium font reference so all related classes as `.h3`, `.fs-hm`, etc... -->
+  <svg class="hm-short-icon me-shortest text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
+  </svg>
+  H3 with short icon
+</h3>
+
+<hr>
+
+<h4> <!-- h4 uses heading-small font reference so all related classes as `.h4`, `.fs-hs`, etc... -->
+  <svg class="hs-tall-icon me-shortest text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
+  </svg>
+  H4 with tall icon
+</h4>
+<h4> <!-- h4 uses heading-small font reference so all related classes as `.h4`, `.fs-hs`, etc... -->
+  <svg class="hs-medium-icon me-shortest text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
+  </svg>
+  H4 with medium icon
+</h4>
+<h4> <!-- h4 uses heading-small font reference so all related classes as `.h4`, `.fs-hs`, etc... -->
+  <svg class="hs-short-icon me-shortest text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
+  </svg>
+  H4 with short icon
+</h4>
+{{< /example >}}
+
+## Regular texts
+
+{{< example >}}
+
+{{< /example >}}
+
+<!-- TODO LM: Should we keep those ? -->
+
+## Labels
+
+{{< example >}}
+
+{{< /example >}}
+
+## Decorative
+
+{{< example >}}
+
+{{< /example >}}

site/data/sidebar.yml

@@ -177,6 +177,7 @@
       draft: true
     - title: Focus ring
       draft: true
+    - title: Icon
     - title: Icon link
       draft: true
     - title: Position

site/layouts/partials/docs-sidebar.html

@@ -18,7 +18,7 @@
     <li class="bd-links-group py-short">
       <strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
         {{- if $group.icon }}
-          <svg class="bi me-shortest"{{- if $group.icon_color }} style="color: var(--bs-{{ $group.icon_color }});"{{- end }} aria-hidden="true"><use xlink:href="#{{ $group.icon }}"></use></svg>
+          <svg class="bm-medium-icon me-shortest"{{- if $group.icon_color }} style="color: var(--bs-{{ $group.icon_color }});"{{- end }} aria-hidden="true"><use xlink:href="#{{ $group.icon }}"></use></svg>
         {{- end }}
         {{ $group.title }}
       </strong>