[OUDS] fix(docs): missing changes in the previous branches (#2851)

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

@@ -17,7 +17,7 @@ OUDS Web sets basic global display, typography<!--, and link styles-->. When mor
 - Use the `$font-family-base`, `$font-size-base`, and `$line-height-base` attributes as our typographic base applied to the `:root` children.
 - Use `max-width` on all font references for readability reasons. If you want to get rid of the `max-width`, please make sure to use our `.mw-none` [width utility]({{< docsref "/utilities/sizing" >}}).
 <!-- - Set the global link color via `$link-color`. -->
-- Use `$body-bg` to set a `background-color` on the `:root` children (`#fff` by default).
+- Use `--bs-color-bg-primary` to set a `background-color` on the `:root` children (`#fff` by default).
 
 These styles can be found within `_reboot.scss`, and the global variables are defined in `_variables.scss`. Make sure to set `$font-size-base` in `rem`.
 

site/content/docs/0.0/getting-started/accessibility.md

@@ -28,7 +28,7 @@ Because OUDS Web's components are purposely designed to be fairly generic, autho
 
 Some combinations of colors that currently make up OUDS Web's default palette—used throughout the framework<!-- for things such as button variations, alert variations, form validation indicators—-->may lead to *insufficient* color contrast (below the recommended [WCAG 2.2 text color contrast ratio of 4.5:1](https://www.w3.org/TR/WCAG/#contrast-minimum) and the [WCAG 2.2 non-text color contrast ratio of 3:1](https://www.w3.org/TR/WCAG21/#non-text-contrast)), particularly when used against a light background.
 
-OUDS Web **contrasts aren't locked, please make sure they meet [WCAG 2.2 accessibility standards for color contrast](https://www.w3.org/TR/WCAG21/#contrast-minimum)** when using [`.text-*`]({{< docsref "/utilities/colors" >}}) and [`.bg-*` utilities]({{< docsref "/utilities/background" >}}), by defining `color` and `background-color`.<!-- Please refer to [our theme colors]({{< docsref "/customize/color-palette" >}}) to have a full preview of OUDS Web color palette’s reached WCAG level.-->
+OUDS Web **contrasts aren't locked, please make sure they meet [WCAG 2.2 accessibility standards for color contrast](https://www.w3.org/TR/WCAG21/#contrast-minimum)** when using [`.text-*`]({{< docsref "/utilities/colors" >}}) and [`.bg-*` utilities]({{< docsref "/utilities/background" >}}), by defining `color` and `background-color`. Please refer to [our theme colors]({{< docsref "/customize/color-palette" >}}) to have a full preview of OUDS Web color palette’s reached WCAG level.
 
 ### Visually hidden content
 
@@ -91,9 +91,7 @@ OUDS Web provides `target-size()` mixin to ensure a minimum target size, adding
 
 ### Maximum line length
 
-When writing a paragraph, it is commonly admitted that a line should have 80 characters as a maximum. This phenomenon is carefully explained in the [C20 technique: Using relative measurements to set column widths](https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/C20).
-
-<!--For more information, please [read text utilities]({{< docsref "/utilities/text#line-length" >}}).-->
+When writing a paragraph, it is commonly admitted that a line should have 80 characters as a maximum. This phenomenon is carefully explained in the [C20 technique: Using relative measurements to set column widths](https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/C20). We apply it by default on all our elements.
 
 ## Additional resources
 

site/content/docs/0.0/getting-started/contents.md

@@ -87,7 +87,7 @@ OUDS Web includes a handful of options for including some or all of our compiled
 | `ouds-web-bootstrap.css`<br> `ouds-web-bootstrap.min.css`<br> `ouds-web-bootstrap.rtl.css`<br> `ouds-web-bootstrap.rtl.min.css` | Included | Included | Included | Included with Bootstrap utilities |
 | `ouds-web-grid.css`<br> `ouds-web-grid.rtl.css`<br> `ouds-web-grid.min.css`<br> `ouds-web-grid.rtl.min.css` | [Only grid system]({{< docsref "/layout/grid" >}}) | — | — | [Only flex utilities]({{< docsref "/utilities/flex" >}}) |
 | `ouds-web-utilities.css`<br> `ouds-web-utilities.rtl.css`<br> `ouds-web-utilities.min.css`<br> `ouds-web-utilities.rtl.min.css` | — | — | — | Included |
-| `ouds-web-reboot.css`<br> `ouds-web-reboot.rtl.css`<br> `ouds-web-reboot.min.css`<br> `ouds-web-reboot.rtl.min.css` | — | <!--[Only Reboot]({{< docsref "/content/reboot" >}})-->— | — | — |
+| `ouds-web-reboot.css`<br> `ouds-web-reboot.rtl.css`<br> `ouds-web-reboot.min.css`<br> `ouds-web-reboot.rtl.min.css` | — | [Only Reboot]({{< docsref "/content/reboot" >}}) | — | — |
 {{< /bs-table >}}
 
 ### JS files

site/content/docs/0.0/getting-started/introduction.md

@@ -193,7 +193,7 @@ It should be used for critical resources only.
 
 ### Reboot
 
-For improved cross-browser rendering, we <!--use [Reboot]({{< docsref "/content/reboot" >}}) to -->correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.
+For improved cross-browser rendering, we use [Reboot]({{< docsref "/content/reboot" >}}) to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.
 
 ## OUDS Web community
 

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

@@ -15,7 +15,7 @@ Use the ratio helper to manage the aspect ratios of external content like `<ifra
 Aspect ratios are declared in a Sass map and included in each class via CSS variable, which also allows [custom aspect ratios](#custom-ratios).
 
 {{< callout info >}}
-**Pro-Tip!** You don't need `frameborder="0"` on your `<iframe>`s as we override that for you<!-- in [Reboot]({{< docsref "/content/reboot" >}})-->.
+**Pro-Tip!** You don't need `frameborder="0"` on your `<iframe>`s as we override that for you in [Reboot]({{< docsref "/content/reboot" >}}).
 {{< /callout >}}
 
 ## Example

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

@@ -305,7 +305,7 @@ In addition to column clearing at responsive breakpoints, you may need to reset
 </div>
 {{< /example >}}
 
-<!-- #### Margin utilities
+#### Margin utilities
 
 With flexbox grids, you can use margin utilities like `.me-auto` to force sibling columns away from one another.
 
@@ -324,7 +324,7 @@ With flexbox grids, you can use margin utilities like `.me-auto` to force siblin
     <div class="col-auto">.col-auto</div>
   </div>
 </div>
-{{< /example >}} -->
+{{< /example >}}
 
 ## Standalone column classes
 

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

@@ -85,7 +85,7 @@ Output:
 
 Use the `values` key to specify which values for the specified `property` should be used in the generated class names and rules. Can be a list or map (set in the utilities or in a Sass variable).
 
-As a list<!--, like with [`text-decoration` utilities]({{< docsref "/utilities/text#text-decoration" >}})-->:
+As a list, like with [`text-decoration` utilities]({{< docsref "/utilities/text#text-decoration" >}}):
 
 ```scss
 values: none underline line-through
@@ -165,8 +165,7 @@ Output:
 
 Set the `css-var` boolean option to `true` and the API will generate local CSS variables for the given selector instead of the usual `property: value` rules. Add an optional `css-variable-name` to set a different CSS variable name than the class name.
 
-<!--
-Consider our `.text-opacity-*` utilities. If we add the `css-variable-name` option, we'll get a custom output.
+Consider a `.text-opacity-*` utilities. If we add the `css-variable-name` option, we'll get a custom output.
 
 ```scss
 $utilities: (
@@ -192,7 +191,6 @@ Output:
 .text-opacity-75 { -bs-text-alpha: .75; } // TODO: reinsert hyphens
 .text-opacity-100 { -bs-text-alpha: 1; } // TODO: reinsert hyphens
 ```
--->
 
 ### Local CSS variables