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", diff --git a/scss/_buttons.scss b/scss/_buttons.scss index b471ae7703..23956cb497 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-color-bg-primary); + background-image: linear-gradient(var(--#{$prefix}btn-hover-bg)); + } + } } .btn-negative { @@ -526,4 +535,3 @@ height: var(--#{$prefix}btn-icon-size); background-color: currentcolor; } - diff --git a/scss/_helpers.scss b/scss/_helpers.scss index 54c5fef563..20f4f6dfb9 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/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 6eb672b2a7..011024c6b4 100644 --- a/scss/_links.scss +++ b/scss/_links.scss @@ -36,6 +36,15 @@ font-size: var(--#{$prefix}link-icon-size); line-height: 1; } + + &.opacify { + &:hover, + &:active, + &:focus-visible { + background-color: var(--bs-color-bg-primary); + background-clip: text; + } + } } .link-chevron { diff --git a/scss/helpers/_text-opacify.scss b/scss/helpers/_text-opacify.scss new file mode 100644 index 0000000000..480da52f0c --- /dev/null +++ b/scss/helpers/_text-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 898c647645..4c58237488 100644 --- a/site/src/content/docs/components/buttons.mdx +++ b/site/src/content/docs/components/buttons.mdx @@ -290,6 +290,23 @@ 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 `.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. + + + +
+ +
+
+ +
+ `} /> + #### Outline buttons diff --git a/site/src/content/docs/components/links.mdx b/site/src/content/docs/components/links.mdx index ad5c78be84..c895d7dfe2 100644 --- a/site/src/content/docs/components/links.mdx +++ b/site/src/content/docs/components/links.mdx @@ -107,6 +107,20 @@ Take a regular `` element, add `.icon-link`, and insert an icon on the left o `} /> +### 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. + + +
+ Link +
+
+ Link +
+ `} /> + + ## States ### Disabled 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]]). diff --git a/site/src/content/docs/utilities/color.mdx b/site/src/content/docs/utilities/color.mdx index da42199bd2..1d5665c060 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 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. + + +
+

Text muted

+
+
+

Text muted

+
+
`} />