From 4f8ad55371267532e1e000ba45db49b230e48772 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Wed, 22 Jan 2025 15:37:44 +0100 Subject: [PATCH] Add migration guides --- scss/_variables.scss | 2 +- scss/tokens/_raw.scss | 16 +- .../docs/0.0/getting-started/accessibility.md | 2 +- .../docs/0.0/migration-from-boosted.md | 767 +++++++++++++++++- site/content/docs/0.0/migration.md | 543 ++++++++++++- 5 files changed, 1314 insertions(+), 16 deletions(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index e7dd2fccbf..dc9e2de620 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -422,7 +422,7 @@ $enable-fixed-header: true !default; // OUDS mod: used to apply scro $enable-bootstrap-compatibility: false !default; // OUDS mod: used to enforce Bootstrap compatibility $enable-dark-mode: true !default; -// $color-mode-type: data !default; // `data` or `media-query` +// OUDS mod: $color-mode-type is declared in our `_config.scss` file // OUDS mod: Prefix for $ouds-root-selector CSS variables has been moved to `_config.scss` diff --git a/scss/tokens/_raw.scss b/scss/tokens/_raw.scss index 70a9efb61b..825520fbd7 100644 --- a/scss/tokens/_raw.scss +++ b/scss/tokens/_raw.scss @@ -35,15 +35,15 @@ $ouds-border-width-125: $ouds-border-base * 1.25 !default; // 5 // Color // scss-docs-start ouds-raw-color -$ouds-color-decorative-amber-100: #fff0cc !default; -$ouds-color-decorative-amber-200: #ffe199 !default; -$ouds-color-decorative-amber-300: #ffd266 !default; -$ouds-color-decorative-amber-400: #ffc333 !default; +// $ouds-color-decorative-amber-100: #fff0cc !default; +// $ouds-color-decorative-amber-200: #ffe199 !default; +// $ouds-color-decorative-amber-300: #ffd266 !default; +// $ouds-color-decorative-amber-400: #ffc333 !default; $ouds-color-decorative-amber-500: #ffb400 !default; -$ouds-color-decorative-amber-600: #cc9000 !default; -$ouds-color-decorative-amber-700: #996c00 !default; -$ouds-color-decorative-amber-800: #664800 !default; -$ouds-color-decorative-amber-900: #332400 !default; +// $ouds-color-decorative-amber-600: #cc9000 !default; +// $ouds-color-decorative-amber-700: #996c00 !default; +// $ouds-color-decorative-amber-800: #664800 !default; +// $ouds-color-decorative-amber-900: #332400 !default; $ouds-color-decorative-amethyst-100: #f1ecf9 !default; $ouds-color-decorative-amethyst-200: #e0d4f2 !default; $ouds-color-decorative-amethyst-300: #c5ade6 !default; diff --git a/site/content/docs/0.0/getting-started/accessibility.md b/site/content/docs/0.0/getting-started/accessibility.md index 18d60e46bc..f7bebd5395 100644 --- a/site/content/docs/0.0/getting-started/accessibility.md +++ b/site/content/docs/0.0/getting-started/accessibility.md @@ -36,7 +36,7 @@ Content which should be visually hidden, but remain accessible to assistive tech ```html

- diff --git a/site/content/docs/0.0/migration-from-boosted.md b/site/content/docs/0.0/migration-from-boosted.md index 686498b344..826d75f2da 100644 --- a/site/content/docs/0.0/migration-from-boosted.md +++ b/site/content/docs/0.0/migration-from-boosted.md @@ -32,6 +32,14 @@ Let's start with the most obvious change you'll notice: the name. **Boosted is n From now on, OUDS Web won't embed Bootstrap elements that are not part of Orange Unified Design System. However, you can still use our Bootstrap compatibility mode by using `ouds-web-bootstrap.css` and `ouds-web-bootstrap.min.css`. +## Foundations + +- Warning Orange color has been modified from `#f16e00` to `#f15e00`. It means that under certain circumstances, you might be able to use Orange and light gray items together. + +- New We provide two brand new themes that are root and root-inverted. They are complementary to `light` and `dark`. See more on our [color modes page]({{< docsref "/customize/color-modes" >}}) + +- Warning The root selector have been tweaked for more flexibility on JS frameworks. Please don't hesitate to contact us if you find any issue with it. + ## Fonts OUDS Web doesn't use the Helvetica Neue font. Instead, it uses the system font stack. This means that the font will be slightly different depending on the operating system and browser being used. @@ -78,6 +86,10 @@ All responsive classes, helpers, and utilities have been updated accordingly to - Warning `.btn-close-white` class has been removed as it was deprecated in Boosted v5.3.3. +### Form floating + +- New Added the Form Floating documentation page. + ## Forms ### Checks & radios @@ -86,6 +98,30 @@ All responsive classes, helpers, and utilities have been updated accordingly to ## Helpers +### Color background + +- Breaking Most color-background color helpers have been removed or changed. + +- New The new color-background color helpers are now available. Visit our [color-bg page]({{< docsref "/helpers/color-background" >}}) to see more. + +-

+ Info Here are the modifications to apply in the exact same order to your websites. Please make sure to adapt the [data-bs-theme] to your context: + + 1. `.text-bg-primary` → `.text-bg-brand-primary` + 2. `.text-bg-secondary` → `.text-bg-emphasized` or `.text-bg-neutral-emphasized` + 3. `.text-bg-success` → `.text-bg-status-positive-emphasized` or in some rare cases `.text-bg-status-positive-muted` + 4. `.text-bg-danger` → `.text-bg-status-negative-emphasized` or in some rare cases `.text-bg-status-negative-muted` + 5. `.text-bg-warning` → `.text-bg-status-warning-emphasized` or in some rare cases `.text-bg-status-warning-muted` + 6. `.text-bg-info` → `.text-bg-status-info-emphasized` or in some rare cases `.text-bg-status-info-muted` + 7. `.text-bg-light` → `.text-bg-secondary` + 8. `.text-bg-dark` → `.text-bg-emphasized` + +
+ +### Colored links + +- Breaking All colored links helpers have been removed. + ### Icon - New Icons' sizes helpers have been added to help choose the right icon size with a specific typography reference. If you need these helpers, and you are using a custom import stack for helpers, don't forget to add the needed file `helpers/_icon.scss`: @@ -103,6 +139,43 @@ All responsive classes, helpers, and utilities have been updated accordingly to ## Utilities +### Background + +- Breaking Most background color utilities have been removed or changed. + +- Breaking Background opacity utilities have been removed. + +- New The new background color utilities are now available. Visit our [background page]({{< docsref "/utilities/background" >}}) to see more. + +-
+ Info Here are the modifications to apply in the exact same order to your websites. Please make sure to adapt the [data-bs-theme] to your context: + + 1. `.bg-transparent` stays the same + 2. `.bg-white` → `.bg-always-white` + 3. `.bg-black` → `.bg-always-black` + 4. `.bg-primary` → `.bg-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 + 16. `.bg-body` → `.bg-primary` + 17. `.bg-body-secondary` → `.bg-secondary` + 18. `.bg-body-tertiary` → `.bg-secondary` + 19. `.bg-light` → `.bg-secondary` + 20. `.bg-light-subtle` (that shouldn't have been used) → `.bg-secondary` + 21. `.bg-dark` → `.bg-emphasized` or `.bg-always-black` depending on your context + 22. `.bg-dark-subtle` (that shouldn't have been used) → `.bg-secondary` + 23. `.bg-supporting-*` → To remove or replace with the appropriate background + +
+ ### Border - Breaking Border operative utilities have been removed: `.border-0`, `.border-top-0`, `.border-bottom-0`, `.border-start-0`, and `.border-end-0`. Please check the new [border values]({{< docsref "/utilities/borders#border" >}}) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`. @@ -129,6 +202,53 @@ All responsive classes, helpers, and utilities have been updated accordingly to - New Border style utilities: `.border-drag`. +- Breaking All border color utilities have been removed or changed. + +- Breaking Border opacity utilities have been removed. + +- New The new border color utilities are now available. Visit our [border page]({{< docsref "/utilities/borders#color" >}}) to see more. + +-
+ Info Here are the modifications to apply in your websites: + + 1. `.border-primary` → `.border-brand-primary` + 2. `.border-black` → `.border-always-black` or `.border-always-on-white` or `.border-on-brand-primary` + 3. `.border-white` → `.border-always-white` or `.border-always-on-black` + 4. All `.border-*-subtle` (that shouldn't have been used) → `.border-default` + 5. All the remaining `.border-*` → `.border-emphasized` + +
+ +### Colors + +- Breaking Most text color utilities have been removed or changed. + +- Breaking Text opacity utilities have been removed. + +- New The new text color utilities are now available. Visit our [color page]({{< docsref "/utilities/colors" >}}) to see more. + +-
+ Info Here are the modifications to apply in your websites: + + 1. `.text-primary(-emphasis)` → `.text-brand-primary` + 2. `.text-secondary(-emphasis)` → `.text-muted` + 3. `.text-success(-emphasis)` (that shouldn't have been used on texts) → `.text-status-positive` + 4. `.text-danger(-emphasis)` (that shouldn't have been used on texts) → `.text-status-negative` + 5. `.text-warning(-emphasis)` (that shouldn't have been used on texts) → `.text-status-warning` + 6. `.text-info(-emphasis)` (that shouldn't have been used on texts) → `.text-status-info` + 7. `.text-light(-emphasis)` → `.text-disabled` + 8. `.text-dark(-emphasis)` → `.text-default` or see `.text-black` below + 9. `.text-body(-emphasis)` → `.text-default` or `.text-on-status-muted` + 10. `.text-body-secondary` → `.text-muted` + 11. `.text-body-tertiary` → `.text-muted` + 12. `.text-black` → `.text-always-black` or `.text-on-brand-primary` or `.text-on-status-emphasized` or `.text-on-status-emphasized-alt` or `.text-always-on-white` + 13. `.text-white` → `.text-always-white` or `.text-always-on-black` + 14. `.text-black-50` → `.text-muted` + 15. `.text-white-50` → `.text-muted` + 16. `.text-reset` stays the same + +
+ ### Display - Breaking `.d-xxl-{value}` responsive display utility has been replaced by `.d-2xl-{value}`. Please refer to the [new breakpoints' names]({{< docsref "/layout/breakpoints/#available-breakpoints" >}}). You can still have it using `$enable-bootstrap-compatibility`. @@ -281,7 +401,7 @@ All responsive classes, helpers, and utilities have been updated accordingly to 5. **4**: `(([" \.][mp]|-?gap)[tblrsexy]?-[a-z]{0,3}-?n?)4` → `$1tallest` 6. **5**: `(([" \.][mp]|-?gap)[tblrsexy]?-[a-z]{0,3}-?n?)5` → `$1huge` 7. **All numbers**: Search for `(([" \.][mp]|-?gap)[tblrsexy]?-[a-z]{0,3}-?n?)\d` and you shouldn't have Bootstrap spacing utilities anymore - +