feat: add opaque buttons and text-opaque utility by MaxLardenois · Pull Request #3620 · Orange-OpenSource/Orange-Boosted-Bootstrap

MaxLardenois · 2026-06-25T09:46:37Z

Types of change

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

Related issues

Closes #3569

Context & Motivation

Description

Checklists

Checklist (for Core Team only)

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

Progression (for Core Team only)

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

Live previews

netlify · 2026-06-25T09:50:25Z

✅ Deploy Preview for boosted ready!

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

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

vprothais · 2026-07-02T13:12:55Z

+  The `.opacify` class is only available for `.btn-strong` buttons.
+</Callout>
+
+<Example buttonLabel="buttons on colored backgrounds" class="p-none bd-btn-example bd-first-rounded" code={`<div class="bg-surface-brand-primary p-large d-flex gap-xsmall flex-wrap" style="background-image: url('https://fastly.picsum.photos/id/628/1000/300.jpg?hmac=scpBB5Z4eJBipw0O_j2T60oQcGjH8xoOA0OG42tW0go')">


Is this url something internal that can be used in this context ? shouldn't we get this asset in our repo to avoid depending on external resources ?

louismaximepiton

I'm still not convinced of the utility of it. IMO the identified use cases would be largely filled via the existing variants on colored bg in combination with a semi-transparent bg on an image when needed or even a zigzag rather than writing on an image. I feel it's wrong in the direction we want to give to people.

In the meantime, some comments:

louismaximepiton · 2026-07-06T07:58:22Z

@@ -0,0 +1,4 @@
+.text-muted.opacify {


Do you know if there is a name on design side for this .opacify class ?

There is no design spec for this

louismaximepiton · 2026-07-06T10:00:13Z


+### 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 for the `:hover`, `:focus-visible`, and `:active` states, improving contrast and visibility against complex backgrounds.


Does it apply only on some variants of the links ?

louismaximepiton · 2026-07-06T10:00:47Z

+
+## Opaque text muted
+
+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.


Why on text-muted only ?

It's the only semi-transparent color

We also have .text-disabled but ok I see your point

louismaximepiton · 2026-07-06T13:25:55Z

+    &:hover,
+    &:active,
+    &:focus-visible {
+      background-color: var(--bs-color-bg-primary);


Suggested change

background-color: var(--bs-color-bg-primary);

background-color: var(--#{$prefix}color-bg-primary);

louismaximepiton · 2026-07-06T13:26:50Z

+    &:active,
+    &:focus-visible {
+      background-color: var(--bs-color-bg-primary);
+      background-image: linear-gradient(var(--#{$prefix}btn-hover-bg));


Do we keep the hover every time ? Where can the specs be found ?

louismaximepiton · 2026-07-06T13:44:36Z

+
+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.
+
+<Example buttonLabel="links on colored backgrounds" class="p-none bd-btn-example bd-first-rounded" code={`<div class="bg-surface-brand-primary p-large d-flex gap-medium flex-wrap" style="background-image: url('https://fastly.picsum.photos/id/534/1000/300.jpg?hmac=uKVRRoCBPDGUvOZ5ZockbHITRiP-GoVWyQ2WtBpcrB8')">


A good accessibility practice is to set a background-color close to the color on the image whenever an image is used. Do you think we should add this good practice in our doc ?

Ok but do we have enough colors for that?

trying something

8f5313f

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

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

MaxLardenois added 5 commits June 25, 2026 15:56

add as button variant

e0d8318

bundlewatch

85204da

test

e14f94a

test

5ed4a2c

final

c3a7c26

MaxLardenois marked this pull request as ready for review July 2, 2026 11:59

boosted-bot moved this from In Progress / Draft to Need Dev Review in 🟣 [Orange-Boosted-Bootstrap] PRs Board Jul 2, 2026

feat: migration

126b447

vprothais reviewed Jul 2, 2026

View reviewed changes

louismaximepiton linked an issue Jul 6, 2026 that may be closed by this pull request

opaque background for hover state of button and link #3569

Open

2 tasks

louismaximepiton requested changes Jul 6, 2026

View reviewed changes

boosted-bot moved this from Need Dev Review to Dev Review In Progress in 🟣 [Orange-Boosted-Bootstrap] PRs Board Jul 6, 2026


		### 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 for the `:hover`, `:focus-visible`, and `:active` states, improving contrast and visibility against complex backgrounds.


		## Opaque text muted

		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.

	background-color: var(--bs-color-bg-primary);
	background-color: var(--#{$prefix}color-bg-primary);


		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.

		<Example buttonLabel="links on colored backgrounds" class="p-none bd-btn-example bd-first-rounded" code={`<div class="bg-surface-brand-primary p-large d-flex gap-medium flex-wrap" style="background-image: url('https://fastly.picsum.photos/id/534/1000/300.jpg?hmac=uKVRRoCBPDGUvOZ5ZockbHITRiP-GoVWyQ2WtBpcrB8')">

Uh oh!

Conversation

MaxLardenois commented Jun 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Types of change

Related issues

Context & Motivation

Description

Checklists

Checklist (for Core Team only)

Progression (for Core Team only)

Live previews

Uh oh!

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

Uh oh!

✅ Deploy Preview for boosted ready!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

louismaximepiton left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

MaxLardenois commented Jun 25, 2026 •

edited

Loading

netlify Bot commented Jun 25, 2026 •

edited

Loading