Merge branch 'ouds/main' into ouds/main-chore-merge-from-1751ffc

Orange-OpenSource · Jan 31, 2025 · 51e3f9c · 51e3f9c
2 parents dfb4381 + 80f3518
commit 51e3f9c
Show file tree

Hide file tree

Showing 176 changed files with 10,102 additions and 1,874 deletions.
diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
@@ -2,11 +2,11 @@
   "files": [
     {
       "path": "./dist/css/ouds-web-bootstrap.css",
-      "maxSize": "62.75 kB"
+      "maxSize": "64.0 kB"
     },
     {
       "path": "./dist/css/ouds-web-bootstrap.min.css",
-      "maxSize": "59.5 kB"
+      "maxSize": "61.0 kB"
     },
     {
       "path": "./dist/css/ouds-web-grid.css",
@@ -18,27 +18,27 @@
     },
     {
       "path": "./dist/css/ouds-web-reboot.css",
-      "maxSize": "5.75 kB"
+      "maxSize": "7.0 kB"
     },
     {
       "path": "./dist/css/ouds-web-reboot.min.css",
-      "maxSize": "5.5 kB"
+      "maxSize": "6.5 kB"
     },
     {
       "path": "./dist/css/ouds-web-utilities.css",
-      "maxSize": "22.25 kB"
+      "maxSize": "23.0 kB"
     },
     {
       "path": "./dist/css/ouds-web-utilities.min.css",
-      "maxSize": "21.0 kB"
+      "maxSize": "22.0 kB"
     },
     {
       "path": "./dist/css/ouds-web.css",
-      "maxSize": "56.25 kB"
+      "maxSize": "57.25 kB"
     },
     {
       "path": "./dist/css/ouds-web.min.css",
-      "maxSize": "53.0 kB"
+      "maxSize": "54.0 kB"
     },
     {
       "path": "./dist/js/ouds-web.bundle.js",

diff --git a/build/.pa11yci.json b/build/.pa11yci.json
@@ -15,7 +15,7 @@
       "axe"
     ],
     "useIncognitoBrowserContext": false,
-    "hideElements": "iframe, #text-decoration + p + div a.text-decoration-none, .accordion-collapse, #offcanvas, #offcanvasDark, #offcanvasResponsive, #bdSidebar, .overflow-y-scroll, .overflow-y-auto, .overflow-x-scroll, .overflow-x-auto, .table-responsive, fieldset.star-rating[disabled]",
+    "hideElements": "iframe, #text-decoration + p + div a.text-decoration-none, .accordion-collapse, #offcanvas, #offcanvasDark, #offcanvasResponsive, #bdSidebar, #sidebarMenu, .overflow-y-scroll, .overflow-y-auto, .overflow-x-scroll, .overflow-x-auto, .table-responsive, fieldset.star-rating[disabled]",
     "ignore": [
       "color-contrast"
     ]

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: 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" data-bs-theme="light">
         <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,13 +13,13 @@
     </style>
   </head>
   <body>
-    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+    <nav class="navbar navbar-expand-lg navbar-dark bg-always-black" data-bs-theme="dark">
       <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>
         </button>
         <div class="collapse navbar-collapse" id="navbarResponsive">
-          <a class="navbar-brand text-white" href="#">This shouldn't jump!</a>
+          <a class="navbar-brand text-always-on-black" href="#">This shouldn't jump!</a>
           <ul class="navbar-nav">
             <li class="nav-item">
               <a class="nav-link active" href="#" aria-current="page">Home</a>
@@ -188,7 +188,7 @@ <h1 class="modal-title h4" id="slowModalLabel">Lorem slowly</h1>
 
       <br><br>
 
-      <div class="text-bg-dark p-short" id="tall" style="display: none;">
+      <div class="text-bg-always-black p-short" id="tall" style="display: none;" data-bs-theme="dark">
         Tall body content to force the page to have a scrollbar.
       </div>
 
@@ -212,7 +212,7 @@ <h1 class="modal-title h4" id="slowModalLabel">Lorem slowly</h1>
 
       function reportFirefoxTestResult(result) {
         if (!firefoxTestDone) {
-          ffBugTestResult.classList.add(result ? 'text-success' : 'text-danger')
+          ffBugTestResult.classList.add(result ? 'text-status-positive' : 'text-status-negative')
           ffBugTestResult.textContent = result ? 'PASS' : 'FAIL'
         }
       }

diff --git a/js/tests/visual/scrollspy.html b/js/tests/visual/scrollspy.html
@@ -10,8 +10,8 @@
     </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">
-      <a class="navbar-brand text-white" href="#">Scrollspy test</a>
+    <nav class="navbar navbar-expand-md navbar-dark bg-always-black fixed-top" data-bs-theme="dark">
+      <a class="navbar-brand text-always-on-black" 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>
       </button>

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,9 +39,9 @@ <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>
+          <small class="text-muted">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-->
         </div>
         <div class="toast-body">

diff --git a/js/tests/visual/tooltip.html b/js/tests/visual/tooltip.html
@@ -20,7 +20,7 @@
     <div class="container-fluid">
       <h1>Tooltip <small>OUDS Web Visual Test</small></h1>
 
-      <p class="text-body-secondary">Tight pants next level keffiyeh <a href="#" data-bs-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-bs-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-bs-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-bs-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.</p>
+      <p class="text-muted">Tight pants next level keffiyeh <a href="#" data-bs-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-bs-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-bs-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-bs-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.</p>
 
       <hr>
 

diff --git a/scss/_accordion.scss b/scss/_accordion.scss
@@ -82,7 +82,7 @@
     // OUDS mod
     &[data-focus-visible-added] {
       outline-offset: add($focus-visible-outer-offset, var(--#{$prefix}accordion-border-width));
-      box-shadow: 0 0 0 add(var(--#{$prefix}accordion-border-width), $focus-visible-inner-width) var(--#{$prefix}focus-visible-inner-color);
+      box-shadow: 0 0 0 add(var(--#{$prefix}accordion-border-width), $focus-visible-inner-width) var(--#{$prefix}color-border-focus-inset);
     }
     // End mod
   }

diff --git a/scss/_button-group.scss b/scss/_button-group.scss
@@ -142,11 +142,11 @@
   .btn.active + &,
   &:active + * + .btn,
   &.active + * + .btn {
-    border-color: $supporting-orange;
+    border-color: $ouds-color-orange-500;
   }
 
   .btn-group.show > &:not(:focus):not(:active)::before {
-    color: $supporting-orange;
+    color: $ouds-color-orange-500;
     background-color: currentcolor;
   }
   // End mod

diff --git a/scss/_buttons.scss b/scss/_buttons.scss
@@ -105,7 +105,7 @@
 
 // scss-docs-start btn-variant-loops
 .btn-primary {
-  @include button-variant($supporting-orange, $supporting-orange, $black, $active-background: var(--#{$prefix}highlight-color), $active-border: var(--#{$prefix}border-color), $active-color: var(--#{$prefix}body-color));
+  @include button-variant($ouds-color-orange-500, $ouds-color-orange-500, $black, $active-background: var(--#{$prefix}highlight-color), $active-border: var(--#{$prefix}border-color), $active-color: var(--#{$prefix}body-color));
 }
 
 .btn-success {
@@ -151,7 +151,7 @@
 
 // OUDS mod: OUDS Web-specific no outline button
 .btn-no-outline {
-  @include button-variant(transparent, transparent, var(--#{$prefix}body-color), transparent, var(--#{$prefix}border-color-subtle), var(--#{$prefix}body-color), transparent, var(--#{$prefix}border-color-subtle), var(--#{$prefix}primary), transparent, transparent, var(--#{$prefix}disabled-color));
+  @include button-variant(transparent, transparent, var(--#{$prefix}body-color), transparent, var(--#{$prefix}color-border-emphasized), var(--#{$prefix}body-color), transparent, var(--#{$prefix}color-border-emphasized), var(--#{$prefix}primary), transparent, transparent, var(--#{$prefix}color-content-disabled));
 
   .btn-check:checked + &.btn {
     border-color: transparent;
@@ -166,7 +166,7 @@
 
 // OUDS mod: OUDS Web-specific toggle button
 .btn-toggle {
-  @include button-variant(transparent, var(--#{$prefix}border-color-subtle), var(--#{$prefix}body-color), transparent, var(--#{$prefix}border-color-subtle), var(--#{$prefix}primary), $supporting-orange, $supporting-orange, $black, transparent, var(--#{$prefix}border-color-subtle), var(--#{$prefix}disabled-color));
+  @include button-variant(transparent, var(--#{$prefix}color-border-emphasized), var(--#{$prefix}body-color), transparent, var(--#{$prefix}color-border-emphasized), var(--#{$prefix}primary), $ouds-color-orange-500, $ouds-color-orange-500, $black, transparent, var(--#{$prefix}color-border-emphasized), var(--#{$prefix}color-content-disabled));
 
   .btn-check:checked + & {
     color: var(--#{$prefix}highlight-color);
@@ -201,7 +201,7 @@
 
 // OUDS mod: OUDS Web-specific dropdown button
 .btn-dropdown {
-  @include button-variant(var(--#{$prefix}body-bg), var(--#{$prefix}border-color-subtle), var(--#{$prefix}body-color), var(--#{$prefix}body-bg), var(--#{$prefix}border-color-subtle), var(--#{$prefix}body-color), var(--#{$prefix}body-bg), var(--#{$prefix}body-color), var(--#{$prefix}body-color), var(--#{$prefix}body-bg), var(--#{$prefix}disabled-color), var(--#{$prefix}disabled-color));
+  @include button-variant(var(--#{$prefix}body-bg), var(--#{$prefix}color-border-emphasized), var(--#{$prefix}body-color), var(--#{$prefix}body-bg), var(--#{$prefix}color-border-emphasized), var(--#{$prefix}body-color), var(--#{$prefix}body-bg), var(--#{$prefix}body-color), var(--#{$prefix}body-color), var(--#{$prefix}body-bg), var(--#{$prefix}color-content-disabled), var(--#{$prefix}color-content-disabled));
 }
 // End mod
 
@@ -270,7 +270,7 @@
   --#{$prefix}btn-active-color: var(--#{$prefix}highlight-color);
   --#{$prefix}btn-active-bg: var(--#{$prefix}highlight-bg);
   --#{$prefix}btn-active-border-color: var(--#{$prefix}border-color);
-  --#{$prefix}btn-disabled-color: var(--#{$prefix}disabled-color);
+  --#{$prefix}btn-disabled-color: var(--#{$prefix}color-content-disabled);
   --#{$prefix}btn-disabled-bg: transparent;
   @include border-radius(50%, 50%);
   @include button-icon(var(--#{$prefix}network-logo));

diff --git a/scss/_color-palette.scss b/scss/_color-palette.scss
diff --git a/scss/_config.scss b/scss/_config.scss
@@ -0,0 +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/_dropdown.scss b/scss/_dropdown.scss
@@ -211,7 +211,7 @@
   &:focus {
     &[data-focus-visible-added] {
       outline-offset: -$focus-visible-outer-width;
-      box-shadow: inset 0 0 0 add($focus-visible-inner-width, $focus-visible-outer-width) var(--#{$prefix}focus-visible-inner-color);
+      box-shadow: inset 0 0 0 add($focus-visible-inner-width, $focus-visible-outer-width) var(--#{$prefix}color-border-focus-inset);
     }
   }
   // End mod

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} { // OUDS mod: instead of `:root`
   @each $name, $value in $grid-breakpoints {
     --#{$prefix}breakpoint-#{$name}: #{$value};
   }

diff --git a/scss/_helpers.scss b/scss/_helpers.scss
@@ -1,6 +1,6 @@
 @import "helpers/clearfix";
 @import "helpers/color-bg";
-@import "helpers/colored-links";
+// OUDS mod: no @import "helpers/colored-links";
 @import "helpers/focus-ring";
 @import "helpers/icon";
 @import "helpers/icon-link";

diff --git a/scss/_list-group.scss b/scss/_list-group.scss
@@ -141,11 +141,11 @@
   &:focus {
     &[data-focus-visible-added] {
       outline-offset: subtract(-$focus-visible-outer-width, var(--#{$prefix}list-group-border-width));
-      box-shadow: inset 0 0 0 add($focus-visible-inner-width, $focus-visible-outer-width) var(--#{$prefix}focus-visible-inner-color);
+      box-shadow: inset 0 0 0 add($focus-visible-inner-width, $focus-visible-outer-width) var(--#{$prefix}color-border-focus-inset);
 
       &.active {
-        outline-color: var(--#{$prefix}focus-visible-inner-color);
-        box-shadow: inset 0 0 0 add($focus-visible-inner-width, $focus-visible-outer-width) var(--#{$prefix}focus-visible-outer-color);
+        outline-color: var(--#{$prefix}color-border-focus-inset);
+        box-shadow: inset 0 0 0 add($focus-visible-inner-width, $focus-visible-outer-width) var(--#{$prefix}color-border-focus);
       }
     }
   }