Add some OUDS mod, remove .initialism, add some documentation

scss/_reboot.scss

@@ -185,6 +185,7 @@ h6 {
 p {
   margin-top: 0;
   margin-bottom: $paragraph-margin-bottom;
+  // todo lm: @extend %body-medium;
 }
 
 
@@ -290,6 +291,7 @@ blockquote {
 }
 
 // OUDS mod: No italic
+i,
 em,
 cite {
   font-style: normal; // OUDS mod: remove italic.
@@ -389,7 +391,7 @@ pre {
   margin-top: 0; // 1
   margin-bottom: 1rem; // 2
   overflow: auto; // 3
-  @extend %code-small; // OUDS mod: instead of `@include font-size($code-font-size)`
+  @extend %code-medium; // OUDS mod: instead of `@include font-size($code-font-size)`
   color: $pre-color;
 
   // Account for some code outputs that place code tags in pre tags

scss/_type.scss

@@ -82,10 +82,7 @@
 //
 
 // Builds on `abbr`
-.initialism {
-  @include font-size($initialism-font-size);
-  text-transform: uppercase;
-}
+// OUDS mod: no .initialism
 
 // Blockquotes
 .blockquote {

scss/_variables.scss

@@ -810,7 +810,7 @@ $sub-sup-font-size:           .75em !default;
 $text-muted:                  var(--#{$prefix}secondary-color) !default; // Deprecated in Bootstrap 5.3.0
 // fusv-enable
 
-$initialism-font-size:        $small-font-size !default;
+// OUDS mod: no $initialism-font-size
 
 $blockquote-margin-y:         $spacer !default;
 // OUDS mod: no `$blockquote-font-size`

scss/mixins/_utilities.scss

@@ -55,10 +55,12 @@
           /* rtl:begin:remove */
         }
 
+        // OUDS mod
         @if type-of($value) == "string" and str-slice($value, 1, 1) == "%" {
           .#{$property-class + $infix + $property-class-modifier} {
             @extend #{$value};
           }
+          // End mod
         } @else {
           @if $is-css-var {
             .#{$property-class + $infix + $property-class-modifier} {

scss/tokens/_composite.scss

@@ -15,7 +15,6 @@ $ouds-elevation-sticky-navigation-scrolled: $ouds-elevation-x-sticky-navigation-
 // scss-docs-end ouds-composite-elevation
 
 // scss-docs-start ouds-composite-font
-// 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 ?
 %display-large {
   max-width: var(--#{$prefix}font-max-width-display-large);
   font-size: var(--#{$prefix}font-size-display-large);
@@ -50,6 +49,25 @@ $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/assets/scss/_colors.scss

@@ -15,7 +15,8 @@
       top: 1rem;
       right: 1rem;
       padding-left: 1rem;
-      @extend %label-small;
+      @extend %label-small; // OUDS mod: instead of `.75rem`
+      // OUDS mod: no line-height
       white-space: pre;
       content:
         str-slice($contrast-ratio, 1, 4) "\A"

site/assets/scss/_masthead.scss

@@ -9,7 +9,7 @@
   }
 
   .lead {
-    @extend %heading-small;
+    @extend %heading-small; // OUDS mod: instead of `@include font-size(1rem)`
     font-weight: 400;
     color: var(--bs-secondary-color);
   }
@@ -59,7 +59,7 @@
   }
 
   .lead {
-    @extend %heading-small;
+    @extend %heading-small; // OUDS mod: instead of `@include font-size(1rem)`
   }
 
   // OUDS mod: no @media query

site/content/docs/0.0/content/typography.md

@@ -71,16 +71,7 @@ All HTML headings, `<h1>` through `<h6>`, are available. Each class sets `font-s
 <p class="h6">h6. OUDS Web heading</p>
 {{< /example >}}
 
-<!--### Customizing headings
-
-Use the included utility classes to create the small secondary heading text.
-
-{{< example >}}
-<h3>
-  Fancy display heading
-  <small class="text-body-secondary">With faded secondary text</small>
-</h3>
-{{< /example >}}-->
+<!-- OUDS mod: No customizing heading -->
 
 ## Display headings
 
@@ -157,14 +148,19 @@ Display headings are customizable via two variables, `$display-font-family` and
 
 ## Regular text
 
-Since only [headings](#headings), [display headings](#display-headings) and `strong` text are meant to use **Bold** in main content, other contents should use regular font-weight. Each class sets `font-size` but also `line-height`, `letter-spacing`, and `max-width`. Here are the associated `font-size`s depending on the breakpoints. See our [Font utilities]({{< docsref "/utilities/text#font-size" >}}).
+Since only [headings](#headings), [display headings](#display-headings) and `strong` text are meant to use **Bold** in main content, other contents should use `normal` font-weight. Each class sets `font-size` but also `line-height`, `letter-spacing`, and `max-width`. Here are the associated `font-size`s depending on the breakpoints. See our [Font utilities]({{< docsref "/utilities/text#font-size" >}}).
+
+{{< callout info >}}
+Body medium is set by default on `body` but we don't set the `max-width` property for usability reasons.
+So if you need to limit width of a default body paragraph, please use `.fs-bm`.
+{{< /callout >}}
 
 {{< bs-table >}}
 | Regular text | Values from `2xs` to `sm` | Values from `md` to `lg` | Values for `xl` and upper |
 | --- | --- | --- | --- |
-| Body large | `1rem` (16px) | `1rem` (16px) | `1.125rem` (18px) |
-| Body medium | `.875rem` (14px) | `.875rem` (14px) | `1rem` (16px) |
-| Body small | `.75rem` (12px) | `.75rem` (12px) | `.875rem` (14px) |
+| Body large (`.lead`) | `1rem` (16px) | `1rem` (16px) | `1.125rem` (18px) |
+| Body medium (default) | `.875rem` (14px) | `.875rem` (14px) | `1rem` (16px) |
+| Body small (`.small`) | `.75rem` (12px) | `.75rem` (12px) | `.875rem` (14px) |
 {{< /bs-table >}}
 
 <details class="mb-medium">
@@ -174,13 +170,13 @@ Since only [headings](#headings), [display headings](#display-headings) and `str
 | Regular text | Values from `2xs` to `sm` | Values from `md` to `lg` | Values for `xl` and upper |
 | --- | --- | --- | --- |
 | Body large | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>1rem</b></li><li><code>line-height</code>: 1.5</li><li><code>letter-spacing</code>: 0.0125rem</li><li><code>max-width</code>: 40rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>1rem</b></li><li><code>line-height</code>: 1.5</li><li><code>letter-spacing</code>: 0.0125rem</li><li><code>max-width</code>: 40rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>1.125rem</b></li><li><code>line-height</code>: 1.3333</li><li><code>letter-spacing</code>: 0.01125rem</li><li><code>max-width</code>: 45rem</li></ul> |
-| Body medium | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>.875rem</b></li><li><code>line-height</code>: 1.4286</li><li><code>letter-spacing</code>: 0.010625rem</li><li><code>max-width</code>: 40rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>.875rem</b></li><li><code>line-height</code>: 1.4286</li><li><code>letter-spacing</code>: 0.010625rem</li><li><code>max-width</code>: 40rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>1rem</b></li><li><code>line-height</code>: 1.5</li><li><code>letter-spacing</code>: 0.0125rem</li><li><code>max-width</code>: 45rem</li></ul> |
+| Body medium (default) | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>.875rem</b></li><li><code>line-height</code>: 1.4286</li><li><code>letter-spacing</code>: 0.010625rem</li><li><code>max-width</code>: 40rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>.875rem</b></li><li><code>line-height</code>: 1.4286</li><li><code>letter-spacing</code>: 0.010625rem</li><li><code>max-width</code>: 40rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>1rem</b></li><li><code>line-height</code>: 1.5</li><li><code>letter-spacing</code>: 0.0125rem</li><li><code>max-width</code>: 45rem</li></ul> |
 | Body small | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>.75rem</b></li><li><code>line-height</code>: 1.3333</li><li><code>letter-spacing</code>: 0.01125rem</li><li><code>max-width</code>: 40rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>.75rem</b></li><li><code>line-height</code>: 1.3333</li><li><code>letter-spacing</code>: 0.01125rem</li><li><code>max-width</code>: 40rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>.875rem</b></li><li><code>line-height</code>: 1.4286</li><li><code>letter-spacing</code>: 0.010625rem</li><li><code>max-width</code>: 45rem</li></ul> |
 {{< /bs-table >}}
 
 </details>
 
-## Lead
+### Lead
 
 Make a paragraph stand out by adding `.lead`. It uses [Regular text](#regular-text) body large.
 
@@ -190,6 +186,19 @@ Make a paragraph stand out by adding `.lead`. It uses [Regular text](#regular-te
 </p>
 {{< /example >}}
 
+### Small
+
+Render a paragraph with a small `font-size` by adding `.small` or use `<small>`. It uses [Regular text](#regular-text) body small.
+
+{{< example >}}
+<p>
+  <small>This is a small paragraph.</small>
+</p>
+<p class="small">
+  This is a small paragraph.
+</p>
+{{< /example >}}
+
 ## Inline text elements
 
 Styling for common inline HTML5 elements.
@@ -208,7 +217,7 @@ Styling for common inline HTML5 elements.
 Beware that those tags should be used for semantic purpose:
 
 - `<mark>` represents text which is marked or highlighted for reference or notation purposes.
-- `<small>` represents side-comments and small print, like copyright and legal text.
+- `<small>` represents side-comments and small print, like copyright and legal text. It uses [Regular text](#regular-text) body small.
 - `<s>` represents element that are no longer relevant or no longer accurate.
 - `<u>` represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation.
 
@@ -219,7 +228,7 @@ If you want to style your text, you should use the following classes instead:
 - `.text-decoration-underline` will apply the same styles as `<u>`.
 - `.text-decoration-line-through` will apply the same styles as `<s>`.
 
-While not shown above, feel free to use `<b>`<!-- and `<i>`--> in HTML5. `<b>` is meant to highlight words or phrases without conveying additional importance<!--, while `<i>` is mostly for voice, technical terms, etc-->.
+While not shown above, feel free to use `<b>` and `<i>` in HTML5. `<b>` is meant to highlight words or phrases without conveying additional importance, while `<i>` is mostly for voice, technical terms, etc.
 
 ## Text utilities
 
@@ -229,16 +238,13 @@ Change text alignment, transform, style, weight, line-height, decoration<!-- and
 
 Stylized implementation of HTML's `<abbr>` element for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide additional context on hover and to users of assistive technologies.
 
-Add `.initialism` to an abbreviation for a slightly smaller font-size.
-
 {{< example >}}
 <p><abbr title="attribute">attr</abbr></p>
-<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
 {{< /example >}}
 
 ## Blockquotes
 
-For quoting blocks of content from another source within your document. Wrap `<blockquote class="blockquote">` around any HTML as the quote.
+For quoting blocks of content from another source within your document. Wrap `<blockquote class="blockquote">` around any HTML as the quote. It uses [Regular text](#regular-text) body large.
 
 {{< example >}}
 <blockquote class="blockquote">
@@ -248,7 +254,7 @@ For quoting blocks of content from another source within your document. Wrap `<b
 
 ### Naming a source
 
-The HTML spec requires that blockquote attribution be placed outside the `<blockquote>`. When providing attribution, wrap your `<blockquote>` in a `<figure>` and use a `<figcaption>` or a block level element (e.g., `<p>`) with the `.blockquote-footer` class. Be sure to wrap the name of the source work in `<cite>` as well.
+The HTML spec requires that blockquote attribution be placed outside the `<blockquote>`. When providing attribution, wrap your `<blockquote>` in a `<figure>` and use a `<figcaption>` or a block level element (e.g., `<p>`) with the `.blockquote-footer` class. Be sure to wrap the name of the source work in `<cite>` as well. It uses [Regular text](#regular-text) body small.
 
 {{< example >}}
 <figure>
@@ -295,7 +301,7 @@ Links in content are black and underlined. They adapt to their context otherwise
 
 Use our [link chevron helper]({{< docsref "/helpers/icon-link#link-chevron" >}}) to bold your link and enhance them with a chevron. -->
 
-## Lists
+<!-- ## Lists
 
 ### Unstyled
 
@@ -359,7 +365,7 @@ Align terms and descriptions horizontally by using our grid system's predefined
     </dl>
   </dd>
 </dl>
-{{< /example >}}
+{{< /example >}} -->
 
 ## CSS
 

site/content/docs/0.0/migration.md

@@ -11,6 +11,8 @@ toc: true
 
 ## v0.0.4
 
+### Contents
+
 ### Layout
 
 - <span class="badge text-bg-success">New</span> Responsive flexbox grid system is now available with eight default responsive tiers defined at breakpoints `2xs`, `xs`, `sm`, `md`, `xl`, `2xl`, and `3xl`.

site/content/docs/0.0/utilities/text.md

@@ -12,18 +12,23 @@ toc: true
 
 Easily realign text to components with text alignment classes. For start, end, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.
 
-{{< example >}}
+// TODO LM
+{{< callout info >}}
+Note that you may use `.ms-{breakpoint}-auto` (respectively `.mx-{breakpoint}-auto`) in addition of `.text-{breakpoint}-end` (respectively `.text-{breakpoint}-center`) in some cases.
+{{< /callout >}}
+
+{{< example class="fs-bm" >}}
 <p class="text-start">Start aligned text on all viewport sizes.</p>
-<p class="text-center">Center aligned text on all viewport sizes.</p>
-<p class="text-end">End aligned text on all viewport sizes.</p>
-
-<p class="text-xs-end">End aligned text on viewports sized XS (x-small) or wider.</p>
-<p class="text-sm-end">End aligned text on viewports sized SM (small) or wider.</p>
-<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 (x-large) or wider.</p>
-<p class="text-2xl-end">End aligned text on viewports sized 2XL (2x-large) or wider.</p>
-<p class="text-3xl-end">End aligned text on viewports sized 3XL (3x-large) or wider.</p>
+<p class="text-center mx-auto">Center aligned text on all viewport sizes.</p>
+<p class="text-end ms-auto">End aligned text on all viewport sizes.</p>
+
+<p class="text-xs-end ms-xs-auto">End aligned text on viewports sized XS (x-small) or wider.</p>
+<p class="text-sm-end ms-sm-auto">End aligned text on viewports sized SM (small) or wider.</p>
+<p class="text-md-end ms-md-auto">End aligned text on viewports sized MD (medium) or wider.</p>
+<p class="text-lg-end ms-lg-auto">End aligned text on viewports sized LG (large) or wider.</p>
+<p class="text-xl-end ms-xl-auto">End aligned text on viewports sized XL (x-large) or wider.</p>
+<p class="text-2xl-end ms-2xl-auto">End aligned text on viewports sized 2XL (2x-large) or wider.</p>
+<p class="text-3xl-end ms-3xl-auto">End aligned text on viewports sized 3XL (3x-large) or wider.</p>
 {{< /example >}}
 
 {{< callout info >}}