diff --git a/site/src/content/docs/components/buttons.mdx b/site/src/content/docs/components/buttons.mdx
index 0ef2bc4269..7c03eb6b85 100644
--- a/site/src/content/docs/components/buttons.mdx
+++ b/site/src/content/docs/components/buttons.mdx
@@ -66,7 +66,7 @@ OUDS Web offers a few variations to use on [colored backgrounds]([[docsref:/util
- Negative buttons should never be used on colored background.
-
+
@@ -74,7 +74,7 @@ OUDS Web offers a few variations to use on [colored backgrounds]([[docsref:/util
-
+
@@ -150,7 +150,7 @@ You don’t need to apply any spacing utility on the icon to get consistent spac
diff --git a/site/src/content/docs/content/reboot.mdx b/site/src/content/docs/content/reboot.mdx
index 5472fdc6db..c88a7b5804 100644
--- a/site/src/content/docs/content/reboot.mdx
+++ b/site/src/content/docs/content/reboot.mdx
@@ -123,18 +123,18 @@ Placeholder links—those without an `href`—are targeted with a more specific
On colored backgrounds, links should have a different style. Visited links don’t have a specific style on colored backgrounds.
-
diff --git a/site/src/content/docs/helpers/clearfix.mdx b/site/src/content/docs/helpers/clearfix.mdx
index f7b66a66e5..7231cf90cb 100644
--- a/site/src/content/docs/helpers/clearfix.mdx
+++ b/site/src/content/docs/helpers/clearfix.mdx
@@ -18,7 +18,7 @@ Use in HTML:
The mixin source code:
-
+
Use the mixin in SCSS:
@@ -28,7 +28,7 @@ Use the mixin in SCSS:
The following example shows how the clearfix can be used. Without the clearfix the wrapping div would not span around the buttons which would cause a broken layout.
-
+
diff --git a/site/src/content/docs/migrations/migration-from-boosted.mdx b/site/src/content/docs/migrations/migration-from-boosted.mdx
index e8ebfa27e6..3ed5e268fb 100644
--- a/site/src/content/docs/migrations/migration-from-boosted.mdx
+++ b/site/src/content/docs/migrations/migration-from-boosted.mdx
@@ -389,18 +389,18 @@ See [our new Text Area page]([[docsref:/forms/text-area]]) for more information.
1. `.bg-transparent` stays the same
2. `.bg-white` → `.bg-always-white`
3. `.bg-black` → `.bg-always-black`
- 4. `.bg-primary` → `.bg-brand-primary`
+ 4. `.bg-primary` → `.bg-surface-brand-primary`
5. `.bg-primary-subtle` (that shouldn’t have been used) → `.bg-tertiary`
6. `.bg-secondary` → `.bg-emphasized` or in some rare cases `.bg-status-neutral-emphasized`
7. `.bg-secondary-subtle` (that shouldn’t have been used) → `.bg-secondary`
- 8. `.bg-success` → `.bg-status-positive-emphasized` or in some rare cases `.bg-status-positive-muted`
- 9. `.bg-success-subtle` (that shouldn’t have been used) → `.bg-status-positive-muted`
- 10. `.bg-danger` → `.bg-status-negative-emphasized` or in some rare cases `.bg-status-negative-muted`
- 11. `.bg-danger-subtle` (that shouldn’t have been used) → `.bg-status-negative-muted`
- 12. `.bg-info` → `.bg-status-info-emphasized` or in some rare cases `.bg-status-info-muted`
- 13. `.bg-info-subtle` (that shouldn’t have been used) → `.bg-status-positive-muted`
- 14. `.bg-warning` → `.bg-status-warning-emphasized`, `.bg-status-accent-emphasized` or in some rare cases `.bg-status-warning-muted`, `.bg-status-accent-muted`
- 15. `.bg-warning-subtle` (that shouldn’t have been used) → `.bg-status-warning-muted` or `.bg-status-accent-muted` depending on your context
+ 8. `.bg-success` → `.bg-surface-status-positive-emphasized` or in some rare cases `.bg-surface-status-positive-muted`
+ 9. `.bg-success-subtle` (that shouldn’t have been used) → `.bg-surface-status-positive-muted`
+ 10. `.bg-danger` → `.bg-surface-status-negative-emphasized` or in some rare cases `.bg-surface-status-negative-muted`
+ 11. `.bg-danger-subtle` (that shouldn’t have been used) → `.bg-surface-status-negative-muted`
+ 12. `.bg-info` → `.bg-surface-status-info-emphasized` or in some rare cases `.bg-surface-status-info-muted`
+ 13. `.bg-info-subtle` (that shouldn’t have been used) → `.bg-surface-status-positive-muted`
+ 14. `.bg-warning` → `.bg-surface-status-warning-emphasized`, `.bg-surface-status-accent-emphasized` or in some rare cases `.bg-surface-status-warning-muted`, `.bg-surface-status-accent-muted`
+ 15. `.bg-warning-subtle` (that shouldn’t have been used) → `.bg-surface-status-warning-muted` or `.bg-surface-status-accent-muted` depending on your context
16. `.bg-body` → `.bg-primary`
17. `.bg-body-secondary` → `.bg-secondary` or in some rare cases `.bg-opacity-lower` or `.bg-opacity-lowest`
18. `.bg-body-tertiary` (that shouldn’t have been used) → `.bg-secondary`
diff --git a/site/src/content/docs/migrations/migration.mdx b/site/src/content/docs/migrations/migration.mdx
index a66b1e3d90..b0d08bba41 100644
--- a/site/src/content/docs/migrations/migration.mdx
+++ b/site/src/content/docs/migrations/migration.mdx
@@ -42,16 +42,35 @@ toc: true
### Utilities
-#### Opacity
-
-- New `.opacity-weakest` is now available.
+#### Background
-- Warning Opacity levels values have been changed. Read more in our [opacity page]([[docsref:/utilities/opacity]]).
+- Breaking Some background utilities have been renamed as follows:
+ - `.bg-brand-primary` is renamed to `.bg-surface-brand-primary`
+ - `.bg-brand-secondary` is renamed to `.bg-surface-brand-secondary`
+ - `.bg-brand-tertiary` is renamed to `.bg-surface-brand-tertiary`
+ - `.bg-status-accent-emphasized` is renamed to `.bg-surface-status-accent-emphasized`
+ - `.bg-status-accent-muted` is renamed to `.bg-surface-status-accent-muted`
+ - `.bg-status-positive-emphasized` is renamed to `.bg-surface-status-positive-emphasized`
+ - `.bg-status-positive-muted` is renamed to `.bg-surface-status-positive-muted`
+ - `.bg-status-negative-emphasized` is renamed to `.bg-surface-status-negative-emphasized`
+ - `.bg-status-negative-muted` is renamed to `.bg-surface-status-negative-muted`
+ - `.bg-status-warning-emphasized` is renamed to `.bg-surface-status-warning-emphasized`
+ - `.bg-status-warning-muted` is renamed to `.bg-surface-status-warning-muted`
+ - `.bg-status-info-emphasized` is renamed to `.bg-surface-status-info-emphasized`
+ - `.bg-status-info-muted` is renamed to `.bg-surface-status-info-muted`
+
+- New New background utilities: `.bg-surface-primary`, `.bg-surface-secondary`, `.bg-surface-tertiary`, `.bg-surface-inverse-high`, `.bg-surface-inverse-low`. Read more in our [background page]([[docsref:/utilities/background]]).
#### Borders
- New Border color `.border-minimal` has been added.
+#### Opacity
+
+- New `.opacity-weakest` is now available.
+
+- Warning Opacity levels values have been changed. Read more in our [opacity page]([[docsref:/utilities/opacity]]).
+
## v0.6.0
diff --git a/site/src/content/docs/utilities/background.mdx b/site/src/content/docs/utilities/background.mdx
index 6dab44d998..967b3135a5 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'
@@ -16,10 +16,18 @@ import { allTokens, hasToken } from '@libs/sass-variables'
Background utilities like `.bg-*` are generated from our `$ouds-backgrounds` Sass map and respond to color modes.
-Similar to the contextual text color classes, set the background of an element to any contextual class. Background utilities **do not set `color`**, so depending on the cases you’ll want to use an additional:
+Similar to the contextual text color classes, set the background of an element to any contextual class. Some background utilities will set the text color for you, some will not.
+
+Utilities that set the text color: `.bg-surface-brand-primary`, `.bg-surface-brand-secondary`, `.bg-surface-brand-tertiary`, `.bg-surface-status-accent-emphasized`, `.bg-surface-status-accent-muted`, `.bg-surface-status-positive-emphasized`,`.bg-surface-status-positive-muted`, `.bg-surface-status-negative-emphasized`, `.bg-surface-status-negative-muted`, `.bg-surface-status-warning-emphasized`, `.bg-surface-status-warning-muted`, `.bg-surface-status-info-emphasized`,`.bg-surface-status-info-muted`, `.bg-always-black`, `.bg-always-white`.
+
+All the other background utilities **will not set `color`**, depending on the cases you’ll want to use an additional:
* `[data-bs-theme]` [color mode attribute]([[docsref:/customize/color-modes#how-to-use]]) is the best option most of the time and moreover when the element using a background utility contains complex sub-elements such as components that need to respond to color modes. It also sets the right color for texts inside
* `.text-*` [color utilities]([[docsref:/utilities/colors]]) when the background color and color couple are accessible together in light and dark mode, and there is no components inside
+
+ You can find more information on the OUDS background colors in the [design guidelines](https://unified-design-system.orange.com/472794e18/p/217ac6-color/t/b3d025a22f)
+
+
Here are the equivalent Bootstrap background that you shouldn’t be using. Prefer using the classes above according to [our design system]([[config:ouds.web]]).
@@ -45,9 +53,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 +68,22 @@ Please note that we use `[data-bs-theme]` attribute on a child element to avoid
: 'root-inverted'
return `
`
@@ -111,9 +147,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 +158,18 @@ We also provide some opacity backgrounds that should only be used in very specif
: 'light'
return `
`,
@@ -184,11 +248,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 `
`
+ })
+ ]} />
+
+## Multiple backgrounds
+
+Sometimes it will be necessary to layer two background colors on top of each other. This can happen when designers opt to have two fill color on a container for example if the parent container have a specific background and we want to opacify a card on top of it. To achieve this with OUDS Web you will need two containers with the specified background color utility.
+
+
+
`} />
-d-block
+d-block
d-block`} />
## Hiding elements
diff --git a/site/src/content/docs/utilities/opacity.mdx b/site/src/content/docs/utilities/opacity.mdx
index ffa272d949..6d51269e76 100644
--- a/site/src/content/docs/utilities/opacity.mdx
+++ b/site/src/content/docs/utilities/opacity.mdx
@@ -16,13 +16,13 @@ The `opacity` property sets the opacity level for an element. The opacity level
Set the opacity of an element using `.opacity-{value}` utilities.
-
-
-
-
-
-
- `} />
+
+
+
+
+
+
+ `} />
```html
...
@@ -39,11 +39,11 @@ The `opacity` property sets the opacity level for an element. The opacity level
Set the `opacity` of an element using `.opacity-{value}` utilities.
-
-
-
-
- `} />
+
+
+
+
+ `} />
```html
...
diff --git a/site/src/content/docs/utilities/text.mdx b/site/src/content/docs/utilities/text.mdx
index 4638683714..5e79751f55 100644
--- a/site/src/content/docs/utilities/text.mdx
+++ b/site/src/content/docs/utilities/text.mdx
@@ -34,7 +34,7 @@ Note that we don’t provide utility classes for justified text. While, aestheti
Wrap text with a `.text-wrap` class.
-
+
This text should wrap.