From 8f5313f37c4748111f07396095ce2daf8965b2ee Mon Sep 17 00:00:00 2001 From: Maxime Lardenois Date: Wed, 24 Jun 2026 16:12:26 +0200 Subject: [PATCH 1/7] trying something --- scss/_buttons.scss | 4 ++++ site/src/content/docs/components/buttons.mdx | 16 ++++++++-------- 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/scss/_buttons.scss b/scss/_buttons.scss index b471ae7703..f72a32ec40 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -527,3 +527,7 @@ background-color: currentcolor; } +.btn-opaque:hover { + background-color: var(--bs-btn-opaque, var(--bs-color-bg-primary)); + background-image: linear-gradient(var(--#{$prefix}btn-hover-bg)); +} diff --git a/site/src/content/docs/components/buttons.mdx b/site/src/content/docs/components/buttons.mdx index 898c647645..4375a6a1cb 100644 --- a/site/src/content/docs/components/buttons.mdx +++ b/site/src/content/docs/components/buttons.mdx @@ -97,19 +97,19 @@ OUDS Web offers a few variations to use on [colored backgrounds]([[docsref:/util - Negative and brand buttons should never be used on colored background. - +
- - - + + +
-
+
- - - + + +
`} /> From e0d8318904c8315d44bb9c25a8c903160719838e Mon Sep 17 00:00:00 2001 From: Maxime Lardenois Date: Thu, 25 Jun 2026 15:56:21 +0200 Subject: [PATCH 2/7] add as button variant --- scss/_buttons.scss | 34 ++++++++++++++++++-- site/src/content/docs/components/buttons.mdx | 29 ++++++++++++----- 2 files changed, 52 insertions(+), 11 deletions(-) diff --git a/scss/_buttons.scss b/scss/_buttons.scss index f72a32ec40..2d20428901 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -527,7 +527,35 @@ background-color: currentcolor; } -.btn-opaque:hover { - background-color: var(--bs-btn-opaque, var(--bs-color-bg-primary)); - background-image: linear-gradient(var(--#{$prefix}btn-hover-bg)); +.btn-opaque { + --#{$prefix}btn-border-width: #{$ouds-border-width-none}; + --#{$prefix}btn-interaction-border-width: #{$ouds-border-width-none}; + + @include button-variant( + $ouds-button-mono-color-bg-strong-enabled, + var(--#{$prefix}color-opacity-transparent), + $ouds-button-mono-color-content-strong-enabled, + $ouds-button-mono-color-bg-strong-hover, + var(--#{$prefix}color-opacity-transparent), + $ouds-button-mono-color-content-strong-hover, + $ouds-button-mono-color-bg-strong-pressed, + var(--#{$prefix}color-opacity-transparent), + $ouds-button-mono-color-content-strong-pressed, + $ouds-button-mono-color-bg-strong-disabled, + var(--#{$prefix}color-opacity-transparent), + $ouds-button-mono-color-content-strong-disabled, + $ouds-button-mono-color-bg-strong-focus, + var(--#{$prefix}color-opacity-transparent), + $ouds-button-mono-color-content-strong-focus, + $ouds-button-mono-color-bg-strong-loading, + var(--#{$prefix}color-opacity-transparent), + $ouds-button-mono-color-content-strong-loading + ); + + &:hover, + &:active, + &:focus-visible { + background-color: var(--bs-btn-opaque, var(--bs-color-bg-primary)); + background-image: linear-gradient(var(--#{$prefix}btn-hover-bg)); + } } diff --git a/site/src/content/docs/components/buttons.mdx b/site/src/content/docs/components/buttons.mdx index 4375a6a1cb..6f6f7a9dc9 100644 --- a/site/src/content/docs/components/buttons.mdx +++ b/site/src/content/docs/components/buttons.mdx @@ -97,19 +97,19 @@ OUDS Web offers a few variations to use on [colored backgrounds]([[docsref:/util - Negative and brand buttons should never be used on colored background. - +
- - - + + +
-
+
- - - + + +
`} /> @@ -290,6 +290,19 @@ Add `.btn-icon` to get a squared button, meant to only contain an icon. Make sur
`} /> +#### Opaque buttons + +On image background, you can use the `.btn-opaque` class to make buttons more readable. This class adds an opaque background to the button, improving contrast and visibility against complex backgrounds. + + +
+ +
+
+ +
+ `} /> + #### Outline buttons From 85204da26dc801feafee94d3891b6d6010768491 Mon Sep 17 00:00:00 2001 From: Maxime Lardenois Date: Thu, 25 Jun 2026 15:58:43 +0200 Subject: [PATCH 3/7] bundlewatch --- .bundlewatch.config.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index 5f2a906251..4176338230 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -6,7 +6,7 @@ }, { "path": "./packages/orange/dist/css/ouds-web-bootstrap.min.css", - "maxSize": "79.25 kB" + "maxSize": "79.5 kB" }, { "path": "./packages/orange/dist/css/ouds-web-grid.css", From e14f94a26cc5fe26b47e5c0421be9452c7fcf1d1 Mon Sep 17 00:00:00 2001 From: Maxime Lardenois Date: Wed, 1 Jul 2026 17:04:14 +0200 Subject: [PATCH 4/7] test --- scss/_buttons.scss | 42 +++++--------------- scss/_helpers.scss | 1 + scss/_links.scss | 15 +++++++ scss/helpers/_link-opacify.scss | 4 ++ site/src/content/docs/components/buttons.mdx | 6 +-- site/src/content/docs/components/links.mdx | 38 ++++++++++++++++++ site/src/content/docs/utilities/color.mdx | 14 +++++++ 7 files changed, 84 insertions(+), 36 deletions(-) create mode 100644 scss/helpers/_link-opacify.scss diff --git a/scss/_buttons.scss b/scss/_buttons.scss index 2d20428901..882b69309e 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -325,6 +325,15 @@ var(--#{$prefix}color-opacity-transparent), var(--#{$prefix}color-content-on-action-loading) ); + + &.opacify { + &:hover, + &:active, + &:focus-visible { + background-color: var(--bs-btn-opaque, var(--bs-color-bg-primary)); + background-image: linear-gradient(var(--#{$prefix}btn-hover-bg)); + } + } } .btn-negative { @@ -526,36 +535,3 @@ height: var(--#{$prefix}btn-icon-size); background-color: currentcolor; } - -.btn-opaque { - --#{$prefix}btn-border-width: #{$ouds-border-width-none}; - --#{$prefix}btn-interaction-border-width: #{$ouds-border-width-none}; - - @include button-variant( - $ouds-button-mono-color-bg-strong-enabled, - var(--#{$prefix}color-opacity-transparent), - $ouds-button-mono-color-content-strong-enabled, - $ouds-button-mono-color-bg-strong-hover, - var(--#{$prefix}color-opacity-transparent), - $ouds-button-mono-color-content-strong-hover, - $ouds-button-mono-color-bg-strong-pressed, - var(--#{$prefix}color-opacity-transparent), - $ouds-button-mono-color-content-strong-pressed, - $ouds-button-mono-color-bg-strong-disabled, - var(--#{$prefix}color-opacity-transparent), - $ouds-button-mono-color-content-strong-disabled, - $ouds-button-mono-color-bg-strong-focus, - var(--#{$prefix}color-opacity-transparent), - $ouds-button-mono-color-content-strong-focus, - $ouds-button-mono-color-bg-strong-loading, - var(--#{$prefix}color-opacity-transparent), - $ouds-button-mono-color-content-strong-loading - ); - - &:hover, - &:active, - &:focus-visible { - background-color: var(--bs-btn-opaque, var(--bs-color-bg-primary)); - background-image: linear-gradient(var(--#{$prefix}btn-hover-bg)); - } -} diff --git a/scss/_helpers.scss b/scss/_helpers.scss index 54c5fef563..2a5a19209d 100644 --- a/scss/_helpers.scss +++ b/scss/_helpers.scss @@ -2,6 +2,7 @@ // OUDS mod: no @import "helpers/colored-links"; @import "helpers/focus-ring"; @import "helpers/icon"; +@import "helpers/link-opacify"; // OUDS mod: no import of `icon-link` @import "helpers/position"; @import "helpers/stacks"; diff --git a/scss/_links.scss b/scss/_links.scss index 6eb672b2a7..a89249afc6 100644 --- a/scss/_links.scss +++ b/scss/_links.scss @@ -36,6 +36,13 @@ font-size: var(--#{$prefix}link-icon-size); line-height: 1; } + &.opacify { + &:active, + &:focus-visible { + background-color: var(--bs-color-bg-primary); + background-clip: text; + } + } } .link-chevron { @@ -114,6 +121,14 @@ --#{$prefix}link-chevron-focus-color: #{$ouds-link-mono-color-content-focus}; --#{$prefix}link-chevron-pressed-color: #{$ouds-link-mono-color-content-pressed}; --#{$prefix}link-chevron-disabled-color: #{$ouds-link-mono-color-content-disabled}; + + &.opacify { + &:active, + &:focus-visible { + background-color: var(--bs-color-bg-primary); + background-clip: text; + } + } } .link-small { diff --git a/scss/helpers/_link-opacify.scss b/scss/helpers/_link-opacify.scss new file mode 100644 index 0000000000..480da52f0c --- /dev/null +++ b/scss/helpers/_link-opacify.scss @@ -0,0 +1,4 @@ +.text-muted.opacify { + background-color: var(--bs-color-bg-primary); + background-clip: text; +} diff --git a/site/src/content/docs/components/buttons.mdx b/site/src/content/docs/components/buttons.mdx index 6f6f7a9dc9..415e766b04 100644 --- a/site/src/content/docs/components/buttons.mdx +++ b/site/src/content/docs/components/buttons.mdx @@ -292,14 +292,14 @@ Add `.btn-icon` to get a squared button, meant to only contain an icon. Make sur #### Opaque buttons -On image background, you can use the `.btn-opaque` class to make buttons more readable. This class adds an opaque background to the button, improving contrast and visibility against complex backgrounds. +On image background, you can use the `.opacify` class to make buttons more readable. This class adds an opaque background to the button, improving contrast and visibility against complex backgrounds.
- +
- +
`} /> diff --git a/site/src/content/docs/components/links.mdx b/site/src/content/docs/components/links.mdx index ad5c78be84..864ad1d45a 100644 --- a/site/src/content/docs/components/links.mdx +++ b/site/src/content/docs/components/links.mdx @@ -107,6 +107,44 @@ Take a regular `` element, add `.icon-link`, and insert an icon on the left o `} /> +### on-colored-bg de base + + +
+ Strong +
+
+ Strong +
+ `} /> + +### Opaque links basé sur on-colored-bg + +On image background, you can use the `.opacify` class to make links more readable. This class adds an opaque background to the link, improving contrast and visibility against complex backgrounds. + + +
+ Strong +
+
+ Strong +
+ `} /> + +### Opaque links sur link simple + +On image background, you can use the `.opacify` class to make links more readable. This class adds an opaque background to the link, improving contrast and visibility against complex backgrounds. + + +
+ Strong +
+
+ Strong +
+ `} /> + + ## States ### Disabled diff --git a/site/src/content/docs/utilities/color.mdx b/site/src/content/docs/utilities/color.mdx index da42199bd2..5e6d25270f 100644 --- a/site/src/content/docs/utilities/color.mdx +++ b/site/src/content/docs/utilities/color.mdx @@ -69,3 +69,17 @@ See [icons documentation]([[docsref:/components/icon#icons-color]]) to learn how ## Specificity Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element’s content in a `
` or more semantic element with the desired class. + + +### Opaque links + +On image background, you can use the `.opacify` class to make links more readable. This class adds an opaque background to the link, improving contrast and visibility against complex backgrounds. + + +
+

Text muted

+
+
+

Text muted

+
+
`} /> From 5ed4a2c00a93c03aac6f73abc1dfc9527c5d265b Mon Sep 17 00:00:00 2001 From: Maxime Lardenois Date: Thu, 2 Jul 2026 12:56:53 +0200 Subject: [PATCH 5/7] test --- scss/_links.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/scss/_links.scss b/scss/_links.scss index a89249afc6..f703989aa3 100644 --- a/scss/_links.scss +++ b/scss/_links.scss @@ -37,6 +37,7 @@ line-height: 1; } &.opacify { + &:hover, &:active, &:focus-visible { background-color: var(--bs-color-bg-primary); From c3a7c268a20b86db66a46cfb686e920166e0b461 Mon Sep 17 00:00:00 2001 From: Maxime Lardenois Date: Thu, 2 Jul 2026 13:53:50 +0200 Subject: [PATCH 6/7] final --- scss/_buttons.scss | 2 +- scss/_helpers.scss | 2 +- scss/_links.scss | 9 +----- ...{_link-opacify.scss => _text-opacify.scss} | 0 site/src/content/docs/components/buttons.mdx | 4 +++ site/src/content/docs/components/links.mdx | 32 +++---------------- site/src/content/docs/utilities/color.mdx | 6 ++-- 7 files changed, 14 insertions(+), 41 deletions(-) rename scss/helpers/{_link-opacify.scss => _text-opacify.scss} (100%) diff --git a/scss/_buttons.scss b/scss/_buttons.scss index 882b69309e..23956cb497 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -330,7 +330,7 @@ &:hover, &:active, &:focus-visible { - background-color: var(--bs-btn-opaque, var(--bs-color-bg-primary)); + background-color: var(--bs-color-bg-primary); background-image: linear-gradient(var(--#{$prefix}btn-hover-bg)); } } diff --git a/scss/_helpers.scss b/scss/_helpers.scss index 2a5a19209d..20f4f6dfb9 100644 --- a/scss/_helpers.scss +++ b/scss/_helpers.scss @@ -2,7 +2,7 @@ // OUDS mod: no @import "helpers/colored-links"; @import "helpers/focus-ring"; @import "helpers/icon"; -@import "helpers/link-opacify"; +@import "helpers/text-opacify"; // OUDS mod: no import of `icon-link` @import "helpers/position"; @import "helpers/stacks"; diff --git a/scss/_links.scss b/scss/_links.scss index f703989aa3..011024c6b4 100644 --- a/scss/_links.scss +++ b/scss/_links.scss @@ -36,6 +36,7 @@ font-size: var(--#{$prefix}link-icon-size); line-height: 1; } + &.opacify { &:hover, &:active, @@ -122,14 +123,6 @@ --#{$prefix}link-chevron-focus-color: #{$ouds-link-mono-color-content-focus}; --#{$prefix}link-chevron-pressed-color: #{$ouds-link-mono-color-content-pressed}; --#{$prefix}link-chevron-disabled-color: #{$ouds-link-mono-color-content-disabled}; - - &.opacify { - &:active, - &:focus-visible { - background-color: var(--bs-color-bg-primary); - background-clip: text; - } - } } .link-small { diff --git a/scss/helpers/_link-opacify.scss b/scss/helpers/_text-opacify.scss similarity index 100% rename from scss/helpers/_link-opacify.scss rename to scss/helpers/_text-opacify.scss diff --git a/site/src/content/docs/components/buttons.mdx b/site/src/content/docs/components/buttons.mdx index 415e766b04..4c58237488 100644 --- a/site/src/content/docs/components/buttons.mdx +++ b/site/src/content/docs/components/buttons.mdx @@ -294,6 +294,10 @@ Add `.btn-icon` to get a squared button, meant to only contain an icon. Make sur On image background, you can use the `.opacify` class to make buttons more readable. This class adds an opaque background to the button, improving contrast and visibility against complex backgrounds. + + The `.opacify` class is only available for `.btn-strong` buttons. + +
diff --git a/site/src/content/docs/components/links.mdx b/site/src/content/docs/components/links.mdx index 864ad1d45a..c895d7dfe2 100644 --- a/site/src/content/docs/components/links.mdx +++ b/site/src/content/docs/components/links.mdx @@ -107,40 +107,16 @@ Take a regular `` element, add `.icon-link`, and insert an icon on the left o `} /> -### on-colored-bg de base +### Opaque links - -
- Strong -
-
- Strong -
-
`} /> - -### Opaque links basé sur on-colored-bg - -On image background, you can use the `.opacify` class to make links more readable. This class adds an opaque background to the link, improving contrast and visibility against complex backgrounds. - - -
- Strong -
-
- Strong -
- `} /> - -### Opaque links sur link simple - -On image background, you can use the `.opacify` class to make links more readable. This class adds an opaque background to the link, improving contrast and visibility against complex backgrounds. +On image background, you can use the `.opacify` class to make links more readable. This class adds an opaque background to the link for the `:hover`, `:focus-visible`, and `:active` states, improving contrast and visibility against complex backgrounds.
- Strong + Link
- Strong + Link
`} /> diff --git a/site/src/content/docs/utilities/color.mdx b/site/src/content/docs/utilities/color.mdx index 5e6d25270f..1d5665c060 100644 --- a/site/src/content/docs/utilities/color.mdx +++ b/site/src/content/docs/utilities/color.mdx @@ -71,11 +71,11 @@ See [icons documentation]([[docsref:/components/icon#icons-color]]) to learn how Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element’s content in a `
` or more semantic element with the desired class. -### Opaque links +## Opaque text muted -On image background, you can use the `.opacify` class to make links more readable. This class adds an opaque background to the link, improving contrast and visibility against complex backgrounds. +On image background, you can use the `.opacify` class to make `.text-muted` more readable. This class adds an opaque background to the text, improving contrast and visibility against complex backgrounds. - +

Text muted

From 126b447249f7e89bf6f2b4990a8ba3878b3c5dbb Mon Sep 17 00:00:00 2001 From: Maxime Lardenois Date: Thu, 2 Jul 2026 14:27:28 +0200 Subject: [PATCH 7/7] feat: migration --- site/src/content/docs/getting-started/migration.mdx | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/site/src/content/docs/getting-started/migration.mdx b/site/src/content/docs/getting-started/migration.mdx index f4ab1679a3..7176c9bf36 100644 --- a/site/src/content/docs/getting-started/migration.mdx +++ b/site/src/content/docs/getting-started/migration.mdx @@ -29,12 +29,20 @@ toc: true - Info Badge - icon component has been updated to 1.3.0. Read more in the [badge - icon design changelog](https://r.orange.fr/r/S-ouds-doc-badge-icon_changelog). +#### Buttons + +- New `.opacify` helper class has been added to improve `.btn-strong` button readability on complex backgrounds. Read more in our [buttons page]([[docsref:/components/buttons#opaque-buttons]]). + #### Chips - Info Suggestion chip component has been updated to 1.4.0 with no outward changes. Read more in the [suggestion chip design changelog](https://r.orange.fr/r/S-ouds-doc-suggestion-chip_changelog). - Info Filter chip component has been updated to 1.4.0 with no outward changes. Read more in the [filter chip design changelog](https://r.orange.fr/r/S-ouds-doc-filter-chip_changelog). +#### Links + +- New `.opacify` helper class has been added to improve link readability on complex backgrounds. Read more in our [links page]([[docsref:/components/links#opaque-links]]). + #### Password input - Info Password input component has been updated to 1.3.0 with no outward changes. Read more in the [password input design changelog](https://r.orange.fr/r/S-ouds-doc-password-input_changelog). @@ -51,6 +59,10 @@ toc: true ### Utilities +#### Color + +- New `.opacify` helper class has been added to improve `.text-muted` readability on complex backgrounds. Read more in our [color page]([[docsref:/utilities/color#opaque-text-muted]]). + #### Shadow - Warning `.shadow-default` has been deprecated in favor of `.shadow-elevated`. It will be removed in v1.5.0. Read more in our [shadow page]([[docsref:/utilities/shadow]]).