Add background utilities to the Colors tokens PR

Orange-OpenSource · Dec 10, 2024 · 6b2720a · 6b2720a
1 parent b6b2f0f
commit 6b2720a
Show file tree

Hide file tree

Showing 30 changed files with 278 additions and 68 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/_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/_root.scss b/scss/_root.scss
@@ -2,7 +2,6 @@
 :root,
 [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!

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/tokens/_semantic-colors-custom-props.scss b/scss/tokens/_semantic-colors-custom-props.scss
@@ -1,3 +1,4 @@
+// scss-docs-start ouds-semantic-css-color
 :root,
 [data-bs-theme="light"] {
   --#{$prefix}color-opacity-invisible-black: #{$ouds-color-opacity-invisible-black-light};
@@ -104,6 +105,7 @@
   --#{$prefix}color-decorative-skin-tint-800: #{$ouds-color-decorative-skin-tint-800-light};
   --#{$prefix}color-decorative-skin-tint-900: #{$ouds-color-decorative-skin-tint-900-light};
 }
+// scss-docs-end ouds-semantic-css-color
 
 [data-bs-theme="dark"] {
   --#{$prefix}color-opacity-invisible-black: #{$ouds-color-opacity-invisible-black-dark};

diff --git a/site/assets/scss/_callouts.scss b/site/assets/scss/_callouts.scss
@@ -10,7 +10,7 @@
   margin-top: $spacer; // OUDS mod
   margin-bottom: $spacer; // OUDS mod
   color: var(--bd-callout-color, inherit);
-  background-color: var(--bd-callout-bg, var(--bs-gray-200)); // OUDS mod
+  background-color: var(--bd-callout-bg, var(--#{$prefix}color-surface-status-neutral)); // OUDS mod
   border-left: .25rem solid var(--bd-callout-border, var(--bs-gray-200)); // OUDS mod
 
   h4 {
@@ -32,7 +32,7 @@
 @each $variant in $bd-callout-variants {
   .bd-callout-#{$variant} {
     --bd-callout-color: var(--bs-emphasis-color); // OUDS mod: instead of `var(--bs-#{$variant}-text-emphasis)`
-    --bd-callout-bg: var(--bs-secondary-bg); // OUDS mod: instead of `var(--bs-#{$variant}-bg-subtle)`
+    --bd-callout-bg: var(--#{$prefix}color-surface-status-#{if($variant == "danger", negative, $variant)}-muted); // OUDS mod: instead of `var(--bs-#{$variant}-bg-subtle)`
     --bd-callout-border: var(--bs-#{$variant}-border-subtle);
   }
 }
diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
@@ -207,7 +207,7 @@
     width: 9rem; // OUDS mod
     font-weight: $font-weight-bold; // OUDS mod
     color: var(--bs-secondary-color);
-    background-color: var(--bs-secondary-bg); // OUDS mod: instead of `var(--bs-tertiary-bg)`
+    background-color: var(--#{$prefix}color-bg-secondary); // OUDS mod: instead of `var(--bs-tertiary-bg)`
     border: var(--bs-border-width) solid var(--bs-color-border-emphasized); // OUDS mod: instead of `var(--bs-border-width) solid var(--bs-border-color)`
 
     > div {
@@ -291,7 +291,7 @@
     width: 5rem;
     height: 5rem;
     margin: .25rem;
-    background-color: var(--bs-tertiary-bg);
+    background-color: var(--#{$prefix}color-bg-secondary);
   }
 }
 
@@ -307,13 +307,13 @@
 
   .position-relative {
     height: 12.5rem;
-    background-color: var(--bs-tertiary-bg);
+    background-color: var(--#{$prefix}color-bg-secondary);
   }
 
   .position-absolute {
     width: 2rem;
     height: 2rem;
-    background-color: var(--bs-body-color);
+    background-color: var(--#{$prefix}color-bg-emphasized);
     @include border-radius();
   }
 }

diff --git a/site/assets/scss/_masthead.scss b/site/assets/scss/_masthead.scss
@@ -27,7 +27,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    background-color: rgba(var(--bs-body-color-rgb), .075);
+    background-color: var(--#{$prefix}color-bg-secondary);
     @include border-radius(.5rem);
 
     @include media-breakpoint-up(lg) {

diff --git a/site/assets/scss/_search.scss b/site/assets/scss/_search.scss
@@ -130,7 +130,7 @@
 }
 
 .DocSearch-Commands-Key {
-  background-color: var(--bs-highlight-color);
+  background-color: var(--#{$prefix}color-action-highlighted);
 }
 
 .DocSearch-Hits {
@@ -152,18 +152,18 @@
 
   mark {
     color: var(--bs-highlight-color);
-    background: var(--bs-highlight-bg);
+    background: var(--bs-highlight-bg); // TODO LM
   }
 
   &[aria-selected="true"] {
     a {
-      background-color: var(--bs-highlight-bg);
+      background-color: var(--#{$prefix}color-action-highlighted);
     }
 
     mark {
       --docsearch-hit-active-color: var(--bs-body-color);
       text-decoration: none;
-      background: var(--bs-highlight-color);
+      background: var(--#{$prefix}color-action-highlighted);
     }
   }
 }

diff --git a/site/assets/scss/_subnav.scss b/site/assets/scss/_subnav.scss
@@ -3,6 +3,6 @@
 .bd-subnavbar {
   // The z-index is needed for the dropdown to stay on top of the content
   z-index: $zindex-dropdown - 1; // goes under the navbar + dropdown.
-  background-color: rgba(var(--bs-body-bg-rgb), .95);
+  background-color: var(--#{$prefix}color-bg-primary);
   box-shadow: 0 .5rem 1rem rgba(var(--bs-body-color-rgb), .05), inset 0 -1px 0 rgba(var(--bs-body-color-rgb), .15);
 }
diff --git a/site/assets/scss/_tarteaucitron.scss b/site/assets/scss/_tarteaucitron.scss
@@ -142,7 +142,7 @@
   bottom: add($spacer * -1.5, var(--bs-border-width));
   padding: $spacer / 4 $spacer / 2;
   color: $white;
-  background-color: $black;
+  background-color: var(--#{$prefix}color-always-black);
 }
 
 @include tac("Allow", true) {

diff --git a/site/assets/scss/_toc.scss b/site/assets/scss/_toc.scss
@@ -65,7 +65,7 @@
   @include media-breakpoint-down(md) {
     nav {
       padding: $ouds-space-fixed-medium; // OUDS mod: instead of `1.25rem 1.25rem 1.25rem 1rem`
-      background-color: var(--bs-tertiary-bg);
+      background-color: var(--#{$prefix}color-bg-secondary);
       border: 1px solid var(--bs-border-color);
       @include border-radius(var(--bs-border-radius));
     }

diff --git a/site/assets/scss/_variables.scss b/site/assets/scss/_variables.scss
@@ -27,7 +27,7 @@ $bd-callout-variants: info, warning, danger !default;
   // OUDS mod: no --bd-sidebar-link-bg
   // OUDS mod: no --bd-callout-link
   // OUDS mod: no --bd-callout-code-color
-  --bd-pre-bg: var(--bs-tertiary-bg);
+  --bd-pre-bg: var(--#{$prefix}color-bg-secondary);
 }
 
 @include color-mode(dark, true) {
@@ -39,7 +39,7 @@ $bd-callout-variants: info, warning, danger !default;
   // OUDS mod: no --bd-sidebar-link-bg
   // OUDS mod: no --bd-callout-link
   // OUDS mod: no --bd-callout-code-color
-  --bd-pre-bg: var(--bs-tertiary-bg); // OUDS mod: instead of `#{adjust-color($gray-900, $lightness: -2.5%)}`
+  --bd-pre-bg: var(--#{$prefix}color-bg-secondary); // OUDS mod: instead of `#{adjust-color($gray-900, $lightness: -2.5%)}`
 }
 
 // OUDS mod

diff --git a/site/content/docs/0.0/customize/color-palette.md b/site/content/docs/0.0/customize/color-palette.md
@@ -40,7 +40,7 @@ This section exposes all the existing colors inside the OUDS Web palette. These
         </button>
         <figcaption class="py-shortest">
           <code class="user-select-all">{{ $color.hex }}</code>
-          <hr class="my-shortest bg-transparent border-top" style="border-color:{{ $color.hex }} !important">
+          <hr class="my-shortest border-top" style="border-color:{{ $color.hex }} !important">
           <var class="user-select-all">{{- $color.variable -}}</var>
         </figcaption>
       </figure>
@@ -128,7 +128,8 @@ Here's how you should not use these in your Sass:
 }
 ```
 
-<!-- [Color]({{< docsref "/utilities/colors" >}}) and [background]({{< docsref "/utilities/background" >}}) utility classes are also available for setting `color` and `background-color`. -->
+<!-- [Color]({{< docsref "/utilities/colors" >}}) and -->
+[Background]({{< docsref "/utilities/background" >}}) utility classes are also available for setting <!--`color` and -->`background-color`.
 </details>
 
 ## CSS

diff --git a/site/content/docs/0.0/examples/grid-system/index.html b/site/content/docs/0.0/examples/grid-system/index.html
@@ -29,7 +29,7 @@ <h2>Legend</h2>
       <span class="bg-col legend border me-short"></span>Columns color (<code>#a5daf3</code>)
     </p>
     <p class="d-flex align-items-center">
-      <span class="bg-white legend border me-short"></span>Gutters color (<code>#fff</code>)
+      <span class="bg-always-white legend border me-short"></span>Gutters color (<code>#fff</code>)
     </p>
   </div>
 

diff --git a/site/content/docs/0.0/helpers/clearfix.md b/site/content/docs/0.0/helpers/clearfix.md
@@ -33,7 +33,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.
 
 {{< example >}}
-<div class="bg-info clearfix">
+<div class="bg-status-info-emphasized clearfix">
   <button type="button" class="btn btn-secondary float-start">Example Button floated left</button>
   <button type="button" class="btn btn-secondary float-end">Example Button floated right</button>
 </div>

diff --git a/site/content/docs/0.0/helpers/icon.md b/site/content/docs/0.0/helpers/icon.md
@@ -314,7 +314,7 @@ Here are the rules to follow for decorative icons. Be careful using these icons'
 
 <div class="bd-example">
   <div class="d-flex mb-medium">
-    <div class="bg-secondary d-inline-flex align-items-center justify-content-center me-medium flex-shrink-0" style="width: 6.25rem; height: 6.25rem;">
+    <div class="bg-emphasized d-inline-flex align-items-center justify-content-center me-medium flex-shrink-0" style="width: 6.25rem; height: 6.25rem;">
       <svg class="decorative-2xs-icon text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
         <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
       </svg>
@@ -325,7 +325,7 @@ Here are the rules to follow for decorative icons. Be careful using these icons'
     </div>
   </div>
   <div class="d-flex mb-medium">
-    <div class="bg-secondary d-inline-flex align-items-center justify-content-center me-medium flex-shrink-0" style="width: 6.25rem; height: 6.25rem;">
+    <div class="bg-emphasized d-inline-flex align-items-center justify-content-center me-medium flex-shrink-0" style="width: 6.25rem; height: 6.25rem;">
       <svg class="decorative-xs-icon text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
         <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
       </svg>
@@ -336,7 +336,7 @@ Here are the rules to follow for decorative icons. Be careful using these icons'
     </div>
   </div>
   <div class="d-flex mb-medium">
-    <div class="bg-secondary d-inline-flex align-items-center justify-content-center me-medium flex-shrink-0" style="width: 6.25rem; height: 6.25rem;">
+    <div class="bg-emphasized d-inline-flex align-items-center justify-content-center me-medium flex-shrink-0" style="width: 6.25rem; height: 6.25rem;">
       <svg class="decorative-sm-icon text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
         <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
       </svg>
@@ -347,7 +347,7 @@ Here are the rules to follow for decorative icons. Be careful using these icons'
     </div>
   </div>
   <div class="d-flex mb-medium">
-    <div class="bg-secondary d-inline-flex align-items-center justify-content-center me-medium flex-shrink-0" style="width: 6.25rem; height: 6.25rem;">
+    <div class="bg-emphasized d-inline-flex align-items-center justify-content-center me-medium flex-shrink-0" style="width: 6.25rem; height: 6.25rem;">
       <svg class="decorative-md-icon text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
         <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
       </svg>
@@ -358,7 +358,7 @@ Here are the rules to follow for decorative icons. Be careful using these icons'
     </div>
   </div>
   <div class="d-flex mb-medium">
-    <div class="bg-secondary d-inline-flex align-items-center justify-content-center me-medium flex-shrink-0" style="width: 6.25rem; height: 6.25rem;">
+    <div class="bg-emphasized d-inline-flex align-items-center justify-content-center me-medium flex-shrink-0" style="width: 6.25rem; height: 6.25rem;">
       <svg class="decorative-lg-icon text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
         <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
       </svg>
@@ -369,7 +369,7 @@ Here are the rules to follow for decorative icons. Be careful using these icons'
     </div>
   </div>
   <div class="d-flex mb-medium">
-    <div class="bg-secondary d-inline-flex align-items-center justify-content-center me-medium flex-shrink-0" style="width: 6.25rem; height: 6.25rem;">
+    <div class="bg-emphasized d-inline-flex align-items-center justify-content-center me-medium flex-shrink-0" style="width: 6.25rem; height: 6.25rem;">
       <svg class="decorative-xl-icon text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
         <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
       </svg>
@@ -380,7 +380,7 @@ Here are the rules to follow for decorative icons. Be careful using these icons'
     </div>
   </div>
   <div class="d-flex mb-medium">
-    <div class="bg-secondary d-inline-flex align-items-center justify-content-center me-medium flex-shrink-0" style="width: 6.25rem; height: 6.25rem;">
+    <div class="bg-emphasized d-inline-flex align-items-center justify-content-center me-medium flex-shrink-0" style="width: 6.25rem; height: 6.25rem;">
       <svg class="decorative-2xl-icon text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
         <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
       </svg>