Add background utilities to the Colors tokens PR

Orange-OpenSource · Dec 16, 2024 · 86ae614 · 86ae614
1 parent b6b2f0f
commit 86ae614
Show file tree

Hide file tree

Showing 42 changed files with 1,211 additions and 102 deletions.
diff --git a/hugo.yml b/hugo.yml
@@ -80,6 +80,8 @@ params:
   icons_license:                    "https://design.orange.com/0c1af118d/p/92bb17-usage/t/63532c"
   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
 
   algolia:
     appId:                          "F4PKENW3TB"

diff --git a/js/tests/visual/dropdown.html b/js/tests/visual/dropdown.html
@@ -10,7 +10,7 @@
     <div class="container-fluid">
       <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
 
-      <nav class="navbar navbar-expand-md bg-light">
+      <nav class="navbar navbar-expand-md bg-always-white">
         <a class="navbar-brand" href="#">Navbar</a>
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>

diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html
@@ -13,7 +13,7 @@
     </style>
   </head>
   <body>
-    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+    <nav class="navbar navbar-expand-lg navbar-dark bg-always-black">
       <div class="container-fluid">
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>

diff --git a/js/tests/visual/scrollspy.html b/js/tests/visual/scrollspy.html
@@ -10,7 +10,7 @@
     </style>
   </head>
   <body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="70">
-    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
+    <nav class="navbar navbar-expand-md navbar-dark bg-always-black fixed-top">
       <a class="navbar-brand text-white" href="#">Scrollspy test</a>
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>

diff --git a/js/tests/visual/toast.html b/js/tests/visual/toast.html
@@ -28,7 +28,7 @@ <h1>Toast <small>Bootstrap Visual Test</small></h1>
     <div class="notifications">
       <div id="toastAutoHide" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="2000">
         <div class="toast-header">
-          <span class="d-block bg-primary rounded me-short" style="width: 20px; height: 20px;"></span>
+          <span class="d-block bg-brand-primary rounded me-short" style="width: 20px; height: 20px;"></span>
           <strong class="me-auto">Bootstrap</strong>
           <small>11 mins ago</small>
         </div>
@@ -39,7 +39,7 @@ <h1>Toast <small>Bootstrap Visual Test</small></h1>
 
       <div class="toast" data-bs-autohide="false" role="alert" aria-live="assertive" aria-atomic="true">
         <div class="toast-header">
-          <span class="d-block bg-primary rounded me-short" style="width: 20px; height: 20px;"></span>
+          <span class="d-block bg-brand-primary rounded me-short" style="width: 20px; height: 20px;"></span>
           <strong class="me-auto">Bootstrap</strong>
           <small class="text-body-secondary">2 seconds ago</small>
           <button type="button" class="ms-short mb-shortest btn-close" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button><!--OUDS mod: a11y-->

diff --git a/scss/_config.scss b/scss/_config.scss
@@ -1,3 +1,6 @@
 // Configuration file for OUDS Web
 
 $prefix: bs- !default;
+$color-mode-type: data !default; // `data` or `media-query`
+
+$ouds-root-selector: ":root" !default;
diff --git a/scss/_functions.scss b/scss/_functions.scss
@@ -2,6 +2,10 @@
 //
 // Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
 
+// OUDS mod: add color modes mixin
+@import "mixins/color-mode";
+// End mod
+
 // Ascending
 // Used to evaluate Sass maps like our grid breakpoints.
 @mixin _assert-ascending($map, $map-name) {

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

diff --git a/scss/_maps.scss b/scss/_maps.scss
@@ -116,6 +116,31 @@ $ouds-opacities: (
   "opaque":     $ouds-opacity-opaque
 ) !default;
 // scss-docs-end ouds-maps-opacities
+
+// scss-docs-start ouds-maps-opacities
+$ouds-backgrounds: (
+  "primary": var(--#{$prefix}color-bg-primary),
+  "secondary": var(--#{$prefix}color-bg-secondary),
+  "tertiary": var(--#{$prefix}color-bg-tertiary),
+  "emphasized": var(--#{$prefix}color-bg-emphasized),
+  "brand-primary": var(--#{$prefix}color-surface-brand-primary),
+  "status-neutral-emphasized": var(--#{$prefix}color-surface-status-neutral-emphasized),
+  "status-neutral-muted": var(--#{$prefix}color-surface-status-neutral-muted),
+  "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),
+  "transparent": transparent,
+) !default;
+// scss-docs-end ouds-maps-opacities
 // End mod
 
 // Re-assigned maps

diff --git a/scss/_mixins.scss b/scss/_mixins.scss
@@ -10,7 +10,7 @@
 
 // Helpers
 @import "mixins/breakpoints";
-@import "mixins/color-mode";
+// @import "mixins/color-mode";
 @import "mixins/color-scheme";
 @import "mixins/fonts"; // OUDS mod
 @import "mixins/image";

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.
 
-:root {
+#{$ouds-root-selector} {
   @if $font-size-root != null {
     @include font-size(var(--#{$prefix}root-font-size));
   }

diff --git a/scss/_root.scss b/scss/_root.scss
@@ -1,15 +1,13 @@
 // OUDS mod
-:root,
+#{$ouds-root-selector},
 [data-bs-theme] {
   color: var(--#{$prefix}body-color);
-  background-color: var(--#{$prefix}body-bg);
 }
 
-// Note that some of the following variables in `:root, [data-bs-theme="light"]` could be extracted into `:root` only selector since they are not modified by other color modes!
+// 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
 
-:root,
-[data-bs-theme="light"] {
+@include color-mode(light, true) {
   color-scheme: light; // OUDS mod
 
   // Note: Custom variable values only support SassScript inside `#{}`.

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
@@ -1058,11 +1058,12 @@ $utilities: map-merge(
       values: map-merge(
         $utilities-bg-colors,
         (
-          "transparent": transparent,
+          // 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)),
         )
-      )
+      ),
+      bootstrap-compatibility: true,
     ),
     "bg-opacity": (
       css-var: true,
@@ -1073,14 +1074,23 @@ $utilities: map-merge(
         50: .5,
         75: .75,
         100: 1
-      )
+      ),
+      bootstrap-compatibility: true,
     ),
     "subtle-background-color": (
       property: background-color,
       class: bg,
-      values: $utilities-bg-subtle
+      values: $utilities-bg-subtle,
+      bootstrap-compatibility: true,
     ),
     // scss-docs-end utils-bg-color
+    // scss-docs-start utils-bg-color-ouds
+    "background-color-ouds": (
+      property: background-color,
+      class: bg,
+      values: $ouds-backgrounds,
+    ),
+    // scss-docs-end utils-bg-color-ouds
     "gradient": (
       property: background-image,
       class: bg,

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -424,9 +424,9 @@ $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`
+// $color-mode-type:             data !default; // `data` or `media-query`
 
-// OUDS mod: Prefix for :root CSS variables has been moved to `_config.scss`
+// OUDS mod: Prefix for $ouds-root-selector CSS variables has been moved to `_config.scss`
 
 // Gradient
 //

diff --git a/scss/mixins/_color-mode.scss b/scss/mixins/_color-mode.scss
@@ -1,9 +1,11 @@
+// Kept it quite simple using only light and dark modes, but you can extend it like in https://codepen.io/louismaximepiton/pen/vYbEvLO for example, to allow more color modes.
+// OUDS mod: add `$invert-mode`, root mode and root-inverted mode
 // scss-docs-start color-mode-mixin
-@mixin color-mode($mode: light, $root: false) {
+@mixin color-mode($mode: light, $root: false, $inverted-mode: if($mode == light, dark, light)) {
   @if $color-mode-type == "media-query" {
     @if $root == true {
       @media (prefers-color-scheme: $mode) {
-        :root {
+        #{$ouds-root-selector} {
           @content;
         }
       }
@@ -13,8 +15,19 @@
       }
     }
   } @else {
-    [data-bs-theme="#{$mode}"] {
-      @content;
+    @if $root == true and $mode == light {
+      #{$ouds-root-selector},
+      [data-bs-theme="#{$mode}"],
+      #{$ouds-root-selector}[data-bs-theme="#{$mode}"] [data-bs-theme="root"],
+      #{$ouds-root-selector}[data-bs-theme="#{$inverted-mode}"] [data-bs-theme="root-inverted"] {
+        @content;
+      }
+    } @else {
+      [data-bs-theme="#{$mode}"],
+      #{$ouds-root-selector}[data-bs-theme="#{$mode}"] [data-bs-theme="root"],
+      #{$ouds-root-selector}[data-bs-theme="#{$inverted-mode}"] [data-bs-theme="root-inverted"] {
+        @content;
+      }
     }
   }
 }