From 00e963fefbafe6d8e4dce555f68e3e9856b2bc8f Mon Sep 17 00:00:00 2001
From: "louismaxime.piton" <louismaxime.piton@orange.com>
Date: Wed, 25 Oct 2023 09:59:27 +0200
Subject: [PATCH] fix(review)

---
 scss/_variables.scss               | 10 ++++----
 scss/forms/_quantity-selector.scss |  6 ++---
 site/content/docs/5.3/dark-mode.md | 40 +++++++++++++++---------------
 3 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/scss/_variables.scss b/scss/_variables.scss
index dc0d85698c..a1b99a07c4 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -2307,14 +2307,14 @@ $quantity-selector-sm-width:              5.5rem !default;
 
 $quantity-selector-btn-padding-x:         add($btn-icon-padding-x, 2px) !default;
 $quantity-selector-btn-padding-x-sm:      add($btn-icon-padding-x-sm, 2px) !default;
-
-$quantity-selector-icon-width:            .875rem !default;
-$quantity-selector-icon-sm-width:         .625rem !default;
+$quantity-selector-btn-bg:                var(--#{$prefix}body-bg) !default;
+$quantity-selector-btn-border:            var(--#{$prefix}border-width) solid var(--#{$prefix}border-color-translucent) !default;
 
 $quantity-selector-disabled-color:        var(--#{$prefix}disabled-color) !default;
 $quantity-selector-disabled-bg:           var(--#{$prefix}body-bg) !default;
-$quantity-selector-button-bg:             var(--#{$prefix}body-bg) !default;
-$quantity-selector-button-border:         var(--#{$prefix}border-width) solid var(--#{$prefix}border-color-translucent) !default;
+
+$quantity-selector-icon-width:            .875rem !default;
+$quantity-selector-icon-sm-width:         .625rem !default;
 
 $quantity-selector-icon-add:              $add-icon !default;
 $quantity-selector-icon-add-sm:           $add-icon-sm !default;
diff --git a/scss/forms/_quantity-selector.scss b/scss/forms/_quantity-selector.scss
index 3df9030c6c..4d5e73c148 100644
--- a/scss/forms/_quantity-selector.scss
+++ b/scss/forms/_quantity-selector.scss
@@ -25,11 +25,11 @@
   }
 
   button {
-    background-color: $quantity-selector-button-bg;
-    border: $quantity-selector-button-border;
+    background-color: $quantity-selector-btn-bg;
+    border: $quantity-selector-btn-border;
 
     &:disabled {
-      background-color: $quantity-selector-button-bg;
+      background-color: $quantity-selector-btn-bg;
     }
 
     &:first-of-type {
diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
index 111214496f..c2447c513c 100644
--- a/site/content/docs/5.3/dark-mode.md
+++ b/site/content/docs/5.3/dark-mode.md
@@ -2628,19 +2628,19 @@ sitemap_exclude: true
 <div class="d-flex gap-2 border border-tertiary p-3">
   <div class="input-group quantity-selector">
     <input type="number" id="inputQuantitySelector" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="5" 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="inputQuantitySelector" data-bs-step="down">
+    <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector" data-bs-step="down">
       <span class="visually-hidden">Step down</span>
     </button>
-    <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector" data-bs-step="up">
+    <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector" data-bs-step="up">
       <span class="visually-hidden">Step up</span>
     </button>
   </div>
   <div class="input-group quantity-selector">
     <input type="number" id="inputQuantitySelectorDisabled" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector" disabled>
-    <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelectorDisabled" data-bs-step="down" disabled>
+    <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelectorDisabled" data-bs-step="down" disabled>
       <span class="visually-hidden">Step down</span>
     </button>
-    <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelectorDisabled" data-bs-step="up" disabled>
+    <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelectorDisabled" data-bs-step="up" disabled>
       <span class="visually-hidden">Step up</span>
     </button>
   </div>
@@ -2651,19 +2651,19 @@ sitemap_exclude: true
 <div class="d-flex gap-2 border border-tertiary p-3 bg-body" data-bs-theme="dark">
   <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="5" 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>
   <div class="input-group quantity-selector">
     <input type="number" id="inputQuantitySelectorDisabled1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector" disabled>
-    <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelectorDisabled1" data-bs-step="down" disabled>
+    <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelectorDisabled1" data-bs-step="down" disabled>
       <span class="visually-hidden">Step down</span>
     </button>
-    <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelectorDisabled1" data-bs-step="up" disabled>
+    <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelectorDisabled1" data-bs-step="up" disabled>
       <span class="visually-hidden">Step up</span>
     </button>
   </div>
@@ -2674,19 +2674,19 @@ sitemap_exclude: true
 <div class="d-flex gap-2 border border-tertiary p-3 bg-body" data-bs-theme="light">
   <div class="input-group quantity-selector">
     <input type="number" id="inputQuantitySelector2" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="5" 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="inputQuantitySelector2" data-bs-step="down">
+    <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector2" data-bs-step="down">
       <span class="visually-hidden">Step down</span>
     </button>
-    <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector2" data-bs-step="up">
+    <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector2" data-bs-step="up">
       <span class="visually-hidden">Step up</span>
     </button>
   </div>
   <div class="input-group quantity-selector">
     <input type="number" id="inputQuantitySelectorDisabled2" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector" disabled>
-    <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelectorDisabled2" data-bs-step="down" disabled>
+    <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelectorDisabled2" data-bs-step="down" disabled>
       <span class="visually-hidden">Step down</span>
     </button>
-    <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelectorDisabled2" data-bs-step="up" disabled>
+    <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelectorDisabled2" data-bs-step="up" disabled>
       <span class="visually-hidden">Step up</span>
     </button>
   </div>
@@ -2697,19 +2697,19 @@ sitemap_exclude: true
 <div class="d-flex gap-2 border border-tertiary p-3" style="background-color: #282d55;">
   <div class="input-group quantity-selector" data-bs-theme="dark">
     <input type="number" id="inputQuantitySelector3" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="5" 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="inputQuantitySelector3" data-bs-step="down">
+    <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector3" data-bs-step="down">
       <span class="visually-hidden">Step down</span>
     </button>
-    <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector3" data-bs-step="up">
+    <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector3" data-bs-step="up">
       <span class="visually-hidden">Step up</span>
     </button>
   </div>
   <div class="input-group quantity-selector" data-bs-theme="dark">
     <input type="number" id="inputQuantitySelectorDisabled3" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector" disabled>
-    <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelectorDisabled3" data-bs-step="down" disabled>
+    <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelectorDisabled3" data-bs-step="down" disabled>
       <span class="visually-hidden">Step down</span>
     </button>
-    <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelectorDisabled3" data-bs-step="up" disabled>
+    <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelectorDisabled3" data-bs-step="up" disabled>
       <span class="visually-hidden">Step up</span>
     </button>
   </div>
@@ -2720,19 +2720,19 @@ sitemap_exclude: true
 <div class="d-flex gap-2 border border-tertiary p-3" style="background-color: #b5e8f7">
   <div class="input-group quantity-selector" data-bs-theme="light">
     <input type="number" id="inputQuantitySelector4" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="5" 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="inputQuantitySelector4" data-bs-step="down">
+    <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector4" data-bs-step="down">
       <span class="visually-hidden">Step down</span>
     </button>
-    <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector4" data-bs-step="up">
+    <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector4" data-bs-step="up">
       <span class="visually-hidden">Step up</span>
     </button>
   </div>
   <div class="input-group quantity-selector" data-bs-theme="light">
     <input type="number" id="inputQuantitySelectorDisabled4" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector" disabled>
-    <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelectorDisabled4" data-bs-step="down" disabled>
+    <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelectorDisabled4" data-bs-step="down" disabled>
       <span class="visually-hidden">Step down</span>
     </button>
-    <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelectorDisabled4" data-bs-step="up" disabled>
+    <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelectorDisabled4" data-bs-step="up" disabled>
       <span class="visually-hidden">Step up</span>
     </button>
   </div>