migration guide (from v0.0.3)

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

@@ -1,7 +1,7 @@
 ---
 layout: docs
 title: Typography
-description: Documentation and examples for OUDS Web typography, including global settings, headings, body text, lists, and more.
+description: Documentation and examples for OUDS Web typography, including global settings, headings, body text, and more.
 group: content
 aliases:
   - "/docs/content/typography/"

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

@@ -34,7 +34,7 @@ From now on, OUDS Web won't embed Bootstrap elements that are not part of Orange
 
 ## Fonts
 
-OUDS Web doesn't use the Helvetica Neue font. Instead, it uses the system font stack. This means that the font will be different depending on the operating system and browser being used.
+OUDS Web doesn't use the Helvetica Neue font. Instead, it uses the system font stack. This means that the font will be slightly different depending on the operating system and browser being used.
 
 Technically, it means that you can get rid of the following things:
 - Helvetica Neue woff2 files: `fonts/HelvNeue55_W1G.woff2`, `fonts/HelvNeue75_W1G.woff2`, `fonts/HelveticaNeueW20-55Roman.woff2`, and `fonts/HelveticaNeueW20-75Bold.woff2`.

site/content/docs/0.0/migration.md

@@ -11,7 +11,28 @@ toc: true
 
 ## v0.0.4
 
-### Contents
+### Basic styles
+
+#### Default styles
+
+- <span class="badge text-bg-success">New</span> Default styles have be added to HTML elements:
+  - Default guidelines that guide our choices like spacing units, text `max-width`, or avoiding `margin-top`
+  - `box-sizing: border-box` set on every element
+  - Default font parameters using native font stack
+  - Default `background-color`
+
+#### Typography
+
+- <span class="badge text-bg-success">New</span> All typography global settings have been set for:
+  - Headings
+  - Display headings
+  - Regular text
+  - Inline text elements (`<mark>`, `<del>`, `<s>`, `<ins>`, `<u>`, `<small>`, `<strong>`, `<em>`, `<abbr>`, `<hr>`, `<var>`, `<kbd>`, `<samp>`, `<address>`)
+  - Code parts (inline, blocks)
+  - Abbreviations (`<abbr>`)
+  - Blockquotes
+  - Summaries (`<summary>`)
+  - Hidden elements
 
 ### Layout
 
@@ -26,6 +47,15 @@ toc: true
 
 ### Helpers
 
+#### Icon
+
+- <span class="badge text-bg-success">New</span> Icons' sizes utilities are now available:
+  - Responsive icons' sizes in headings:
+    - `.h{size}-short-icon`, `.h{size}-medium-icon`, `.h{size}-tall-icon`, where `h` stands for heading and size is one of `s` for small, `m` for medium, `l` for large, or `xl` for x-large
+    - `.b{size}-short-icon`, `.b{size}-medium-icon`, , `.h{size}-tall-icon`, where `b` stands for body and size is one of `m` for medium, `l` for large
+  - Responsive icons' sizes regular texts: `.b{size}-short-icon`, `.b{size}-medium-icon`, `.b{size}-tall-icon`, where size is one of `s` for small, `m` for medium, `l` for large
+  - Fixed icons' sizes for decorative standalone icons: `.decorative-{size}-icon` where size is one of `shortest|shorter|short|medium|tall|taller|tallest`
+
 #### Position
 
 - <span class="badge text-bg-success">New</span> Responsive sticky helpers: `.sticky-{breakpoint}-top` and `.sticky-{breakpoint}-bottom` where `breakpoint` is in `|xs|sm|md|lg|xl|2xl|3xl`.
@@ -79,9 +109,12 @@ toc: true
 - <span class="badge text-bg-success">New</span> Shadows utilities:
   `.shadow-none`, `.shadow-raised`, `.shadow-drag`, `.shadow-overlay-default`, `.shadow-overlay-emphasized`, `.shadow-sticky-default`, `.shadow-sticky-emphasized` and `.shadow-sticky-navigation-scrolled`.
 
+#### Sizing
+TODO
+
 #### Spacings
 
-- <span class="badge text-bg-success">New</span> fixed margin spacing utilities:
+- <span class="badge text-bg-success">New</span> Fixed margin spacing utilities:
   - **None**: `.m-none`, `.mx-none`, `.my-none`, `.mt-none`, `.mb-none`, `.ms-none`, `.me-none`, `.m-xs-none`, etc...
   - **Smash**: `.m-smash`, `.mx-smash`, `.my-smash`, `.mt-smash`, `.mb-smash`, `.ms-smash`, `.me-smash`, `.m-xs-smash`, etc...
   - **Shortest**: `.m-shortest`, `.mx-shortest`, `.my-shortest`, `.mt-shortest`, `.mb-shortest`, `.ms-shortest`, `.me-shortest`, `.m-xs-shortest`, etc...
@@ -96,7 +129,7 @@ toc: true
   - **Jumbo**: `.m-jumbo`, `.mx-jumbo`, `.my-jumbo`, `.mt-jumbo`, `.mb-jumbo`, `.ms-jumbo`, `.me-jumbo`, `.m-xs-jumbo`, etc...
   - **Auto**: `.m-auto`, `.mx-auto`, `.my-auto`, `.mt-auto`, `.mb-auto`, `.ms-auto`, `.me-auto`, `.m-xs-auto`, etc...
 
-- <span class="badge text-bg-success">New</span> scaled margin spacing utilities:
+- <span class="badge text-bg-success">New</span> Scaled margin spacing utilities:
   - **None**: `.m-scaled-none`, `.mx-scaled-none`, `.my-scaled-none`, `.mt-scaled-none`, `.mb-scaled-none`, `.ms-scaled-none`, `.me-scaled-none`,
   - **Smash**: `.m-scaled-smash`, `.mx-scaled-smash`, `.my-scaled-smash`, `.mt-scaled-smash`, `.mb-scaled-smash`, `.ms-scaled-smash`, `.me-scaled-smash`,
   - **Shortest**: `.m-scaled-shortest`, `.mx-scaled-shortest`, `.my-scaled-shortest`, `.mt-scaled-shortest`, `.mb-scaled-shortest`, `.ms-scaled-shortest`, `.me-scaled-shortest`,
@@ -108,7 +141,7 @@ toc: true
   - **Tallest**: `.m-scaled-tallest`, `.mx-scaled-tallest`, `.my-scaled-tallest`, `.mt-scaled-tallest`, `.mb-scaled-tallest`, `.ms-scaled-tallest`, `.me-scaled-tallest`,
   - **Spacious**: `.m-scaled-spacious`, `.mx-scaled-spacious`, `.my-scaled-spacious`, `.mt-scaled-spacious`, `.mb-scaled-spacious`, `.ms-scaled-spacious`, `.me-scaled-spacious`
 
-- <span class="badge text-bg-success">New</span> fixed padding spacing utilities:
+- <span class="badge text-bg-success">New</span> Fixed padding spacing utilities:
   - **None**: `.p-none`, `.px-none`, `.py-none`, `.pt-none`, `.pb-none`, `.ps-none`, `.pe-none`, `.p-xs-none`, etc...
   - **Smash**: `.p-smash`, `.px-smash`, `.py-smash`, `.pt-smash`, `.pb-smash`, `.ps-smash`, `.pe-smash`, `.p-xs-smash`, etc...
   - **Shortest**: `.p-shortest`, `.px-shortest`, `.py-shortest`, `.pt-shortest`, `.pb-shortest`, `.ps-shortest`, `.pe-shortest`, `.p-xs-shortest`, etc...
@@ -122,7 +155,7 @@ toc: true
   - **Huge**: `.p-huge`, `.px-huge`, `.py-huge`, `.pt-huge`, `.pb-huge`, `.ps-huge`, `.pe-huge`, `.p-xs-huge`, etc...
   - **Jumbo**: `.p-jumbo`, `.px-jumbo`, `.py-jumbo`, `.pt-jumbo`, `.pb-jumbo`, `.ps-jumbo`, `.pe-jumbo`, `.p-xs-jumbo`, etc...
 
-- <span class="badge text-bg-success">New</span> scaled padding spacing utilities:
+- <span class="badge text-bg-success">New</span> Scaled padding spacing utilities:
   - **None**: `.p-scaled-none`, `.px-scaled-none`, `.py-scaled-none`, `.pt-scaled-none`, `.pb-scaled-none`, `.ps-scaled-none`, `.pe-scaled-none`,
   - **Smash**: `.p-scaled-smash`, `.px-scaled-smash`, `.py-scaled-smash`, `.pt-scaled-smash`, `.pb-scaled-smash`, `.ps-scaled-smash`, `.pe-scaled-smash`,
   - **Shortest**: `.p-scaled-shortest`, `.px-scaled-shortest`, `.py-scaled-shortest`, `.pt-scaled-shortest`, `.pb-scaled-shortest`, `.ps-scaled-shortest`, `.pe-scaled-shortest`,
@@ -134,7 +167,7 @@ toc: true
   - **Tallest**: `.p-scaled-tallest`, `.px-scaled-tallest`, `.py-scaled-tallest`, `.pt-scaled-tallest`, `.pb-scaled-tallest`, `.ps-scaled-tallest`, `.pe-scaled-tallest`,
   - **Spacious**: `.p-scaled-spacious`, `.px-scaled-spacious`, `.py-scaled-spacious`, `.pt-scaled-spacious`, `.pb-scaled-spacious`, `.ps-scaled-spacious`, `.pe-scaled-spacious`
 
-- <span class="badge text-bg-success">New</span> fixed gap spacing utilities:
+- <span class="badge text-bg-success">New</span> Fixed gap spacing utilities:
   - **None**: `.gap-none`, `.row-gap-none`, `.column-gap-none`, `.gap-xs-none`, etc...
   - **Smash**: `.gap-smash`, `.row-gap-smash`, `.column-gap-smash`, `.gap-xs-smash`, etc...
   - **Shortest**: `.gap-shortest`, `.row-gap-shortest`, `.column-gap-shortest`, `.gap-xs-shortest`, etc...
@@ -148,7 +181,7 @@ toc: true
   - **Huge**: `.gap-huge`, `.row-gap-huge`, `.column-gap-huge`, `.gap-xs-huge`, etc...
   - **Jumbo**: `.gap-jumbo`, `.row-gap-jumbo`, `.column-gap-jumbo`, `.gap-xs-jumbo`, etc...
 
-- <span class="badge text-bg-success">New</span> scaled gap spacing utilities:
+- <span class="badge text-bg-success">New</span> Scaled gap spacing utilities:
   - **None**: `.gap-scaled-none`, `.row-gap-scaled-none`, `.column-gap-scaled-none`
   - **Smash**: `.gap-scaled-smash`, `.row-gap-scaled-smash`, `.column-gap-scaled-smash`
   - **Shortest**: `.gap-scaled-shortest`, `.row-gap-scaled-shortest`, `.column-gap-scaled-shortest`
@@ -162,8 +195,30 @@ toc: true
 
 #### Text
 
+- <span class="badge text-bg-success">New</span> Alignment text utilities: `.text-start`, `.text-center`, `.text-end`, and responsive versions like `.text-{breakpoint}-{start|end|none}` where `breakpoint` is in `|xs|sm|md|lg|xl|2xl|3xl`
+
+- <span class="badge text-bg-success">New</span> Wrapping and overflow text utilities: `.text-wrap` and `.text-nowrap`
+
+- <span class="badge text-bg-success">New</span> Word break text utility: `.text-break`
+
+- <span class="badge text-bg-success">New</span> Text transform text utilities: `.text-lowercase`, `.text-uppercase`, and `.text-capitalize`
+
+- <span class="badge text-bg-success">New</span> Font size text utilities:
+  - **Display headings**: `.fs-dl`, `.fs-dm`, `.fs-ds`
+  - **Headings**: `.fs-hxl`, `.fs-hl`, `.fs-hm`, `.fs-hs`
+  - **Body**: `.fs-bl`, `.fs-bm`, `.fs-bs`
+  - **Labels**: `.fs-lxl`, `.fs-ll`, `.fs-lm`, `.fs-ls`
+  - **Code**: `.fs-cm`, `.fs-cs`
+
+- <span class="badge text-bg-success">New</span> Font weight text utilities: `.fw-normal` and `.fw-bold`
+
+- <span class="badge text-bg-success">New</span> Line height text utilities: `.fw-normal` and `.fw-bold`
+
+
 ### Examples
 
+- <span class="badge text-bg-success">New</span> New [Font example]({{< docsref "/examples/font" >}}).
+
 - <span class="badge text-bg-success">New</span> New [Grid example]({{< docsref "/examples/grid" >}}).
 
 - <span class="badge text-bg-success">New</span> New [Grid system example]({{< docsref "/examples/grid-system" >}}).