diff --git a/site/src/content/docs/components/bullet-list.mdx b/site/src/content/docs/components/bullet-list.mdx
index cc1b86a6d3..7435edf373 100644
--- a/site/src/content/docs/components/bullet-list.mdx
+++ b/site/src/content/docs/components/bullet-list.mdx
@@ -268,7 +268,7 @@ Bare lists have no markers, but retains indentation for alignment.
## Text style
-By default bullet lists text is displayed as [body large]([[docsref:/foundation/typography#regular-texts]]) and in bold, you can use the following classes to change these defaults.
+By default bullet lists text is displayed as [body large]([[docsref:/components/typography#body]]) and in bold, you can use the following classes to change these defaults.
### Body medium
diff --git a/site/src/content/docs/components/typography.mdx b/site/src/content/docs/components/typography.mdx
new file mode 100644
index 0000000000..0a55856d9c
--- /dev/null
+++ b/site/src/content/docs/components/typography.mdx
@@ -0,0 +1,568 @@
+---
+title: Typography
+description: Typography is a set of UI elements that structure and style text content, including headings, display text, body text, labels, and code, used to establish visual hierarchy and ensure consistent, accessible reading across OUDS Web.
+aliases:
+ - "/docs/components/typography/"
+ - "/docs/foundation/typography/"
+ - "/docs/content/typography/"
+toc: true
+types:
+ - Heading
+ - Display
+ - Body
+ - Label
+ - Code
+---
+
+import { getTokenValue } from '@libs/sass-variables'
+
+export const headingLevel = [
+ "heading-xlarge",
+ "heading-large",
+ "heading-medium",
+ "heading-small",
+ "body-large",
+ "body-medium"
+]
+
+export const displayLevel = [
+ "display-large",
+ "display-medium",
+ "display-small"
+]
+
+export const textLevel = [
+ "body-large",
+ "body-medium",
+ "body-small"
+]
+
+export const labelLevel = [
+ "label-xlarge",
+ "label-large",
+ "label-medium",
+ "label-small"
+]
+
+export const screenSize = [
+ "mobile",
+ "tablet",
+ "desktop"
+]
+
+
+ You can find the OUDS design guidelines here: [heading guidelines](https://r.orange.fr/r/S-ouds-doc-heading), [display guidelines](https://r.orange.fr/r/S-ouds-doc-display), [body guidelines](https://r.orange.fr/r/S-ouds-doc-body), [label guidelines](https://r.orange.fr/r/S-ouds-doc-label), [code guidelines](https://r.orange.fr/r/S-ouds-doc-code).
+
+
+## Overview
+
+### Component types
+
+Display large
+
+ ` through `
+ Heading 5 and heading 6 references do not exist in the brand guidelines; they are included here for consistency and continuity of HTML pages.
+
+
+h1. OUDS Web heading
+
+ h2. OUDS Web heading looking like h1
+
+
+### Heading with marker
+
+A brand-colored marker can be displayed below the heading large (`` or `.h2`), to enhance its visual emphasis and reinforce information hierarchy, by adding the `.marker` class.
+
+
+
+
+
+## [[comp]] Body
+
+Body is a UI element that styles typography for common text content like paragraphs, descriptions, and informational messages.
+
+The body features multiple size options, to allow content importance to be expressed while maintaining consistency. Variants automatically adjust across breakpoints to ensure optimal readability on all devices. Body prioritize readability and provide a comfortable reading experience.
+
+Body text has three size levels: large (for emphasis), medium (default), and small (for supporting information). Each one sets `font-size`, `line-height`, `letter-spacing`, and `max-width`. Body has a `font-weight: normal` by default and it uses the [OUDS Web font stack]([[docsref:/foundation/reboot#font-stack]]).
+
+Please note that:
+- You have to use the appropriate HTML tag to convey the right semantic meaning, generally a `
+ This is a body large paragraph. It stands out from regular paragraphs.
+
+
+ Label xlarge text
+
+
-
+
-
+ ++++++
Display
+Display is a UI element that styles typography for impactful content like landing pages, marketing campaigns, and key messages.+
+ -
+ ++++++
Heading
+Heading is a UI element that styles typography to structure content and define the hierarchy of information within an interface.+
+ -
+ ++++++
Body
+Body is a UI element that styles typography for common text content like paragraphs, descriptions, and informational messages.+
+ -
+ ++++++
Label
+Label is a UI element that styles typography for compact interface components such as buttons, form fields, badges, and other small elements.+
+ -
+ ++++++
Code+Code is a UI element that styles typography for technical content like code snippets, commands, system values, and identifiers.+
+
+
+
+
+
+
+| Display reference | +Font size from `2xs` to `sm` | +Font size from `md` to `lg` | +Font size for `xl` and upper | +
|---|---|---|---|
+ {level === 'display-large' && (<>Display large ({'.display-large'}))}
+ {level === 'display-medium' && (<>Display medium ({'.display-medium'}))}
+ {level === 'display-small' && (<>Display small ({'.display-small'}))}
+ |
+ {
+ screenSize.map((size) => (
+
+ {(getTokenValue(`$ouds-font-size-${level}-${size}`).slice(0, -2)) / 16}rem ({getTokenValue(`$ouds-font-size-${level}-${size}`)})
+ |
+ ))
+ }
+
+
+
+See more details about the display classes
+ +
+
+
+
+
+| Display reference | +Font size from `2xs` to `sm` | +Font size from `md` to `lg` | +Font size for `xl` and upper | +
|---|---|---|---|
+ {level === 'display-large' && (<>Display large ({'.display-large'}))}
+ {level === 'display-medium' && (<>Display medium ({'.display-medium'}))}
+ {level === 'display-small' && (<>Display small ({'.display-small'}))}
+ |
+ {
+ screenSize.map((size) => (
+
+
|
+ ))
+ }
+
Display medium
+ +Display small
`} /> + +## [[comp]] Heading + +Heading is a UI element that styles typography to structure content and define the hierarchy of information within an interface. + +The heading features multiple sizes options, to help users quickly understand the organization of a page or section. Variants automatically adjust across breakpoints to ensure optimal readability on all devices. Heading serve as the primary entry point for visual navigation. + +All HTML headings, `` through ``, are available. Each one sets `font-size`, and also `line-height`, `letter-spacing`, `font-weight: bold`, and `max-width`. `.h1` through `.h6` classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element. Heading uses the [OUDS Web font stack]([[docsref:/foundation/reboot#font-stack]]).
+
+Please note that:
+- You have to use the appropriate HTML tag to convey the right semantic meaning. A heading tag meaning is not reflected by the corresponding class on a `
` tag. +- The heading tags and classes are equivalent to the [font size text utilities]([[docsref:/utilities/text#font-size]]) `.fs-hxl`, `.fs-hl`, `.fs-hm`, `.fs-hs`, `.fs-bl`, and `.fs-bm`, except for the `font-weight`. +- If you want to get rid of the `max-width`, please use to use our `.mw-none` [width utility]([[docsref:/utilities/sizing]]). +- If you want to get rid of the `margin-bottom`, please use our `.mb-none` [spacing utility]([[docsref:/utilities/spacing#margin-and-padding]]). +- You can easily add an icon with your headings using our [heading icon size utilities]([[docsref:/utilities/icons-sizing#heading]]). + +Here are the associated `font-size`s depending on the breakpoints: + +
+
+
+
+
+
+| Heading reference | +Font size from `2xs` to `sm` | +Font size from `md` to `lg` | +Font size for `xl` and upper | +
|---|---|---|---|
+ {level === 'heading-xlarge' && (<>Heading xlarge ({' or .h1))}
+ {level === 'heading-large' && (<>Heading large ({' or .h2))}
+ {level === 'heading-medium' && (<>Heading medium ({' or .h3))}
+ {level === 'heading-small' && (<>Heading small ({' or .h4))}
+ {level === 'body-large' && (<>Heading 5 ({' or .h5))}
+ {level === 'body-medium' && (<>Heading 6 ({' or .h6))}
+ |
+ {
+ screenSize.map((size) => (
+
+ {(getTokenValue(`$ouds-font-size-${level}-${size}`).slice(0, -2)) / 16}rem ({getTokenValue(`$ouds-font-size-${level}-${size}`)})
+ |
+ ))
+ }
+
+
+
+See more details about the heading classes
+ +
+
+
+
+
+| Heading reference | +Font size from `2xs` to `sm` | +Font size from `md` to `lg` | +Font size for `xl` and upper | +
|---|---|---|---|
+ {level === 'heading-xlarge' && (<>Heading xlarge ({' or .h1))}
+ {level === 'heading-large' && (<>Heading large ({' or .h2))}
+ {level === 'heading-medium' && (<>Heading medium ({' or .h3))}
+ {level === 'heading-small' && (<>Heading small ({' or .h4))}
+ {level === 'body-large' && (<>Heading 5 ({' or .h5))}
+ {level === 'body-medium' && (<>Heading 6 ({' or .h6))}
+ |
+ {
+ screenSize.map((size) => (
+
+
|
+ ))
+ }
+
h2. OUDS Web heading
+ +h3. OUDS Web heading
+ +h4. OUDS Web heading
+ +h5. OUDS Web heading
+ +h6. OUDS Web heading
`} /> + +h3. OUDS Web heading looking like h2
+ +h2. OUDS Web heading looking like h3
+ +h2. OUDS Web heading looking like h4
+ +h2. OUDS Web heading looking like h5
+ +h2. OUDS Web heading looking like h6
`} /> + +` or `.h2`), to enhance its visual emphasis and reinforce information hierarchy, by adding the `.marker` class.
+
+h2. OUDS Web heading with marker
+
+ h3. OUDS Web heading looking like h2 with marker
`} /> +`. +- The `.lead`, `
` and `.small` or `` texts are equivalent to the [font size text utilities]([[docsref:/utilities/text#font-size]]) `.fs-bl`, `.fs-bm`, and `.fs-bs`. +- You can use other font weights as needed through our [font weight utilities]([[docsref:/utilities/text#font-weight]]). +- If you want to get rid of the `max-width`, please use to use our `.mw-none` [width utility]([[docsref:/utilities/sizing]]). +- If you want to get rid of the `margin-bottom` applied on `
` elements, please use our `.mb-none` [spacing utility]([[docsref:/utilities/spacing#margin-and-padding]]).
+- You can easily add an icon with your body texts using our [body text icon size utilities]([[docsref:/utilities/icons-sizing#body]]).
+
+ ` elements.
+
+
+
+
+
+
+| Body reference | +Font size from `2xs` to `sm` | +Font size from `md` to `lg` | +Font size for `xl` and upper | +
|---|---|---|---|
+ {level === 'body-large' && (<>Body large ({'.lead'} or .fs-bl))}
+ {level === 'body-medium' && (<>Body medium (default {' or .fs-bm))}
+ {level === 'body-small' && (<>Body small ({'.small'}, {''} or .fs-bs))}
+ |
+ {
+ screenSize.map((size) => (
+
+ {(getTokenValue(`$ouds-font-size-${level}-${size}`).slice(0, -2)) / 16}rem ({getTokenValue(`$ouds-font-size-${level}-${size}`)})
+ |
+ ))
+ }
+
+
+
+See more details about the body classes
+
+
+
+
+
+| Body reference | +Font size from `2xs` to `sm` | +Font size from `md` to `lg` | +Font size for `xl` and upper | +
|---|---|---|---|
+ {level === 'body-large' && (<>Body large ({'.lead'} or .fs-bl))}
+ {level === 'body-medium' && (<>Body medium (default {' or .fs-bm))}
+ {level === 'body-small' && (<>Body small ({'.small'} or {''} or .fs-bs))}
+ |
+ {
+ screenSize.map((size) => (
+
+
|
+ ))
+ }
+
+ This is another body large paragraph. +
+ +This is a regular body medium paragraph.
+ +This is a body small paragraph.
+ +This is another body small paragraph.
`} /> + +## [[comp]] Label + +Label is a UI element that styles typography for compact interface components such as buttons, form fields, badges, and other small elements. + +The label is non-responsive and maintains a fixed size across all breakpoints. This ensures visual consistency and predictable behavior within space-constrained UI elements. Labels are preferred when content is displayed within small components. + +Labels have four size levels: xlarge, large, medium, and small. Each one sets `font-size`, `line-height`, `letter-spacing`, and `max-width`. Label uses the [OUDS Web font stack]([[docsref:/foundation/reboot#font-stack]]). + +Please note that: +- You have to use the appropriate HTML tag to convey the right semantic meaning, generally a ``. +- You can use other font weights as needed through our [font weight utilities]([[docsref:/utilities/text#font-weight]]). +- If you want to get rid of the `max-width`, please use to use our `.mw-none` [width utility]([[docsref:/utilities/sizing]]). + +Here are the associated `font-size`s: + +
+
+
+
+
+
+| Label reference | +Font size | +
|---|---|
+ {level === 'label-xlarge' && (<>Label xlarge ({'.fs-lxl'}))}
+ {level === 'label-large' && (<>Label large ({'.fs-ll'}))}
+ {level === 'label-medium' && (<>Label medium (default {'.fs-lm'}))}
+ {level === 'label-small' && (<>Label small ({'.fs-ls'}))}
+ |
+
+
+ {(getTokenValue(`$ouds-font-size-${level}`).slice(0, -2)) / 16}rem ({getTokenValue(`$ouds-font-size-${level}`)})
+ |
+
+
+
+
+See more details about the label classes
+
+
+
+
+
+| Label reference | +Font size from `2xs` to `sm` | +Font size from `md` to `lg` | +Font size for `xl` and upper | +
|---|---|---|---|
+ {level === 'label-xlarge' && (<>Label xlarge ({'.fs-lxl'}))}
+ {level === 'label-large' && (<>Label large ({'.fs-ll'}))}
+ {level === 'label-medium' && (<>Label medium ({'.fs-lm'}))}
+ {level === 'label-small' && (<>Label small ({'.fs-ls'}))}
+ |
+ {
+ screenSize.map((size) => (
+
+
|
+ ))
+ }
+
Label large text
+ +Label medium text
+ +Label small text
`} /> + +## [[comp]] Code + +Code element is a UI element that styles typography for technical content like code snippets, commands, system values, and identifiers. + +The code employs a monospace typeface to maintain character alignment and enhance the readability of structured content. Offered in one size, it ensures a uniform presentation of technical information across the product. Its application should be restricted to content that necessitates a precise code-like representation. + +Use the `` element to mark short code snippets within text. The `` element uses the [monospace code font stack]([[docsref:/foundation/reboot#font-stack]]) and is styled to stand out from surrounding text.
+
+<section> should be wrapped as inline.`} />
diff --git a/site/src/content/docs/dual-mode.mdx b/site/src/content/docs/dual-mode.mdx
index b1e7220afa..3afc3d32d4 100644
--- a/site/src/content/docs/dual-mode.mdx
+++ b/site/src/content/docs/dual-mode.mdx
@@ -438,7 +438,7 @@ In this scenario, you will have access to OUDS Web on defined elements and child
// Layout & components
@import "@ouds/web-common/scss/root";
@import "@ouds/web-common/scss/reboot";
- @import "@ouds/web-common/scss/type";
+ @import "@ouds/web-common/scss/typography";
@import "@ouds/web-common/scss/containers";
@import "@ouds/web-common/scss/grid";
@import "@ouds/web-common/scss/table"; // Draft and might change
diff --git a/site/src/content/docs/foundation/reboot.mdx b/site/src/content/docs/foundation/reboot.mdx
index 2f245c6c4a..82699212b9 100644
--- a/site/src/content/docs/foundation/reboot.mdx
+++ b/site/src/content/docs/foundation/reboot.mdx
@@ -1,6 +1,6 @@
---
title: Reboot
-description: Reboot, a collection of element-specific CSS changes in a single file, kickstart OUDS Web to provide an elegant, consistent, and simple baseline to build upon.
+description: Reboot sets consistent default styles for HTML elements and gives OUDS Web a simple starting point.
aliases:
- "/content/"
- "/docs/content/"
@@ -16,18 +16,21 @@ import { getTokenValue } from '@libs/sass-variables'
## Approach
-Reboot builds upon Normalize, providing many HTML elements with somewhat opinionated styles using only element selectors. Additional styling is done only with classes. For example, we reboot some `` styles for a simpler baseline and later provide `.table`, `.table-bordered`, and more.
+Reboot is a shared SCSS file imported after the root styles and before typography, layout, and component styles in each [theme]([[docsref:/foundation/themes]]) stylesheet. This order sets the basic styles first, later styles can then build on or override them.
-Here are our guidelines and reasons for choosing what to override in Reboot:
+Reboot builds on Normalize and sets default styles using element selectors. For example, reboot resets the default styling of lists, while the [Bullet list component]([[docsref:/components/bullet-list]]) offers more stylized lists using classes such as `.bullet-list` or `.bullet-list-default-color`.
-- Update some browser default values to use `px`s instead of `em`s for fixed component spacing, to keep as much space as possible for meaningful content on zoom.
-- Avoid `margin-top`. Vertical margins can collapse, yielding unexpected results. More importantly though, a single direction of `margin` is a simpler mental model.
-- For easier scaling across device sizes, block elements should use `px`s for `margin`s.
-- Keep declarations of `font`-related properties to a minimum, using `inherit` whenever possible. We 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]]).
+Reboot follows these guidelines:
-## CSS variables
+- Use `px` instead of `em` for fixed spacing, so zoom leaves more room for content.
+- Avoid `margin-top`. Vertical margins can collapse; using only one margin direction keeps spacing predictable.
+- Use `px` margins on block elements to make spacing consistent across screen sizes.
+- Set as few font properties as possible and use `inherit` where possible.
+- Text has a `max-width` for readability. Remove it with the `.mw-none` [width utility]([[docsref:/utilities/sizing]]) when needed.
-OUDS Web standards require `@import`s across all our CSS bundles (including `ouds-web.css`, `ouds-web-reboot.css`, and `ouds-web-grid.css`) to include `_root.scss`. This adds `:root` level CSS variables to all bundles, regardless of how many of them are used in that bundle. Ultimately OUDS Web will continue to see more [CSS variables]([[docsref:/foundation/css-variables]]) added over time, in order to provide more real-time customization without the need to always recompile Sass. Our approach is to take our source Sass variables and transform them into CSS variables. That way, even if you don’t use CSS variables, you still have all the power of Sass. **This is still in-progress and will take time to fully implement.**
+### CSS variables
+
+Every OUDS Web CSS bundle (like `ouds-web.css`, `ouds-web-reboot.css`, or `ouds-web-grid.css`) includes `_root.scss`, which defines root-level [CSS variables]([[docsref:/foundation/css-variables]]) (also called custom properties). These variables are generated from Sass variables.
For example, consider these `:root` CSS variables for common `:root` styles:
@@ -43,48 +46,36 @@ Which allows you to make real-time customizations however you like: