feature (alerts): fix for white links and close icons against a dark …

…background
Orange-OpenSource · Jan 4, 2022 · 2c5778c · 2c5778c
1 parent 4259248
commit 2c5778c
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 12 deletions.
diff --git a/scss/_alert.scss b/scss/_alert.scss
@@ -133,4 +133,22 @@
     right: -$alert-btn-close-offset-sm;
   }
 }
+
+//// White links against a dark background
+.bg-dark {
+  a,
+  .btn-close {
+    color: $link-dark-color;
+
+    &:hover,
+    &:focus {
+      color: $link-dark-hover-color;
+    }
+
+    &:disabled {
+      color: $link-dark-disabled-color;
+    }
+  }
+}
+
 // End mod
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
@@ -384,26 +384,26 @@
 
   .navbar-nav {
     .nav-link {
-      color: $navbar-dark-color;
+      color: $link-dark-color;
 
       &:hover,
       &:focus {
-        color: $navbar-dark-hover-color;
+        color: $link-dark-hover-color;
       }
 
       &.disabled {
-        color: $navbar-dark-disabled-color;
+        color: $link-dark-disabled-color;
       }
     }
 
     .show > .nav-link,
     .nav-link.active {
-      color: $navbar-dark-active-color;
+      color: $link-dark-active-color;
     }
   }
 
   .navbar-toggler {
-    color: $navbar-dark-color;
+    color: $link-dark-color;
     border-color: $navbar-dark-toggler-border-color;
   }
 
@@ -412,12 +412,12 @@
   }
 
   .navbar-text {
-    color: $navbar-dark-color;
+    color: $link-dark-color;
 
     a,
     a:hover,
     a:focus {
-      color: $navbar-dark-active-color;
+      color: $link-dark-active-color;
     }
   }
 }
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -460,6 +460,13 @@ $link-shade-percentage:                   20% !default;
 $link-hover-color:                        $accessible-orange !default;
 $link-hover-decoration:                   null !default;
 
+// scss-docs-start links-theme-variables
+$link-dark-color:                  $white !default;
+$link-dark-hover-color:            $primary !default;
+$link-dark-active-color:           $primary !default;
+$link-dark-disabled-color:         $gray-400 !default;
+// scss-docs-end links-theme-variables
+
 
 $stretched-link-pseudo-element:           after !default;
 $stretched-link-z-index:                  1 !default;
@@ -1234,10 +1241,6 @@ $navbar-toggler-transition:         $transition-focus !default;
 // scss-docs-end navbar-variables
 
 // scss-docs-start navbar-theme-variables
-$navbar-dark-color:                  $white !default;
-$navbar-dark-hover-color:            $primary !default;
-$navbar-dark-active-color:           $primary !default;
-$navbar-dark-disabled-color:         $gray-400 !default;
 $navbar-dark-toggler-border-color:   transparent !default;
 
 $navbar-light-color:                 $black !default;
@@ -1249,7 +1252,7 @@ $navbar-light-toggler-border-color:  null !default;
 $navbar-light-brand-color:          $navbar-light-active-color !default;
 $navbar-light-brand-hover-color:    $navbar-light-active-color !default;
 $navbar-dark-brand-color:           inherit !default;
-$navbar-dark-brand-hover-color:     $navbar-dark-active-color !default;
+$navbar-dark-brand-hover-color:     $link-dark-active-color !default;
 // scss-docs-end navbar-theme-variables
 
 // Boosted mod

diff --git a/site/content/docs/5.1/components/alerts.md b/site/content/docs/5.1/components/alerts.md
@@ -163,6 +163,8 @@ As part of Boosted's evolving CSS variables approach, alerts now use local CSS v
 
 {{< scss-docs name="alert-variables" file="scss/_variables.scss" >}}
 
+{{< scss-docs name="links-theme-variables" file="scss/_variables.scss" >}}
+
 ### Sass mixin
 
 Used in combination with `$theme-colors` to create contextual modifier classes for our alerts.

diff --git a/site/content/docs/5.1/components/navbar.md b/site/content/docs/5.1/components/navbar.md
@@ -484,6 +484,8 @@ When you do this, we recommend including additional JavaScript to move the focus
 
 {{< scss-docs name="navbar-variables" file="scss/_variables.scss" >}}
 
+{{< scss-docs name="links-theme-variables" file="scss/_variables.scss" >}}
+
 {{< scss-docs name="navbar-theme-variables" file="scss/_variables.scss" >}}
 
 ### Loop