Add the Bootstrap compatibilities in the doc and the code

Orange-OpenSource · Jan 9, 2025 · 6bdb40c · 6bdb40c
1 parent 6a2b3d5
commit 6bdb40c
Show file tree

Hide file tree

Showing 22 changed files with 981 additions and 560 deletions.
diff --git a/hugo.yml b/hugo.yml
@@ -81,7 +81,7 @@ params:
   icons_usage:                      "https://design.orange.com/0c1af118d/p/92bb17-usage"
   bootstrap:                        "https://getbootstrap.com"
   ouds:
-    web:                            "https://unified-design-system.orange.com/" # TODO LM: replace this URL by the web one or even "https://oran.ge/ds-web" when it will changed
+    web:                            "https://unified-design-system.orange.com/" # TODO: replace this URL by the web one or even "https://oran.ge/ds-web" when it will changed
 
   algolia:
     appId:                          "F4PKENW3TB"

diff --git a/scss/_grid.scss b/scss/_grid.scss
@@ -2,7 +2,7 @@
 //
 // Rows contain your columns.
 
-#{$ouds-root-selector} {
+#{$ouds-root-selector} { // OUDS mod: instead of `:root`
   @each $name, $value in $grid-breakpoints {
     --#{$prefix}breakpoint-#{$name}: #{$value};
   }

diff --git a/scss/_maps.scss b/scss/_maps.scss
@@ -288,12 +288,20 @@ $utilities-colors: $theme-colors-rgb !default;
 $utilities-text: map-merge(
   $utilities-colors,
   (
-    "black": to-rgb($black),
-    "white": to-rgb($white),
-    "body": to-rgb($body-color)
+    "primary":    var(--#{$prefix}color-content-brand-primary), // OUDS mod
+    "secondary":  var(--#{$prefix}color-content-muted), // OUDS mod
+    "success":    var(--#{$prefix}color-content-status-positive), // OUDS mod
+    "info":       var(--#{$prefix}color-content-status-info), // OUDS mod
+    "warning":    var(--#{$prefix}color-content-status-warning), // OUDS mod
+    "danger":     var(--#{$prefix}color-content-status-negative), // OUDS mod
+    "light":      var(--#{$prefix}color-content-disabled), // OUDS mod
+    "dark":       var(--#{$prefix}color-content-default), // OUDS mod
+    "black":      var(--#{$prefix}color-always-black), // OUDS mod: instead of `to-rgb($black)`
+    "white":      var(--#{$prefix}color-always-white), // OUDS mod: instead of `to-rgb($white)`
+    "body":       var(--#{$prefix}color-content-default) // OUDS mod: instead of `to-rgb($body-color)`
   )
 ) !default;
-$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default;
+$utilities-text-colors: $utilities-text !default; // OUDS mod: instead of `map-loop($utilities-text, rgba-css-var, "$key", "text")`
 
 $utilities-text-emphasis-colors: (
   "primary-emphasis": var(--#{$prefix}primary-text-emphasis),
@@ -311,12 +319,20 @@ $utilities-text-emphasis-colors: (
 $utilities-bg: map-merge(
   $utilities-colors,
   (
-    "black": to-rgb($black),
-    "white": to-rgb($white),
-    "body": to-rgb($body-bg)
+    "primary":    var(--#{$prefix}color-surface-brand-primary), // OUDS mod
+    "secondary":  var(--#{$prefix}color-bg-secondary), // OUDS mod
+    "success":    var(--#{$prefix}color-surface-status-positive-emphasized), // OUDS mod
+    "info":       var(--#{$prefix}color-surface-status-info-emphasized), // OUDS mod
+    "warning":    var(--#{$prefix}color-surface-status-warning-emphasized), // OUDS mod
+    "danger":     var(--#{$prefix}color-surface-status-negative-emphasized), // OUDS mod
+    "light":      var(--#{$prefix}color-bg-secondary), // OUDS mod
+    "dark":       var(--#{$prefix}color-surface-status-neutral-emphasized), // OUDS mod
+    "black":      var(--#{$prefix}color-always-black), // OUDS mod: instead of `to-rgb($black)`
+    "white":      var(--#{$prefix}color-always-white), // OUDS mod: instead of `to-rgb($white)`
+    "body":       var(--#{$prefix}color-bg-primary) // OUDS mod: instead of `to-rgb($body-bg)`
   )
 ) !default;
-$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default;
+$utilities-bg-colors: $utilities-bg !default; // OUDS mod: instead of `map-loop($utilities-bg, rgba-css-var, "$key", "bg")`
 
 $utilities-bg-subtle: (
   "primary-subtle": var(--#{$prefix}primary-bg-subtle),
@@ -334,13 +350,19 @@ $utilities-bg-subtle: (
 $utilities-border: map-merge(
   $utilities-colors,
   (
-    "black": to-rgb($black),
-    "dark": $gray-700, // OUDS mod: handled differently within `rgba-css-var`
-    "light": $gray-500, // OUDS mod: handled differently within `rgba-css-var`
-    "white": to-rgb($white),
+    "primary":    var(--#{$prefix}color-border-brand-primary), // OUDS mod
+    "secondary":  var(--#{$prefix}color-border-emphasized), // OUDS mod
+    "success":    var(--#{$prefix}color-border-emphasized), // OUDS mod
+    "info":       var(--#{$prefix}color-border-emphasized), // OUDS mod
+    "warning":    var(--#{$prefix}color-border-emphasized), // OUDS mod
+    "danger":     var(--#{$prefix}color-border-emphasized), // OUDS mod
+    "light":      var(--#{$prefix}color-border-emphasized), // OUDS mod
+    "dark":       var(--#{$prefix}color-border-emphasized), // OUDS mod
+    "black":      var(--#{$prefix}color-always-black), // OUDS mod: instead of `to-rgb($black)`
+    "white":      var(--#{$prefix}color-always-white), // OUDS mod: instead of `to-rgb($white)`
   )
 ) !default;
-$utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$key", "border", "$value") !default; // OUDS mod
+$utilities-border-colors: $utilities-border !default; // OUDS mod: instead of `map-loop($utilities-border, rgba-css-var, "$key", "border", "$value")`
 
 $utilities-border-subtle: (
   "primary-subtle": var(--#{$prefix}primary-border-subtle),

diff --git a/scss/_reboot.scss b/scss/_reboot.scss
@@ -25,7 +25,7 @@
 // Ability to the value of the root font sizes, affecting the value of `rem`.
 // null by default, thus nothing is generated.
 
-#{$ouds-root-selector} {
+#{$ouds-root-selector} { // OUDS mod: instead of `:root`
   @if $font-size-root != null {
     @include font-size(var(--#{$prefix}root-font-size));
   }
@@ -61,7 +61,7 @@
 //    See https://developer.mozilla.org/fr/docs/Web/CSS/font-synthesis
 
 // scss-docs-start reboot-body-rules
-#{$ouds-root-selector} > * {
+#{$ouds-root-selector} > * { // OUDS mod: instead of `body`
   position: relative; // OUDS mod: required for back-to-top component
   margin: 0; // 1
   font-family: var(--#{$prefix}body-font-family);

diff --git a/scss/_root.scss b/scss/_root.scss
@@ -7,7 +7,7 @@
 // Note that some of the following variables in `#{$ouds-root-selector}, [data-bs-theme="light"]` could be extracted into `#{$ouds-root-selector}` only selector since they are not modified by other color modes!
 // End mod
 
-@include color-mode(light, true) {
+@include color-mode(light, true) { // OUDS mod: instead of `:root, [data-bs-theme="light"]`
   color-scheme: light; // OUDS mod
 
   // Note: Custom variable values only support SassScript inside `#{}`.
@@ -16,36 +16,38 @@
   //
   // Generate palettes for full colors, grays, and theme colors.
 
-  @each $color, $value in $colors {
-    --#{$prefix}#{$color}: #{$value};
-  }
+  @if $enable-bootstrap-compatibility {
+    @each $color, $value in $colors {
+      --#{$prefix}#{$color}: #{$value};
+    }
 
-  @each $color, $value in $grays {
-    --#{$prefix}gray-#{$color}: #{$value};
-  }
+    @each $color, $value in $grays {
+      --#{$prefix}gray-#{$color}: #{$value};
+    }
 
-  @each $color, $value in $theme-colors {
-    --#{$prefix}#{$color}: #{$value};
-  }
+    @each $color, $value in $theme-colors {
+      --#{$prefix}#{$color}: #{$value};
+    }
 
-  @each $color, $value in $theme-colors-rgb {
-    --#{$prefix}#{$color}-rgb: #{$value};
-  }
+    @each $color, $value in $theme-colors-rgb {
+      --#{$prefix}#{$color}-rgb: #{$value};
+    }
 
-  @each $color, $value in $theme-colors-text {
-    --#{$prefix}#{$color}-text-emphasis: #{$value};
-  }
+    @each $color, $value in $theme-colors-text {
+      --#{$prefix}#{$color}-text-emphasis: #{$value};
+    }
 
-  @each $color, $value in $theme-colors-bg-subtle {
-    --#{$prefix}#{$color}-bg-subtle: #{$value};
-  }
+    @each $color, $value in $theme-colors-bg-subtle {
+      --#{$prefix}#{$color}-bg-subtle: #{$value};
+    }
 
-  @each $color, $value in $theme-colors-border-subtle {
-    --#{$prefix}#{$color}-border-subtle: #{$value};
-  }
+    @each $color, $value in $theme-colors-border-subtle {
+      --#{$prefix}#{$color}-border-subtle: #{$value};
+    }
 
-  --#{$prefix}white-rgb: #{to-rgb($white)};
-  --#{$prefix}black-rgb: #{to-rgb($black)};
+    --#{$prefix}white-rgb: #{to-rgb($white)};
+    --#{$prefix}black-rgb: #{to-rgb($black)};
+  }
 
   // OUDS mod
   @each $icon, $svg in $svg-as-custom-props {
@@ -226,18 +228,20 @@
   --#{$prefix}body-bg: #{$body-bg};
   --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
 
-  --#{$prefix}emphasis-color: #{$body-emphasis-color};
-  --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)};
-
-  --#{$prefix}secondary-color: #{$body-secondary-color};
-  --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)};
-  --#{$prefix}secondary-bg: #{$body-secondary-bg};
-  --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)};
-
-  --#{$prefix}tertiary-color: #{$body-tertiary-color};
-  --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
-  --#{$prefix}tertiary-bg: #{$body-tertiary-bg};
-  --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
+  @if $enable-bootstrap-compatibility {
+    --#{$prefix}emphasis-color: #{$body-emphasis-color};
+    --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)};
+
+    --#{$prefix}secondary-color: #{$body-secondary-color};
+    --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)};
+    --#{$prefix}secondary-bg: #{$body-secondary-bg};
+    --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)};
+
+    --#{$prefix}tertiary-color: #{$body-tertiary-color};
+    --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
+    --#{$prefix}tertiary-bg: #{$body-tertiary-bg};
+    --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
+  }
   // scss-docs-end root-body-variables
 
   --#{$prefix}heading-color: #{$headings-color};
@@ -439,39 +443,41 @@
     --#{$prefix}body-bg: #{$body-bg-dark};
     --#{$prefix}body-bg-rgb: #{to-rgb($body-bg-dark)};
 
-    --#{$prefix}emphasis-color: #{$body-emphasis-color-dark};
-    --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};
-
-    --#{$prefix}secondary-color: #{$body-secondary-color-dark};
-    --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-dark)};
-    --#{$prefix}secondary-bg: #{$body-secondary-bg-dark};
-    --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)};
-
-    --#{$prefix}tertiary-color: #{$body-tertiary-color-dark};
-    --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
-    --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
-    --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
-
-    // OUDS mod
-    @each $color, $value in $theme-colors-dark {
-      --#{$prefix}#{$color}: #{$value};
-    }
-
-    @each $color, $value in $theme-colors-rgb-dark {
-      --#{$prefix}#{$color}-rgb: #{$value};
-    }
-    // End mod
-
-    @each $color, $value in $theme-colors-text-dark {
-      --#{$prefix}#{$color}-text-emphasis: #{$value};
-    }
-
-    @each $color, $value in $theme-colors-bg-subtle-dark {
-      --#{$prefix}#{$color}-bg-subtle: #{$value};
-    }
-
-    @each $color, $value in $theme-colors-border-subtle-dark {
-      --#{$prefix}#{$color}-border-subtle: #{$value};
+    @if $enable-bootstrap-compatibility {
+      --#{$prefix}emphasis-color: #{$body-emphasis-color-dark};
+      --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};
+
+      --#{$prefix}secondary-color: #{$body-secondary-color-dark};
+      --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-dark)};
+      --#{$prefix}secondary-bg: #{$body-secondary-bg-dark};
+      --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)};
+
+      --#{$prefix}tertiary-color: #{$body-tertiary-color-dark};
+      --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
+      --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
+      --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
+
+      // OUDS mod
+      @each $color, $value in $theme-colors-dark {
+        --#{$prefix}#{$color}: #{$value};
+      }
+
+      @each $color, $value in $theme-colors-rgb-dark {
+        --#{$prefix}#{$color}-rgb: #{$value};
+      }
+      // End mod
+
+      @each $color, $value in $theme-colors-text-dark {
+        --#{$prefix}#{$color}-text-emphasis: #{$value};
+      }
+
+      @each $color, $value in $theme-colors-bg-subtle-dark {
+        --#{$prefix}#{$color}-bg-subtle: #{$value};
+      }
+
+      @each $color, $value in $theme-colors-border-subtle-dark {
+        --#{$prefix}#{$color}-border-subtle: #{$value};
+      }
     }
 
     // OUDS mod

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
@@ -199,9 +199,7 @@ $utilities: map-merge(
     "border-color": (
       property: border-color,
       class: border,
-      local-vars: (
-        "border-opacity": 1
-      ),
+      // OUDS mod: no local-vars,
       values: $utilities-border-colors,
       bootstrap-compatibility: true
     ),
@@ -217,18 +215,7 @@ $utilities: map-merge(
       values: $border-widths,
       bootstrap-compatibility: true
     ),
-    "border-opacity": (
-      css-var: true,
-      class: border-opacity,
-      values: (
-        10: .1,
-        25: .25,
-        50: .5,
-        75: .75,
-        100: 1
-      ),
-      bootstrap-compatibility: true
-    ),
+    // OUDS mod: no "border-opacity"
     // scss-docs-end utils-borders
     // OUDS mod
     // scss-docs-start utils-borders-ouds
@@ -973,34 +960,22 @@ $utilities: map-merge(
     "color": (
       property: color,
       class: text,
-      local-vars: (
-        "text-opacity": 1
-      ),
+      // OUDS mod: no local-vars
       values: map-merge(
         $utilities-text-colors,
         (
-          "muted": var(--#{$prefix}secondary-color), // Deprecated in Bootstrap
-          "black-50": rgba($black, .5), // Deprecated in Bootstrap
-          "white-50": rgba($white, .5), // Deprecated in Bootstrap
-          "body-secondary": var(--#{$prefix}secondary-color),
-          "body-tertiary": var(--#{$prefix}tertiary-color),
-          "body-emphasis": var(--#{$prefix}emphasis-color),
+          "muted": var(--#{$prefix}color-content-muted), // Deprecated in Bootstrap // OUDS mod: instead of `var(--#{$prefix}secondary-color)`
+          "black-50": var(--#{$prefix}color-content-muted), // Deprecated in Bootstrap // OUDS mod: instead of `rgba($black, .5)`
+          "white-50": var(--#{$prefix}color-content-muted), // Deprecated in Bootstrap // OUDS mod: instead of `rgba($white, .5)`
+          "body-secondary": var(--#{$prefix}color-content-muted), // OUDS mod: instead of `var(--#{$prefix}secondary-color)`
+          "body-tertiary": var(--#{$prefix}color-content-muted), // OUDS mod: instead of `var(--#{$prefix}tertiary-color)`
+          "body-emphasis": var(--#{$prefix}color-content-default), // OUDS mod: instead of `var(--#{$prefix}emphasis-color)`
           // OUDS mod: no "reset"
         )
       ),
       bootstrap-compatibility: true
     ),
-    "text-opacity": (
-      css-var: true,
-      class: text-opacity,
-      values: (
-        25: .25,
-        50: .5,
-        75: .75,
-        100: 1
-      ),
-      bootstrap-compatibility: true
-    ),
+    // OUDS mod: no "text-opacity"
     "text-color": (
       property: color,
       class: text,
@@ -1069,31 +1044,18 @@ $utilities: map-merge(
     "background-color": (
       property: background-color,
       class: bg,
-      local-vars: (
-        "bg-opacity": 1
-      ),
+      // OUDS mod: no local-vars
       values: map-merge(
         $utilities-bg-colors,
         (
           // OUDS mod: no "transparent"
-          "body-secondary": rgba(var(--#{$prefix}secondary-bg-rgb), var(--#{$prefix}bg-opacity)),
-          "body-tertiary": rgba(var(--#{$prefix}tertiary-bg-rgb), var(--#{$prefix}bg-opacity)),
+          "body-secondary": var(--#{$prefix}color-bg-secondary), // OUDS mod: instead of `rgba(var(--#{$prefix}secondary-bg-rgb), var(--#{$prefix}bg-opacity))`
+          "body-tertiary": var(--#{$prefix}color-bg-secondary), // OUDS mod: instead of `rgba(var(--#{$prefix}tertiary-bg-rgb), var(--#{$prefix}bg-opacity))`
         )
       ),
       bootstrap-compatibility: true,
     ),
-    "bg-opacity": (
-      css-var: true,
-      class: bg-opacity,
-      values: (
-        10: .1,
-        25: .25,
-        50: .5,
-        75: .75,
-        100: 1
-      ),
-      bootstrap-compatibility: true,
-    ),
+    // OUDS mod: no "bg-opacity"
     "subtle-background-color": (
       property: background-color,
       class: bg,