feat(lib): Add Typography as components and h2 heading marker by hannahiss · Pull Request #3776 · Orange-OpenSource/Orange-Boosted-Bootstrap

hannahiss · 2026-08-27T16:23:50Z

Types of change

Non-breaking change
Breaking change (fix or feature that would change existing functionality and usage)

Related issues

Closes #3655

Context & Motivation

Description

Add the components group Typography with the types Heading, Display, Body, Label, Code.
- <pre>/<code> : use content/default color for the component
- <code>: use the content/muted color four our inline code elements in the doc
- Add the marker to h2 for Orange. Still wondering if we should add it to .fs-hl
Refactor the foundation doc and styles to have only reboot and no more typography page, and symplify reboot texts
- .blockquote deleted, use <blockquote> insteas, associated with .blockquote-footerfor authoring
Rename _type.scss to _typography.scss

Some TODOs are still in the code and still to check with reviewer.

Checklists

Checklist (for Core Team only)

The changes need to be in the migration guide
The changes are well displayed in Storybook (be careful if example order has changed for DSM)
The changes are compatible with RTL
Manually test browser compatibility with BrowserStack (Chrome 120, Firefox 121, Edge 120, Safari 15.6, iOS Safari, Chrome & Firefox on Android)

Progression (for Core Team only)

Code review
Design review
A11y review
Commit on main following conventional commit

Live previews

netlify · 2026-08-27T16:27:48Z

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	`830adfc`
🔍 Latest deploy log	https://app.netlify.com/projects/boosted/deploys/6adb5de4e587d3fd70b98bdb
😎 Deploy Preview	https://deploy-preview-3776--boosted.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

…t) + add marker class on homepage

# Conflicts: # site/src/components/home/GetStarted.astro

Copilot

🟡 Changes recommended

The implementation omits .fs-hl, regresses Sosh homepage styling, and directly edits generated token files.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

Adds a brand-specific marker for heading-large typography.

Changes:

Implements the marker using tokenized SVG masking.
Documents and applies it to homepage headings.
Updates CSS snapshots and package metadata.

File summaries

File	Description
`site/src/content/docs/foundation/typography.mdx`	Documents marker usage.
`site/src/components/home/GetStarted.astro`	Applies marker and adjusts subheadings.
`site/src/components/home/Customize.astro`	Applies marker and adjusts subheadings.
`site/src/components/home/CSSVariables.astro`	Applies marker and adjusts subheadings.
`scss/_type.scss`	Defines marker pseudo-element styling.
`scss/tests/snapshot-tests/__snapshots__/ouds-web.css`	Updates compiled CSS snapshot.
`scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css`	Updates Bootstrap CSS snapshot.
`packages/orange/scss/tokens/_composite.scss`	Defines Orange marker asset dimensions.
`packages/orange/scss/tokens/_component.scss`	Adds Orange marker color token.
`packages/orange-compact/scss/tokens/_composite.scss`	Defines compact marker asset dimensions.
`packages/orange-compact/scss/tokens/_component.scss`	Adds compact marker color token.
`packages/sosh/scss/tokens/_composite.scss`	Disables the marker asset for Sosh.
`packages/sosh/scss/tokens/_component.scss`	Adds the null Sosh marker color.
`package.json`	Reorders DocSearch dependencies.
`package-lock.json`	Rewrites dependency metadata.

Review details

Files not reviewed (2)

scss/tests/snapshot-tests/snapshots/ouds-web-bootstrap.css: Generated file
scss/tests/snapshot-tests/snapshots/ouds-web.css: Generated file

Files reviewed: 12/15 changed files
Comments generated: 9
Review effort level: Balanced

💡 Configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

# Conflicts: # package-lock.json

- use both token $ouds-typography-heading-large-marker and presence of an asset to display marker

…134918' into main-his-typo-headings # Conflicts: # packages/orange-compact/scss/tokens/_component.scss # packages/orange/scss/tokens/_component.scss # packages/sosh/scss/tokens/_component.scss # site/data/_components-versions.yml

* feat(lib): Bump Items to v1.2.0 * fix review Co-authored-by: Vincent Prothais <vincent.prothais@orange.com> * fix review Co-authored-by: Vincent Prothais <vincent.prothais@orange.com> --------- Co-authored-by: Vincent Prothais <vincent.prothais@orange.com>

…r inline code elements

hannahiss · 2026-10-09T15:43:19Z

 # Typography

-Global typography settings, headings, body text, display headings, and text utilities.
+Typography is a set of UI elements that structure and style text content: headings, display text, body text,


@louismaximepiton I'm wondering about the strange indentation? Should I fix it?

louismaximepiton

Do you think that we should somehow propose a way to copy our configuration for the Prism syntax coloration ?

Haven't reviewed the skills yet since there is many to change before to review it

louismaximepiton · 2026-10-13T12:17:04Z

 code {
  font-size: $code-font-size;
  font-style: normal; // OUDS mod: <var> is italic in all browsers
-  color: var(--#{$prefix}color-content-muted);


Still not a big fan of removing it, since all documentation generators will generate default color code which is barely visible imo and will encourage people to use every color they can use, for example $ouds-color-content-status-warning which is imo an error. I'll keep this open to have other thoughts.

For instance if we keep it like that, we should also remove :

$code-color and its associated CSS variable

Add something in the update guide

To confirm with @vprothais wether we keep the grey color or not?

louismaximepiton · 2026-10-14T10:29:57Z

+<ThemeSpecific theme={['orange', 'orange-compact']}>
+### Heading with marker
+
+A brand-colored marker can be displayed below the heading large (`<h2>` or `.h2`), to enhance its visual emphasis and reinforce information hierarchy, by adding the `.marker class`.


Not sure we want to keep only marker, which is not specific enough to me, maybe something like title-marker or something around this

It could be "heading-marker" but if after they want to use it on something else than a heading... Or "typography-marker" ut a bit long. @vprothais what do you think?

Co-authored-by: Louis-Maxime Piton <louismaxime.piton@orange.com>

# Conflicts: # site/src/content/docs/getting-started/update-guide.mdx # skills/using-ouds-web-version-major-minor/references/getting-started/update-guide.md

louismaximepiton

LGTM, let's send it to design and a11y review and Vincent may give its thoughts in the meantime

First implementation for h2 heading marker

9b55676

github-project-automation Bot added this to 🟣 [Orange-Boosted-Bootstrap] PRs Board Aug 27, 2026

github-project-automation Bot moved this to In Progress / Draft in 🟣 [Orange-Boosted-Bootstrap] PRs Board Aug 27, 2026

hannahiss added 10 commits August 28, 2026 15:55

css snapshots

4b49f62

Add rehype-class-names plugin to add marker classes to all h2 (to tes…

5b87f62

…t) + add marker class on homepage

Enhance doc

dd2d86a

Add package-lock

76c59b5

Merge branch 'main' into main-his-typo-headings

c0662a1

Merge branch 'refs/heads/main' into main-his-typo-headings

8df5798

Remove rehype-class-names for now

3772a49

Change comment (no OUDS mod)

c334f2e

Use svg for marker and anticipate tokens 2.7

cfc8399

Merge branch 'main' into main-his-typo-headings

4f25b55

# Conflicts: # site/src/components/home/GetStarted.astro

vprothais requested a balanced review from Copilot September 10, 2026 09:09

Copilot started reviewing on behalf of vprothais September 10, 2026 09:09

View session

Copilot AI reviewed Sep 10, 2026

View reviewed changes

hannahiss and others added 8 commits September 10, 2026 12:16

Use marker for orange/orange-compact and text-brand-primary for sosh

f4510d7

Merge branch 'main' into main-his-typo-headings

5547628

# Conflicts: # package-lock.json

add .fs-hl.marker

e664056

- update Typo version

5b10cfa

- use both token $ouds-typography-heading-large-marker and presence of an asset to display marker

chore: update tokens

9f1059c

fix to compile

d0b1f0e

fix css tests

eba3249

fix tokens

3bfc0d2

hannahiss changed the base branch from main to tokenator-update-tokens-20260914134918 September 15, 2026 08:20

hannahiss and others added 4 commits September 15, 2026 10:23

fix css tests

32f4f75

feat: update Alert message to v1.2.0 (#3819)

e8f9c7d

hannahiss removed the ready for dev review label Oct 8, 2026

hannahiss added 3 commits October 8, 2026 17:20

content/default color on code elements + content/muted for our doc fo…

6a744b9

…r inline code elements

Update skills

959a46d

Update css snapshot

ecd7229

hannahiss changed the title ~~Add Typography as components and h2 heading marker~~ feat(lib): Add Typography as components and h2 heading marker Oct 9, 2026

hannahiss commented Oct 9, 2026

View reviewed changes

hannahiss added 4 commits October 9, 2026 17:44

Add carriage return between heart definition and extension

ad3bd70

remove useless carriage returns

80107da

update doc for classes .hX

a29e0b8

update skills

fd09ab0

hannahiss added the ready for dev review label Oct 12, 2026

louismaximepiton self-assigned this Oct 13, 2026

louismaximepiton requested changes Oct 14, 2026

View reviewed changes

hannahiss and others added 8 commits October 19, 2026 09:45

Update site/data/_components-versions.yml

18ce773

Co-authored-by: Louis-Maxime Piton <louismaxime.piton@orange.com>

Merge branch 'main' into main-his-typo-headings

3eca2fc

Updates after LM review

1b630be

Merge branch 'main' into main-his-typo-headings

3253244

# Conflicts: # site/src/content/docs/getting-started/update-guide.mdx # skills/using-ouds-web-version-major-minor/references/getting-started/update-guide.md

css snapshots

62a2689

Merge branch 'refs/heads/main' into main-his-typo-headings

d601f33

Merge branch 'main' into main-his-typo-headings

80f57c9

Update reboot after LM review + skills

1f49605

louismaximepiton approved these changes Oct 21, 2026

View reviewed changes

Comment thread scss/_typography.scss Outdated

Comment thread site/src/content/docs/foundation/typography.mdx

Comment thread site/src/content/docs/foundation/reboot.mdx

hannahiss assigned vprothais Oct 22, 2026

move deprecated .blockquote in reboot for more consistency in code

757816b

louismaximepiton removed their assignment Oct 22, 2026

hannahiss added 4 commits October 22, 2026 17:03

css tests

d7c2c77

Merge branch 'main' into main-his-typo-headings

15654ed

Update heading 5/6 labels

76a532a

Merge branch 'refs/heads/main' into main-his-typo-headings

830adfc

jerome-regnier added the 👌 OK Design label Oct 23, 2026

Conversation

hannahiss commented Aug 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Types of change

Related issues

Context & Motivation

Description

Checklists

Checklist (for Core Team only)

Progression (for Core Team only)

Live previews

Uh oh!

netlify Bot commented Aug 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for boosted ready!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Files not reviewed (2)

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

hannahiss Oct 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

louismaximepiton left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

louismaximepiton Oct 13, 2026

Choose a reason for hiding this comment

Uh oh!

hannahiss Oct 19, 2026

Choose a reason for hiding this comment

Uh oh!

louismaximepiton Oct 14, 2026

Choose a reason for hiding this comment

Uh oh!

hannahiss Oct 19, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

louismaximepiton left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

This branch has not been deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

hannahiss commented Aug 27, 2026 •

edited

Loading

netlify Bot commented Aug 27, 2026 •

edited

Loading

hannahiss Oct 9, 2026 •

edited

Loading