From f765834e014b655377ed000bf405134bc28a5cff Mon Sep 17 00:00:00 2001 From: Maxime Lardenois Date: Thu, 11 Dec 2025 16:31:13 +0100 Subject: [PATCH 1/7] fix: fix color surface tokens text color and add surface in bg- utility --- scss/_maps.scss | 44 +++++--- scss/helpers/_color-bg.scss | 11 +- .../src/content/docs/utilities/background.mdx | 103 +++++++++++++++--- 3 files changed, 123 insertions(+), 35 deletions(-) diff --git a/scss/_maps.scss b/scss/_maps.scss index 14aa87b07e..80c040257f 100644 --- a/scss/_maps.scss +++ b/scss/_maps.scss @@ -133,31 +133,39 @@ $ouds-opacities: ( // scss-docs-end ouds-maps-opacities // scss-docs-start ouds-maps-backgrounds -$ouds-backgrounds: ( +$ouds-backgrounds-with-color: ( + "surface-brand-primary": var(--#{$prefix}color-surface-brand-primary), + "surface-brand-secondary": if(variable-exists(ouds-color-surface-brand-secondary-light), var(--#{$prefix}color-surface-brand-secondary), null), + "surface-brand-tertiary": if(variable-exists(ouds-color-surface-brand-tertiary-light), var(--#{$prefix}color-surface-brand-tertiary), null), + "surface-status-accent-emphasized": var(--#{$prefix}color-surface-status-accent-emphasized), + "surface-status-accent-muted": var(--#{$prefix}color-surface-status-accent-muted), + "surface-status-positive-emphasized": var(--#{$prefix}color-surface-status-positive-emphasized), + "surface-status-positive-muted": var(--#{$prefix}color-surface-status-positive-muted), + "surface-status-negative-emphasized": var(--#{$prefix}color-surface-status-negative-emphasized), + "surface-status-negative-muted": var(--#{$prefix}color-surface-status-negative-muted), + "surface-status-warning-emphasized": var(--#{$prefix}color-surface-status-warning-emphasized), + "surface-status-warning-muted": var(--#{$prefix}color-surface-status-warning-muted), + "surface-status-info-emphasized": var(--#{$prefix}color-surface-status-info-emphasized), + "surface-status-info-muted": var(--#{$prefix}color-surface-status-info-muted), + "always-black": var(--#{$prefix}color-always-black), + "always-white": var(--#{$prefix}color-always-white), +) !default; +$ouds-backgrounds-without-color: ( "primary": var(--#{$prefix}color-bg-primary), "secondary": var(--#{$prefix}color-bg-secondary), "tertiary": var(--#{$prefix}color-bg-tertiary), - "brand-primary": var(--#{$prefix}color-surface-brand-primary), - "brand-secondary": if(variable-exists(ouds-color-surface-brand-secondary-light), var(--#{$prefix}color-surface-brand-secondary), null), - "brand-tertiary": if(variable-exists(ouds-color-surface-brand-tertiary-light), var(--#{$prefix}color-surface-brand-tertiary), null), - "inverse-high": var(--#{$prefix}color-surface-inverse-high), - "inverse-low": var(--#{$prefix}color-surface-inverse-low), - "status-accent-emphasized": var(--#{$prefix}color-surface-status-accent-emphasized), - "status-accent-muted": var(--#{$prefix}color-surface-status-accent-muted), - "status-positive-emphasized": var(--#{$prefix}color-surface-status-positive-emphasized), - "status-positive-muted": var(--#{$prefix}color-surface-status-positive-muted), - "status-negative-emphasized": var(--#{$prefix}color-surface-status-negative-emphasized), - "status-negative-muted": var(--#{$prefix}color-surface-status-negative-muted), - "status-warning-emphasized": var(--#{$prefix}color-surface-status-warning-emphasized), - "status-warning-muted": var(--#{$prefix}color-surface-status-warning-muted), - "status-info-emphasized": var(--#{$prefix}color-surface-status-info-emphasized), - "status-info-muted": var(--#{$prefix}color-surface-status-info-muted), - "always-black": var(--#{$prefix}color-always-black), - "always-white": var(--#{$prefix}color-always-white), + "inverse-high": var(--#{$prefix}color-bg-inverse-high), + "inverse-low": var(--#{$prefix}color-bg-inverse-low), + "surface-primary": var(--#{$prefix}color-surface-primary), + "surface-secondary": var(--#{$prefix}color-surface-secondary), + "surface-tertiary": var(--#{$prefix}color-surface-tertiary), + "surface-inverse-high": var(--#{$prefix}color-surface-inverse-high), + "surface-inverse-low": var(--#{$prefix}color-surface-inverse-low), "opacity-lower": var(--#{$prefix}color-opacity-lower), "opacity-lowest": var(--#{$prefix}color-opacity-lowest), "transparent": transparent, ) !default; +$ouds-backgrounds: map-merge($ouds-backgrounds-with-color, $ouds-backgrounds-without-color) !default; // scss-docs-end ouds-maps-backgrounds // scss-docs-start ouds-maps-text-colors diff --git a/scss/helpers/_color-bg.scss b/scss/helpers/_color-bg.scss index 4b977e2161..382ae8717a 100644 --- a/scss/helpers/_color-bg.scss +++ b/scss/helpers/_color-bg.scss @@ -21,7 +21,7 @@ } } -@each $color, $value in map-remove($ouds-backgrounds, "primary", "secondary", "tertiary", "opacity-lower", "opacity-lowest", "transparent", "inverse-high", "inverse-low") { +@each $color, $value in $ouds-backgrounds-with-color { $text-bg-color: null; @if index(("always-black"), #{$color}) { @@ -29,10 +29,17 @@ } @else if index(("always-white"), #{$color}) { $text-bg-color: var(--#{$prefix}color-always-on-white); } @else { - $text-bg-color: var(--#{$prefix}color-content-on-#{$color}); + $text-bg-color: var(--#{$prefix}color-content-on-#{str-replace($color, "surface-")}); } .bg-#{$color} { --#{$prefix}color-local: #{$text-bg-color}; + color: var(--#{$prefix}color-local); + } +} + +@each $color, $value in $ouds-backgrounds-without-color { + .bg-#{$color} { + --#{$prefix}color-local: initial; } } diff --git a/site/src/content/docs/utilities/background.mdx b/site/src/content/docs/utilities/background.mdx index 6dab44d998..c2396420a7 100644 --- a/site/src/content/docs/utilities/background.mdx +++ b/site/src/content/docs/utilities/background.mdx @@ -8,7 +8,7 @@ toc: true import { getConfig } from '@libs/config' import { getData } from '@libs/data' -import { allTokens, hasToken } from '@libs/sass-variables' +import { allTokens } from '@libs/sass-variables' @@ -45,9 +45,9 @@ Please note that we use `[data-bs-theme]` attribute on a child element to avoid token.name.match(/\$ouds-color-surface-.*-light/)) + ...allTokens.filter(token => token.name.match(/\$ouds-color-bg-.*-light/)) .map(token => { - const bgName = token.name.match(/\$ouds-color-surface-(.*)-light/)[1] + const bgName = token.name.match(/\$ouds-color-bg-(.*)-light/)[1] const themesArray = allTokens.filter(allToken => { return allToken.name.match(`modes-on-(bg-)?${bgName}-(dark|light)`) }).map(token => token.compiledValue) @@ -60,6 +60,22 @@ Please note that we use `[data-bs-theme]` attribute on a child element to avoid : 'root-inverted' return `

${theme !== 'root' ? `` : ''}.bg-${bgName}${theme !== 'root' ? '' : ''}

` }), + ...allTokens.filter(token => token.name.match(/\$ouds-color-surface-.*-light/)) + .map(token => { + const surfaceName = token.name.match(/\$ouds-color-surface-(.*)-light/)[1] + const bgName = `surface-${surfaceName}` + const themesArray = allTokens.filter(allToken => { + return allToken.name.match(`modes-on-(surface-)?${surfaceName}-(dark|light)`) + }).map(token => token.compiledValue) + const theme = themesArray[0].includes('dark') + ? themesArray[1].includes('light') + ? 'root' + : 'dark' + : themesArray[1].includes('light') + ? 'light' + : 'root-inverted' + return `

${theme !== 'root' ? `` : ''}.bg-${bgName}${theme !== 'root' ? '' : ''}

` + }), `

.bg-always-black

.bg-always-white

.bg-transparent

`]} /> @@ -78,13 +94,25 @@ Here is a more complex example to understand how to use `[data-bs-theme]` in spe
`, - ...allTokens.filter(token => token.name.match(/\$ouds-color-surface-.*-light/)) + ...allTokens.filter(token => token.name.match(/\$ouds-color-bg-.*-light/)) .map(token => { - const bgName = token.name.match(/\$ouds-color-surface-(.*)-light/)[1] + const bgName = token.name.match(/\$ouds-color-bg-(.*)-light/)[1] const themesArray = allTokens.filter(allToken => { return allToken.name.match(`modes-on-(bg-)?${bgName}-(dark|light)`) }).map(token => token.compiledValue) - const theme = themesArray[1].includes('light') + const theme = themesArray[0].includes('light') + ? 'light' + : 'dark' + return `

${theme !== 'light' ? `` : ''}.bg-${bgName}${theme !== 'light' ? '' : ''}

` + }), + ...allTokens.filter(token => token.name.match(/\$ouds-color-surface-.*-light/)) + .map(token => { + const surfaceName = token.name.match(/\$ouds-color-surface-(.*)-light/)[1] + const bgName = `surface-${surfaceName}` + const themesArray = allTokens.filter(allToken => { + return allToken.name.match(`modes-on-(surface-)?${surfaceName}-(dark|light)`) + }).map(token => token.compiledValue) + const theme = themesArray[0].includes('light') ? 'light' : 'dark' return `

${theme !== 'light' ? `` : ''}.bg-${bgName}${theme !== 'light' ? '' : ''}

` @@ -111,9 +139,9 @@ We also provide some opacity backgrounds that should only be used in very specif
`, - ...allTokens.filter(token => token.name.match(/\$ouds-color-surface-.*-light/)) + ...allTokens.filter(token => token.name.match(/\$ouds-color-bg-.*-light/)) .map(token => { - const bgName = token.name.match(/\$ouds-color-surface-(.*)-light/)[1] + const bgName = token.name.match(/\$ouds-color-bg-(.*)-light/)[1] const themesArray = allTokens.filter(allToken => { return allToken.name.match(`modes-on-(bg-)?${bgName}-(dark|light)`) }).map(token => token.compiledValue) @@ -122,6 +150,18 @@ We also provide some opacity backgrounds that should only be used in very specif : 'light' return `

${theme !== 'dark' ? `` : ''}.bg-${bgName}${theme !== 'dark' ? '' : ''}

` }), + ...allTokens.filter(token => token.name.match(/\$ouds-color-surface-.*-light/)) + .map(token => { + const surfaceName = token.name.match(/\$ouds-color-surface-(.*)-light/)[1] + const bgName = `surface-${surfaceName}` + const themesArray = allTokens.filter(allToken => { + return allToken.name.match(`modes-on-(surface-)?${surfaceName}-(dark|light)`) + }).map(token => token.compiledValue) + const theme = themesArray[0].includes('dark') + ? 'dark' + : 'light' + return `

${theme !== 'dark' ? `` : ''}.bg-${bgName}${theme !== 'dark' ? '' : ''}

` + }), `

.bg-always-black

.bg-always-white

.bg-transparent

`, @@ -148,9 +188,9 @@ Here is a more complex example to understand how to use `[data-bs-theme]` in spe
`, - ...allTokens.filter(token => token.name.match(/\$ouds-color-surface-.*-light/)) + ...allTokens.filter(token => token.name.match(/\$ouds-color-bg-.*-light/)) .map(token => { - const bgName = token.name.match(/\$ouds-color-surface-(.*)-light/)[1] + const bgName = token.name.match(/\$ouds-color-bg-(.*)-light/)[1] const themesArray = allTokens.filter(allToken => { return allToken.name.match(`modes-on-(bg-)?${bgName}-(dark|light)`) }).map(token => token.compiledValue) @@ -163,6 +203,22 @@ Here is a more complex example to understand how to use `[data-bs-theme]` in spe : 'root' return `

${theme !== 'root-inverted' ? `` : ''}.bg-${bgName}${theme !== 'root-inverted' ? '' : ''}

` }), + ...allTokens.filter(token => token.name.match(/\$ouds-color-surface-.*-light/)) + .map(token => { + const surfaceName = token.name.match(/\$ouds-color-surface-(.*)-light/)[1] + const bgName = `surface-${surfaceName}` + const themesArray = allTokens.filter(allToken => { + return allToken.name.match(`modes-on-(surface-)?${surfaceName}-(dark|light)`) + }).map(token => token.compiledValue) + const theme = themesArray[0].includes('dark') + ? themesArray[1].includes('light') + ? 'root-inverted' + : 'dark' + : themesArray[1].includes('light') + ? 'light' + : 'root' + return `

${theme !== 'root-inverted' ? `` : ''}.bg-${bgName}${theme !== 'root-inverted' ? '' : ''}

` + }), `

.bg-always-black

.bg-always-white

.bg-transparent

`, @@ -184,11 +240,27 @@ We also provide some opacity backgrounds that should only be used in very specif In OUDS Web, we have some backgrounds that are a bit specific because they can take only few components like buttons, links and texts. For accessibility reasons we remove the color of these components. -`.bg-brand-primary`,{getConfig().brand !== 'orange' ? <>.bg-brand-secondary, .bg-brand-tertiary : ''} `.bg-status-accent-emphasized`, `.bg-status-warning-emphasized`, `.bg-status-negative-emphasized`, `.bg-status-positive-emphasized` and `.bg-status-info-emphasized` are considered as colored backgrounds. +`.bg-surface-brand-primary`,{getConfig().brand !== 'orange' ? <>.bg-surface-brand-secondary, .bg-surface-brand-tertiary : ''} `.bg-surface-status-accent-emphasized`, `.bg-surface-status-warning-emphasized`, `.bg-surface-status-negative-emphasized`, `.bg-surface-status-positive-emphasized` and `.bg-surface-status-info-emphasized` are considered as colored backgrounds. - (token.name.match(/\$ouds-color-bg-/) || token.name.match(/\$ouds-color-surface-/)) && token.name.match(/-light/) && (token.name.match(/-brand/) || token.name.match(/status-.*-emphasized/)) && !token.name.match(/-neutral/) && token.compiledValue).map(token => { + (token.name.match(/\$ouds-color-surface-brand.*-light/) && token.compiledValue)).map(token => { + const brandName = token.name.match(/\$ouds-color-surface-brand-(.*)-light/)[1] + const themesArray = allTokens.filter(allToken => { + return allToken.name.match(`modes-on-brand-${brandName}-(dark|light)`) + }).map(token => token.compiledValue) + const theme = themesArray[0].includes('dark') + ? themesArray[1].includes('light') + ? 'root' + : 'dark' + : themesArray[1].includes('light') + ? 'light' + : 'root-inverted' + return `

${theme !== 'root' ? `` : ''}.bg-surface-brand-${brandName}${theme !== 'root' ? '' : ''}

` + }), + ...allTokens.filter(token => (token.name.match(/\$ouds-color-surface-status-.*-emphasized-light/) && token.compiledValue)).map(token => { + const statusName = token.name.match(/\$ouds-color-surface-status-(.*)-emphasized-light/)[1] const themesArray = allTokens.filter(allToken => { - return allToken.name.match(`modes-on-(bg-)?${token.name.split('-').slice(3, -1).join('-')}-(dark|light)`) + return allToken.name.match(`modes-on-status-${statusName}`) }).map(token => token.compiledValue) const theme = themesArray[0].includes('dark') ? themesArray[1].includes('light') @@ -197,5 +269,6 @@ In OUDS Web, we have some backgrounds that are a bit specific because they can t : themesArray[1].includes('light') ? 'light' : 'root-inverted' - return `

${theme !== 'root' ? `` : ''}.bg-${token.name.split('-').slice(3, -1).join('-')}${theme !== 'root' ? '' : ''}

` - })]} /> + return `

${theme !== 'root' ? `` : ''}.bg-surface-status-${statusName}-emphasized${theme !== 'root' ? '' : ''}

` + }) + ]} /> From 34a8ed286519b71c1ea89c58c19a5c09eab034c4 Mon Sep 17 00:00:00 2001 From: Maxime Lardenois Date: Fri, 12 Dec 2025 13:37:12 +0100 Subject: [PATCH 2/7] fix: css test --- .../_ouds-web-bootstrap-utilities.test.scss | 164 +++++++++++------- 1 file changed, 102 insertions(+), 62 deletions(-) diff --git a/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss b/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss index 68ad35ff7a..c9e7dfafc2 100644 --- a/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss +++ b/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss @@ -3628,67 +3628,47 @@ $utilities: (); box-shadow: 0 4px 4px -1px var(--bs-elevation-color-sticky) !important; } - .bg-primary { - background-color: var(--bs-color-bg-primary) !important; - } - - .bg-secondary { - background-color: var(--bs-color-bg-secondary) !important; - } - - .bg-tertiary { - background-color: var(--bs-color-bg-tertiary) !important; - } - - .bg-brand-primary { + .bg-surface-brand-primary { background-color: var(--bs-color-surface-brand-primary) !important; } - .bg-inverse-high { - background-color: var(--bs-color-surface-inverse-high) !important; - } - - .bg-inverse-low { - background-color: var(--bs-color-surface-inverse-low) !important; - } - - .bg-status-accent-emphasized { + .bg-surface-status-accent-emphasized { background-color: var(--bs-color-surface-status-accent-emphasized) !important; } - .bg-status-accent-muted { + .bg-surface-status-accent-muted { background-color: var(--bs-color-surface-status-accent-muted) !important; } - .bg-status-positive-emphasized { + .bg-surface-status-positive-emphasized { background-color: var(--bs-color-surface-status-positive-emphasized) !important; } - .bg-status-positive-muted { + .bg-surface-status-positive-muted { background-color: var(--bs-color-surface-status-positive-muted) !important; } - .bg-status-negative-emphasized { + .bg-surface-status-negative-emphasized { background-color: var(--bs-color-surface-status-negative-emphasized) !important; } - .bg-status-negative-muted { + .bg-surface-status-negative-muted { background-color: var(--bs-color-surface-status-negative-muted) !important; } - .bg-status-warning-emphasized { + .bg-surface-status-warning-emphasized { background-color: var(--bs-color-surface-status-warning-emphasized) !important; } - .bg-status-warning-muted { + .bg-surface-status-warning-muted { background-color: var(--bs-color-surface-status-warning-muted) !important; } - .bg-status-info-emphasized { + .bg-surface-status-info-emphasized { background-color: var(--bs-color-surface-status-info-emphasized) !important; } - .bg-status-info-muted { + .bg-surface-status-info-muted { background-color: var(--bs-color-surface-status-info-muted) !important; } @@ -3700,6 +3680,46 @@ $utilities: (); background-color: var(--bs-color-always-white) !important; } + .bg-primary { + background-color: var(--bs-color-bg-primary) !important; + } + + .bg-secondary { + background-color: var(--bs-color-bg-secondary) !important; + } + + .bg-tertiary { + background-color: var(--bs-color-bg-tertiary) !important; + } + + .bg-inverse-high { + background-color: var(--bs-color-bg-inverse-high) !important; + } + + .bg-inverse-low { + background-color: var(--bs-color-bg-inverse-low) !important; + } + + .bg-surface-primary { + background-color: var(--bs-color-surface-primary) !important; + } + + .bg-surface-secondary { + background-color: var(--bs-color-surface-secondary) !important; + } + + .bg-surface-tertiary { + background-color: var(--bs-color-surface-tertiary) !important; + } + + .bg-surface-inverse-high { + background-color: var(--bs-color-surface-inverse-high) !important; + } + + .bg-surface-inverse-low { + background-color: var(--bs-color-surface-inverse-low) !important; + } + .bg-opacity-lower { background-color: var(--bs-color-opacity-lower) !important; } @@ -14639,67 +14659,47 @@ $utilities: (); background-color: var(--bs-dark-bg-subtle) !important; } - .bg-primary { - background-color: var(--bs-color-bg-primary) !important; - } - - .bg-secondary { - background-color: var(--bs-color-bg-secondary) !important; - } - - .bg-tertiary { - background-color: var(--bs-color-bg-tertiary) !important; - } - - .bg-brand-primary { + .bg-surface-brand-primary { background-color: var(--bs-color-surface-brand-primary) !important; } - .bg-inverse-high { - background-color: var(--bs-color-surface-inverse-high) !important; - } - - .bg-inverse-low { - background-color: var(--bs-color-surface-inverse-low) !important; - } - - .bg-status-accent-emphasized { + .bg-surface-status-accent-emphasized { background-color: var(--bs-color-surface-status-accent-emphasized) !important; } - .bg-status-accent-muted { + .bg-surface-status-accent-muted { background-color: var(--bs-color-surface-status-accent-muted) !important; } - .bg-status-positive-emphasized { + .bg-surface-status-positive-emphasized { background-color: var(--bs-color-surface-status-positive-emphasized) !important; } - .bg-status-positive-muted { + .bg-surface-status-positive-muted { background-color: var(--bs-color-surface-status-positive-muted) !important; } - .bg-status-negative-emphasized { + .bg-surface-status-negative-emphasized { background-color: var(--bs-color-surface-status-negative-emphasized) !important; } - .bg-status-negative-muted { + .bg-surface-status-negative-muted { background-color: var(--bs-color-surface-status-negative-muted) !important; } - .bg-status-warning-emphasized { + .bg-surface-status-warning-emphasized { background-color: var(--bs-color-surface-status-warning-emphasized) !important; } - .bg-status-warning-muted { + .bg-surface-status-warning-muted { background-color: var(--bs-color-surface-status-warning-muted) !important; } - .bg-status-info-emphasized { + .bg-surface-status-info-emphasized { background-color: var(--bs-color-surface-status-info-emphasized) !important; } - .bg-status-info-muted { + .bg-surface-status-info-muted { background-color: var(--bs-color-surface-status-info-muted) !important; } @@ -14711,6 +14711,46 @@ $utilities: (); background-color: var(--bs-color-always-white) !important; } + .bg-primary { + background-color: var(--bs-color-bg-primary) !important; + } + + .bg-secondary { + background-color: var(--bs-color-bg-secondary) !important; + } + + .bg-tertiary { + background-color: var(--bs-color-bg-tertiary) !important; + } + + .bg-inverse-high { + background-color: var(--bs-color-bg-inverse-high) !important; + } + + .bg-inverse-low { + background-color: var(--bs-color-bg-inverse-low) !important; + } + + .bg-surface-primary { + background-color: var(--bs-color-surface-primary) !important; + } + + .bg-surface-secondary { + background-color: var(--bs-color-surface-secondary) !important; + } + + .bg-surface-tertiary { + background-color: var(--bs-color-surface-tertiary) !important; + } + + .bg-surface-inverse-high { + background-color: var(--bs-color-surface-inverse-high) !important; + } + + .bg-surface-inverse-low { + background-color: var(--bs-color-surface-inverse-low) !important; + } + .bg-opacity-lower { background-color: var(--bs-color-opacity-lower) !important; } From 478af3942d84c6467f9e58dadc8dbd54b4968800 Mon Sep 17 00:00:00 2001 From: Maxime Lardenois Date: Fri, 12 Dec 2025 14:24:21 +0100 Subject: [PATCH 3/7] feat: change all old bg-* occurences --- js/tests/visual/toast.html | 4 +-- .../assets/examples/download-app/index.astro | 4 +-- site/src/content/docs/components/buttons.mdx | 16 ++++++------ site/src/content/docs/components/links.mdx | 4 +-- site/src/content/docs/content/reboot.mdx | 6 ++--- site/src/content/docs/helpers/clearfix.mdx | 4 +-- .../migrations/migration-from-boosted.mdx | 18 ++++++------- site/src/content/docs/utilities/colors.mdx | 26 +++++++++---------- site/src/content/docs/utilities/display.mdx | 4 +-- site/src/content/docs/utilities/opacity.mdx | 24 ++++++++--------- site/src/content/docs/utilities/text.mdx | 2 +- 11 files changed, 56 insertions(+), 56 deletions(-) diff --git a/js/tests/visual/toast.html b/js/tests/visual/toast.html index d6c8a1a3aa..9dc2f5e3bb 100644 --- a/js/tests/visual/toast.html +++ b/js/tests/visual/toast.html @@ -28,7 +28,7 @@

Toast Bootstrap Visual Test