From 9b556769d054f877d66e91395bf5f23a18396f40 Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Thu, 27 Aug 2026 18:12:09 +0200 Subject: [PATCH 01/52] First implementation for h2 heading marker --- scss/_reboot.scss | 1 + scss/_type.scss | 12 ++++++++++++ site/src/content/docs/foundation/typography.mdx | 9 +++++++++ 3 files changed, 22 insertions(+) diff --git a/scss/_reboot.scss b/scss/_reboot.scss index 93d64c807a..6e9ab2ab93 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -135,6 +135,7 @@ h1 { h2 { @extend %heading; @include get-font-size("heading-large"); // OUDS mod: instead of `font-size: $h2-font-size` + position: relative; // OUDS mod: for marker pseudo element } h3 { diff --git a/scss/_type.scss b/scss/_type.scss index f9eca36bf8..0d9b3631fa 100644 --- a/scss/_type.scss +++ b/scss/_type.scss @@ -25,6 +25,18 @@ @extend h6; } +// TODO add tokens 2.7 for size, positioning, spacings and color +.h2.marker::after, +h2.marker::after { // stylelint-disable-line selector-no-qualifying-type + position: absolute; + bottom: -12px; + left: 0; + width: 1.875rem; + height: .375rem; + margin-block: .375rem; + content: ""; + background: var(--#{$prefix}color-content-brand-primary); +} .lead { @include get-font-size("body-large"); // OUDS mod: instead of `font-size: $lead-font-size` diff --git a/site/src/content/docs/foundation/typography.mdx b/site/src/content/docs/foundation/typography.mdx index 0c6e881587..55c7b710f3 100644 --- a/site/src/content/docs/foundation/typography.mdx +++ b/site/src/content/docs/foundation/typography.mdx @@ -163,6 +163,15 @@ All HTML headings, `

` through `

`, are available. Each class sets `font-s You can easily add an icon with your font reference using [our icon size utilities]([[docsref:/components/icon#icons-size]]). + + 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`. + h2. OUDS Web heading with marker

+

h2. OUDS Web heading with marker

`} /> + + + + + ## Display headings Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a **display heading**—a larger, slightly more opinionated heading style. From 4b49f6286315fc7116b1cb18e879d78edb93569a Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Fri, 28 Aug 2026 15:55:11 +0200 Subject: [PATCH 02/52] css snapshots --- .../__snapshots__/ouds-web-bootstrap.css | 13 +++++++++++++ .../tests/snapshot-tests/__snapshots__/ouds-web.css | 13 +++++++++++++ 2 files changed, 26 insertions(+) diff --git a/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css b/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css index a08add1d74..81c2bb5761 100644 --- a/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css +++ b/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css @@ -1113,6 +1113,7 @@ h2, .h2 { line-height: var(--bs-font-line-height-heading-large); /* rtl:remove */ letter-spacing: var(--bs-font-letter-spacing-heading-large); + position: relative; } h3, .h3 { @@ -1572,6 +1573,18 @@ dialog, opacity: 0.5; } +.h2.marker::after, +h2.marker::after { + position: absolute; + bottom: -12px; + left: 0; + width: 1.875rem; + height: 0.375rem; + margin-block: 0.375rem; + content: ""; + background: var(--bs-color-content-brand-primary); +} + .lead { max-width: var(--bs-font-max-width-body-large); font-size: var(--bs-font-size-body-large); diff --git a/scss/tests/snapshot-tests/__snapshots__/ouds-web.css b/scss/tests/snapshot-tests/__snapshots__/ouds-web.css index 68314f98b6..334679a134 100644 --- a/scss/tests/snapshot-tests/__snapshots__/ouds-web.css +++ b/scss/tests/snapshot-tests/__snapshots__/ouds-web.css @@ -948,6 +948,7 @@ h2, .h2 { line-height: var(--bs-font-line-height-heading-large); /* rtl:remove */ letter-spacing: var(--bs-font-letter-spacing-heading-large); + position: relative; } h3, .h3 { @@ -1407,6 +1408,18 @@ dialog, opacity: 0.5; } +.h2.marker::after, +h2.marker::after { + position: absolute; + bottom: -12px; + left: 0; + width: 1.875rem; + height: 0.375rem; + margin-block: 0.375rem; + content: ""; + background: var(--bs-color-content-brand-primary); +} + .lead { max-width: var(--bs-font-max-width-body-large); font-size: var(--bs-font-size-body-large); From 5b87f626a6bfe3ef36afbc60d3d906be6679c277 Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Fri, 28 Aug 2026 15:55:46 +0200 Subject: [PATCH 03/52] Add rehype-class-names plugin to add marker classes to all h2 (to test) + add marker class on homepage --- package.json | 3 ++- site/astro.config.ts | 4 +++- site/src/components/home/CSSVariables.astro | 6 +++--- site/src/components/home/Customize.astro | 6 +++--- site/src/components/home/GetStarted.astro | 6 +++--- site/src/content/docs/foundation/typography.mdx | 3 --- 6 files changed, 14 insertions(+), 14 deletions(-) diff --git a/package.json b/package.json index e44d3b17e3..bf6cb8b945 100644 --- a/package.json +++ b/package.json @@ -101,8 +101,8 @@ "@babel/cli": "^7.29.7", "@babel/core": "^7.29.7", "@babel/preset-env": "^7.29.7", - "@docsearch/js": "^4.7.0", "@docsearch/css": "^4.7.0", + "@docsearch/js": "^4.7.0", "@ouds/storybook-theme": "^1.0.0", "@popperjs/core": "^2.11.8", "@rollup/plugin-babel": "^7.1.0", @@ -160,6 +160,7 @@ "prettier": "^3.6.2", "prettier-plugin-astro": "^0.14.1", "rehype-autolink-headings": "^7.1.0", + "rehype-class-names": "^2.0.0", "remark": "^15.0.1", "remark-html": "^16.0.1", "rollup": "^4.46.3", diff --git a/site/astro.config.ts b/site/astro.config.ts index 9d77d945c5..23da66661a 100644 --- a/site/astro.config.ts +++ b/site/astro.config.ts @@ -12,6 +12,7 @@ import { rehypeBsTable, rehypeCustomHeaderSlug, rehypeHeaderLinksOrder } from '. import { remarkBsComp, remarkBsConfig, remarkBsDocsref, remarkBsVersionLink } from './src/libs/remark' import rehypeAutolinkHeadings from 'rehype-autolink-headings' import { isHeading } from './src/libs/utils' +import rehypeClassNames from "rehype-class-names" const isDev = process.env.NODE_ENV === 'development' @@ -50,7 +51,8 @@ export default defineConfig({ } ], rehypeHeaderLinksOrder, - rehypeBsTable + rehypeBsTable, + [rehypeClassNames, {h2: 'marker'}] ], remarkPlugins: [remarkBsConfig, remarkBsDocsref, remarkBsComp, remarkBsVersionLink] }), diff --git a/site/src/components/home/CSSVariables.astro b/site/src/components/home/CSSVariables.astro index 0b233d8d41..ecdc660906 100644 --- a/site/src/components/home/CSSVariables.astro +++ b/site/src/components/home/CSSVariables.astro @@ -9,7 +9,7 @@ import Code from '@components/shortcodes/Code.astro'
-

Build and extend in real-time with CSS variables

+

Build and extend in real-time with CSS variables

OUDS Web is evolving with each release to better utilize CSS variables for global theme styles, individual components, and even utilities. We provide dozens of variables for colors, font styles, and more at a

-

Using CSS variables

+

Using CSS variables

Use any of our global :root variables

-

Customizing via CSS variables

+

Customizing via CSS variables

Override global, component, or utility class variables to customize OUDS Web just how you like. No need to redeclare each rule, just a new variable value. diff --git a/site/src/components/home/Customize.astro b/site/src/components/home/Customize.astro index 043c067d5a..63c08e2b28 100644 --- a/site/src/components/home/Customize.astro +++ b/site/src/components/home/Customize.astro @@ -10,7 +10,7 @@ import Code from '@components/shortcodes/Code.astro'

-

Customize everything with Sass

+

Customize everything with Sass

OUDS Web utilizes Sass for a modular and customizable architecture. Import only the components you need, enable global options like gradients and shadows, and write your own CSS with our variables, maps, functions, and mixins. @@ -21,7 +21,7 @@ import Code from '@components/shortcodes/Code.astro'

-

Include all of OUDS Web's Sass

+

Include all of OUDS Web's Sass

Import one stylesheet and you're off to the races with every feature of our CSS.

-

Include what you need

+

Include what you need

The easiest way to customize OUDS Web—include only the CSS you need.

-

Get started any way you want

+

Get started any way you want

Jump right into building with OUDS Web—use the CDN, install it via package manager, or download the source code.

@@ -19,7 +19,7 @@ import Code from '@components/shortcodes/Code.astro'

-

Install via package manager

+

Install via package manager

Install OUDS Web's source files via npm, yarn, Composer, or NuGet. Package-managed installs include OUDS Web common Sass and JavaScript files and OUDS Web {getConfig().display_brand} theme (Sass files). They don't include documentation or our full build @@ -38,7 +38,7 @@ import Code from '@components/shortcodes/Code.astro' package managers.

-

Include via CDN

+

Include via CDN

When you only need to include OUDS Web's compiled CSS or JS, you can use jsDelivrh2. OUDS Web heading with marker

`} /> - - - ## Display headings Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a **display heading**—a larger, slightly more opinionated heading style. From dd2d86abe72855976d4e74f6fe9ebc6554be70c0 Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Fri, 28 Aug 2026 15:58:01 +0200 Subject: [PATCH 04/52] Enhance doc --- site/src/content/docs/foundation/typography.mdx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/site/src/content/docs/foundation/typography.mdx b/site/src/content/docs/foundation/typography.mdx index af846858e8..0e56830620 100644 --- a/site/src/content/docs/foundation/typography.mdx +++ b/site/src/content/docs/foundation/typography.mdx @@ -163,8 +163,11 @@ All HTML headings, `

` through `

`, are available. Each class sets `font-s You can easily add an icon with your font reference using [our icon size utilities]([[docsref:/components/icon#icons-size]]). + - 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`. + ### Headings 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`. h2. OUDS Web heading with marker

h2. OUDS Web heading with marker

`} /> From 76c59b5ff63b6aff48417d7c91148a0657e58cc1 Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Mon, 31 Aug 2026 11:23:55 +0200 Subject: [PATCH 05/52] Add package-lock --- package-lock.json | 320 ++++++++++++++++++---------------------------- 1 file changed, 127 insertions(+), 193 deletions(-) diff --git a/package-lock.json b/package-lock.json index 910830400c..96c63c2365 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,6 @@ "": { "name": "@ouds/web-common", "version": "1.4.0", - "dev": true, "license": "MIT", "workspaces": [ "packages/*" @@ -81,6 +80,7 @@ "prettier": "^3.6.2", "prettier-plugin-astro": "^0.14.1", "rehype-autolink-headings": "^7.1.0", + "rehype-class-names": "^2.0.0", "remark": "^15.0.1", "remark-html": "^16.0.1", "rollup": "^4.46.3", @@ -201,9 +201,6 @@ "arm64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -221,9 +218,6 @@ "arm64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -241,9 +235,6 @@ "x64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -261,9 +252,6 @@ "x64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -2220,9 +2208,6 @@ "arm64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -2237,9 +2222,6 @@ "arm64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -2254,9 +2236,6 @@ "x64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -2271,9 +2250,6 @@ "x64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -3405,9 +3381,6 @@ "arm" ], "dev": true, - "libc": [ - "glibc" - ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -3425,9 +3398,6 @@ "arm64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -3445,9 +3415,6 @@ "ppc64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -3465,9 +3432,6 @@ "riscv64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -3485,9 +3449,6 @@ "s390x" ], "dev": true, - "libc": [ - "glibc" - ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -3505,9 +3466,6 @@ "x64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -3525,9 +3483,6 @@ "arm64" ], "dev": true, - "libc": [ - "musl" - ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -3545,9 +3500,6 @@ "x64" ], "dev": true, - "libc": [ - "musl" - ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -3565,9 +3517,6 @@ "arm" ], "dev": true, - "libc": [ - "glibc" - ], "license": "Apache-2.0", "optional": true, "os": [ @@ -3591,9 +3540,6 @@ "arm64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "Apache-2.0", "optional": true, "os": [ @@ -3617,9 +3563,6 @@ "ppc64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "Apache-2.0", "optional": true, "os": [ @@ -3643,9 +3586,6 @@ "riscv64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "Apache-2.0", "optional": true, "os": [ @@ -3669,9 +3609,6 @@ "s390x" ], "dev": true, - "libc": [ - "glibc" - ], "license": "Apache-2.0", "optional": true, "os": [ @@ -3695,9 +3632,6 @@ "x64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "Apache-2.0", "optional": true, "os": [ @@ -3721,9 +3655,6 @@ "arm64" ], "dev": true, - "libc": [ - "musl" - ], "license": "Apache-2.0", "optional": true, "os": [ @@ -3747,9 +3678,6 @@ "x64" ], "dev": true, - "libc": [ - "musl" - ], "license": "Apache-2.0", "optional": true, "os": [ @@ -4044,9 +3972,6 @@ "x64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -4285,9 +4210,6 @@ "arm64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -4305,9 +4227,6 @@ "arm64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -4325,9 +4244,6 @@ "ppc64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -4345,9 +4261,6 @@ "riscv64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -4365,9 +4278,6 @@ "riscv64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -4385,9 +4295,6 @@ "s390x" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -4405,9 +4312,6 @@ "x64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -4425,9 +4329,6 @@ "x64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -4674,9 +4575,6 @@ "arm64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -4691,9 +4589,6 @@ "arm64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -4708,9 +4603,6 @@ "ppc64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -4725,9 +4617,6 @@ "riscv64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -4742,9 +4631,6 @@ "riscv64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -4759,9 +4645,6 @@ "s390x" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -4776,9 +4659,6 @@ "x64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -4793,9 +4673,6 @@ "x64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -5148,9 +5025,6 @@ "arm64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -5168,9 +5042,6 @@ "arm64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -5188,9 +5059,6 @@ "ppc64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -5208,9 +5076,6 @@ "s390x" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -5228,9 +5093,6 @@ "x64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -5248,9 +5110,6 @@ "x64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -5549,9 +5408,6 @@ "arm" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -5566,9 +5422,6 @@ "arm" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -5583,9 +5436,6 @@ "arm64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -5600,9 +5450,6 @@ "arm64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -5617,9 +5464,6 @@ "loong64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -5634,9 +5478,6 @@ "loong64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -5651,9 +5492,6 @@ "ppc64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -5668,9 +5506,6 @@ "ppc64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -5685,9 +5520,6 @@ "riscv64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -5702,9 +5534,6 @@ "riscv64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -5719,9 +5548,6 @@ "s390x" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -5736,9 +5562,6 @@ "x64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -5753,9 +5576,6 @@ "x64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -7973,6 +7793,17 @@ "node": ">=10.0.0" } }, + "node_modules/bcp-47-match": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/bcp-47-match/-/bcp-47-match-2.0.3.tgz", + "integrity": "sha512-JtTezzbAibu8G0R9op9zb3vcWZd9JF6M0xOYGPn0fNCd7wOpRB1mU2mH9T8gaBGbAAyIIVgB2G7xG0GP98zMAQ==", + "dev": true, + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/bfj": { "version": "9.1.3", "resolved": "https://registry.npmjs.org/bfj/-/bfj-9.1.3.tgz", @@ -9364,6 +9195,23 @@ "url": "https://github.com/fb55/entities?sponsor=1" } }, + "node_modules/css-selector-parser": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/css-selector-parser/-/css-selector-parser-3.3.0.tgz", + "integrity": "sha512-Y2asgMGFqJKF4fq4xHDSlFYIkeVfRsm69lQC1q9kbEsH5XtnINTMrweLkjYMeaUgiXBy/uvKeO/a1JHTNnmB2g==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/mdevils" + }, + { + "type": "patreon", + "url": "https://patreon.com/mdevils" + } + ], + "license": "MIT" + }, "node_modules/css-tree": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.2.1.tgz", @@ -9836,6 +9684,20 @@ "node": ">=8" } }, + "node_modules/direction": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/direction/-/direction-2.0.1.tgz", + "integrity": "sha512-9S6m9Sukh1cZNknO1CWAr2QAWsbKLafQiyM5gZ7VgXHeuaoUwffKN4q6NC4A/Mf9iiPlOXQEKW/Mv/mh9/3YFA==", + "dev": true, + "license": "MIT", + "bin": { + "direction": "cli.js" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/doctrine": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz", @@ -12323,6 +12185,21 @@ "node": ">= 0.4" } }, + "node_modules/hast-util-classnames": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/hast-util-classnames/-/hast-util-classnames-3.0.0.tgz", + "integrity": "sha512-tI3JjoGDEBVorMAWK4jNRsfLMYmih1BUOG3VV36pH36njs1IEl7xkNrVTD2mD2yYHmQCa5R/fj61a8IAF4bRaQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/hast": "^3.0.0", + "space-separated-tokens": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/hast-util-from-html": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/hast-util-from-html/-/hast-util-from-html-2.0.3.tgz", @@ -12363,6 +12240,20 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/hast-util-has-property": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/hast-util-has-property/-/hast-util-has-property-3.0.0.tgz", + "integrity": "sha512-MNilsvEKLFpV604hwfhVStK0usFY/QmM5zX16bo7EjnAEGofr5YyI37kzopBlZJkHD4t887i+q/C8/tr5Q94cA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/hast": "^3.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/hast-util-heading-rank": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/hast-util-heading-rank/-/hast-util-heading-rank-3.0.0.tgz", @@ -12447,6 +12338,34 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/hast-util-select": { + "version": "6.0.4", + "resolved": "https://registry.npmjs.org/hast-util-select/-/hast-util-select-6.0.4.tgz", + "integrity": "sha512-RqGS1ZgI0MwxLaKLDxjprynNzINEkRHY2i8ln4DDjgv9ZhcYVIHN9rlpiYsqtFwrgpYU361SyWDQcGNIBVu3lw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/hast": "^3.0.0", + "@types/unist": "^3.0.0", + "bcp-47-match": "^2.0.0", + "comma-separated-tokens": "^2.0.0", + "css-selector-parser": "^3.0.0", + "devlop": "^1.0.0", + "direction": "^2.0.0", + "hast-util-has-property": "^3.0.0", + "hast-util-to-string": "^3.0.0", + "hast-util-whitespace": "^3.0.0", + "nth-check": "^2.0.0", + "property-information": "^7.0.0", + "space-separated-tokens": "^2.0.0", + "unist-util-visit": "^5.0.0", + "zwitch": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/hast-util-to-estree": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/hast-util-to-estree/-/hast-util-to-estree-3.1.3.tgz", @@ -12548,6 +12467,20 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/hast-util-to-string": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/hast-util-to-string/-/hast-util-to-string-3.0.1.tgz", + "integrity": "sha512-XelQVTDWvqcl3axRfI0xSeoVKzyIFPwsAGSLIsKdJKQMXDYJS4WYrBNF/8J7RdhIcFI2BOHgAifggsvsxp/3+A==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/hast": "^3.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/hast-util-to-text": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/hast-util-to-text/-/hast-util-to-text-4.0.2.tgz", @@ -14619,9 +14552,6 @@ "arm64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MPL-2.0", "optional": true, "os": [ @@ -14643,9 +14573,6 @@ "arm64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MPL-2.0", "optional": true, "os": [ @@ -14667,9 +14594,6 @@ "x64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MPL-2.0", "optional": true, "os": [ @@ -14691,9 +14615,6 @@ "x64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MPL-2.0", "optional": true, "os": [ @@ -19960,6 +19881,19 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/rehype-class-names": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/rehype-class-names/-/rehype-class-names-2.0.0.tgz", + "integrity": "sha512-jldCIiAEvXKdq8hqr5f5PzNdIDkvHC6zfKhwta9oRoMu7bn0W7qLES/JrrjBvr9rKz3nJ8x4vY1EWI+dhjHVZQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/hast": "^3.0.0", + "hast-util-classnames": "^3.0.0", + "hast-util-select": "^6.0.0", + "unified": "^11.0.4" + } + }, "node_modules/rehype-raw": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/rehype-raw/-/rehype-raw-7.0.0.tgz", From 3772a49cdb3e1642c436474b44647e020787f4f5 Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Tue, 8 Sep 2026 18:12:00 +0200 Subject: [PATCH 06/52] Remove rehype-class-names for now --- package-lock.json | 139 +++---------------------------------------- package.json | 1 - site/astro.config.ts | 4 +- 3 files changed, 10 insertions(+), 134 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0e7607e5f2..0b6c0dbf13 100644 --- a/package-lock.json +++ b/package-lock.json @@ -80,7 +80,6 @@ "prettier": "^3.6.2", "prettier-plugin-astro": "^0.14.1", "rehype-autolink-headings": "^7.1.0", - "rehype-class-names": "^2.0.0", "remark": "^15.0.1", "remark-html": "^16.0.1", "rollup": "^4.63.1", @@ -443,8 +442,10 @@ "version": "0.3.8", "resolved": "https://registry.npmjs.org/@astrojs/markdown-satteri/-/markdown-satteri-0.3.8.tgz", "integrity": "sha512-n8ItpFTCmlDsVR5+rwDmehSf+jFCYLWmZiisZNGuF7xILqYhsVeBfcha4qgS2Seq3fAc9Tm58ZVrvqFQ6RQgRQ==", - "extraneous": true, + "dev": true, "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "@astrojs/internal-helpers": "0.10.4", "@astrojs/prism": "4.0.2", @@ -456,8 +457,10 @@ "version": "0.10.4", "resolved": "https://registry.npmjs.org/@astrojs/internal-helpers/-/internal-helpers-0.10.4.tgz", "integrity": "sha512-nozZSy/mKYLqe4YrqbKtdOszedAfXYCtw3wZ0d+CAjz4GqQ4L9rl1ltIL5BlgwmYVinJg/RZ0MgGuWOdlyRZlA==", - "extraneous": true, + "dev": true, "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "@types/hast": "^3.0.4", "@types/mdast": "^4.0.4", @@ -473,7 +476,7 @@ "version": "4.3.2", "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.3.2.tgz", "integrity": "sha512-SFNOvSJ+Dgf/9An904Yx+CgSlIPCkIpao4qo51lpee25TIRejdH3rhR4EZMGoNx3/TP3O+wzWuiTFl4sqbltzA==", - "extraneous": true, + "dev": true, "funding": [ { "type": "github", @@ -485,6 +488,8 @@ } ], "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "argparse": "^2.0.1" }, @@ -7894,17 +7899,6 @@ "node": ">=10.0.0" } }, - "node_modules/bcp-47-match": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/bcp-47-match/-/bcp-47-match-2.0.3.tgz", - "integrity": "sha512-JtTezzbAibu8G0R9op9zb3vcWZd9JF6M0xOYGPn0fNCd7wOpRB1mU2mH9T8gaBGbAAyIIVgB2G7xG0GP98zMAQ==", - "dev": true, - "license": "MIT", - "funding": { - "type": "github", - "url": "https://github.com/sponsors/wooorm" - } - }, "node_modules/bfj": { "version": "9.1.3", "resolved": "https://registry.npmjs.org/bfj/-/bfj-9.1.3.tgz", @@ -9296,23 +9290,6 @@ "url": "https://github.com/fb55/entities?sponsor=1" } }, - "node_modules/css-selector-parser": { - "version": "3.3.0", - "resolved": "https://registry.npmjs.org/css-selector-parser/-/css-selector-parser-3.3.0.tgz", - "integrity": "sha512-Y2asgMGFqJKF4fq4xHDSlFYIkeVfRsm69lQC1q9kbEsH5XtnINTMrweLkjYMeaUgiXBy/uvKeO/a1JHTNnmB2g==", - "dev": true, - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/mdevils" - }, - { - "type": "patreon", - "url": "https://patreon.com/mdevils" - } - ], - "license": "MIT" - }, "node_modules/css-tree": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.2.1.tgz", @@ -9785,20 +9762,6 @@ "node": ">=8" } }, - "node_modules/direction": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/direction/-/direction-2.0.1.tgz", - "integrity": "sha512-9S6m9Sukh1cZNknO1CWAr2QAWsbKLafQiyM5gZ7VgXHeuaoUwffKN4q6NC4A/Mf9iiPlOXQEKW/Mv/mh9/3YFA==", - "dev": true, - "license": "MIT", - "bin": { - "direction": "cli.js" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/wooorm" - } - }, "node_modules/doctrine": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz", @@ -12270,21 +12233,6 @@ "node": ">= 0.4" } }, - "node_modules/hast-util-classnames": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/hast-util-classnames/-/hast-util-classnames-3.0.0.tgz", - "integrity": "sha512-tI3JjoGDEBVorMAWK4jNRsfLMYmih1BUOG3VV36pH36njs1IEl7xkNrVTD2mD2yYHmQCa5R/fj61a8IAF4bRaQ==", - "dev": true, - "license": "MIT", - "dependencies": { - "@types/hast": "^3.0.0", - "space-separated-tokens": "^2.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/unified" - } - }, "node_modules/hast-util-from-html": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/hast-util-from-html/-/hast-util-from-html-2.0.3.tgz", @@ -12325,20 +12273,6 @@ "url": "https://opencollective.com/unified" } }, - "node_modules/hast-util-has-property": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/hast-util-has-property/-/hast-util-has-property-3.0.0.tgz", - "integrity": "sha512-MNilsvEKLFpV604hwfhVStK0usFY/QmM5zX16bo7EjnAEGofr5YyI37kzopBlZJkHD4t887i+q/C8/tr5Q94cA==", - "dev": true, - "license": "MIT", - "dependencies": { - "@types/hast": "^3.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/unified" - } - }, "node_modules/hast-util-heading-rank": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/hast-util-heading-rank/-/hast-util-heading-rank-3.0.0.tgz", @@ -12423,34 +12357,6 @@ "url": "https://opencollective.com/unified" } }, - "node_modules/hast-util-select": { - "version": "6.0.4", - "resolved": "https://registry.npmjs.org/hast-util-select/-/hast-util-select-6.0.4.tgz", - "integrity": "sha512-RqGS1ZgI0MwxLaKLDxjprynNzINEkRHY2i8ln4DDjgv9ZhcYVIHN9rlpiYsqtFwrgpYU361SyWDQcGNIBVu3lw==", - "dev": true, - "license": "MIT", - "dependencies": { - "@types/hast": "^3.0.0", - "@types/unist": "^3.0.0", - "bcp-47-match": "^2.0.0", - "comma-separated-tokens": "^2.0.0", - "css-selector-parser": "^3.0.0", - "devlop": "^1.0.0", - "direction": "^2.0.0", - "hast-util-has-property": "^3.0.0", - "hast-util-to-string": "^3.0.0", - "hast-util-whitespace": "^3.0.0", - "nth-check": "^2.0.0", - "property-information": "^7.0.0", - "space-separated-tokens": "^2.0.0", - "unist-util-visit": "^5.0.0", - "zwitch": "^2.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/unified" - } - }, "node_modules/hast-util-to-estree": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/hast-util-to-estree/-/hast-util-to-estree-3.1.3.tgz", @@ -12552,20 +12458,6 @@ "url": "https://opencollective.com/unified" } }, - "node_modules/hast-util-to-string": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/hast-util-to-string/-/hast-util-to-string-3.0.1.tgz", - "integrity": "sha512-XelQVTDWvqcl3axRfI0xSeoVKzyIFPwsAGSLIsKdJKQMXDYJS4WYrBNF/8J7RdhIcFI2BOHgAifggsvsxp/3+A==", - "dev": true, - "license": "MIT", - "dependencies": { - "@types/hast": "^3.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/unified" - } - }, "node_modules/hast-util-to-text": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/hast-util-to-text/-/hast-util-to-text-4.0.2.tgz", @@ -19936,19 +19828,6 @@ "url": "https://opencollective.com/unified" } }, - "node_modules/rehype-class-names": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/rehype-class-names/-/rehype-class-names-2.0.0.tgz", - "integrity": "sha512-jldCIiAEvXKdq8hqr5f5PzNdIDkvHC6zfKhwta9oRoMu7bn0W7qLES/JrrjBvr9rKz3nJ8x4vY1EWI+dhjHVZQ==", - "dev": true, - "license": "MIT", - "dependencies": { - "@types/hast": "^3.0.0", - "hast-util-classnames": "^3.0.0", - "hast-util-select": "^6.0.0", - "unified": "^11.0.4" - } - }, "node_modules/rehype-raw": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/rehype-raw/-/rehype-raw-7.0.0.tgz", diff --git a/package.json b/package.json index 64c1d27b50..da963bafca 100644 --- a/package.json +++ b/package.json @@ -162,7 +162,6 @@ "prettier": "^3.6.2", "prettier-plugin-astro": "^0.14.1", "rehype-autolink-headings": "^7.1.0", - "rehype-class-names": "^2.0.0", "remark": "^15.0.1", "remark-html": "^16.0.1", "rollup": "^4.63.1", diff --git a/site/astro.config.ts b/site/astro.config.ts index 23da66661a..9d77d945c5 100644 --- a/site/astro.config.ts +++ b/site/astro.config.ts @@ -12,7 +12,6 @@ import { rehypeBsTable, rehypeCustomHeaderSlug, rehypeHeaderLinksOrder } from '. import { remarkBsComp, remarkBsConfig, remarkBsDocsref, remarkBsVersionLink } from './src/libs/remark' import rehypeAutolinkHeadings from 'rehype-autolink-headings' import { isHeading } from './src/libs/utils' -import rehypeClassNames from "rehype-class-names" const isDev = process.env.NODE_ENV === 'development' @@ -51,8 +50,7 @@ export default defineConfig({ } ], rehypeHeaderLinksOrder, - rehypeBsTable, - [rehypeClassNames, {h2: 'marker'}] + rehypeBsTable ], remarkPlugins: [remarkBsConfig, remarkBsDocsref, remarkBsComp, remarkBsVersionLink] }), From c334f2e002cfa7b797769323f5d3bc4dfe82c4d5 Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Tue, 8 Sep 2026 18:12:33 +0200 Subject: [PATCH 07/52] Change comment (no OUDS mod) --- scss/_reboot.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/_reboot.scss b/scss/_reboot.scss index 6e9ab2ab93..c28b8e4b10 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -135,7 +135,7 @@ h1 { h2 { @extend %heading; @include get-font-size("heading-large"); // OUDS mod: instead of `font-size: $h2-font-size` - position: relative; // OUDS mod: for marker pseudo element + position: relative; // Needed for marker pseudo element } h3 { From cfc8399f78e801e790b95449c156e45abd4e147b Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Wed, 9 Sep 2026 11:58:05 +0200 Subject: [PATCH 08/52] Use svg for marker and anticipate tokens 2.7 --- .../scss/tokens/_component.scss | 1 + .../scss/tokens/_composite.scss | 6 ++++++ packages/orange/scss/tokens/_component.scss | 1 + packages/orange/scss/tokens/_composite.scss | 6 ++++++ packages/sosh/scss/tokens/_component.scss | 1 + packages/sosh/scss/tokens/_composite.scss | 6 ++++++ scss/_reboot.scss | 1 - scss/_type.scss | 21 +++++++++---------- .../__snapshots__/ouds-web-bootstrap.css | 14 ++++++------- .../snapshot-tests/__snapshots__/ouds-web.css | 14 ++++++------- 10 files changed, 43 insertions(+), 28 deletions(-) diff --git a/packages/orange-compact/scss/tokens/_component.scss b/packages/orange-compact/scss/tokens/_component.scss index cb445ddb6d..061e3a42ac 100644 --- a/packages/orange-compact/scss/tokens/_component.scss +++ b/packages/orange-compact/scss/tokens/_component.scss @@ -587,4 +587,5 @@ $ouds-text-input-space-row-gap-label-input: $ouds-space-row-gap-none !default; $ouds-typography-heading-large-marker: true !default; $ouds-typography-space-padding-block-bottom-heading-large-marker: $ouds-space-padding-block-4xsmall !default; $ouds-typography-space-padding-block-top-heading-large-marker: $ouds-space-padding-block-3xsmall !default; +$ouds-typography-color-content-marker: $ouds-color-content-brand-primary !default; // scss-docs-end ouds-component-typography diff --git a/packages/orange-compact/scss/tokens/_composite.scss b/packages/orange-compact/scss/tokens/_composite.scss index 25384e1441..004aa9113f 100644 --- a/packages/orange-compact/scss/tokens/_composite.scss +++ b/packages/orange-compact/scss/tokens/_composite.scss @@ -63,6 +63,12 @@ $ouds-font-family-monospace-stack: Menlo, monospace !default; // scss-docs-end ouds-composite-font-monospace +// scss-docs-start ouds-composite-typography +// NB: SVG should contain paddings and shouldn't have any `fill` attribute +$ouds-heading-large-marker-img: url("data:image/svg+xml,") !default; +$ouds-heading-large-marker-width: 30px !default; +$ouds-heading-large-marker-height: 12px !default; +// scss-docs-end ouds-composite-typography // stylelint-enable value-keyword-case, scss/dollar-variable-colon-space-after //// ****** ICONS as data URIs ****** diff --git a/packages/orange/scss/tokens/_component.scss b/packages/orange/scss/tokens/_component.scss index 2bd2e979b1..46140a0392 100644 --- a/packages/orange/scss/tokens/_component.scss +++ b/packages/orange/scss/tokens/_component.scss @@ -587,4 +587,5 @@ $ouds-text-input-space-row-gap-label-input: $ouds-space-row-gap-none !default; $ouds-typography-heading-large-marker: true !default; $ouds-typography-space-padding-block-bottom-heading-large-marker: $ouds-space-padding-block-4xsmall !default; $ouds-typography-space-padding-block-top-heading-large-marker: $ouds-space-padding-block-3xsmall !default; +$ouds-typography-color-content-marker: $ouds-color-content-brand-primary !default; // scss-docs-end ouds-component-typography diff --git a/packages/orange/scss/tokens/_composite.scss b/packages/orange/scss/tokens/_composite.scss index 0852173807..0b19f61ed6 100644 --- a/packages/orange/scss/tokens/_composite.scss +++ b/packages/orange/scss/tokens/_composite.scss @@ -63,6 +63,12 @@ $ouds-font-family-monospace-stack: Menlo, monospace !default; // scss-docs-end ouds-composite-font-monospace +// scss-docs-start ouds-composite-typography +// NB: SVG should contain paddings and shouldn't have any `fill` attribute +$ouds-heading-large-marker-img: url("data:image/svg+xml,") !default; +$ouds-heading-large-marker-width: 30px !default; +$ouds-heading-large-marker-height: 12px !default; +// scss-docs-end ouds-composite-typography // stylelint-enable value-keyword-case, scss/dollar-variable-colon-space-after //// ****** ICONS as data URIs ****** diff --git a/packages/sosh/scss/tokens/_component.scss b/packages/sosh/scss/tokens/_component.scss index 782a8afe6c..e10695b5f2 100644 --- a/packages/sosh/scss/tokens/_component.scss +++ b/packages/sosh/scss/tokens/_component.scss @@ -587,4 +587,5 @@ $ouds-text-input-space-row-gap-label-input: $ouds-space-row-gap-none !default; $ouds-typography-heading-large-marker: false !default; $ouds-typography-space-padding-block-bottom-heading-large-marker: $ouds-space-padding-block-none !default; $ouds-typography-space-padding-block-top-heading-large-marker: $ouds-space-padding-block-none !default; +$ouds-typography-color-content-marker: null !default; // scss-docs-end ouds-component-typography diff --git a/packages/sosh/scss/tokens/_composite.scss b/packages/sosh/scss/tokens/_composite.scss index 27cfd2920f..e03035a972 100644 --- a/packages/sosh/scss/tokens/_composite.scss +++ b/packages/sosh/scss/tokens/_composite.scss @@ -54,6 +54,12 @@ $ouds-font-family-monospace-stack: Menlo, monospace !default; // scss-docs-end ouds-composite-font-monospace +// scss-docs-start ouds-composite-typography +// NB: SVG should contain paddings and shouldn't have any `fill` attribute +$ouds-heading-large-marker-img: null !default; +$ouds-heading-large-marker-width: 0 !default; +$ouds-heading-large-marker-height: 0 !default; +// scss-docs-end ouds-composite-typography // stylelint-enable value-keyword-case, scss/dollar-variable-colon-space-after //// ****** ICONS as data URIs ****** diff --git a/scss/_reboot.scss b/scss/_reboot.scss index c28b8e4b10..93d64c807a 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -135,7 +135,6 @@ h1 { h2 { @extend %heading; @include get-font-size("heading-large"); // OUDS mod: instead of `font-size: $h2-font-size` - position: relative; // Needed for marker pseudo element } h3 { diff --git a/scss/_type.scss b/scss/_type.scss index 0d9b3631fa..4653234cbb 100644 --- a/scss/_type.scss +++ b/scss/_type.scss @@ -25,17 +25,16 @@ @extend h6; } -// TODO add tokens 2.7 for size, positioning, spacings and color -.h2.marker::after, -h2.marker::after { // stylelint-disable-line selector-no-qualifying-type - position: absolute; - bottom: -12px; - left: 0; - width: 1.875rem; - height: .375rem; - margin-block: .375rem; - content: ""; - background: var(--#{$prefix}color-content-brand-primary); +@if $ouds-heading-large-marker-img { + .h2.marker::after, + h2.marker::after { // stylelint-disable-line selector-no-qualifying-type + display: block; + width: $ouds-heading-large-marker-width; + height: $ouds-heading-large-marker-height; + content: ""; + background-color: $ouds-typography-color-content-marker; + mask-image: #{escape-svg($ouds-heading-large-marker-img)}; + } } .lead { diff --git a/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css b/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css index 3fb73db96e..bdbf6868f2 100644 --- a/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css +++ b/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css @@ -1114,7 +1114,6 @@ h2, .h2 { line-height: var(--bs-font-line-height-heading-large); /* rtl:remove */ letter-spacing: var(--bs-font-letter-spacing-heading-large); - position: relative; } h3, .h3 { @@ -1576,14 +1575,13 @@ dialog, .h2.marker::after, h2.marker::after { - position: absolute; - bottom: -12px; - left: 0; - width: 1.875rem; - height: 0.375rem; - margin-block: 0.375rem; + display: block; + width: 30px; + height: 12px; content: ""; - background: var(--bs-color-content-brand-primary); + background-color: var(--bs-color-content-brand-primary); + -webkit-mask-image: url("data:image/svg+xml,%3csvg width='30' height='12' viewBox='0 0 30 12' xmlns='http://www.w3.org/2000/svg'%3e%3crect y='4' width='30' height='6'/%3e%3c/svg%3e"); + mask-image: url("data:image/svg+xml,%3csvg width='30' height='12' viewBox='0 0 30 12' xmlns='http://www.w3.org/2000/svg'%3e%3crect y='4' width='30' height='6'/%3e%3c/svg%3e"); } .lead { diff --git a/scss/tests/snapshot-tests/__snapshots__/ouds-web.css b/scss/tests/snapshot-tests/__snapshots__/ouds-web.css index b70366ed88..c30dac4441 100644 --- a/scss/tests/snapshot-tests/__snapshots__/ouds-web.css +++ b/scss/tests/snapshot-tests/__snapshots__/ouds-web.css @@ -949,7 +949,6 @@ h2, .h2 { line-height: var(--bs-font-line-height-heading-large); /* rtl:remove */ letter-spacing: var(--bs-font-letter-spacing-heading-large); - position: relative; } h3, .h3 { @@ -1411,14 +1410,13 @@ dialog, .h2.marker::after, h2.marker::after { - position: absolute; - bottom: -12px; - left: 0; - width: 1.875rem; - height: 0.375rem; - margin-block: 0.375rem; + display: block; + width: 30px; + height: 12px; content: ""; - background: var(--bs-color-content-brand-primary); + background-color: var(--bs-color-content-brand-primary); + -webkit-mask-image: url("data:image/svg+xml,%3csvg width='30' height='12' viewBox='0 0 30 12' xmlns='http://www.w3.org/2000/svg'%3e%3crect y='4' width='30' height='6'/%3e%3c/svg%3e"); + mask-image: url("data:image/svg+xml,%3csvg width='30' height='12' viewBox='0 0 30 12' xmlns='http://www.w3.org/2000/svg'%3e%3crect y='4' width='30' height='6'/%3e%3c/svg%3e"); } .lead { From f4510d749353a534d0b071020324cbadcafb425d Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Thu, 10 Sep 2026 12:16:47 +0200 Subject: [PATCH 09/52] Use marker for orange/orange-compact and text-brand-primary for sosh --- site/src/components/home/CSSVariables.astro | 3 ++- site/src/components/home/Customize.astro | 2 +- site/src/components/home/GetStarted.astro | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/site/src/components/home/CSSVariables.astro b/site/src/components/home/CSSVariables.astro index ecdc660906..f3a2b54fe1 100644 --- a/site/src/components/home/CSSVariables.astro +++ b/site/src/components/home/CSSVariables.astro @@ -1,6 +1,7 @@ --- import { getVersionedDocsPath } from '@libs/path' import Code from '@components/shortcodes/Code.astro' +import {getConfig} from "@libs/config.ts"; ---
@@ -9,7 +10,7 @@ import Code from '@components/shortcodes/Code.astro'
-

Build and extend in real-time with CSS variables

+

Build and extend in real-time with CSS variables

OUDS Web is evolving with each release to better utilize CSS variables for global theme styles, individual components, and even utilities. We provide dozens of variables for colors, font styles, and more at a

-

Customize everything with Sass

+

Customize everything with Sass

OUDS Web utilizes Sass for a modular and customizable architecture. Import only the components you need, enable global options like gradients and shadows, and write your own CSS with our variables, maps, functions, and mixins. diff --git a/site/src/components/home/GetStarted.astro b/site/src/components/home/GetStarted.astro index 548fa55539..8a93b09cb6 100644 --- a/site/src/components/home/GetStarted.astro +++ b/site/src/components/home/GetStarted.astro @@ -10,7 +10,7 @@ import Code from '@components/shortcodes/Code.astro'

-

Get started any way you want

+

Get started any way you want

Jump right into building with OUDS Web—install it via your favorite package manager, or equip your AI coding agent with ready-to-use Skills.

From e664056c6f8986a52919f23a7209535298fe0318 Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Fri, 11 Sep 2026 17:05:59 +0200 Subject: [PATCH 10/52] add .fs-hl.marker --- scss/_type.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/scss/_type.scss b/scss/_type.scss index 4653234cbb..dbc47ae19e 100644 --- a/scss/_type.scss +++ b/scss/_type.scss @@ -27,7 +27,8 @@ @if $ouds-heading-large-marker-img { .h2.marker::after, - h2.marker::after { // stylelint-disable-line selector-no-qualifying-type + h2.marker::after, // stylelint-disable-line selector-no-qualifying-type + .fs-hl.marker::after { display: block; width: $ouds-heading-large-marker-width; height: $ouds-heading-large-marker-height; From 5b10cfa15c2d43154cd173682994b3c54650cd36 Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Mon, 14 Sep 2026 10:45:28 +0200 Subject: [PATCH 11/52] - update Typo version - use both token $ouds-typography-heading-large-marker and presence of an asset to display marker --- scss/_type.scss | 2 +- site/data/_components-versions.yml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/scss/_type.scss b/scss/_type.scss index dbc47ae19e..2411e4445a 100644 --- a/scss/_type.scss +++ b/scss/_type.scss @@ -25,7 +25,7 @@ @extend h6; } -@if $ouds-heading-large-marker-img { +@if ($ouds-typography-heading-large-marker and $ouds-heading-large-marker-img) { .h2.marker::after, h2.marker::after, // stylelint-disable-line selector-no-qualifying-type .fs-hl.marker::after { diff --git a/site/data/_components-versions.yml b/site/data/_components-versions.yml index e035725e1d..83a8a33be8 100644 --- a/site/data/_components-versions.yml +++ b/site/data/_components-versions.yml @@ -95,4 +95,4 @@ - name: 'toolbar-top' value: '1.0.0' - name: 'typography' - value: '1.0.0' + value: '1.1.0' From 9f1059c95d0ea682014c386b47b1032e3b5324e8 Mon Sep 17 00:00:00 2001 From: boosted-bot Date: Mon, 14 Sep 2026 13:49:22 +0200 Subject: [PATCH 12/52] chore: update tokens --- .../_component-colors-custom-props.scss | 28 ++- .../scss/tokens/_component.scss | 188 ++++++++++++++++-- packages/orange-compact/scss/tokens/_raw.scss | 16 +- .../tokens/_semantic-colors-custom-props.scss | 4 +- .../orange-compact/scss/tokens/_semantic.scss | 27 ++- .../_component-colors-custom-props.scss | 28 ++- packages/orange/scss/tokens/_component.scss | 188 ++++++++++++++++-- packages/orange/scss/tokens/_raw.scss | 16 +- .../tokens/_semantic-colors-custom-props.scss | 4 +- packages/orange/scss/tokens/_semantic.scss | 27 ++- .../_component-colors-custom-props.scss | 20 +- packages/sosh/scss/tokens/_component.scss | 188 ++++++++++++++++-- packages/sosh/scss/tokens/_raw.scss | 93 +-------- .../tokens/_semantic-colors-custom-props.scss | 4 +- packages/sosh/scss/tokens/_semantic.scss | 21 +- site/data/_components-versions.yml | 62 ++++-- 16 files changed, 666 insertions(+), 248 deletions(-) diff --git a/packages/orange-compact/scss/tokens/_component-colors-custom-props.scss b/packages/orange-compact/scss/tokens/_component-colors-custom-props.scss index 50117f13e9..dde7b34c00 100644 --- a/packages/orange-compact/scss/tokens/_component-colors-custom-props.scss +++ b/packages/orange-compact/scss/tokens/_component-colors-custom-props.scss @@ -1,11 +1,14 @@ // Components custom properties applications -// OUDS Core tokens version 1.10.0 +// OUDS Core tokens version 1.11.0 // Orange Compact Core tokens version 1.2.0 -// Orange Compact System tokens version 2.6.0 +// Orange Compact System tokens version 2.7.0 // scss-docs-start ouds-all-component-css-color // scss-docs-start ouds-component-css-color @include color-mode(light, true) { + --#{$prefix}visual-assets-icon-color-content-status-warning-external-shape: #{$core-ouds-color-functional-sun-500}; + --#{$prefix}visual-assets-icon-color-content-status-warning-internal-shape: #{$core-ouds-color-functional-sun-750}; + --#{$prefix}visual-assets-icon-color-content-status-warning-inverse-external-shape: #{$core-ouds-color-functional-sun-300}; --#{$prefix}link-mono-color-content-enabled: #{$core-ouds-color-functional-black}; --#{$prefix}link-mono-color-content-hover: #{$core-ouds-color-functional-black}; --#{$prefix}link-mono-color-content-pressed: #{$core-ouds-color-opacity-black-520}; @@ -53,12 +56,14 @@ --#{$prefix}switch-color-track-selected-interaction: #{$core-ouds-color-functional-malachite-750}; --#{$prefix}switch-color-track-unselected: #{$core-ouds-color-opacity-black-440}; --#{$prefix}switch-color-track-unselected-interaction: #{$core-ouds-color-opacity-black-520}; + --#{$prefix}categorical-tag-color-bg-category-1: #{$core-orange-color-decorative-emerald-500}; + --#{$prefix}categorical-tag-color-bg-category-2: #{$core-orange-color-decorative-sky-400}; + --#{$prefix}categorical-tag-color-bg-category-3: #{$core-orange-color-decorative-amber-500}; + --#{$prefix}categorical-tag-color-bg-category-4: #{$core-orange-color-decorative-amethyst-400}; --#{$prefix}progress-indicator-color-content-track: #{$core-ouds-color-functional-gray-light-400}; --#{$prefix}progress-indicator-mono-color-content-track: #{$core-ouds-color-functional-gray-light-400}; --#{$prefix}progress-indicator-mono-color-content-indicator: #{$core-ouds-color-functional-black}; - --#{$prefix}icon-color-content-status-warning-external-shape: #{$core-ouds-color-functional-sun-500}; - --#{$prefix}icon-color-content-status-warning-internal-shape: #{$core-ouds-color-functional-sun-750}; - --#{$prefix}icon-color-content-status-warning-inverse-external-shape: #{$core-ouds-color-functional-sun-300}; + --#{$prefix}visual-assets-icon-color-content-status-warning-inverse-internal-shape: #{$ouds-color-opacity-transparent-dark}; --#{$prefix}link-color-chevron-hover: #{$ouds-color-content-brand-primary-light}; // deprecated --#{$prefix}link-color-chevron-pressed: #{$ouds-color-content-brand-primary-light}; // deprecated --#{$prefix}link-color-chevron-focus: #{$ouds-color-content-brand-primary-light}; // deprecated @@ -67,11 +72,13 @@ --#{$prefix}list-item-color-bg-loading: #{$ouds-color-action-support-loading-light}; // deprecated --#{$prefix}list-item-color-bg-focus: #{$ouds-color-action-support-focus-light}; // deprecated --#{$prefix}list-item-color-content-loader: #{$ouds-color-content-default-light}; // deprecated - --#{$prefix}icon-color-content-status-warning-inverse-internal-shape: #{$ouds-color-opacity-transparent-dark}; } // scss-docs-end ouds-component-css-color @include color-mode(dark, true) { + --#{$prefix}visual-assets-icon-color-content-status-warning-external-shape: #{$core-ouds-color-functional-sun-300}; + --#{$prefix}visual-assets-icon-color-content-status-warning-internal-shape: #{$ouds-color-opacity-transparent-dark}; + --#{$prefix}visual-assets-icon-color-content-status-warning-inverse-external-shape: #{$core-ouds-color-functional-sun-500}; --#{$prefix}link-mono-color-content-enabled: #{$core-ouds-color-functional-white}; --#{$prefix}link-mono-color-content-hover: #{$core-ouds-color-functional-white}; --#{$prefix}link-mono-color-content-pressed: #{$core-ouds-color-opacity-white-800}; @@ -119,12 +126,14 @@ --#{$prefix}switch-color-track-selected-interaction: #{$core-ouds-color-functional-malachite-300}; --#{$prefix}switch-color-track-unselected: #{$core-ouds-color-opacity-white-640}; --#{$prefix}switch-color-track-unselected-interaction: #{$core-ouds-color-opacity-white-800}; + --#{$prefix}categorical-tag-color-bg-category-1: #{$core-orange-color-decorative-emerald-400}; + --#{$prefix}categorical-tag-color-bg-category-2: #{$core-orange-color-decorative-sky-300}; + --#{$prefix}categorical-tag-color-bg-category-3: #{$core-orange-color-decorative-amber-300}; + --#{$prefix}categorical-tag-color-bg-category-4: #{$core-orange-color-decorative-amethyst-300}; --#{$prefix}progress-indicator-color-content-track: #{$core-ouds-color-functional-gray-dark-480}; --#{$prefix}progress-indicator-mono-color-content-track: #{$core-ouds-color-functional-gray-dark-480}; --#{$prefix}progress-indicator-mono-color-content-indicator: #{$core-ouds-color-functional-white}; - --#{$prefix}icon-color-content-status-warning-external-shape: #{$core-ouds-color-functional-sun-300}; - --#{$prefix}icon-color-content-status-warning-internal-shape: #{$ouds-color-opacity-transparent-dark}; - --#{$prefix}icon-color-content-status-warning-inverse-external-shape: #{$core-ouds-color-functional-sun-500}; + --#{$prefix}visual-assets-icon-color-content-status-warning-inverse-internal-shape: #{$core-ouds-color-functional-sun-750}; --#{$prefix}link-color-chevron-hover: #{$ouds-color-content-brand-primary-dark}; // deprecated --#{$prefix}link-color-chevron-pressed: #{$ouds-color-content-brand-primary-dark}; // deprecated --#{$prefix}link-color-chevron-focus: #{$ouds-color-content-brand-primary-dark}; // deprecated @@ -133,6 +142,5 @@ --#{$prefix}list-item-color-bg-loading: #{$ouds-color-action-support-loading-dark}; // deprecated --#{$prefix}list-item-color-bg-focus: #{$ouds-color-action-support-focus-dark}; // deprecated --#{$prefix}list-item-color-content-loader: #{$ouds-color-content-default-dark}; // deprecated - --#{$prefix}icon-color-content-status-warning-inverse-internal-shape: #{$core-ouds-color-functional-sun-750}; } // scss-docs-end ouds-all-component-css-color diff --git a/packages/orange-compact/scss/tokens/_component.scss b/packages/orange-compact/scss/tokens/_component.scss index cb445ddb6d..9d4129886e 100644 --- a/packages/orange-compact/scss/tokens/_component.scss +++ b/packages/orange-compact/scss/tokens/_component.scss @@ -1,8 +1,8 @@ // Component application // Depends on semantic applications -// OUDS Core tokens version 1.10.0 +// OUDS Core tokens version 1.11.0 // Orange Compact Core tokens version 1.2.0 -// Orange Compact System tokens version 2.6.0 +// Orange Compact System tokens version 2.7.0 // Accordion @@ -22,9 +22,9 @@ $ouds-accordion-faq-space-column-gap-tablet: $ouds-space-column-gap-medium !defa $ouds-accordion-faq-space-padding-block-bottom-expand-container-desktop: $ouds-space-padding-block-4xlarge !default; $ouds-accordion-faq-space-padding-block-bottom-expand-container-mobile: $ouds-space-padding-block-3xlarge !default; $ouds-accordion-faq-space-padding-block-bottom-expand-container-tablet: $ouds-space-padding-block-3xlarge !default; -$ouds-accordion-faq-space-padding-block-bottom-slot-list-item-container-desktop: $ouds-space-padding-block-xlarge !default; -$ouds-accordion-faq-space-padding-block-bottom-slot-list-item-container-mobile: $ouds-space-padding-block-large !default; -$ouds-accordion-faq-space-padding-block-bottom-slot-list-item-container-tablet: $ouds-space-padding-block-large !default; +$ouds-accordion-faq-space-padding-block-bottom-slot-container-desktop: $ouds-space-padding-block-xlarge !default; +$ouds-accordion-faq-space-padding-block-bottom-slot-container-mobile: $ouds-space-padding-block-large !default; +$ouds-accordion-faq-space-padding-block-bottom-slot-container-tablet: $ouds-space-padding-block-large !default; $ouds-accordion-faq-space-padding-block-desktop: $ouds-space-padding-block-large !default; $ouds-accordion-faq-space-padding-block-mobile: $ouds-space-padding-block-medium !default; $ouds-accordion-faq-space-padding-block-tablet: $ouds-space-padding-block-medium !default; @@ -36,20 +36,23 @@ $ouds-accordion-space-padding-block-top-expand-container: $ouds-space-padding-bl // Alert // scss-docs-start ouds-component-alert +$ouds-alert-banner-mode-control-action-on-status-accent: Always in light mode !default; $ouds-alert-border-radius-default: $ouds-border-radius-default !default; $ouds-alert-border-radius-rounded: $ouds-border-radius-large !default; -$ouds-alert-border-width: $ouds-border-width-none !default; -$ouds-alert-size-icon: $ouds-size-icon-with-label-large-size-small !default; -$ouds-alert-size-min-height-bottom-action-placement: $core-ouds-dimension-1050 !default; +$ouds-alert-message-border-width: $ouds-border-width-none !default; +$ouds-alert-message-space-row-gap-bullet: $ouds-space-row-gap-2xsmall !default; +$ouds-alert-size-asset: $ouds-size-icon-with-label-large-size-small !default; +$ouds-alert-size-min-height-bottom-action: $core-ouds-dimension-850 !default; $ouds-alert-size-min-height: $ouds-size-min-interactive-area-default !default; $ouds-alert-size-min-width: $core-ouds-dimension-1800 !default; $ouds-alert-space-column-gap-action: $ouds-space-column-gap-small !default; $ouds-alert-space-column-gap: $ouds-space-column-gap-medium !default; +$ouds-alert-space-inset-progress-indicator: $ouds-space-inset-4xsmall !default; +$ouds-alert-space-padding-block-bottom-content: $ouds-space-padding-block-3xsmall !default; $ouds-alert-space-padding-block: $ouds-space-padding-block-medium !default; $ouds-alert-space-padding-inline: $ouds-space-padding-inline-large !default; -$ouds-alert-space-row-gap-action: $ouds-space-row-gap-2xsmall !default; -$ouds-alert-space-row-gap-bullet: $ouds-space-row-gap-2xsmall !default; -$ouds-alert-space-row-gap: $ouds-space-row-gap-small !default; +$ouds-alert-space-row-gap-action: $ouds-space-row-gap-2xsmall !default; // deprecated +$ouds-alert-space-row-gap: $ouds-space-row-gap-2xsmall !default; // scss-docs-end ouds-component-alert // Badge @@ -197,6 +200,7 @@ $ouds-button-size-icon-only-small: $ouds-size-icon-with-label-large-size-xsmall $ouds-button-size-icon-small: $ouds-size-icon-with-label-medium-size-small !default; $ouds-button-size-max-size-icon-only-default: $ouds-size-min-interactive-area-default !default; $ouds-button-size-max-size-icon-only-small: $ouds-size-min-interactive-area-small !default; +$ouds-button-size-max-width: $core-ouds-dimension-4000 !default; $ouds-button-size-min-height-default: $ouds-size-min-interactive-area-default !default; $ouds-button-size-min-height-small: $ouds-size-min-interactive-area-small !default; $ouds-button-size-min-width-default: $ouds-size-min-interactive-area-default !default; @@ -229,6 +233,17 @@ $ouds-button-space-padding-inline-start-icon-end-default: $ouds-space-padding-in $ouds-button-space-padding-inline-start-icon-end-small: $ouds-space-padding-inline-2xlarge !default; // scss-docs-end ouds-component-button +// Categorical + +// scss-docs-start ouds-component-categorical +$ouds-categorical-tag-color-bg-category-1: var(--#{$prefix}categorical-tag-color-bg-category-1) !default; +$ouds-categorical-tag-color-bg-category-2: var(--#{$prefix}categorical-tag-color-bg-category-2) !default; +$ouds-categorical-tag-color-bg-category-3: var(--#{$prefix}categorical-tag-color-bg-category-3) !default; +$ouds-categorical-tag-color-bg-category-4: var(--#{$prefix}categorical-tag-color-bg-category-4) !default; +$ouds-categorical-tag-color-bg-category-5: $core-orange-color-decorative-shocking-pink-200 !default; +$ouds-categorical-tag-color-content: $core-ouds-color-functional-black !default; +// scss-docs-end ouds-component-categorical + // Checkbox // scss-docs-start ouds-component-checkbox @@ -307,6 +322,14 @@ $ouds-chip-space-padding-inline-icon: $ouds-space-padding-inline-small !default; $ouds-divider-border-width: $ouds-border-width-thin !default; // scss-docs-end ouds-component-divider +// Fullscreen + +// scss-docs-start ouds-component-fullscreen +$ouds-fullscreen-dialog-space-inset-close-button-desktop: $ouds-space-inset-3xlarge !default; +$ouds-fullscreen-dialog-space-inset-close-button-mobile: $ouds-space-inset-large !default; +$ouds-fullscreen-dialog-space-inset-close-button-tablet: $ouds-space-inset-2xlarge !default; +// scss-docs-end ouds-component-fullscreen + // Input // scss-docs-start ouds-component-input @@ -399,7 +422,7 @@ $ouds-list-item-size-asset-xlarge: $ouds-dimension-3xlarge !default; $ouds-list-item-size-control-indicator: $ouds-size-icon-with-label-large-size-xsmall !default; $ouds-list-item-size-current-indicator-width: $core-ouds-dimension-50 !default; $ouds-list-item-size-error-icon: $ouds-size-icon-with-label-large-size-small !default; // deprecated -$ouds-list-item-size-flag-height: $ouds-size-icon-with-label-large-size-xsmall !default; +$ouds-list-item-size-flag-height: $ouds-size-icon-with-label-large-size-xsmall !default; // deprecated $ouds-list-item-size-icon: $ouds-size-icon-with-label-large-size-medium !default; // deprecated $ouds-list-item-size-loader: $ouds-size-icon-with-label-large-size-small !default; // deprecated $ouds-list-item-size-max-height-assets-container: $core-ouds-dimension-1000 !default; // deprecated @@ -423,6 +446,93 @@ $ouds-list-item-space-padding-inline: $ouds-space-padding-inline-large !default; $ouds-list-item-space-row-gap: $ouds-space-row-gap-none !default; // scss-docs-end ouds-component-list +// Modal + +// scss-docs-start ouds-component-modal +$ouds-modal-dialog-border-radius-default: $ouds-border-radius-default !default; +$ouds-modal-dialog-border-radius-rounded: $ouds-border-radius-large !default; +$ouds-modal-dialog-grid-margin-horizontal-default-desktop: 267px !default; +$ouds-modal-dialog-grid-margin-horizontal-default-large-desktop: 358px !default; +$ouds-modal-dialog-grid-margin-horizontal-default-tablet: 85px !default; +$ouds-modal-dialog-grid-margin-horizontal-mobile: 16px !default; +$ouds-modal-dialog-grid-margin-horizontal-small-desktop: 599px !default; +$ouds-modal-dialog-grid-margin-horizontal-small-large-desktop: 664px !default; +$ouds-modal-dialog-grid-margin-horizontal-small-tablet: 147px !default; +$ouds-modal-dialog-grid-margin-vertical-default-desktop: 41px !default; +$ouds-modal-dialog-grid-margin-vertical-default-large-desktop: 52px !default; +$ouds-modal-dialog-grid-margin-vertical-default-tablet: 47px !default; +$ouds-modal-dialog-grid-margin-vertical-mobile-default: 16px !default; +$ouds-modal-dialog-grid-margin-vertical-small-desktop: 164px !default; +$ouds-modal-dialog-grid-margin-vertical-small-large-desktop: 260px !default; +$ouds-modal-dialog-grid-margin-vertical-small-mobile: 190px !default; +$ouds-modal-dialog-grid-margin-vertical-small-tablet: 235px !default; +$ouds-modal-dialog-size-max-height-small-desktop: 492px !default; +$ouds-modal-dialog-size-max-height-small-large-desktop: 520px !default; +$ouds-modal-dialog-size-max-height-small-mobile: 380px !default; +$ouds-modal-dialog-size-max-height-small-tablet: 470px !default; +$ouds-modal-dialog-size-max-width-default-desktop: 1066px !default; +$ouds-modal-dialog-size-max-width-default-large-desktop: 1204px !default; +$ouds-modal-dialog-size-max-width-default-mobile: 448px !default; +$ouds-modal-dialog-size-max-width-default-tablet: 810px !default; +$ouds-modal-dialog-size-max-width-small-desktop: 522px !default; +$ouds-modal-dialog-size-max-width-small-large-desktop: 592px !default; +$ouds-modal-dialog-size-max-width-small-mobile: 448px !default; +$ouds-modal-dialog-size-max-width-small-tablet: 480px !default; +$ouds-modal-dialog-size-min-height-small-desktop: 460px !default; +$ouds-modal-dialog-size-min-height-small-large-desktop: 500px !default; +$ouds-modal-dialog-size-min-height-small-mobile: 280px !default; +$ouds-modal-dialog-size-min-height-small-tablet: 420px !default; +$ouds-modal-dialog-space-column-gap-previous-title-desktop: $ouds-space-column-gap-2xlarge !default; +$ouds-modal-dialog-space-column-gap-previous-title-mobile: $ouds-space-column-gap-large !default; +$ouds-modal-dialog-space-column-gap-previous-title-tablet: $ouds-space-column-gap-xlarge !default; +$ouds-modal-dialog-space-inset-close-button-default-desktop: $ouds-space-inset-xlarge !default; +$ouds-modal-dialog-space-inset-close-button-default-tablet: $ouds-space-inset-large !default; +$ouds-modal-dialog-space-inset-close-button-mobile: $ouds-space-inset-medium !default; +$ouds-modal-dialog-space-inset-close-button-small-desktop: $ouds-space-inset-large !default; +$ouds-modal-dialog-space-inset-close-button-small-tablet: $ouds-space-inset-medium !default; +$ouds-modal-dialog-space-padding-block-bottom-body-footer-default-desktop: $ouds-space-padding-block-xsmall !default; +$ouds-modal-dialog-space-padding-block-bottom-body-footer-default-mobile: $ouds-space-padding-block-medium !default; +$ouds-modal-dialog-space-padding-block-bottom-body-footer-default-tablet: $ouds-space-padding-block-3xsmall !default; +$ouds-modal-dialog-space-padding-block-bottom-body-footer-small-desktop: $ouds-space-padding-block-3xsmall !default; +$ouds-modal-dialog-space-padding-block-bottom-body-footer-small-mobile: $ouds-space-padding-block-medium !default; +$ouds-modal-dialog-space-padding-block-bottom-body-footer-small-tablet: $ouds-space-padding-block-3xsmall !default; +$ouds-modal-dialog-space-padding-block-bottom-default-desktop: $ouds-space-padding-block-4xlarge !default; +$ouds-modal-dialog-space-padding-block-bottom-default-tablet: $ouds-space-padding-block-3xlarge !default; +$ouds-modal-dialog-space-padding-block-bottom-mobile: $ouds-space-padding-block-2xlarge !default; +$ouds-modal-dialog-space-padding-block-bottom-small-desktop: $ouds-space-padding-block-3xlarge !default; +$ouds-modal-dialog-space-padding-block-bottom-small-tablet: $ouds-space-padding-block-2xlarge !default; +$ouds-modal-dialog-space-padding-block-bottom-sticky-footer-safe-area-desktop: 84px !default; +$ouds-modal-dialog-space-padding-block-bottom-sticky-footer-safe-area-mobile: 62px !default; +$ouds-modal-dialog-space-padding-block-bottom-sticky-footer-safe-area-tablet: 84px !default; +$ouds-modal-dialog-space-padding-block-footer-sticky-default-desktop: $ouds-space-padding-block-3xlarge !default; +$ouds-modal-dialog-space-padding-block-footer-sticky-default-tablet: $ouds-space-padding-block-3xlarge !default; +$ouds-modal-dialog-space-padding-block-footer-sticky-mobile: $ouds-space-padding-block-xlarge !default; +$ouds-modal-dialog-space-padding-block-footer-sticky-small-desktop: $ouds-space-padding-block-2xlarge !default; +$ouds-modal-dialog-space-padding-block-footer-sticky-small-tablet: $ouds-space-padding-block-2xlarge !default; +$ouds-modal-dialog-space-padding-block-top-body-default-desktop: $ouds-space-padding-block-2xlarge !default; +$ouds-modal-dialog-space-padding-block-top-body-default-mobile: $ouds-space-padding-block-large !default; +$ouds-modal-dialog-space-padding-block-top-body-default-tablet: $ouds-space-padding-block-xlarge !default; +$ouds-modal-dialog-space-padding-block-top-body-small-desktop: $ouds-space-padding-block-xlarge !default; +$ouds-modal-dialog-space-padding-block-top-body-small-mobile: $ouds-space-padding-block-large !default; +$ouds-modal-dialog-space-padding-block-top-body-small-tablet: $ouds-space-padding-block-large !default; +$ouds-modal-dialog-space-padding-block-top-default-desktop: $ouds-space-padding-block-3xlarge !default; +$ouds-modal-dialog-space-padding-block-top-default-tablet: $ouds-space-padding-block-2xlarge !default; +$ouds-modal-dialog-space-padding-block-top-footer-default-desktop: $ouds-space-padding-block-4xlarge !default; +$ouds-modal-dialog-space-padding-block-top-footer-default-mobile: $ouds-space-padding-block-2xlarge !default; +$ouds-modal-dialog-space-padding-block-top-footer-default-tablet: $ouds-space-padding-block-3xlarge !default; +$ouds-modal-dialog-space-padding-block-top-footer-small-desktop: $ouds-space-padding-block-3xlarge !default; +$ouds-modal-dialog-space-padding-block-top-footer-small-mobile: $ouds-space-padding-block-2xlarge !default; +$ouds-modal-dialog-space-padding-block-top-footer-small-tablet: $ouds-space-padding-block-2xlarge !default; +$ouds-modal-dialog-space-padding-block-top-mobile: $ouds-space-padding-block-xlarge !default; +$ouds-modal-dialog-space-padding-block-top-small-desktop: $ouds-space-padding-block-2xlarge !default; +$ouds-modal-dialog-space-padding-block-top-small-tablet: $ouds-space-padding-block-xlarge !default; +$ouds-modal-dialog-space-padding-inline-default-desktop: $ouds-space-padding-inline-6xlarge !default; +$ouds-modal-dialog-space-padding-inline-default-tablet: $ouds-space-padding-inline-4xlarge !default; +$ouds-modal-dialog-space-padding-inline-mobile: $ouds-space-padding-inline-2xlarge !default; +$ouds-modal-dialog-space-padding-inline-small-desktop: $ouds-space-padding-inline-4xlarge !default; +$ouds-modal-dialog-space-padding-inline-small-tablet: $ouds-space-padding-inline-3xlarge !default; +// scss-docs-end ouds-component-modal + // Pin // scss-docs-start ouds-component-pin @@ -477,6 +587,31 @@ $ouds-radio-button-size-min-width: $ouds-size-min-interactive-area-default !defa $ouds-select-input-size-min-width: $ouds-dimension-8xlarge !default; // scss-docs-end ouds-component-select +// Side + +// scss-docs-start ouds-component-side +$ouds-side-sheet-grid-margin-horizontal-default-desktop: 961px !default; +$ouds-side-sheet-grid-margin-horizontal-default-large-desktop: 1429px !default; +$ouds-side-sheet-grid-margin-horizontal-default-mobile: 16px !default; +$ouds-side-sheet-grid-margin-horizontal-default-tablet: 331px !default; +$ouds-side-sheet-grid-margin-horizontal-small-desktop: 1077px !default; +$ouds-side-sheet-grid-margin-horizontal-small-large-desktop: 1582px !default; +$ouds-side-sheet-grid-margin-horizontal-small-mobile: 47px !default; +$ouds-side-sheet-grid-margin-horizontal-small-tablet: 392px !default; +$ouds-side-sheet-size-max-width-default-desktop: 520px !default; +$ouds-side-sheet-size-max-width-default-large-desktop: 600px !default; +$ouds-side-sheet-size-max-width-default-mobile: 380px !default; +$ouds-side-sheet-size-max-width-default-tablet: 440px !default; +$ouds-side-sheet-size-max-width-small-desktop: 480px !default; +$ouds-side-sheet-size-max-width-small-large-desktop: 520px !default; +$ouds-side-sheet-size-max-width-small-mobile: 340px !default; +$ouds-side-sheet-size-max-width-small-tablet: 400px !default; +$ouds-side-sheet-size-min-width-small-desktop: 420px !default; +$ouds-side-sheet-size-min-width-small-large-desktop: 440px !default; +$ouds-side-sheet-size-min-width-small-mobile: 1px !default; +$ouds-side-sheet-size-min-width-small-tablet: 1px !default; +// scss-docs-end ouds-component-side + // Skeleton // scss-docs-start ouds-component-skeleton @@ -581,10 +716,35 @@ $ouds-text-input-space-padding-inline-trailing-action: $ouds-space-padding-inlin $ouds-text-input-space-row-gap-label-input: $ouds-space-row-gap-none !default; // scss-docs-end ouds-component-text +// Toast + +// scss-docs-start ouds-component-toast +$ouds-toast-border-radius-media-rounded: $ouds-border-radius-small !default; +$ouds-toast-border-radius-media: $ouds-border-radius-default !default; +$ouds-toast-size-asset-large: $ouds-dimension-3xlarge !default; +$ouds-toast-size-asset-medium: $ouds-dimension-medium !default; +$ouds-toast-size-asset-small: $ouds-size-icon-with-label-large-size-medium !default; +$ouds-toast-size-width-desktop: 442px !default; +$ouds-toast-size-width-large-desktop: 592px !default; +$ouds-toast-size-width-mobile: 374px !default; +$ouds-toast-size-width-tablet: 474px !default; +// scss-docs-end ouds-component-toast + // Typography // scss-docs-start ouds-component-typography +$ouds-typography-color-content-marker: $ouds-color-content-brand-primary !default; $ouds-typography-heading-large-marker: true !default; -$ouds-typography-space-padding-block-bottom-heading-large-marker: $ouds-space-padding-block-4xsmall !default; -$ouds-typography-space-padding-block-top-heading-large-marker: $ouds-space-padding-block-3xsmall !default; +$ouds-typography-space-padding-block-bottom-heading-large-marker: $ouds-space-padding-block-4xsmall !default; // deprecated +$ouds-typography-space-padding-block-top-heading-large-marker: $ouds-space-padding-block-3xsmall !default; // deprecated // scss-docs-end ouds-component-typography + +// Visual + +// scss-docs-start ouds-component-visual +$ouds-visual-assets-icon-brand: orange !default; +$ouds-visual-assets-icon-color-content-status-warning-external-shape: var(--#{$prefix}visual-assets-icon-color-content-status-warning-external-shape) !default; +$ouds-visual-assets-icon-color-content-status-warning-internal-shape: var(--#{$prefix}visual-assets-icon-color-content-status-warning-internal-shape) !default; +$ouds-visual-assets-icon-color-content-status-warning-inverse-external-shape: var(--#{$prefix}visual-assets-icon-color-content-status-warning-inverse-external-shape) !default; +$ouds-visual-assets-icon-color-content-status-warning-inverse-internal-shape: var(--#{$prefix}visual-assets-icon-color-content-status-warning-inverse-internal-shape) !default; +// scss-docs-end ouds-component-visual diff --git a/packages/orange-compact/scss/tokens/_raw.scss b/packages/orange-compact/scss/tokens/_raw.scss index e447558812..6ea2ab5bd3 100644 --- a/packages/orange-compact/scss/tokens/_raw.scss +++ b/packages/orange-compact/scss/tokens/_raw.scss @@ -1,8 +1,8 @@ // Raw primitive values // Insertion of brand foundations -// OUDS Core tokens version 1.10.0 +// OUDS Core tokens version 1.11.0 // Orange Compact Core tokens version 1.2.0 -// Orange Compact System tokens version 2.6.0 +// Orange Compact System tokens version 2.7.0 // Border @@ -130,7 +130,7 @@ $core-ouds-color-functional-dodger-blue-900: #003857 !default; $core-ouds-color-functional-gray-dark-80: #7a7a7a !default; $core-ouds-color-functional-gray-dark-160: #707070 !default; $core-ouds-color-functional-gray-dark-240: #666 !default; -$core-ouds-color-functional-gray-dark-320: #5c5c5c !default; +$core-ouds-color-functional-gray-dark-320: #595959 !default; $core-ouds-color-functional-gray-dark-400: #555 !default; $core-ouds-color-functional-gray-dark-480: #444 !default; $core-ouds-color-functional-gray-dark-560: #3b3b3b !default; @@ -282,6 +282,7 @@ $core-ouds-dimension-4000: $core-ouds-dimension-base * 120 !default; // 480px $core-ouds-dimension-5000: $core-ouds-dimension-base * 140 !default; // 560px $core-ouds-dimension-6000: $core-ouds-dimension-base * 160 !default; // 640px $core-ouds-dimension-7000: $core-ouds-dimension-base * 180 !default; // 720px +$core-ouds-dimension-8000: $core-ouds-dimension-base * 200 !default; // 800px $core-ouds-dimension-9000: $core-ouds-dimension-base * 220 !default; // 880px $core-ouds-dimension-11000: $core-ouds-dimension-base * 260 !default; // 1040px $core-ouds-dimension-out-of-system-25: $core-ouds-dimension-base * .25 !default; // 1px @@ -294,6 +295,7 @@ $core-ouds-dimension-out-of-system-250: $core-ouds-dimension-base * 2.5 !default // Effect // scss-docs-start ouds-raw-effect +$core-ouds-effect-blur-80: 8px !default; $core-ouds-effect-blur-320: 32px !default; $core-ouds-effect-blur-480: 48px !default; // scss-docs-end ouds-raw-effect @@ -426,14 +428,6 @@ $core-ouds-grid-min-width-500: 1024px !default; $core-ouds-grid-min-width-600: 1320px !default; $core-ouds-grid-min-width-700: 1640px !default; $core-ouds-grid-min-width-800: 1880px !default; -$core-ouds-grid-width-100: 360px !default; -$core-ouds-grid-width-200: 390px !default; -$core-ouds-grid-width-300: 480px !default; -$core-ouds-grid-width-400: 768px !default; -$core-ouds-grid-width-500: 1024px !default; -$core-ouds-grid-width-600: 1440px !default; -$core-ouds-grid-width-700: 1680px !default; -$core-ouds-grid-width-800: 1920px !default; $core-ouds-grid-column-gap-10: $core-ouds-dimension-base * .25 !default; // 1px $core-ouds-grid-column-gap-100: $core-ouds-dimension-base * 2 !default; // 8px $core-ouds-grid-column-gap-200: $core-ouds-dimension-base * 4 !default; // 16px diff --git a/packages/orange-compact/scss/tokens/_semantic-colors-custom-props.scss b/packages/orange-compact/scss/tokens/_semantic-colors-custom-props.scss index 8ca909a639..5845aabffa 100644 --- a/packages/orange-compact/scss/tokens/_semantic-colors-custom-props.scss +++ b/packages/orange-compact/scss/tokens/_semantic-colors-custom-props.scss @@ -1,7 +1,7 @@ // Semantic custom properties applications -// OUDS Core tokens version 1.10.0 +// OUDS Core tokens version 1.11.0 // Orange Compact Core tokens version 1.2.0 -// Orange Compact System tokens version 2.6.0 +// Orange Compact System tokens version 2.7.0 // scss-docs-start ouds-all-semantic-css-color // scss-docs-start ouds-semantic-css-color diff --git a/packages/orange-compact/scss/tokens/_semantic.scss b/packages/orange-compact/scss/tokens/_semantic.scss index 8b8211327e..a7e4a05d31 100644 --- a/packages/orange-compact/scss/tokens/_semantic.scss +++ b/packages/orange-compact/scss/tokens/_semantic.scss @@ -1,8 +1,8 @@ // Semantic applications // Depends on raw primitive values -// OUDS Core tokens version 1.10.0 +// OUDS Core tokens version 1.11.0 // Orange Compact Core tokens version 1.2.0 -// Orange Compact System tokens version 2.6.0 +// Orange Compact System tokens version 2.7.0 // Border @@ -165,7 +165,7 @@ $ouds-color-border-muted-light: $core-ouds-color-opacity-black-120 !default; $ouds-color-border-on-brand-primary-dark: $core-ouds-color-functional-black !default; $ouds-color-border-on-brand-primary-light: $core-ouds-color-functional-black !default; $ouds-color-border-status-accent-dark: $core-orange-color-orange-500 !default; -$ouds-color-border-status-accent-light: $core-orange-color-orange-500 !default; +$ouds-color-border-status-accent-light: $core-orange-color-orange-550 !default; $ouds-color-border-status-info-dark: $core-ouds-color-functional-dodger-blue-300 !default; $ouds-color-border-status-info-light: $core-ouds-color-functional-dodger-blue-700 !default; $ouds-color-border-status-negative-dark: $core-ouds-color-functional-scarlet-300 !default; @@ -223,7 +223,7 @@ $ouds-color-content-on-status-warning-emphasized-light: $core-ouds-color-functio $ouds-color-content-on-status-warning-muted-dark: $core-ouds-color-functional-gray-light-160 !default; $ouds-color-content-on-status-warning-muted-light: $core-ouds-color-functional-black !default; $ouds-color-content-status-accent-dark: $core-orange-color-orange-500 !default; -$ouds-color-content-status-accent-light: $core-orange-color-orange-500 !default; +$ouds-color-content-status-accent-light: $core-orange-color-orange-550 !default; $ouds-color-content-status-info-dark: $core-ouds-color-functional-dodger-blue-300 !default; $ouds-color-content-status-info-light: $core-ouds-color-functional-dodger-blue-700 !default; $ouds-color-content-status-inverse-info-dark: $core-ouds-color-functional-dodger-blue-700 !default; @@ -271,7 +271,7 @@ $ouds-color-surface-primary-light: $core-ouds-color-functional-white !default; $ouds-color-surface-secondary-dark: $core-ouds-color-opacity-white-80 !default; $ouds-color-surface-secondary-light: $core-ouds-color-opacity-black-40 !default; $ouds-color-surface-status-accent-emphasized-dark: $core-orange-color-orange-500 !default; -$ouds-color-surface-status-accent-emphasized-light: $core-orange-color-orange-500 !default; +$ouds-color-surface-status-accent-emphasized-light: $core-orange-color-orange-550 !default; $ouds-color-surface-status-accent-muted-dark: $core-orange-color-opacity-warm-gray-400 !default; $ouds-color-surface-status-accent-muted-light: $core-orange-color-opacity-warm-gray-80 !default; $ouds-color-surface-status-info-emphasized-dark: $core-ouds-color-functional-dodger-blue-300 !default; @@ -329,6 +329,7 @@ $ouds-dimension-xsmall: $core-ouds-dimension-350 !default; // Effect // scss-docs-start ouds-semantic-effect +$ouds-effect-blur-backdrop: $core-ouds-effect-blur-80 !default; $ouds-effect-blur-drag: $core-ouds-effect-blur-480 !default; // scss-docs-end ouds-semantic-effect @@ -509,49 +510,41 @@ $ouds-grid-2xl-margin: $core-ouds-grid-margin-600 !default; $ouds-grid-2xl-max-width: $core-ouds-grid-max-width-700 !default; $ouds-grid-2xl-max-width-alt: $core-ouds-grid-max-width-650 !default; $ouds-grid-2xl-min-width: $core-ouds-grid-min-width-700 !default; -$ouds-grid-2xl-width: $core-ouds-grid-width-700 !default; $ouds-grid-2xs-column-count: $core-ouds-grid-column-count-400 !default; $ouds-grid-2xs-column-gap: $core-ouds-grid-column-gap-100 !default; $ouds-grid-2xs-margin: $core-ouds-grid-margin-100 !default; $ouds-grid-2xs-max-width: $core-ouds-grid-max-width-100 !default; $ouds-grid-2xs-min-width: $core-ouds-grid-min-width-100 !default; -$ouds-grid-2xs-width: $core-ouds-grid-width-100 !default; $ouds-grid-3xl-column-count: $core-ouds-grid-column-count-1200 !default; $ouds-grid-3xl-column-gap: $core-ouds-grid-column-gap-300 !default; $ouds-grid-3xl-margin: $core-ouds-grid-margin-1000 !default; $ouds-grid-3xl-max-width: $core-ouds-grid-max-width-800 !default; $ouds-grid-3xl-min-width: $core-ouds-grid-min-width-800 !default; -$ouds-grid-3xl-width: $core-ouds-grid-width-800 !default; $ouds-grid-lg-column-count: $core-ouds-grid-column-count-600 !default; $ouds-grid-lg-column-gap: $core-ouds-grid-column-gap-200 !default; $ouds-grid-lg-margin: $core-ouds-grid-margin-300 !default; $ouds-grid-lg-max-width: $core-ouds-grid-max-width-500 !default; $ouds-grid-lg-min-width: $core-ouds-grid-min-width-500 !default; -$ouds-grid-lg-width: $core-ouds-grid-width-500 !default; $ouds-grid-md-column-count: $core-ouds-grid-column-count-600 !default; $ouds-grid-md-column-gap: $core-ouds-grid-column-gap-200 !default; $ouds-grid-md-margin: $core-ouds-grid-margin-300 !default; $ouds-grid-md-max-width: $core-ouds-grid-max-width-400 !default; $ouds-grid-md-min-width: $core-ouds-grid-min-width-400 !default; -$ouds-grid-md-width: $core-ouds-grid-width-400 !default; $ouds-grid-sm-column-count: $core-ouds-grid-column-count-400 !default; $ouds-grid-sm-column-gap: $core-ouds-grid-column-gap-200 !default; $ouds-grid-sm-margin: $core-ouds-grid-margin-100 !default; $ouds-grid-sm-max-width: $core-ouds-grid-max-width-300 !default; $ouds-grid-sm-min-width: $core-ouds-grid-min-width-300 !default; -$ouds-grid-sm-width: $core-ouds-grid-width-300 !default; $ouds-grid-xl-column-count: $core-ouds-grid-column-count-1200 !default; $ouds-grid-xl-column-gap: $core-ouds-grid-column-gap-300 !default; $ouds-grid-xl-margin: $core-ouds-grid-margin-600 !default; $ouds-grid-xl-max-width: $core-ouds-grid-max-width-600 !default; $ouds-grid-xl-min-width: $core-ouds-grid-min-width-600 !default; -$ouds-grid-xl-width: $core-ouds-grid-width-600 !default; $ouds-grid-xs-column-count: $core-ouds-grid-column-count-400 !default; $ouds-grid-xs-column-gap: $core-ouds-grid-column-gap-200 !default; $ouds-grid-xs-margin: $core-ouds-grid-margin-100 !default; $ouds-grid-xs-max-width: $core-ouds-grid-max-width-200 !default; $ouds-grid-xs-min-width: $core-ouds-grid-min-width-200 !default; -$ouds-grid-xs-width: $core-ouds-grid-width-200 !default; // scss-docs-end ouds-semantic-grid // Opacity @@ -642,6 +635,9 @@ $ouds-size-max-width-body-medium-tablet: $core-ouds-dimension-6000 !default; $ouds-size-max-width-body-small-desktop: $core-ouds-dimension-6000 !default; $ouds-size-max-width-body-small-mobile: $core-ouds-dimension-6000 !default; $ouds-size-max-width-body-small-tablet: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-boxed-text-desktop: $core-ouds-dimension-8000 !default; +$ouds-size-max-width-boxed-text-mobile: $core-ouds-dimension-7000 !default; +$ouds-size-max-width-boxed-text-tablet: $core-ouds-dimension-7000 !default; $ouds-size-max-width-display-large-desktop: $core-ouds-dimension-11000 !default; $ouds-size-max-width-display-large-mobile: $core-ouds-dimension-9000 !default; $ouds-size-max-width-display-large-tablet: $core-ouds-dimension-9000 !default; @@ -748,6 +744,7 @@ $ouds-space-padding-block-3xlarge: $ouds-dimension-2xsmall !default; $ouds-space-padding-block-3xsmall: $ouds-dimension-10xsmall !default; $ouds-space-padding-block-4xlarge: $ouds-dimension-xsmall !default; $ouds-space-padding-block-4xsmall: $ouds-dimension-11xsmall !default; +$ouds-space-padding-block-5xlarge: $ouds-dimension-small !default; $ouds-space-padding-block-large: $ouds-dimension-5xsmall !default; $ouds-space-padding-block-medium: $ouds-dimension-6xsmall !default; $ouds-space-padding-block-none: $ouds-dimension-none !default; @@ -760,6 +757,8 @@ $ouds-space-padding-inline-3xlarge: $ouds-dimension-2xsmall !default; $ouds-space-padding-inline-3xsmall: $ouds-dimension-10xsmall !default; $ouds-space-padding-inline-4xlarge: $ouds-dimension-xsmall !default; $ouds-space-padding-inline-4xsmall: $ouds-dimension-11xsmall !default; +$ouds-space-padding-inline-5xlarge: $ouds-dimension-small !default; +$ouds-space-padding-inline-6xlarge: $ouds-dimension-medium !default; $ouds-space-padding-inline-large: $ouds-dimension-5xsmall !default; $ouds-space-padding-inline-medium: $ouds-dimension-6xsmall !default; $ouds-space-padding-inline-none: $ouds-dimension-none !default; @@ -794,7 +793,7 @@ $ouds-space-scaled-medium-tablet: $ouds-dimension-3xsmall !default; $ouds-space-scaled-none-desktop: $ouds-dimension-none !default; $ouds-space-scaled-none-mobile: $ouds-dimension-none !default; $ouds-space-scaled-none-tablet: $ouds-dimension-none !default; -$ouds-space-scaled-small-desktop: $ouds-dimension-3xsmall !default; +$ouds-space-scaled-small-desktop: $ouds-dimension-4xsmall !default; $ouds-space-scaled-small-mobile: $ouds-dimension-6xsmall !default; $ouds-space-scaled-small-tablet: $ouds-dimension-5xsmall !default; $ouds-space-scaled-xlarge-desktop: $ouds-dimension-xlarge !default; diff --git a/packages/orange/scss/tokens/_component-colors-custom-props.scss b/packages/orange/scss/tokens/_component-colors-custom-props.scss index 3bca15f994..0aeddf122f 100644 --- a/packages/orange/scss/tokens/_component-colors-custom-props.scss +++ b/packages/orange/scss/tokens/_component-colors-custom-props.scss @@ -1,11 +1,14 @@ // Components custom properties applications -// OUDS Core tokens version 1.10.0 +// OUDS Core tokens version 1.11.0 // Orange Core tokens version 1.2.0 -// Orange System tokens version 2.6.0 +// Orange System tokens version 2.7.0 // scss-docs-start ouds-all-component-css-color // scss-docs-start ouds-component-css-color @include color-mode(light, true) { + --#{$prefix}visual-assets-icon-color-content-status-warning-external-shape: #{$core-ouds-color-functional-sun-500}; + --#{$prefix}visual-assets-icon-color-content-status-warning-internal-shape: #{$core-ouds-color-functional-sun-750}; + --#{$prefix}visual-assets-icon-color-content-status-warning-inverse-external-shape: #{$core-ouds-color-functional-sun-300}; --#{$prefix}link-mono-color-content-enabled: #{$core-ouds-color-functional-black}; --#{$prefix}link-mono-color-content-hover: #{$core-ouds-color-functional-black}; --#{$prefix}link-mono-color-content-pressed: #{$core-ouds-color-opacity-black-520}; @@ -53,12 +56,14 @@ --#{$prefix}switch-color-track-selected-interaction: #{$core-ouds-color-functional-malachite-750}; --#{$prefix}switch-color-track-unselected: #{$core-ouds-color-opacity-black-440}; --#{$prefix}switch-color-track-unselected-interaction: #{$core-ouds-color-opacity-black-520}; + --#{$prefix}categorical-tag-color-bg-category-1: #{$core-orange-color-decorative-emerald-500}; + --#{$prefix}categorical-tag-color-bg-category-2: #{$core-orange-color-decorative-sky-400}; + --#{$prefix}categorical-tag-color-bg-category-3: #{$core-orange-color-decorative-amber-500}; + --#{$prefix}categorical-tag-color-bg-category-4: #{$core-orange-color-decorative-amethyst-400}; --#{$prefix}progress-indicator-color-content-track: #{$core-ouds-color-functional-gray-light-400}; --#{$prefix}progress-indicator-mono-color-content-track: #{$core-ouds-color-functional-gray-light-400}; --#{$prefix}progress-indicator-mono-color-content-indicator: #{$core-ouds-color-functional-black}; - --#{$prefix}icon-color-content-status-warning-external-shape: #{$core-ouds-color-functional-sun-500}; - --#{$prefix}icon-color-content-status-warning-internal-shape: #{$core-ouds-color-functional-sun-750}; - --#{$prefix}icon-color-content-status-warning-inverse-external-shape: #{$core-ouds-color-functional-sun-300}; + --#{$prefix}visual-assets-icon-color-content-status-warning-inverse-internal-shape: #{$ouds-color-opacity-transparent-dark}; --#{$prefix}link-color-chevron-hover: #{$ouds-color-content-brand-primary-light}; // deprecated --#{$prefix}link-color-chevron-pressed: #{$ouds-color-content-brand-primary-light}; // deprecated --#{$prefix}link-color-chevron-focus: #{$ouds-color-content-brand-primary-light}; // deprecated @@ -68,11 +73,13 @@ --#{$prefix}list-item-color-bg-loading: #{$ouds-color-action-support-loading-light}; // deprecated --#{$prefix}list-item-color-bg-focus: #{$ouds-color-action-support-focus-light}; // deprecated --#{$prefix}list-item-color-content-loader: #{$ouds-color-content-default-light}; // deprecated - --#{$prefix}icon-color-content-status-warning-inverse-internal-shape: #{$ouds-color-opacity-transparent-dark}; } // scss-docs-end ouds-component-css-color @include color-mode(dark, true) { + --#{$prefix}visual-assets-icon-color-content-status-warning-external-shape: #{$core-ouds-color-functional-sun-300}; + --#{$prefix}visual-assets-icon-color-content-status-warning-internal-shape: #{$ouds-color-opacity-transparent-dark}; + --#{$prefix}visual-assets-icon-color-content-status-warning-inverse-external-shape: #{$core-ouds-color-functional-sun-500}; --#{$prefix}link-mono-color-content-enabled: #{$core-ouds-color-functional-white}; --#{$prefix}link-mono-color-content-hover: #{$core-ouds-color-functional-white}; --#{$prefix}link-mono-color-content-pressed: #{$core-ouds-color-opacity-white-800}; @@ -120,12 +127,14 @@ --#{$prefix}switch-color-track-selected-interaction: #{$core-ouds-color-functional-malachite-300}; --#{$prefix}switch-color-track-unselected: #{$core-ouds-color-opacity-white-640}; --#{$prefix}switch-color-track-unselected-interaction: #{$core-ouds-color-opacity-white-800}; + --#{$prefix}categorical-tag-color-bg-category-1: #{$core-orange-color-decorative-emerald-400}; + --#{$prefix}categorical-tag-color-bg-category-2: #{$core-orange-color-decorative-sky-300}; + --#{$prefix}categorical-tag-color-bg-category-3: #{$core-orange-color-decorative-amber-300}; + --#{$prefix}categorical-tag-color-bg-category-4: #{$core-orange-color-decorative-amethyst-300}; --#{$prefix}progress-indicator-color-content-track: #{$core-ouds-color-functional-gray-dark-480}; --#{$prefix}progress-indicator-mono-color-content-track: #{$core-ouds-color-functional-gray-dark-480}; --#{$prefix}progress-indicator-mono-color-content-indicator: #{$core-ouds-color-functional-white}; - --#{$prefix}icon-color-content-status-warning-external-shape: #{$core-ouds-color-functional-sun-300}; - --#{$prefix}icon-color-content-status-warning-internal-shape: #{$ouds-color-opacity-transparent-dark}; - --#{$prefix}icon-color-content-status-warning-inverse-external-shape: #{$core-ouds-color-functional-sun-500}; + --#{$prefix}visual-assets-icon-color-content-status-warning-inverse-internal-shape: #{$core-ouds-color-functional-sun-750}; --#{$prefix}link-color-chevron-hover: #{$ouds-color-content-brand-primary-dark}; // deprecated --#{$prefix}link-color-chevron-pressed: #{$ouds-color-content-brand-primary-dark}; // deprecated --#{$prefix}link-color-chevron-focus: #{$ouds-color-content-brand-primary-dark}; // deprecated @@ -135,6 +144,5 @@ --#{$prefix}list-item-color-bg-loading: #{$ouds-color-action-support-loading-dark}; // deprecated --#{$prefix}list-item-color-bg-focus: #{$ouds-color-action-support-focus-dark}; // deprecated --#{$prefix}list-item-color-content-loader: #{$ouds-color-content-default-dark}; // deprecated - --#{$prefix}icon-color-content-status-warning-inverse-internal-shape: #{$core-ouds-color-functional-sun-750}; } // scss-docs-end ouds-all-component-css-color diff --git a/packages/orange/scss/tokens/_component.scss b/packages/orange/scss/tokens/_component.scss index 2bd2e979b1..6df29ee413 100644 --- a/packages/orange/scss/tokens/_component.scss +++ b/packages/orange/scss/tokens/_component.scss @@ -1,8 +1,8 @@ // Component application // Depends on semantic applications -// OUDS Core tokens version 1.10.0 +// OUDS Core tokens version 1.11.0 // Orange Core tokens version 1.2.0 -// Orange System tokens version 2.6.0 +// Orange System tokens version 2.7.0 // Accordion @@ -22,9 +22,9 @@ $ouds-accordion-faq-space-column-gap-tablet: $ouds-space-column-gap-medium !defa $ouds-accordion-faq-space-padding-block-bottom-expand-container-desktop: $ouds-space-padding-block-4xlarge !default; $ouds-accordion-faq-space-padding-block-bottom-expand-container-mobile: $ouds-space-padding-block-3xlarge !default; $ouds-accordion-faq-space-padding-block-bottom-expand-container-tablet: $ouds-space-padding-block-3xlarge !default; -$ouds-accordion-faq-space-padding-block-bottom-slot-list-item-container-desktop: $ouds-space-padding-block-xlarge !default; -$ouds-accordion-faq-space-padding-block-bottom-slot-list-item-container-mobile: $ouds-space-padding-block-large !default; -$ouds-accordion-faq-space-padding-block-bottom-slot-list-item-container-tablet: $ouds-space-padding-block-large !default; +$ouds-accordion-faq-space-padding-block-bottom-slot-container-desktop: $ouds-space-padding-block-xlarge !default; +$ouds-accordion-faq-space-padding-block-bottom-slot-container-mobile: $ouds-space-padding-block-large !default; +$ouds-accordion-faq-space-padding-block-bottom-slot-container-tablet: $ouds-space-padding-block-large !default; $ouds-accordion-faq-space-padding-block-desktop: $ouds-space-padding-block-large !default; $ouds-accordion-faq-space-padding-block-mobile: $ouds-space-padding-block-medium !default; $ouds-accordion-faq-space-padding-block-tablet: $ouds-space-padding-block-medium !default; @@ -36,20 +36,23 @@ $ouds-accordion-space-padding-block-top-expand-container: $ouds-space-padding-bl // Alert // scss-docs-start ouds-component-alert +$ouds-alert-banner-mode-control-action-on-status-accent: Always in light mode !default; $ouds-alert-border-radius-default: $ouds-border-radius-default !default; $ouds-alert-border-radius-rounded: $ouds-border-radius-large !default; -$ouds-alert-border-width: $ouds-border-width-none !default; -$ouds-alert-size-icon: $ouds-size-icon-with-label-large-size-small !default; -$ouds-alert-size-min-height-bottom-action-placement: $core-ouds-dimension-1250 !default; +$ouds-alert-message-border-width: $ouds-border-width-none !default; +$ouds-alert-message-space-row-gap-bullet: $ouds-space-row-gap-none !default; +$ouds-alert-size-asset: $ouds-size-icon-with-label-large-size-small !default; +$ouds-alert-size-min-height-bottom-action: $core-ouds-dimension-1000 !default; $ouds-alert-size-min-height: $ouds-size-min-interactive-area-default !default; $ouds-alert-size-min-width: $core-ouds-dimension-2000 !default; $ouds-alert-space-column-gap-action: $ouds-space-column-gap-small !default; $ouds-alert-space-column-gap: $ouds-space-column-gap-medium !default; +$ouds-alert-space-inset-progress-indicator: $ouds-space-inset-4xsmall !default; +$ouds-alert-space-padding-block-bottom-content: $ouds-space-padding-block-3xsmall !default; $ouds-alert-space-padding-block: $ouds-space-padding-block-medium !default; $ouds-alert-space-padding-inline: $ouds-space-padding-inline-large !default; -$ouds-alert-space-row-gap-action: $ouds-space-row-gap-2xsmall !default; -$ouds-alert-space-row-gap-bullet: $ouds-space-row-gap-none !default; -$ouds-alert-space-row-gap: $ouds-space-row-gap-small !default; +$ouds-alert-space-row-gap-action: $ouds-space-row-gap-2xsmall !default; // deprecated +$ouds-alert-space-row-gap: $ouds-space-row-gap-2xsmall !default; // scss-docs-end ouds-component-alert // Badge @@ -197,6 +200,7 @@ $ouds-button-size-icon-only-small: $ouds-size-icon-with-label-large-size-xsmall $ouds-button-size-icon-small: $ouds-size-icon-with-label-medium-size-small !default; $ouds-button-size-max-size-icon-only-default: $ouds-size-min-interactive-area-default !default; $ouds-button-size-max-size-icon-only-small: $ouds-size-min-interactive-area-small !default; +$ouds-button-size-max-width: $core-ouds-dimension-4000 !default; $ouds-button-size-min-height-default: $ouds-size-min-interactive-area-default !default; $ouds-button-size-min-height-small: $ouds-size-min-interactive-area-small !default; $ouds-button-size-min-width-default: $ouds-size-min-interactive-area-default !default; @@ -229,6 +233,17 @@ $ouds-button-space-padding-inline-start-icon-end-default: $ouds-space-padding-in $ouds-button-space-padding-inline-start-icon-end-small: $ouds-space-padding-inline-2xlarge !default; // scss-docs-end ouds-component-button +// Categorical + +// scss-docs-start ouds-component-categorical +$ouds-categorical-tag-color-bg-category-1: var(--#{$prefix}categorical-tag-color-bg-category-1) !default; +$ouds-categorical-tag-color-bg-category-2: var(--#{$prefix}categorical-tag-color-bg-category-2) !default; +$ouds-categorical-tag-color-bg-category-3: var(--#{$prefix}categorical-tag-color-bg-category-3) !default; +$ouds-categorical-tag-color-bg-category-4: var(--#{$prefix}categorical-tag-color-bg-category-4) !default; +$ouds-categorical-tag-color-bg-category-5: $core-orange-color-decorative-shocking-pink-200 !default; +$ouds-categorical-tag-color-content: $core-ouds-color-functional-black !default; +// scss-docs-end ouds-component-categorical + // Checkbox // scss-docs-start ouds-component-checkbox @@ -307,6 +322,14 @@ $ouds-chip-space-padding-inline-icon: $ouds-space-padding-inline-small !default; $ouds-divider-border-width: $ouds-border-width-thin !default; // scss-docs-end ouds-component-divider +// Fullscreen + +// scss-docs-start ouds-component-fullscreen +$ouds-fullscreen-dialog-space-inset-close-button-desktop: $ouds-space-inset-3xlarge !default; +$ouds-fullscreen-dialog-space-inset-close-button-mobile: $ouds-space-inset-large !default; +$ouds-fullscreen-dialog-space-inset-close-button-tablet: $ouds-space-inset-2xlarge !default; +// scss-docs-end ouds-component-fullscreen + // Input // scss-docs-start ouds-component-input @@ -399,7 +422,7 @@ $ouds-list-item-size-asset-xlarge: $ouds-dimension-3xlarge !default; $ouds-list-item-size-control-indicator: $ouds-size-icon-with-label-large-size-xsmall !default; $ouds-list-item-size-current-indicator-width: $core-ouds-dimension-50 !default; $ouds-list-item-size-error-icon: $ouds-size-icon-with-label-large-size-small !default; // deprecated -$ouds-list-item-size-flag-height: $ouds-size-icon-with-label-large-size-xsmall !default; +$ouds-list-item-size-flag-height: $ouds-size-icon-with-label-large-size-xsmall !default; // deprecated $ouds-list-item-size-icon: $ouds-size-icon-with-label-large-size-medium !default; // deprecated $ouds-list-item-size-loader: $ouds-size-icon-with-label-large-size-small !default; // deprecated $ouds-list-item-size-max-height-assets-container: $core-ouds-dimension-1200 !default; // deprecated @@ -423,6 +446,93 @@ $ouds-list-item-space-padding-inline: $ouds-space-padding-inline-large !default; $ouds-list-item-space-row-gap: $ouds-space-row-gap-none !default; // scss-docs-end ouds-component-list +// Modal + +// scss-docs-start ouds-component-modal +$ouds-modal-dialog-border-radius-default: $ouds-border-radius-default !default; +$ouds-modal-dialog-border-radius-rounded: $ouds-border-radius-large !default; +$ouds-modal-dialog-grid-margin-horizontal-default-desktop: 283px !default; +$ouds-modal-dialog-grid-margin-horizontal-default-large-desktop: 401px !default; +$ouds-modal-dialog-grid-margin-horizontal-default-tablet: 93px !default; +$ouds-modal-dialog-grid-margin-horizontal-mobile: 16px !default; +$ouds-modal-dialog-grid-margin-horizontal-small-desktop: 509px !default; +$ouds-modal-dialog-grid-margin-horizontal-small-large-desktop: 691px !default; +$ouds-modal-dialog-grid-margin-horizontal-small-tablet: 153px !default; +$ouds-modal-dialog-grid-margin-vertical-default-desktop: 41px !default; +$ouds-modal-dialog-grid-margin-vertical-default-large-desktop: 52px !default; +$ouds-modal-dialog-grid-margin-vertical-default-tablet: 47px !default; +$ouds-modal-dialog-grid-margin-vertical-mobile-default: 16px !default; +$ouds-modal-dialog-grid-margin-vertical-small-desktop: 164px !default; +$ouds-modal-dialog-grid-margin-vertical-small-large-desktop: 260px !default; +$ouds-modal-dialog-grid-margin-vertical-small-mobile: 190px !default; +$ouds-modal-dialog-grid-margin-vertical-small-tablet: 235px !default; +$ouds-modal-dialog-size-max-height-small-desktop: 492px !default; +$ouds-modal-dialog-size-max-height-small-large-desktop: 520px !default; +$ouds-modal-dialog-size-max-height-small-mobile: 380px !default; +$ouds-modal-dialog-size-max-height-small-tablet: 470px !default; +$ouds-modal-dialog-size-max-width-default-desktop: 1002px !default; +$ouds-modal-dialog-size-max-width-default-large-desktop: 1118px !default; +$ouds-modal-dialog-size-max-width-default-mobile: 448px !default; +$ouds-modal-dialog-size-max-width-default-tablet: 782px !default; +$ouds-modal-dialog-size-max-width-small-desktop: 486px !default; +$ouds-modal-dialog-size-max-width-small-large-desktop: 538px !default; +$ouds-modal-dialog-size-max-width-small-mobile: 448px !default; +$ouds-modal-dialog-size-max-width-small-tablet: 460px !default; +$ouds-modal-dialog-size-min-height-small-desktop: 460px !default; +$ouds-modal-dialog-size-min-height-small-large-desktop: 500px !default; +$ouds-modal-dialog-size-min-height-small-mobile: 280px !default; +$ouds-modal-dialog-size-min-height-small-tablet: 420px !default; +$ouds-modal-dialog-space-column-gap-previous-title-desktop: $ouds-space-column-gap-2xlarge !default; +$ouds-modal-dialog-space-column-gap-previous-title-mobile: $ouds-space-column-gap-large !default; +$ouds-modal-dialog-space-column-gap-previous-title-tablet: $ouds-space-column-gap-xlarge !default; +$ouds-modal-dialog-space-inset-close-button-default-desktop: $ouds-space-inset-xlarge !default; +$ouds-modal-dialog-space-inset-close-button-default-tablet: $ouds-space-inset-large !default; +$ouds-modal-dialog-space-inset-close-button-mobile: $ouds-space-inset-medium !default; +$ouds-modal-dialog-space-inset-close-button-small-desktop: $ouds-space-inset-large !default; +$ouds-modal-dialog-space-inset-close-button-small-tablet: $ouds-space-inset-medium !default; +$ouds-modal-dialog-space-padding-block-bottom-body-footer-default-desktop: $ouds-space-padding-block-xsmall !default; +$ouds-modal-dialog-space-padding-block-bottom-body-footer-default-mobile: $ouds-space-padding-block-medium !default; +$ouds-modal-dialog-space-padding-block-bottom-body-footer-default-tablet: $ouds-space-padding-block-3xsmall !default; +$ouds-modal-dialog-space-padding-block-bottom-body-footer-small-desktop: $ouds-space-padding-block-3xsmall !default; +$ouds-modal-dialog-space-padding-block-bottom-body-footer-small-mobile: $ouds-space-padding-block-medium !default; +$ouds-modal-dialog-space-padding-block-bottom-body-footer-small-tablet: $ouds-space-padding-block-3xsmall !default; +$ouds-modal-dialog-space-padding-block-bottom-default-desktop: $ouds-space-padding-block-4xlarge !default; +$ouds-modal-dialog-space-padding-block-bottom-default-tablet: $ouds-space-padding-block-3xlarge !default; +$ouds-modal-dialog-space-padding-block-bottom-mobile: $ouds-space-padding-block-2xlarge !default; +$ouds-modal-dialog-space-padding-block-bottom-small-desktop: $ouds-space-padding-block-3xlarge !default; +$ouds-modal-dialog-space-padding-block-bottom-small-tablet: $ouds-space-padding-block-2xlarge !default; +$ouds-modal-dialog-space-padding-block-bottom-sticky-footer-safe-area-desktop: 104px !default; +$ouds-modal-dialog-space-padding-block-bottom-sticky-footer-safe-area-mobile: 76px !default; +$ouds-modal-dialog-space-padding-block-bottom-sticky-footer-safe-area-tablet: 100px !default; +$ouds-modal-dialog-space-padding-block-footer-sticky-default-desktop: $ouds-space-padding-block-3xlarge !default; +$ouds-modal-dialog-space-padding-block-footer-sticky-default-tablet: $ouds-space-padding-block-3xlarge !default; +$ouds-modal-dialog-space-padding-block-footer-sticky-mobile: $ouds-space-padding-block-xlarge !default; +$ouds-modal-dialog-space-padding-block-footer-sticky-small-desktop: $ouds-space-padding-block-2xlarge !default; +$ouds-modal-dialog-space-padding-block-footer-sticky-small-tablet: $ouds-space-padding-block-2xlarge !default; +$ouds-modal-dialog-space-padding-block-top-body-default-desktop: $ouds-space-padding-block-2xlarge !default; +$ouds-modal-dialog-space-padding-block-top-body-default-mobile: $ouds-space-padding-block-large !default; +$ouds-modal-dialog-space-padding-block-top-body-default-tablet: $ouds-space-padding-block-xlarge !default; +$ouds-modal-dialog-space-padding-block-top-body-small-desktop: $ouds-space-padding-block-xlarge !default; +$ouds-modal-dialog-space-padding-block-top-body-small-mobile: $ouds-space-padding-block-large !default; +$ouds-modal-dialog-space-padding-block-top-body-small-tablet: $ouds-space-padding-block-large !default; +$ouds-modal-dialog-space-padding-block-top-default-desktop: $ouds-space-padding-block-3xlarge !default; +$ouds-modal-dialog-space-padding-block-top-default-tablet: $ouds-space-padding-block-2xlarge !default; +$ouds-modal-dialog-space-padding-block-top-footer-default-desktop: $ouds-space-padding-block-4xlarge !default; +$ouds-modal-dialog-space-padding-block-top-footer-default-mobile: $ouds-space-padding-block-2xlarge !default; +$ouds-modal-dialog-space-padding-block-top-footer-default-tablet: $ouds-space-padding-block-3xlarge !default; +$ouds-modal-dialog-space-padding-block-top-footer-small-desktop: $ouds-space-padding-block-3xlarge !default; +$ouds-modal-dialog-space-padding-block-top-footer-small-mobile: $ouds-space-padding-block-2xlarge !default; +$ouds-modal-dialog-space-padding-block-top-footer-small-tablet: $ouds-space-padding-block-2xlarge !default; +$ouds-modal-dialog-space-padding-block-top-mobile: $ouds-space-padding-block-xlarge !default; +$ouds-modal-dialog-space-padding-block-top-small-desktop: $ouds-space-padding-block-2xlarge !default; +$ouds-modal-dialog-space-padding-block-top-small-tablet: $ouds-space-padding-block-xlarge !default; +$ouds-modal-dialog-space-padding-inline-default-desktop: $ouds-space-padding-inline-6xlarge !default; +$ouds-modal-dialog-space-padding-inline-default-tablet: $ouds-space-padding-inline-4xlarge !default; +$ouds-modal-dialog-space-padding-inline-mobile: $ouds-space-padding-inline-2xlarge !default; +$ouds-modal-dialog-space-padding-inline-small-desktop: $ouds-space-padding-inline-4xlarge !default; +$ouds-modal-dialog-space-padding-inline-small-tablet: $ouds-space-padding-inline-3xlarge !default; +// scss-docs-end ouds-component-modal + // Pin // scss-docs-start ouds-component-pin @@ -477,6 +587,31 @@ $ouds-radio-button-size-min-width: $ouds-size-min-interactive-area-default !defa $ouds-select-input-size-min-width: $ouds-dimension-8xlarge !default; // scss-docs-end ouds-component-select +// Side + +// scss-docs-start ouds-component-side +$ouds-side-sheet-grid-margin-horizontal-default-desktop: 963px !default; +$ouds-side-sheet-grid-margin-horizontal-default-large-desktop: 1414px !default; +$ouds-side-sheet-grid-margin-horizontal-default-mobile: 24px !default; +$ouds-side-sheet-grid-margin-horizontal-default-tablet: 335px !default; +$ouds-side-sheet-grid-margin-horizontal-small-desktop: 1076px !default; +$ouds-side-sheet-grid-margin-horizontal-small-large-desktop: 1559px !default; +$ouds-side-sheet-grid-margin-horizontal-small-mobile: 54px !default; +$ouds-side-sheet-grid-margin-horizontal-small-tablet: 396px !default; +$ouds-side-sheet-size-max-width-default-desktop: 520px !default; +$ouds-side-sheet-size-max-width-default-large-desktop: 600px !default; +$ouds-side-sheet-size-max-width-default-mobile: 380px !default; +$ouds-side-sheet-size-max-width-default-tablet: 440px !default; +$ouds-side-sheet-size-max-width-small-desktop: 480px !default; +$ouds-side-sheet-size-max-width-small-large-desktop: 520px !default; +$ouds-side-sheet-size-max-width-small-mobile: 340px !default; +$ouds-side-sheet-size-max-width-small-tablet: 400px !default; +$ouds-side-sheet-size-min-width-small-desktop: 420px !default; +$ouds-side-sheet-size-min-width-small-large-desktop: 440px !default; +$ouds-side-sheet-size-min-width-small-mobile: 1px !default; +$ouds-side-sheet-size-min-width-small-tablet: 1px !default; +// scss-docs-end ouds-component-side + // Skeleton // scss-docs-start ouds-component-skeleton @@ -581,10 +716,35 @@ $ouds-text-input-space-padding-inline-trailing-action: $ouds-space-padding-inlin $ouds-text-input-space-row-gap-label-input: $ouds-space-row-gap-none !default; // scss-docs-end ouds-component-text +// Toast + +// scss-docs-start ouds-component-toast +$ouds-toast-border-radius-media-rounded: $ouds-border-radius-small !default; +$ouds-toast-border-radius-media: $ouds-border-radius-default !default; +$ouds-toast-size-asset-large: $ouds-dimension-3xlarge !default; +$ouds-toast-size-asset-medium: $ouds-dimension-medium !default; +$ouds-toast-size-asset-small: $ouds-size-icon-with-label-large-size-medium !default; +$ouds-toast-size-width-desktop: 422px !default; +$ouds-toast-size-width-large-desktop: 538px !default; +$ouds-toast-size-width-mobile: 374px !default; +$ouds-toast-size-width-tablet: 462px !default; +// scss-docs-end ouds-component-toast + // Typography // scss-docs-start ouds-component-typography +$ouds-typography-color-content-marker: $ouds-color-content-brand-primary !default; $ouds-typography-heading-large-marker: true !default; -$ouds-typography-space-padding-block-bottom-heading-large-marker: $ouds-space-padding-block-4xsmall !default; -$ouds-typography-space-padding-block-top-heading-large-marker: $ouds-space-padding-block-3xsmall !default; +$ouds-typography-space-padding-block-bottom-heading-large-marker: $ouds-space-padding-block-4xsmall !default; // deprecated +$ouds-typography-space-padding-block-top-heading-large-marker: $ouds-space-padding-block-3xsmall !default; // deprecated // scss-docs-end ouds-component-typography + +// Visual + +// scss-docs-start ouds-component-visual +$ouds-visual-assets-icon-brand: orange !default; +$ouds-visual-assets-icon-color-content-status-warning-external-shape: var(--#{$prefix}visual-assets-icon-color-content-status-warning-external-shape) !default; +$ouds-visual-assets-icon-color-content-status-warning-internal-shape: var(--#{$prefix}visual-assets-icon-color-content-status-warning-internal-shape) !default; +$ouds-visual-assets-icon-color-content-status-warning-inverse-external-shape: var(--#{$prefix}visual-assets-icon-color-content-status-warning-inverse-external-shape) !default; +$ouds-visual-assets-icon-color-content-status-warning-inverse-internal-shape: var(--#{$prefix}visual-assets-icon-color-content-status-warning-inverse-internal-shape) !default; +// scss-docs-end ouds-component-visual diff --git a/packages/orange/scss/tokens/_raw.scss b/packages/orange/scss/tokens/_raw.scss index bed8b9774e..093a817ff2 100644 --- a/packages/orange/scss/tokens/_raw.scss +++ b/packages/orange/scss/tokens/_raw.scss @@ -1,8 +1,8 @@ // Raw primitive values // Insertion of brand foundations -// OUDS Core tokens version 1.10.0 +// OUDS Core tokens version 1.11.0 // Orange Core tokens version 1.2.0 -// Orange System tokens version 2.6.0 +// Orange System tokens version 2.7.0 // Border @@ -130,7 +130,7 @@ $core-ouds-color-functional-dodger-blue-900: #003857 !default; $core-ouds-color-functional-gray-dark-80: #7a7a7a !default; $core-ouds-color-functional-gray-dark-160: #707070 !default; $core-ouds-color-functional-gray-dark-240: #666 !default; -$core-ouds-color-functional-gray-dark-320: #5c5c5c !default; +$core-ouds-color-functional-gray-dark-320: #595959 !default; $core-ouds-color-functional-gray-dark-400: #555 !default; $core-ouds-color-functional-gray-dark-480: #444 !default; $core-ouds-color-functional-gray-dark-560: #3b3b3b !default; @@ -282,6 +282,7 @@ $core-ouds-dimension-4000: $core-ouds-dimension-base * 120 !default; // 480px $core-ouds-dimension-5000: $core-ouds-dimension-base * 140 !default; // 560px $core-ouds-dimension-6000: $core-ouds-dimension-base * 160 !default; // 640px $core-ouds-dimension-7000: $core-ouds-dimension-base * 180 !default; // 720px +$core-ouds-dimension-8000: $core-ouds-dimension-base * 200 !default; // 800px $core-ouds-dimension-9000: $core-ouds-dimension-base * 220 !default; // 880px $core-ouds-dimension-11000: $core-ouds-dimension-base * 260 !default; // 1040px $core-ouds-dimension-out-of-system-25: $core-ouds-dimension-base * .25 !default; // 1px @@ -294,6 +295,7 @@ $core-ouds-dimension-out-of-system-250: $core-ouds-dimension-base * 2.5 !default // Effect // scss-docs-start ouds-raw-effect +$core-ouds-effect-blur-80: 8px !default; $core-ouds-effect-blur-320: 32px !default; $core-ouds-effect-blur-480: 48px !default; // scss-docs-end ouds-raw-effect @@ -426,14 +428,6 @@ $core-ouds-grid-min-width-500: 1024px !default; $core-ouds-grid-min-width-600: 1320px !default; $core-ouds-grid-min-width-700: 1640px !default; $core-ouds-grid-min-width-800: 1880px !default; -$core-ouds-grid-width-100: 360px !default; -$core-ouds-grid-width-200: 390px !default; -$core-ouds-grid-width-300: 480px !default; -$core-ouds-grid-width-400: 768px !default; -$core-ouds-grid-width-500: 1024px !default; -$core-ouds-grid-width-600: 1440px !default; -$core-ouds-grid-width-700: 1680px !default; -$core-ouds-grid-width-800: 1920px !default; $core-ouds-grid-column-gap-10: $core-ouds-dimension-base * .25 !default; // 1px $core-ouds-grid-column-gap-100: $core-ouds-dimension-base * 2 !default; // 8px $core-ouds-grid-column-gap-200: $core-ouds-dimension-base * 4 !default; // 16px diff --git a/packages/orange/scss/tokens/_semantic-colors-custom-props.scss b/packages/orange/scss/tokens/_semantic-colors-custom-props.scss index 0c3b3949b7..19c074e1d4 100644 --- a/packages/orange/scss/tokens/_semantic-colors-custom-props.scss +++ b/packages/orange/scss/tokens/_semantic-colors-custom-props.scss @@ -1,7 +1,7 @@ // Semantic custom properties applications -// OUDS Core tokens version 1.10.0 +// OUDS Core tokens version 1.11.0 // Orange Core tokens version 1.2.0 -// Orange System tokens version 2.6.0 +// Orange System tokens version 2.7.0 // scss-docs-start ouds-all-semantic-css-color // scss-docs-start ouds-semantic-css-color diff --git a/packages/orange/scss/tokens/_semantic.scss b/packages/orange/scss/tokens/_semantic.scss index 90a5d483bb..0da45c8f0f 100644 --- a/packages/orange/scss/tokens/_semantic.scss +++ b/packages/orange/scss/tokens/_semantic.scss @@ -1,8 +1,8 @@ // Semantic applications // Depends on raw primitive values -// OUDS Core tokens version 1.10.0 +// OUDS Core tokens version 1.11.0 // Orange Core tokens version 1.2.0 -// Orange System tokens version 2.6.0 +// Orange System tokens version 2.7.0 // Border @@ -165,7 +165,7 @@ $ouds-color-border-muted-light: $core-ouds-color-opacity-black-120 !default; $ouds-color-border-on-brand-primary-dark: $core-ouds-color-functional-black !default; $ouds-color-border-on-brand-primary-light: $core-ouds-color-functional-black !default; $ouds-color-border-status-accent-dark: $core-orange-color-orange-500 !default; -$ouds-color-border-status-accent-light: $core-orange-color-orange-500 !default; +$ouds-color-border-status-accent-light: $core-orange-color-orange-550 !default; $ouds-color-border-status-info-dark: $core-ouds-color-functional-dodger-blue-300 !default; $ouds-color-border-status-info-light: $core-ouds-color-functional-dodger-blue-700 !default; $ouds-color-border-status-negative-dark: $core-ouds-color-functional-scarlet-300 !default; @@ -223,7 +223,7 @@ $ouds-color-content-on-status-warning-emphasized-light: $core-ouds-color-functio $ouds-color-content-on-status-warning-muted-dark: $core-ouds-color-functional-gray-light-160 !default; $ouds-color-content-on-status-warning-muted-light: $core-ouds-color-functional-black !default; $ouds-color-content-status-accent-dark: $core-orange-color-orange-500 !default; -$ouds-color-content-status-accent-light: $core-orange-color-orange-500 !default; +$ouds-color-content-status-accent-light: $core-orange-color-orange-550 !default; $ouds-color-content-status-info-dark: $core-ouds-color-functional-dodger-blue-300 !default; $ouds-color-content-status-info-light: $core-ouds-color-functional-dodger-blue-700 !default; $ouds-color-content-status-inverse-info-dark: $core-ouds-color-functional-dodger-blue-700 !default; @@ -271,7 +271,7 @@ $ouds-color-surface-primary-light: $core-ouds-color-functional-white !default; $ouds-color-surface-secondary-dark: $core-ouds-color-opacity-white-80 !default; $ouds-color-surface-secondary-light: $core-ouds-color-opacity-black-40 !default; $ouds-color-surface-status-accent-emphasized-dark: $core-orange-color-orange-500 !default; -$ouds-color-surface-status-accent-emphasized-light: $core-orange-color-orange-500 !default; +$ouds-color-surface-status-accent-emphasized-light: $core-orange-color-orange-550 !default; $ouds-color-surface-status-accent-muted-dark: $core-orange-color-opacity-warm-gray-400 !default; $ouds-color-surface-status-accent-muted-light: $core-orange-color-opacity-warm-gray-80 !default; $ouds-color-surface-status-info-emphasized-dark: $core-ouds-color-functional-dodger-blue-300 !default; @@ -329,6 +329,7 @@ $ouds-dimension-xsmall: $core-ouds-dimension-400 !default; // Effect // scss-docs-start ouds-semantic-effect +$ouds-effect-blur-backdrop: $core-ouds-effect-blur-80 !default; $ouds-effect-blur-drag: $core-ouds-effect-blur-480 !default; // scss-docs-end ouds-semantic-effect @@ -509,49 +510,41 @@ $ouds-grid-2xl-margin: $core-ouds-grid-margin-1700 !default; $ouds-grid-2xl-max-width: $core-ouds-grid-max-width-700 !default; $ouds-grid-2xl-max-width-alt: $core-ouds-grid-max-width-650 !default; $ouds-grid-2xl-min-width: $core-ouds-grid-min-width-700 !default; -$ouds-grid-2xl-width: $core-ouds-grid-width-700 !default; $ouds-grid-2xs-column-count: $core-ouds-grid-column-count-400 !default; $ouds-grid-2xs-column-gap: $core-ouds-grid-column-gap-100 !default; $ouds-grid-2xs-margin: $core-ouds-grid-margin-100 !default; $ouds-grid-2xs-max-width: $core-ouds-grid-max-width-100 !default; $ouds-grid-2xs-min-width: $core-ouds-grid-min-width-100 !default; -$ouds-grid-2xs-width: $core-ouds-grid-width-100 !default; $ouds-grid-3xl-column-count: $core-ouds-grid-column-count-1200 !default; $ouds-grid-3xl-column-gap: $core-ouds-grid-column-gap-800 !default; $ouds-grid-3xl-margin: $core-ouds-grid-margin-2500 !default; $ouds-grid-3xl-max-width: $core-ouds-grid-max-width-800 !default; $ouds-grid-3xl-min-width: $core-ouds-grid-min-width-800 !default; -$ouds-grid-3xl-width: $core-ouds-grid-width-800 !default; $ouds-grid-lg-column-count: $core-ouds-grid-column-count-600 !default; $ouds-grid-lg-column-gap: $core-ouds-grid-column-gap-400 !default; $ouds-grid-lg-margin: $core-ouds-grid-margin-700 !default; $ouds-grid-lg-max-width: $core-ouds-grid-max-width-500 !default; $ouds-grid-lg-min-width: $core-ouds-grid-min-width-500 !default; -$ouds-grid-lg-width: $core-ouds-grid-width-500 !default; $ouds-grid-md-column-count: $core-ouds-grid-column-count-600 !default; $ouds-grid-md-column-gap: $core-ouds-grid-column-gap-400 !default; $ouds-grid-md-margin: $core-ouds-grid-margin-500 !default; $ouds-grid-md-max-width: $core-ouds-grid-max-width-400 !default; $ouds-grid-md-min-width: $core-ouds-grid-min-width-400 !default; -$ouds-grid-md-width: $core-ouds-grid-width-400 !default; $ouds-grid-sm-column-count: $core-ouds-grid-column-count-400 !default; $ouds-grid-sm-column-gap: $core-ouds-grid-column-gap-200 !default; $ouds-grid-sm-margin: $core-ouds-grid-margin-400 !default; $ouds-grid-sm-max-width: $core-ouds-grid-max-width-300 !default; $ouds-grid-sm-min-width: $core-ouds-grid-min-width-300 !default; -$ouds-grid-sm-width: $core-ouds-grid-width-300 !default; $ouds-grid-xl-column-count: $core-ouds-grid-column-count-1200 !default; $ouds-grid-xl-column-gap: $core-ouds-grid-column-gap-600 !default; $ouds-grid-xl-margin: $core-ouds-grid-margin-1100 !default; $ouds-grid-xl-max-width: $core-ouds-grid-max-width-600 !default; $ouds-grid-xl-min-width: $core-ouds-grid-min-width-600 !default; -$ouds-grid-xl-width: $core-ouds-grid-width-600 !default; $ouds-grid-xs-column-count: $core-ouds-grid-column-count-400 !default; $ouds-grid-xs-column-gap: $core-ouds-grid-column-gap-200 !default; $ouds-grid-xs-margin: $core-ouds-grid-margin-300 !default; $ouds-grid-xs-max-width: $core-ouds-grid-max-width-200 !default; $ouds-grid-xs-min-width: $core-ouds-grid-min-width-200 !default; -$ouds-grid-xs-width: $core-ouds-grid-width-200 !default; // scss-docs-end ouds-semantic-grid // Opacity @@ -642,6 +635,9 @@ $ouds-size-max-width-body-medium-tablet: $core-ouds-dimension-6000 !default; $ouds-size-max-width-body-small-desktop: $core-ouds-dimension-6000 !default; $ouds-size-max-width-body-small-mobile: $core-ouds-dimension-6000 !default; $ouds-size-max-width-body-small-tablet: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-boxed-text-desktop: $core-ouds-dimension-9000 !default; +$ouds-size-max-width-boxed-text-mobile: $core-ouds-dimension-7000 !default; +$ouds-size-max-width-boxed-text-tablet: $core-ouds-dimension-8000 !default; $ouds-size-max-width-display-large-desktop: $core-ouds-dimension-11000 !default; $ouds-size-max-width-display-large-mobile: $core-ouds-dimension-9000 !default; $ouds-size-max-width-display-large-tablet: $core-ouds-dimension-9000 !default; @@ -748,6 +744,7 @@ $ouds-space-padding-block-3xlarge: $ouds-dimension-2xsmall !default; $ouds-space-padding-block-3xsmall: $ouds-dimension-10xsmall !default; $ouds-space-padding-block-4xlarge: $ouds-dimension-xsmall !default; $ouds-space-padding-block-4xsmall: $ouds-dimension-11xsmall !default; +$ouds-space-padding-block-5xlarge: $ouds-dimension-small !default; $ouds-space-padding-block-large: $ouds-dimension-5xsmall !default; $ouds-space-padding-block-medium: $ouds-dimension-6xsmall !default; $ouds-space-padding-block-none: $ouds-dimension-none !default; @@ -760,6 +757,8 @@ $ouds-space-padding-inline-3xlarge: $ouds-dimension-2xsmall !default; $ouds-space-padding-inline-3xsmall: $ouds-dimension-10xsmall !default; $ouds-space-padding-inline-4xlarge: $ouds-dimension-xsmall !default; $ouds-space-padding-inline-4xsmall: $ouds-dimension-11xsmall !default; +$ouds-space-padding-inline-5xlarge: $ouds-dimension-small !default; +$ouds-space-padding-inline-6xlarge: $ouds-dimension-medium !default; $ouds-space-padding-inline-large: $ouds-dimension-5xsmall !default; $ouds-space-padding-inline-medium: $ouds-dimension-6xsmall !default; $ouds-space-padding-inline-none: $ouds-dimension-none !default; @@ -794,7 +793,7 @@ $ouds-space-scaled-medium-tablet: $ouds-dimension-3xsmall !default; $ouds-space-scaled-none-desktop: $ouds-dimension-none !default; $ouds-space-scaled-none-mobile: $ouds-dimension-none !default; $ouds-space-scaled-none-tablet: $ouds-dimension-none !default; -$ouds-space-scaled-small-desktop: $ouds-dimension-3xsmall !default; +$ouds-space-scaled-small-desktop: $ouds-dimension-4xsmall !default; $ouds-space-scaled-small-mobile: $ouds-dimension-6xsmall !default; $ouds-space-scaled-small-tablet: $ouds-dimension-5xsmall !default; $ouds-space-scaled-xlarge-desktop: $ouds-dimension-xlarge !default; diff --git a/packages/sosh/scss/tokens/_component-colors-custom-props.scss b/packages/sosh/scss/tokens/_component-colors-custom-props.scss index 646406a299..f08515d5d7 100644 --- a/packages/sosh/scss/tokens/_component-colors-custom-props.scss +++ b/packages/sosh/scss/tokens/_component-colors-custom-props.scss @@ -1,11 +1,14 @@ // Components custom properties applications -// OUDS Core tokens version 1.10.0 +// OUDS Core tokens version 1.11.0 // Sosh Core tokens version 1.4.0 -// Sosh System tokens version 2.6.0 +// Sosh System tokens version 2.7.0 // scss-docs-start ouds-all-component-css-color // scss-docs-start ouds-component-css-color @include color-mode(light, true) { + --#{$prefix}visual-assets-icon-color-content-status-warning-external-shape: #{$core-sosh-color-turbo-500}; + --#{$prefix}visual-assets-icon-color-content-status-warning-internal-shape: #{$core-sosh-color-turbo-750}; + --#{$prefix}visual-assets-icon-color-content-status-warning-inverse-external-shape: #{$core-sosh-color-turbo-300}; --#{$prefix}link-mono-color-content-enabled: #{$core-ouds-color-functional-black}; --#{$prefix}link-mono-color-content-hover: #{$core-ouds-color-functional-black}; --#{$prefix}link-mono-color-content-pressed: #{$core-sosh-color-opacity-black-520}; @@ -56,9 +59,7 @@ --#{$prefix}progress-indicator-color-content-track: #{$core-ouds-color-functional-gray-light-400}; --#{$prefix}progress-indicator-mono-color-content-track: #{$core-ouds-color-functional-gray-light-400}; --#{$prefix}progress-indicator-mono-color-content-indicator: #{$core-ouds-color-functional-black}; - --#{$prefix}icon-color-content-status-warning-external-shape: #{$core-sosh-color-turbo-500}; - --#{$prefix}icon-color-content-status-warning-internal-shape: #{$core-sosh-color-turbo-750}; - --#{$prefix}icon-color-content-status-warning-inverse-external-shape: #{$core-sosh-color-turbo-300}; + --#{$prefix}visual-assets-icon-color-content-status-warning-inverse-internal-shape: #{$ouds-color-opacity-transparent-dark}; --#{$prefix}link-color-chevron-hover: #{$ouds-color-action-hover-light}; // deprecated --#{$prefix}link-color-chevron-pressed: #{$ouds-color-action-pressed-light}; // deprecated --#{$prefix}link-color-chevron-focus: #{$ouds-color-action-focus-light}; // deprecated @@ -68,11 +69,13 @@ --#{$prefix}list-item-color-bg-loading: #{$ouds-color-action-support-loading-light}; // deprecated --#{$prefix}list-item-color-bg-focus: #{$ouds-color-action-support-focus-light}; // deprecated --#{$prefix}list-item-color-content-loader: #{$ouds-color-content-default-light}; // deprecated - --#{$prefix}icon-color-content-status-warning-inverse-internal-shape: #{$ouds-color-opacity-transparent-dark}; } // scss-docs-end ouds-component-css-color @include color-mode(dark, true) { + --#{$prefix}visual-assets-icon-color-content-status-warning-external-shape: #{$core-sosh-color-turbo-300}; + --#{$prefix}visual-assets-icon-color-content-status-warning-internal-shape: #{$ouds-color-opacity-transparent-dark}; + --#{$prefix}visual-assets-icon-color-content-status-warning-inverse-external-shape: #{$core-sosh-color-turbo-500}; --#{$prefix}link-mono-color-content-enabled: #{$core-ouds-color-functional-white}; --#{$prefix}link-mono-color-content-hover: #{$core-ouds-color-functional-white}; --#{$prefix}link-mono-color-content-pressed: #{$core-sosh-color-opacity-white-800}; @@ -123,9 +126,7 @@ --#{$prefix}progress-indicator-color-content-track: #{$core-ouds-color-functional-gray-dark-480}; --#{$prefix}progress-indicator-mono-color-content-track: #{$core-ouds-color-functional-gray-dark-480}; --#{$prefix}progress-indicator-mono-color-content-indicator: #{$core-ouds-color-functional-white}; - --#{$prefix}icon-color-content-status-warning-external-shape: #{$core-sosh-color-turbo-300}; - --#{$prefix}icon-color-content-status-warning-internal-shape: #{$ouds-color-opacity-transparent-dark}; - --#{$prefix}icon-color-content-status-warning-inverse-external-shape: #{$core-sosh-color-turbo-500}; + --#{$prefix}visual-assets-icon-color-content-status-warning-inverse-internal-shape: #{$core-sosh-color-turbo-750}; --#{$prefix}link-color-chevron-hover: #{$ouds-color-action-hover-dark}; // deprecated --#{$prefix}link-color-chevron-pressed: #{$ouds-color-action-pressed-dark}; // deprecated --#{$prefix}link-color-chevron-focus: #{$ouds-color-action-focus-dark}; // deprecated @@ -135,6 +136,5 @@ --#{$prefix}list-item-color-bg-loading: #{$ouds-color-action-support-loading-dark}; // deprecated --#{$prefix}list-item-color-bg-focus: #{$ouds-color-action-support-focus-dark}; // deprecated --#{$prefix}list-item-color-content-loader: #{$ouds-color-content-default-dark}; // deprecated - --#{$prefix}icon-color-content-status-warning-inverse-internal-shape: #{$core-sosh-color-turbo-750}; } // scss-docs-end ouds-all-component-css-color diff --git a/packages/sosh/scss/tokens/_component.scss b/packages/sosh/scss/tokens/_component.scss index 782a8afe6c..fa7de16288 100644 --- a/packages/sosh/scss/tokens/_component.scss +++ b/packages/sosh/scss/tokens/_component.scss @@ -1,8 +1,8 @@ // Component application // Depends on semantic applications -// OUDS Core tokens version 1.10.0 +// OUDS Core tokens version 1.11.0 // Sosh Core tokens version 1.4.0 -// Sosh System tokens version 2.6.0 +// Sosh System tokens version 2.7.0 // Accordion @@ -22,9 +22,9 @@ $ouds-accordion-faq-space-column-gap-tablet: $ouds-space-column-gap-medium !defa $ouds-accordion-faq-space-padding-block-bottom-expand-container-desktop: $ouds-space-padding-block-4xlarge !default; $ouds-accordion-faq-space-padding-block-bottom-expand-container-mobile: $ouds-space-padding-block-3xlarge !default; $ouds-accordion-faq-space-padding-block-bottom-expand-container-tablet: $ouds-space-padding-block-3xlarge !default; -$ouds-accordion-faq-space-padding-block-bottom-slot-list-item-container-desktop: $ouds-space-padding-block-xlarge !default; -$ouds-accordion-faq-space-padding-block-bottom-slot-list-item-container-mobile: $ouds-space-padding-block-large !default; -$ouds-accordion-faq-space-padding-block-bottom-slot-list-item-container-tablet: $ouds-space-padding-block-large !default; +$ouds-accordion-faq-space-padding-block-bottom-slot-container-desktop: $ouds-space-padding-block-xlarge !default; +$ouds-accordion-faq-space-padding-block-bottom-slot-container-mobile: $ouds-space-padding-block-large !default; +$ouds-accordion-faq-space-padding-block-bottom-slot-container-tablet: $ouds-space-padding-block-large !default; $ouds-accordion-faq-space-padding-block-desktop: $ouds-space-padding-block-large !default; $ouds-accordion-faq-space-padding-block-mobile: $ouds-space-padding-block-medium !default; $ouds-accordion-faq-space-padding-block-tablet: $ouds-space-padding-block-medium !default; @@ -36,20 +36,23 @@ $ouds-accordion-space-padding-block-top-expand-container: $ouds-space-padding-bl // Alert // scss-docs-start ouds-component-alert +$ouds-alert-banner-mode-control-action-on-status-accent: Dark to light mode !default; $ouds-alert-border-radius-default: $ouds-border-radius-default !default; $ouds-alert-border-radius-rounded: $ouds-border-radius-large !default; -$ouds-alert-border-width: $ouds-border-width-none !default; -$ouds-alert-size-icon: $ouds-size-icon-with-label-large-size-small !default; -$ouds-alert-size-min-height-bottom-action-placement: $core-ouds-dimension-1250 !default; +$ouds-alert-message-border-width: $ouds-border-width-none !default; +$ouds-alert-message-space-row-gap-bullet: $ouds-space-row-gap-none !default; +$ouds-alert-size-asset: $ouds-size-icon-with-label-large-size-small !default; +$ouds-alert-size-min-height-bottom-action: $core-ouds-dimension-1000 !default; $ouds-alert-size-min-height: $ouds-size-min-interactive-area-default !default; $ouds-alert-size-min-width: $core-ouds-dimension-2000 !default; $ouds-alert-space-column-gap-action: $ouds-space-column-gap-small !default; $ouds-alert-space-column-gap: $ouds-space-column-gap-medium !default; +$ouds-alert-space-inset-progress-indicator: $ouds-space-inset-4xsmall !default; +$ouds-alert-space-padding-block-bottom-content: $ouds-space-padding-block-3xsmall !default; $ouds-alert-space-padding-block: $ouds-space-padding-block-medium !default; $ouds-alert-space-padding-inline: $ouds-space-padding-inline-large !default; -$ouds-alert-space-row-gap-action: $ouds-space-row-gap-2xsmall !default; -$ouds-alert-space-row-gap-bullet: $ouds-space-row-gap-none !default; -$ouds-alert-space-row-gap: $ouds-space-row-gap-small !default; +$ouds-alert-space-row-gap-action: $ouds-space-row-gap-2xsmall !default; // deprecated +$ouds-alert-space-row-gap: $ouds-space-row-gap-2xsmall !default; // scss-docs-end ouds-component-alert // Badge @@ -197,6 +200,7 @@ $ouds-button-size-icon-only-small: $ouds-size-icon-with-label-large-size-xsmall $ouds-button-size-icon-small: $ouds-size-icon-with-label-medium-size-small !default; $ouds-button-size-max-size-icon-only-default: $ouds-size-min-interactive-area-default !default; $ouds-button-size-max-size-icon-only-small: $ouds-size-min-interactive-area-small !default; +$ouds-button-size-max-width: $core-ouds-dimension-4000 !default; $ouds-button-size-min-height-default: $ouds-size-min-interactive-area-default !default; $ouds-button-size-min-height-small: $ouds-size-min-interactive-area-small !default; $ouds-button-size-min-width-default: $ouds-size-min-interactive-area-default !default; @@ -229,6 +233,17 @@ $ouds-button-space-padding-inline-start-icon-end-default: $ouds-space-padding-in $ouds-button-space-padding-inline-start-icon-end-small: $ouds-space-padding-inline-2xlarge !default; // scss-docs-end ouds-component-button +// Categorical + +// scss-docs-start ouds-component-categorical +$ouds-categorical-tag-color-bg-category-1: $ouds-color-surface-brand-primary !default; +$ouds-categorical-tag-color-bg-category-2: $ouds-color-surface-brand-primary !default; +$ouds-categorical-tag-color-bg-category-3: $ouds-color-surface-brand-primary !default; +$ouds-categorical-tag-color-bg-category-4: $ouds-color-surface-brand-primary !default; +$ouds-categorical-tag-color-bg-category-5: $ouds-color-surface-brand-primary !default; +$ouds-categorical-tag-color-content: $ouds-color-content-on-brand-primary !default; +// scss-docs-end ouds-component-categorical + // Checkbox // scss-docs-start ouds-component-checkbox @@ -307,6 +322,14 @@ $ouds-chip-space-padding-inline-icon: $ouds-space-padding-inline-small !default; $ouds-divider-border-width: $ouds-border-width-thin !default; // scss-docs-end ouds-component-divider +// Fullscreen + +// scss-docs-start ouds-component-fullscreen +$ouds-fullscreen-dialog-space-inset-close-button-desktop: $ouds-space-inset-3xlarge !default; +$ouds-fullscreen-dialog-space-inset-close-button-mobile: $ouds-space-inset-large !default; +$ouds-fullscreen-dialog-space-inset-close-button-tablet: $ouds-space-inset-2xlarge !default; +// scss-docs-end ouds-component-fullscreen + // Input // scss-docs-start ouds-component-input @@ -399,7 +422,7 @@ $ouds-list-item-size-asset-xlarge: $ouds-dimension-3xlarge !default; $ouds-list-item-size-control-indicator: $ouds-size-icon-with-label-large-size-xsmall !default; $ouds-list-item-size-current-indicator-width: $core-ouds-dimension-50 !default; $ouds-list-item-size-error-icon: $ouds-size-icon-with-label-large-size-small !default; // deprecated -$ouds-list-item-size-flag-height: $ouds-size-icon-with-label-large-size-xsmall !default; +$ouds-list-item-size-flag-height: $ouds-size-icon-with-label-large-size-xsmall !default; // deprecated $ouds-list-item-size-icon: $ouds-size-icon-with-label-large-size-medium !default; // deprecated $ouds-list-item-size-loader: $ouds-size-icon-with-label-large-size-small !default; // deprecated $ouds-list-item-size-max-height-assets-container: $core-ouds-dimension-1200 !default; // deprecated @@ -423,6 +446,93 @@ $ouds-list-item-space-padding-inline: $ouds-space-padding-inline-large !default; $ouds-list-item-space-row-gap: $ouds-space-row-gap-none !default; // scss-docs-end ouds-component-list +// Modal + +// scss-docs-start ouds-component-modal +$ouds-modal-dialog-border-radius-default: $ouds-border-radius-large !default; +$ouds-modal-dialog-border-radius-rounded: $ouds-border-radius-large !default; +$ouds-modal-dialog-grid-margin-horizontal-default-desktop: 283px !default; +$ouds-modal-dialog-grid-margin-horizontal-default-large-desktop: 401px !default; +$ouds-modal-dialog-grid-margin-horizontal-default-tablet: 93px !default; +$ouds-modal-dialog-grid-margin-horizontal-mobile: 16px !default; +$ouds-modal-dialog-grid-margin-horizontal-small-desktop: 509px !default; +$ouds-modal-dialog-grid-margin-horizontal-small-large-desktop: 691px !default; +$ouds-modal-dialog-grid-margin-horizontal-small-tablet: 153px !default; +$ouds-modal-dialog-grid-margin-vertical-default-desktop: 41px !default; +$ouds-modal-dialog-grid-margin-vertical-default-large-desktop: 52px !default; +$ouds-modal-dialog-grid-margin-vertical-default-tablet: 47px !default; +$ouds-modal-dialog-grid-margin-vertical-mobile-default: 16px !default; +$ouds-modal-dialog-grid-margin-vertical-small-desktop: 164px !default; +$ouds-modal-dialog-grid-margin-vertical-small-large-desktop: 260px !default; +$ouds-modal-dialog-grid-margin-vertical-small-mobile: 190px !default; +$ouds-modal-dialog-grid-margin-vertical-small-tablet: 235px !default; +$ouds-modal-dialog-size-max-height-small-desktop: 492px !default; +$ouds-modal-dialog-size-max-height-small-large-desktop: 520px !default; +$ouds-modal-dialog-size-max-height-small-mobile: 380px !default; +$ouds-modal-dialog-size-max-height-small-tablet: 470px !default; +$ouds-modal-dialog-size-max-width-default-desktop: 1002px !default; +$ouds-modal-dialog-size-max-width-default-large-desktop: 1118px !default; +$ouds-modal-dialog-size-max-width-default-mobile: 448px !default; +$ouds-modal-dialog-size-max-width-default-tablet: 782px !default; +$ouds-modal-dialog-size-max-width-small-desktop: 486px !default; +$ouds-modal-dialog-size-max-width-small-large-desktop: 538px !default; +$ouds-modal-dialog-size-max-width-small-mobile: 448px !default; +$ouds-modal-dialog-size-max-width-small-tablet: 460px !default; +$ouds-modal-dialog-size-min-height-small-desktop: 460px !default; +$ouds-modal-dialog-size-min-height-small-large-desktop: 500px !default; +$ouds-modal-dialog-size-min-height-small-mobile: 280px !default; +$ouds-modal-dialog-size-min-height-small-tablet: 420px !default; +$ouds-modal-dialog-space-column-gap-previous-title-desktop: $ouds-space-column-gap-2xlarge !default; +$ouds-modal-dialog-space-column-gap-previous-title-mobile: $ouds-space-column-gap-large !default; +$ouds-modal-dialog-space-column-gap-previous-title-tablet: $ouds-space-column-gap-xlarge !default; +$ouds-modal-dialog-space-inset-close-button-default-desktop: $ouds-space-inset-xlarge !default; +$ouds-modal-dialog-space-inset-close-button-default-tablet: $ouds-space-inset-large !default; +$ouds-modal-dialog-space-inset-close-button-mobile: $ouds-space-inset-medium !default; +$ouds-modal-dialog-space-inset-close-button-small-desktop: $ouds-space-inset-large !default; +$ouds-modal-dialog-space-inset-close-button-small-tablet: $ouds-space-inset-medium !default; +$ouds-modal-dialog-space-padding-block-bottom-body-footer-default-desktop: $ouds-space-padding-block-xsmall !default; +$ouds-modal-dialog-space-padding-block-bottom-body-footer-default-mobile: $ouds-space-padding-block-medium !default; +$ouds-modal-dialog-space-padding-block-bottom-body-footer-default-tablet: $ouds-space-padding-block-3xsmall !default; +$ouds-modal-dialog-space-padding-block-bottom-body-footer-small-desktop: $ouds-space-padding-block-3xsmall !default; +$ouds-modal-dialog-space-padding-block-bottom-body-footer-small-mobile: $ouds-space-padding-block-medium !default; +$ouds-modal-dialog-space-padding-block-bottom-body-footer-small-tablet: $ouds-space-padding-block-3xsmall !default; +$ouds-modal-dialog-space-padding-block-bottom-default-desktop: $ouds-space-padding-block-4xlarge !default; +$ouds-modal-dialog-space-padding-block-bottom-default-tablet: $ouds-space-padding-block-3xlarge !default; +$ouds-modal-dialog-space-padding-block-bottom-mobile: $ouds-space-padding-block-2xlarge !default; +$ouds-modal-dialog-space-padding-block-bottom-small-desktop: $ouds-space-padding-block-3xlarge !default; +$ouds-modal-dialog-space-padding-block-bottom-small-tablet: $ouds-space-padding-block-2xlarge !default; +$ouds-modal-dialog-space-padding-block-bottom-sticky-footer-safe-area-desktop: 104px !default; +$ouds-modal-dialog-space-padding-block-bottom-sticky-footer-safe-area-mobile: 76px !default; +$ouds-modal-dialog-space-padding-block-bottom-sticky-footer-safe-area-tablet: 100px !default; +$ouds-modal-dialog-space-padding-block-footer-sticky-default-desktop: $ouds-space-padding-block-3xlarge !default; +$ouds-modal-dialog-space-padding-block-footer-sticky-default-tablet: $ouds-space-padding-block-3xlarge !default; +$ouds-modal-dialog-space-padding-block-footer-sticky-mobile: $ouds-space-padding-block-xlarge !default; +$ouds-modal-dialog-space-padding-block-footer-sticky-small-desktop: $ouds-space-padding-block-2xlarge !default; +$ouds-modal-dialog-space-padding-block-footer-sticky-small-tablet: $ouds-space-padding-block-2xlarge !default; +$ouds-modal-dialog-space-padding-block-top-body-default-desktop: $ouds-space-padding-block-2xlarge !default; +$ouds-modal-dialog-space-padding-block-top-body-default-mobile: $ouds-space-padding-block-large !default; +$ouds-modal-dialog-space-padding-block-top-body-default-tablet: $ouds-space-padding-block-xlarge !default; +$ouds-modal-dialog-space-padding-block-top-body-small-desktop: $ouds-space-padding-block-xlarge !default; +$ouds-modal-dialog-space-padding-block-top-body-small-mobile: $ouds-space-padding-block-large !default; +$ouds-modal-dialog-space-padding-block-top-body-small-tablet: $ouds-space-padding-block-large !default; +$ouds-modal-dialog-space-padding-block-top-default-desktop: $ouds-space-padding-block-3xlarge !default; +$ouds-modal-dialog-space-padding-block-top-default-tablet: $ouds-space-padding-block-2xlarge !default; +$ouds-modal-dialog-space-padding-block-top-footer-default-desktop: $ouds-space-padding-block-4xlarge !default; +$ouds-modal-dialog-space-padding-block-top-footer-default-mobile: $ouds-space-padding-block-2xlarge !default; +$ouds-modal-dialog-space-padding-block-top-footer-default-tablet: $ouds-space-padding-block-3xlarge !default; +$ouds-modal-dialog-space-padding-block-top-footer-small-desktop: $ouds-space-padding-block-3xlarge !default; +$ouds-modal-dialog-space-padding-block-top-footer-small-mobile: $ouds-space-padding-block-2xlarge !default; +$ouds-modal-dialog-space-padding-block-top-footer-small-tablet: $ouds-space-padding-block-2xlarge !default; +$ouds-modal-dialog-space-padding-block-top-mobile: $ouds-space-padding-block-xlarge !default; +$ouds-modal-dialog-space-padding-block-top-small-desktop: $ouds-space-padding-block-2xlarge !default; +$ouds-modal-dialog-space-padding-block-top-small-tablet: $ouds-space-padding-block-xlarge !default; +$ouds-modal-dialog-space-padding-inline-default-desktop: $ouds-space-padding-inline-6xlarge !default; +$ouds-modal-dialog-space-padding-inline-default-tablet: $ouds-space-padding-inline-4xlarge !default; +$ouds-modal-dialog-space-padding-inline-mobile: $ouds-space-padding-inline-2xlarge !default; +$ouds-modal-dialog-space-padding-inline-small-desktop: $ouds-space-padding-inline-4xlarge !default; +$ouds-modal-dialog-space-padding-inline-small-tablet: $ouds-space-padding-inline-3xlarge !default; +// scss-docs-end ouds-component-modal + // Pin // scss-docs-start ouds-component-pin @@ -477,6 +587,31 @@ $ouds-radio-button-size-min-width: $ouds-size-min-interactive-area-default !defa $ouds-select-input-size-min-width: $ouds-dimension-8xlarge !default; // scss-docs-end ouds-component-select +// Side + +// scss-docs-start ouds-component-side +$ouds-side-sheet-grid-margin-horizontal-default-desktop: 963px !default; +$ouds-side-sheet-grid-margin-horizontal-default-large-desktop: 1414px !default; +$ouds-side-sheet-grid-margin-horizontal-default-mobile: 24px !default; +$ouds-side-sheet-grid-margin-horizontal-default-tablet: 335px !default; +$ouds-side-sheet-grid-margin-horizontal-small-desktop: 1076px !default; +$ouds-side-sheet-grid-margin-horizontal-small-large-desktop: 1559px !default; +$ouds-side-sheet-grid-margin-horizontal-small-mobile: 54px !default; +$ouds-side-sheet-grid-margin-horizontal-small-tablet: 396px !default; +$ouds-side-sheet-size-max-width-default-desktop: 520px !default; +$ouds-side-sheet-size-max-width-default-large-desktop: 600px !default; +$ouds-side-sheet-size-max-width-default-mobile: 380px !default; +$ouds-side-sheet-size-max-width-default-tablet: 440px !default; +$ouds-side-sheet-size-max-width-small-desktop: 480px !default; +$ouds-side-sheet-size-max-width-small-large-desktop: 520px !default; +$ouds-side-sheet-size-max-width-small-mobile: 340px !default; +$ouds-side-sheet-size-max-width-small-tablet: 400px !default; +$ouds-side-sheet-size-min-width-small-desktop: 420px !default; +$ouds-side-sheet-size-min-width-small-large-desktop: 440px !default; +$ouds-side-sheet-size-min-width-small-mobile: 1px !default; +$ouds-side-sheet-size-min-width-small-tablet: 1px !default; +// scss-docs-end ouds-component-side + // Skeleton // scss-docs-start ouds-component-skeleton @@ -581,10 +716,35 @@ $ouds-text-input-space-padding-inline-trailing-action: $ouds-space-padding-inlin $ouds-text-input-space-row-gap-label-input: $ouds-space-row-gap-none !default; // scss-docs-end ouds-component-text +// Toast + +// scss-docs-start ouds-component-toast +$ouds-toast-border-radius-media-rounded: $ouds-border-radius-default !default; +$ouds-toast-border-radius-media: $ouds-border-radius-none !default; +$ouds-toast-size-asset-large: $ouds-dimension-3xlarge !default; +$ouds-toast-size-asset-medium: $ouds-dimension-medium !default; +$ouds-toast-size-asset-small: $ouds-size-icon-with-label-large-size-medium !default; +$ouds-toast-size-width-desktop: 422px !default; +$ouds-toast-size-width-large-desktop: 538px !default; +$ouds-toast-size-width-mobile: 374px !default; +$ouds-toast-size-width-tablet: 462px !default; +// scss-docs-end ouds-component-toast + // Typography // scss-docs-start ouds-component-typography +$ouds-typography-color-content-marker: rgba(255, 0, 0, 0) !default; $ouds-typography-heading-large-marker: false !default; -$ouds-typography-space-padding-block-bottom-heading-large-marker: $ouds-space-padding-block-none !default; -$ouds-typography-space-padding-block-top-heading-large-marker: $ouds-space-padding-block-none !default; +$ouds-typography-space-padding-block-bottom-heading-large-marker: $ouds-space-padding-block-none !default; // deprecated +$ouds-typography-space-padding-block-top-heading-large-marker: $ouds-space-padding-block-none !default; // deprecated // scss-docs-end ouds-component-typography + +// Visual + +// scss-docs-start ouds-component-visual +$ouds-visual-assets-icon-brand: sosh !default; +$ouds-visual-assets-icon-color-content-status-warning-external-shape: var(--#{$prefix}visual-assets-icon-color-content-status-warning-external-shape) !default; +$ouds-visual-assets-icon-color-content-status-warning-internal-shape: var(--#{$prefix}visual-assets-icon-color-content-status-warning-internal-shape) !default; +$ouds-visual-assets-icon-color-content-status-warning-inverse-external-shape: var(--#{$prefix}visual-assets-icon-color-content-status-warning-inverse-external-shape) !default; +$ouds-visual-assets-icon-color-content-status-warning-inverse-internal-shape: var(--#{$prefix}visual-assets-icon-color-content-status-warning-inverse-internal-shape) !default; +// scss-docs-end ouds-component-visual diff --git a/packages/sosh/scss/tokens/_raw.scss b/packages/sosh/scss/tokens/_raw.scss index bd17cf6c7e..1ed75a1f20 100644 --- a/packages/sosh/scss/tokens/_raw.scss +++ b/packages/sosh/scss/tokens/_raw.scss @@ -1,8 +1,8 @@ // Raw primitive values // Insertion of brand foundations -// OUDS Core tokens version 1.10.0 +// OUDS Core tokens version 1.11.0 // Sosh Core tokens version 1.4.0 -// Sosh System tokens version 2.6.0 +// Sosh System tokens version 2.7.0 // Border @@ -38,83 +38,6 @@ $core-ouds-border-width-200: $core-ouds-border-base * 2 !default; // 8px // Color // scss-docs-start ouds-raw-color -$core-orange-color-decorative-amber-100: #fff0cc !default; -$core-orange-color-decorative-amber-200: #ffe199 !default; -$core-orange-color-decorative-amber-300: #ffd266 !default; -$core-orange-color-decorative-amber-400: #ffc333 !default; -$core-orange-color-decorative-amber-500: #ffb400 !default; -$core-orange-color-decorative-amber-600: #cc9000 !default; -$core-orange-color-decorative-amber-700: #996c00 !default; -$core-orange-color-decorative-amber-800: #664800 !default; -$core-orange-color-decorative-amber-900: #332400 !default; -$core-orange-color-decorative-amethyst-100: #f1ecf9 !default; -$core-orange-color-decorative-amethyst-200: #e0d4f2 !default; -$core-orange-color-decorative-amethyst-300: #c5ade6 !default; -$core-orange-color-decorative-amethyst-400: #a885d8 !default; -$core-orange-color-decorative-amethyst-500: #8d60cd !default; -$core-orange-color-decorative-amethyst-600: #5b2f98 !default; -$core-orange-color-decorative-amethyst-700: #432371 !default; -$core-orange-color-decorative-amethyst-800: #2c174a !default; -$core-orange-color-decorative-amethyst-900: #150b23 !default; -$core-orange-color-decorative-deep-peach-100: #fbebdf !default; -$core-orange-color-decorative-deep-peach-200: #f4cfb2 !default; -$core-orange-color-decorative-deep-peach-300: #e3b591 !default; -$core-orange-color-decorative-deep-peach-400: #c19372 !default; -$core-orange-color-decorative-deep-peach-500: #cf7e3f !default; -$core-orange-color-decorative-deep-peach-600: #aa6631 !default; -$core-orange-color-decorative-deep-peach-700: #7e4f2a !default; -$core-orange-color-decorative-deep-peach-800: #553720 !default; -$core-orange-color-decorative-deep-peach-900: #2e2014 !default; -$core-orange-color-decorative-emerald-100: #e5f5ed !default; -$core-orange-color-decorative-emerald-200: #c0e8d4 !default; -$core-orange-color-decorative-emerald-300: #9bdaba !default; -$core-orange-color-decorative-emerald-400: #75cca1 !default; -$core-orange-color-decorative-emerald-500: #50be87 !default; -$core-orange-color-decorative-emerald-600: #3ba06e !default; -$core-orange-color-decorative-emerald-700: #2e7b54 !default; -$core-orange-color-decorative-emerald-800: #20563b !default; -$core-orange-color-decorative-emerald-900: #123021 !default; -$core-orange-color-decorative-shocking-pink-100: #ffe5f6 !default; -$core-orange-color-decorative-shocking-pink-200: #ffb4e6 !default; -$core-orange-color-decorative-shocking-pink-300: #ff80d4 !default; -$core-orange-color-decorative-shocking-pink-400: #ff4dc3 !default; -$core-orange-color-decorative-shocking-pink-500: #ff1ab2 !default; -$core-orange-color-decorative-shocking-pink-600: #e50099 !default; -$core-orange-color-decorative-shocking-pink-700: #b20077 !default; -$core-orange-color-decorative-shocking-pink-800: #800055 !default; -$core-orange-color-decorative-shocking-pink-900: #4d0033 !default; -$core-orange-color-decorative-sky-100: #d2ecf9 !default; -$core-orange-color-decorative-sky-200: #a5daf3 !default; -$core-orange-color-decorative-sky-300: #79c7ec !default; -$core-orange-color-decorative-sky-400: #4ab4e6 !default; -$core-orange-color-decorative-sky-500: #1fa2e0 !default; -$core-orange-color-decorative-sky-600: #1982b3 !default; -$core-orange-color-decorative-sky-700: #136186 !default; -$core-orange-color-decorative-sky-800: #0c415a !default; -$core-orange-color-decorative-sky-900: #06202d !default; -$core-orange-color-opacity-warm-gray-80: rgba(189, 121, 60, .08) !default; -$core-orange-color-opacity-warm-gray-400: rgba(104, 93, 80, .4) !default; -$core-orange-color-orange-50: #fff2e6 !default; -$core-orange-color-orange-100: #ffd5b0 !default; -$core-orange-color-orange-200: #ffc18a !default; -$core-orange-color-orange-300: #ffa554 !default; -$core-orange-color-orange-400: #ff9433 !default; -$core-orange-color-orange-500: #ff7900 !default; -$core-orange-color-orange-550: #f15e00 !default; -$core-orange-color-orange-600: #e86e00 !default; -$core-orange-color-orange-700: #b55600 !default; -$core-orange-color-orange-800: #8c4300 !default; -$core-orange-color-orange-900: #6b3300 !default; -$core-orange-color-warm-gray-100: #f9f5f0 !default; -$core-orange-color-warm-gray-200: #e9ddce !default; -$core-orange-color-warm-gray-300: #d6c4ae !default; -$core-orange-color-warm-gray-400: #c1ab90 !default; -$core-orange-color-warm-gray-500: #a99275 !default; -$core-orange-color-warm-gray-600: #8a7860 !default; -$core-orange-color-warm-gray-700: #685d50 !default; -$core-orange-color-warm-gray-800: #48433d !default; -$core-orange-color-warm-gray-900: #353228 !default; -$core-orange-color-warm-gray-1000: #23211a !default; $core-ouds-color-functional-amethyst-400: #a885d8 !default; $core-ouds-color-functional-amethyst-600: #5b2f98 !default; $core-ouds-color-functional-black: #000 !default; @@ -130,7 +53,7 @@ $core-ouds-color-functional-dodger-blue-900: #003857 !default; $core-ouds-color-functional-gray-dark-80: #7a7a7a !default; $core-ouds-color-functional-gray-dark-160: #707070 !default; $core-ouds-color-functional-gray-dark-240: #666 !default; -$core-ouds-color-functional-gray-dark-320: #5c5c5c !default; +$core-ouds-color-functional-gray-dark-320: #595959 !default; $core-ouds-color-functional-gray-dark-400: #555 !default; $core-ouds-color-functional-gray-dark-480: #444 !default; $core-ouds-color-functional-gray-dark-560: #3b3b3b !default; @@ -411,6 +334,7 @@ $core-ouds-dimension-4000: $core-ouds-dimension-base * 120 !default; // 480px $core-ouds-dimension-5000: $core-ouds-dimension-base * 140 !default; // 560px $core-ouds-dimension-6000: $core-ouds-dimension-base * 160 !default; // 640px $core-ouds-dimension-7000: $core-ouds-dimension-base * 180 !default; // 720px +$core-ouds-dimension-8000: $core-ouds-dimension-base * 200 !default; // 800px $core-ouds-dimension-9000: $core-ouds-dimension-base * 220 !default; // 880px $core-ouds-dimension-11000: $core-ouds-dimension-base * 260 !default; // 1040px $core-ouds-dimension-out-of-system-25: $core-ouds-dimension-base * .25 !default; // 1px @@ -423,6 +347,7 @@ $core-ouds-dimension-out-of-system-250: $core-ouds-dimension-base * 2.5 !default // Effect // scss-docs-start ouds-raw-effect +$core-ouds-effect-blur-80: 8px !default; $core-ouds-effect-blur-320: 32px !default; $core-ouds-effect-blur-480: 48px !default; // scss-docs-end ouds-raw-effect @@ -555,14 +480,6 @@ $core-ouds-grid-min-width-500: 1024px !default; $core-ouds-grid-min-width-600: 1320px !default; $core-ouds-grid-min-width-700: 1640px !default; $core-ouds-grid-min-width-800: 1880px !default; -$core-ouds-grid-width-100: 360px !default; -$core-ouds-grid-width-200: 390px !default; -$core-ouds-grid-width-300: 480px !default; -$core-ouds-grid-width-400: 768px !default; -$core-ouds-grid-width-500: 1024px !default; -$core-ouds-grid-width-600: 1440px !default; -$core-ouds-grid-width-700: 1680px !default; -$core-ouds-grid-width-800: 1920px !default; $core-ouds-grid-column-gap-10: $core-ouds-dimension-base * .25 !default; // 1px $core-ouds-grid-column-gap-100: $core-ouds-dimension-base * 2 !default; // 8px $core-ouds-grid-column-gap-200: $core-ouds-dimension-base * 4 !default; // 16px diff --git a/packages/sosh/scss/tokens/_semantic-colors-custom-props.scss b/packages/sosh/scss/tokens/_semantic-colors-custom-props.scss index 6b0fb24918..1ee4bcffe5 100644 --- a/packages/sosh/scss/tokens/_semantic-colors-custom-props.scss +++ b/packages/sosh/scss/tokens/_semantic-colors-custom-props.scss @@ -1,7 +1,7 @@ // Semantic custom properties applications -// OUDS Core tokens version 1.10.0 +// OUDS Core tokens version 1.11.0 // Sosh Core tokens version 1.4.0 -// Sosh System tokens version 2.6.0 +// Sosh System tokens version 2.7.0 // scss-docs-start ouds-all-semantic-css-color // scss-docs-start ouds-semantic-css-color diff --git a/packages/sosh/scss/tokens/_semantic.scss b/packages/sosh/scss/tokens/_semantic.scss index 71c78517ee..e473d6de66 100644 --- a/packages/sosh/scss/tokens/_semantic.scss +++ b/packages/sosh/scss/tokens/_semantic.scss @@ -1,8 +1,8 @@ // Semantic applications // Depends on raw primitive values -// OUDS Core tokens version 1.10.0 +// OUDS Core tokens version 1.11.0 // Sosh Core tokens version 1.4.0 -// Sosh System tokens version 2.6.0 +// Sosh System tokens version 2.7.0 // Border @@ -349,6 +349,7 @@ $ouds-dimension-xsmall: $core-ouds-dimension-400 !default; // Effect // scss-docs-start ouds-semantic-effect +$ouds-effect-blur-backdrop: $core-ouds-effect-blur-80 !default; $ouds-effect-blur-drag: $core-ouds-effect-blur-480 !default; // scss-docs-end ouds-semantic-effect @@ -529,49 +530,41 @@ $ouds-grid-2xl-margin: $core-ouds-grid-margin-1700 !default; $ouds-grid-2xl-max-width: $core-ouds-grid-max-width-700 !default; $ouds-grid-2xl-max-width-alt: $core-ouds-grid-max-width-650 !default; $ouds-grid-2xl-min-width: $core-ouds-grid-min-width-700 !default; -$ouds-grid-2xl-width: $core-ouds-grid-width-700 !default; $ouds-grid-2xs-column-count: $core-ouds-grid-column-count-400 !default; $ouds-grid-2xs-column-gap: $core-ouds-grid-column-gap-100 !default; $ouds-grid-2xs-margin: $core-ouds-grid-margin-100 !default; $ouds-grid-2xs-max-width: $core-ouds-grid-max-width-100 !default; $ouds-grid-2xs-min-width: $core-ouds-grid-min-width-100 !default; -$ouds-grid-2xs-width: $core-ouds-grid-width-100 !default; $ouds-grid-3xl-column-count: $core-ouds-grid-column-count-1200 !default; $ouds-grid-3xl-column-gap: $core-ouds-grid-column-gap-800 !default; $ouds-grid-3xl-margin: $core-ouds-grid-margin-2500 !default; $ouds-grid-3xl-max-width: $core-ouds-grid-max-width-800 !default; $ouds-grid-3xl-min-width: $core-ouds-grid-min-width-800 !default; -$ouds-grid-3xl-width: $core-ouds-grid-width-800 !default; $ouds-grid-lg-column-count: $core-ouds-grid-column-count-600 !default; $ouds-grid-lg-column-gap: $core-ouds-grid-column-gap-400 !default; $ouds-grid-lg-margin: $core-ouds-grid-margin-700 !default; $ouds-grid-lg-max-width: $core-ouds-grid-max-width-500 !default; $ouds-grid-lg-min-width: $core-ouds-grid-min-width-500 !default; -$ouds-grid-lg-width: $core-ouds-grid-width-500 !default; $ouds-grid-md-column-count: $core-ouds-grid-column-count-600 !default; $ouds-grid-md-column-gap: $core-ouds-grid-column-gap-400 !default; $ouds-grid-md-margin: $core-ouds-grid-margin-500 !default; $ouds-grid-md-max-width: $core-ouds-grid-max-width-400 !default; $ouds-grid-md-min-width: $core-ouds-grid-min-width-400 !default; -$ouds-grid-md-width: $core-ouds-grid-width-400 !default; $ouds-grid-sm-column-count: $core-ouds-grid-column-count-400 !default; $ouds-grid-sm-column-gap: $core-ouds-grid-column-gap-200 !default; $ouds-grid-sm-margin: $core-ouds-grid-margin-400 !default; $ouds-grid-sm-max-width: $core-ouds-grid-max-width-300 !default; $ouds-grid-sm-min-width: $core-ouds-grid-min-width-300 !default; -$ouds-grid-sm-width: $core-ouds-grid-width-300 !default; $ouds-grid-xl-column-count: $core-ouds-grid-column-count-1200 !default; $ouds-grid-xl-column-gap: $core-ouds-grid-column-gap-600 !default; $ouds-grid-xl-margin: $core-ouds-grid-margin-1100 !default; $ouds-grid-xl-max-width: $core-ouds-grid-max-width-600 !default; $ouds-grid-xl-min-width: $core-ouds-grid-min-width-600 !default; -$ouds-grid-xl-width: $core-ouds-grid-width-600 !default; $ouds-grid-xs-column-count: $core-ouds-grid-column-count-400 !default; $ouds-grid-xs-column-gap: $core-ouds-grid-column-gap-200 !default; $ouds-grid-xs-margin: $core-ouds-grid-margin-300 !default; $ouds-grid-xs-max-width: $core-ouds-grid-max-width-200 !default; $ouds-grid-xs-min-width: $core-ouds-grid-min-width-200 !default; -$ouds-grid-xs-width: $core-ouds-grid-width-200 !default; // scss-docs-end ouds-semantic-grid // Opacity @@ -662,6 +655,9 @@ $ouds-size-max-width-body-medium-tablet: $core-ouds-dimension-6000 !default; $ouds-size-max-width-body-small-desktop: $core-ouds-dimension-6000 !default; $ouds-size-max-width-body-small-mobile: $core-ouds-dimension-6000 !default; $ouds-size-max-width-body-small-tablet: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-boxed-text-desktop: $core-ouds-dimension-9000 !default; +$ouds-size-max-width-boxed-text-mobile: $core-ouds-dimension-7000 !default; +$ouds-size-max-width-boxed-text-tablet: $core-ouds-dimension-8000 !default; $ouds-size-max-width-display-large-desktop: $core-ouds-dimension-11000 !default; $ouds-size-max-width-display-large-mobile: $core-ouds-dimension-9000 !default; $ouds-size-max-width-display-large-tablet: $core-ouds-dimension-9000 !default; @@ -768,6 +764,7 @@ $ouds-space-padding-block-3xlarge: $ouds-dimension-2xsmall !default; $ouds-space-padding-block-3xsmall: $ouds-dimension-10xsmall !default; $ouds-space-padding-block-4xlarge: $ouds-dimension-xsmall !default; $ouds-space-padding-block-4xsmall: $ouds-dimension-11xsmall !default; +$ouds-space-padding-block-5xlarge: $ouds-dimension-small !default; $ouds-space-padding-block-large: $ouds-dimension-5xsmall !default; $ouds-space-padding-block-medium: $ouds-dimension-6xsmall !default; $ouds-space-padding-block-none: $ouds-dimension-none !default; @@ -780,6 +777,8 @@ $ouds-space-padding-inline-3xlarge: $ouds-dimension-2xsmall !default; $ouds-space-padding-inline-3xsmall: $ouds-dimension-10xsmall !default; $ouds-space-padding-inline-4xlarge: $ouds-dimension-xsmall !default; $ouds-space-padding-inline-4xsmall: $ouds-dimension-11xsmall !default; +$ouds-space-padding-inline-5xlarge: $ouds-dimension-small !default; +$ouds-space-padding-inline-6xlarge: $ouds-dimension-medium !default; $ouds-space-padding-inline-large: $ouds-dimension-5xsmall !default; $ouds-space-padding-inline-medium: $ouds-dimension-6xsmall !default; $ouds-space-padding-inline-none: $ouds-dimension-none !default; @@ -814,7 +813,7 @@ $ouds-space-scaled-medium-tablet: $ouds-dimension-3xsmall !default; $ouds-space-scaled-none-desktop: $ouds-dimension-none !default; $ouds-space-scaled-none-mobile: $ouds-dimension-none !default; $ouds-space-scaled-none-tablet: $ouds-dimension-none !default; -$ouds-space-scaled-small-desktop: $ouds-dimension-3xsmall !default; +$ouds-space-scaled-small-desktop: $ouds-dimension-4xsmall !default; $ouds-space-scaled-small-mobile: $ouds-dimension-6xsmall !default; $ouds-space-scaled-small-tablet: $ouds-dimension-5xsmall !default; $ouds-space-scaled-xlarge-desktop: $ouds-dimension-xlarge !default; diff --git a/site/data/_components-versions.yml b/site/data/_components-versions.yml index e035725e1d..b8af106b95 100644 --- a/site/data/_components-versions.yml +++ b/site/data/_components-versions.yml @@ -1,7 +1,15 @@ # Components versions +- name: 'accordion-card-item' + value: '1.0.0' +- name: 'accordion-faq' + value: '1.0.0' +- name: 'accordion-list-item' + value: '1.0.0' +- name: 'alert-banner' + value: '1.0.0' - name: 'alert-message' - value: '1.1.1' + value: '1.2.0' - name: 'app-bar' value: '1.0.0' - name: 'assistant-button' @@ -21,13 +29,17 @@ - name: 'bullet-list' value: '1.1.0' - name: 'button' - value: '3.3.0' + value: '3.4.0' +- name: 'categorical-tag' + value: '1.0.0' - name: 'checkbox' value: '2.4.0' +- name: 'circular-progress-indicator' + value: '1.2.0' - name: 'divider' value: '1.0.0' - name: 'expand-button' - value: '3.2.0' + value: '3.3.0' - name: 'expand-link' value: '2.4.0' - name: 'fab' @@ -36,44 +48,50 @@ value: '1.5.0' - name: 'filter-chip-expand' value: '1.5.0' +- name: 'fullscreen-dialog-web' + value: '1.0.0' - name: 'inline-alert' value: '1.0.0' - name: 'input-tag' value: '1.2.0' - name: 'interactive-icon' - value: '1.0.0' + value: '1.1.0' +- name: 'linear-progress-indicator' + value: '1.1.0' - name: 'link' - value: '2.4.0' -- name: 'modal-dialog' + value: '2.3.0' +- name: 'modal-dialog-android' value: '0.0.0' +- name: 'modal-dialog-web' + value: '1.0.0' - name: 'navigation-bar' value: '1.0.0' - name: 'navigation-button' - value: '3.3.0' + value: '3.4.0' - name: 'navigation-card-item' - value: '1.0.0' + value: '1.2.0' - name: 'navigation-list-item' - value: '1.0.0' + value: '1.2.0' - name: 'password-input' - value: '1.3.0' + value: '1.3.1' - name: 'phone-number-input' - value: '1.3.0' + value: '1.3.1' - name: 'pin-code-input' value: '1.3.0' -- name: 'progress-indicator' - value: '1.0.0' - name: 'quantity-input' - value: '1.3.0' + value: '1.3.1' - name: 'radio-button' value: '1.4.0' - name: 'select-input' - value: '1.3.0' + value: '1.3.1' +- name: 'side-sheet-web' + value: '1.0.0' - name: 'skeleton' value: '1.0.0' - name: 'static-card-item' - value: '1.0.0' + value: '1.2.0' - name: 'static-list-item' - value: '1.0.0' + value: '1.2.0' - name: 'status-icon' value: '1.0.0' - name: 'suggestion-chip' @@ -85,14 +103,16 @@ - name: 'tag' value: '1.5.0' - name: 'text-area' - value: '1.2.0' + value: '1.2.1' - name: 'text-input' - value: '1.4.0' + value: '1.4.1' +- name: 'toast' + value: '1.0.0' - name: 'toolbar' value: '1.0.0' - name: 'toolbar-bottom' value: '1.0.0' - name: 'toolbar-top' - value: '1.0.0' + value: '1.1.0' - name: 'typography' - value: '1.0.0' + value: '1.1.0' \ No newline at end of file From d0b1f0e1c9c29911148906577eec3efa144e098b Mon Sep 17 00:00:00 2001 From: Maxime Lardenois Date: Mon, 14 Sep 2026 14:30:03 +0200 Subject: [PATCH 13/52] fix to compile --- packages/sosh/scss/tokens/_raw.scss | 78 ++++++++++++++++++++++++++++- scss/_alert.scss | 10 ++-- 2 files changed, 82 insertions(+), 6 deletions(-) diff --git a/packages/sosh/scss/tokens/_raw.scss b/packages/sosh/scss/tokens/_raw.scss index 1ed75a1f20..84780616ab 100644 --- a/packages/sosh/scss/tokens/_raw.scss +++ b/packages/sosh/scss/tokens/_raw.scss @@ -37,7 +37,83 @@ $core-ouds-border-width-200: $core-ouds-border-base * 2 !default; // 8px // Color -// scss-docs-start ouds-raw-color +// scss-docs-start ouds-raw-color$core-orange-color-decorative-amber-100: #fff0cc !default; +$core-orange-color-decorative-amber-200: #ffe199 !default; +$core-orange-color-decorative-amber-300: #ffd266 !default; +$core-orange-color-decorative-amber-400: #ffc333 !default; +$core-orange-color-decorative-amber-500: #ffb400 !default; +$core-orange-color-decorative-amber-600: #cc9000 !default; +$core-orange-color-decorative-amber-700: #996c00 !default; +$core-orange-color-decorative-amber-800: #664800 !default; +$core-orange-color-decorative-amber-900: #332400 !default; +$core-orange-color-decorative-amethyst-100: #f1ecf9 !default; +$core-orange-color-decorative-amethyst-200: #e0d4f2 !default; +$core-orange-color-decorative-amethyst-300: #c5ade6 !default; +$core-orange-color-decorative-amethyst-400: #a885d8 !default; +$core-orange-color-decorative-amethyst-500: #8d60cd !default; +$core-orange-color-decorative-amethyst-600: #5b2f98 !default; +$core-orange-color-decorative-amethyst-700: #432371 !default; +$core-orange-color-decorative-amethyst-800: #2c174a !default; +$core-orange-color-decorative-amethyst-900: #150b23 !default; +$core-orange-color-decorative-deep-peach-100: #fbebdf !default; +$core-orange-color-decorative-deep-peach-200: #f4cfb2 !default; +$core-orange-color-decorative-deep-peach-300: #e3b591 !default; +$core-orange-color-decorative-deep-peach-400: #c19372 !default; +$core-orange-color-decorative-deep-peach-500: #cf7e3f !default; +$core-orange-color-decorative-deep-peach-600: #aa6631 !default; +$core-orange-color-decorative-deep-peach-700: #7e4f2a !default; +$core-orange-color-decorative-deep-peach-800: #553720 !default; +$core-orange-color-decorative-deep-peach-900: #2e2014 !default; +$core-orange-color-decorative-emerald-100: #e5f5ed !default; +$core-orange-color-decorative-emerald-200: #c0e8d4 !default; +$core-orange-color-decorative-emerald-300: #9bdaba !default; +$core-orange-color-decorative-emerald-400: #75cca1 !default; +$core-orange-color-decorative-emerald-500: #50be87 !default; +$core-orange-color-decorative-emerald-600: #3ba06e !default; +$core-orange-color-decorative-emerald-700: #2e7b54 !default; +$core-orange-color-decorative-emerald-800: #20563b !default; +$core-orange-color-decorative-emerald-900: #123021 !default; +$core-orange-color-decorative-shocking-pink-100: #ffe5f6 !default; +$core-orange-color-decorative-shocking-pink-200: #ffb4e6 !default; +$core-orange-color-decorative-shocking-pink-300: #ff80d4 !default; +$core-orange-color-decorative-shocking-pink-400: #ff4dc3 !default; +$core-orange-color-decorative-shocking-pink-500: #ff1ab2 !default; +$core-orange-color-decorative-shocking-pink-600: #e50099 !default; +$core-orange-color-decorative-shocking-pink-700: #b20077 !default; +$core-orange-color-decorative-shocking-pink-800: #800055 !default; +$core-orange-color-decorative-shocking-pink-900: #4d0033 !default; +$core-orange-color-decorative-sky-100: #d2ecf9 !default; +$core-orange-color-decorative-sky-200: #a5daf3 !default; +$core-orange-color-decorative-sky-300: #79c7ec !default; +$core-orange-color-decorative-sky-400: #4ab4e6 !default; +$core-orange-color-decorative-sky-500: #1fa2e0 !default; +$core-orange-color-decorative-sky-600: #1982b3 !default; +$core-orange-color-decorative-sky-700: #136186 !default; +$core-orange-color-decorative-sky-800: #0c415a !default; +$core-orange-color-decorative-sky-900: #06202d !default; +$core-orange-color-opacity-warm-gray-80: rgba(189, 121, 60, .08) !default; +$core-orange-color-opacity-warm-gray-400: rgba(104, 93, 80, .4) !default; +$core-orange-color-orange-50: #fff2e6 !default; +$core-orange-color-orange-100: #ffd5b0 !default; +$core-orange-color-orange-200: #ffc18a !default; +$core-orange-color-orange-300: #ffa554 !default; +$core-orange-color-orange-400: #ff9433 !default; +$core-orange-color-orange-500: #ff7900 !default; +$core-orange-color-orange-550: #f15e00 !default; +$core-orange-color-orange-600: #e86e00 !default; +$core-orange-color-orange-700: #b55600 !default; +$core-orange-color-orange-800: #8c4300 !default; +$core-orange-color-orange-900: #6b3300 !default; +$core-orange-color-warm-gray-100: #f9f5f0 !default; +$core-orange-color-warm-gray-200: #e9ddce !default; +$core-orange-color-warm-gray-300: #d6c4ae !default; +$core-orange-color-warm-gray-400: #c1ab90 !default; +$core-orange-color-warm-gray-500: #a99275 !default; +$core-orange-color-warm-gray-600: #8a7860 !default; +$core-orange-color-warm-gray-700: #685d50 !default; +$core-orange-color-warm-gray-800: #48433d !default; +$core-orange-color-warm-gray-900: #353228 !default; +$core-orange-color-warm-gray-1000: #23211a !default; $core-ouds-color-functional-amethyst-400: #a885d8 !default; $core-ouds-color-functional-amethyst-600: #5b2f98 !default; $core-ouds-color-functional-black: #000 !default; diff --git a/scss/_alert.scss b/scss/_alert.scss index dbd64eaaa7..589d73ee21 100644 --- a/scss/_alert.scss +++ b/scss/_alert.scss @@ -28,14 +28,14 @@ min-height: $ouds-alert-size-min-height; padding-inline: $ouds-alert-space-padding-inline; background-color: var(--#{$prefix}alert-bg); - border: var(--#{$prefix}alert-border-color) solid $ouds-alert-border-width; + border: var(--#{$prefix}alert-border-color) solid $ouds-alert-message-border-width; &:has(.btn-close) { padding-right: 0; } &:has(.alert-container > .link) { - min-height: $ouds-alert-size-min-height-bottom-action-placement; + min-height: $ouds-alert-size-min-height-bottom-action; } // To avoid overflow: hidden that hides the focus @@ -54,8 +54,8 @@ position: relative; display: block; flex-shrink: 0; - width: px-to-rem($ouds-alert-size-icon); - height: px-to-rem($ouds-alert-size-icon); + width: px-to-rem($ouds-alert-size-asset); + height: px-to-rem($ouds-alert-size-asset); margin-top: var(--#{$prefix}alert-icon-margin-block); color: var(--#{$prefix}alert-icon-color); @@ -84,7 +84,7 @@ .icon { width: 100%; height: 100%; - font-size: $ouds-alert-size-icon; + font-size: $ouds-alert-size-asset; line-height: 1; vertical-align: baseline; // Remove some weird stuff on zoom // TODO: For reboot maybe ? } From eba324986e0f5ba4a28a39c2d8197816db12d55c Mon Sep 17 00:00:00 2001 From: Maxime Lardenois Date: Mon, 14 Sep 2026 14:31:50 +0200 Subject: [PATCH 14/52] fix css tests --- .../__snapshots__/ouds-web-bootstrap.css | 36 +++++++++++-------- .../snapshot-tests/__snapshots__/ouds-web.css | 36 +++++++++++-------- 2 files changed, 44 insertions(+), 28 deletions(-) diff --git a/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css b/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css index c615e1b463..afef118322 100644 --- a/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css +++ b/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css @@ -56,7 +56,7 @@ --bs-color-border-minimal: rgba(0, 0, 0, 0.04); --bs-color-border-muted: rgba(0, 0, 0, 0.12); --bs-color-border-on-brand-primary: #000; - --bs-color-border-status-accent: #ff7900; + --bs-color-border-status-accent: #f15e00; --bs-color-border-status-info: #0073b2; --bs-color-border-status-negative: #db0002; --bs-color-border-status-positive: #138126; @@ -85,7 +85,7 @@ --bs-color-content-on-status-positive-muted: #000; --bs-color-content-on-status-warning-emphasized: #000; --bs-color-content-on-status-warning-muted: #000; - --bs-color-content-status-accent: #ff7900; + --bs-color-content-status-accent: #f15e00; --bs-color-content-status-info: #0073b2; --bs-color-content-status-inverse-info: #8ad5ff; --bs-color-content-status-inverse-negative: #ff8081; @@ -109,7 +109,7 @@ --bs-color-surface-inverse-low: #272727; --bs-color-surface-primary: #fff; --bs-color-surface-secondary: rgba(0, 0, 0, 0.04); - --bs-color-surface-status-accent-emphasized: #ff7900; + --bs-color-surface-status-accent-emphasized: #f15e00; --bs-color-surface-status-accent-muted: rgba(189, 121, 60, 0.08); --bs-color-surface-status-info-emphasized: #0073b2; --bs-color-surface-status-info-muted: rgba(38, 178, 255, 0.08); @@ -246,6 +246,9 @@ [data-bs-theme=light], :root[data-bs-theme=light] [data-bs-theme=root], :root[data-bs-theme=dark] [data-bs-theme=root-inverted] { + --bs-visual-assets-icon-color-content-status-warning-external-shape: #ffd000; + --bs-visual-assets-icon-color-content-status-warning-internal-shape: #856a00; + --bs-visual-assets-icon-color-content-status-warning-inverse-external-shape: #ffe270; --bs-link-mono-color-content-enabled: #000; --bs-link-mono-color-content-hover: #000; --bs-link-mono-color-content-pressed: rgba(0, 0, 0, 0.52); @@ -293,12 +296,14 @@ --bs-switch-color-track-selected-interaction: #138126; --bs-switch-color-track-unselected: rgba(0, 0, 0, 0.44); --bs-switch-color-track-unselected-interaction: rgba(0, 0, 0, 0.52); + --bs-categorical-tag-color-bg-category-1: #50be87; + --bs-categorical-tag-color-bg-category-2: #4ab4e6; + --bs-categorical-tag-color-bg-category-3: #ffb400; + --bs-categorical-tag-color-bg-category-4: #a885d8; --bs-progress-indicator-color-content-track: #ccc; --bs-progress-indicator-mono-color-content-track: #ccc; --bs-progress-indicator-mono-color-content-indicator: #000; - --bs-icon-color-content-status-warning-external-shape: #ffd000; - --bs-icon-color-content-status-warning-internal-shape: #856a00; - --bs-icon-color-content-status-warning-inverse-external-shape: #ffe270; + --bs-visual-assets-icon-color-content-status-warning-inverse-internal-shape: rgba(255, 255, 255, 0); --bs-link-color-chevron-hover: #f15e00; --bs-link-color-chevron-pressed: #f15e00; --bs-link-color-chevron-focus: #f15e00; @@ -308,13 +313,15 @@ --bs-list-item-color-bg-loading: rgba(0, 0, 0, 0.12); --bs-list-item-color-bg-focus: rgba(0, 0, 0, 0.08); --bs-list-item-color-content-loader: #000; - --bs-icon-color-content-status-warning-inverse-internal-shape: rgba(255, 255, 255, 0); } [data-bs-theme=dark], :root[data-bs-theme=dark], :root[data-bs-theme=dark] [data-bs-theme=root], :root[data-bs-theme=light] [data-bs-theme=root-inverted] { + --bs-visual-assets-icon-color-content-status-warning-external-shape: #ffe270; + --bs-visual-assets-icon-color-content-status-warning-internal-shape: rgba(255, 255, 255, 0); + --bs-visual-assets-icon-color-content-status-warning-inverse-external-shape: #ffd000; --bs-link-mono-color-content-enabled: #fff; --bs-link-mono-color-content-hover: #fff; --bs-link-mono-color-content-pressed: rgba(255, 255, 255, 0.8); @@ -362,12 +369,14 @@ --bs-switch-color-track-selected-interaction: #94f0a4; --bs-switch-color-track-unselected: rgba(255, 255, 255, 0.64); --bs-switch-color-track-unselected-interaction: rgba(255, 255, 255, 0.8); + --bs-categorical-tag-color-bg-category-1: #75cca1; + --bs-categorical-tag-color-bg-category-2: #79c7ec; + --bs-categorical-tag-color-bg-category-3: #ffd266; + --bs-categorical-tag-color-bg-category-4: #c5ade6; --bs-progress-indicator-color-content-track: #444; --bs-progress-indicator-mono-color-content-track: #444; --bs-progress-indicator-mono-color-content-indicator: #fff; - --bs-icon-color-content-status-warning-external-shape: #ffe270; - --bs-icon-color-content-status-warning-internal-shape: rgba(255, 255, 255, 0); - --bs-icon-color-content-status-warning-inverse-external-shape: #ffd000; + --bs-visual-assets-icon-color-content-status-warning-inverse-internal-shape: #856a00; --bs-link-color-chevron-hover: #ff7900; --bs-link-color-chevron-pressed: #ff7900; --bs-link-color-chevron-focus: #ff7900; @@ -377,7 +386,6 @@ --bs-list-item-color-bg-loading: rgba(255, 255, 255, 0.12); --bs-list-item-color-bg-focus: rgba(255, 255, 255, 0.08); --bs-list-item-color-content-loader: #eee; - --bs-icon-color-content-status-warning-inverse-internal-shape: #856a00; } @font-face { @@ -775,7 +783,7 @@ --bs-space-scaled-3xsmall: 4px; --bs-space-scaled-2xsmall: 8px; --bs-space-scaled-xsmall: 16px; - --bs-space-scaled-small: 24px; + --bs-space-scaled-small: 20px; --bs-space-scaled-medium: 32px; --bs-space-scaled-large: 40px; --bs-space-scaled-xlarge: 48px; @@ -11720,7 +11728,7 @@ ol.bullet-list > li > ol > li > ol > li::before { } .alert-message:has(.alert-container > .link, .alert-container > .link-chevron, .alert-container > .link-external, .alert-container > .icon-link) { - min-height: 100px; + min-height: 80px; } .alert-message .btn-close { border-top-right-radius: var(--bs-alert-border-radius); @@ -11799,7 +11807,7 @@ ol.bullet-list > li > ol > li > ol > li::before { .alert-text-container { display: flex; flex-direction: column; - gap: 8px; + gap: 4px; width: 100%; } .alert-text-container > * { diff --git a/scss/tests/snapshot-tests/__snapshots__/ouds-web.css b/scss/tests/snapshot-tests/__snapshots__/ouds-web.css index def09068ab..b229f9225c 100644 --- a/scss/tests/snapshot-tests/__snapshots__/ouds-web.css +++ b/scss/tests/snapshot-tests/__snapshots__/ouds-web.css @@ -56,7 +56,7 @@ --bs-color-border-minimal: rgba(0, 0, 0, 0.04); --bs-color-border-muted: rgba(0, 0, 0, 0.12); --bs-color-border-on-brand-primary: #000; - --bs-color-border-status-accent: #ff7900; + --bs-color-border-status-accent: #f15e00; --bs-color-border-status-info: #0073b2; --bs-color-border-status-negative: #db0002; --bs-color-border-status-positive: #138126; @@ -85,7 +85,7 @@ --bs-color-content-on-status-positive-muted: #000; --bs-color-content-on-status-warning-emphasized: #000; --bs-color-content-on-status-warning-muted: #000; - --bs-color-content-status-accent: #ff7900; + --bs-color-content-status-accent: #f15e00; --bs-color-content-status-info: #0073b2; --bs-color-content-status-inverse-info: #8ad5ff; --bs-color-content-status-inverse-negative: #ff8081; @@ -109,7 +109,7 @@ --bs-color-surface-inverse-low: #272727; --bs-color-surface-primary: #fff; --bs-color-surface-secondary: rgba(0, 0, 0, 0.04); - --bs-color-surface-status-accent-emphasized: #ff7900; + --bs-color-surface-status-accent-emphasized: #f15e00; --bs-color-surface-status-accent-muted: rgba(189, 121, 60, 0.08); --bs-color-surface-status-info-emphasized: #0073b2; --bs-color-surface-status-info-muted: rgba(38, 178, 255, 0.08); @@ -246,6 +246,9 @@ [data-bs-theme=light], :root[data-bs-theme=light] [data-bs-theme=root], :root[data-bs-theme=dark] [data-bs-theme=root-inverted] { + --bs-visual-assets-icon-color-content-status-warning-external-shape: #ffd000; + --bs-visual-assets-icon-color-content-status-warning-internal-shape: #856a00; + --bs-visual-assets-icon-color-content-status-warning-inverse-external-shape: #ffe270; --bs-link-mono-color-content-enabled: #000; --bs-link-mono-color-content-hover: #000; --bs-link-mono-color-content-pressed: rgba(0, 0, 0, 0.52); @@ -293,12 +296,14 @@ --bs-switch-color-track-selected-interaction: #138126; --bs-switch-color-track-unselected: rgba(0, 0, 0, 0.44); --bs-switch-color-track-unselected-interaction: rgba(0, 0, 0, 0.52); + --bs-categorical-tag-color-bg-category-1: #50be87; + --bs-categorical-tag-color-bg-category-2: #4ab4e6; + --bs-categorical-tag-color-bg-category-3: #ffb400; + --bs-categorical-tag-color-bg-category-4: #a885d8; --bs-progress-indicator-color-content-track: #ccc; --bs-progress-indicator-mono-color-content-track: #ccc; --bs-progress-indicator-mono-color-content-indicator: #000; - --bs-icon-color-content-status-warning-external-shape: #ffd000; - --bs-icon-color-content-status-warning-internal-shape: #856a00; - --bs-icon-color-content-status-warning-inverse-external-shape: #ffe270; + --bs-visual-assets-icon-color-content-status-warning-inverse-internal-shape: rgba(255, 255, 255, 0); --bs-link-color-chevron-hover: #f15e00; --bs-link-color-chevron-pressed: #f15e00; --bs-link-color-chevron-focus: #f15e00; @@ -308,13 +313,15 @@ --bs-list-item-color-bg-loading: rgba(0, 0, 0, 0.12); --bs-list-item-color-bg-focus: rgba(0, 0, 0, 0.08); --bs-list-item-color-content-loader: #000; - --bs-icon-color-content-status-warning-inverse-internal-shape: rgba(255, 255, 255, 0); } [data-bs-theme=dark], :root[data-bs-theme=dark], :root[data-bs-theme=dark] [data-bs-theme=root], :root[data-bs-theme=light] [data-bs-theme=root-inverted] { + --bs-visual-assets-icon-color-content-status-warning-external-shape: #ffe270; + --bs-visual-assets-icon-color-content-status-warning-internal-shape: rgba(255, 255, 255, 0); + --bs-visual-assets-icon-color-content-status-warning-inverse-external-shape: #ffd000; --bs-link-mono-color-content-enabled: #fff; --bs-link-mono-color-content-hover: #fff; --bs-link-mono-color-content-pressed: rgba(255, 255, 255, 0.8); @@ -362,12 +369,14 @@ --bs-switch-color-track-selected-interaction: #94f0a4; --bs-switch-color-track-unselected: rgba(255, 255, 255, 0.64); --bs-switch-color-track-unselected-interaction: rgba(255, 255, 255, 0.8); + --bs-categorical-tag-color-bg-category-1: #75cca1; + --bs-categorical-tag-color-bg-category-2: #79c7ec; + --bs-categorical-tag-color-bg-category-3: #ffd266; + --bs-categorical-tag-color-bg-category-4: #c5ade6; --bs-progress-indicator-color-content-track: #444; --bs-progress-indicator-mono-color-content-track: #444; --bs-progress-indicator-mono-color-content-indicator: #fff; - --bs-icon-color-content-status-warning-external-shape: #ffe270; - --bs-icon-color-content-status-warning-internal-shape: rgba(255, 255, 255, 0); - --bs-icon-color-content-status-warning-inverse-external-shape: #ffd000; + --bs-visual-assets-icon-color-content-status-warning-inverse-internal-shape: #856a00; --bs-link-color-chevron-hover: #ff7900; --bs-link-color-chevron-pressed: #ff7900; --bs-link-color-chevron-focus: #ff7900; @@ -377,7 +386,6 @@ --bs-list-item-color-bg-loading: rgba(255, 255, 255, 0.12); --bs-list-item-color-bg-focus: rgba(255, 255, 255, 0.08); --bs-list-item-color-content-loader: #eee; - --bs-icon-color-content-status-warning-inverse-internal-shape: #856a00; } @font-face { @@ -674,7 +682,7 @@ --bs-space-scaled-3xsmall: 4px; --bs-space-scaled-2xsmall: 8px; --bs-space-scaled-xsmall: 16px; - --bs-space-scaled-small: 24px; + --bs-space-scaled-small: 20px; --bs-space-scaled-medium: 32px; --bs-space-scaled-large: 40px; --bs-space-scaled-xlarge: 48px; @@ -9555,7 +9563,7 @@ ol.bullet-list > li > ol > li > ol > li::before { } .alert-message:has(.alert-container > .link, .alert-container > .link-chevron, .alert-container > .link-external) { - min-height: 100px; + min-height: 80px; } .alert-message .btn-close { border-top-right-radius: var(--bs-alert-border-radius); @@ -9616,7 +9624,7 @@ ol.bullet-list > li > ol > li > ol > li::before { .alert-text-container { display: flex; flex-direction: column; - gap: 8px; + gap: 4px; width: 100%; } .alert-text-container > * { From 3bfc0d2d3910e01dce4d3e9743d43268e028067b Mon Sep 17 00:00:00 2001 From: Maxime Lardenois Date: Tue, 15 Sep 2026 09:03:14 +0200 Subject: [PATCH 15/52] fix tokens --- .../_component-colors-custom-props.scss | 16 ++-- .../scss/tokens/_component.scss | 74 ------------------- .../_component-colors-custom-props.scss | 16 ++-- packages/orange/scss/tokens/_component.scss | 74 ------------------- .../_component-colors-custom-props.scss | 16 ++-- packages/sosh/scss/tokens/_component.scss | 74 ------------------- 6 files changed, 24 insertions(+), 246 deletions(-) diff --git a/packages/orange-compact/scss/tokens/_component-colors-custom-props.scss b/packages/orange-compact/scss/tokens/_component-colors-custom-props.scss index dde7b34c00..28c28e2998 100644 --- a/packages/orange-compact/scss/tokens/_component-colors-custom-props.scss +++ b/packages/orange-compact/scss/tokens/_component-colors-custom-props.scss @@ -6,9 +6,6 @@ // scss-docs-start ouds-all-component-css-color // scss-docs-start ouds-component-css-color @include color-mode(light, true) { - --#{$prefix}visual-assets-icon-color-content-status-warning-external-shape: #{$core-ouds-color-functional-sun-500}; - --#{$prefix}visual-assets-icon-color-content-status-warning-internal-shape: #{$core-ouds-color-functional-sun-750}; - --#{$prefix}visual-assets-icon-color-content-status-warning-inverse-external-shape: #{$core-ouds-color-functional-sun-300}; --#{$prefix}link-mono-color-content-enabled: #{$core-ouds-color-functional-black}; --#{$prefix}link-mono-color-content-hover: #{$core-ouds-color-functional-black}; --#{$prefix}link-mono-color-content-pressed: #{$core-ouds-color-opacity-black-520}; @@ -63,7 +60,9 @@ --#{$prefix}progress-indicator-color-content-track: #{$core-ouds-color-functional-gray-light-400}; --#{$prefix}progress-indicator-mono-color-content-track: #{$core-ouds-color-functional-gray-light-400}; --#{$prefix}progress-indicator-mono-color-content-indicator: #{$core-ouds-color-functional-black}; - --#{$prefix}visual-assets-icon-color-content-status-warning-inverse-internal-shape: #{$ouds-color-opacity-transparent-dark}; + --#{$prefix}icon-color-content-status-warning-external-shape: #{$core-ouds-color-functional-sun-500}; + --#{$prefix}icon-color-content-status-warning-internal-shape: #{$core-ouds-color-functional-sun-750}; + --#{$prefix}icon-color-content-status-warning-inverse-external-shape: #{$core-ouds-color-functional-sun-300}; --#{$prefix}link-color-chevron-hover: #{$ouds-color-content-brand-primary-light}; // deprecated --#{$prefix}link-color-chevron-pressed: #{$ouds-color-content-brand-primary-light}; // deprecated --#{$prefix}link-color-chevron-focus: #{$ouds-color-content-brand-primary-light}; // deprecated @@ -72,13 +71,11 @@ --#{$prefix}list-item-color-bg-loading: #{$ouds-color-action-support-loading-light}; // deprecated --#{$prefix}list-item-color-bg-focus: #{$ouds-color-action-support-focus-light}; // deprecated --#{$prefix}list-item-color-content-loader: #{$ouds-color-content-default-light}; // deprecated + --#{$prefix}icon-color-content-status-warning-inverse-internal-shape: #{$ouds-color-opacity-transparent-dark}; } // scss-docs-end ouds-component-css-color @include color-mode(dark, true) { - --#{$prefix}visual-assets-icon-color-content-status-warning-external-shape: #{$core-ouds-color-functional-sun-300}; - --#{$prefix}visual-assets-icon-color-content-status-warning-internal-shape: #{$ouds-color-opacity-transparent-dark}; - --#{$prefix}visual-assets-icon-color-content-status-warning-inverse-external-shape: #{$core-ouds-color-functional-sun-500}; --#{$prefix}link-mono-color-content-enabled: #{$core-ouds-color-functional-white}; --#{$prefix}link-mono-color-content-hover: #{$core-ouds-color-functional-white}; --#{$prefix}link-mono-color-content-pressed: #{$core-ouds-color-opacity-white-800}; @@ -133,7 +130,9 @@ --#{$prefix}progress-indicator-color-content-track: #{$core-ouds-color-functional-gray-dark-480}; --#{$prefix}progress-indicator-mono-color-content-track: #{$core-ouds-color-functional-gray-dark-480}; --#{$prefix}progress-indicator-mono-color-content-indicator: #{$core-ouds-color-functional-white}; - --#{$prefix}visual-assets-icon-color-content-status-warning-inverse-internal-shape: #{$core-ouds-color-functional-sun-750}; + --#{$prefix}icon-color-content-status-warning-external-shape: #{$core-ouds-color-functional-sun-300}; + --#{$prefix}icon-color-content-status-warning-internal-shape: #{$ouds-color-opacity-transparent-dark}; + --#{$prefix}icon-color-content-status-warning-inverse-external-shape: #{$core-ouds-color-functional-sun-500}; --#{$prefix}link-color-chevron-hover: #{$ouds-color-content-brand-primary-dark}; // deprecated --#{$prefix}link-color-chevron-pressed: #{$ouds-color-content-brand-primary-dark}; // deprecated --#{$prefix}link-color-chevron-focus: #{$ouds-color-content-brand-primary-dark}; // deprecated @@ -142,5 +141,6 @@ --#{$prefix}list-item-color-bg-loading: #{$ouds-color-action-support-loading-dark}; // deprecated --#{$prefix}list-item-color-bg-focus: #{$ouds-color-action-support-focus-dark}; // deprecated --#{$prefix}list-item-color-content-loader: #{$ouds-color-content-default-dark}; // deprecated + --#{$prefix}icon-color-content-status-warning-inverse-internal-shape: #{$core-ouds-color-functional-sun-750}; } // scss-docs-end ouds-all-component-css-color diff --git a/packages/orange-compact/scss/tokens/_component.scss b/packages/orange-compact/scss/tokens/_component.scss index 9d4129886e..339d24565f 100644 --- a/packages/orange-compact/scss/tokens/_component.scss +++ b/packages/orange-compact/scss/tokens/_component.scss @@ -36,7 +36,6 @@ $ouds-accordion-space-padding-block-top-expand-container: $ouds-space-padding-bl // Alert // scss-docs-start ouds-component-alert -$ouds-alert-banner-mode-control-action-on-status-accent: Always in light mode !default; $ouds-alert-border-radius-default: $ouds-border-radius-default !default; $ouds-alert-border-radius-rounded: $ouds-border-radius-large !default; $ouds-alert-message-border-width: $ouds-border-width-none !default; @@ -451,37 +450,6 @@ $ouds-list-item-space-row-gap: $ouds-space-row-gap-none !default; // scss-docs-start ouds-component-modal $ouds-modal-dialog-border-radius-default: $ouds-border-radius-default !default; $ouds-modal-dialog-border-radius-rounded: $ouds-border-radius-large !default; -$ouds-modal-dialog-grid-margin-horizontal-default-desktop: 267px !default; -$ouds-modal-dialog-grid-margin-horizontal-default-large-desktop: 358px !default; -$ouds-modal-dialog-grid-margin-horizontal-default-tablet: 85px !default; -$ouds-modal-dialog-grid-margin-horizontal-mobile: 16px !default; -$ouds-modal-dialog-grid-margin-horizontal-small-desktop: 599px !default; -$ouds-modal-dialog-grid-margin-horizontal-small-large-desktop: 664px !default; -$ouds-modal-dialog-grid-margin-horizontal-small-tablet: 147px !default; -$ouds-modal-dialog-grid-margin-vertical-default-desktop: 41px !default; -$ouds-modal-dialog-grid-margin-vertical-default-large-desktop: 52px !default; -$ouds-modal-dialog-grid-margin-vertical-default-tablet: 47px !default; -$ouds-modal-dialog-grid-margin-vertical-mobile-default: 16px !default; -$ouds-modal-dialog-grid-margin-vertical-small-desktop: 164px !default; -$ouds-modal-dialog-grid-margin-vertical-small-large-desktop: 260px !default; -$ouds-modal-dialog-grid-margin-vertical-small-mobile: 190px !default; -$ouds-modal-dialog-grid-margin-vertical-small-tablet: 235px !default; -$ouds-modal-dialog-size-max-height-small-desktop: 492px !default; -$ouds-modal-dialog-size-max-height-small-large-desktop: 520px !default; -$ouds-modal-dialog-size-max-height-small-mobile: 380px !default; -$ouds-modal-dialog-size-max-height-small-tablet: 470px !default; -$ouds-modal-dialog-size-max-width-default-desktop: 1066px !default; -$ouds-modal-dialog-size-max-width-default-large-desktop: 1204px !default; -$ouds-modal-dialog-size-max-width-default-mobile: 448px !default; -$ouds-modal-dialog-size-max-width-default-tablet: 810px !default; -$ouds-modal-dialog-size-max-width-small-desktop: 522px !default; -$ouds-modal-dialog-size-max-width-small-large-desktop: 592px !default; -$ouds-modal-dialog-size-max-width-small-mobile: 448px !default; -$ouds-modal-dialog-size-max-width-small-tablet: 480px !default; -$ouds-modal-dialog-size-min-height-small-desktop: 460px !default; -$ouds-modal-dialog-size-min-height-small-large-desktop: 500px !default; -$ouds-modal-dialog-size-min-height-small-mobile: 280px !default; -$ouds-modal-dialog-size-min-height-small-tablet: 420px !default; $ouds-modal-dialog-space-column-gap-previous-title-desktop: $ouds-space-column-gap-2xlarge !default; $ouds-modal-dialog-space-column-gap-previous-title-mobile: $ouds-space-column-gap-large !default; $ouds-modal-dialog-space-column-gap-previous-title-tablet: $ouds-space-column-gap-xlarge !default; @@ -501,9 +469,6 @@ $ouds-modal-dialog-space-padding-block-bottom-default-tablet: $ouds-space-paddin $ouds-modal-dialog-space-padding-block-bottom-mobile: $ouds-space-padding-block-2xlarge !default; $ouds-modal-dialog-space-padding-block-bottom-small-desktop: $ouds-space-padding-block-3xlarge !default; $ouds-modal-dialog-space-padding-block-bottom-small-tablet: $ouds-space-padding-block-2xlarge !default; -$ouds-modal-dialog-space-padding-block-bottom-sticky-footer-safe-area-desktop: 84px !default; -$ouds-modal-dialog-space-padding-block-bottom-sticky-footer-safe-area-mobile: 62px !default; -$ouds-modal-dialog-space-padding-block-bottom-sticky-footer-safe-area-tablet: 84px !default; $ouds-modal-dialog-space-padding-block-footer-sticky-default-desktop: $ouds-space-padding-block-3xlarge !default; $ouds-modal-dialog-space-padding-block-footer-sticky-default-tablet: $ouds-space-padding-block-3xlarge !default; $ouds-modal-dialog-space-padding-block-footer-sticky-mobile: $ouds-space-padding-block-xlarge !default; @@ -587,31 +552,6 @@ $ouds-radio-button-size-min-width: $ouds-size-min-interactive-area-default !defa $ouds-select-input-size-min-width: $ouds-dimension-8xlarge !default; // scss-docs-end ouds-component-select -// Side - -// scss-docs-start ouds-component-side -$ouds-side-sheet-grid-margin-horizontal-default-desktop: 961px !default; -$ouds-side-sheet-grid-margin-horizontal-default-large-desktop: 1429px !default; -$ouds-side-sheet-grid-margin-horizontal-default-mobile: 16px !default; -$ouds-side-sheet-grid-margin-horizontal-default-tablet: 331px !default; -$ouds-side-sheet-grid-margin-horizontal-small-desktop: 1077px !default; -$ouds-side-sheet-grid-margin-horizontal-small-large-desktop: 1582px !default; -$ouds-side-sheet-grid-margin-horizontal-small-mobile: 47px !default; -$ouds-side-sheet-grid-margin-horizontal-small-tablet: 392px !default; -$ouds-side-sheet-size-max-width-default-desktop: 520px !default; -$ouds-side-sheet-size-max-width-default-large-desktop: 600px !default; -$ouds-side-sheet-size-max-width-default-mobile: 380px !default; -$ouds-side-sheet-size-max-width-default-tablet: 440px !default; -$ouds-side-sheet-size-max-width-small-desktop: 480px !default; -$ouds-side-sheet-size-max-width-small-large-desktop: 520px !default; -$ouds-side-sheet-size-max-width-small-mobile: 340px !default; -$ouds-side-sheet-size-max-width-small-tablet: 400px !default; -$ouds-side-sheet-size-min-width-small-desktop: 420px !default; -$ouds-side-sheet-size-min-width-small-large-desktop: 440px !default; -$ouds-side-sheet-size-min-width-small-mobile: 1px !default; -$ouds-side-sheet-size-min-width-small-tablet: 1px !default; -// scss-docs-end ouds-component-side - // Skeleton // scss-docs-start ouds-component-skeleton @@ -724,10 +664,6 @@ $ouds-toast-border-radius-media: $ouds-border-radius-default !default; $ouds-toast-size-asset-large: $ouds-dimension-3xlarge !default; $ouds-toast-size-asset-medium: $ouds-dimension-medium !default; $ouds-toast-size-asset-small: $ouds-size-icon-with-label-large-size-medium !default; -$ouds-toast-size-width-desktop: 442px !default; -$ouds-toast-size-width-large-desktop: 592px !default; -$ouds-toast-size-width-mobile: 374px !default; -$ouds-toast-size-width-tablet: 474px !default; // scss-docs-end ouds-component-toast // Typography @@ -738,13 +674,3 @@ $ouds-typography-heading-large-marker: true !default; $ouds-typography-space-padding-block-bottom-heading-large-marker: $ouds-space-padding-block-4xsmall !default; // deprecated $ouds-typography-space-padding-block-top-heading-large-marker: $ouds-space-padding-block-3xsmall !default; // deprecated // scss-docs-end ouds-component-typography - -// Visual - -// scss-docs-start ouds-component-visual -$ouds-visual-assets-icon-brand: orange !default; -$ouds-visual-assets-icon-color-content-status-warning-external-shape: var(--#{$prefix}visual-assets-icon-color-content-status-warning-external-shape) !default; -$ouds-visual-assets-icon-color-content-status-warning-internal-shape: var(--#{$prefix}visual-assets-icon-color-content-status-warning-internal-shape) !default; -$ouds-visual-assets-icon-color-content-status-warning-inverse-external-shape: var(--#{$prefix}visual-assets-icon-color-content-status-warning-inverse-external-shape) !default; -$ouds-visual-assets-icon-color-content-status-warning-inverse-internal-shape: var(--#{$prefix}visual-assets-icon-color-content-status-warning-inverse-internal-shape) !default; -// scss-docs-end ouds-component-visual diff --git a/packages/orange/scss/tokens/_component-colors-custom-props.scss b/packages/orange/scss/tokens/_component-colors-custom-props.scss index 0aeddf122f..580d6c5b23 100644 --- a/packages/orange/scss/tokens/_component-colors-custom-props.scss +++ b/packages/orange/scss/tokens/_component-colors-custom-props.scss @@ -6,9 +6,6 @@ // scss-docs-start ouds-all-component-css-color // scss-docs-start ouds-component-css-color @include color-mode(light, true) { - --#{$prefix}visual-assets-icon-color-content-status-warning-external-shape: #{$core-ouds-color-functional-sun-500}; - --#{$prefix}visual-assets-icon-color-content-status-warning-internal-shape: #{$core-ouds-color-functional-sun-750}; - --#{$prefix}visual-assets-icon-color-content-status-warning-inverse-external-shape: #{$core-ouds-color-functional-sun-300}; --#{$prefix}link-mono-color-content-enabled: #{$core-ouds-color-functional-black}; --#{$prefix}link-mono-color-content-hover: #{$core-ouds-color-functional-black}; --#{$prefix}link-mono-color-content-pressed: #{$core-ouds-color-opacity-black-520}; @@ -63,7 +60,9 @@ --#{$prefix}progress-indicator-color-content-track: #{$core-ouds-color-functional-gray-light-400}; --#{$prefix}progress-indicator-mono-color-content-track: #{$core-ouds-color-functional-gray-light-400}; --#{$prefix}progress-indicator-mono-color-content-indicator: #{$core-ouds-color-functional-black}; - --#{$prefix}visual-assets-icon-color-content-status-warning-inverse-internal-shape: #{$ouds-color-opacity-transparent-dark}; + --#{$prefix}icon-color-content-status-warning-external-shape: #{$core-ouds-color-functional-sun-500}; + --#{$prefix}icon-color-content-status-warning-internal-shape: #{$core-ouds-color-functional-sun-750}; + --#{$prefix}icon-color-content-status-warning-inverse-external-shape: #{$core-ouds-color-functional-sun-300}; --#{$prefix}link-color-chevron-hover: #{$ouds-color-content-brand-primary-light}; // deprecated --#{$prefix}link-color-chevron-pressed: #{$ouds-color-content-brand-primary-light}; // deprecated --#{$prefix}link-color-chevron-focus: #{$ouds-color-content-brand-primary-light}; // deprecated @@ -73,13 +72,11 @@ --#{$prefix}list-item-color-bg-loading: #{$ouds-color-action-support-loading-light}; // deprecated --#{$prefix}list-item-color-bg-focus: #{$ouds-color-action-support-focus-light}; // deprecated --#{$prefix}list-item-color-content-loader: #{$ouds-color-content-default-light}; // deprecated + --#{$prefix}icon-color-content-status-warning-inverse-internal-shape: #{$ouds-color-opacity-transparent-dark}; } // scss-docs-end ouds-component-css-color @include color-mode(dark, true) { - --#{$prefix}visual-assets-icon-color-content-status-warning-external-shape: #{$core-ouds-color-functional-sun-300}; - --#{$prefix}visual-assets-icon-color-content-status-warning-internal-shape: #{$ouds-color-opacity-transparent-dark}; - --#{$prefix}visual-assets-icon-color-content-status-warning-inverse-external-shape: #{$core-ouds-color-functional-sun-500}; --#{$prefix}link-mono-color-content-enabled: #{$core-ouds-color-functional-white}; --#{$prefix}link-mono-color-content-hover: #{$core-ouds-color-functional-white}; --#{$prefix}link-mono-color-content-pressed: #{$core-ouds-color-opacity-white-800}; @@ -134,7 +131,9 @@ --#{$prefix}progress-indicator-color-content-track: #{$core-ouds-color-functional-gray-dark-480}; --#{$prefix}progress-indicator-mono-color-content-track: #{$core-ouds-color-functional-gray-dark-480}; --#{$prefix}progress-indicator-mono-color-content-indicator: #{$core-ouds-color-functional-white}; - --#{$prefix}visual-assets-icon-color-content-status-warning-inverse-internal-shape: #{$core-ouds-color-functional-sun-750}; + --#{$prefix}icon-color-content-status-warning-external-shape: #{$core-ouds-color-functional-sun-300}; + --#{$prefix}icon-color-content-status-warning-internal-shape: #{$ouds-color-opacity-transparent-dark}; + --#{$prefix}icon-color-content-status-warning-inverse-external-shape: #{$core-ouds-color-functional-sun-500}; --#{$prefix}link-color-chevron-hover: #{$ouds-color-content-brand-primary-dark}; // deprecated --#{$prefix}link-color-chevron-pressed: #{$ouds-color-content-brand-primary-dark}; // deprecated --#{$prefix}link-color-chevron-focus: #{$ouds-color-content-brand-primary-dark}; // deprecated @@ -144,5 +143,6 @@ --#{$prefix}list-item-color-bg-loading: #{$ouds-color-action-support-loading-dark}; // deprecated --#{$prefix}list-item-color-bg-focus: #{$ouds-color-action-support-focus-dark}; // deprecated --#{$prefix}list-item-color-content-loader: #{$ouds-color-content-default-dark}; // deprecated + --#{$prefix}icon-color-content-status-warning-inverse-internal-shape: #{$core-ouds-color-functional-sun-750}; } // scss-docs-end ouds-all-component-css-color diff --git a/packages/orange/scss/tokens/_component.scss b/packages/orange/scss/tokens/_component.scss index 6df29ee413..1822ab7901 100644 --- a/packages/orange/scss/tokens/_component.scss +++ b/packages/orange/scss/tokens/_component.scss @@ -36,7 +36,6 @@ $ouds-accordion-space-padding-block-top-expand-container: $ouds-space-padding-bl // Alert // scss-docs-start ouds-component-alert -$ouds-alert-banner-mode-control-action-on-status-accent: Always in light mode !default; $ouds-alert-border-radius-default: $ouds-border-radius-default !default; $ouds-alert-border-radius-rounded: $ouds-border-radius-large !default; $ouds-alert-message-border-width: $ouds-border-width-none !default; @@ -451,37 +450,6 @@ $ouds-list-item-space-row-gap: $ouds-space-row-gap-none !default; // scss-docs-start ouds-component-modal $ouds-modal-dialog-border-radius-default: $ouds-border-radius-default !default; $ouds-modal-dialog-border-radius-rounded: $ouds-border-radius-large !default; -$ouds-modal-dialog-grid-margin-horizontal-default-desktop: 283px !default; -$ouds-modal-dialog-grid-margin-horizontal-default-large-desktop: 401px !default; -$ouds-modal-dialog-grid-margin-horizontal-default-tablet: 93px !default; -$ouds-modal-dialog-grid-margin-horizontal-mobile: 16px !default; -$ouds-modal-dialog-grid-margin-horizontal-small-desktop: 509px !default; -$ouds-modal-dialog-grid-margin-horizontal-small-large-desktop: 691px !default; -$ouds-modal-dialog-grid-margin-horizontal-small-tablet: 153px !default; -$ouds-modal-dialog-grid-margin-vertical-default-desktop: 41px !default; -$ouds-modal-dialog-grid-margin-vertical-default-large-desktop: 52px !default; -$ouds-modal-dialog-grid-margin-vertical-default-tablet: 47px !default; -$ouds-modal-dialog-grid-margin-vertical-mobile-default: 16px !default; -$ouds-modal-dialog-grid-margin-vertical-small-desktop: 164px !default; -$ouds-modal-dialog-grid-margin-vertical-small-large-desktop: 260px !default; -$ouds-modal-dialog-grid-margin-vertical-small-mobile: 190px !default; -$ouds-modal-dialog-grid-margin-vertical-small-tablet: 235px !default; -$ouds-modal-dialog-size-max-height-small-desktop: 492px !default; -$ouds-modal-dialog-size-max-height-small-large-desktop: 520px !default; -$ouds-modal-dialog-size-max-height-small-mobile: 380px !default; -$ouds-modal-dialog-size-max-height-small-tablet: 470px !default; -$ouds-modal-dialog-size-max-width-default-desktop: 1002px !default; -$ouds-modal-dialog-size-max-width-default-large-desktop: 1118px !default; -$ouds-modal-dialog-size-max-width-default-mobile: 448px !default; -$ouds-modal-dialog-size-max-width-default-tablet: 782px !default; -$ouds-modal-dialog-size-max-width-small-desktop: 486px !default; -$ouds-modal-dialog-size-max-width-small-large-desktop: 538px !default; -$ouds-modal-dialog-size-max-width-small-mobile: 448px !default; -$ouds-modal-dialog-size-max-width-small-tablet: 460px !default; -$ouds-modal-dialog-size-min-height-small-desktop: 460px !default; -$ouds-modal-dialog-size-min-height-small-large-desktop: 500px !default; -$ouds-modal-dialog-size-min-height-small-mobile: 280px !default; -$ouds-modal-dialog-size-min-height-small-tablet: 420px !default; $ouds-modal-dialog-space-column-gap-previous-title-desktop: $ouds-space-column-gap-2xlarge !default; $ouds-modal-dialog-space-column-gap-previous-title-mobile: $ouds-space-column-gap-large !default; $ouds-modal-dialog-space-column-gap-previous-title-tablet: $ouds-space-column-gap-xlarge !default; @@ -501,9 +469,6 @@ $ouds-modal-dialog-space-padding-block-bottom-default-tablet: $ouds-space-paddin $ouds-modal-dialog-space-padding-block-bottom-mobile: $ouds-space-padding-block-2xlarge !default; $ouds-modal-dialog-space-padding-block-bottom-small-desktop: $ouds-space-padding-block-3xlarge !default; $ouds-modal-dialog-space-padding-block-bottom-small-tablet: $ouds-space-padding-block-2xlarge !default; -$ouds-modal-dialog-space-padding-block-bottom-sticky-footer-safe-area-desktop: 104px !default; -$ouds-modal-dialog-space-padding-block-bottom-sticky-footer-safe-area-mobile: 76px !default; -$ouds-modal-dialog-space-padding-block-bottom-sticky-footer-safe-area-tablet: 100px !default; $ouds-modal-dialog-space-padding-block-footer-sticky-default-desktop: $ouds-space-padding-block-3xlarge !default; $ouds-modal-dialog-space-padding-block-footer-sticky-default-tablet: $ouds-space-padding-block-3xlarge !default; $ouds-modal-dialog-space-padding-block-footer-sticky-mobile: $ouds-space-padding-block-xlarge !default; @@ -587,31 +552,6 @@ $ouds-radio-button-size-min-width: $ouds-size-min-interactive-area-default !defa $ouds-select-input-size-min-width: $ouds-dimension-8xlarge !default; // scss-docs-end ouds-component-select -// Side - -// scss-docs-start ouds-component-side -$ouds-side-sheet-grid-margin-horizontal-default-desktop: 963px !default; -$ouds-side-sheet-grid-margin-horizontal-default-large-desktop: 1414px !default; -$ouds-side-sheet-grid-margin-horizontal-default-mobile: 24px !default; -$ouds-side-sheet-grid-margin-horizontal-default-tablet: 335px !default; -$ouds-side-sheet-grid-margin-horizontal-small-desktop: 1076px !default; -$ouds-side-sheet-grid-margin-horizontal-small-large-desktop: 1559px !default; -$ouds-side-sheet-grid-margin-horizontal-small-mobile: 54px !default; -$ouds-side-sheet-grid-margin-horizontal-small-tablet: 396px !default; -$ouds-side-sheet-size-max-width-default-desktop: 520px !default; -$ouds-side-sheet-size-max-width-default-large-desktop: 600px !default; -$ouds-side-sheet-size-max-width-default-mobile: 380px !default; -$ouds-side-sheet-size-max-width-default-tablet: 440px !default; -$ouds-side-sheet-size-max-width-small-desktop: 480px !default; -$ouds-side-sheet-size-max-width-small-large-desktop: 520px !default; -$ouds-side-sheet-size-max-width-small-mobile: 340px !default; -$ouds-side-sheet-size-max-width-small-tablet: 400px !default; -$ouds-side-sheet-size-min-width-small-desktop: 420px !default; -$ouds-side-sheet-size-min-width-small-large-desktop: 440px !default; -$ouds-side-sheet-size-min-width-small-mobile: 1px !default; -$ouds-side-sheet-size-min-width-small-tablet: 1px !default; -// scss-docs-end ouds-component-side - // Skeleton // scss-docs-start ouds-component-skeleton @@ -724,10 +664,6 @@ $ouds-toast-border-radius-media: $ouds-border-radius-default !default; $ouds-toast-size-asset-large: $ouds-dimension-3xlarge !default; $ouds-toast-size-asset-medium: $ouds-dimension-medium !default; $ouds-toast-size-asset-small: $ouds-size-icon-with-label-large-size-medium !default; -$ouds-toast-size-width-desktop: 422px !default; -$ouds-toast-size-width-large-desktop: 538px !default; -$ouds-toast-size-width-mobile: 374px !default; -$ouds-toast-size-width-tablet: 462px !default; // scss-docs-end ouds-component-toast // Typography @@ -738,13 +674,3 @@ $ouds-typography-heading-large-marker: true !default; $ouds-typography-space-padding-block-bottom-heading-large-marker: $ouds-space-padding-block-4xsmall !default; // deprecated $ouds-typography-space-padding-block-top-heading-large-marker: $ouds-space-padding-block-3xsmall !default; // deprecated // scss-docs-end ouds-component-typography - -// Visual - -// scss-docs-start ouds-component-visual -$ouds-visual-assets-icon-brand: orange !default; -$ouds-visual-assets-icon-color-content-status-warning-external-shape: var(--#{$prefix}visual-assets-icon-color-content-status-warning-external-shape) !default; -$ouds-visual-assets-icon-color-content-status-warning-internal-shape: var(--#{$prefix}visual-assets-icon-color-content-status-warning-internal-shape) !default; -$ouds-visual-assets-icon-color-content-status-warning-inverse-external-shape: var(--#{$prefix}visual-assets-icon-color-content-status-warning-inverse-external-shape) !default; -$ouds-visual-assets-icon-color-content-status-warning-inverse-internal-shape: var(--#{$prefix}visual-assets-icon-color-content-status-warning-inverse-internal-shape) !default; -// scss-docs-end ouds-component-visual diff --git a/packages/sosh/scss/tokens/_component-colors-custom-props.scss b/packages/sosh/scss/tokens/_component-colors-custom-props.scss index f08515d5d7..33a0831218 100644 --- a/packages/sosh/scss/tokens/_component-colors-custom-props.scss +++ b/packages/sosh/scss/tokens/_component-colors-custom-props.scss @@ -6,9 +6,6 @@ // scss-docs-start ouds-all-component-css-color // scss-docs-start ouds-component-css-color @include color-mode(light, true) { - --#{$prefix}visual-assets-icon-color-content-status-warning-external-shape: #{$core-sosh-color-turbo-500}; - --#{$prefix}visual-assets-icon-color-content-status-warning-internal-shape: #{$core-sosh-color-turbo-750}; - --#{$prefix}visual-assets-icon-color-content-status-warning-inverse-external-shape: #{$core-sosh-color-turbo-300}; --#{$prefix}link-mono-color-content-enabled: #{$core-ouds-color-functional-black}; --#{$prefix}link-mono-color-content-hover: #{$core-ouds-color-functional-black}; --#{$prefix}link-mono-color-content-pressed: #{$core-sosh-color-opacity-black-520}; @@ -59,7 +56,9 @@ --#{$prefix}progress-indicator-color-content-track: #{$core-ouds-color-functional-gray-light-400}; --#{$prefix}progress-indicator-mono-color-content-track: #{$core-ouds-color-functional-gray-light-400}; --#{$prefix}progress-indicator-mono-color-content-indicator: #{$core-ouds-color-functional-black}; - --#{$prefix}visual-assets-icon-color-content-status-warning-inverse-internal-shape: #{$ouds-color-opacity-transparent-dark}; + --#{$prefix}icon-color-content-status-warning-external-shape: #{$core-sosh-color-turbo-500}; + --#{$prefix}icon-color-content-status-warning-internal-shape: #{$core-sosh-color-turbo-750}; + --#{$prefix}icon-color-content-status-warning-inverse-external-shape: #{$core-sosh-color-turbo-300}; --#{$prefix}link-color-chevron-hover: #{$ouds-color-action-hover-light}; // deprecated --#{$prefix}link-color-chevron-pressed: #{$ouds-color-action-pressed-light}; // deprecated --#{$prefix}link-color-chevron-focus: #{$ouds-color-action-focus-light}; // deprecated @@ -69,13 +68,11 @@ --#{$prefix}list-item-color-bg-loading: #{$ouds-color-action-support-loading-light}; // deprecated --#{$prefix}list-item-color-bg-focus: #{$ouds-color-action-support-focus-light}; // deprecated --#{$prefix}list-item-color-content-loader: #{$ouds-color-content-default-light}; // deprecated + --#{$prefix}icon-color-content-status-warning-inverse-internal-shape: #{$ouds-color-opacity-transparent-dark}; } // scss-docs-end ouds-component-css-color @include color-mode(dark, true) { - --#{$prefix}visual-assets-icon-color-content-status-warning-external-shape: #{$core-sosh-color-turbo-300}; - --#{$prefix}visual-assets-icon-color-content-status-warning-internal-shape: #{$ouds-color-opacity-transparent-dark}; - --#{$prefix}visual-assets-icon-color-content-status-warning-inverse-external-shape: #{$core-sosh-color-turbo-500}; --#{$prefix}link-mono-color-content-enabled: #{$core-ouds-color-functional-white}; --#{$prefix}link-mono-color-content-hover: #{$core-ouds-color-functional-white}; --#{$prefix}link-mono-color-content-pressed: #{$core-sosh-color-opacity-white-800}; @@ -126,7 +123,9 @@ --#{$prefix}progress-indicator-color-content-track: #{$core-ouds-color-functional-gray-dark-480}; --#{$prefix}progress-indicator-mono-color-content-track: #{$core-ouds-color-functional-gray-dark-480}; --#{$prefix}progress-indicator-mono-color-content-indicator: #{$core-ouds-color-functional-white}; - --#{$prefix}visual-assets-icon-color-content-status-warning-inverse-internal-shape: #{$core-sosh-color-turbo-750}; + --#{$prefix}icon-color-content-status-warning-external-shape: #{$core-sosh-color-turbo-300}; + --#{$prefix}icon-color-content-status-warning-internal-shape: #{$ouds-color-opacity-transparent-dark}; + --#{$prefix}icon-color-content-status-warning-inverse-external-shape: #{$core-sosh-color-turbo-500}; --#{$prefix}link-color-chevron-hover: #{$ouds-color-action-hover-dark}; // deprecated --#{$prefix}link-color-chevron-pressed: #{$ouds-color-action-pressed-dark}; // deprecated --#{$prefix}link-color-chevron-focus: #{$ouds-color-action-focus-dark}; // deprecated @@ -136,5 +135,6 @@ --#{$prefix}list-item-color-bg-loading: #{$ouds-color-action-support-loading-dark}; // deprecated --#{$prefix}list-item-color-bg-focus: #{$ouds-color-action-support-focus-dark}; // deprecated --#{$prefix}list-item-color-content-loader: #{$ouds-color-content-default-dark}; // deprecated + --#{$prefix}icon-color-content-status-warning-inverse-internal-shape: #{$core-sosh-color-turbo-750}; } // scss-docs-end ouds-all-component-css-color diff --git a/packages/sosh/scss/tokens/_component.scss b/packages/sosh/scss/tokens/_component.scss index fa7de16288..d4f7691a2b 100644 --- a/packages/sosh/scss/tokens/_component.scss +++ b/packages/sosh/scss/tokens/_component.scss @@ -36,7 +36,6 @@ $ouds-accordion-space-padding-block-top-expand-container: $ouds-space-padding-bl // Alert // scss-docs-start ouds-component-alert -$ouds-alert-banner-mode-control-action-on-status-accent: Dark to light mode !default; $ouds-alert-border-radius-default: $ouds-border-radius-default !default; $ouds-alert-border-radius-rounded: $ouds-border-radius-large !default; $ouds-alert-message-border-width: $ouds-border-width-none !default; @@ -451,37 +450,6 @@ $ouds-list-item-space-row-gap: $ouds-space-row-gap-none !default; // scss-docs-start ouds-component-modal $ouds-modal-dialog-border-radius-default: $ouds-border-radius-large !default; $ouds-modal-dialog-border-radius-rounded: $ouds-border-radius-large !default; -$ouds-modal-dialog-grid-margin-horizontal-default-desktop: 283px !default; -$ouds-modal-dialog-grid-margin-horizontal-default-large-desktop: 401px !default; -$ouds-modal-dialog-grid-margin-horizontal-default-tablet: 93px !default; -$ouds-modal-dialog-grid-margin-horizontal-mobile: 16px !default; -$ouds-modal-dialog-grid-margin-horizontal-small-desktop: 509px !default; -$ouds-modal-dialog-grid-margin-horizontal-small-large-desktop: 691px !default; -$ouds-modal-dialog-grid-margin-horizontal-small-tablet: 153px !default; -$ouds-modal-dialog-grid-margin-vertical-default-desktop: 41px !default; -$ouds-modal-dialog-grid-margin-vertical-default-large-desktop: 52px !default; -$ouds-modal-dialog-grid-margin-vertical-default-tablet: 47px !default; -$ouds-modal-dialog-grid-margin-vertical-mobile-default: 16px !default; -$ouds-modal-dialog-grid-margin-vertical-small-desktop: 164px !default; -$ouds-modal-dialog-grid-margin-vertical-small-large-desktop: 260px !default; -$ouds-modal-dialog-grid-margin-vertical-small-mobile: 190px !default; -$ouds-modal-dialog-grid-margin-vertical-small-tablet: 235px !default; -$ouds-modal-dialog-size-max-height-small-desktop: 492px !default; -$ouds-modal-dialog-size-max-height-small-large-desktop: 520px !default; -$ouds-modal-dialog-size-max-height-small-mobile: 380px !default; -$ouds-modal-dialog-size-max-height-small-tablet: 470px !default; -$ouds-modal-dialog-size-max-width-default-desktop: 1002px !default; -$ouds-modal-dialog-size-max-width-default-large-desktop: 1118px !default; -$ouds-modal-dialog-size-max-width-default-mobile: 448px !default; -$ouds-modal-dialog-size-max-width-default-tablet: 782px !default; -$ouds-modal-dialog-size-max-width-small-desktop: 486px !default; -$ouds-modal-dialog-size-max-width-small-large-desktop: 538px !default; -$ouds-modal-dialog-size-max-width-small-mobile: 448px !default; -$ouds-modal-dialog-size-max-width-small-tablet: 460px !default; -$ouds-modal-dialog-size-min-height-small-desktop: 460px !default; -$ouds-modal-dialog-size-min-height-small-large-desktop: 500px !default; -$ouds-modal-dialog-size-min-height-small-mobile: 280px !default; -$ouds-modal-dialog-size-min-height-small-tablet: 420px !default; $ouds-modal-dialog-space-column-gap-previous-title-desktop: $ouds-space-column-gap-2xlarge !default; $ouds-modal-dialog-space-column-gap-previous-title-mobile: $ouds-space-column-gap-large !default; $ouds-modal-dialog-space-column-gap-previous-title-tablet: $ouds-space-column-gap-xlarge !default; @@ -501,9 +469,6 @@ $ouds-modal-dialog-space-padding-block-bottom-default-tablet: $ouds-space-paddin $ouds-modal-dialog-space-padding-block-bottom-mobile: $ouds-space-padding-block-2xlarge !default; $ouds-modal-dialog-space-padding-block-bottom-small-desktop: $ouds-space-padding-block-3xlarge !default; $ouds-modal-dialog-space-padding-block-bottom-small-tablet: $ouds-space-padding-block-2xlarge !default; -$ouds-modal-dialog-space-padding-block-bottom-sticky-footer-safe-area-desktop: 104px !default; -$ouds-modal-dialog-space-padding-block-bottom-sticky-footer-safe-area-mobile: 76px !default; -$ouds-modal-dialog-space-padding-block-bottom-sticky-footer-safe-area-tablet: 100px !default; $ouds-modal-dialog-space-padding-block-footer-sticky-default-desktop: $ouds-space-padding-block-3xlarge !default; $ouds-modal-dialog-space-padding-block-footer-sticky-default-tablet: $ouds-space-padding-block-3xlarge !default; $ouds-modal-dialog-space-padding-block-footer-sticky-mobile: $ouds-space-padding-block-xlarge !default; @@ -587,31 +552,6 @@ $ouds-radio-button-size-min-width: $ouds-size-min-interactive-area-default !defa $ouds-select-input-size-min-width: $ouds-dimension-8xlarge !default; // scss-docs-end ouds-component-select -// Side - -// scss-docs-start ouds-component-side -$ouds-side-sheet-grid-margin-horizontal-default-desktop: 963px !default; -$ouds-side-sheet-grid-margin-horizontal-default-large-desktop: 1414px !default; -$ouds-side-sheet-grid-margin-horizontal-default-mobile: 24px !default; -$ouds-side-sheet-grid-margin-horizontal-default-tablet: 335px !default; -$ouds-side-sheet-grid-margin-horizontal-small-desktop: 1076px !default; -$ouds-side-sheet-grid-margin-horizontal-small-large-desktop: 1559px !default; -$ouds-side-sheet-grid-margin-horizontal-small-mobile: 54px !default; -$ouds-side-sheet-grid-margin-horizontal-small-tablet: 396px !default; -$ouds-side-sheet-size-max-width-default-desktop: 520px !default; -$ouds-side-sheet-size-max-width-default-large-desktop: 600px !default; -$ouds-side-sheet-size-max-width-default-mobile: 380px !default; -$ouds-side-sheet-size-max-width-default-tablet: 440px !default; -$ouds-side-sheet-size-max-width-small-desktop: 480px !default; -$ouds-side-sheet-size-max-width-small-large-desktop: 520px !default; -$ouds-side-sheet-size-max-width-small-mobile: 340px !default; -$ouds-side-sheet-size-max-width-small-tablet: 400px !default; -$ouds-side-sheet-size-min-width-small-desktop: 420px !default; -$ouds-side-sheet-size-min-width-small-large-desktop: 440px !default; -$ouds-side-sheet-size-min-width-small-mobile: 1px !default; -$ouds-side-sheet-size-min-width-small-tablet: 1px !default; -// scss-docs-end ouds-component-side - // Skeleton // scss-docs-start ouds-component-skeleton @@ -724,10 +664,6 @@ $ouds-toast-border-radius-media: $ouds-border-radius-none !default; $ouds-toast-size-asset-large: $ouds-dimension-3xlarge !default; $ouds-toast-size-asset-medium: $ouds-dimension-medium !default; $ouds-toast-size-asset-small: $ouds-size-icon-with-label-large-size-medium !default; -$ouds-toast-size-width-desktop: 422px !default; -$ouds-toast-size-width-large-desktop: 538px !default; -$ouds-toast-size-width-mobile: 374px !default; -$ouds-toast-size-width-tablet: 462px !default; // scss-docs-end ouds-component-toast // Typography @@ -738,13 +674,3 @@ $ouds-typography-heading-large-marker: false !default; $ouds-typography-space-padding-block-bottom-heading-large-marker: $ouds-space-padding-block-none !default; // deprecated $ouds-typography-space-padding-block-top-heading-large-marker: $ouds-space-padding-block-none !default; // deprecated // scss-docs-end ouds-component-typography - -// Visual - -// scss-docs-start ouds-component-visual -$ouds-visual-assets-icon-brand: sosh !default; -$ouds-visual-assets-icon-color-content-status-warning-external-shape: var(--#{$prefix}visual-assets-icon-color-content-status-warning-external-shape) !default; -$ouds-visual-assets-icon-color-content-status-warning-internal-shape: var(--#{$prefix}visual-assets-icon-color-content-status-warning-internal-shape) !default; -$ouds-visual-assets-icon-color-content-status-warning-inverse-external-shape: var(--#{$prefix}visual-assets-icon-color-content-status-warning-inverse-external-shape) !default; -$ouds-visual-assets-icon-color-content-status-warning-inverse-internal-shape: var(--#{$prefix}visual-assets-icon-color-content-status-warning-inverse-internal-shape) !default; -// scss-docs-end ouds-component-visual From 32f4f75582f940d6cc104f0301c295bd83d96e03 Mon Sep 17 00:00:00 2001 From: Maxime Lardenois Date: Tue, 15 Sep 2026 11:44:22 +0200 Subject: [PATCH 16/52] fix css tests --- .../__snapshots__/ouds-web-bootstrap.css | 16 ++++++++-------- .../snapshot-tests/__snapshots__/ouds-web.css | 16 ++++++++-------- 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css b/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css index afef118322..906c192ddf 100644 --- a/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css +++ b/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css @@ -246,9 +246,6 @@ [data-bs-theme=light], :root[data-bs-theme=light] [data-bs-theme=root], :root[data-bs-theme=dark] [data-bs-theme=root-inverted] { - --bs-visual-assets-icon-color-content-status-warning-external-shape: #ffd000; - --bs-visual-assets-icon-color-content-status-warning-internal-shape: #856a00; - --bs-visual-assets-icon-color-content-status-warning-inverse-external-shape: #ffe270; --bs-link-mono-color-content-enabled: #000; --bs-link-mono-color-content-hover: #000; --bs-link-mono-color-content-pressed: rgba(0, 0, 0, 0.52); @@ -303,7 +300,9 @@ --bs-progress-indicator-color-content-track: #ccc; --bs-progress-indicator-mono-color-content-track: #ccc; --bs-progress-indicator-mono-color-content-indicator: #000; - --bs-visual-assets-icon-color-content-status-warning-inverse-internal-shape: rgba(255, 255, 255, 0); + --bs-icon-color-content-status-warning-external-shape: #ffd000; + --bs-icon-color-content-status-warning-internal-shape: #856a00; + --bs-icon-color-content-status-warning-inverse-external-shape: #ffe270; --bs-link-color-chevron-hover: #f15e00; --bs-link-color-chevron-pressed: #f15e00; --bs-link-color-chevron-focus: #f15e00; @@ -313,15 +312,13 @@ --bs-list-item-color-bg-loading: rgba(0, 0, 0, 0.12); --bs-list-item-color-bg-focus: rgba(0, 0, 0, 0.08); --bs-list-item-color-content-loader: #000; + --bs-icon-color-content-status-warning-inverse-internal-shape: rgba(255, 255, 255, 0); } [data-bs-theme=dark], :root[data-bs-theme=dark], :root[data-bs-theme=dark] [data-bs-theme=root], :root[data-bs-theme=light] [data-bs-theme=root-inverted] { - --bs-visual-assets-icon-color-content-status-warning-external-shape: #ffe270; - --bs-visual-assets-icon-color-content-status-warning-internal-shape: rgba(255, 255, 255, 0); - --bs-visual-assets-icon-color-content-status-warning-inverse-external-shape: #ffd000; --bs-link-mono-color-content-enabled: #fff; --bs-link-mono-color-content-hover: #fff; --bs-link-mono-color-content-pressed: rgba(255, 255, 255, 0.8); @@ -376,7 +373,9 @@ --bs-progress-indicator-color-content-track: #444; --bs-progress-indicator-mono-color-content-track: #444; --bs-progress-indicator-mono-color-content-indicator: #fff; - --bs-visual-assets-icon-color-content-status-warning-inverse-internal-shape: #856a00; + --bs-icon-color-content-status-warning-external-shape: #ffe270; + --bs-icon-color-content-status-warning-internal-shape: rgba(255, 255, 255, 0); + --bs-icon-color-content-status-warning-inverse-external-shape: #ffd000; --bs-link-color-chevron-hover: #ff7900; --bs-link-color-chevron-pressed: #ff7900; --bs-link-color-chevron-focus: #ff7900; @@ -386,6 +385,7 @@ --bs-list-item-color-bg-loading: rgba(255, 255, 255, 0.12); --bs-list-item-color-bg-focus: rgba(255, 255, 255, 0.08); --bs-list-item-color-content-loader: #eee; + --bs-icon-color-content-status-warning-inverse-internal-shape: #856a00; } @font-face { diff --git a/scss/tests/snapshot-tests/__snapshots__/ouds-web.css b/scss/tests/snapshot-tests/__snapshots__/ouds-web.css index b229f9225c..ecd75e7fa4 100644 --- a/scss/tests/snapshot-tests/__snapshots__/ouds-web.css +++ b/scss/tests/snapshot-tests/__snapshots__/ouds-web.css @@ -246,9 +246,6 @@ [data-bs-theme=light], :root[data-bs-theme=light] [data-bs-theme=root], :root[data-bs-theme=dark] [data-bs-theme=root-inverted] { - --bs-visual-assets-icon-color-content-status-warning-external-shape: #ffd000; - --bs-visual-assets-icon-color-content-status-warning-internal-shape: #856a00; - --bs-visual-assets-icon-color-content-status-warning-inverse-external-shape: #ffe270; --bs-link-mono-color-content-enabled: #000; --bs-link-mono-color-content-hover: #000; --bs-link-mono-color-content-pressed: rgba(0, 0, 0, 0.52); @@ -303,7 +300,9 @@ --bs-progress-indicator-color-content-track: #ccc; --bs-progress-indicator-mono-color-content-track: #ccc; --bs-progress-indicator-mono-color-content-indicator: #000; - --bs-visual-assets-icon-color-content-status-warning-inverse-internal-shape: rgba(255, 255, 255, 0); + --bs-icon-color-content-status-warning-external-shape: #ffd000; + --bs-icon-color-content-status-warning-internal-shape: #856a00; + --bs-icon-color-content-status-warning-inverse-external-shape: #ffe270; --bs-link-color-chevron-hover: #f15e00; --bs-link-color-chevron-pressed: #f15e00; --bs-link-color-chevron-focus: #f15e00; @@ -313,15 +312,13 @@ --bs-list-item-color-bg-loading: rgba(0, 0, 0, 0.12); --bs-list-item-color-bg-focus: rgba(0, 0, 0, 0.08); --bs-list-item-color-content-loader: #000; + --bs-icon-color-content-status-warning-inverse-internal-shape: rgba(255, 255, 255, 0); } [data-bs-theme=dark], :root[data-bs-theme=dark], :root[data-bs-theme=dark] [data-bs-theme=root], :root[data-bs-theme=light] [data-bs-theme=root-inverted] { - --bs-visual-assets-icon-color-content-status-warning-external-shape: #ffe270; - --bs-visual-assets-icon-color-content-status-warning-internal-shape: rgba(255, 255, 255, 0); - --bs-visual-assets-icon-color-content-status-warning-inverse-external-shape: #ffd000; --bs-link-mono-color-content-enabled: #fff; --bs-link-mono-color-content-hover: #fff; --bs-link-mono-color-content-pressed: rgba(255, 255, 255, 0.8); @@ -376,7 +373,9 @@ --bs-progress-indicator-color-content-track: #444; --bs-progress-indicator-mono-color-content-track: #444; --bs-progress-indicator-mono-color-content-indicator: #fff; - --bs-visual-assets-icon-color-content-status-warning-inverse-internal-shape: #856a00; + --bs-icon-color-content-status-warning-external-shape: #ffe270; + --bs-icon-color-content-status-warning-internal-shape: rgba(255, 255, 255, 0); + --bs-icon-color-content-status-warning-inverse-external-shape: #ffd000; --bs-link-color-chevron-hover: #ff7900; --bs-link-color-chevron-pressed: #ff7900; --bs-link-color-chevron-focus: #ff7900; @@ -386,6 +385,7 @@ --bs-list-item-color-bg-loading: rgba(255, 255, 255, 0.12); --bs-list-item-color-bg-focus: rgba(255, 255, 255, 0.08); --bs-list-item-color-content-loader: #eee; + --bs-icon-color-content-status-warning-inverse-internal-shape: #856a00; } @font-face { From e8f9c7dfaf3480aad37efd365bff9b74b7ebadac Mon Sep 17 00:00:00 2001 From: Maxime Lardenois Date: Fri, 25 Sep 2026 16:46:32 +0200 Subject: [PATCH 17/52] feat: update Alert message to v1.2.0 (#3819) --- scss/_alert.scss | 23 ++++++++++++++--- scss/_root.scss | 3 +++ .../__snapshots__/ouds-web-bootstrap.css | 25 +++++++++++++++---- .../snapshot-tests/__snapshots__/ouds-web.css | 23 +++++++++++++---- site/src/content/docs/components/alerts.mdx | 9 ++++--- .../docs/getting-started/migration.mdx | 12 +++++++++ .../references/components/alerts.md | 5 +++- .../references/getting-started/migration.md | 6 +++++ 8 files changed, 87 insertions(+), 19 deletions(-) diff --git a/scss/_alert.scss b/scss/_alert.scss index 589d73ee21..c48290a338 100644 --- a/scss/_alert.scss +++ b/scss/_alert.scss @@ -23,7 +23,6 @@ } .alert-message { - --#{$prefix}alert-icon-margin-block: #{$ouds-alert-space-padding-block}; // Here to avoid an encapsulation min-width: $ouds-alert-size-min-width; min-height: $ouds-alert-size-min-height; padding-inline: $ouds-alert-space-padding-inline; @@ -43,6 +42,14 @@ @include border-top-end-radius(var(--#{$prefix}alert-border-radius)); } + .alert-icon { + margin-top: $ouds-alert-space-padding-block; + } + + .alert-label { + max-width: var(--#{$prefix}font-max-width-boxed-text); + } + @supports not (container-type: size) { &:not(:has(.alert-text-container p:not(.alert-label), .alert-text-container ul, .alert-container .link)) .btn-close { @include border-bottom-end-radius(var(--#{$prefix}alert-border-radius)); @@ -56,7 +63,6 @@ flex-shrink: 0; width: px-to-rem($ouds-alert-size-asset); height: px-to-rem($ouds-alert-size-asset); - margin-top: var(--#{$prefix}alert-icon-margin-block); color: var(--#{$prefix}alert-icon-color); &:where(:not(:has(svg, img, .icon))) { @@ -94,7 +100,6 @@ display: flex; flex-grow: 1; flex-direction: column; - gap: $ouds-alert-space-row-gap-action; align-items: flex-start; justify-content: center; // To handle weird edge cases in de-zoom one line title alert width: 1%; // To avoid edge cases when the content is too long for the alert @@ -109,9 +114,14 @@ width: 100%; // To avoid the text-container to be larger than it should be > * { // To handle any content inside this text-container. + max-width: var(--#{$prefix}font-max-width-boxed-text); margin-bottom: 0; - @include get-font-size("label-medium", true); font-weight: $ouds-font-weight-web-label-default; + @include get-font-size("label-medium"); + } + + > :not(.alert-label) { + padding-block-end: $ouds-alert-space-padding-block-bottom-content; } ul { @@ -121,6 +131,11 @@ > li { position: relative; padding-left: calc(px-to-rem(20px) + 8px); + margin-bottom: $ouds-alert-message-space-row-gap-bullet; + + &:last-child { + margin-bottom: 0; + } &::before { position: absolute; diff --git a/scss/_root.scss b/scss/_root.scss index 15067f1ff6..40db053609 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -148,6 +148,7 @@ --#{$prefix}font-max-width-label-medium: #{px-to-rem($ouds-size-max-width-label-medium-mobile)}; --#{$prefix}font-max-width-label-large: #{px-to-rem($ouds-size-max-width-label-large-mobile)}; --#{$prefix}font-max-width-label-xlarge: #{px-to-rem($ouds-size-max-width-label-xlarge-mobile)}; + --#{$prefix}font-max-width-boxed-text: #{px-to-rem($ouds-size-max-width-boxed-text-mobile)}; @include media-breakpoint-up(md) { --#{$prefix}font-size-display-large: #{px-to-rem($ouds-font-size-display-large-tablet)}; @@ -194,6 +195,7 @@ --#{$prefix}font-max-width-label-medium: #{px-to-rem($ouds-size-max-width-label-medium-tablet)}; --#{$prefix}font-max-width-label-large: #{px-to-rem($ouds-size-max-width-label-large-tablet)}; --#{$prefix}font-max-width-label-xlarge: #{px-to-rem($ouds-size-max-width-label-xlarge-tablet)}; + --#{$prefix}font-max-width-boxed-text: #{px-to-rem($ouds-size-max-width-boxed-text-tablet)}; } @include media-breakpoint-up(xl) { @@ -241,6 +243,7 @@ --#{$prefix}font-max-width-label-medium: #{px-to-rem($ouds-size-max-width-label-medium-desktop)}; --#{$prefix}font-max-width-label-large: #{px-to-rem($ouds-size-max-width-label-large-desktop)}; --#{$prefix}font-max-width-label-xlarge: #{px-to-rem($ouds-size-max-width-label-xlarge-desktop)}; + --#{$prefix}font-max-width-boxed-text: #{px-to-rem($ouds-size-max-width-boxed-text-desktop)}; } // scss-docs-end root-font-variables-ouds // End mod diff --git a/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css b/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css index 906c192ddf..cec96d9662 100644 --- a/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css +++ b/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css @@ -567,6 +567,7 @@ --bs-font-max-width-label-medium: 40rem; --bs-font-max-width-label-large: 40rem; --bs-font-max-width-label-xlarge: 40rem; + --bs-font-max-width-boxed-text: 45rem; --bs-body-font-family: var(--bs-font-sans-serif); --bs-body-font-size: var(--bs-font-size-body-medium); --bs-body-font-weight: 400; @@ -704,6 +705,7 @@ --bs-font-max-width-label-medium: 40rem; --bs-font-max-width-label-large: 40rem; --bs-font-max-width-label-xlarge: 40rem; + --bs-font-max-width-boxed-text: 50rem; } } @media (min-width: 1320px) { @@ -755,6 +757,7 @@ --bs-font-max-width-label-medium: 40rem; --bs-font-max-width-label-large: 45rem; --bs-font-max-width-label-xlarge: 45rem; + --bs-font-max-width-boxed-text: 55rem; } } @media (min-width: 736px) { @@ -11716,7 +11719,6 @@ ol.bullet-list > li > ol > li > ol > li::before { } .alert-message { - --bs-alert-icon-margin-block: 12px; min-width: 160px; min-height: 48px; padding-inline: 16px; @@ -11733,6 +11735,14 @@ ol.bullet-list > li > ol > li > ol > li::before { .alert-message .btn-close { border-top-right-radius: var(--bs-alert-border-radius); } +.alert-message .alert-icon, .alert-message .alert > svg, +.alert-message .alert > img, +.alert-message .alert > .icon { + margin-top: 12px; +} +.alert-message .alert-label, .alert-message .alert-heading { + max-width: var(--bs-font-max-width-boxed-text); +} @supports not (container-type: size) { .alert-message:not(:has(.alert-text-container p:not(.alert-label), .alert-text-container ul, .alert-container .link)) .btn-close { border-bottom-right-radius: var(--bs-alert-border-radius); @@ -11747,7 +11757,6 @@ ol.bullet-list > li > ol > li > ol > li::before { flex-shrink: 0; width: 1.5rem; height: 1.5rem; - margin-top: var(--bs-alert-icon-margin-block); color: var(--bs-alert-icon-color); } .alert-icon:where(:not(:has(svg, img, .icon)))::before, .alert > svg:where(:not(:has(svg, img, .icon)))::before, @@ -11796,7 +11805,6 @@ ol.bullet-list > li > ol > li > ol > li::before { display: flex; flex-grow: 1; flex-direction: column; - gap: 4px; align-items: flex-start; justify-content: center; width: 1%; @@ -11811,13 +11819,16 @@ ol.bullet-list > li > ol > li > ol > li::before { width: 100%; } .alert-text-container > * { + max-width: var(--bs-font-max-width-boxed-text); margin-bottom: 0; - max-width: var(--bs-font-max-width-label-medium); + font-weight: 400; font-size: var(--bs-font-size-label-medium); line-height: var(--bs-font-line-height-label-medium); /* rtl:remove */ letter-spacing: var(--bs-font-letter-spacing-label-medium); - font-weight: 400; +} +.alert-text-container > :not(.alert-label):not(.alert-heading) { + padding-block-end: 4px; } .alert-text-container ul { padding-left: 0; @@ -11826,6 +11837,10 @@ ol.bullet-list > li > ol > li > ol > li::before { .alert-text-container ul > li { position: relative; padding-left: calc(1.25rem + 8px); + margin-bottom: 0px; +} +.alert-text-container ul > li:last-child { + margin-bottom: 0; } .alert-text-container ul > li::before { position: absolute; diff --git a/scss/tests/snapshot-tests/__snapshots__/ouds-web.css b/scss/tests/snapshot-tests/__snapshots__/ouds-web.css index ecd75e7fa4..41a764aa2f 100644 --- a/scss/tests/snapshot-tests/__snapshots__/ouds-web.css +++ b/scss/tests/snapshot-tests/__snapshots__/ouds-web.css @@ -502,6 +502,7 @@ --bs-font-max-width-label-medium: 40rem; --bs-font-max-width-label-large: 40rem; --bs-font-max-width-label-xlarge: 40rem; + --bs-font-max-width-boxed-text: 45rem; --bs-body-font-family: var(--bs-font-sans-serif); --bs-body-font-size: var(--bs-font-size-body-medium); --bs-body-font-weight: 400; @@ -603,6 +604,7 @@ --bs-font-max-width-label-medium: 40rem; --bs-font-max-width-label-large: 40rem; --bs-font-max-width-label-xlarge: 40rem; + --bs-font-max-width-boxed-text: 50rem; } } @media (min-width: 1320px) { @@ -654,6 +656,7 @@ --bs-font-max-width-label-medium: 40rem; --bs-font-max-width-label-large: 45rem; --bs-font-max-width-label-xlarge: 45rem; + --bs-font-max-width-boxed-text: 55rem; } } @media (min-width: 736px) { @@ -9551,7 +9554,6 @@ ol.bullet-list > li > ol > li > ol > li::before { } .alert-message { - --bs-alert-icon-margin-block: 12px; min-width: 160px; min-height: 48px; padding-inline: 16px; @@ -9568,6 +9570,12 @@ ol.bullet-list > li > ol > li > ol > li::before { .alert-message .btn-close { border-top-right-radius: var(--bs-alert-border-radius); } +.alert-message .alert-icon { + margin-top: 12px; +} +.alert-message .alert-label { + max-width: var(--bs-font-max-width-boxed-text); +} @supports not (container-type: size) { .alert-message:not(:has(.alert-text-container p:not(.alert-label), .alert-text-container ul, .alert-container .link)) .btn-close { border-bottom-right-radius: var(--bs-alert-border-radius); @@ -9580,7 +9588,6 @@ ol.bullet-list > li > ol > li > ol > li::before { flex-shrink: 0; width: 1.5rem; height: 1.5rem; - margin-top: var(--bs-alert-icon-margin-block); color: var(--bs-alert-icon-color); } .alert-icon:where(:not(:has(svg, img, .icon)))::before, .alert-icon:where(:not(:has(svg, img, .icon)))::after { @@ -9613,7 +9620,6 @@ ol.bullet-list > li > ol > li > ol > li::before { display: flex; flex-grow: 1; flex-direction: column; - gap: 4px; align-items: flex-start; justify-content: center; width: 1%; @@ -9628,13 +9634,16 @@ ol.bullet-list > li > ol > li > ol > li::before { width: 100%; } .alert-text-container > * { + max-width: var(--bs-font-max-width-boxed-text); margin-bottom: 0; - max-width: var(--bs-font-max-width-label-medium); + font-weight: 400; font-size: var(--bs-font-size-label-medium); line-height: var(--bs-font-line-height-label-medium); /* rtl:remove */ letter-spacing: var(--bs-font-letter-spacing-label-medium); - font-weight: 400; +} +.alert-text-container > :not(.alert-label) { + padding-block-end: 4px; } .alert-text-container ul { padding-left: 0; @@ -9643,6 +9652,10 @@ ol.bullet-list > li > ol > li > ol > li::before { .alert-text-container ul > li { position: relative; padding-left: calc(1.25rem + 8px); + margin-bottom: 0px; +} +.alert-text-container ul > li:last-child { + margin-bottom: 0; } .alert-text-container ul > li::before { position: absolute; diff --git a/site/src/content/docs/components/alerts.mdx b/site/src/content/docs/components/alerts.mdx index 46c197f408..6faf86ea91 100644 --- a/site/src/content/docs/components/alerts.mdx +++ b/site/src/content/docs/components/alerts.mdx @@ -437,7 +437,8 @@ If the alert can be removed when its content is acknowledged, add a close button You can add an action [link]([[docsref:/components/links]]) (`` or ` - Please note that only the basic link should be used. + - Please note that only the basic link without icon or chevron should be used. + - The [compact version of the link]([[docsref:/components/links#sizes]]) must be used when it is placed inside `.alert-container`. @@ -446,7 +447,7 @@ You can add an action [link]([[docsref:/components/links]]) (`` or `

Info alert

- +
- Action + Action
- Action + Action
+
+ +
+
+
+
+ +
+
+

Label

+
+
+
`} /> @@ -582,6 +599,10 @@ You can navigate through the different assets using the tabs below. For status icons, add `.item-icon` with one of these classes: `.item-status-positive`, `.item-status-warning`, `.item-status-info`, or `.item-status-negative`. + + Please note that even if it's not recommended, we can have an image which is an icon, but it requires `.icon` class on it to behave correctly. + +
@@ -608,6 +629,19 @@ You can navigate through the different assets using the tabs below.
+ + +
+
+
+
+

Label

+
+
+ +
+
+
`} /> diff --git a/site/src/content/docs/getting-started/migration.mdx b/site/src/content/docs/getting-started/migration.mdx index 12ef641aab..35928ad710 100644 --- a/site/src/content/docs/getting-started/migration.mdx +++ b/site/src/content/docs/getting-started/migration.mdx @@ -29,6 +29,10 @@ toc: true - Info Alert message component has been updated to 1.2.0. Read more in the [alert message design changelog](https://r.orange.fr/r/S-ouds-doc-alert-message_changelog). +#### Items + +- Warning Items components have been updated to 1.2.0. Please check that your icons and images in the leading/trailing containers keep behaving as normal. Read more in the [list item design changelog](https://r.orange.fr/r/S-ouds-doc-list-item_changelog). + ## v1.5.0 [[version-changelog-link]]
From 8784c6b5e1dc32160bbbebbfbe6fb1cbd51f8ff7 Mon Sep 17 00:00:00 2001 From: Louis-Maxime Piton Date: Thu, 1 Oct 2026 12:06:51 +0200 Subject: [PATCH 19/52] Fix to avoid a warning Co-authored-by: Maxime Lardenois --- scss/_items.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/_items.scss b/scss/_items.scss index 82936cd4c9..f6bfc015fa 100644 --- a/scss/_items.scss +++ b/scss/_items.scss @@ -27,7 +27,7 @@ display: flex; column-gap: $ouds-list-item-space-column-gap; align-items: var(--#{$prefix}list-item-align-items, center); - min-height: calc(var(--#{$prefix}list-item-min-height, $ouds-list-item-size-min-height-default) - 2 * var(--#{$prefix}list-item-border-width, $ouds-list-item-border-width-default / 2)); + min-height: calc(var(--#{$prefix}list-item-min-height, $ouds-list-item-size-min-height-default) - 2 * var(--#{$prefix}list-item-border-width, calc($ouds-list-item-border-width-default / 2))); padding: calc(var(--#{$prefix}list-item-padding-top, $ouds-list-item-space-padding-block-default) - var(--#{$prefix}list-item-border-width, 0px)) calc($ouds-list-item-space-padding-inline - var(--#{$prefix}list-item-border-width, 0px)) calc(var(--#{$prefix}list-item-padding-bottom, $ouds-list-item-space-padding-block-default) - var(--#{$prefix}list-item-border-width, $ouds-list-item-border-width-default)); } From 587f2a4e70d20b946554cc550da86784e44cf463 Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Fri, 2 Oct 2026 15:50:21 +0200 Subject: [PATCH 20/52] feat: Update buttons components to tokens v2.7 (#3826) Co-authored-by: Maxime Lardenois Co-authored-by: Vincent Prothais --- scss/_buttons.scss | 4 +- .../__snapshots__/ouds-web-bootstrap.css | 9 +- .../snapshot-tests/__snapshots__/ouds-web.css | 9 +- site/data/_components-versions.yml | 4 +- site/src/content/docs/components/buttons.mdx | 152 +++++++----------- .../docs/getting-started/migration.mdx | 10 +- 6 files changed, 80 insertions(+), 108 deletions(-) diff --git a/scss/_buttons.scss b/scss/_buttons.scss index d0793dd602..4b7c4c724b 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -64,10 +64,9 @@ align-items: center; // OUDS mod justify-content: center; // OUDS mod min-width: var(--#{$prefix}btn-min-width); // OUDS mod + max-width: px-to-rem($ouds-button-size-max-width); min-height: var(--#{$prefix}btn-min-height); // OUDS mod padding: calc(var(--#{$prefix}btn-padding-y) - var(--#{$prefix}btn-border-width)) calc(var(--#{$prefix}btn-padding-end) - var(--#{$prefix}btn-border-width)) calc(var(--#{$prefix}btn-padding-y) - var(--#{$prefix}btn-border-width)) calc(var(--#{$prefix}btn-padding-start) - var(--#{$prefix}btn-border-width)); // OUDS mod: instead of `var(--#{$prefix}btn-padding-y) var(--#{$prefix}btn-padding-x)` - // OUDS mod: no font-family - @include get-font-size("label-large"); // OUDS mod font-weight: var(--#{$prefix}btn-font-weight); // OUDS mod: no line-height, already defined by get-font-size color: var(--#{$prefix}btn-color); @@ -78,6 +77,7 @@ cursor: if($enable-button-pointers, pointer, null); user-select: none; border: var(--#{$prefix}btn-border-width) solid var(--#{$prefix}btn-border-color); + @include get-font-size("label-large"); @include border-radius(var(--#{$prefix}btn-border-radius)); @include gradient-bg(var(--#{$prefix}btn-bg)); // OUDS mod: no box-shadow diff --git a/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css b/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css index 0975a9745e..6ae1914fe8 100644 --- a/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css +++ b/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css @@ -8065,12 +8065,9 @@ ol.bullet-list > li > ol > li > ol > li::before { align-items: center; justify-content: center; min-width: var(--bs-btn-min-width); + max-width: 30rem; min-height: var(--bs-btn-min-height); padding: calc(var(--bs-btn-padding-y) - var(--bs-btn-border-width)) calc(var(--bs-btn-padding-end) - var(--bs-btn-border-width)) calc(var(--bs-btn-padding-y) - var(--bs-btn-border-width)) calc(var(--bs-btn-padding-start) - var(--bs-btn-border-width)); - font-size: var(--bs-font-size-label-large); - line-height: var(--bs-font-line-height-label-large); - /* rtl:remove */ - letter-spacing: var(--bs-font-letter-spacing-label-large); font-weight: var(--bs-btn-font-weight); color: var(--bs-btn-color); text-align: center; @@ -8080,6 +8077,10 @@ ol.bullet-list > li > ol > li > ol > li::before { -webkit-user-select: none; user-select: none; border: var(--bs-btn-border-width) solid var(--bs-btn-border-color); + font-size: var(--bs-font-size-label-large); + line-height: var(--bs-font-line-height-label-large); + /* rtl:remove */ + letter-spacing: var(--bs-font-letter-spacing-label-large); border-radius: var(--bs-btn-border-radius); background-color: var(--bs-btn-bg); } diff --git a/scss/tests/snapshot-tests/__snapshots__/ouds-web.css b/scss/tests/snapshot-tests/__snapshots__/ouds-web.css index b9cc8e9474..e40aef3994 100644 --- a/scss/tests/snapshot-tests/__snapshots__/ouds-web.css +++ b/scss/tests/snapshot-tests/__snapshots__/ouds-web.css @@ -6048,12 +6048,9 @@ ol.bullet-list > li > ol > li > ol > li::before { align-items: center; justify-content: center; min-width: var(--bs-btn-min-width); + max-width: 30rem; min-height: var(--bs-btn-min-height); padding: calc(var(--bs-btn-padding-y) - var(--bs-btn-border-width)) calc(var(--bs-btn-padding-end) - var(--bs-btn-border-width)) calc(var(--bs-btn-padding-y) - var(--bs-btn-border-width)) calc(var(--bs-btn-padding-start) - var(--bs-btn-border-width)); - font-size: var(--bs-font-size-label-large); - line-height: var(--bs-font-line-height-label-large); - /* rtl:remove */ - letter-spacing: var(--bs-font-letter-spacing-label-large); font-weight: var(--bs-btn-font-weight); color: var(--bs-btn-color); text-align: center; @@ -6063,6 +6060,10 @@ ol.bullet-list > li > ol > li > ol > li::before { -webkit-user-select: none; user-select: none; border: var(--bs-btn-border-width) solid var(--bs-btn-border-color); + font-size: var(--bs-font-size-label-large); + line-height: var(--bs-font-line-height-label-large); + /* rtl:remove */ + letter-spacing: var(--bs-font-letter-spacing-label-large); border-radius: var(--bs-btn-border-radius); background-color: var(--bs-btn-bg); } diff --git a/site/data/_components-versions.yml b/site/data/_components-versions.yml index b8af106b95..b1eed33bde 100644 --- a/site/data/_components-versions.yml +++ b/site/data/_components-versions.yml @@ -13,7 +13,7 @@ - name: 'app-bar' value: '1.0.0' - name: 'assistant-button' - value: '1.0.0' + value: '1.1.0' - name: 'assistant-icon' value: '1.0.0' - name: 'badge' @@ -115,4 +115,4 @@ - name: 'toolbar-top' value: '1.1.0' - name: 'typography' - value: '1.1.0' \ No newline at end of file + value: '1.1.0' diff --git a/site/src/content/docs/components/buttons.mdx b/site/src/content/docs/components/buttons.mdx index 5ffee76dd5..bbc33c8643 100644 --- a/site/src/content/docs/components/buttons.mdx +++ b/site/src/content/docs/components/buttons.mdx @@ -11,13 +11,11 @@ types: --- import { getData } from '@libs/data' -import { getConfig } from '@libs/config' import { getVersionedDocsPath } from '@libs/path' -import { getMode } from '@libs/sass-variables' +import { getMode, getTokenValue } from '@libs/sass-variables' -{/* TODO: update link when the assistant button design spec is online https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/issues/3734 */} - You can find the OUDS design guidelines here: [button guidelines](https://r.orange.fr/r/S-ouds-doc-button), [navigation button guidelines](https://r.orange.fr/r/S-ouds-doc-navigation-button). + You can find the OUDS design guidelines here: [button guidelines](https://r.orange.fr/r/S-ouds-doc-button), [navigation button guidelines](https://r.orange.fr/r/S-ouds-doc-navigation-button), [assistant button guidelines](https://r.orange.fr/r/S-ouds-doc-assistant-button). ## Overview @@ -687,72 +685,6 @@ Buttons are available in two sizes. Add `.btn-small` to have a smaller button. `} /> -### Layout - -#### Block buttons - -Create responsive stacks of full-width, "block buttons" with a mix of our display and gap utilities. By using utilities instead of button-specific classes, we have much greater control over spacing, alignment, and responsive behaviors. - -Please note that these **full-width** buttons should not be used on desktop screens. - - - - - - - - `} /> - -Here we create a responsive variation, starting with vertically stacked buttons until the `md` breakpoint, where `.md:d-block` replaces the `.d-grid` class, thus nullifying the `gap-small` utility. Resize your browser to see them change. - - - - - - - - `} /> - -You can adjust the width of your block buttons with grid column width classes. For example, for a half-width "block button", use `.col-6`. Center it horizontally with `.mx-auto`, too. - - - - - - - - `} /> - -Additional utilities can be used to adjust the alignment of buttons when horizontal. Here we’ve taken our previous responsive example and added some flex utilities and a margin utility on the button to right-align the buttons when they’re no longer stacked. - - - - - - - - `} /> - -#### Text wrapping - -A button's text should not exceed one line, but will automatically wrap if necessary. It also natively supports `
` tags to break the text into multiple lines. Read more about [text wrapping in a button](https://r.orange.fr/r/S-ouds-doc-button/t/b29aae8b37). - -If you don’t want the button text to wrap, you can add the `.text-nowrap` class to the button. In Sass, you can set `$btn-white-space: nowrap` to disable text wrapping for all buttons. - - - - The label remains centered in
multiline mode with an icon - - - `} /> - ## [[comp]] Navigation button Navigation button is a UI element that enables movement between different pages within a multi-page interface. Navigation button is typically arranged in a sequence to indicate the user’s current position and provide controls for accessing previous, next, or specific pages. @@ -917,22 +849,6 @@ Please refer to the [loading state section of the button component](#loading) fo `} /> -### Layout - -#### Text wrapping - -A button's text should not exceed one line, but will automatically wrap if necessary. It also natively supports `
` tags to break the text into multiple lines. Read more about [text wrapping in a button](https://r.orange.fr/r/S-ouds-doc-navigation-button/t/99e6bc9526). - -If you don’t want the button text to wrap, you can add the `.text-nowrap` class to the button. In Sass, you can set `$btn-white-space: nowrap` to disable text wrapping for each button. - - - The label remains centered in
multiline mode with an icon - - - `} /> - ## [[comp]] Assistant button An assistant button is a UI element that triggers an action or event featuring AI-powered capabilities, such as conversational assistance, content generation, or contextual suggestions. @@ -1038,7 +954,6 @@ Please refer to the [loading state section of the button component](#loading) fo `} /> - ### Sizes Assistant buttons are available in two sizes. Add `.btn-small` to have a smaller button. @@ -1049,19 +964,66 @@ Assistant buttons are available in two sizes. Add `.btn-small` to have a smaller `} /> -### Layout +## Layout -#### Text wrapping +### Text wrapping -{/* TODO: udpate link when the design spec is online https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/issues/3734 */} -A button's text should not exceed one line, but will automatically wrap if necessary. It also natively supports `
` tags to break the text into multiple lines. Read more about [text wrapping in a button](https://r.orange.fr/r/S-ouds-doc-navigation-button/t/99e6bc9526). +Button's width won't exceed {(getTokenValue('$core-ouds-dimension-4000').slice(0, -2)) / 16}rem and will automatically wrap if necessary. Howerver, buttons natively support `
` tags to break the text into multiple lines when needed. Read more about multiline and responsiveness in a [button](https://r.orange.fr/r/S-ouds-doc-button), [navigation button](https://r.orange.fr/r/S-ouds-doc-navigation-button) and [assistant button](https://r.orange.fr/r/S-ouds-doc-assistant-button). -If you don’t want the button text to wrap, you can add the `.text-nowrap` class to the button. In Sass, you can set `$btn-white-space: nowrap` to disable text wrapping for each button. + + A button will automatically wrap if the text is longer than the default max width + + + - - The label remains centered in
multiline mode with an icon + `} /> + + ### Block buttons + +Create responsive stacks of "block buttons" with a mix of our display and gap utilities. By using utilities, we have great control over spacing, alignment, and responsive behaviors. + + + + + + + + `} /> + +Here we create a responsive variation, starting with vertically stacked buttons until the `md` breakpoint, where `.md:d-block` replaces the `.d-grid` class, thus nullifying the `gap-small` utility. Resize your browser to see them change. + + + + + + + + `} /> + +You can adjust the width of your block buttons with grid column width classes like `.col-3`. Center it horizontally with `.mx-auto`, too. Buttons will always be limited by their max-width, so they won't stretch too much on large screens. + + + + + + + + `} /> + +Additional utilities can be used to adjust the alignment of buttons when horizontal. Here we’ve taken our previous responsive example and added some flex utilities and a margin utility on the button to right-align the buttons when they’re no longer stacked. + + + + + + + + `} /> diff --git a/site/src/content/docs/getting-started/migration.mdx b/site/src/content/docs/getting-started/migration.mdx index 35928ad710..1867e26fb3 100644 --- a/site/src/content/docs/getting-started/migration.mdx +++ b/site/src/content/docs/getting-started/migration.mdx @@ -29,6 +29,14 @@ toc: true - Info Alert message component has been updated to 1.2.0. Read more in the [alert message design changelog](https://r.orange.fr/r/S-ouds-doc-alert-message_changelog). +#### Buttons + +- Info Button component has been updated to 3.4.0 with no changes to the HTML. Read more in the [button design changelog](https://r.orange.fr/r/S-ouds-doc-button_changelog). + +- Info Navigation button component has been updated to 3.4.0 with no changes to the HTML. Read more in the [navigation button design changelog](https://r.orange.fr/r/S-ouds-doc-navigation-button_changelog). + +- Info Assistant button component has been updated to 1.1.0 with no changes to the HTML. Read more in our [button design changelog](https://r.orange.fr/r/S-ouds-doc-button_changelog). + #### Items - Warning Items components have been updated to 1.2.0. Please check that your icons and images in the leading/trailing containers keep behaving as normal. Read more in the [list item design changelog](https://r.orange.fr/r/S-ouds-doc-list-item_changelog). @@ -55,7 +63,7 @@ toc: true - Info Button component has been updated to 3.3.0 with no outward changes. Read more in the [button design changelog](https://r.orange.fr/r/S-ouds-doc-button_changelog). -- Info Navigation button component has been updated to 3.3.0 with no outward changes. Read more in the [button design changelog](https://r.orange.fr/r/S-ouds-doc-button_changelog). +- Info Navigation button component has been updated to 3.3.0 with no outward changes. Read more in the [navigation button design changelog](https://r.orange.fr/r/S-ouds-doc-navigation-button_changelog). #### Chips From acef91df53197bbb7c8b1a6b60ee6fa032838093 Mon Sep 17 00:00:00 2001 From: Maxime Lardenois Date: Mon, 5 Oct 2026 09:28:17 +0200 Subject: [PATCH 21/52] freeze some components version --- .../snapshot-tests/__snapshots__/ouds-web-bootstrap.css | 7 +------ scss/tests/snapshot-tests/__snapshots__/ouds-web.css | 7 +------ site/data/_components-versions.yml | 8 ++++---- 3 files changed, 6 insertions(+), 16 deletions(-) diff --git a/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css b/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css index c6a6bff59b..0a2220faa5 100644 --- a/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css +++ b/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css @@ -11810,14 +11810,9 @@ ol.bullet-list > li > ol > li > ol > li::before { padding-right: 0; } .alert-message:has(.alert-container > .link, .alert-container > .link-chevron, -<<<<<<< HEAD -.alert-container > .link-external, .alert-container > .icon-link) { - min-height: 80px; -======= .alert-container > .link-external, .alert-container > .link-expand, .alert-container > .icon-link) { - min-height: 100px; ->>>>>>> main + min-height: 80px; } .alert-message .btn-close { border-top-right-radius: var(--bs-alert-border-radius); diff --git a/scss/tests/snapshot-tests/__snapshots__/ouds-web.css b/scss/tests/snapshot-tests/__snapshots__/ouds-web.css index 0ae151301b..c78b4697d5 100644 --- a/scss/tests/snapshot-tests/__snapshots__/ouds-web.css +++ b/scss/tests/snapshot-tests/__snapshots__/ouds-web.css @@ -9643,14 +9643,9 @@ ol.bullet-list > li > ol > li > ol > li::before { padding-right: 0; } .alert-message:has(.alert-container > .link, .alert-container > .link-chevron, -<<<<<<< HEAD -.alert-container > .link-external) { - min-height: 80px; -======= .alert-container > .link-external, .alert-container > .link-expand) { - min-height: 100px; ->>>>>>> main + min-height: 80px; } .alert-message .btn-close { border-top-right-radius: var(--bs-alert-border-radius); diff --git a/site/data/_components-versions.yml b/site/data/_components-versions.yml index 25c58e2efd..79eac0dcbb 100644 --- a/site/data/_components-versions.yml +++ b/site/data/_components-versions.yml @@ -73,7 +73,7 @@ - name: 'navigation-list-item' value: '1.2.0' - name: 'password-input' - value: '1.3.1' + value: '1.3.0' - name: 'phone-number-input' value: '1.3.1' - name: 'pin-code-input' @@ -83,7 +83,7 @@ - name: 'radio-button' value: '1.4.0' - name: 'select-input' - value: '1.3.1' + value: '1.2.0' - name: 'side-sheet-web' value: '1.0.0' - name: 'skeleton' @@ -103,9 +103,9 @@ - name: 'tag' value: '1.5.0' - name: 'text-area' - value: '1.2.1' + value: '1.2.0' - name: 'text-input' - value: '1.4.1' + value: '1.4.0' - name: 'toast' value: '1.0.0' - name: 'toolbar' From c8e19dfb83fbae5b1704f448107e5afd698e751b Mon Sep 17 00:00:00 2001 From: Maxime Lardenois Date: Mon, 5 Oct 2026 14:04:19 +0200 Subject: [PATCH 22/52] add reference for expand link and button in skills --- .../references/components/buttons.md | 21 +++++++++- .../references/components/links.md | 39 ++++++++++++++----- .../references/getting-started/migration.md | 5 +++ 3 files changed, 53 insertions(+), 12 deletions(-) diff --git a/skills/using-ouds-web/references/components/buttons.md b/skills/using-ouds-web/references/components/buttons.md index 1155099661..cfe3b628cd 100644 --- a/skills/using-ouds-web/references/components/buttons.md +++ b/skills/using-ouds-web/references/components/buttons.md @@ -1,6 +1,6 @@ # Buttons -Three types: **Button**, **Navigation button**, and **Assistant button**. All use base class `.btn`. +Four types: **Button**, **Navigation button**, **Expand button**, and **Assistant button**. All use base class `.btn`. ## Button @@ -153,6 +153,23 @@ Add `.btn-icon`: Same as button — add `.btn-on-colored-bg`. No `.btn-brand` on colored backgrounds. +## Expand button + +Add `.btn-expand` to a button variant to show a chevron that indicates whether associated content is expanded. Set `aria-expanded` to `false` when collapsed and `true` when expanded. The chevron updates from this attribute. + +```html +
+ +
    +
    • +
+
+``` + +Use a ` ``` -## Variants +### Variants -### On colored background +#### On colored background Add `.link-on-colored-bg` along with the appropriate `data-bs-theme` on a parent. Use on colored backgrounds for accessible readability. @@ -34,7 +38,7 @@ Add `.link-on-colored-bg` along with the appropriate `data-bs-theme` on a parent ``` -### With chevron +#### With chevron Add `.link-chevron` for a right-side chevron. Add `.link-previous` (combined with `.link-chevron`) for a left-side chevron. @@ -43,7 +47,7 @@ Add `.link-chevron` for a right-side chevron. Add `.link-previous` (combined wit ``` -### With external icon +#### With external icon Add `.link-external` for a right-side external-link icon. Add visually hidden text to indicate the link opens an external resource. @@ -53,7 +57,7 @@ Add `.link-external` for a right-side external-link icon. Add visually hidden te > ``` -### With icon +#### With icon Use `.icon-link` with an icon before the text. Icons auto-size to `1em`. For font icons, add `.icon` class. @@ -66,9 +70,9 @@ Use `.icon-link` with an icon before the text. Icons auto-size to `1em`. For fon ``` -## States +### States -### Disabled +#### Disabled Add `aria-disabled="true"` to ``. Remove `href` when possible. Uses `pointer-events: none`. @@ -85,7 +89,7 @@ If `href` must be kept and the link conveys no useful info, also add `tabindex=" Focusable disabled link ``` -### Skeleton +#### Skeleton Wrap in `[aria-busy="true"]` with `inert`: @@ -95,7 +99,7 @@ Wrap in `[aria-busy="true"]` with `inert`: ``` -## Sizes +### Sizes Links are available in two sizes and two densities, combinable: @@ -110,3 +114,18 @@ Links are available in two sizes and two densities, combinable: ``` > **Accessibility:** compact and small sizes are not recommended for accessibility reasons (reduced interactive area). Per WCAG 2.5.5 (target size enhanced), a link plus its surrounding space should total at least `44px x 44px`; space compact links apart accordingly. + +## Expand link + +An expand link reveals or hides additional content. Add `.link-expand` to a ` + + +``` diff --git a/skills/using-ouds-web/references/getting-started/migration.md b/skills/using-ouds-web/references/getting-started/migration.md index 2b294c3b5b..709a2a099c 100644 --- a/skills/using-ouds-web/references/getting-started/migration.md +++ b/skills/using-ouds-web/references/getting-started/migration.md @@ -8,6 +8,11 @@ - **Alerts**: action links placed inside `.alert-container`, after `.alert-text-container`, must use the compact link variant: `.link.link-compact`. Action links placed inside `.alert-action-container`, beside the close button, continue to use the regular `.link`. +### New + +- **Buttons**: Expand button implemented +- **Links**: Expand link implemented + ## v1.5.0 ### Breaking changes From ccce50c7b735f7564ac19e1c6e3fa47f7a0a29ff Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Mon, 5 Oct 2026 15:35:05 +0200 Subject: [PATCH 23/52] update from base branch --- site/src/components/home/CSSVariables.astro | 7 +++---- site/src/components/home/Customize.astro | 6 +++--- site/src/components/home/GetStarted.astro | 6 +++--- site/src/content/docs/foundation/typography.mdx | 4 ++-- 4 files changed, 11 insertions(+), 12 deletions(-) diff --git a/site/src/components/home/CSSVariables.astro b/site/src/components/home/CSSVariables.astro index f3a2b54fe1..0b233d8d41 100644 --- a/site/src/components/home/CSSVariables.astro +++ b/site/src/components/home/CSSVariables.astro @@ -1,7 +1,6 @@ --- import { getVersionedDocsPath } from '@libs/path' import Code from '@components/shortcodes/Code.astro' -import {getConfig} from "@libs/config.ts"; ---
@@ -10,7 +9,7 @@ import {getConfig} from "@libs/config.ts";
-

Build and extend in real-time with CSS variables

+

Build and extend in real-time with CSS variables

OUDS Web is evolving with each release to better utilize CSS variables for global theme styles, individual components, and even utilities. We provide dozens of variables for colors, font styles, and more at a

-

Using CSS variables

+

Using CSS variables

Use any of our global :root variables

-

Customizing via CSS variables

+

Customizing via CSS variables

Override global, component, or utility class variables to customize OUDS Web just how you like. No need to redeclare each rule, just a new variable value. diff --git a/site/src/components/home/Customize.astro b/site/src/components/home/Customize.astro index 289d702584..043c067d5a 100644 --- a/site/src/components/home/Customize.astro +++ b/site/src/components/home/Customize.astro @@ -10,7 +10,7 @@ import Code from '@components/shortcodes/Code.astro'

-

Customize everything with Sass

+

Customize everything with Sass

OUDS Web utilizes Sass for a modular and customizable architecture. Import only the components you need, enable global options like gradients and shadows, and write your own CSS with our variables, maps, functions, and mixins. @@ -21,7 +21,7 @@ import Code from '@components/shortcodes/Code.astro'

-

Include all of OUDS Web's Sass

+

Include all of OUDS Web's Sass

Import one stylesheet and you're off to the races with every feature of our CSS.

-

Include what you need

+

Include what you need

The easiest way to customize OUDS Web—include only the CSS you need.

-

Get started any way you want

+

Get started any way you want

Jump right into building with OUDS Web—install it via your favorite package manager, or equip your AI coding agent with ready-to-use Skills.

@@ -19,7 +19,7 @@ import Code from '@components/shortcodes/Code.astro'

-

Install via package manager

+

Install via package manager

Install OUDS Web's source files via npm, yarn, Composer, or NuGet. Package-managed installs include OUDS Web common Sass and JavaScript files and OUDS Web {getConfig().display_brand} theme (Sass files). They don't include documentation or our full build @@ -38,7 +38,7 @@ import Code from '@components/shortcodes/Code.astro' package managers.

-

Use with AI coding agents

+

Use with AI coding agents

OUDS Web ships Agent Skills that give AI coding agents (Claude Code, Cursor, GitHub Copilot, and others) procedural knowledge of the design system, such as correct component markup, layout and utility classes, diff --git a/site/src/content/docs/foundation/typography.mdx b/site/src/content/docs/foundation/typography.mdx index 8b5f138552..b69541efcc 100644 --- a/site/src/content/docs/foundation/typography.mdx +++ b/site/src/content/docs/foundation/typography.mdx @@ -164,13 +164,13 @@ All HTML headings, `

` through `

`, are available. Each class sets `font-s You can easily add an icon with your font reference using [our icon size utilities]([[docsref:/utilities/icons-sizing]]). - + ### Headings 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`. h2. OUDS Web heading with marker

h2. OUDS Web heading with marker

`} /> - + ## Display headings From 7bc5971488dd5a1c97d4a08fe61e8ae68972b325 Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Wed, 7 Oct 2026 17:24:29 +0200 Subject: [PATCH 24/52] Create typo components --- scss/_reboot.scss | 19 + scss/{_type.scss => _typography.scss} | 33 +- scss/_variables.scss | 1 - site/data/_components-versions.yml | 13 +- site/data/components-details.ts | 9 + site/data/sidebar-components.yml | 1 + .../content/docs/components/typography.mdx | 540 ++++++++++++++++++ site/src/content/docs/dual-mode.mdx | 2 +- site/src/content/docs/foundation/reboot.mdx | 205 +++++-- .../content/docs/foundation/typography.mdx | 516 ----------------- .../migration-from-boosted.mdx | 1 + .../docs/getting-started/migration.mdx | 20 +- .../src/content/docs/getting-started/sass.mdx | 6 +- .../content/docs/utilities/icons-sizing.mdx | 10 +- site/src/content/docs/utilities/text.mdx | 4 +- 15 files changed, 748 insertions(+), 632 deletions(-) rename scss/{_type.scss => _typography.scss} (69%) create mode 100644 site/src/content/docs/components/typography.mdx delete mode 100644 site/src/content/docs/foundation/typography.mdx diff --git a/scss/_reboot.scss b/scss/_reboot.scss index 8dd2776350..87c517e48c 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -262,6 +262,25 @@ dd { blockquote { margin: 0 0 $ouds-space-fixed-medium; // OUDS mod: instead of `0 0 1rem` + + > p { + @include get-font-size("body-large"); // OUDS mod: instead of `font-size: $blockquote-font-size` in `.blockquote` + } + + > :last-child { + margin-bottom: 0; + } +} + +.blockquote-footer { + margin-top: -$ouds-space-fixed-medium; + margin-bottom: $ouds-space-fixed-medium; + @include get-font-size("body-small"); // OUDS mod: instead of `font-size: $blockquote-footer-font-size` + color: $blockquote-footer-color; + + &::before { + content: "\2014\00A0"; // em dash, nbsp + } } // OUDS mod: No italic diff --git a/scss/_type.scss b/scss/_typography.scss similarity index 69% rename from scss/_type.scss rename to scss/_typography.scss index 2411e4445a..7088fbf380 100644 --- a/scss/_type.scss +++ b/scss/_typography.scss @@ -28,7 +28,7 @@ @if ($ouds-typography-heading-large-marker and $ouds-heading-large-marker-img) { .h2.marker::after, h2.marker::after, // stylelint-disable-line selector-no-qualifying-type - .fs-hl.marker::after { + .fs-hl.marker::after { // TODO not sure of this one because `.fs-hl` is not completely an equivalent of h2 (it is not bold) display: block; width: $ouds-heading-large-marker-width; height: $ouds-heading-large-marker-height; @@ -85,34 +85,3 @@ margin-right: $list-inline-padding; } } - -// -// Misc -// - -// Builds on `abbr` -// OUDS mod: no .initialism - -// Blockquotes -.blockquote { - margin-bottom: $blockquote-margin-y; - - > p { - @include get-font-size("body-large"); // OUDS mod: instead of `font-size: $blockquote-font-size` in `.blockquote` - } - - > :last-child { - margin-bottom: 0; - } -} - -.blockquote-footer { - margin-top: -$blockquote-margin-y; - margin-bottom: $blockquote-margin-y; - @include get-font-size("body-small"); // OUDS mod: instead of `font-size: $blockquote-footer-font-size` - color: $blockquote-footer-color; - - &::before { - content: "\2014\00A0"; // em dash, nbsp - } -} diff --git a/scss/_variables.scss b/scss/_variables.scss index 994cb23bcf..5b62c32b48 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -747,7 +747,6 @@ $text-muted: var(--#{$prefix}secondary-color) !default; // Depr // OUDS mod: no $initialism-font-size -$blockquote-margin-y: $ouds-space-fixed-medium !default; // OUDS mod: instead of `1rem` // OUDS mod: no `$blockquote-font-size` $blockquote-footer-color: var(--#{$prefix}color-content-muted) !default; // OUDS mod: instead of `$gray-600` // OUDS mod: no `$blockquote-footer-font-size` diff --git a/site/data/_components-versions.yml b/site/data/_components-versions.yml index 79eac0dcbb..20dbb4968d 100644 --- a/site/data/_components-versions.yml +++ b/site/data/_components-versions.yml @@ -22,6 +22,8 @@ value: '1.2.0' - name: 'badge-icon' value: '1.3.0' +- name: 'body' + value: '1.0.0' - name: 'bottom_sheet' value: '0.0.0' - name: 'breadcrumb' @@ -36,6 +38,10 @@ value: '2.4.0' - name: 'circular-progress-indicator' value: '1.2.0' +- name: 'code' + value: '1.0 .0' +- name: 'display' + value: '1.0.0' - name: 'divider' value: '1.0.0' - name: 'expand-button' @@ -50,12 +56,16 @@ value: '1.5.0' - name: 'fullscreen-dialog-web' value: '1.0.0' +- name: 'heading' + value: '1.1.0' - name: 'inline-alert' value: '1.0.0' - name: 'input-tag' value: '1.2.0' - name: 'interactive-icon' value: '1.1.0' +- name: 'label' + value: '1.0.0' - name: 'linear-progress-indicator' value: '1.1.0' - name: 'link' @@ -114,5 +124,4 @@ value: '1.0.0' - name: 'toolbar-top' value: '1.1.0' -- name: 'typography' - value: '1.1.0' + diff --git a/site/data/components-details.ts b/site/data/components-details.ts index af820275c6..71c53f6041 100644 --- a/site/data/components-details.ts +++ b/site/data/components-details.ts @@ -438,5 +438,14 @@ export const componentsDetails: ComponentCardData[] = [
` + }, + { + name: 'Typography', + slug: 'typography', + category: 'Content display', + snippet: ` +

+ Heading +

` } ] diff --git a/site/data/sidebar-components.yml b/site/data/sidebar-components.yml index 481752de3a..95f8fd06af 100644 --- a/site/data/sidebar-components.yml +++ b/site/data/sidebar-components.yml @@ -28,6 +28,7 @@ - title: Tags - title: Text area - title: Text input + - title: Typography - title: Coming soon icon: component-atom diff --git a/site/src/content/docs/components/typography.mdx b/site/src/content/docs/components/typography.mdx new file mode 100644 index 0000000000..bd2958f4a3 --- /dev/null +++ b/site/src/content/docs/components/typography.mdx @@ -0,0 +1,540 @@ +--- +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/foundation/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 + +
    +
  • +
    +
    +
    +

    Heading

    +
    +
    +
    Heading is a UI element that styles typography to structure content and define the hierarchy of information within an interface.
    +
    +
    • +
  • +
    +
    +
    +

    Display

    +
    +
    +
    Display is a UI element that styles typography for impactful content like landing pages, marketing campaigns, and key messages.
    +
    +
    • +
  • +
    +
    +
    +

    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.
    +
    +
    • +
  • +
    +
    +
    + document.getElementById('HelloWorld') +
    +
    +
    Code is a UI element that styles typography for technical content like code snippets, commands, system values, and identifiers.
    +
    +
    • +
+ +### Accessibility + + +To ensure accessibility, make sure you choose the HTML tags you use, based on their **semantic meaning**; whether it is a heading, plain text, or a snippet of code, you should not use the same tag, regardless of how it appears on screen. Each tag conveys its own semantic meaning, which is communicated to screen readers. + +## [[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 class sets `font-size`, and also `line-height`, `letter-spacing`, `font-weight: bold`, and `max-width`. If you want to get rid of the `max-width`, use our `.mw-none` [width utility]([[docsref:/utilities/sizing]]). Here are the associated `font-size`s depending on the breakpoints. + +
+ + + + + + + + + + + { + headingLevel.map((level) => ( + + + { + screenSize.map((size) => ( + + )) + } + + )) + } + +
Heading referenceFont 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' && (<>Body large ({'
'} or .h5))} + {level === 'body-medium' && (<>Body medium ({'
'} or .h6))} +

+ {(getTokenValue(`$ouds-font-size-${level}-${size}`).slice(0, -2)) / 16}rem ({getTokenValue(`$ouds-font-size-${level}-${size}`)}) +
+
+ + +
+ See more details about the heading classes + +
+ + + + + + + + + + + { + headingLevel.map((level) => ( + + + { + screenSize.map((size) => ( + + )) + } + + )) + } + +
Heading referenceFont 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' && (<>Body large ({'
'} or .h5))} + {level === 'body-medium' && (<>Body medium ({'
'} or .h6))} +

+
    +
  • font-size: {(getTokenValue(`$ouds-font-size-${level}-${size}`).slice(0, -2)) / 16}rem
    • +
  • line-height: {Math.round(((getTokenValue( `$ouds-font-line-height-${level}-${size}`).slice(0, -2)) / (getTokenValue(`$ouds-font-size-${level}-${size}`).slice(0, -2))) * 10000) / 10000}
    • +
  • letter-spacing: {(getTokenValue(`$ouds-font-letter-spacing-${level}-${size}`).slice(0, -2)) / 16}rem
    • +
  • max-width: {(getTokenValue(`$ouds-size-max-width-${level}-${size}`).slice(0, -2)) / 16}rem
    • +
+
+
+
+ +h1. OUDS Web heading
+ +

h2. OUDS Web heading

+ +

h3. OUDS Web heading

+ +

h4. OUDS Web heading

+ +
h5. OUDS Web heading
+ +
h6. OUDS Web heading
`} /> + +`.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. + +h1. OUDS Web heading

+ +

h2. OUDS Web heading

+ +

h3. OUDS Web heading

+ +

h4. OUDS Web heading

+ +

h5. OUDS Web heading

+ +

h6. OUDS Web heading

`} /> + +Please note that: +- The `.h1` to `.h6` 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`. Like heading tags and classes, they set the `font-size`, but also the `line-height`, the `letter-spacing` and the `max-width`. +- 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. +- You can easily add an icon with your headings using our [heading icon size utilities]([[docsref:/utilities/icons-sizing#headings]]). + + +### 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`. + +h2. OUDS Web heading with marker

+ +

h2. OUDS Web heading with marker

`} /> + + +## [[comp]] Display + +Display is a UI element that styles typography for impactful content like landing pages, marketing campaigns, and key messages. The display features large type sizes that capture attention and create strong visual emphasis. Variants automatically adjust across breakpoints to maintain a consistent visual hierarchy on all screen sizes. Use it sparingly to preserve its impact and effectiveness. + +We provide `.display-*` from `large` through `small`. Each class sets `font-size`, and also `line-height`, `letter-spacing`, `font-weight: bold`, and `max-width`. If you want to get rid of the `max-width`, please make sure to use our `.mw-none` [width utility]([[docsref:/utilities/sizing]]). Here are the associated `font-size`s depending on the breakpoints. + +
+ + + + + + + + + + + { + displayLevel.map((level) => ( + + + { + screenSize.map((size) => ( + + )) + } + + )) + } + +
Display referenceFont 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'}))} + + {(getTokenValue(`$ouds-font-size-${level}-${size}`).slice(0, -2)) / 16}rem ({getTokenValue(`$ouds-font-size-${level}-${size}`)}) +
+
+ +
+ See more details about the display classes + +
+ + + + + + + + + + + { + displayLevel.map((level) => ( + + + { + screenSize.map((size) => ( + + )) + } + + )) + } + +
Display referenceFont 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'}))} + +
    +
  • font-size: {(getTokenValue(`$ouds-font-size-${level}-${size}`).slice(0, -2)) / 16}rem
    • +
  • line-height: {Math.round(((getTokenValue(`$ouds-font-line-height-${level}-${size}`).slice(0, -2)) / (getTokenValue(`$ouds-font-size-${level}-${size}`).slice(0, -2))) * 10000) / 10000}
    • +
  • letter-spacing: {(getTokenValue(`$ouds-font-letter-spacing-${level}-${size}`).slice(0, -2)) / 16}rem
    • +
  • max-width: {(getTokenValue(`$ouds-size-max-width-${level}-${size}`).slice(0, -2)) / 16}rem
    • +
+
+
+
+ +Display large
+ +

Display medium

+ +

Display small

`} /> + +Please note that: +- The `.display-large` to `.display-small` classes are equivalent to the [font size text utilities]([[docsref:/utilities/text#font-size]]) `.fs-dl`, `.fs-dm`, and `.fs-ds`, except for the `font-weight`. Like display classes, they set not only the `font-size`, but also the `line-height`, the `letter-spacing`, and the `max-width`. +- You have to use the appropriate HTML tag to convey the right semantic meaning. +- You should not use any icon with our `.display-*` font sizes, because we prefer to keep the place for the text. + +## [[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. + +Regular body text forms the core of your content. Body text has three size levels: large (for emphasis), medium (default), and small (for supporting information). Each class sets `font-size`, `line-height`, `letter-spacing`, and `max-width`. To remove the `max-width`, use the `.mw-none` [width utility]([[docsref:/utilities/sizing]]). Body texts use `font-weight: normal` by default, but can use other font weights as needed through our [font weight utilities]([[docsref:/utilities/text#font-weight]]). + + + By default, body medium is set on the `:root` element, and the `max-width` property is applied to `

` elements. + + +

+ + + + + + + + + + + { + textLevel.map((level) => ( + + + { + screenSize.map((size) => ( + + )) + } + + )) + } + +
Body referenceFont size from `2xs` to `sm`Font size from `md` to `lg`Font size for `xl` and upper
+ {level === 'body-large' && (<>Body large ({'.lead'}))} + {level === 'body-medium' && (<>Body medium (default {'

'}))} + {level === 'body-small' && (<>Body small ({'.small'} or {''}))} +

+ {(getTokenValue(`$ouds-font-size-${level}-${size}`).slice(0, -2)) / 16}rem ({getTokenValue(`$ouds-font-size-${level}-${size}`)}) +
+
+ +
+ See more details about the body classes +
+ + + + + + + + + + + { + textLevel.map((level) => ( + + + { + screenSize.map((size) => ( + + )) + } + + )) + } + +
Body referenceFont size from `2xs` to `sm`Font size from `md` to `lg`Font size for `xl` and upper
+ {level === 'body-large' && (<>Body large ({'.lead'}))} + {level === 'body-medium' && (<>Body medium (default {'

'}))} + {level === 'body-small' && (<>Body small ({'.small'} or {''}))} +

+
    +
  • font-size: {(getTokenValue(`$ouds-font-size-${level}-${size}`).slice(0, -2)) / 16}rem
    • +
  • line-height: {Math.round(((getTokenValue(`$ouds-font-line-height-${level}-${size}`).slice(0, -2)) / (getTokenValue(`$ouds-font-size-${level}-${size}`).slice(0, -2))) * 10000) / 10000}
    • +
  • letter-spacing: {(getTokenValue(`$ouds-font-letter-spacing-${level}-${size}`).slice(0, -2)) / 16}rem
    • +
  • max-width: {(getTokenValue(`$ouds-size-max-width-${level}-${size}`).slice(0, -2)) / 16}rem
    • +
+
+
+
+ + + This is a lead paragraph. It stands out from regular paragraphs. +

+ +

This is a regular body paragraph.

+ +

This is a small paragraph.

+ +

This is another small paragraph.

`} /> + +Please note that: +- 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`. Like body texts, they set the `font-size`, but also the `line-height`, the `letter-spacing` and the `max-width`. +- You have to use the appropriate HTML tag to convey the right semantic meaning, generally a `

`. +- You can easily add an icon with your body texts using our [body text icon size utilities]([[docsref:/utilities/icons-sizing#body-texts]]). + +## [[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 class sets `font-size`, `line-height`, `letter-spacing`, and `max-width`. To remove the `max-width`, use the `.mw-none` [width utility]([[docsref:/utilities/sizing]]). Label texts use `font-weight: normal` by default, but can use other font weights as needed through our [font weight utilities]([[docsref:/utilities/text#font-weight]]). + +

+ + + + + + + + + { + labelLevel.map((level) => ( + + + + + + + )) + } + +
Label referenceFont 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 +
+ + + + + + + + + + + { + labelLevel.map((level) => ( + + + { + screenSize.map((size) => ( + + )) + } + + )) + } + +
Label referenceFont 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'}))} + +
    +
  • font-size: {(getTokenValue(`$ouds-font-size-${level}`).slice(0, -2)) / 16}rem
    • +
  • line-height: {Math.round(((getTokenValue(`$ouds-font-line-height-${level}`).slice(0, -2)) / (getTokenValue(`$ouds-font-size-${level}`).slice(0, -2))) * 10000) / 10000}
    • +
  • letter-spacing: {(getTokenValue(`$ouds-font-letter-spacing-${level}`).slice(0, -2)) / 16}rem
    • +
  • max-width: {(getTokenValue(`$ouds-size-max-width-${level}-${size}`).slice(0, -2)) / 16}rem
    • +
+
+
+
+ +Label xlarge text

+ +

Label large text

+ +

Label medium text

+ +

Label small text

`} /> + +Please note that you have to use the appropriate HTML tag to convey the right semantic meaning. + +## [[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. + +### Inline code + +Use the `` element to mark short code snippets within text. The `` element uses the monospace code font stack and is styled to stand out from surrounding text. + +<section> should be wrapped as inline.`} /> + +### Code blocks + +Use `
` for displaying multiple lines of code. The `
` element preserves whitespace and formatting, particularly indentation, while the `` element marks the content as code.
+
+<p>Sample text here...</p>
+<p>And another line of sample text here...</p>
`} />
diff --git a/site/src/content/docs/dual-mode.mdx b/site/src/content/docs/dual-mode.mdx
index 0a10f90d10..57580a31fc 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..6bb2216a53 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 stylised 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 (like `ouds-web.css`, `ouds-web-reboot.css`, or `ouds-web-grid.css`) CSS bundle includes `_root.scss`, which defines root-level [CSS variables]([[docsref:/foundation/css-variables]]) (also called custom properties). These variables are generated from Sass variables, so you can customize styles with Sass at build time or with CSS variables at runtime.
 
 For example, consider these `:root` CSS variables for common `:root` styles:
 
@@ -43,44 +46,29 @@ Which allows you to make real-time customizations however you like:
      `} />
 
-## Page defaults
+### Page defaults
 
-The `:root` and child elements are updated to provide better page-wide defaults. More specifically:
+Reboot sets consistent defaults for the page:
 
-- The `box-sizing` is globally set on every element—including `*::before` and `*::after`, to `border-box`. This ensures that the declared width of element is never exceeded due to padding or border.
-- No base `font-size` is declared on the ``, but `16px` is assumed (the browser default). `font-size: 1rem` is applied on the `:root` children for easy responsive type-scaling via media queries while respecting user preferences and ensuring a more accessible approach. This browser default can be overridden by modifying the `$font-size-root` variable.
-- The `:root` children also sets a global `font-family`, `font-weight`, `line-height`, and `color`. This is inherited later by some form elements to prevent font inconsistencies.
-- For safety, the `:root` children has a declared `background-color`, defaulting to `#fff`.
+- Every element, including `*::before` and `*::after`, uses `box-sizing: border-box`. Padding and borders are included in the declared width.
+- Reboot does not set a font size on ``, so `1rem` follows the browser default (usually `16px`) and respects user preferences. Direct children of the root use `font-size: 1rem`. Set a new `$font-size-root` to override the browser default.
+- Direct children of the root receive the base `font-family`, `font-weight`, `line-height`, `color`, and `background-color`.
 
-## Font stack
-OUDS Web uses custom fonts loaded from a CDN, to ensure optimum text rendering on every device and OS, and to benefit from the browser's cache.
+### Font stack
+OUDS Web loads custom brand fonts from a CDN, to ensure optimum text rendering on every device and OS, and to benefit from the browser's cache.
 
-OUDS Web utilizes a “native font stack” or “system font stack” — as a fallback for custom font — for optimum text rendering on every device and OS. These system fonts have been designed specifically with today’s devices in mind, with improved rendering on screens, variable font support, and more. Read more about [native font stacks in this *Smashing Magazine* article](https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/).
+If a custom font is unavailable, OUDS Web uses a system font stack for clear text rendering across devices. The stack is defined here:
 
 
 
-This `font-family` is applied to the `` and automatically inherited globally throughout OUDS Web. To switch the global `font-family`, update `$font-family-base` and recompile OUDS Web.
+This stack is applied globally. To change it, update `$font-family-base` and rebuild OUDS Web.
 
-The font faces are generated directly in the `_root.scss` file, based on the `$custom-font-cdn-urls` map variable. You can customize these URLs if needed (for example, to avoid loading resources from the Internet).
+Font-face rules are generated in `_root.scss` from the `$custom-font-cdn-urls` map. Update the URLs if you host the fonts elsewhere.
 
-The following `font-family` is applied on every code basis element. To switch the global `font-family`, update `$font-family-code` and recompile OUDS Web.
+Code elements use the monospace stack below. To change it, update `$font-family-code` and rebuild OUDS Web.
 
 
 
-## Headings
-
-All heading elements—`
`—`
` have their `margin-top` removed, margin-bottom: {getTokenValue('$ouds-space-fixed-medium')} set, and `line-height` tightened. While headings inherit their `color` by default, you can also override it via optional CSS variable, `--bs-heading-color`.
-
-
-| Heading | Example |
-| --- | --- |
-| `
` | 
h1. OUDS Web heading
 |
-| `
` | 
h2. OUDS Web heading
 |
-| `
` | 
h3. OUDS Web heading
 |
-| `
` | 
h4. OUDS Web heading
 |
-| `
` | 
h5. OUDS Web heading
 |
-| `
` | 
h6. OUDS Web heading
 |
-
 
 ## Paragraphs
 
@@ -168,38 +156,81 @@ For simpler styling, clear hierarchy, and better spacing, description lists have
     
Definition for this other term.

   `} />
 
-## Inline code
 
-Wrap inline snippets of code with ``. Be sure to escape HTML angle brackets.
+### Description list alignment
+{/* TODO See if we keep it: its just some tips to use our utilities, I don't think this is very useful here */}
 
-<section> should be wrapped as inline.`} />
+Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic mixins). For longer terms, you can optionally add a `.text-truncate` class to truncate the text with an ellipsis.
 
-## Code blocks
+
+    
Description lists

+    
A description list is perfect for defining terms.

 
-Use `
`s for multiple lines of code. Once again, be sure to escape any angle brackets in the code for proper rendering. The `
` element is reset to remove its `margin-top` and use `px` units for its `margin-bottom`.
+    
Term

+    

+      
Definition for the term.

+      
And some more placeholder definition text.

+    

 
-<p>Sample text here...</p>
-  <p>And another line of sample text here...</p>
-  
`} />
+    
Another term

+    
This definition is short, so no extra paragraphs or anything.

 
-## Variables
+    
Truncated term is truncated

+    
This can be useful when space is tight. Adds an ellipsis at the end.

 
-For indicating variables use the `` tag.
+    
Nesting

+    

+      

+        
Nested definition list

+        
I heard you like definition lists. Let me put a definition list inside your definition list.

+      

+    

+  `} />
 
-y = mx + b`} />
+## Inline text elements
 
-## User input
+Styling for common inline HTML5 elements.
 
-Use the `` to indicate input that is typically entered via keyboard.
+You can use the mark tag to highlight text.

+
This line of text is meant to be treated as deleted text.

+
This line of text is meant to be treated as no longer accurate.

+
This line of text is meant to be treated as an addition to the document.

+
This line of text will render as underlined.

+
This line of text is meant to be treated as fine print.

+
This line rendered as bold text.

+
This line rendered as bold text too, but would natively be italicized.
`} />
 
-cd followed by the name of the directory.

-  To edit settings, press Ctrl + ,`} />
+Beware that those tags should be used for semantic purpose:
 
-## Sample output
+- `` represents text which is marked or highlighted for reference or notation purposes.
+- `` represents side-comments and small print, like copyright and legal text. It uses [Regular text](#regular-texts) body small.
+- `` represents element that are no longer relevant or no longer accurate.
+- `` represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation.
 
-For indicating sample output from a program use the `` tag.
+If you want to style your text, you should use the following classes instead:
 
-This text is meant to be treated as sample output from a computer program.`} />
+- `.mark` will apply the same styles as ``.
+- `.small` will apply the same styles as ``.
+- `.text-decoration-underline` will apply the same styles as ``.
+- `.text-decoration-line-through` will apply the same styles as ``.
+
+While not shown above, feel free to use `` and `` in HTML5. `` is meant to highlight words or phrases without conveying additional importance, while `` is mostly for voice, technical terms, etc.
+
+## Code
+
+### Inline code
+
+Wrap inline snippets of code with ``. Be sure to escape HTML angle brackets.
+
+<section> should be wrapped as inline.`} />
+
+### Code blocks
+
+Use `
`s for multiple lines of code. Once again, be sure to escape any angle brackets in the code for proper rendering. The `
` element is reset to remove its `margin-top` and use `px` units for its `margin-bottom`.
+
+<p>Sample text here...</p>
+  <p>And another line of sample text here...</p>
+  
`} />
 
 ## Tables
 
@@ -382,9 +413,26 @@ Reboot includes an enhancement for `role="button"` to change the default cursor
 
 Non-button element button`} />
 
-## Misc elements
+## Variables
+
+For indicating variables use the `` tag.
+
+y = mx + b`} />
+
+## User input
+
+Use the `` to indicate input that is typically entered via keyboard.
 
-### Address
+cd followed by the name of the directory.

+  To edit settings, press Ctrl + ,`} />
+
+## Sample output
+
+For indicating sample output from a program use the `` tag.
+
+This text is meant to be treated as sample output from a computer program.`} />
+
+## Address
 
 The `
` element is updated to reset the browser default `font-style` from `italic` to `normal`. `line-height` is also now inherited, and margin-bottom: {getTokenValue('$ouds-space-fixed-medium')} has been added. `
`s are for presenting contact information for the nearest ancestor (or an entire body of work). Preserve formatting by ending lines with `
`.
 
@@ -400,26 +448,57 @@ The `
` element is updated to reset the browser default `font-style` fro
     first.last@example.com
   
`} />
 
-### Blockquote
+## Blockquote
+
+For quoting blocks of content from another source within your document, wrap `
` around any HTML as the quote. The default `margin` on blockquotes is `1em 40px`, so we reset that to 0 0 {getTokenValue('$ouds-space-fixed-medium')} for something more consistent with other elements. `
` uses [Regular text](#regular-texts) body large. {/* TODO change the link */}
+
+
+    
A well-known quote, contained in a blockquote element.

+  
`} />
+
+### Naming a source
 
-The default `margin` on blockquotes is `1em 40px`, so we reset that to 0 0 {getTokenValue('$ouds-space-fixed-medium')} for something more consistent with other elements.
+The HTML spec requires that blockquote attribution be placed outside the `
`. When providing attribution, wrap your `
` in a `
` and use a `
` or a block level element (e.g., `
`) with the `.blockquote-footer` class. Be sure to wrap the name of the source work in `` as well. It uses [Regular text](#regular-texts) body small.
 
-
-    

+
+    

       
A well-known quote, contained in a blockquote element.

     

-    

+    

+      Someone famous in Source Title
+    

+  
`} />
+
+### Alignment
+{/* TODO See if we keep it: its just some tips to use our utilities, I don't think this is very useful here */}
+
+Use text utilities as needed to change the alignment of your blockquote.
+
+
+    

+      
A well-known quote, contained in a blockquote element.

+    

+    

+      Someone famous in Source Title
+    

+  `} />
+
+
+    

+      
A well-known quote, contained in a blockquote element.

+    

+    

       Someone famous in Source Title
     

   `} />
 
-### Inline elements
+## Abbreviations
 
-The `` element receives basic styling to make it stand out amongst paragraph text.
+Stylized implementation of HTML’s `` 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.
 
 HTML abbreviation element.`} />
 
-### Summary
+## Summary
 
 The default `cursor` on summary is `text`, so we reset that to `pointer` to convey that the element can be interacted with by clicking on it.
 
diff --git a/site/src/content/docs/foundation/typography.mdx b/site/src/content/docs/foundation/typography.mdx
deleted file mode 100644
index b69541efcc..0000000000
--- a/site/src/content/docs/foundation/typography.mdx
+++ /dev/null
@@ -1,516 +0,0 @@
----
-title: Typography
-description: Documentation and examples for OUDS Web typography, including global settings, headings, body text, lists, and more.
-aliases:
-  - "/docs/content/typography/"
-  - "/docs/foundation/typography/"
-toc: true
----
-
-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"
-]
-
-## Global settings
-
-OUDS Web sets basic global display, typography, and link styles. When more control is needed, check out the [textual utility classes]([[docsref:/utilities/text]]).
-
-- Use a [font stack]([[docsref:/foundation/reboot#font-stack]]) of a custom font with native fonts fallback that selects the best `font-family` for each OS and device.
-- For a more inclusive and accessible type scale, we use the browser’s default root `font-size` (typically 16px) so visitors can customize their browser defaults as needed.
-- 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]]).
-- 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`.
-
-
-  If you need need to include a font reference inside a custom component, please refer to our [font mixin section](#sass-mixins).
-
-
-## Headings
-
-All HTML headings, `
` through `
`, are available. Each class sets `font-size` but also `line-height`, `letter-spacing`, `font-weight: bold`, and `max-width`. Here are the associated `font-size`s depending on the breakpoints. If you want to get rid of the `max-width`, please make sure to use our `.mw-none` [width utility]([[docsref:/utilities/sizing]]).
-
-

-  

   

-    
-      
-        
-        
-        
-        
-      
-    
-    
-{
-  headingLevel.map((level) => (
-    
-      
-      {
-          screenSize.map((size) => (
-          
-        ))
-      }
-    
-  ))
-}
-    
-  
Heading referenceValues from `2xs` to `sm`Values from `md` to `lg`Values for `xl` and upper

-        {level === 'heading-xlarge' && (<>Heading xlarge ({'
'}))}
-        {level === 'heading-large' && (<>Heading large ({'
'}))}
-        {level === 'heading-medium' && (<>Heading medium ({'
'}))}
-        {level === 'heading-small' && (<>Heading small ({'
'}))}
-        {level === 'body-large' && (<>Body large ({'
'}))}
-        {level === 'body-medium' && (<>Body medium ({'
'}))}
-      		
-            {(getTokenValue(`$ouds-font-size-${level}-${size}`).slice(0, -2)) / 16}rem ({getTokenValue(`$ouds-font-size-${level}-${size}`)})
-          

-
-
-
-

-  See more details about the heading classes
-
-  

-    
-      
-      
-        
-        
-        
-        
-      
-      
-      
-      {
-        headingLevel.map((level) => (
-          
-            
-            {
-              screenSize.map((size) => (
-                
-              ))
-            }
-          
-        ))
-      }
-      
-    
Heading referenceValues from `2xs` to `sm`Values from `md` to `lg`Values for `xl` and upper

-              {level === 'heading-xlarge' && (<>Heading xlarge ({'
'}))}
-              {level === 'heading-large' && (<>Heading large ({'
'}))}
-              {level === 'heading-medium' && (<>Heading medium ({'
'}))}
-              {level === 'heading-small' && (<>Heading small ({'
'}))}
-              {level === 'body-large' && (<>Body large ({'
'}))}
-              {level === 'body-medium' && (<>Body medium ({'
'}))}
-            		
-                  
    
-                    
  • font-size: {(getTokenValue(`$ouds-font-size-${level}-${size}`).slice(0, -2)) / 16}rem
    • 
-                    
  • line-height: {Math.round(((getTokenValue( `$ouds-font-line-height-${level}-${size}`).slice(0, -2)) / (getTokenValue(`$ouds-font-size-${level}-${size}`).slice(0, -2))) * 10000) / 10000}
    • 
-                    
  • letter-spacing: {(getTokenValue(`$ouds-font-letter-spacing-${level}-${size}`).slice(0, -2)) / 16}rem
    • 
-                    
  • max-width: {(getTokenValue(`$ouds-size-max-width-${level}-${size}`).slice(0, -2)) / 16}rem
    • 
-                  

-                

-  

-

-
-h1. OUDS Web heading
-  
h2. OUDS Web heading

-  
h3. OUDS Web heading

-  
h4. OUDS Web heading

-  
h5. OUDS Web heading

-  
h6. OUDS Web heading
`} />
-
-`.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.
-
-h1. OUDS Web heading

-  
h2. OUDS Web heading

-  
h3. OUDS Web heading

-  
h4. OUDS Web heading

-  
h5. OUDS Web heading

-  
h6. OUDS Web heading
`} />
-
-You can easily add an icon with your font reference using [our icon size utilities]([[docsref:/utilities/icons-sizing]]).
-
-
-
-  ### Headings 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`.
-  h2. OUDS Web heading with marker

-  
h2. OUDS Web heading with marker
`} />
-
-
-## Display headings
-
-Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a **display heading**—a larger, slightly more opinionated heading style.
-
-We provide `.display-*` from `large` through `small`. Each class sets `font-size` but also `line-height`, `letter-spacing`, `font-weight: bold`, and `max-width`. If you want to get rid of the `max-width`, please make sure to use our `.mw-none` [width utility]([[docsref:/utilities/sizing]]). Here are the associated `font-size`s depending on the breakpoints.
-
-
-

-  
-    
-      
-        
-        
-        
-        
-      
-    
-    
-    {
-      displayLevel.map((level) => (
-      
-        
-        {
-          screenSize.map((size) => (
-            
-            ))
-        }
-      
-      ))
-    }
-    
-  
Display referenceValues from `2xs` to `sm`Values from `md` to `lg`Values 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'}))}
-        
-              {(getTokenValue(`$ouds-font-size-${level}-${size}`).slice(0, -2)) / 16}rem ({getTokenValue(`$ouds-font-size-${level}-${size}`)})
-            

-

-
-
-

-  See more details about the display classes
-
-  

-    
-      
-        
-          
-          
-          
-          
-        
-      
-      
-      {
-        displayLevel.map((level) => (
-          
-            
-            {
-              screenSize.map((size) => (
-                
-              ))
-            }
-          
-        ))
-      }
-      
-    
Display referenceValues from `2xs` to `sm`Values from `md` to `lg`Values 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'}))}
-            
-                  
    
-                    
  • font-size: {(getTokenValue(`$ouds-font-size-${level}-${size}`).slice(0, -2)) / 16}rem
    • 
-                    
  • line-height: {Math.round(((getTokenValue(`$ouds-font-line-height-${level}-${size}`).slice(0, -2)) / (getTokenValue(`$ouds-font-size-${level}-${size}`).slice(0, -2))) * 10000) / 10000}
    • 
-                    
  • letter-spacing: {(getTokenValue(`$ouds-font-letter-spacing-${level}-${size}`).slice(0, -2)) / 16}rem
    • 
-                    
  • max-width: {(getTokenValue(`$ouds-size-max-width-${level}-${size}`).slice(0, -2)) / 16}rem
    • 
-                  

-                

-  

-

-
-Display large
-  
Display medium

-  
Display small
`} />
-
-Display headings are configured via the `$display-font-sizes` Sass map and the variable `$display-font-weight`.
-
-Display headings are customizable via three variables, `$display-font-family`, `$display-font-style` and `$display-line-height`.
-
-
-
-Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a **display heading**—a larger, slightly more opinionated heading style.
-
-Display 1
-  
Display 2

-  
Display 3

-  
Display 4

-  
Display 5

-  
Display 6
`} />
-
-Display headings are configured via the `$display-font-sizes` Sass map and two variables, `$display-font-weight` and `$display-line-height`.
-
-Display headings are customizable via two variables, `$display-font-family` and `$display-font-style`.
-
-
-
-
-
-## Regular texts
-
-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`. If you want to get rid of the `max-width`, please make sure to use our `.mw-none` [width utility]([[docsref:/utilities/sizing]]). Here are the associated `font-size`s depending on the breakpoints. See our [Font utilities]([[docsref:/utilities/text#font-size]]).
-
-
-  Body medium is set by default on `:root` children but we don’t set the `max-width` property for usability reasons.
-
-
-
-

-  
-    
-      
-        
-        
-        
-        
-      
-    
-    
-    {
-      [ ...textLevel, ...labelLevel].map((level) => (
-      
-        
-        {
-          screenSize.map((size) => (
-            
-          ))
-        }
-      
-      ))
-    }
-    
-  
Regular text referenceValues from `2xs` to `sm`Values from `md` to `lg`Values for `xl` and upper

-          {level === 'body-large' && (<>Body large ({'.lead'}))}
-          {level === 'body-medium' && (<>Body medium (default {'
'}))}
-          {level === 'body-small' && (<>Body small ({'.small'} or {''}))}
-          {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'}))}
-        

-              {!level.includes('label-')
-                    && (<>{(getTokenValue(`$ouds-font-size-${level}-${size}`).slice(0, -2)) / 16}rem ({getTokenValue(`$ouds-font-size-${level}-${size}`)}))}
-              {level.includes('label-')
-                && (<>{(getTokenValue(`$ouds-font-size-${level}`).slice(0, -2)) / 16}rem ({getTokenValue(`$ouds-font-size-${level}`)}))}
-            

-

-
-

-  See more details about the regular text classes
-  

-    
-      
-        
-          
-          
-          
-          
-        
-      
-      
-      {
-        [ ...textLevel, ...labelLevel].map((level) => (
-        
-          
-          {
-            screenSize.map((size) => (
-              
-            ))
-          }
-        
-        ))
-      }
-      
-    
Regular text referenceValues from `2xs` to `sm`Values from `md` to `lg`Values for `xl` and upper

-            {level === 'body-large' && (<>Body large ({'.lead'}))}
-            {level === 'body-medium' && (<>Body medium (default {'
'}))}
-            {level === 'body-small' && (<>Body small ({'.small'} or {''}))}
-            {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'}))}
-          

-                
    
-                  
  • font-size: {(getTokenValue(`$ouds-font-size-${level}${!level.includes('label-') ? '-' + size : ''}`).slice(0, -2)) / 16}rem
    • 
-                  
  • line-height: {Math.round(((getTokenValue(`$ouds-font-line-height-${level}${!level.includes('label-') ? '-' + size : ''}`).slice(0, -2)) / (getTokenValue(`$ouds-font-size-${level}${!level.includes('label-') ? '-' + size : ''}`).slice(0, -2))) * 10000) / 10000}
    • 
-                  
  • letter-spacing: {(getTokenValue(`$ouds-font-letter-spacing-${level}${!level.includes('label-') ? '-' + size : ''}`).slice(0, -2)) / 16}rem
    • 
-                  
  • max-width: {(getTokenValue(`$ouds-size-max-width-${level}-${size}`).slice(0, -2)) / 16}rem
    • 
-                

-              

-  

-

-
-You can easily add an icon with your font reference using [our icon size utilities]([[docsref:/utilities/icons-sizing]]).
-
-### Lead
-
-Make a paragraph stand out by adding `.lead`. It uses [Regular text](#regular-texts) body large.
-
-
-    This is a lead paragraph. It stands out from regular paragraphs.
-  
`} />
-
-### Small
-
-Render a paragraph with a small `font-size` by adding `.small` or use ``. It uses [Regular text](#regular-texts) body small.
-
-
-    This is a small paragraph.
-  

-  

-    This is a small paragraph.
-  
`} />
-
-## Inline text elements
-
-Styling for common inline HTML5 elements.
-
-You can use the mark tag to highlight text.

-  
This line of text is meant to be treated as deleted text.

-  
This line of text is meant to be treated as no longer accurate.

-  
This line of text is meant to be treated as an addition to the document.

-  
This line of text will render as underlined.

-  
This line of text is meant to be treated as fine print.

-  
This line rendered as bold text.

-  
This line rendered as bold text too, but would natively be italicized.
`} />
-
-Beware that those tags should be used for semantic purpose:
-
-- `` represents text which is marked or highlighted for reference or notation purposes.
-- `` represents side-comments and small print, like copyright and legal text. It uses [Regular text](#regular-texts) body small.
-- `` represents element that are no longer relevant or no longer accurate.
-- `` represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation.
-
-If you want to style your text, you should use the following classes instead:
-
-- `.mark` will apply the same styles as ``.
-- `.small` will apply the same styles as ``.
-- `.text-decoration-underline` will apply the same styles as ``.
-- `.text-decoration-line-through` will apply the same styles as ``.
-
-While not shown above, feel free to use `` and `` in HTML5. `` is meant to highlight words or phrases without conveying additional importance, while `` is mostly for voice, technical terms, etc.
-
-## Text utilities
-
-Change text alignment, transform, style, weight, line-height, decoration and color with our [text utilities]([[docsref:/utilities/text]]) and [color utilities]([[docsref:/utilities/color]]).
-
-## Abbreviations
-
-Stylized implementation of HTML’s `` 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.
-
-attr
`} />
-
-## Blockquotes
-
-For quoting blocks of content from another source within your document. Wrap `
` around any HTML as the quote. It uses [Regular text](#regular-texts) body large.
-
-
-    
A well-known quote, contained in a blockquote element.

-  
`} />
-
-### Naming a source
-
-The HTML spec requires that blockquote attribution be placed outside the `
`. When providing attribution, wrap your `
` in a `
` and use a `
` or a block level element (e.g., `
`) with the `.blockquote-footer` class. Be sure to wrap the name of the source work in `` as well. It uses [Regular text](#regular-texts) body small.
-
-
-    

-      
A well-known quote, contained in a blockquote element.

-    

-    

-      Someone famous in Source Title
-    

-  
`} />
-
-### Alignment
-
-Use text utilities as needed to change the alignment of your blockquote.
-
-
-    

-      
A well-known quote, contained in a blockquote element.

-    

-    

-      Someone famous in Source Title
-    

-  `} />
-
-
-    

-      
A well-known quote, contained in a blockquote element.

-    

-    

-      Someone famous in Source Title
-    

-  `} />
-
-## Lists
-
-
-  Please refer to the [Bullet list component]([[docsref:/components/bullet-list#utilities]]) for `.list-unstyled` and `.list-inline` documentation.
-
-
-### Description list alignment
-
-Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic mixins). For longer terms, you can optionally add a `.text-truncate` class to truncate the text with an ellipsis.
-
-
-    
Description lists

-    
A description list is perfect for defining terms.

-
-    
Term

-    

-      
Definition for the term.

-      
And some more placeholder definition text.

-    

-
-    
Another term

-    
This definition is short, so no extra paragraphs or anything.

-
-    
Truncated term is truncated

-    
This can be useful when space is tight. Adds an ellipsis at the end.

-
-    
Nesting

-    

-      

-        
Nested definition list

-        
I heard you like definition lists. Let me put a definition list inside your definition list.

-      

-    

-  `} />
diff --git a/site/src/content/docs/getting-started/migration-from-boosted.mdx b/site/src/content/docs/getting-started/migration-from-boosted.mdx
index 9e284d0086..be82d0f1e3 100644
--- a/site/src/content/docs/getting-started/migration-from-boosted.mdx
+++ b/site/src/content/docs/getting-started/migration-from-boosted.mdx
@@ -36,6 +36,7 @@ Let’s start with the most obvious change you’ll notice: the name. **Boosted
   - `boosted.esm.min.js` → `ouds-web.esm.min.js`
   - `boosted.js` → `ouds-web.js`
   - `boosted.min.js` → `ouds-web.min.js`
+- The SCSS file `_type.scss` has been renamed to `_typography.scss` for more consistency.
 
 From now on, OUDS Web won’t embed Bootstrap elements that are not part of Orange Unified Design System. However, you can still use our Bootstrap compatibility mode by using `ouds-web-bootstrap.css` and `ouds-web-bootstrap.min.css`.
 
diff --git a/site/src/content/docs/getting-started/migration.mdx b/site/src/content/docs/getting-started/migration.mdx
index 708af6a4f9..82b5268591 100644
--- a/site/src/content/docs/getting-started/migration.mdx
+++ b/site/src/content/docs/getting-started/migration.mdx
@@ -51,27 +51,31 @@ toc: true
 
 - New Expand link has been implemented. Read more in our [links page]([[docsref:/components/links#expand-link]]).
 
-### Dual mode
+#### Typography
 
-1. Update `@ouds/web-common` and `@ouds/web-[theme]` to v1.5.0.
-2. Remove `@import "boosted/scss/dropdown";` from the Boosted custom import stack.
+- New Heading has been implemented. Read more in our [typography/heading paragraph]([[docsref:/components/typography#heading]]).
 
-#### Items
+- New Display has been implemented. Read more in our [typography/display paragraph]([[docsref:/components/typography#display]]).
 
-- Warning Items components have been updated to 1.2.0. Please check that your icons and images in the leading/trailing containers keep behaving as normal. Read more in the [list item design changelog](https://r.orange.fr/r/S-ouds-doc-list-item_changelog).
+- New Body has been implemented. Read more in our [typography/body paragraph]([[docsref:/components/typography#body]]).
 
-#### Links
+- New Label has been implemented. Read more in our [typography/label paragraph]([[docsref:/components/typography#label]]).
 
-- New Expand link has been implemented. Read more in our [links page]([[docsref:/components/links#expand-link]]).
+- New Code has been implemented. Read more in our [typography/code paragraph]([[docsref:/components/typography#code]]).
 
 ### Tools
 
 - Info OUDS Web's AI agent skills now have a [dedicated repository](https://github.com/Orange-OpenSource/ouds-web-skills). To install or update them, run `npx skills add Orange-OpenSource/ouds-web-skills`.
 
+### Sass
+
+- Warning `_type.scss` has been renamed to `_typography.scss` for more consistency. You will need to change this name if you create your own custom import.
+
 ### Dual mode
 
-1. Update `@ouds/web-common` and `@ouds/web-[theme]` to v1.5.0.
+1. Update `@ouds/web-common` and `@ouds/web-[theme]` to v1.6.0.
 2. Remove `@import "boosted/scss/dropdown";` from the Boosted custom import stack.
+3. Change `@import "@ouds/web-common/scss/type";` to `@import "@ouds/web-common/scss/typography";` in the OUDS Web custom import stack.
 
 ## v1.5.0 [[version-changelog-link]]
 
diff --git a/site/src/content/docs/getting-started/sass.mdx b/site/src/content/docs/getting-started/sass.mdx
index 3169f64ad7..22c0f98a35 100644
--- a/site/src/content/docs/getting-started/sass.mdx
+++ b/site/src/content/docs/getting-started/sass.mdx
@@ -88,7 +88,7 @@ In your `custom.scss`, you’ll import OUDS Web’s source Sass files. You have
 // 7. Include any other optional stylesheet partials as desired; list below is not inclusive of all available stylesheets
 @import "../node_modules/@ouds/web-common/scss/utilities";
 @import "../node_modules/@ouds/web-common/scss/reboot";
-@import "../node_modules/@ouds/web-common/scss/type";
+@import "../node_modules/@ouds/web-common/scss/typography";
 @import "../node_modules/@ouds/web-common/scss/images";
 @import "../node_modules/@ouds/web-common/scss/containers";
 @import "../node_modules/@ouds/web-common/scss/grid";
@@ -171,7 +171,7 @@ $body-color: #111;
 
 // Optional OUDS Web components here
 @import "../node_modules/@ouds/web-common/scss/reboot";
-@import "../node_modules/@ouds/web-common/scss/type";
+@import "../node_modules/@ouds/web-common/scss/typography";
 // etc
 ```
 
@@ -237,7 +237,7 @@ $theme-colors: map-remove($theme-colors, "info", "light", "dark");
 
 // Optional
 @import "../node_modules/@ouds/web-common/scss/reboot";
-@import "../node_modules/@ouds/web-common/scss/type";
+@import "../node_modules/@ouds/web-common/scss/typography";
 // etc
 ```
 
diff --git a/site/src/content/docs/utilities/icons-sizing.mdx b/site/src/content/docs/utilities/icons-sizing.mdx
index 5660872a32..2fe5849043 100644
--- a/site/src/content/docs/utilities/icons-sizing.mdx
+++ b/site/src/content/docs/utilities/icons-sizing.mdx
@@ -70,7 +70,7 @@ Every icon size utility class presented in here has the common following code:
 
 ## Headings
 
-Here are the rules to follow for headings. These icons’ sizes are responsive.
+Here are the rules to follow for [headings]([[docsref:/components/typography#heading]]). These icons’ sizes are responsive.
 
 

   See the sizes associated to classes
@@ -254,13 +254,13 @@ Here are the rules to follow for headings. These icons’ sizes are responsive.
     
H6 with small icon

   `} />
 
-## Display headings
+## Display texts
 
-You should not use any icon with our `.display-*` font sizes, because we prefer to keep the place for the text.
+You should not use any icon with our [display texts]([[docsref:/components/typography#display]]), because we prefer to keep the place for the text.
 
-## Regular texts
+## Body texts
 
-Here are the rules to follow for regular texts. These icons’ sizes are responsive.
+Here are the rules to follow for [body texts]([[docsref:/components/typography#body]]). These icons’ sizes are responsive.
 
 

   See the sizes associated to classes
diff --git a/site/src/content/docs/utilities/text.mdx b/site/src/content/docs/utilities/text.mdx
index 457d8601f6..bdc39f81c1 100644
--- a/site/src/content/docs/utilities/text.mdx
+++ b/site/src/content/docs/utilities/text.mdx
@@ -111,6 +111,8 @@ Note how `.text-capitalize` only changes the first letter of each word, leaving
 
 ## Font size
 
+{ /* TODO ajouter marker sur fs-hl */ }
+
 Quickly change the `font-size` of text. Sizing for these utilities matches our predefined typography placeholders. Don’t forget to add one of our [`font-weight`](#font-weight) utility when needed.
 
 These classes change the `font-size` but also the `line-height`, the `letter-spacing` and the `max-width`. If you want to get rid of the `max-width`, please make sure to use our `.mw-none` [width utility]([[docsref:/utilities/sizing]]).
@@ -282,7 +284,7 @@ Quickly change the `font-weight` of text with these utilities. `font-weight` uti
 
 
 
-  The medium font-weight can only be used with `label` and `body` [font references]([[docsref:/foundation/typography/#regular-texts]]).
+  The medium font-weight can only be used with [body text]([[docsref:/components/typography#body]]) and [label text]([[docsref:/components/typography#label]]).
 
 
 Bold text.


From 2dab1f8f3fb39cc378c2fbee7c93016e93401488 Mon Sep 17 00:00:00 2001
From: Hannah Issermann 
Date: Wed, 7 Oct 2026 17:33:45 +0200
Subject: [PATCH 25/52] Change remaining links and add todos when not clear yet

---
 site/src/content/docs/foundation/reboot.mdx                   | 2 +-
 site/src/content/docs/foundation/tokens.mdx                   | 2 +-
 .../content/docs/getting-started/migration-from-boosted.mdx   | 4 ++--
 site/src/content/docs/getting-started/migration.mdx           | 2 +-
 site/src/content/docs/utilities.mdx                           | 2 +-
 site/src/content/docs/utilities/sizing.mdx                    | 2 +-
 6 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/site/src/content/docs/foundation/reboot.mdx b/site/src/content/docs/foundation/reboot.mdx
index 6bb2216a53..00b01dfff8 100644
--- a/site/src/content/docs/foundation/reboot.mdx
+++ b/site/src/content/docs/foundation/reboot.mdx
@@ -450,7 +450,7 @@ The `
` element is updated to reset the browser default `font-style` fro
 
 ## Blockquote
 
-For quoting blocks of content from another source within your document, wrap `
` around any HTML as the quote. The default `margin` on blockquotes is `1em 40px`, so we reset that to 0 0 {getTokenValue('$ouds-space-fixed-medium')} for something more consistent with other elements. `
` uses [Regular text](#regular-texts) body large. {/* TODO change the link */}
+For quoting blocks of content from another source within your document, wrap `
` around any HTML as the quote. The default `margin` on blockquotes is `1em 40px`, so we reset that to 0 0 {getTokenValue('$ouds-space-fixed-medium')} for something more consistent with other elements. `
` uses [body large text]([[docsref:/components/typography#body]]).
 
 
     
A well-known quote, contained in a blockquote element.

diff --git a/site/src/content/docs/foundation/tokens.mdx b/site/src/content/docs/foundation/tokens.mdx
index 8a2dd01767..31a29c45ab 100644
--- a/site/src/content/docs/foundation/tokens.mdx
+++ b/site/src/content/docs/foundation/tokens.mdx
@@ -56,7 +56,7 @@ We build our Sass variables following the architecture of the design tokens:
   - Ex: `ouds/color/content/on/brand-primary` becomes `$ouds-color-content-on-brand-primary`, `ouds/elevation/blur/emphasized` becomes `$ouds-elevation-blur-emphasized`.
 - [Composite tokens](#composite-tokens): `$ouds-elevation-{token-name}`
   - Ex: `ouds/elevation/**/emphasized` are aggregated via `$ouds-elevation-emphasized`.
-  - Our font tokens are aggregated in a mixin [`get-font-size()`]([[docsref:/foundation/typography/#text-style-for-custom-components]]) that takes the font reference name as a parameter. So `ouds/font/**/body-large` are aggregated via `get-font-size("body-large")`.
+  - Our font tokens are aggregated in a mixin [`get-font-size()`]([[docsref:/foundation/typography/#text-style-for-custom-components]]) that takes the font reference name as a parameter. So `ouds/font/**/body-large` are aggregated via `get-font-size("body-large")`. { /* TODO adapt the text and change the link  */ }
 - [Component tokens](#component-tokens): `$ouds-{component-name}-{token-name}`
   - Ex: `ouds/button/color/bg/minimal/hover` becomes `$ouds-button-color-bg-minimal-hover`.
 
diff --git a/site/src/content/docs/getting-started/migration-from-boosted.mdx b/site/src/content/docs/getting-started/migration-from-boosted.mdx
index be82d0f1e3..670301b76a 100644
--- a/site/src/content/docs/getting-started/migration-from-boosted.mdx
+++ b/site/src/content/docs/getting-started/migration-from-boosted.mdx
@@ -67,7 +67,7 @@ Read more about the [font stack]([[docsref:/foundation/reboot#font-stack]]) for
 
 ### Typography
 
-- New Body fonts’ sizes are now responsive and can change depending on the screen size. See [Typography]([[docsref:/foundation/typography]]) for more details.
+- New Body fonts’ sizes are now responsive and can change depending on the screen size. See [Typography]([[docsref:/components/typography]]) for more details.
 
 - New A `max-width` has been added on all font references for readability reasons. If you want to get rid of the `max-width`, please use our `.mw-none` width utility.
 
@@ -2708,7 +2708,7 @@ See [our new Text Area page]([[docsref:/components/text-area]]) for more informa
 
 ## Sass
 
-- New The mixin `get-font-size({font-size-ref})` has been added, where `font-size-ref` is one of: `"code-medium"`, `"label-small"`, `"label-medium"`, `"label-large"`, `"label-xlarge"`, `"body-small"`, `"body-medium"`, `"body-large"`, `"heading-small"`, `"heading-medium"`, `"heading-large"`, `"heading-xlarge"`, `"display-small"`, `"display-medium"`, `"display-large"`. If you have/need any `font-size` in one of your SCSS classes, please consider using this mixin instead. See [Typography Sass mixins]([[docsref:/foundation/typography#sass-mixins]]) for more details.
+- New The mixin `get-font-size({font-size-ref})` has been added, where `font-size-ref` is one of: `"code-medium"`, `"label-small"`, `"label-medium"`, `"label-large"`, `"label-xlarge"`, `"body-small"`, `"body-medium"`, `"body-large"`, `"heading-small"`, `"heading-medium"`, `"heading-large"`, `"heading-xlarge"`, `"display-small"`, `"display-medium"`, `"display-large"`. If you have/need any `font-size` in one of your SCSS classes, please consider using this mixin instead. See [Typography Sass mixins]([[docsref:/foundation/typography#sass-mixins]]) for more details. {/* TODO text to adapt and link to change */ }
 
 - Warning `color-mode({mode}, {root}, {inverted-mode})` mixin signature has changed. We now provide an `$inverted-mode` parameter that is set by default to `light` or `dark` depending on the `$mode`. It allows you to precise another mode to be the inverse of a certain mode.
 
diff --git a/site/src/content/docs/getting-started/migration.mdx b/site/src/content/docs/getting-started/migration.mdx
index 82b5268591..9185b2526f 100644
--- a/site/src/content/docs/getting-started/migration.mdx
+++ b/site/src/content/docs/getting-started/migration.mdx
@@ -2565,7 +2565,7 @@ toc: true
 
 ### Sass mixins
 
-- New The mixin `get-font-size({font-size-ref})` has been added, where `font-size-ref` is one of: `"code-medium"`, `"label-small"`, `"label-medium"`, `"label-large"`, `"label-xlarge"`, `"body-small"`, `"body-medium"`, `"body-large"`, `"heading-small"`, `"heading-medium"`, `"heading-large"`, `"heading-xlarge"`, `"display-small"`, `"display-medium"`, `"display-large"`. If you have/need any `font-size` in one of your SCSS classes, please consider using this mixin instead. See [Typography Sass mixins]([[docsref:/foundation/typography#sass-mixins]]) for more details.
+- New The mixin `get-font-size({font-size-ref})` has been added, where `font-size-ref` is one of: `"code-medium"`, `"label-small"`, `"label-medium"`, `"label-large"`, `"label-xlarge"`, `"body-small"`, `"body-medium"`, `"body-large"`, `"heading-small"`, `"heading-medium"`, `"heading-large"`, `"heading-xlarge"`, `"display-small"`, `"display-medium"`, `"display-large"`. If you have/need any `font-size` in one of your SCSS classes, please consider using this mixin instead. See [Typography Sass mixins]([[docsref:/foundation/typography#sass-mixins]]) for more details. {/* TODO text to adapt and link to change */ }
 
 - New `color-mode({mode}, {root}, {inverted-mode})` mixin.
 
diff --git a/site/src/content/docs/utilities.mdx b/site/src/content/docs/utilities.mdx
index 636c91eea1..5875dee889 100644
--- a/site/src/content/docs/utilities.mdx
+++ b/site/src/content/docs/utilities.mdx
@@ -64,6 +64,6 @@ Variables names can be easily inferred from token names, [this is explained in t
   | An opacity using a standard token `ouds/opacity/*`. Be careful where the token is applied. | `ouds/opacity/medium` | `none` | `$ouds-opacity-medium` |
   | A shadow using a composite token like `ouds/elevation/*`. | `ouds/elevation/**/emphasized` | `none` | `$ouds-elevation-emphasized` |
   | A spacing using a standard token `ouds/space/{scaled\|fixed}/*` or `ouds/space/{column-gap\|row-gap}/*`. | `ouds/space/scaled/2xlarge`
`ouds/space/fixed/medium`
`ouds/space/row-gap/none` | `--bs-space-scaled-2xlarge`
`none`
`none` | `none`
`$ouds-space-fixed-medium`
`$ouds-space-row-gap-none` |
-  | A text using a named typography reference or tokens like `ouds/font/*` or `font-ref/size/weight`. | `ouds/font/**/body-large`
`Body/Large/Strong` | `get-font-size("body-large")`
`none`
As you can see, this one is a bit special and calls a mixin [`get-font-size()`]([[docsref:/foundation/typography/#text-style-for-custom-components]]). | `none`
`$ouds-font-weight-web-body-strong` |
+  | A text using a named typography reference or tokens like `ouds/font/*` or `font-ref/size/weight`. | `ouds/font/**/body-large`
`Body/Large/Strong` | `get-font-size("body-large")`
`none`
As you can see, this one is a bit special and calls a mixin [`get-font-size()`]([[docsref:/foundation/typography/#text-style-for-custom-components]]). { /* TODO adapt the texts and change the link  */ } | `none`
`$ouds-font-weight-web-body-strong` |
   | A spacing using a grid token `ouds/grid/*` | `ouds/grid/column-gap`
`ouds/grid/margin` | `--bs-grid-gap`
`--bs-grid-margin` | `none`
`none` |
 
diff --git a/site/src/content/docs/utilities/sizing.mdx b/site/src/content/docs/utilities/sizing.mdx
index 8501c85456..32a07179f3 100644
--- a/site/src/content/docs/utilities/sizing.mdx
+++ b/site/src/content/docs/utilities/sizing.mdx
@@ -34,7 +34,7 @@ You can also use `max-width: 100%;` and `max-height: 100%;` utilities as needed.
     
Max-height 100%

   `} />
 
-You can also use in some cases (mainly [font references]([[docsref:/foundation/typography]])) `max-width: none` utility as needed.
+You can also use in some cases (mainly [typography components]([[docsref:/components/typography]])) `max-width: none` utility as needed.
 
 
     
Max-width none


From a294fb827337e665543696237ffb378a3057610e Mon Sep 17 00:00:00 2001
From: Hannah Issermann 
Date: Wed, 7 Oct 2026 17:38:44 +0200
Subject: [PATCH 26/52] css snapshot tests

---
 packages/orange-compact/scss/ouds-web.scss | 2 +-
 packages/orange/scss/ouds-web.scss         | 2 +-
 packages/sosh/scss/ouds-web.scss           | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/orange-compact/scss/ouds-web.scss b/packages/orange-compact/scss/ouds-web.scss
index 52b776ab4e..9828082612 100644
--- a/packages/orange-compact/scss/ouds-web.scss
+++ b/packages/orange-compact/scss/ouds-web.scss
@@ -15,7 +15,7 @@
 // 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/images";
 @import "@ouds/web-common/scss/containers";
 @import "@ouds/web-common/scss/grid";
diff --git a/packages/orange/scss/ouds-web.scss b/packages/orange/scss/ouds-web.scss
index a04255da7e..6ebd60f25b 100644
--- a/packages/orange/scss/ouds-web.scss
+++ b/packages/orange/scss/ouds-web.scss
@@ -15,7 +15,7 @@
 // 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/images";
 @import "@ouds/web-common/scss/containers";
 @import "@ouds/web-common/scss/grid";
diff --git a/packages/sosh/scss/ouds-web.scss b/packages/sosh/scss/ouds-web.scss
index 0a22761efd..f3fec81f59 100644
--- a/packages/sosh/scss/ouds-web.scss
+++ b/packages/sosh/scss/ouds-web.scss
@@ -15,7 +15,7 @@
 // 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/images";
 @import "@ouds/web-common/scss/containers";
 @import "@ouds/web-common/scss/grid";

From 8c6155cf104763454f8c7ad6362404c33a2ea215 Mon Sep 17 00:00:00 2001
From: Hannah Issermann 
Date: Wed, 7 Oct 2026 17:44:57 +0200
Subject: [PATCH 27/52] .

---
 site/data/sidebar-foundation.yml | 1 -
 1 file changed, 1 deletion(-)

diff --git a/site/data/sidebar-foundation.yml b/site/data/sidebar-foundation.yml
index 29566259aa..94775aeae6 100644
--- a/site/data/sidebar-foundation.yml
+++ b/site/data/sidebar-foundation.yml
@@ -10,7 +10,6 @@
     - title: Themes
     - title: CSS variables
     - title: Reboot
-    - title: Typography
     - title: Icons
     - title: Images
       coming_soon: true

From f88978445a9c96ed198207e77f6e7c74f1328a4f Mon Sep 17 00:00:00 2001
From: Hannah Issermann 
Date: Wed, 7 Oct 2026 17:54:07 +0200
Subject: [PATCH 28/52] .

---
 site/src/content/docs/components/bullet-list.mdx    | 2 +-
 site/src/content/docs/getting-started/migration.mdx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/src/content/docs/components/bullet-list.mdx b/site/src/content/docs/components/bullet-list.mdx
index cc78812281..ebe903abdc 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/getting-started/migration.mdx b/site/src/content/docs/getting-started/migration.mdx
index 9185b2526f..446ee84576 100644
--- a/site/src/content/docs/getting-started/migration.mdx
+++ b/site/src/content/docs/getting-started/migration.mdx
@@ -204,7 +204,7 @@ toc: true
 
 #### Text
 
-- New Labels have been added to font size text utilities : `.fs-lxl`, `.fs-ll`, `.fs-lm`, `.fs-ls` are now available. Read more in our [typography page]([[docsref:foundation/typography#regular-texts]]).
+- New Labels have been added to font size text utilities : `.fs-lxl`, `.fs-ll`, `.fs-lm`, `.fs-ls` are now available. Read more in our [typography page]([[docsref:utilities/text#font-size]]).
 
 ### CSS and Sass variables
 

From 5da74957f025540fcc35bf3dc974fa1272fe78d8 Mon Sep 17 00:00:00 2001
From: Hannah Issermann 
Date: Wed, 7 Oct 2026 19:53:55 +0200
Subject: [PATCH 29/52] .

---
 site/src/content/docs/foundation/tokens.mdx | 4 ++--
 site/src/content/docs/utilities.mdx         | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/site/src/content/docs/foundation/tokens.mdx b/site/src/content/docs/foundation/tokens.mdx
index 31a29c45ab..34063c76cc 100644
--- a/site/src/content/docs/foundation/tokens.mdx
+++ b/site/src/content/docs/foundation/tokens.mdx
@@ -56,7 +56,7 @@ We build our Sass variables following the architecture of the design tokens:
   - Ex: `ouds/color/content/on/brand-primary` becomes `$ouds-color-content-on-brand-primary`, `ouds/elevation/blur/emphasized` becomes `$ouds-elevation-blur-emphasized`.
 - [Composite tokens](#composite-tokens): `$ouds-elevation-{token-name}`
   - Ex: `ouds/elevation/**/emphasized` are aggregated via `$ouds-elevation-emphasized`.
-  - Our font tokens are aggregated in a mixin [`get-font-size()`]([[docsref:/foundation/typography/#text-style-for-custom-components]]) that takes the font reference name as a parameter. So `ouds/font/**/body-large` are aggregated via `get-font-size("body-large")`. { /* TODO adapt the text and change the link  */ }
+  - Our font tokens are aggregated in a mixin [`get-font-size()`]([[docsref:/utilities/text]]) { /* TODO adapt the texts and change the link  */ } that takes the font reference name as a parameter. So `ouds/font/**/body-large` are aggregated via `get-font-size("body-large")`.
 - [Component tokens](#component-tokens): `$ouds-{component-name}-{token-name}`
   - Ex: `ouds/button/color/bg/minimal/hover` becomes `$ouds-button-color-bg-minimal-hover`.
 
@@ -70,6 +70,6 @@ We build our CSS variables following the architecture of the design tokens:
   - Our scaled spacing are only declared as CSS variables `--bs-space-scaled-{size}`. It’s equivalent to `ouds/space/scaled/{size}` in Figma. Prefer using our [utilities]([[docsref:/utilities#using-our-utilities]]) when possible.
   - Our colors and elevation colors are declared as CSS variables `--bs-color-{token-name}`. It’s equivalent to `ouds/color/{token-name}` in Figma. Prefer using our [utilities]([[docsref:/utilities#using-our-utilities]]) when possible.
   - Our icon sizes are declared as CSS variables `--bs-icon-{size}`. It’s equivalent to `ouds/size/icon/{size}` in Figma. Prefer using our [utilities]([[docsref:/utilities#using-our-utilities]]) when possible.
-  - Our font tokens are aggregated in a mixin [`get-font-size()`]([[docsref:/foundation/typography/#text-style-for-custom-components]]) that takes the font reference name as a parameter. So `ouds/font/**/body-large` are aggregated via `get-font-size("body-large")`. Don’t use our CSS variables for font alone.
+  - Our font tokens are aggregated in a mixin [`get-font-size()`]([[docsref:/utilities/text]]). { /* TODO adapt the texts and change the link  */ } that takes the font reference name as a parameter. So `ouds/font/**/body-large` are aggregated via `get-font-size("body-large")`. Don’t use our CSS variables for font alone.
 - [Composite tokens](#composite-tokens): We don’t have any composite token transformed into a CSS variable, but they are available as [Sass variables](#sass-variables).
 - [Component tokens](#component-tokens): We don’t have any component token transformed into a CSS variable. The only CSS variables that we have for components are the ones that we need to build the component internally.
diff --git a/site/src/content/docs/utilities.mdx b/site/src/content/docs/utilities.mdx
index 5875dee889..2d65dbf50f 100644
--- a/site/src/content/docs/utilities.mdx
+++ b/site/src/content/docs/utilities.mdx
@@ -64,6 +64,6 @@ Variables names can be easily inferred from token names, [this is explained in t
   | An opacity using a standard token `ouds/opacity/*`. Be careful where the token is applied. | `ouds/opacity/medium` | `none` | `$ouds-opacity-medium` |
   | A shadow using a composite token like `ouds/elevation/*`. | `ouds/elevation/**/emphasized` | `none` | `$ouds-elevation-emphasized` |
   | A spacing using a standard token `ouds/space/{scaled\|fixed}/*` or `ouds/space/{column-gap\|row-gap}/*`. | `ouds/space/scaled/2xlarge`
`ouds/space/fixed/medium`
`ouds/space/row-gap/none` | `--bs-space-scaled-2xlarge`
`none`
`none` | `none`
`$ouds-space-fixed-medium`
`$ouds-space-row-gap-none` |
-  | A text using a named typography reference or tokens like `ouds/font/*` or `font-ref/size/weight`. | `ouds/font/**/body-large`
`Body/Large/Strong` | `get-font-size("body-large")`
`none`
As you can see, this one is a bit special and calls a mixin [`get-font-size()`]([[docsref:/foundation/typography/#text-style-for-custom-components]]). { /* TODO adapt the texts and change the link  */ } | `none`
`$ouds-font-weight-web-body-strong` |
+  | A text using a named typography reference or tokens like `ouds/font/*` or `font-ref/size/weight`. | `ouds/font/**/body-large`
`Body/Large/Strong` | `get-font-size("body-large")`
`none`
As you can see, this one is a bit special and calls a mixin [`get-font-size()`]([[docsref:/utilities/text]]). { /* TODO adapt the texts and change the link  */ } | `none`
`$ouds-font-weight-web-body-strong` |
   | A spacing using a grid token `ouds/grid/*` | `ouds/grid/column-gap`
`ouds/grid/margin` | `--bs-grid-gap`
`--bs-grid-margin` | `none`
`none` |
 

From e08f97f72de740a7a7571d7cb9f73ef3ef1c1856 Mon Sep 17 00:00:00 2001
From: Hannah Issermann 
Date: Wed, 7 Oct 2026 20:02:47 +0200
Subject: [PATCH 30/52] Broken links

---
 packages/migrate/src/migrate.spec.mjs                           | 2 +-
 packages/migrate/src/replacements/common.mjs                    | 2 +-
 site/src/assets/examples/cheatsheet/index.astro                 | 2 +-
 .../src/content/docs/getting-started/migration-from-boosted.mdx | 2 +-
 site/src/content/docs/getting-started/migration.mdx             | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/migrate/src/migrate.spec.mjs b/packages/migrate/src/migrate.spec.mjs
index 74ce0d513a..2fd44d3507 100644
--- a/packages/migrate/src/migrate.spec.mjs
+++ b/packages/migrate/src/migrate.spec.mjs
@@ -77,7 +77,7 @@ describe('Migrate', () => {
     })
 
     expect(getReplacementsWarnings()).toEqual([
-      'initialism class is deprecated in tests/source-boosted.html. See: https://web.unified-design-system.orange.com/docs/foundation/typography',
+      'initialism class is deprecated in tests/source-boosted.html. See: https://web.unified-design-system.orange.com/docs/foundation/reboot',
       'container class is deprecated in tests/source-boosted.html. See: https://web.unified-design-system.orange.com/docs/layout/containers',
       'container-md class is deprecated in tests/source-boosted.html. See: https://web.unified-design-system.orange.com/docs/layout/containers',
       'bg-supporting-purple class is deprecated in tests/source-boosted.html. See: https://web.unified-design-system.orange.com/docs/utilities/background',
diff --git a/packages/migrate/src/replacements/common.mjs b/packages/migrate/src/replacements/common.mjs
index fa20ee917d..a70928370b 100644
--- a/packages/migrate/src/replacements/common.mjs
+++ b/packages/migrate/src/replacements/common.mjs
@@ -20,7 +20,7 @@ export const commonReplacements = [
   ['display-4', 'h1'],
   ['display-5', 'h2'],
   ['display-6', 'h3'],
-  [...warnForClass('initialism', { link: 'https://web.unified-design-system.orange.com/docs/foundation/typography' })],
+  [...warnForClass('initialism', { link: 'https://web.unified-design-system.orange.com/docs/foundation/reboot' })],
 
   // Layout
   [...warnForClass('container', { link: 'https://web.unified-design-system.orange.com/docs/layout/containers' })],
diff --git a/site/src/assets/examples/cheatsheet/index.astro b/site/src/assets/examples/cheatsheet/index.astro
index df9fafbca2..cc2d541b72 100644
--- a/site/src/assets/examples/cheatsheet/index.astro
+++ b/site/src/assets/examples/cheatsheet/index.astro
@@ -77,7 +77,7 @@ export const body_class = 'bg-body-tertiary'
     

       

         
Typography

-        Documentation
+        Documentation
       

 
       

diff --git a/site/src/content/docs/getting-started/migration-from-boosted.mdx b/site/src/content/docs/getting-started/migration-from-boosted.mdx
index 670301b76a..4ac451477f 100644
--- a/site/src/content/docs/getting-started/migration-from-boosted.mdx
+++ b/site/src/content/docs/getting-started/migration-from-boosted.mdx
@@ -2708,7 +2708,7 @@ See [our new Text Area page]([[docsref:/components/text-area]]) for more informa
 
 ## Sass
 
-- New The mixin `get-font-size({font-size-ref})` has been added, where `font-size-ref` is one of: `"code-medium"`, `"label-small"`, `"label-medium"`, `"label-large"`, `"label-xlarge"`, `"body-small"`, `"body-medium"`, `"body-large"`, `"heading-small"`, `"heading-medium"`, `"heading-large"`, `"heading-xlarge"`, `"display-small"`, `"display-medium"`, `"display-large"`. If you have/need any `font-size` in one of your SCSS classes, please consider using this mixin instead. See [Typography Sass mixins]([[docsref:/foundation/typography#sass-mixins]]) for more details. {/* TODO text to adapt and link to change */ }
+- New The mixin `get-font-size({font-size-ref})` has been added, where `font-size-ref` is one of: `"code-medium"`, `"label-small"`, `"label-medium"`, `"label-large"`, `"label-xlarge"`, `"body-small"`, `"body-medium"`, `"body-large"`, `"heading-small"`, `"heading-medium"`, `"heading-large"`, `"heading-xlarge"`, `"display-small"`, `"display-medium"`, `"display-large"`. If you have/need any `font-size` in one of your SCSS classes, please consider using this mixin instead. See [Typography Sass mixins]([[docsref:/utilities/text]]) for more details. {/* TODO text to adapt and link to change */ }
 
 - Warning `color-mode({mode}, {root}, {inverted-mode})` mixin signature has changed. We now provide an `$inverted-mode` parameter that is set by default to `light` or `dark` depending on the `$mode`. It allows you to precise another mode to be the inverse of a certain mode.
 
diff --git a/site/src/content/docs/getting-started/migration.mdx b/site/src/content/docs/getting-started/migration.mdx
index 446ee84576..095f41a9c3 100644
--- a/site/src/content/docs/getting-started/migration.mdx
+++ b/site/src/content/docs/getting-started/migration.mdx
@@ -2565,7 +2565,7 @@ toc: true
 
 ### Sass mixins
 
-- New The mixin `get-font-size({font-size-ref})` has been added, where `font-size-ref` is one of: `"code-medium"`, `"label-small"`, `"label-medium"`, `"label-large"`, `"label-xlarge"`, `"body-small"`, `"body-medium"`, `"body-large"`, `"heading-small"`, `"heading-medium"`, `"heading-large"`, `"heading-xlarge"`, `"display-small"`, `"display-medium"`, `"display-large"`. If you have/need any `font-size` in one of your SCSS classes, please consider using this mixin instead. See [Typography Sass mixins]([[docsref:/foundation/typography#sass-mixins]]) for more details. {/* TODO text to adapt and link to change */ }
+- New The mixin `get-font-size({font-size-ref})` has been added, where `font-size-ref` is one of: `"code-medium"`, `"label-small"`, `"label-medium"`, `"label-large"`, `"label-xlarge"`, `"body-small"`, `"body-medium"`, `"body-large"`, `"heading-small"`, `"heading-medium"`, `"heading-large"`, `"heading-xlarge"`, `"display-small"`, `"display-medium"`, `"display-large"`. If you have/need any `font-size` in one of your SCSS classes, please consider using this mixin instead. See [Typography Sass mixins]([[docsref:/utilities/text]]) for more details. {/* TODO text to adapt and link to change */ }
 
 - New `color-mode({mode}, {root}, {inverted-mode})` mixin.
 

From dd2c7d49b33c2895ba09d1237cad218192e00e2f Mon Sep 17 00:00:00 2001
From: Hannah Issermann 
Date: Thu, 8 Oct 2026 10:05:06 +0200
Subject: [PATCH 31/52] css tests

---
 .../__snapshots__/ouds-web-bootstrap.css      | 55 +++++++++----------
 .../snapshot-tests/__snapshots__/ouds-web.css | 55 +++++++++----------
 2 files changed, 52 insertions(+), 58 deletions(-)

diff --git a/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css b/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css
index 072b7c4c3e..7d71c59bcd 100644
--- a/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css
+++ b/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css
@@ -1237,6 +1237,30 @@ dd {
 blockquote {
   margin: 0 0 16px;
 }
+blockquote > p {
+  max-width: var(--bs-font-max-width-body-large);
+  font-size: var(--bs-font-size-body-large);
+  line-height: var(--bs-font-line-height-body-large);
+  /* rtl:remove */
+  letter-spacing: var(--bs-font-letter-spacing-body-large);
+}
+blockquote > :last-child {
+  margin-bottom: 0;
+}
+
+.blockquote-footer {
+  margin-top: -16px;
+  margin-bottom: 16px;
+  max-width: var(--bs-font-max-width-body-small);
+  font-size: var(--bs-font-size-body-small);
+  line-height: var(--bs-font-line-height-body-small);
+  /* rtl:remove */
+  letter-spacing: var(--bs-font-letter-spacing-body-small);
+  color: var(--bs-color-content-muted);
+}
+.blockquote-footer::before {
+  content: "— ";
+}
 
 i,
 em,
@@ -1592,7 +1616,8 @@ dialog,
 }
 
 .h2.marker::after,
-h2.marker::after {
+h2.marker::after,
+.fs-hl.marker::after {
   display: block;
   width: 30px;
   height: 12px;
@@ -1713,34 +1738,6 @@ h2.marker::after {
   margin-right: 0.25rem;
 }
 
-.blockquote {
-  margin-bottom: 16px;
-}
-.blockquote > p {
-  max-width: var(--bs-font-max-width-body-large);
-  font-size: var(--bs-font-size-body-large);
-  line-height: var(--bs-font-line-height-body-large);
-  /* rtl:remove */
-  letter-spacing: var(--bs-font-letter-spacing-body-large);
-}
-.blockquote > :last-child {
-  margin-bottom: 0;
-}
-
-.blockquote-footer {
-  margin-top: -16px;
-  margin-bottom: 16px;
-  max-width: var(--bs-font-max-width-body-small);
-  font-size: var(--bs-font-size-body-small);
-  line-height: var(--bs-font-line-height-body-small);
-  /* rtl:remove */
-  letter-spacing: var(--bs-font-letter-spacing-body-small);
-  color: var(--bs-color-content-muted);
-}
-.blockquote-footer::before {
-  content: "— ";
-}
-
 .img-fluid {
   max-width: 100%;
   height: auto;
diff --git a/scss/tests/snapshot-tests/__snapshots__/ouds-web.css b/scss/tests/snapshot-tests/__snapshots__/ouds-web.css
index 6564e3981c..66738f124a 100644
--- a/scss/tests/snapshot-tests/__snapshots__/ouds-web.css
+++ b/scss/tests/snapshot-tests/__snapshots__/ouds-web.css
@@ -1072,6 +1072,30 @@ dd {
 blockquote {
   margin: 0 0 16px;
 }
+blockquote > p {
+  max-width: var(--bs-font-max-width-body-large);
+  font-size: var(--bs-font-size-body-large);
+  line-height: var(--bs-font-line-height-body-large);
+  /* rtl:remove */
+  letter-spacing: var(--bs-font-letter-spacing-body-large);
+}
+blockquote > :last-child {
+  margin-bottom: 0;
+}
+
+.blockquote-footer {
+  margin-top: -16px;
+  margin-bottom: 16px;
+  max-width: var(--bs-font-max-width-body-small);
+  font-size: var(--bs-font-size-body-small);
+  line-height: var(--bs-font-line-height-body-small);
+  /* rtl:remove */
+  letter-spacing: var(--bs-font-letter-spacing-body-small);
+  color: var(--bs-color-content-muted);
+}
+.blockquote-footer::before {
+  content: "— ";
+}
 
 i,
 em,
@@ -1427,7 +1451,8 @@ dialog,
 }
 
 .h2.marker::after,
-h2.marker::after {
+h2.marker::after,
+.fs-hl.marker::after {
   display: block;
   width: 30px;
   height: 12px;
@@ -1494,34 +1519,6 @@ h2.marker::after {
   margin-right: 0.25rem;
 }
 
-.blockquote {
-  margin-bottom: 16px;
-}
-.blockquote > p {
-  max-width: var(--bs-font-max-width-body-large);
-  font-size: var(--bs-font-size-body-large);
-  line-height: var(--bs-font-line-height-body-large);
-  /* rtl:remove */
-  letter-spacing: var(--bs-font-letter-spacing-body-large);
-}
-.blockquote > :last-child {
-  margin-bottom: 0;
-}
-
-.blockquote-footer {
-  margin-top: -16px;
-  margin-bottom: 16px;
-  max-width: var(--bs-font-max-width-body-small);
-  font-size: var(--bs-font-size-body-small);
-  line-height: var(--bs-font-line-height-body-small);
-  /* rtl:remove */
-  letter-spacing: var(--bs-font-letter-spacing-body-small);
-  color: var(--bs-color-content-muted);
-}
-.blockquote-footer::before {
-  content: "— ";
-}
-
 .img-fluid {
   max-width: 100%;
   height: auto;

From 094ed0df16f55a23b768d3a34b6f4f77f4e450a3 Mon Sep 17 00:00:00 2001
From: Hannah Issermann 
Date: Thu, 8 Oct 2026 12:21:49 +0200
Subject: [PATCH 32/52] .

---
 site/src/content/docs/components/typography.mdx | 10 ++++++++--
 site/src/content/docs/foundation/tokens.mdx     |  4 ++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/site/src/content/docs/components/typography.mdx b/site/src/content/docs/components/typography.mdx
index bd2958f4a3..618785cec4 100644
--- a/site/src/content/docs/components/typography.mdx
+++ b/site/src/content/docs/components/typography.mdx
@@ -536,5 +536,11 @@ Use the `` element to mark short code snippets within text. The `` e
 
 Use `
` for displaying multiple lines of code. The `
` element preserves whitespace and formatting, particularly indentation, while the `` element marks the content as code.
 
-<p>Sample text here...</p>
-<p>And another line of sample text here...</p>
`} />
+
+  if (document.getElementById('myId')) {
+    document.getElementById('myId').addEventListener('click', () => {
+      ...
+    })
+  }
+
`} />
+
diff --git a/site/src/content/docs/foundation/tokens.mdx b/site/src/content/docs/foundation/tokens.mdx
index 34063c76cc..266e8d22c9 100644
--- a/site/src/content/docs/foundation/tokens.mdx
+++ b/site/src/content/docs/foundation/tokens.mdx
@@ -56,7 +56,7 @@ We build our Sass variables following the architecture of the design tokens:
   - Ex: `ouds/color/content/on/brand-primary` becomes `$ouds-color-content-on-brand-primary`, `ouds/elevation/blur/emphasized` becomes `$ouds-elevation-blur-emphasized`.
 - [Composite tokens](#composite-tokens): `$ouds-elevation-{token-name}`
   - Ex: `ouds/elevation/**/emphasized` are aggregated via `$ouds-elevation-emphasized`.
-  - Our font tokens are aggregated in a mixin [`get-font-size()`]([[docsref:/utilities/text]]) { /* TODO adapt the texts and change the link  */ } that takes the font reference name as a parameter. So `ouds/font/**/body-large` are aggregated via `get-font-size("body-large")`.
+  - Our font tokens are aggregated in a mixin `get-font-size()` that takes the font reference name as a parameter. So `ouds/font/**/body-large` are aggregated via `get-font-size("body-large")`.
 - [Component tokens](#component-tokens): `$ouds-{component-name}-{token-name}`
   - Ex: `ouds/button/color/bg/minimal/hover` becomes `$ouds-button-color-bg-minimal-hover`.
 
@@ -70,6 +70,6 @@ We build our CSS variables following the architecture of the design tokens:
   - Our scaled spacing are only declared as CSS variables `--bs-space-scaled-{size}`. It’s equivalent to `ouds/space/scaled/{size}` in Figma. Prefer using our [utilities]([[docsref:/utilities#using-our-utilities]]) when possible.
   - Our colors and elevation colors are declared as CSS variables `--bs-color-{token-name}`. It’s equivalent to `ouds/color/{token-name}` in Figma. Prefer using our [utilities]([[docsref:/utilities#using-our-utilities]]) when possible.
   - Our icon sizes are declared as CSS variables `--bs-icon-{size}`. It’s equivalent to `ouds/size/icon/{size}` in Figma. Prefer using our [utilities]([[docsref:/utilities#using-our-utilities]]) when possible.
-  - Our font tokens are aggregated in a mixin [`get-font-size()`]([[docsref:/utilities/text]]). { /* TODO adapt the texts and change the link  */ } that takes the font reference name as a parameter. So `ouds/font/**/body-large` are aggregated via `get-font-size("body-large")`. Don’t use our CSS variables for font alone.
+  - Our font tokens are aggregated in a mixin `get-font-size()` that takes the font reference name as a parameter. So `ouds/font/**/body-large` are aggregated via `get-font-size("body-large")`. Don’t use our CSS variables for font alone.
 - [Composite tokens](#composite-tokens): We don’t have any composite token transformed into a CSS variable, but they are available as [Sass variables](#sass-variables).
 - [Component tokens](#component-tokens): We don’t have any component token transformed into a CSS variable. The only CSS variables that we have for components are the ones that we need to build the component internally.

From bb16f4dc2fa60fb6227434a2f3aeb1b7a16cac3a Mon Sep 17 00:00:00 2001
From: Hannah Issermann 
Date: Thu, 8 Oct 2026 12:33:42 +0200
Subject: [PATCH 33/52] link .blockquote-footer with 


---
 scss/_reboot.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 87c517e48c..fc949779d3 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -272,7 +272,7 @@ blockquote {
   }
 }
 
-.blockquote-footer {
+blockquote + .blockquote-footer {
   margin-top: -$ouds-space-fixed-medium;
   margin-bottom: $ouds-space-fixed-medium;
   @include get-font-size("body-small"); // OUDS mod: instead of `font-size: $blockquote-footer-font-size`

From fe8ea3bf70a1a71d28c62e23c45f01ae150895a5 Mon Sep 17 00:00:00 2001
From: Hannah Issermann 
Date: Thu, 8 Oct 2026 12:35:25 +0200
Subject: [PATCH 34/52] css tests

---
 .../tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css | 4 ++--
 scss/tests/snapshot-tests/__snapshots__/ouds-web.css          | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css b/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css
index 7d71c59bcd..4aca280f0a 100644
--- a/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css
+++ b/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css
@@ -1248,7 +1248,7 @@ blockquote > :last-child {
   margin-bottom: 0;
 }
 
-.blockquote-footer {
+blockquote + .blockquote-footer {
   margin-top: -16px;
   margin-bottom: 16px;
   max-width: var(--bs-font-max-width-body-small);
@@ -1258,7 +1258,7 @@ blockquote > :last-child {
   letter-spacing: var(--bs-font-letter-spacing-body-small);
   color: var(--bs-color-content-muted);
 }
-.blockquote-footer::before {
+blockquote + .blockquote-footer::before {
   content: "— ";
 }
 
diff --git a/scss/tests/snapshot-tests/__snapshots__/ouds-web.css b/scss/tests/snapshot-tests/__snapshots__/ouds-web.css
index 66738f124a..3b6333af98 100644
--- a/scss/tests/snapshot-tests/__snapshots__/ouds-web.css
+++ b/scss/tests/snapshot-tests/__snapshots__/ouds-web.css
@@ -1083,7 +1083,7 @@ blockquote > :last-child {
   margin-bottom: 0;
 }
 
-.blockquote-footer {
+blockquote + .blockquote-footer {
   margin-top: -16px;
   margin-bottom: 16px;
   max-width: var(--bs-font-max-width-body-small);
@@ -1093,7 +1093,7 @@ blockquote > :last-child {
   letter-spacing: var(--bs-font-letter-spacing-body-small);
   color: var(--bs-color-content-muted);
 }
-.blockquote-footer::before {
+blockquote + .blockquote-footer::before {
   content: "— ";
 }
 

From f8317b158dc07082ed12bb0c146ccc1d916c5032 Mon Sep 17 00:00:00 2001
From: Hannah Issermann 
Date: Thu, 8 Oct 2026 12:49:32 +0200
Subject: [PATCH 35/52] mig guides

---
 .../content/docs/getting-started/migration-from-boosted.mdx | 2 ++
 site/src/content/docs/getting-started/migration.mdx         | 6 +++++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/site/src/content/docs/getting-started/migration-from-boosted.mdx b/site/src/content/docs/getting-started/migration-from-boosted.mdx
index 4ac451477f..2bdcc76290 100644
--- a/site/src/content/docs/getting-started/migration-from-boosted.mdx
+++ b/site/src/content/docs/getting-started/migration-from-boosted.mdx
@@ -77,6 +77,8 @@ Read more about the [font stack]([[docsref:/foundation/reboot#font-stack]]) for
 
 - Breaking Abbreviation class `.initialism` has been removed.
 
+- Breaking `.blockquote` class has been removed, you can still use `
` instead. Read more in our [reboot page]([[docsref:/foundation/reboot]]).
+
 - Warning Default spacing values now use `px`s instead of `em`s for fixed component spacing, to keep as much space as possible for meaningful content on zoom.
 
 ## Layout
diff --git a/site/src/content/docs/getting-started/migration.mdx b/site/src/content/docs/getting-started/migration.mdx
index 095f41a9c3..3d5d806e0e 100644
--- a/site/src/content/docs/getting-started/migration.mdx
+++ b/site/src/content/docs/getting-started/migration.mdx
@@ -53,7 +53,7 @@ toc: true
 
 #### Typography
 
-- New Heading has been implemented. Read more in our [typography/heading paragraph]([[docsref:/components/typography#heading]]).
+- New Heading has been implemented, and `.marker` class has been added for 'orange' and 'orange-compact' themes. Read more in our [typography/heading paragraph]([[docsref:/components/typography#heading]]).
 
 - New Display has been implemented. Read more in our [typography/display paragraph]([[docsref:/components/typography#display]]).
 
@@ -71,6 +71,10 @@ toc: true
 
 - Warning `_type.scss` has been renamed to `_typography.scss` for more consistency. You will need to change this name if you create your own custom import.
 
+### Reboot
+
+- Breaking `.blockquote` class has been removed, you can still use `
` instead. Read more in our [reboot page]([[docsref:/foundation/reboot]]).
+
 ### Dual mode
 
 1. Update `@ouds/web-common` and `@ouds/web-[theme]` to v1.6.0.

From 0d11af4012b6c8cae31c42d888553ab0277c13f2 Mon Sep 17 00:00:00 2001
From: Hannah Issermann 
Date: Thu, 8 Oct 2026 14:30:01 +0200
Subject: [PATCH 36/52] right comp and versions

---
 site/data/components-details.ts | 54 +++++++++++++++++++++++++++------
 1 file changed, 45 insertions(+), 9 deletions(-)

diff --git a/site/data/components-details.ts b/site/data/components-details.ts
index 71c53f6041..698760d44a 100644
--- a/site/data/components-details.ts
+++ b/site/data/components-details.ts
@@ -49,6 +49,15 @@ export const componentsDetails: ComponentCardData[] = [
         
       
`
   },
+  {
+    name: 'Body',
+    link: 'typography#body',
+    category: 'Content display',
+    snippet: `
+      

+        Body
+      
`
+  },
   {
     name: 'Breadcrumb',
     category: 'Navigation',
@@ -86,6 +95,24 @@ export const componentsDetails: ComponentCardData[] = [
         

       `
   },
+  {
+    name: 'Code',
+    link: 'typography#code',
+    category: 'Content display',
+    snippet: `
+      
+        Hello World!
+      `
+  },
+  {
+    name: 'Display',
+    link: 'typography#display',
+    category: 'Content display',
+    snippet: `
+      

+        Display
+      
`
+  },
   {
     name: 'Divider',
     category: 'Layout',
@@ -202,6 +229,15 @@ export const componentsDetails: ComponentCardData[] = [
         
       `
   },
+  {
+    name: 'Heading',
+    link: 'typography#heading',
+    category: 'Content display',
+    snippet: `
+      

+        Heading
+      
`
+  },
   {
     name: 'Inline alert',
     slug: 'inline-alert',
@@ -220,6 +256,15 @@ export const componentsDetails: ComponentCardData[] = [
     category: 'Indicator',
     snippet: ``
   },
+  {
+    name: 'Label',
+    link: 'typography#label',
+    category: 'Content display',
+    snippet: `
+      

+        Label
+      
`
+  },
   {
     name: 'Link',
     link: 'links',
@@ -438,14 +483,5 @@ export const componentsDetails: ComponentCardData[] = [
           
         
       `
-  },
-  {
-    name: 'Typography',
-    slug: 'typography',
-    category: 'Content display',
-    snippet: `
-      

-       Heading
-      
`
   }
 ]

From 3960fe43b8abef055d8954f6e4d79711425fc372 Mon Sep 17 00:00:00 2001
From: Hannah Issermann 
Date: Thu, 8 Oct 2026 14:38:47 +0200
Subject: [PATCH 37/52] Revise typography aliases

Updated typography documentation with new alias and description.

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
---
 site/src/content/docs/components/typography.mdx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/site/src/content/docs/components/typography.mdx b/site/src/content/docs/components/typography.mdx
index 618785cec4..69785b0034 100644
--- a/site/src/content/docs/components/typography.mdx
+++ b/site/src/content/docs/components/typography.mdx
@@ -3,6 +3,7 @@ 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/foundation/typography/"
+  - "/docs/content/typography/"
 toc: true
 types:
   - Heading

From e90742674c2b2cbacffb6430a8d4315f8b5ef6a8 Mon Sep 17 00:00:00 2001
From: Hannah Issermann 
Date: Thu, 8 Oct 2026 14:39:59 +0200
Subject: [PATCH 38/52] Update call to ThemeSpecific (attribute name mistake)

Clarify semantic meaning of HTML tags and add information about heading markers.

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
---
 site/src/content/docs/components/typography.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/content/docs/components/typography.mdx b/site/src/content/docs/components/typography.mdx
index 69785b0034..ca89fef8d4 100644
--- a/site/src/content/docs/components/typography.mdx
+++ b/site/src/content/docs/components/typography.mdx
@@ -234,7 +234,7 @@ 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.
 - You can easily add an icon with your headings using our [heading icon size utilities]([[docsref:/utilities/icons-sizing#headings]]).
 
-
+
 ### 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`.

From 6a744b9737cb71eeed7d9d0771943adbab9a3f2d Mon Sep 17 00:00:00 2001
From: Hannah Issermann 
Date: Thu, 8 Oct 2026 17:20:08 +0200
Subject: [PATCH 39/52] content/default color on code elements + content/muted
 for our doc for inline code elements

---
 scss/_reboot.scss                      | 2 --
 scss/_variables.scss                   | 2 --
 site/src/scss/_component-examples.scss | 5 +++++
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 230a5f361e..7e93197617 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -416,7 +416,6 @@ pre {
   margin-bottom: $ouds-space-fixed-medium; // 2 // OUDS mod: instead of `1rem`
   overflow: auto; // 3
   @include get-font-size("code-medium"); // OUDS mod: instead of `font-size: $code-font-size`
-  color: $pre-color;
 
   // Account for some code outputs that place code tags in pre tags
   code {
@@ -430,7 +429,6 @@ var, // OUDS mod
 code {
   font-size: $code-font-size;
   font-style: normal; // OUDS mod:  is italic in all browsers
-  color: var(--#{$prefix}color-content-muted);
   word-wrap: break-word;
 }
 
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 5b62c32b48..80706fff2e 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1929,8 +1929,6 @@ $kbd-font-size:                     $code-font-size !default;
 $kbd-color:                         var(--#{$prefix}color-content-inverse) !default; // OUDS mod: instead of `var(--#{$prefix}body-bg)`
 $kbd-bg:                            var(--#{$prefix}color-surface-inverse-high) !default; // OUDS mod: instead of `var(--#{$prefix}body-color)`
 $nested-kbd-font-weight:            null !default; // Deprecated in Bootstrap v5.2.0, removing in v6
-
-$pre-color:                         var(--#{$prefix}color-content-muted) !default; // instead of `null`
 // End mod
 
 //
diff --git a/site/src/scss/_component-examples.scss b/site/src/scss/_component-examples.scss
index dca844d1f3..2f774d6ed6 100644
--- a/site/src/scss/_component-examples.scss
+++ b/site/src/scss/_component-examples.scss
@@ -423,6 +423,11 @@
 
 // OUDS mod: no .bd-content .bd-code-snippet
 
+// For code elements outside of code snippets, use muted color by default
+code {
+  color: var(--#{$prefix}color-content-muted);
+}
+
 // OUDS mod
 // scss-docs-start sticker-fs-4xlarge
 .sticker-fs-4xlarge {

From 959a46dbe418e36a96cab2762bdc01339a142f73 Mon Sep 17 00:00:00 2001
From: Hannah Issermann 
Date: Thu, 8 Oct 2026 17:21:07 +0200
Subject: [PATCH 40/52] Update skills

---
 .../SKILL.md                                  |   2 +-
 .../{foundation => components}/typography.md  | 103 +++++++++++-------
 .../references/foundation/reboot.md           |  34 ++++++
 .../references/foundation/tokens.md           |  22 ++++
 .../references/getting-started/migration.md   |   6 +
 .../references/getting-started/sass.md        |   2 +-
 .../references/utilities/figma-tokens.md      |   2 +-
 7 files changed, 126 insertions(+), 45 deletions(-)
 rename skills/using-ouds-web-version-major-minor/references/{foundation => components}/typography.md (56%)

diff --git a/skills/using-ouds-web-version-major-minor/SKILL.md b/skills/using-ouds-web-version-major-minor/SKILL.md
index c158732ae1..2cd374a203 100644
--- a/skills/using-ouds-web-version-major-minor/SKILL.md
+++ b/skills/using-ouds-web-version-major-minor/SKILL.md
@@ -110,7 +110,6 @@ Always pin `` to a specific release (e.g. `1.4.0`) rather than leaving
 ### Foundation
 
 - [Approach](references/foundation/approach.md) - Design principles
-- [Typography](references/foundation/typography.md) - Headings, body text, display, font mixins
 - [Colors](references/foundation/colors.md) - Available raw colors
 - [Color modes](references/foundation/color-modes.md) - Light/dark/root/root-inverted themes
 - [Tokens](references/foundation/tokens.md) - Raw/semantic/composite/component token architecture
@@ -157,6 +156,7 @@ Always pin `` to a specific release (e.g. `1.4.0`) rather than leaving
 - [Table](references/components/table.md) - Opt-in table styling (draft component)
 - [Text area](references/components/text-area.md) - Multiline inputs
 - [Text input](references/components/text-input.md) - Single-line inputs
+- [Typography](references/components/typography.md) - Headings (+ heading marker), display, body, label, code
 
 ### Not yet documented (do not invent markup)
 
diff --git a/skills/using-ouds-web-version-major-minor/references/foundation/typography.md b/skills/using-ouds-web-version-major-minor/references/components/typography.md
similarity index 56%
rename from skills/using-ouds-web-version-major-minor/references/foundation/typography.md
rename to skills/using-ouds-web-version-major-minor/references/components/typography.md
index 54f73683b3..cf81e415b5 100644
--- a/skills/using-ouds-web-version-major-minor/references/foundation/typography.md
+++ b/skills/using-ouds-web-version-major-minor/references/components/typography.md
@@ -1,6 +1,10 @@
 # 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,
+labels, and code. Five types: **Heading**, **Display**, **Body**, **Label**, **Code**.
+
+Use the HTML tag matching the **semantic meaning** of the content (heading, paragraph, code snippet, etc.) —
+never pick a tag just because of how it looks on screen; appearance is handled by the class/token, not the tag.
 
 ## Global Settings
 
@@ -9,9 +13,9 @@ Global typography settings, headings, body text, display headings, and text util
 - `max-width` applied on all font references for readability — remove with `.mw-none` utility
 - `--bs-color-bg-primary` sets `background-color` on `:root` children
 - Sass variables: `$font-family-base`, `$font-size-base`, `$line-height-base`
-- Styles in `_reboot.scss`, variables in `_variables.scss`
+- Styles in `_reboot.scss` and `_typography.scss`, variables in `_variables.scss`
 
-## Headings
+## Heading
 
 HTML `
` through `
` — each sets `font-size`, `line-height`, `letter-spacing`, `font-weight: bold`, and `max-width`. Responsive across 3 ranges.
 
@@ -39,7 +43,21 @@ Classes `.h1` through `.h6` available for matching heading styling without the H
 
h1. OUDS Web heading

 ```
 
-## Display Headings
+### Heading with marker
+
+A brand-colored marker can be displayed below a heading large (`
` or `.h2`) to reinforce visual emphasis
+and information hierarchy. Add the `.marker` class:
+
+```html
+
h2. OUDS Web heading with marker

+
h2. OUDS Web heading with marker

+```
+
+> **Brand-dependent:** the marker only renders if the active theme defines the
+> `$ouds-typography-heading-large-marker` flag and a `$ouds-heading-large-marker-img` asset. It is available on
+> Orange and Orange Compact; Sosh does not define a marker image, so `.marker` has no visible effect there.
+
+## Display
 
 Larger, more opinionated heading styles. **OUDS Web uses named sizes, not numbers.**
 
@@ -61,9 +79,11 @@ With `$enable-bootstrap-compatibility: true`, `.display-1` through `.display-6`
 
 Sass: `$display-font-sizes`, `$display-font-weight`, `$display-font-family`, `$display-font-style`, `$display-line-height`.
 
-## Regular Texts
+## Body
 
-Only headings, display headings, and `` text use **bold**. Other content uses `normal` font-weight.
+Regular body text, used for paragraphs, descriptions, and informational messages. Only headings, display
+headings, and `` text use **bold** by default; body text uses `normal` font-weight (overridable via
+[font weight utilities](../utilities/text.md)).
 
 | Reference   | Class/Element         |
 | ----------- | --------------------- |
@@ -86,6 +106,9 @@ Only headings, display headings, and `` text use **bold**. Other content
 
This is a small paragraph.

 ```
 
+`.lead`, default `
`, and `.small`/`` are equivalent to the font-size text utilities `.fs-bl`, `.fs-bm`,
+`.fs-bs` — all of them also set `line-height`, `letter-spacing`, and `max-width`.
+
 ## Inline Text Elements
 
 ```html
@@ -109,32 +132,12 @@ Only headings, display headings, and `` text use **bold**. Other content
 
 Equivalent classes: `.mark`, `.small`, `.text-decoration-underline`, `.text-decoration-line-through`.
 
-## Blockquotes
-
-Uses body large text. Wrap with `
`.
+> For blockquotes, see [Reboot](../foundation/reboot.md#blockquotes).
 
-```html
-

-  
A well-known quote, contained in a blockquote element.

-

-```
+## Label
 
-### With Attribution
-
-```html
-

-  

-    
A well-known quote, contained in a blockquote element.

-  

-  

-    Someone famous in Source Title
-  

-

-```
-
-## Label utility classes (v1.4.0+)
-
-In addition to heading/body font-size utilities, dedicated **label** font-size classes are available (non-responsive, single value regardless of breakpoint), for UI labels such as form labels, buttons, tags, badges:
+Label is non-responsive text for compact UI components such as buttons, form fields, badges, and tags — single
+value regardless of breakpoint (non-responsive), unlike Heading/Display/Body (responsive). Four size levels:
 
 | Class      | Level          |
 | ---------- | -------------- |
@@ -147,22 +150,38 @@ In addition to heading/body font-size utilities, dedicated **label** font-size c
 Label medium text
 ```
 
-## Sass Mixin: `get-font-size()`
+Label texts use `normal` font-weight by default too.
 
-For custom components, use the `get-font-size()` mixin. Label levels: `small`, `medium`, `large`, `xlarge`.
+## Code
 
-```scss
-.my-custom-component {
-  @include get-font-size("label-medium");
-}
+Styles technical content like code snippets, commands, system values, and identifiers, using a monospace
+typeface. Single size — reserve it for content that genuinely needs a code-like representation.
+
+> **Color:** `` and `
` no longer force a muted text color by default (the library leaves `color` to
+> inherit the surrounding text color). If a muted appearance is desired, apply it explicitly, e.g.
+> `color: var(--bs-color-content-muted)`.
+
+### Inline code
+
+```html
+For example, <section> should be wrapped as inline.
 ```
 
-Outputs:
+### Code blocks
+
+Use `
` for multiple lines; `
` preserves whitespace/indentation, `` marks the content as code.
 
-```css
-.my-custom-component {
-  font-size: var(--bs-font-size-label-medium);
-  line-height: var(--bs-font-line-height-label-medium);
-  letter-spacing: var(--bs-font-letter-spacing-label-medium); /* ltr only */
+```html
+

+if (document.getElementById('myId')) {
+  document.getElementById('myId').addEventListener('click', () => {
+    ...
+  })
 }
+

 ```
+
+## Sizing text in custom components
+
+To size text in a custom component, use the `get-font-size()` composite-token mixin — see
+[Tokens](../foundation/tokens.md#composite-tokens).
diff --git a/skills/using-ouds-web-version-major-minor/references/foundation/reboot.md b/skills/using-ouds-web-version-major-minor/references/foundation/reboot.md
index bf039b610c..12a72d1ec5 100644
--- a/skills/using-ouds-web-version-major-minor/references/foundation/reboot.md
+++ b/skills/using-ouds-web-version-major-minor/references/foundation/reboot.md
@@ -64,6 +64,40 @@ Use appropriate `data-bs-theme` and `.bg-surface-*` classes:
 
 Styled via `border-top`, inherits `border-color` via `color`. Customize with border utilities. See Divider component.
 
+## Blockquotes
+
+Style applies directly to the bare `
` element — **there is no `.blockquote` class** (removed; do not
+add it). Uses [body large text](../components/typography.md#body).
+
+```html
+

+  
A well-known quote, contained in a blockquote element.

+

+```
+
+### Naming a source
+
+The HTML spec requires attribution to be placed outside the `
`. Wrap the `
` in a
+`
` and add a `
` (or a block-level element like `
`) with the `.blockquote-footer` class
+**immediately after** the `
` — it only renders its styling (dash prefix, body small text) when it is
+the adjacent sibling of a `
` (CSS selector `blockquote + .blockquote-footer`). Wrap the source name in
+``.
+
+```html
+

+  

+    
A well-known quote, contained in a blockquote element.

+  

+  

+    Someone famous in Source Title
+  

+

+```
+
+> **Breaking change (v1.6.0):** previously `.blockquote` and `.blockquote-footer` worked as standalone classes.
+> Now the plain `
` element carries the style, and `.blockquote-footer` requires the adjacent-sibling
+> structure above to be styled.
+
 ## Lists
 
 Refer to Bullet list component for `
    `/`
      ` styling, `.list-unstyled`, `.list-inline`.
diff --git a/skills/using-ouds-web-version-major-minor/references/foundation/tokens.md b/skills/using-ouds-web-version-major-minor/references/foundation/tokens.md
index f7c100cfa3..583331f941 100644
--- a/skills/using-ouds-web-version-major-minor/references/foundation/tokens.md
+++ b/skills/using-ouds-web-version-major-minor/references/foundation/tokens.md
@@ -28,6 +28,28 @@ OUDS Web design tokens (from Figma) are structured in a **three-tier architectur
 - Aggregations of several semantic tokens (or brand-specific icons), e.g. shadow/elevation tokens and typographic definitions
 - Already exposed via utilities/components — **usable directly**
 
+### Font tokens: `get-font-size()` mixin
+
+Font tokens can't be used as plain Sass/CSS variables — they're aggregated into the `get-font-size()` mixin,
+which takes the font reference name as a parameter. Use it to size text in custom components. Levels: heading
+(`heading-xlarge/large/medium/small`), body (`body-large/medium/small`), label (`label-xlarge/large/medium/small`).
+
+```scss
+.my-custom-component {
+  @include get-font-size("label-medium");
+}
+```
+
+Outputs:
+
+```css
+.my-custom-component {
+  font-size: var(--bs-font-size-label-medium);
+  line-height: var(--bs-font-line-height-label-medium);
+  letter-spacing: var(--bs-font-letter-spacing-label-medium); /* ltr only */
+}
+```
+
 ## Component tokens
 
 - File: `@ouds/web-{brand}/scss/tokens/_component.scss`
diff --git a/skills/using-ouds-web-version-major-minor/references/getting-started/migration.md b/skills/using-ouds-web-version-major-minor/references/getting-started/migration.md
index 709a2a099c..12656f10c4 100644
--- a/skills/using-ouds-web-version-major-minor/references/getting-started/migration.md
+++ b/skills/using-ouds-web-version-major-minor/references/getting-started/migration.md
@@ -7,11 +7,17 @@
 ### Breaking changes
 
 - **Alerts**: action links placed inside `.alert-container`, after `.alert-text-container`, must use the compact link variant: `.link.link-compact`. Action links placed inside `.alert-action-container`, beside the close button, continue to use the regular `.link`.
+- **Blockquotes**: `.blockquote` class removed — style now applies directly to the bare `
      ` element. `.blockquote-footer` only renders its styling when it is the adjacent sibling of a `
      ` (`blockquote + .blockquote-footer`), so keep the `
      ` wrapper with `
      ` immediately after the `
      `.
 
 ### New
 
 - **Buttons**: Expand button implemented
 - **Links**: Expand link implemented
+- **Typography**: optional heading marker — add `.marker` to a heading large (`
      `/`.h2`) to display a brand-colored marker below it (Orange, Orange Compact; no visible effect on Sosh).
+
+### Components
+
+- `` and `
      ` no longer force a muted text color by default; they now inherit the surrounding text color.
 
 ## v1.5.0
 
diff --git a/skills/using-ouds-web-version-major-minor/references/getting-started/sass.md b/skills/using-ouds-web-version-major-minor/references/getting-started/sass.md
index 288b4f46a5..9b7860ccc2 100644
--- a/skills/using-ouds-web-version-major-minor/references/getting-started/sass.md
+++ b/skills/using-ouds-web-version-major-minor/references/getting-started/sass.md
@@ -49,7 +49,7 @@ your-project/
 // 7. Optional partials
 @import "../node_modules/@ouds/web-common/scss/utilities";
 @import "../node_modules/@ouds/web-common/scss/reboot";
-@import "../node_modules/@ouds/web-common/scss/type";
+@import "../node_modules/@ouds/web-common/scss/typography";
 @import "../node_modules/@ouds/web-common/scss/images";
 @import "../node_modules/@ouds/web-common/scss/containers";
 @import "../node_modules/@ouds/web-common/scss/grid";
diff --git a/skills/using-ouds-web-version-major-minor/references/utilities/figma-tokens.md b/skills/using-ouds-web-version-major-minor/references/utilities/figma-tokens.md
index 2ec5e9a98c..93d40ec9ab 100644
--- a/skills/using-ouds-web-version-major-minor/references/utilities/figma-tokens.md
+++ b/skills/using-ouds-web-version-major-minor/references/utilities/figma-tokens.md
@@ -34,5 +34,5 @@ Use when there is no utility class, when applying a token on a pseudo-element, o
 | Opacity `ouds/opacity/*`                              | `ouds/opacity/medium`                                                  | none                                                            | `$ouds-opacity-medium`                                         |
 | Shadow `ouds/elevation/*`                              | `ouds/elevation/**/emphasized`                                         | none                                                            | `$ouds-elevation-emphasized`                                   |
 | Spacing `ouds/space/*`                                 | `ouds/space/scaled/2xlarge`
      `ouds/space/fixed/medium`              | `--bs-space-scaled-2xlarge`
      none                            | none
      `$ouds-space-fixed-medium`                            |
-| Typography `ouds/font/*` or `font-ref/size/weight`    | `ouds/font/**/body-large`                                              | Use the `get-font-size()` Sass mixin (see [typography](../foundation/typography.md)) | `$ouds-font-weight-web-body-strong` (weight only) |
+| Typography `ouds/font/*` or `font-ref/size/weight`    | `ouds/font/**/body-large`                                              | Use the `get-font-size()` Sass mixin (see [Tokens](../foundation/tokens.md#composite-tokens)) | `$ouds-font-weight-web-body-strong` (weight only) |
 | Grid `ouds/grid/*`                                     | `ouds/grid/column-gap`
      `ouds/grid/margin`                          | `--bs-grid-gap`
      `--bs-grid-margin`                          | none                                                           |

From ecd7229e15a6c233a8caa7b30745a2452b80bdfe Mon Sep 17 00:00:00 2001
From: Hannah Issermann 
Date: Fri, 9 Oct 2026 09:37:54 +0200
Subject: [PATCH 41/52] Update css snapshot

---
 scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css | 2 --
 scss/tests/snapshot-tests/__snapshots__/ouds-web.css           | 2 --
 2 files changed, 4 deletions(-)

diff --git a/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css b/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css
index ecccf0565f..6473e1812a 100644
--- a/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css
+++ b/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css
@@ -1365,7 +1365,6 @@ pre {
   line-height: var(--bs-font-line-height-code-medium);
   /* rtl:remove */
   letter-spacing: var(--bs-font-letter-spacing-code-medium);
-  color: var(--bs-color-content-muted);
 }
 pre code {
   font-size: inherit;
@@ -1377,7 +1376,6 @@ var,
 code {
   font-size: 0.875em;
   font-style: normal;
-  color: var(--bs-color-content-muted);
   word-wrap: break-word;
 }
 
diff --git a/scss/tests/snapshot-tests/__snapshots__/ouds-web.css b/scss/tests/snapshot-tests/__snapshots__/ouds-web.css
index 1496d7512b..51241e98bd 100644
--- a/scss/tests/snapshot-tests/__snapshots__/ouds-web.css
+++ b/scss/tests/snapshot-tests/__snapshots__/ouds-web.css
@@ -1200,7 +1200,6 @@ pre {
   line-height: var(--bs-font-line-height-code-medium);
   /* rtl:remove */
   letter-spacing: var(--bs-font-letter-spacing-code-medium);
-  color: var(--bs-color-content-muted);
 }
 pre code {
   font-size: inherit;
@@ -1212,7 +1211,6 @@ var,
 code {
   font-size: 0.875em;
   font-style: normal;
-  color: var(--bs-color-content-muted);
   word-wrap: break-word;
 }
 

From ad3bd7026e2eaafce526db0e6cca7459edef4b93 Mon Sep 17 00:00:00 2001
From: Hannah Issermann 
Date: Fri, 9 Oct 2026 17:44:30 +0200
Subject: [PATCH 42/52] Add carriage return between heart definition and
 extension

---
 .../content/docs/components/typography.mdx    | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/site/src/content/docs/components/typography.mdx b/site/src/content/docs/components/typography.mdx
index ca89fef8d4..29b9b63f0a 100644
--- a/site/src/content/docs/components/typography.mdx
+++ b/site/src/content/docs/components/typography.mdx
@@ -117,7 +117,9 @@ To ensure accessibility, make sure you choose the HTML tags you use, based on th
 
 ## [[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.
+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 class sets `font-size`, and also `line-height`, `letter-spacing`, `font-weight: bold`, and `max-width`. If you want to get rid of the `max-width`, use our `.mw-none` [width utility]([[docsref:/utilities/sizing]]). Here are the associated `font-size`s depending on the breakpoints.
 
@@ -246,7 +248,9 @@ A brand-colored marker can be displayed below the heading large (`
      ` or `.h2`
 
 ## [[comp]] Display
 
-Display is a UI element that styles typography for impactful content like landing pages, marketing campaigns, and key messages. The display features large type sizes that capture attention and create strong visual emphasis. Variants automatically adjust across breakpoints to maintain a consistent visual hierarchy on all screen sizes. Use it sparingly to preserve its impact and effectiveness.
+Display is a UI element that styles typography for impactful content like landing pages, marketing campaigns, and key messages.
+
+The display features large type sizes that capture attention and create strong visual emphasis. Variants automatically adjust across breakpoints to maintain a consistent visual hierarchy on all screen sizes. Use it sparingly to preserve its impact and effectiveness.
 
 We provide `.display-*` from `large` through `small`. Each class sets `font-size`, and also `line-height`, `letter-spacing`, `font-weight: bold`, and `max-width`. If you want to get rid of the `max-width`, please make sure to use our `.mw-none` [width utility]([[docsref:/utilities/sizing]]). Here are the associated `font-size`s depending on the breakpoints.
 
@@ -338,7 +342,9 @@ Please note that:
 
 ## [[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 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.
 
 Regular body text forms the core of your content. Body text has three size levels: large (for emphasis), medium (default), and small (for supporting information). Each class sets `font-size`, `line-height`, `letter-spacing`, and `max-width`. To remove the `max-width`, use the `.mw-none` [width utility]([[docsref:/utilities/sizing]]). Body texts use `font-weight: normal` by default, but can use other font weights as needed through our [font weight utilities]([[docsref:/utilities/text#font-weight]]).
 
@@ -437,7 +443,9 @@ Please note that:
 
 ## [[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.
+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 class sets `font-size`, `line-height`, `letter-spacing`, and `max-width`. To remove the `max-width`, use the `.mw-none` [width utility]([[docsref:/utilities/sizing]]). Label texts use `font-weight: normal` by default, but can use other font weights as needed through our [font weight utilities]([[docsref:/utilities/text#font-weight]]).
 
@@ -525,7 +533,9 @@ Please note that you have to use the appropriate HTML tag to convey the right se
 
 ## [[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.
+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.
 
 ### Inline code
 

From 80107da1b629dbcab0898a5ce5df809afd3aea53 Mon Sep 17 00:00:00 2001
From: Hannah Issermann 
Date: Fri, 9 Oct 2026 18:01:06 +0200
Subject: [PATCH 43/52] remove useless carriage returns

---
 .../references/components/typography.md       | 41 ++++++++-----------
 .../references/foundation/reboot.md           | 13 ++----
 .../references/foundation/tokens.md           |  4 +-
 3 files changed, 22 insertions(+), 36 deletions(-)

diff --git a/skills/using-ouds-web-version-major-minor/references/components/typography.md b/skills/using-ouds-web-version-major-minor/references/components/typography.md
index cf81e415b5..4424581317 100644
--- a/skills/using-ouds-web-version-major-minor/references/components/typography.md
+++ b/skills/using-ouds-web-version-major-minor/references/components/typography.md
@@ -1,10 +1,8 @@
 # Typography
 
-Typography is a set of UI elements that structure and style text content: headings, display text, body text,
-labels, and code. Five types: **Heading**, **Display**, **Body**, **Label**, **Code**.
+Typography is a set of UI elements that structure and style text content: headings, display text, body text, labels, and code. Five types: **Heading**, **Display**, **Body**, **Label**, **Code**.
 
-Use the HTML tag matching the **semantic meaning** of the content (heading, paragraph, code snippet, etc.) —
-never pick a tag just because of how it looks on screen; appearance is handled by the class/token, not the tag.
+Use the HTML tag matching the **semantic meaning** of the content (heading, paragraph, code snippet, etc.) — never pick a tag just because of how it looks on screen; appearance is handled by the class/token, not the tag.
 
 ## Global Settings
 
@@ -43,19 +41,24 @@ Classes `.h1` through `.h6` available for matching heading styling without the H
 
      h1. OUDS Web heading
      
 ```
 
+```html
+
+
      Section title styled larger
      
+
+
+
      Section title styled larger
      
+```
+
 ### Heading with marker
 
-A brand-colored marker can be displayed below a heading large (`
      ` or `.h2`) to reinforce visual emphasis
-and information hierarchy. Add the `.marker` class:
+A brand-colored marker can be displayed below a heading large (`
      ` or `.h2`) to reinforce visual emphasis and information hierarchy. Add the `.marker` class:
 
 ```html
 
      h2. OUDS Web heading with marker
      
 
      h2. OUDS Web heading with marker
      
 ```
 
-> **Brand-dependent:** the marker only renders if the active theme defines the
-> `$ouds-typography-heading-large-marker` flag and a `$ouds-heading-large-marker-img` asset. It is available on
-> Orange and Orange Compact; Sosh does not define a marker image, so `.marker` has no visible effect there.
+> **Brand-dependent:** the marker only renders if the active theme defines the `$ouds-typography-heading-large-marker` flag and a `$ouds-heading-large-marker-img` asset. It is available on Orange and Orange Compact; Sosh does not define a marker image, so `.marker` has no visible effect there.
 
 ## Display
 
@@ -81,9 +84,7 @@ Sass: `$display-font-sizes`, `$display-font-weight`, `$display-font-family`, `$d
 
 ## Body
 
-Regular body text, used for paragraphs, descriptions, and informational messages. Only headings, display
-headings, and `` text use **bold** by default; body text uses `normal` font-weight (overridable via
-[font weight utilities](../utilities/text.md)).
+Regular body text, used for paragraphs, descriptions, and informational messages. Only headings, display headings, and `` text use **bold** by default; body text uses `normal` font-weight (overridable via [font weight utilities](../utilities/text.md)).
 
 | Reference   | Class/Element         |
 | ----------- | --------------------- |
@@ -106,8 +107,7 @@ headings, and `` text use **bold** by default; body text uses `normal` f
 
      This is a small paragraph.
      
 ```
 
-`.lead`, default `
      `, and `.small`/`` are equivalent to the font-size text utilities `.fs-bl`, `.fs-bm`,
-`.fs-bs` — all of them also set `line-height`, `letter-spacing`, and `max-width`.
+`.lead`, default `
      `, and `.small`/`` are equivalent to the font-size text utilities `.fs-bl`, `.fs-bm`, `.fs-bs` — all of them also set `line-height`, `letter-spacing`, and `max-width`.
 
 ## Inline Text Elements
 
@@ -136,8 +136,7 @@ Equivalent classes: `.mark`, `.small`, `.text-decoration-underline`, `.text-deco
 
 ## Label
 
-Label is non-responsive text for compact UI components such as buttons, form fields, badges, and tags — single
-value regardless of breakpoint (non-responsive), unlike Heading/Display/Body (responsive). Four size levels:
+Label is non-responsive text for compact UI components such as buttons, form fields, badges, and tags — single value regardless of breakpoint (non-responsive), unlike Heading/Display/Body (responsive). Four size levels:
 
 | Class      | Level          |
 | ---------- | -------------- |
@@ -154,12 +153,9 @@ Label texts use `normal` font-weight by default too.
 
 ## Code
 
-Styles technical content like code snippets, commands, system values, and identifiers, using a monospace
-typeface. Single size — reserve it for content that genuinely needs a code-like representation.
+Styles technical content like code snippets, commands, system values, and identifiers, using a monospace typeface. Single size — reserve it for content that genuinely needs a code-like representation.
 
-> **Color:** `` and `
      ` no longer force a muted text color by default (the library leaves `color` to
-> inherit the surrounding text color). If a muted appearance is desired, apply it explicitly, e.g.
-> `color: var(--bs-color-content-muted)`.
+> **Color:** `` and `
      ` no longer force a muted text color by default (the library leaves `color` to inherit the surrounding text color). If a muted appearance is desired, apply it explicitly, e.g. `color: var(--bs-color-content-muted)`.
 
 ### Inline code
 
@@ -183,5 +179,4 @@ if (document.getElementById('myId')) {
 
 ## Sizing text in custom components
 
-To size text in a custom component, use the `get-font-size()` composite-token mixin — see
-[Tokens](../foundation/tokens.md#composite-tokens).
+To size text in a custom component, use the `get-font-size()` composite-token mixin — see [Tokens](../foundation/tokens.md#composite-tokens).
diff --git a/skills/using-ouds-web-version-major-minor/references/foundation/reboot.md b/skills/using-ouds-web-version-major-minor/references/foundation/reboot.md
index 12a72d1ec5..235a295ad6 100644
--- a/skills/using-ouds-web-version-major-minor/references/foundation/reboot.md
+++ b/skills/using-ouds-web-version-major-minor/references/foundation/reboot.md
@@ -66,8 +66,7 @@ Styled via `border-top`, inherits `border-color` via `color`. Customize with bor
 
 ## Blockquotes
 
-Style applies directly to the bare `
      ` element — **there is no `.blockquote` class** (removed; do not
-add it). Uses [body large text](../components/typography.md#body).
+Style applies directly to the bare `
      ` element — **there is no `.blockquote` class** (removed; do not add it). Uses [body large text](../components/typography.md#body).
 
 ```html
 
      
@@ -77,11 +76,7 @@ add it). Uses [body large text](../components/typography.md#body).
 
 ### Naming a source
 
-The HTML spec requires attribution to be placed outside the `
      `. Wrap the `
      ` in a
-`
      ` and add a `
      ` (or a block-level element like `
      `) with the `.blockquote-footer` class
-**immediately after** the `
      ` — it only renders its styling (dash prefix, body small text) when it is
-the adjacent sibling of a `
      ` (CSS selector `blockquote + .blockquote-footer`). Wrap the source name in
-``.
+The HTML spec requires attribution to be placed outside the `
      `. Wrap the `
      ` in a `
      ` and add a `
      ` (or a block-level element like `
      `) with the `.blockquote-footer` class **immediately after** the `
      ` — it only renders its styling (dash prefix, body small text) when it is the adjacent sibling of a `
      ` (CSS selector `blockquote + .blockquote-footer`). Wrap the source name in ``.
 
 ```html
 
      
@@ -94,9 +89,7 @@ the adjacent sibling of a `
      ` (CSS selector `blockquote + .blockquote
 
      
 ```
 
-> **Breaking change (v1.6.0):** previously `.blockquote` and `.blockquote-footer` worked as standalone classes.
-> Now the plain `
      ` element carries the style, and `.blockquote-footer` requires the adjacent-sibling
-> structure above to be styled.
+> **Breaking change (v1.6.0):** previously `.blockquote` and `.blockquote-footer` worked as standalone classes. Now the plain `
      ` element carries the style, and `.blockquote-footer` requires the adjacent-sibling structure above to be styled.
 
 ## Lists
 
diff --git a/skills/using-ouds-web-version-major-minor/references/foundation/tokens.md b/skills/using-ouds-web-version-major-minor/references/foundation/tokens.md
index 583331f941..967940ba80 100644
--- a/skills/using-ouds-web-version-major-minor/references/foundation/tokens.md
+++ b/skills/using-ouds-web-version-major-minor/references/foundation/tokens.md
@@ -30,9 +30,7 @@ OUDS Web design tokens (from Figma) are structured in a **three-tier architectur
 
 ### Font tokens: `get-font-size()` mixin
 
-Font tokens can't be used as plain Sass/CSS variables — they're aggregated into the `get-font-size()` mixin,
-which takes the font reference name as a parameter. Use it to size text in custom components. Levels: heading
-(`heading-xlarge/large/medium/small`), body (`body-large/medium/small`), label (`label-xlarge/large/medium/small`).
+Font tokens can't be used as plain Sass/CSS variables — they're aggregated into the `get-font-size()` mixin, which takes the font reference name as a parameter. Use it to size text in custom components. Levels: heading (`heading-xlarge/large/medium/small`), body (`body-large/medium/small`), label (`label-xlarge/large/medium/small`).
 
 ```scss
 .my-custom-component {

From a29e0b8ef7943047633883e163b0d15067b22b3e Mon Sep 17 00:00:00 2001
From: Hannah Issermann 
Date: Fri, 9 Oct 2026 18:28:51 +0200
Subject: [PATCH 44/52] update doc for classes .hX

---
 site/src/content/docs/components/typography.mdx | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/site/src/content/docs/components/typography.mdx b/site/src/content/docs/components/typography.mdx
index 29b9b63f0a..b7c94320aa 100644
--- a/site/src/content/docs/components/typography.mdx
+++ b/site/src/content/docs/components/typography.mdx
@@ -2,6 +2,7 @@
 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
@@ -219,17 +220,17 @@ All HTML headings, `
      ` through `
      `, are available. Each class sets `font-s
 
 `.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.
 
-h1. OUDS Web heading
      
+h2. OUDS Web heading looking like h1
      
 
-  
      h2. OUDS Web heading
      
+  
      h3. OUDS Web heading looking like h2
      
 
-  
      h3. OUDS Web heading
      
+  
      h2. OUDS Web heading looking like h3
      
 
-  
      h4. OUDS Web heading
      
+  
      h2. OUDS Web heading looking like h4
      
 
-  
      h5. OUDS Web heading
      
+  
      h2. OUDS Web heading looking like h5
      
 
-  
      h6. OUDS Web heading
      `} />
+  
      h2. OUDS Web heading looking like h6
      `} />
 
 Please note that:
 - The `.h1` to `.h6` 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`. Like heading tags and classes, they set the `font-size`, but also the `line-height`, the `letter-spacing` and the `max-width`.
@@ -243,7 +244,7 @@ A brand-colored marker can be displayed below the heading large (`
      ` or `.h2`
 
 h2. OUDS Web heading with marker
      
 
-  
      h2. OUDS Web heading with marker
      `} />
+  
      h3. OUDS Web heading looking like h2 with marker
      `} />
 
 
 ## [[comp]] Display

From fd09ab0a6581a1d49e6d06d3737a36573c81b0ab Mon Sep 17 00:00:00 2001
From: Hannah Issermann 
Date: Fri, 9 Oct 2026 18:29:00 +0200
Subject: [PATCH 45/52] update skills

---
 .../references/components/typography.md       | 83 ++++---------------
 .../references/foundation/reboot.md           | 17 +++-
 2 files changed, 34 insertions(+), 66 deletions(-)

diff --git a/skills/using-ouds-web-version-major-minor/references/components/typography.md b/skills/using-ouds-web-version-major-minor/references/components/typography.md
index 4424581317..506a2f40f5 100644
--- a/skills/using-ouds-web-version-major-minor/references/components/typography.md
+++ b/skills/using-ouds-web-version-major-minor/references/components/typography.md
@@ -1,21 +1,12 @@
 # Typography
 
-Typography is a set of UI elements that structure and style text content: headings, display text, body text, labels, and code. Five types: **Heading**, **Display**, **Body**, **Label**, **Code**.
+Typography is a set of UI elements that structure and style text content. Five types: **Heading**, **Display**, **Body**, **Label**, **Code**.
 
 Use the HTML tag matching the **semantic meaning** of the content (heading, paragraph, code snippet, etc.) — never pick a tag just because of how it looks on screen; appearance is handled by the class/token, not the tag.
 
-## Global Settings
-
-- Custom font stack with native font fallback per OS/device
-- Browser default root `font-size` (16px) — set `$font-size-base` in `rem`
-- `max-width` applied on all font references for readability — remove with `.mw-none` utility
-- `--bs-color-bg-primary` sets `background-color` on `:root` children
-- Sass variables: `$font-family-base`, `$font-size-base`, `$line-height-base`
-- Styles in `_reboot.scss` and `_typography.scss`, variables in `_variables.scss`
-
 ## Heading
 
-HTML `
      ` through `
      ` — each sets `font-size`, `line-height`, `letter-spacing`, `font-weight: bold`, and `max-width`. Responsive across 3 ranges.
+HTML `
      ` through `
      ` — each sets `font-size`, `line-height`, `letter-spacing`, `font-weight: bold`, and `max-width` (remove with `.mw-none` [width utility](../utilities/sizing.md)). Responsive across 3 breakpoint ranges.
 
 | Heading        | Element | Breakpoints 2xs–sm | Breakpoints md–lg | Breakpoints xl+ |
 | -------------- | ------- | ------------------ | ----------------- | --------------- |
@@ -35,19 +26,14 @@ HTML `
      ` through `
      ` — each sets `font-size`, `line-height`, `letter-spa
 
      h6. OUDS Web heading
      
 ```
 
-Classes `.h1` through `.h6` available for matching heading styling without the HTML element:
+Classes `.h1` through `.h6` are also available, for when a heading needs to be styled like another level without using the associated HTML element:
 
 ```html
-
      h1. OUDS Web heading
      
+
      h2 element styled like a h1
      
+
      h3 element styled like a h2
      
 ```
 
-```html
-
-
      Section title styled larger
      
-
-
-
      Section title styled larger
      
-```
+> **Prefer the real heading element:** use `
      `–`
      ` to represent headings in the document structure. Use `.h1`–`.h6` only to give an *actual heading* a visual size different from its semantic level (e.g. `
      `) — never on a non-heading element such as `
      `: screen reader users rely on real heading elements to navigate the page, and a styled `
      ` is invisible to that navigation.
 
 ### Heading with marker
 
@@ -55,14 +41,14 @@ A brand-colored marker can be displayed below a heading large (`
      ` or `.h2`)
 
 ```html
 
      h2. OUDS Web heading with marker
      
-
      h2. OUDS Web heading with marker
      
+
      h3 element styled like a h2, with marker
      
 ```
 
 > **Brand-dependent:** the marker only renders if the active theme defines the `$ouds-typography-heading-large-marker` flag and a `$ouds-heading-large-marker-img` asset. It is available on Orange and Orange Compact; Sosh does not define a marker image, so `.marker` has no visible effect there.
 
 ## Display
 
-Larger, more opinionated heading styles. **OUDS Web uses named sizes, not numbers.**
+Larger, more opinionated heading styles for impactful content (landing pages, marketing, key messages). Use sparingly. **OUDS Web uses named sizes, not numbers.**
 
 | Class             | Description      |
 | ----------------- | ---------------- |
@@ -76,15 +62,15 @@ Larger, more opinionated heading styles. **OUDS Web uses named sizes, not number
 
      Display small
      
 ```
 
-> **Not Bootstrap:** Bootstrap uses `.display-1` through `.display-6`. OUDS Web uses `.display-large`, `.display-medium`, `.display-small`.
+> **Not Bootstrap:** Bootstrap uses `.display-1` through `.display-6`. OUDS Web uses `.display-large`, `.display-medium`, `.display-small`. With `$enable-bootstrap-compatibility: true`, `.display-1` through `.display-6` are also available.
 
-With `$enable-bootstrap-compatibility: true`, `.display-1` through `.display-6` are also available.
+`.display-large`/`.display-medium`/`.display-small` are equivalent to the font-size text utilities `.fs-dl`/`.fs-dm`/`.fs-ds` (except for `font-weight`) — both also set `line-height`, `letter-spacing`, and `max-width`.
 
 Sass: `$display-font-sizes`, `$display-font-weight`, `$display-font-family`, `$display-font-style`, `$display-line-height`.
 
 ## Body
 
-Regular body text, used for paragraphs, descriptions, and informational messages. Only headings, display headings, and `` text use **bold** by default; body text uses `normal` font-weight (overridable via [font weight utilities](../utilities/text.md)).
+Regular body text, used for paragraphs, descriptions, and informational messages. Only headings, display headings, and `` text use **bold** by default; body text uses `normal` font-weight (overridable via [font weight utilities](../utilities/text.md)). Body medium is set by default on the `:root` element.
 
 | Reference   | Class/Element         |
 | ----------- | --------------------- |
@@ -92,51 +78,22 @@ Regular body text, used for paragraphs, descriptions, and informational messages
 | Body medium | Default `
      `         |
 | Body small  | `.small` or `` |
 
-### Lead
-
 ```html
-
      
-  This is a lead paragraph. It stands out from regular paragraphs.
-
      
-```
+
      This is a lead paragraph. It stands out from regular paragraphs.
      
 
-### Small
+
      This is a regular body paragraph.
      
 
-```html
-
      This is a small paragraph.
      
 
      This is a small paragraph.
      
+
      This is another small paragraph.
      
 ```
 
-`.lead`, default `
      `, and `.small`/`` are equivalent to the font-size text utilities `.fs-bl`, `.fs-bm`, `.fs-bs` — all of them also set `line-height`, `letter-spacing`, and `max-width`.
+`.lead`, default `
      `, and `.small`/`` are equivalent to the font-size text utilities `.fs-bl`, `.fs-bm`, `.fs-bs` — all of them also set `line-height`, `letter-spacing`, and `max-width`. Use the appropriate HTML tag to convey the right semantic meaning (generally a `
      `).
 
-## Inline Text Elements
-
-```html
-
      You can use the mark tag to highlight text.
      
-
      This line of text is meant to be treated as deleted text.
      
-
      This line of text is meant to be treated as no longer accurate.
      
-
      
-  This line of text is meant to be treated as an addition to the
-    document.
-
      
-
      This line of text will render as underlined.
      
-
      This line of text is meant to be treated as fine print.
      
-
      This line rendered as bold text.
      
-
      
-  This line rendered as bold text too, but would natively be
-  italicized.
-
      
-```
-
-Equivalent classes: `.mark`, `.small`, `.text-decoration-underline`, `.text-decoration-line-through`.
-
-> For blockquotes, see [Reboot](../foundation/reboot.md#blockquotes).
+> For other inline text elements (``, ``, ``, ``, ``) and blockquotes, see [Reboot](../foundation/reboot.md).
 
 ## Label
 
-Label is non-responsive text for compact UI components such as buttons, form fields, badges, and tags — single value regardless of breakpoint (non-responsive), unlike Heading/Display/Body (responsive). Four size levels:
+Label is non-responsive text for compact UI components such as buttons, form fields, badges, and tags — single value regardless of breakpoint, unlike Heading/Display/Body (responsive). Four size levels, `normal` font-weight by default:
 
 | Class      | Level          |
 | ---------- | -------------- |
@@ -149,8 +106,6 @@ Label is non-responsive text for compact UI components such as buttons, form fie
 Label medium text
 ```
 
-Label texts use `normal` font-weight by default too.
-
 ## Code
 
 Styles technical content like code snippets, commands, system values, and identifiers, using a monospace typeface. Single size — reserve it for content that genuinely needs a code-like representation.
@@ -177,6 +132,4 @@ if (document.getElementById('myId')) {
 
      
 ```
 
-## Sizing text in custom components
-
-To size text in a custom component, use the `get-font-size()` composite-token mixin — see [Tokens](../foundation/tokens.md#composite-tokens).
+> To size text in a custom component rather than using one of the classes above, use the `get-font-size()` composite-token mixin — see [Tokens](../foundation/tokens.md#composite-tokens).
diff --git a/skills/using-ouds-web-version-major-minor/references/foundation/reboot.md b/skills/using-ouds-web-version-major-minor/references/foundation/reboot.md
index 235a295ad6..9c0bd4b98d 100644
--- a/skills/using-ouds-web-version-major-minor/references/foundation/reboot.md
+++ b/skills/using-ouds-web-version-major-minor/references/foundation/reboot.md
@@ -15,7 +15,7 @@ Element-specific CSS changes providing a consistent baseline. Builds on Normaliz
 - `box-sizing: border-box` globally on all elements (including `::before`/`::after`)
 - No base `font-size` on `` (browser default 16px assumed); `font-size: 1rem` on `:root` children
 - `:root` children set `font-family`, `font-weight`, `line-height`, `color`
-- `background-color` on `:root` children defaults to `#fff`
+- `background-color` on `:root` children set via `--bs-color-bg-primary`
 
 ## Font Stack
 
@@ -32,6 +32,21 @@ Custom fonts loaded from CDN with native font stack as fallback. Font faces gene
 
 `
      `: `margin-top` removed, `margin-bottom` set to `$ouds-space-fixed-medium`. Remove with `.mb-none`.
 
+## Inline Text Elements
+
+```html
+
      You can use the mark tag to highlight text.
      
+
      This line of text is meant to be treated as deleted text.
      
+
      This line of text is meant to be treated as no longer accurate.
      
+
      This line of text is meant to be treated as an addition to the document.
      
+
      This line of text will render as underlined.
      
+
      This line of text is meant to be treated as fine print.
      
+
      This line rendered as bold text.
      
+
      This line rendered as bold text too, but would natively be italicized.
      
+```
+
+Use these tags for semantic purpose: `` (marked/highlighted for reference), `` (side-comments, legal text — uses [body small](../components/typography.md#body)), `` (no longer relevant/accurate), `` (non-textual annotation). To style text without the semantic meaning, use the equivalent classes instead: `.mark`, `.small`, `.text-decoration-underline` (like ``), `.text-decoration-line-through` (like ``). `` and `` remain available for highlighting without added importance / voice & technical terms.
+
 ## Links
 
 - Bold and underlined by default

From 18ce77329f6f1ffbbc08a0c036f259bdb82efd51 Mon Sep 17 00:00:00 2001
From: Hannah Issermann 
Date: Mon, 19 Oct 2026 09:45:44 +0200
Subject: [PATCH 46/52] Update site/data/_components-versions.yml

Co-authored-by: Louis-Maxime Piton 
---
 site/data/_components-versions.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/data/_components-versions.yml b/site/data/_components-versions.yml
index 20dbb4968d..cfee770198 100644
--- a/site/data/_components-versions.yml
+++ b/site/data/_components-versions.yml
@@ -39,7 +39,7 @@
 - name: 'circular-progress-indicator'
   value: '1.2.0'
 - name: 'code'
-  value: '1.0 .0'
+  value: '1.0.0'
 - name: 'display'
   value: '1.0.0'
 - name: 'divider'

From 1b630bea305e5d5eb1244acfe843f7bd607bf653 Mon Sep 17 00:00:00 2001
From: Hannah Issermann 
Date: Mon, 19 Oct 2026 18:09:00 +0200
Subject: [PATCH 47/52] Updates after LM review

---
 .../scss/tokens/_composite.scss               |   2 +-
 packages/orange/scss/tokens/_composite.scss   |   2 +-
 packages/sosh/scss/tokens/_composite.scss     |   2 +-
 scss/_reboot.scss                             |   2 +-
 scss/_typography.scss                         |  18 ++
 scss/_variables.scss                          |   1 +
 site/data/components-details.ts               |   2 +-
 .../content/docs/components/typography.mdx    | 286 +++++++++---------
 .../migration-from-boosted.mdx                |   5 +-
 .../docs/getting-started/migration.mdx        |   6 +-
 .../content/docs/utilities/icons-sizing.mdx   |   6 +-
 11 files changed, 180 insertions(+), 152 deletions(-)

diff --git a/packages/orange-compact/scss/tokens/_composite.scss b/packages/orange-compact/scss/tokens/_composite.scss
index 8dc30c262f..6c04c7a768 100644
--- a/packages/orange-compact/scss/tokens/_composite.scss
+++ b/packages/orange-compact/scss/tokens/_composite.scss
@@ -64,7 +64,7 @@ $ouds-font-family-monospace-stack:
   monospace !default;
 // scss-docs-end ouds-composite-font-monospace
 // scss-docs-start ouds-composite-typography
-// NB: SVG should contain paddings and shouldn't have any `fill` attribute
+// NB: Set here the marker SVG exported from Figma, including paddings, with no `fill` attributes. Set it to null if there is not marker available for this theme.
 $ouds-heading-large-marker-img: url("data:image/svg+xml,") !default;
 $ouds-heading-large-marker-width: 30px !default;
 $ouds-heading-large-marker-height: 12px !default;
diff --git a/packages/orange/scss/tokens/_composite.scss b/packages/orange/scss/tokens/_composite.scss
index 76846afdd8..71180641b7 100644
--- a/packages/orange/scss/tokens/_composite.scss
+++ b/packages/orange/scss/tokens/_composite.scss
@@ -64,7 +64,7 @@ $ouds-font-family-monospace-stack:
   monospace !default;
 // scss-docs-end ouds-composite-font-monospace
 // scss-docs-start ouds-composite-typography
-// NB: SVG should contain paddings and shouldn't have any `fill` attribute
+// NB: Set here the marker SVG exported from Figma, including paddings, with no `fill` attributes. Set it to null if there is not marker available for this theme.
 $ouds-heading-large-marker-img: url("data:image/svg+xml,") !default;
 $ouds-heading-large-marker-width: 30px !default;
 $ouds-heading-large-marker-height: 12px !default;
diff --git a/packages/sosh/scss/tokens/_composite.scss b/packages/sosh/scss/tokens/_composite.scss
index 89ba5b2d3f..1bca288afa 100644
--- a/packages/sosh/scss/tokens/_composite.scss
+++ b/packages/sosh/scss/tokens/_composite.scss
@@ -55,7 +55,7 @@ $ouds-font-family-monospace-stack:
   monospace !default;
 // scss-docs-end ouds-composite-font-monospace
 // scss-docs-start ouds-composite-typography
-// NB: SVG should contain paddings and shouldn't have any `fill` attribute
+// NB: Set here the marker SVG exported from Figma, including paddings, with no `fill` attributes. Set it to null if there is not marker available for this theme.
 $ouds-heading-large-marker-img: null !default;
 $ouds-heading-large-marker-width: 0 !default;
 $ouds-heading-large-marker-height: 0 !default;
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 7e93197617..6a6e05e6a2 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -275,7 +275,7 @@ blockquote {
 blockquote + .blockquote-footer {
   margin-top: -$ouds-space-fixed-medium;
   margin-bottom: $ouds-space-fixed-medium;
-  @include get-font-size("body-small"); // OUDS mod: instead of `font-size: $blockquote-footer-font-size`
+  @include get-font-size("body-small");
   color: $blockquote-footer-color;
 
   &::before {
diff --git a/scss/_typography.scss b/scss/_typography.scss
index 7088fbf380..453701cf8f 100644
--- a/scss/_typography.scss
+++ b/scss/_typography.scss
@@ -85,3 +85,21 @@
     margin-right: $list-inline-padding;
   }
 }
+
+//
+// Misc
+//
+
+// Blockquotes
+// deprecated in OUDS Web v1.6
+.blockquote {
+  margin-bottom: $blockquote-margin-y;
+
+  > p {
+    @include get-font-size("body-large");
+  }
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+}
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 80706fff2e..3552893510 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -747,6 +747,7 @@ $text-muted:                  var(--#{$prefix}secondary-color) !default; // Depr
 
 // OUDS mod: no $initialism-font-size
 
+$blockquote-margin-y:         $ouds-space-fixed-medium !default; // OUDS mod: instead of `1rem`
 // OUDS mod: no `$blockquote-font-size`
 $blockquote-footer-color:     var(--#{$prefix}color-content-muted) !default; // OUDS mod: instead of `$gray-600`
 // OUDS mod: no `$blockquote-footer-font-size`
diff --git a/site/data/components-details.ts b/site/data/components-details.ts
index 698760d44a..febab47521 100644
--- a/site/data/components-details.ts
+++ b/site/data/components-details.ts
@@ -101,7 +101,7 @@ export const componentsDetails: ComponentCardData[] = [
     category: 'Content display',
     snippet: `
       
-        Hello World!
+        Code
       `
   },
   {
diff --git a/site/src/content/docs/components/typography.mdx b/site/src/content/docs/components/typography.mdx
index b7c94320aa..3b3e539e89 100644
--- a/site/src/content/docs/components/typography.mdx
+++ b/site/src/content/docs/components/typography.mdx
@@ -63,20 +63,20 @@ export const screenSize = [
     
      
       
      
         
      
-          
      Heading
      
+          
      Display
      
         
      
       
      
-      
      Heading  is a UI element that styles typography to structure content and define the hierarchy of information within an interface.
      
+      
      Display is a UI element that styles typography for impactful content like landing pages, marketing campaigns, and key messages.
      
     
      
   
   
    1. 
     
      
       
      
         
      
-          
      Display
      
+          
      Heading
      
         
      
       
      
-      
      Display is a UI element that styles typography for impactful content like landing pages, marketing campaigns, and key messages.
      
+      
      Heading is a UI element that styles typography to structure content and define the hierarchy of information within an interface.
      
     
      
   
      2. 
   
    2. 
@@ -103,7 +103,7 @@ export const screenSize = [
     
      
       
      
         
      
-          document.getElementById('HelloWorld')
+          Code
         
      
       
      
       
      Code is a UI element that styles typography for technical content like code snippets, commands, system values, and identifiers.
      
@@ -111,18 +111,126 @@ export const screenSize = [
   
      3. 
 

 
-### Accessibility
+### Approach
 
+Typography elements are provided as components that include the `font-family`, `font-size`, `line-height`, `letter-spacing`, `max-width`, and for some of them, `font-weight`. However, certain elements can be modified using our utilities. Take a look at our [font weight utilities]([[docsref:/utilities/text#font-weight]]), [icon sizing utilities]([[docsref:/utilities/icons-sizing]]), [color utilities]([[docsref:/utilities/color]]), and the `.mw-none` class in [width utilities]([[docsref:/utilities/sizing]]).
+
+### Accessibility
 
 To ensure accessibility, make sure you choose the HTML tags you use, based on their **semantic meaning**; whether it is a heading, plain text, or a snippet of code, you should not use the same tag, regardless of how it appears on screen. Each tag conveys its own semantic meaning, which is communicated to screen readers.
 
+## [[comp]] Display
+
+Display is a UI element that styles typography for impactful content like landing pages, marketing campaigns, and key messages.
+
+The display features large type sizes that capture attention and create strong visual emphasis. Variants automatically adjust across breakpoints to maintain a consistent visual hierarchy on all screen sizes. Use it sparingly to preserve its impact and effectiveness.
+
+Display has three size levels: large, medium, and small. Each one sets `font-size`, and also `line-height`, `letter-spacing`, `font-weight: bold`, and `max-width`.
+
+Please note that:
+- You have to use the appropriate HTML tag to convey the right semantic meaning.
+- The `.display-*` classes are equivalent to the [font size text utilities]([[docsref:/utilities/text#font-size]]) `.fs-dl`, `.fs-dm`, and `.fs-ds`, 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]]).
+- You should not use any icon with our `.display-*` font sizes, because we prefer to keep the place for the text.
+
+Here are the associated `font-size`s depending on the breakpoints:
+
+

+  
+    
+      
+        
+        
+        
+        
+      
+    
+    
+    {
+      displayLevel.map((level) => (
+      
+        
+        {
+          screenSize.map((size) => (
+            
+            ))
+        }
+      
+      ))
+    }
+    
+  
Display referenceFont 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'}))}
+        
+              {(getTokenValue(`$ouds-font-size-${level}-${size}`).slice(0, -2)) / 16}rem ({getTokenValue(`$ouds-font-size-${level}-${size}`)})
+            

+

+
+

+  See more details about the display classes
+
+  

+    
+      
+        
+          
+          
+          
+          
+        
+      
+      
+      {
+        displayLevel.map((level) => (
+          
+            
+            {
+              screenSize.map((size) => (
+                
+              ))
+            }
+          
+        ))
+      }
+      
+    
Display referenceFont 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'}))}
+            
+                  
    
+                    
  • font-size: {(getTokenValue(`$ouds-font-size-${level}-${size}`).slice(0, -2)) / 16}rem
    • 
+                    
  • line-height: {Math.round(((getTokenValue(`$ouds-font-line-height-${level}-${size}`).slice(0, -2)) / (getTokenValue(`$ouds-font-size-${level}-${size}`).slice(0, -2))) * 10000) / 10000}
    • 
+                    
  • letter-spacing: {(getTokenValue(`$ouds-font-letter-spacing-${level}-${size}`).slice(0, -2)) / 16}rem
    • 
+                    
  • max-width: {(getTokenValue(`$ouds-size-max-width-${level}-${size}`).slice(0, -2)) / 16}rem
    • 
+                  

+                

+  

+

+
+Display large

+
+  
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 class sets `font-size`, and also `line-height`, `letter-spacing`, `font-weight: bold`, and `max-width`. If you want to get rid of the `max-width`, use our `.mw-none` [width utility]([[docsref:/utilities/sizing]]). Here are the associated `font-size`s depending on the breakpoints.
+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.
+
+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]]).
+- 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:
 
 

   
@@ -160,7 +268,6 @@ All HTML headings, `
` through `
`, are available. Each class sets `font-s
   

 

 
-
 

   See more details about the heading classes
 
@@ -218,8 +325,6 @@ All HTML headings, `
` through `
`, are available. Each class sets `font-s
 
   
h6. OUDS Web heading
`} />
 
-`.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.
-
 h2. OUDS Web heading looking like h1

 
   
h3. OUDS Web heading looking like h2

@@ -232,127 +337,37 @@ All HTML headings, `
` through `
`, are available. Each class sets `font-s
 
   
h2. OUDS Web heading looking like h6
`} />
 
-Please note that:
-- The `.h1` to `.h6` 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`. Like heading tags and classes, they set the `font-size`, but also the `line-height`, the `letter-spacing` and the `max-width`.
-- 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.
-- You can easily add an icon with your headings using our [heading icon size utilities]([[docsref:/utilities/icons-sizing#headings]]).
-
 
 ### 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`.
+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.
 
 h2. OUDS Web heading with marker

 
   
h3. OUDS Web heading looking like h2 with marker
`} />
 
 
-## [[comp]] Display
-
-Display is a UI element that styles typography for impactful content like landing pages, marketing campaigns, and key messages.
-
-The display features large type sizes that capture attention and create strong visual emphasis. Variants automatically adjust across breakpoints to maintain a consistent visual hierarchy on all screen sizes. Use it sparingly to preserve its impact and effectiveness.
-
-We provide `.display-*` from `large` through `small`. Each class sets `font-size`, and also `line-height`, `letter-spacing`, `font-weight: bold`, and `max-width`. If you want to get rid of the `max-width`, please make sure to use our `.mw-none` [width utility]([[docsref:/utilities/sizing]]). Here are the associated `font-size`s depending on the breakpoints.
-
-

-  
-    
-      
-        
-        
-        
-        
-      
-    
-    
-    {
-      displayLevel.map((level) => (
-      
-        
-        {
-          screenSize.map((size) => (
-            
-            ))
-        }
-      
-      ))
-    }
-    
-  
Display referenceFont 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'}))}
-        
-              {(getTokenValue(`$ouds-font-size-${level}-${size}`).slice(0, -2)) / 16}rem ({getTokenValue(`$ouds-font-size-${level}-${size}`)})
-            

-

-
-

-  See more details about the display classes
-
-  

-    
-      
-        
-          
-          
-          
-          
-        
-      
-      
-      {
-        displayLevel.map((level) => (
-          
-            
-            {
-              screenSize.map((size) => (
-                
-              ))
-            }
-          
-        ))
-      }
-      
-    
Display referenceFont 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'}))}
-            
-                  
    
-                    
  • font-size: {(getTokenValue(`$ouds-font-size-${level}-${size}`).slice(0, -2)) / 16}rem
    • 
-                    
  • line-height: {Math.round(((getTokenValue(`$ouds-font-line-height-${level}-${size}`).slice(0, -2)) / (getTokenValue(`$ouds-font-size-${level}-${size}`).slice(0, -2))) * 10000) / 10000}
    • 
-                    
  • letter-spacing: {(getTokenValue(`$ouds-font-letter-spacing-${level}-${size}`).slice(0, -2)) / 16}rem
    • 
-                    
  • max-width: {(getTokenValue(`$ouds-size-max-width-${level}-${size}`).slice(0, -2)) / 16}rem
    • 
-                  

-                

-  

-

-
-Display large
-
-  
Display medium

-
-  
Display small
`} />
-
-Please note that:
-- The `.display-large` to `.display-small` classes are equivalent to the [font size text utilities]([[docsref:/utilities/text#font-size]]) `.fs-dl`, `.fs-dm`, and `.fs-ds`, except for the `font-weight`. Like display classes, they set not only the `font-size`, but also the `line-height`, the `letter-spacing`, and the `max-width`.
-- You have to use the appropriate HTML tag to convey the right semantic meaning.
-- You should not use any icon with our `.display-*` font sizes, because we prefer to keep the place for the text.
-
 ## [[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.
 
-Regular body text forms the core of your content. Body text has three size levels: large (for emphasis), medium (default), and small (for supporting information). Each class sets `font-size`, `line-height`, `letter-spacing`, and `max-width`. To remove the `max-width`, use the `.mw-none` [width utility]([[docsref:/utilities/sizing]]). Body texts use `font-weight: normal` by default, but can use other font weights as needed through our [font weight utilities]([[docsref:/utilities/text#font-weight]]).
+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 texts use `font-weight: normal` by default
+
+Please note that:
+- You have to use the appropriate HTML tag to convey the right semantic meaning, generally a `
`.
+- 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]]).
+- You can easily add an icon with your body texts using our [body text icon size utilities]([[docsref:/utilities/icons-sizing#body]]).
 
 
   By default, body medium is set on the `:root` element, and the `max-width` property is applied to `
` elements.
 
 
+Here are the associated `font-size`s depending on the breakpoints:
+
 

   
@@ -368,9 +383,9 @@ Regular body text forms the core of your content. Body text has three size level
       textLevel.map((level) => (
       
         {
           screenSize.map((size) => (
@@ -403,9 +418,9 @@ Regular body text forms the core of your content. Body text has three size level
         textLevel.map((level) => (
         
           {
             screenSize.map((size) => (
@@ -428,19 +443,18 @@ Regular body text forms the core of your content. Body text has three size level
 
-    This is a lead paragraph. It stands out from regular paragraphs.
+    This is a body large paragraph. It stands out from regular paragraphs.
   

 
-  
This is a regular body paragraph.

+  

+    This is another body large paragraph.
+  

 
-  
This is a small paragraph.

+  
This is a regular body medium paragraph.

 
-  
This is another small paragraph.
`} />
+  
This is a body small paragraph.

 
-Please note that:
-- 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`. Like body texts, they set the `font-size`, but also the `line-height`, the `letter-spacing` and the `max-width`.
-- You have to use the appropriate HTML tag to convey the right semantic meaning, generally a `
`.
-- You can easily add an icon with your body texts using our [body text icon size utilities]([[docsref:/utilities/icons-sizing#body-texts]]).
+  
This is another body small paragraph.
`} />
 
 ## [[comp]] Label
 
@@ -448,7 +462,14 @@ Label is a UI element that styles typography for compact interface components su
 
 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 class sets `font-size`, `line-height`, `letter-spacing`, and `max-width`. To remove the `max-width`, use the `.mw-none` [width utility]([[docsref:/utilities/sizing]]). Label texts use `font-weight: normal` by default, but can use other font weights as needed through our [font weight utilities]([[docsref:/utilities/text#font-weight]]).
+Labels have four size levels: xlarge, large, medium, and small. Each one sets `font-size`, `line-height`, `letter-spacing`, and `max-width`.
+
+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:
 
 

   

     

         
-          {level === 'body-large' && (<>Body large ({'.lead'}))}
-          {level === 'body-medium' && (<>Body medium (default {'
'}))}
-          {level === 'body-small' && (<>Body small ({'.small'} or {''}))}
+          {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))}
         

           
-            {level === 'body-large' && (<>Body large ({'.lead'}))}
-            {level === 'body-medium' && (<>Body medium (default {'
'}))}
-            {level === 'body-small' && (<>Body small ({'.small'} or {''}))}
+            {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))}
           

 
 

@@ -530,29 +551,16 @@ Labels have four size levels: xlarge, large, medium, and small. Each class sets
 
   
Label small text
`} />
 
-Please note that you have to use the appropriate HTML tag to convey the right semantic meaning.
-
 ## [[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.
 
-### Inline code
 
 Use the `` element to mark short code snippets within text. The `` element uses the monospace code font stack and is styled to stand out from surrounding text.
 
 <section> should be wrapped as inline.`} />
 
-### Code blocks
-
-Use `
` for displaying multiple lines of code. The `
` element preserves whitespace and formatting, particularly indentation, while the `` element marks the content as code.
 
-
-  if (document.getElementById('myId')) {
-    document.getElementById('myId').addEventListener('click', () => {
-      ...
-    })
-  }
-
`} />
 
diff --git a/site/src/content/docs/getting-started/migration-from-boosted.mdx b/site/src/content/docs/getting-started/migration-from-boosted.mdx
index 2bdcc76290..b37ea5f25e 100644
--- a/site/src/content/docs/getting-started/migration-from-boosted.mdx
+++ b/site/src/content/docs/getting-started/migration-from-boosted.mdx
@@ -36,7 +36,6 @@ Let’s start with the most obvious change you’ll notice: the name. **Boosted
   - `boosted.esm.min.js` → `ouds-web.esm.min.js`
   - `boosted.js` → `ouds-web.js`
   - `boosted.min.js` → `ouds-web.min.js`
-- The SCSS file `_type.scss` has been renamed to `_typography.scss` for more consistency.
 
 From now on, OUDS Web won’t embed Bootstrap elements that are not part of Orange Unified Design System. However, you can still use our Bootstrap compatibility mode by using `ouds-web-bootstrap.css` and `ouds-web-bootstrap.min.css`.
 
@@ -77,7 +76,7 @@ Read more about the [font stack]([[docsref:/foundation/reboot#font-stack]]) for
 
 - Breaking Abbreviation class `.initialism` has been removed.
 
-- Breaking `.blockquote` class has been removed, you can still use `
` instead. Read more in our [reboot page]([[docsref:/foundation/reboot]]).
+- Warning `.blockquote` class has been deprecated, you can use `
` instead. Read more in our [reboot page]([[docsref:/foundation/reboot]]).
 
 - Warning Default spacing values now use `px`s instead of `em`s for fixed component spacing, to keep as much space as possible for meaningful content on zoom.
 
@@ -905,6 +904,8 @@ See [our new Text Area page]([[docsref:/components/text-area]]) for more informa
 
 - Warning `scss/mixins/_alert.scss` doesn’t exist anymore. If you were importing it in your project, please make sure to remove it.
 
+- Breaking `scss/_type.scss` has been renamed to `scss/_typography.scss`. If you were importing it in your project, please make sure to update it accordingly.
+
 - Warning `scss/vendor/_rfs.scss` has been removed. It was deprecated and should not have been used.
 
 - Breaking `font-size()` mixin has been removed. Please refer to `get-font-size()` mixin instead.
diff --git a/site/src/content/docs/getting-started/migration.mdx b/site/src/content/docs/getting-started/migration.mdx
index 1b90d0ef58..a6142df056 100644
--- a/site/src/content/docs/getting-started/migration.mdx
+++ b/site/src/content/docs/getting-started/migration.mdx
@@ -73,11 +73,11 @@ toc: true
 
 ### Sass
 
-- Warning `_type.scss` has been renamed to `_typography.scss` for more consistency. You will need to change this name if you create your own custom import.
+- Breaking `_type.scss` has been renamed to `_typography.scss` for more consistency. You will need to change this name if you create your own custom import.
 
 ### Reboot
 
-- Breaking `.blockquote` class has been removed, you can still use `
` instead. Read more in our [reboot page]([[docsref:/foundation/reboot]]).
+- Warning `.blockquote` class has been deprecated, you can use `
` instead. Read more in our [reboot page]([[docsref:/foundation/reboot]]).
 
 ### Dual mode
 
@@ -212,7 +212,7 @@ toc: true
 
 #### Text
 
-- New Labels have been added to font size text utilities : `.fs-lxl`, `.fs-ll`, `.fs-lm`, `.fs-ls` are now available. Read more in our [typography page]([[docsref:utilities/text#font-size]]).
+- New Labels have been added to font size text utilities: `.fs-lxl`, `.fs-ll`, `.fs-lm`, `.fs-ls` are now available. Read more in our [text utilities page]([[docsref:utilities/text#font-size]]).
 
 ### CSS and Sass variables
 
diff --git a/site/src/content/docs/utilities/icons-sizing.mdx b/site/src/content/docs/utilities/icons-sizing.mdx
index 2fe5849043..95485d2a11 100644
--- a/site/src/content/docs/utilities/icons-sizing.mdx
+++ b/site/src/content/docs/utilities/icons-sizing.mdx
@@ -68,7 +68,7 @@ Every icon size utility class presented in here has the common following code:
 
 
 
-## Headings
+## Heading
 
 Here are the rules to follow for [headings]([[docsref:/components/typography#heading]]). These icons’ sizes are responsive.
 
@@ -254,11 +254,11 @@ Here are the rules to follow for [headings]([[docsref:/components/typography#hea
     
H6 with small icon

   `} />
 
-## Display texts
+## Display
 
 You should not use any icon with our [display texts]([[docsref:/components/typography#display]]), because we prefer to keep the place for the text.
 
-## Body texts
+## Body
 
 Here are the rules to follow for [body texts]([[docsref:/components/typography#body]]). These icons’ sizes are responsive.
 

From 62a2689d9478af2f9e13e3d823575ee74d7e869a Mon Sep 17 00:00:00 2001
From: Hannah Issermann 
Date: Tue, 20 Oct 2026 11:30:48 +0200
Subject: [PATCH 48/52] css snapshots

---
 .../__snapshots__/ouds-web-bootstrap.css           | 14 ++++++++++++++
 .../snapshot-tests/__snapshots__/ouds-web.css      | 14 ++++++++++++++
 2 files changed, 28 insertions(+)

diff --git a/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css b/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css
index 47ea3567e9..b98a4b0480 100644
--- a/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css
+++ b/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css
@@ -1745,6 +1745,20 @@ h2.marker::after,
   margin-right: 0.25rem;
 }
 
+.blockquote {
+  margin-bottom: 16px;
+}
+.blockquote > p {
+  max-width: var(--bs-font-max-width-body-large);
+  font-size: var(--bs-font-size-body-large);
+  line-height: var(--bs-font-line-height-body-large);
+  /* rtl:remove */
+  letter-spacing: var(--bs-font-letter-spacing-body-large);
+}
+.blockquote > :last-child {
+  margin-bottom: 0;
+}
+
 .img-fluid {
   max-width: 100%;
   height: auto;
diff --git a/scss/tests/snapshot-tests/__snapshots__/ouds-web.css b/scss/tests/snapshot-tests/__snapshots__/ouds-web.css
index 162e7cfca9..d5087c3839 100644
--- a/scss/tests/snapshot-tests/__snapshots__/ouds-web.css
+++ b/scss/tests/snapshot-tests/__snapshots__/ouds-web.css
@@ -1526,6 +1526,20 @@ h2.marker::after,
   margin-right: 0.25rem;
 }
 
+.blockquote {
+  margin-bottom: 16px;
+}
+.blockquote > p {
+  max-width: var(--bs-font-max-width-body-large);
+  font-size: var(--bs-font-size-body-large);
+  line-height: var(--bs-font-line-height-body-large);
+  /* rtl:remove */
+  letter-spacing: var(--bs-font-letter-spacing-body-large);
+}
+.blockquote > :last-child {
+  margin-bottom: 0;
+}
+
 .img-fluid {
   max-width: 100%;
   height: auto;

From 1f49605b02274a677daffac5a96d7874081d66a0 Mon Sep 17 00:00:00 2001
From: Hannah Issermann 
Date: Wed, 21 Oct 2026 14:42:05 +0200
Subject: [PATCH 49/52] Update reboot after LM review + skills

---
 .../token-system/references/architecture.md   |  1 +
 .github/skills/validate-tokens/SKILL.md       |  2 +-
 scss/_reboot.scss                             |  5 +-
 scss/_typography.scss                         |  2 +-
 scss/_variables.scss                          |  5 -
 .../__snapshots__/ouds-web-bootstrap.css      |  6 +-
 .../snapshot-tests/__snapshots__/ouds-web.css |  6 +-
 .../content/docs/components/typography.mdx    | 16 ++-
 site/src/content/docs/foundation/reboot.mdx   | 98 +++++++------------
 .../migration-from-boosted.mdx                |  4 +-
 .../docs/getting-started/update-guide.mdx     |  2 +-
 .../references/foundation/reboot.md           |  8 +-
 .../getting-started/update-guide.md           |  2 +-
 13 files changed, 66 insertions(+), 91 deletions(-)

diff --git a/.github/skills/token-system/references/architecture.md b/.github/skills/token-system/references/architecture.md
index 7ccfcc1b2c..e6aaeb296e 100644
--- a/.github/skills/token-system/references/architecture.md
+++ b/.github/skills/token-system/references/architecture.md
@@ -34,6 +34,7 @@ Figma (design decisions)
 - Font-family stack strings
 - Embedded SVG icon data URIs
 - Sass maps
+- Heading marker SVG and dimensions (`$ouds-heading-large-marker-img/-width/-height`, set to `null` for a brand without a marker)
 
 ---
 
diff --git a/.github/skills/validate-tokens/SKILL.md b/.github/skills/validate-tokens/SKILL.md
index ab2a9ed309..ed8720bf56 100644
--- a/.github/skills/validate-tokens/SKILL.md
+++ b/.github/skills/validate-tokens/SKILL.md
@@ -21,7 +21,7 @@ Read all 3 files and extract `$ouds-*` definitions:
 
 ## Step 2 — Identify component SCSS files
 
-All `scss/_*.scss` + `scss/forms/_*.scss`, excluding: `_variables.scss`, `_config.scss`, `_functions.scss`, `_mixins.scss`, `_maps.scss`, `_root.scss`, `_reboot.scss`, `_utilities.scss`, `_helpers.scss`, `_grid.scss`, `_containers.scss`, `_images.scss`, `_type.scss`, `_transitions.scss`, `_forms.scss`, `_variables-dark.scss`
+All `scss/_*.scss` + `scss/forms/_*.scss`, excluding: `_variables.scss`, `_config.scss`, `_functions.scss`, `_mixins.scss`, `_maps.scss`, `_root.scss`, `_reboot.scss`, `_utilities.scss`, `_helpers.scss`, `_grid.scss`, `_containers.scss`, `_images.scss`, `_transitions.scss`, `_forms.scss`, `_variables-dark.scss`
 
 ---
 
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 6a6e05e6a2..11ef4812e6 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -272,11 +272,12 @@ blockquote {
   }
 }
 
-blockquote + .blockquote-footer {
+.blockquote-footer, // deprecated in OUDS Web v1.6
+blockquote + figcaption {
   margin-top: -$ouds-space-fixed-medium;
   margin-bottom: $ouds-space-fixed-medium;
   @include get-font-size("body-small");
-  color: $blockquote-footer-color;
+  color: var(--#{$prefix}color-content-muted);
 
   &::before {
     content: "\2014\00A0"; // em dash, nbsp
diff --git a/scss/_typography.scss b/scss/_typography.scss
index 453701cf8f..6219735e54 100644
--- a/scss/_typography.scss
+++ b/scss/_typography.scss
@@ -93,7 +93,7 @@
 // Blockquotes
 // deprecated in OUDS Web v1.6
 .blockquote {
-  margin-bottom: $blockquote-margin-y;
+  margin-bottom: $ouds-space-fixed-medium;
 
   > p {
     @include get-font-size("body-large");
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 3552893510..ebb5d65bc0 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -747,11 +747,6 @@ $text-muted:                  var(--#{$prefix}secondary-color) !default; // Depr
 
 // OUDS mod: no $initialism-font-size
 
-$blockquote-margin-y:         $ouds-space-fixed-medium !default; // OUDS mod: instead of `1rem`
-// OUDS mod: no `$blockquote-font-size`
-$blockquote-footer-color:     var(--#{$prefix}color-content-muted) !default; // OUDS mod: instead of `$gray-600`
-// OUDS mod: no `$blockquote-footer-font-size`
-
 $hr-margin-y:                 $ouds-space-fixed-medium !default; // OUDS mod: instead of `$spacer !default;`
 $hr-color:                    $ouds-color-border-default !default; // OUDS mod: instead of `inherit !default;`
 
diff --git a/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css b/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css
index b98a4b0480..150ee8356b 100644
--- a/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css
+++ b/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css
@@ -1252,7 +1252,8 @@ blockquote > :last-child {
   margin-bottom: 0;
 }
 
-blockquote + .blockquote-footer {
+.blockquote-footer,
+blockquote + figcaption {
   margin-top: -16px;
   margin-bottom: 16px;
   max-width: var(--bs-font-max-width-body-small);
@@ -1262,7 +1263,8 @@ blockquote + .blockquote-footer {
   letter-spacing: var(--bs-font-letter-spacing-body-small);
   color: var(--bs-color-content-muted);
 }
-blockquote + .blockquote-footer::before {
+.blockquote-footer::before,
+blockquote + figcaption::before {
   content: "— ";
 }
 
diff --git a/scss/tests/snapshot-tests/__snapshots__/ouds-web.css b/scss/tests/snapshot-tests/__snapshots__/ouds-web.css
index d5087c3839..614fd39d7c 100644
--- a/scss/tests/snapshot-tests/__snapshots__/ouds-web.css
+++ b/scss/tests/snapshot-tests/__snapshots__/ouds-web.css
@@ -1087,7 +1087,8 @@ blockquote > :last-child {
   margin-bottom: 0;
 }
 
-blockquote + .blockquote-footer {
+.blockquote-footer,
+blockquote + figcaption {
   margin-top: -16px;
   margin-bottom: 16px;
   max-width: var(--bs-font-max-width-body-small);
@@ -1097,7 +1098,8 @@ blockquote + .blockquote-footer {
   letter-spacing: var(--bs-font-letter-spacing-body-small);
   color: var(--bs-color-content-muted);
 }
-blockquote + .blockquote-footer::before {
+.blockquote-footer::before,
+blockquote + figcaption::before {
   content: "— ";
 }
 
diff --git a/site/src/content/docs/components/typography.mdx b/site/src/content/docs/components/typography.mdx
index 3b3e539e89..91593d76d1 100644
--- a/site/src/content/docs/components/typography.mdx
+++ b/site/src/content/docs/components/typography.mdx
@@ -125,7 +125,7 @@ Display is a UI element that styles typography for impactful content like landin
 
 The display features large type sizes that capture attention and create strong visual emphasis. Variants automatically adjust across breakpoints to maintain a consistent visual hierarchy on all screen sizes. Use it sparingly to preserve its impact and effectiveness.
 
-Display has three size levels: large, medium, and small. Each one sets `font-size`, and also `line-height`, `letter-spacing`, `font-weight: bold`, and `max-width`.
+Display has three size levels: large, medium, and small. Each one sets `font-size`, and also `line-height`, `letter-spacing`, `font-weight: bold`, and `max-width`. Display 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.
@@ -222,12 +222,13 @@ Heading is a UI element that styles typography to structure content and define t
 
 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.
+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:
@@ -353,13 +354,14 @@ Body is a UI element that styles typography for common text content like paragra
 
 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 texts use `font-weight: normal` by default
+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 `
`.
 - 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]]).
 
 
@@ -462,7 +464,7 @@ Label is a UI element that styles typography for compact interface components su
 
 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`.
+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 `
`.
@@ -557,10 +559,6 @@ Code element is a UI element that styles typography for technical content like c
 
 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 and is styled to stand out from surrounding text.
+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/foundation/reboot.mdx b/site/src/content/docs/foundation/reboot.mdx
index 00b01dfff8..82699212b9 100644
--- a/site/src/content/docs/foundation/reboot.mdx
+++ b/site/src/content/docs/foundation/reboot.mdx
@@ -18,7 +18,7 @@ import { getTokenValue } from '@libs/sass-variables'
 
 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.
 
-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 stylised lists using classes such as `.bullet-list` or `.bullet-list-default-color`.
+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`.
 
 Reboot follows these guidelines:
 
@@ -30,7 +30,7 @@ Reboot follows these guidelines:
 
 ### CSS variables
 
-Every OUDS Web (like `ouds-web.css`, `ouds-web-reboot.css`, or `ouds-web-grid.css`) CSS bundle includes `_root.scss`, which defines root-level [CSS variables]([[docsref:/foundation/css-variables]]) (also called custom properties). These variables are generated from Sass variables, so you can customize styles with Sass at build time or with CSS variables at runtime.
+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:
 
@@ -57,22 +57,25 @@ Reboot sets consistent defaults for the page:
 ### Font stack
 OUDS Web loads custom brand fonts from a CDN, to ensure optimum text rendering on every device and OS, and to benefit from the browser's cache.
 
-If a custom font is unavailable, OUDS Web uses a system font stack for clear text rendering across devices. The stack is defined here:
+If a custom font is unavailable, OUDS Web uses a system font stack for clear text rendering across devices. This stack is applied globally and defined here:
 
 
 
-This stack is applied globally. To change it, update `$font-family-base` and rebuild OUDS Web.
+
 
 Font-face rules are generated in `_root.scss` from the `$custom-font-cdn-urls` map. Update the URLs if you host the fonts elsewhere.
 
-Code elements use the monospace stack below. To change it, update `$font-family-code` and rebuild OUDS Web.
+Code elements use the monospace stack below:
 
 
 
+## Headings
+
+All heading elements—`
`—`
` have their `margin-top` removed, margin-bottom: {getTokenValue('$ouds-space-fixed-medium')} set, and `line-height` tightened. While headings inherit their `color` by default, you can also override it via optional CSS variable, `--bs-heading-color`. `
`—`
` elements are associated to [heading typography]([[docsref:/components/typography#heading]]). If you want to get rid of the `margin-bottom`, please use to use our `.mw-none` [width utility]([[docsref:/utilities/sizing]]).
 
 ## Paragraphs
 
-All `
` elements have their `margin-top` removed and margin-bottom: {getTokenValue('$ouds-space-fixed-medium')} set for easy spacing. If you want to get rid of the `margin-bottom`, please make sure to use our `.mb-none` [spacing utilities]([[docsref:/utilities/spacing]]).
+All `
` elements have their `margin-top` removed and margin-bottom: {getTokenValue('$ouds-space-fixed-medium')} set for easy spacing. `
` uses [body medium typography]([[docsref:/components/typography#body]]). If you want to get rid of the `margin-bottom`, please use to use our `.mw-none` [width utility]([[docsref:/utilities/sizing]]).
 
 This is an example paragraph which is long enough so it’s easy to see and compare the max-width in action and compare it to the one below.

   
This is an example paragraph which is long enough so it’s easy to see and compare the max-width in action and compare it to the one above.

@@ -156,37 +159,6 @@ For simpler styling, clear hierarchy, and better spacing, description lists have
     
Definition for this other term.

   `} />
 
-
-### Description list alignment
-{/* TODO See if we keep it: its just some tips to use our utilities, I don't think this is very useful here */}
-
-Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic mixins). For longer terms, you can optionally add a `.text-truncate` class to truncate the text with an ellipsis.
-
-
-    
Description lists

-    
A description list is perfect for defining terms.

-
-    
Term

-    

-      
Definition for the term.

-      
And some more placeholder definition text.

-    

-
-    
Another term

-    
This definition is short, so no extra paragraphs or anything.

-
-    
Truncated term is truncated

-    
This can be useful when space is tight. Adds an ellipsis at the end.

-
-    
Nesting

-    

-      

-        
Nested definition list

-        
I heard you like definition lists. Let me put a definition list inside your definition list.

-      

-    

-  `} />
-
 ## Inline text elements
 
 Styling for common inline HTML5 elements.
@@ -203,7 +175,7 @@ Styling for common inline HTML5 elements.
 Beware that those tags should be used for semantic purpose:
 
 - `` represents text which is marked or highlighted for reference or notation purposes.
-- `` represents side-comments and small print, like copyright and legal text. It uses [Regular text](#regular-texts) body small.
+- `` represents side-comments and small print, like copyright and legal text. It uses [body small typography]([[docsref:/components/typography#body]]).
 - `` represents element that are no longer relevant or no longer accurate.
 - `` represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation.
 
@@ -218,6 +190,8 @@ While not shown above, feel free to use `` and `` in HTML5. `` is meant
 
 ## Code
 
+`` element uses [code typography]([[docsref:/components/typography#code]]).
+
 ### Inline code
 
 Wrap inline snippets of code with ``. Be sure to escape HTML angle brackets.
@@ -232,6 +206,25 @@ Use `
`s for multiple lines of code. Once again, be sure to escape any angle
   <p>And another line of sample text here...</p>
   
`} />
 
+### Variables
+
+For indicating variables use the `` tag.
+
+y = mx + b`} />
+
+### User input
+
+Use the `` to indicate input that is typically entered via keyboard.
+
+cd followed by the name of the directory.

+  To edit settings, press Ctrl + ,`} />
+
+### Sample output
+
+For indicating sample output from a program use the `` tag.
+
+This text is meant to be treated as sample output from a computer program.`} />
+
 ## Tables
 
 Tables are slightly adjusted to style `
`s, collapse borders, and ensure consistent `text-align` throughout. Additional changes for borders, padding, and more come with [the `.table` class]([[docsref:/components/table]]).
@@ -413,25 +406,6 @@ Reboot includes an enhancement for `role="button"` to change the default cursor
 
 Non-button element button`} />
 
-## Variables
-
-For indicating variables use the `` tag.
-
-y = mx + b`} />
-
-## User input
-
-Use the `` to indicate input that is typically entered via keyboard.
-
-cd followed by the name of the directory.

-  To edit settings, press Ctrl + ,`} />
-
-## Sample output
-
-For indicating sample output from a program use the `` tag.
-
-This text is meant to be treated as sample output from a computer program.`} />
-
 ## Address
 
 The `
` element is updated to reset the browser default `font-style` from `italic` to `normal`. `line-height` is also now inherited, and margin-bottom: {getTokenValue('$ouds-space-fixed-medium')} has been added. `
`s are for presenting contact information for the nearest ancestor (or an entire body of work). Preserve formatting by ending lines with `
`.
@@ -458,13 +432,13 @@ For quoting blocks of content from another source within your document, wrap ``. When providing attribution, wrap your `
` in a `
` and use a `
` or a block level element (e.g., `
`) with the `.blockquote-footer` class. Be sure to wrap the name of the source work in `` as well. It uses [Regular text](#regular-texts) body small.
+The HTML spec requires that blockquote attribution be placed outside the `
`. When providing attribution, wrap your `
` in a `
` and use a `
`. Be sure to wrap the name of the source work in `` as well. `
` after `
` uses [body small typography]([[docsref:/components/typography#body]]).
 
 
     

       
A well-known quote, contained in a blockquote element.

     

-    

+    

       Someone famous in Source Title
     

   
`} />
@@ -472,13 +446,13 @@ The HTML spec requires that blockquote attribution be placed outside the `
     

       
A well-known quote, contained in a blockquote element.

     

-    

+    

       Someone famous in Source Title
     

   
`} />
@@ -487,7 +461,7 @@ Use text utilities as needed to change the alignment of your blockquote.
     

       
A well-known quote, contained in a blockquote element.

     

-    

+    

       Someone famous in Source Title
     

   `} />
diff --git a/site/src/content/docs/getting-started/migration-from-boosted.mdx b/site/src/content/docs/getting-started/migration-from-boosted.mdx
index b37ea5f25e..8b363ca2b3 100644
--- a/site/src/content/docs/getting-started/migration-from-boosted.mdx
+++ b/site/src/content/docs/getting-started/migration-from-boosted.mdx
@@ -76,7 +76,7 @@ Read more about the [font stack]([[docsref:/foundation/reboot#font-stack]]) for
 
 - Breaking Abbreviation class `.initialism` has been removed.
 
-- Warning `.blockquote` class has been deprecated, you can use `
` instead. Read more in our [reboot page]([[docsref:/foundation/reboot]]).
+- Warning `.blockquote` and `.blockquote-footer` class have been deprecated, you can use `
` and `
` instead. Read more in our [reboot page, blockquote section]([[docsref:/foundation/reboot#blockquote]]).
 
 - Warning Default spacing values now use `px`s instead of `em`s for fixed component spacing, to keep as much space as possible for meaningful content on zoom.
 
@@ -2349,9 +2349,11 @@ See [our new Text Area page]([[docsref:/components/text-area]]) for more informa
     Warning Dropped Sass variables:
     
    
       
  • $blockquote-font-size
    • 
+      
  • $blockquote-footer-color
    • 
       
  • $blockquote-footer-font-size
    • 
       
  • $blockquote-line-height
    • 
       
  • $blockquote-letter-spacing
    • 
+      
  • $blockquote-margin-y
    • 
       
  • $boosted-prefix
    • 
       
  • $boosted-variable-prefix
    • 
       
  • $border-color-subtle
    • 
diff --git a/site/src/content/docs/getting-started/update-guide.mdx b/site/src/content/docs/getting-started/update-guide.mdx
index 35f1762c30..98537abebb 100644
--- a/site/src/content/docs/getting-started/update-guide.mdx
+++ b/site/src/content/docs/getting-started/update-guide.mdx
@@ -85,7 +85,7 @@ toc: true
 
 ### Reboot
 
-- Warning `.blockquote` class has been deprecated, you can use `
    ` instead. Read more in our [reboot page]([[docsref:/foundation/reboot]]).
+- Warning `.blockquote` and `.blockquote-footer` class have been deprecated, you can use `
    ` and `
    ` instead. Read more in our [reboot page, blockquote section]([[docsref:/foundation/reboot#blockquote]]).
 
 ### Dual mode
 
diff --git a/skills/using-ouds-web-version-major-minor/references/foundation/reboot.md b/skills/using-ouds-web-version-major-minor/references/foundation/reboot.md
index 9c0bd4b98d..99dbb73661 100644
--- a/skills/using-ouds-web-version-major-minor/references/foundation/reboot.md
+++ b/skills/using-ouds-web-version-major-minor/references/foundation/reboot.md
@@ -81,7 +81,7 @@ Styled via `border-top`, inherits `border-color` via `color`. Customize with bor
 
 ## Blockquotes
 
-Style applies directly to the bare `
    ` element — **there is no `.blockquote` class** (removed; do not add it). Uses [body large text](../components/typography.md#body).
+Style applies directly to the bare `
    ` element — the `.blockquote` class is deprecated (since v1.6), do not use it in new code. Uses [body large text](../components/typography.md#body).
 
 ```html
 
    
@@ -91,20 +91,20 @@ Style applies directly to the bare `
    ` element — **there is no `.bl
 
 ### Naming a source
 
-The HTML spec requires attribution to be placed outside the `
    `. Wrap the `
    ` in a `
    ` and add a `
    ` (or a block-level element like `
    `) with the `.blockquote-footer` class **immediately after** the `
    ` — it only renders its styling (dash prefix, body small text) when it is the adjacent sibling of a `
    ` (CSS selector `blockquote + .blockquote-footer`). Wrap the source name in ``.
+The HTML spec requires attribution to be placed outside the `
    `. Wrap the `
    ` in a `
    ` and add a plain `
    ` (no class) **immediately after** the `
    ` — it gets its styling (dash prefix, body small text) from the adjacent-sibling selector `blockquote + figcaption`. Wrap the source name in ``.
 
 ```html
 
    
   
    
     
    A well-known quote, contained in a blockquote element.
    
   
    
-  
    
+  
    
     Someone famous in Source Title
   
    
 
    
 ```
 
-> **Breaking change (v1.6.0):** previously `.blockquote` and `.blockquote-footer` worked as standalone classes. Now the plain `
    ` element carries the style, and `.blockquote-footer` requires the adjacent-sibling structure above to be styled.
+> **Deprecation (v1.6.0):** `.blockquote` and `.blockquote-footer` are deprecated (they still work for now). Use the plain `
    ` element, followed by `
    ` for the attribution.
 
 ## Lists
 
diff --git a/skills/using-ouds-web-version-major-minor/references/getting-started/update-guide.md b/skills/using-ouds-web-version-major-minor/references/getting-started/update-guide.md
index ba9f15519e..99b6eb5e3b 100644
--- a/skills/using-ouds-web-version-major-minor/references/getting-started/update-guide.md
+++ b/skills/using-ouds-web-version-major-minor/references/getting-started/update-guide.md
@@ -7,7 +7,7 @@
 ### Breaking changes
 
 - **Alerts**: action links placed inside `.alert-container`, after `.alert-text-container`, must use the compact link variant: `.link.link-compact`. Action links placed inside `.alert-action-container`, beside the close button, continue to use the regular `.link`.
-- **Blockquotes**: `.blockquote` class deprecated — directly use the `
    ` element. `.blockquote-footer` only renders its styling when it is the adjacent sibling of a `
    ` (`blockquote + .blockquote-footer`), so keep the `
    ` wrapper with `
    ` immediately after the `
    `.
+- **Blockquotes**: `.blockquote` and `.blockquote-footer` classes deprecated (still working) - use the `
    ` element directly, followed by a plain `
    ` immediately after it (`blockquote + figcaption`), inside a `
    `.
 
 ### New
 

From 757816bea9ed8c3933b87cc6421e6bd159378ff5 Mon Sep 17 00:00:00 2001
From: Hannah Issermann 
Date: Thu, 22 Oct 2026 10:25:34 +0200
Subject: [PATCH 50/52] move deprecated .blockquote in reboot for more
 consistency in code

---
 scss/_reboot.scss     |  3 ++-
 scss/_typography.scss | 13 -------------
 2 files changed, 2 insertions(+), 14 deletions(-)

diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 11ef4812e6..57ee4ae3fb 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -260,11 +260,12 @@ dd {
 
 // Blockquote
 
+.blockquote, // deprecated in OUDS Web v1.6
 blockquote {
   margin: 0 0 $ouds-space-fixed-medium; // OUDS mod: instead of `0 0 1rem`
 
   > p {
-    @include get-font-size("body-large"); // OUDS mod: instead of `font-size: $blockquote-font-size` in `.blockquote`
+    @include get-font-size("body-large");
   }
 
   > :last-child {
diff --git a/scss/_typography.scss b/scss/_typography.scss
index 6219735e54..49ffdb5064 100644
--- a/scss/_typography.scss
+++ b/scss/_typography.scss
@@ -90,16 +90,3 @@
 // Misc
 //
 
-// Blockquotes
-// deprecated in OUDS Web v1.6
-.blockquote {
-  margin-bottom: $ouds-space-fixed-medium;
-
-  > p {
-    @include get-font-size("body-large");
-  }
-
-  > :last-child {
-    margin-bottom: 0;
-  }
-}

From d7c2c779c9c3d97882f42b0c99f3c422ab367214 Mon Sep 17 00:00:00 2001
From: Hannah Issermann 
Date: Thu, 22 Oct 2026 17:03:38 +0200
Subject: [PATCH 51/52] css tests

---
 .../__snapshots__/ouds-web-bootstrap.css        | 17 +++--------------
 .../snapshot-tests/__snapshots__/ouds-web.css   | 17 +++--------------
 2 files changed, 6 insertions(+), 28 deletions(-)

diff --git a/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css b/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css
index 150ee8356b..15e02071a9 100644
--- a/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css
+++ b/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css
@@ -1238,9 +1238,11 @@ dd {
   margin-left: 0;
 }
 
+.blockquote,
 blockquote {
   margin: 0 0 16px;
 }
+.blockquote > p,
 blockquote > p {
   max-width: var(--bs-font-max-width-body-large);
   font-size: var(--bs-font-size-body-large);
@@ -1248,6 +1250,7 @@ blockquote > p {
   /* rtl:remove */
   letter-spacing: var(--bs-font-letter-spacing-body-large);
 }
+.blockquote > :last-child,
 blockquote > :last-child {
   margin-bottom: 0;
 }
@@ -1747,20 +1750,6 @@ h2.marker::after,
   margin-right: 0.25rem;
 }
 
-.blockquote {
-  margin-bottom: 16px;
-}
-.blockquote > p {
-  max-width: var(--bs-font-max-width-body-large);
-  font-size: var(--bs-font-size-body-large);
-  line-height: var(--bs-font-line-height-body-large);
-  /* rtl:remove */
-  letter-spacing: var(--bs-font-letter-spacing-body-large);
-}
-.blockquote > :last-child {
-  margin-bottom: 0;
-}
-
 .img-fluid {
   max-width: 100%;
   height: auto;
diff --git a/scss/tests/snapshot-tests/__snapshots__/ouds-web.css b/scss/tests/snapshot-tests/__snapshots__/ouds-web.css
index 614fd39d7c..d10aca131e 100644
--- a/scss/tests/snapshot-tests/__snapshots__/ouds-web.css
+++ b/scss/tests/snapshot-tests/__snapshots__/ouds-web.css
@@ -1073,9 +1073,11 @@ dd {
   margin-left: 0;
 }
 
+.blockquote,
 blockquote {
   margin: 0 0 16px;
 }
+.blockquote > p,
 blockquote > p {
   max-width: var(--bs-font-max-width-body-large);
   font-size: var(--bs-font-size-body-large);
@@ -1083,6 +1085,7 @@ blockquote > p {
   /* rtl:remove */
   letter-spacing: var(--bs-font-letter-spacing-body-large);
 }
+.blockquote > :last-child,
 blockquote > :last-child {
   margin-bottom: 0;
 }
@@ -1528,20 +1531,6 @@ h2.marker::after,
   margin-right: 0.25rem;
 }
 
-.blockquote {
-  margin-bottom: 16px;
-}
-.blockquote > p {
-  max-width: var(--bs-font-max-width-body-large);
-  font-size: var(--bs-font-size-body-large);
-  line-height: var(--bs-font-line-height-body-large);
-  /* rtl:remove */
-  letter-spacing: var(--bs-font-letter-spacing-body-large);
-}
-.blockquote > :last-child {
-  margin-bottom: 0;
-}
-
 .img-fluid {
   max-width: 100%;
   height: auto;

From 76a532a7c26136e285916d1ba0fd99173260512b Mon Sep 17 00:00:00 2001
From: Hannah Issermann 
Date: Fri, 23 Oct 2026 15:12:38 +0200
Subject: [PATCH 52/52] Update heading 5/6 labels

---
 site/src/content/docs/components/typography.mdx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/site/src/content/docs/components/typography.mdx b/site/src/content/docs/components/typography.mdx
index 91593d76d1..0a55856d9c 100644
--- a/site/src/content/docs/components/typography.mdx
+++ b/site/src/content/docs/components/typography.mdx
@@ -252,8 +252,8 @@ Here are the associated `font-size`s depending on the breakpoints:
             {level === 'heading-large' && (<>Heading large ({'
    '} or .h2))}
             {level === 'heading-medium' && (<>Heading medium ({'
    '} or .h3))}
             {level === 'heading-small' && (<>Heading small ({'
    '} or .h4))}
-            {level === 'body-large' && (<>Body large ({'
    '} or .h5))}
-            {level === 'body-medium' && (<>Body medium ({'
    '} or .h6))}
+            {level === 'body-large' && (<>Heading 5 ({'
    '} or .h5))}
+            {level === 'body-medium' && (<>Heading 6 ({'
    '} or .h6))}
           
           {
             screenSize.map((size) => (
@@ -291,8 +291,8 @@ Here are the associated `font-size`s depending on the breakpoints:
               {level === 'heading-large' && (<>Heading large ({'
    '} or .h2))}
               {level === 'heading-medium' && (<>Heading medium ({'
    '} or .h3))}
               {level === 'heading-small' && (<>Heading small ({'
    '} or .h4))}
-              {level === 'body-large' && (<>Body large ({'
    '} or .h5))}
-              {level === 'body-medium' && (<>Body medium ({'
    '} or .h6))}
+              {level === 'body-large' && (<>Heading 5 ({'
    '} or .h5))}
+              {level === 'body-medium' && (<>Heading 6 ({'
    '} or .h6))}
             
             {
               screenSize.map((size) => (
@@ -314,6 +314,10 @@ Here are the associated `font-size`s depending on the breakpoints:
   
 
 
+
+  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