fix(dropdowns): adjust dark variant colors (#1021)

* This commit includes as well a fix of hexadecimal codes in /customize/color/ page Co-authored-by: Louis-Maxime Piton <louismaxime.piton@orange.com> Co-authored-by: Julien Déramond <julien.deramond@orange.com>
Orange-OpenSource · Feb 23, 2022 · 2f5ab48 · 2f5ab48
1 parent 3b3215e
commit 2f5ab48
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 14 deletions.
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1312,18 +1312,18 @@ $dropdown-header-padding:           $spacer $spacer * .5 !default;
 // scss-docs-end dropdown-variables
 
 // scss-docs-start dropdown-dark-variables
-$dropdown-dark-color:               $gray-300 !default;
-$dropdown-dark-bg:                  $gray-800 !default;
-$dropdown-dark-border-color:        $dropdown-border-color !default;
-$dropdown-dark-divider-bg:          $dropdown-divider-bg !default;
+$dropdown-dark-color:               $white !default; // Boosted mod
+$dropdown-dark-bg:                  $black !default; // Boosted mod
+$dropdown-dark-border-color:        $gray-700 !default; // Boosted mod
+$dropdown-dark-divider-bg:          $dropdown-dark-border-color !default; // Boosted mod
 $dropdown-dark-box-shadow:          null !default;
 $dropdown-dark-link-color:          $dropdown-dark-color !default;
-$dropdown-dark-link-hover-color:    $white !default;
-$dropdown-dark-link-hover-bg:       rgba($white, .15) !default;
-$dropdown-dark-link-active-color:   $dropdown-link-active-color !default;
-$dropdown-dark-link-active-bg:      $dropdown-link-active-bg !default;
-$dropdown-dark-link-disabled-color: $gray-500 !default;
-$dropdown-dark-header-color:        $gray-500 !default;
+$dropdown-dark-link-hover-color:    $black !default; // Boosted mod
+$dropdown-dark-link-hover-bg:       $white !default; // Boosted mod
+$dropdown-dark-link-active-color:   $black !default; // Boosted mod
+$dropdown-dark-link-active-bg:      $white !default; // Boosted mod
+$dropdown-dark-link-disabled-color: $gray-700 !default; // Boosted mod
+$dropdown-dark-header-color:        $white !default; // Boosted mod
 // scss-docs-end dropdown-dark-variables
 
 // Pagination

diff --git a/site/content/docs/5.1/components/dropdowns.md b/site/content/docs/5.1/components/dropdowns.md
@@ -213,8 +213,8 @@ Opt into darker dropdowns to match a dark navbar or custom style by adding `.dro
   <button type="button" class="btn btn-secondary btn-inverse dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
     <span class="visually-hidden">Toggle Dropdown</span>
   </button>
-  <ul class="dropdown-menu">
-    <li><a class="dropdown-item" href="#">Action</a></li>
+  <ul class="dropdown-menu dropdown-menu-dark">
+    <li><a class="dropdown-item active" href="#">Action</a></li>
     <li><a class="dropdown-item" href="#">Another action</a></li>
     <li><a class="dropdown-item" href="#">Something else here</a></li>
     <li><hr class="dropdown-divider"></li>

diff --git a/site/content/docs/5.1/customize/color.md b/site/content/docs/5.1/customize/color.md
@@ -51,7 +51,7 @@ Be sure to monitor contrast ratios as you customize colors. As shown below, we'v
   <div class="col-md-4 mb-3">
     <div class="p-3 mb-2 position-relative swatch-gray-500">
       <strong class="d-block">$gray-500</strong>
-      #adb5bd
+      #ccc
     </div>
   {{- range $.Site.Data.grays }}
     <div class="p-3 bd-gray-{{ .name }}">$gray-{{ .name }}</div>
@@ -66,7 +66,7 @@ Be sure to monitor contrast ratios as you customize colors. As shown below, we'v
     </div>
     <div class="p-3 mb-2 bd-supporting-yellow">
       <strong class="d-block">$supporting-yellow</strong>
-      #fc0
+      #ffd200
     </div>
     <div class="p-3 mb-2 bd-black text-white">
       <strong class="d-block">$black</strong>