Dark mode: colored buttons, outline, and change of rendering (#2301)

Co-authored-by: louismaxime.piton <[email protected]>
Orange-OpenSource · Oct 18, 2023 · 8ae7abe · 8ae7abe
1 parent 3cdfed2
commit 8ae7abe
Show file tree

Hide file tree

Showing 25 changed files with 442 additions and 240 deletions.
diff --git a/js/tests/unit/quantity-selector.spec.js b/js/tests/unit/quantity-selector.spec.js
@@ -83,10 +83,10 @@ describe('QuantitySelector', () => {
     fixtureEl.innerHTML = [
       '<div class="input-group quantity-selector">',
       '  <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="1" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
       '    <span class="visually-hidden">Step down</span>',
       '  </button>',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
       '    <span class="visually-hidden">Step up</span>',
       '  </button>',
       '</div>'
@@ -104,10 +104,10 @@ describe('QuantitySelector', () => {
     fixtureEl.innerHTML = [
       '<div class="input-group quantity-selector">',
       '  <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="1" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
       '    <span class="visually-hidden">Step down</span>',
       '  </button>',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
       '    <span class="visually-hidden">Step up</span>',
       '  </button>',
       '</div>'
@@ -125,10 +125,10 @@ describe('QuantitySelector', () => {
     fixtureEl.innerHTML = [
       '<div class="input-group quantity-selector">',
       '  <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="9" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
       '    <span class="visually-hidden">Step down</span>',
       '  </button>',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
       '    <span class="visually-hidden">Step up</span>',
       '  </button>',
       '</div>'
@@ -152,10 +152,10 @@ describe('QuantitySelector', () => {
     fixtureEl.innerHTML = [
       '<div class="input-group quantity-selector">',
       '  <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="1" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
       '    <span class="visually-hidden">Step down</span>',
       '  </button>',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
       '    <span class="visually-hidden">Step up</span>',
       '  </button>',
       '</div>'
@@ -179,10 +179,10 @@ describe('QuantitySelector', () => {
     fixtureEl.innerHTML = [
       '<div class="input-group quantity-selector">',
       '  <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="1.25" min="0" max="10" step="0.5" data-bs-round="1" aria-label="Quantity selector">',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
       '    <span class="visually-hidden">Step down</span>',
       '  </button>',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
       '    <span class="visually-hidden">Step up</span>',
       '  </button>',
       '</div>'
@@ -202,10 +202,10 @@ describe('QuantitySelector', () => {
     fixtureEl.innerHTML = [
       '<div class="input-group quantity-selector">',
       '  <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="1.5" min="0" max="10" step="1" data-bs-round="1" aria-label="Quantity selector">',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
       '    <span class="visually-hidden">Step down</span>',
       '  </button>',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
       '    <span class="visually-hidden">Step up</span>',
       '  </button>',
       '</div>'
@@ -227,10 +227,10 @@ describe('QuantitySelector', () => {
     fixtureEl.innerHTML = [
       '<div class="input-group quantity-selector">',
       '  <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="8.5" min="0" max="10" step="1" data-bs-round="1" aria-label="Quantity selector">',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
       '    <span class="visually-hidden">Step down</span>',
       '  </button>',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
       '    <span class="visually-hidden">Step up</span>',
       '  </button>',
       '</div>'
@@ -252,10 +252,10 @@ describe('QuantitySelector', () => {
     fixtureEl.innerHTML = [
       '<div class="input-group quantity-selector">',
       '  <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0.5" min="0" max="10" step="1" data-bs-round="1" aria-label="Quantity selector">',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
       '    <span class="visually-hidden">Step down</span>',
       '  </button>',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
       '    <span class="visually-hidden">Step up</span>',
       '  </button>',
       '</div>'
@@ -280,10 +280,10 @@ describe('QuantitySelector', () => {
     fixtureEl.innerHTML = [
       '<div class="input-group quantity-selector">',
       '  <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="9.5" min="0" max="10" step="1" data-bs-round="1" aria-label="Quantity selector">',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
       '    <span class="visually-hidden">Step down</span>',
       '  </button>',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
       '    <span class="visually-hidden">Step up</span>',
       '  </button>',
       '</div>'

diff --git a/js/tests/visual/dropdown.html b/js/tests/visual/dropdown.html
@@ -68,8 +68,8 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
             </div>
           </div>
           <div class="btn-group dropup">
-            <button type="button" class="btn btn-secondary">Dropup split</button>
-            <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+            <button type="button" class="btn btn-outline-secondary">Dropup split</button>
+            <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
               <span class="visually-hidden">Dropup split</span>
             </button>
             <ul class="dropdown-menu">
@@ -104,8 +104,8 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
 
         <div class="col-sm-12 mt-4">
           <div class="btn-group dropup">
-            <a href="#" class="btn btn-secondary">Dropup split align end</a>
-            <button type="button" id="dropdown-page-subheader-button-3" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+            <a href="#" class="btn btn-outline-secondary">Dropup split align end</a>
+            <button type="button" id="dropdown-page-subheader-button-3" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
               <span class="visually-hidden">Product actions</span>
             </button>
             <div class="dropdown-menu dropdown-menu-end">
@@ -126,8 +126,8 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
 
         <div class="col-sm-12 mt-4">
           <div class="btn-group dropend">
-            <a href="#" class="btn btn-secondary">Dropend split</a>
-            <button type="button" id="dropdown-page-subheader-button-4" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+            <a href="#" class="btn btn-outline-secondary">Dropend split</a>
+            <button type="button" id="dropdown-page-subheader-button-4" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
               <span class="visually-hidden">Product actions</span>
             </button>
             <div class="dropdown-menu">
@@ -148,8 +148,8 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
           </div>
           <!-- dropstart -->
           <div class="btn-group dropstart">
-            <a href="#" class="btn btn-secondary">Dropstart split</a>
-            <button type="button" id="dropdown-page-subheader-button-5" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+            <a href="#" class="btn btn-outline-secondary">Dropstart split</a>
+            <button type="button" id="dropdown-page-subheader-button-5" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
               <span class="visually-hidden">Product actions</span>
             </button>
             <div class="dropdown-menu">
@@ -174,8 +174,8 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
       <div class="row">
         <div class="col-sm-3 mt-4">
           <div class="btn-group dropdown">
-            <button type="button" class="btn btn-secondary">Dropdown reference</button>
-            <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
+            <button type="button" class="btn btn-outline-secondary">Dropdown reference</button>
+            <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
               <span class="visually-hidden">Dropdown split</span>
             </button>
             <ul class="dropdown-menu">

diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html
@@ -112,7 +112,7 @@ <h4>Overflowing text to show scroll behavior</h4>
               <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
             </div>
             <div class="modal-footer">
-              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+              <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
               <button type="button" class="btn btn-primary">Save changes</button>
             </div>
           </div>
@@ -136,7 +136,7 @@ <h1 class="modal-title h4" id="firefoxModalLabel">Firefox Bug Test</h1>
               <p>Test result: <strong id="ff-bug-test-result"></strong></p>
             </div>
             <div class="modal-footer">
-              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+              <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
               <button type="button" class="btn btn-primary">Save changes</button>
             </div>
           </div>
@@ -154,7 +154,7 @@ <h1 class="modal-title h4" id="slowModalLabel">Lorem slowly</h1>
               <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a pharetra augue.</p>
             </div>
             <div class="modal-footer">
-              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+              <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
               <button type="button" class="btn btn-primary">Save changes</button>
             </div>
           </div>

diff --git a/scss/_buttons.scss b/scss/_buttons.scss
@@ -97,28 +97,50 @@
 //
 
 // scss-docs-start btn-variant-loops
-.btn-primary,
+.btn-primary {
+  @include button-variant($primary, $primary, $black, $active-background: var(--#{$prefix}highlight-color), $active-border: var(--#{$prefix}highlight-bg), $active-color: var(--#{$prefix}highlight-bg));
+}
+
+.btn-success {
+  @include button-variant($green, $green, $white);
+}
+
+.btn-danger {
+  @include button-variant($red, $red, $white);
+}
+
 .btn-warning {
-  @include button-variant($primary, $primary, $black, $active-background: transparent, $active-border: var(--#{$prefix}highlight-bg), $active-color: var(--#{$prefix}highlight-bg));
+  @include button-variant($yellow, $yellow, $black);
 }
 
-.btn-light,
-.btn-secondary,
-.btn-outline-secondary {
-  @include button-variant(transparent, var(--#{$prefix}highlight-bg), var(--#{$prefix}highlight-bg), $disabled-background: transparent, $disabled-color: var(--#{$prefix}disabled-color));
+.btn-info {
+  @include button-variant($blue, $blue, $white);
 }
 
-.btn-success {
-  @include button-variant($green, $green, $white);
+.btn-light {
+  @include button-variant($light, $light, $black);
 }
 
-.btn-info,
 .btn-dark {
-  @include button-variant(var(--#{$prefix}highlight-bg), var(--#{$prefix}highlight-bg), var(--#{$prefix}highlight-color), $hover-background: transparent, $hover-border: var(--#{$prefix}highlight-bg), $hover-color: var(--#{$prefix}highlight-bg));
+  @include button-variant($dark, $dark, $white, $hover-background: $white, $hover-border: var(--#{$prefix}highlight-bg), $hover-color: $black);
 }
 
-.btn-danger {
-  @include button-variant($red, $red, $white);
+.btn-secondary {
+  @include button-variant(var(--#{$prefix}highlight-bg), var(--#{$prefix}highlight-bg), var(--#{$prefix}highlight-color), $hover-background: var(--#{$prefix}highlight-color), $hover-border: var(--#{$prefix}highlight-bg), $hover-color: var(--#{$prefix}highlight-bg));
+}
+
+@each $color, $value in $theme-colors {
+  .btn-outline-#{$color} {
+    $btn-outline-hover-color: $white;
+    @if index(("primary", "warning", "info", "light"), #{$color}) {
+      $btn-outline-hover-color: $black;
+    }
+    @if #{$color} == "secondary" {
+      @include button-outline-variant(var(--#{$prefix}highlight-bg), var(--#{$prefix}highlight-color));
+    } @else {
+      @include button-outline-variant($value, $btn-outline-hover-color);
+    }
+  }
 }
 // scss-docs-end btn-variant-loops
 

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -993,6 +993,16 @@ $btn-default-disabled-bg:     var(--#{$prefix}disabled-color) !default; // Boost
 $btn-default-disabled-border: var(--#{$prefix}disabled-color) !default; // Boosted mod
 $btn-default-disabled-color:  var(--#{$prefix}highlight-color) !default; // Boosted mod
 
+$btn-outline-default-hover-bg:        var(--#{$prefix}btn-color) !default; // Boosted mod
+$btn-outline-default-hover-border:    var(--#{$prefix}btn-border-color) !default; // Boosted mod
+$btn-outline-default-hover-color:     $white !default; // Boosted mod
+$btn-outline-default-active-bg:       $primary !default; // Boosted mod
+$btn-outline-default-active-border:   $primary !default; // Boosted mod
+$btn-outline-default-active-color:    $black !default; // Boosted mod
+$btn-outline-default-disabled-bg:     transparent !default; // Boosted mod
+$btn-outline-default-disabled-border: var(--#{$prefix}disabled-color) !default; // Boosted mod
+$btn-outline-default-disabled-color:  var(--#{$prefix}disabled-color) !default; // Boosted mod
+
 $btn-font-weight:             $font-weight-bold !default;
 $btn-box-shadow:              null !default;
 $btn-focus-width:             $input-btn-focus-width !default;