Dark mode: Navs Tabs (#2307)

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
Orange-OpenSource · Nov 3, 2023 · 7895f9c · 7895f9c
1 parent 04dee8c
commit 7895f9c
Show file tree

Hide file tree

Showing 4 changed files with 498 additions and 94 deletions.
diff --git a/scss/_nav.scss b/scss/_nav.scss
@@ -60,8 +60,8 @@
   --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
   --#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
   --#{$prefix}nav-tabs-link-padding-x: #{$nav-tabs-link-padding-x}; // Boosted mod
-  --#{$prefix}nav-tabs-link-hover-color: #{color-contrast($nav-tabs-link-hover-border-color)}; // Boosted mod
-  --#{$prefix}nav-tabs-link-hover-bg: var(--#{$prefix}nav-tabs-link-hover-border-color); // Boosted mod
+  --#{$prefix}nav-tabs-link-hover-color: #{$nav-tabs-link-hover-color}; // Boosted mod
+  --#{$prefix}nav-tabs-link-hover-bg: #{$nav-tabs-link-hover-bg}; // Boosted mod
   --#{$prefix}nav-tabs-link-border-width: var(--#{$prefix}nav-tabs-border-width) var(--#{$prefix}nav-tabs-border-width) 0; // Boosted mod
   --#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
   --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
@@ -236,10 +236,11 @@
   --#{$prefix}tab-content-padding-y: #{$spacer};
   --#{$prefix}tab-content-padding-x: #{subtract($nav-tabs-link-padding-x, var(--#{$prefix}tab-content-border-width))};
   --#{$prefix}tab-content-border-width: #{$nav-tabs-border-width};
+  --#{$prefix}tab-content-border-color: #{$nav-tabs-border-color};
   // scss-docs-end tab-content-css-vars
 
   padding: var(--#{$prefix}tab-content-padding-y) var(--#{$prefix}tab-content-padding-x);
-  border: var(--#{$prefix}tab-content-border-width) solid;
+  border: var(--#{$prefix}tab-content-border-width) solid var(--#{$prefix}tab-content-border-color);
   border-top: 0;
   // End mod
 

diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss
@@ -80,7 +80,7 @@ $body-secondary-bg-dark:            $gray-900 !default; // Boosted mod: instead
 $body-tertiary-color-dark:          $gray-600 !default; // Boosted mod: instead of `rgba($body-color-dark, .5)`
 $body-tertiary-bg-dark:             $black !default; // Boosted mod: instead of `mix($gray-800, $gray-900, 50%)`
 $body-emphasis-color-dark:          $white !default; // Boosted mod: instead of `$gray-100`
-$border-color-dark:                 $gray-700 !default;
+$border-color-dark:                 $white !default; // Boosted mod: instead of `$gray-700`
 $border-color-translucent-dark:     $gray-700 !default; // Boosted mod instead of `rgba($white, .15)`
 $headings-color-dark:               $white !default; // Boosted mod: instead of `inherit`
 $link-color-dark:                   $white !default; // Boosted mod: instead of `tint-color($primary, 40%)`

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -628,7 +628,7 @@ $border-widths: (
   5: $border-width * 2.5
 ) !default;
 $border-style:                solid !default;
-$border-color:                $black !default; // Boosted mod
+$border-color:                $black !default; // Boosted mod: instead of `$gray-300`
 $border-color-translucent:    $gray-500 !default; // Boosted mod: gray value instead of rgba($black, .175)
 // scss-docs-end border-variables
 
@@ -1429,7 +1429,9 @@ $nav-tabs-border-color:             var(--#{$prefix}border-color) !default;
 $nav-tabs-border-width:             var(--#{$prefix}border-width) !default;
 $nav-tabs-border-radius:            var(--#{$prefix}border-radius) !default;
 $nav-tabs-link-padding-x:           1.8125rem !default; // Boosted mod
-$nav-tabs-link-hover-border-color:  $border-color !default; // Boosted mod: instead of `var(--#{$prefix}secondary-bg) var(--#{$prefix}secondary-bg) $nav-tabs-border-color`
+$nav-tabs-link-hover-color:         var(--#{$prefix}highlight-color) !default; // Boosted mod
+$nav-tabs-link-hover-bg:            var(--#{$prefix}highlight-bg) !default; // Boosted mod
+$nav-tabs-link-hover-border-color:  var(--#{$prefix}highlight-bg) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-bg) var(--#{$prefix}secondary-bg) $nav-tabs-border-color`
 $nav-tabs-link-active-color:        var(--#{$prefix}emphasis-color) !default;
 $nav-tabs-link-active-bg:           var(--#{$prefix}body-bg) !default;
 $nav-tabs-link-active-border-color: $nav-tabs-link-active-color !default; // Boosted mod: instead of `var(--#{$prefix}border-color) var(--#{$prefix}border-color) $nav-tabs-link-active-bg`
@@ -1442,16 +1444,16 @@ $nav-pills-link-active-bg:          $component-active-bg !default;
 $nav-underline-gap:                       0 !default; // Boosted mod: instead of 1rem
 $nav-underline-gap-lg:                    $spacer * .5 !default; // Boosted mod
 // stylelint-disable-next-line function-disallowed-list
-$nav-underline-border-width:              calc(var(--#{$prefix}border-width) * .5) !default; // Boosted mod: instead of .125rem
-$nav-underline-border-color:              $gray-500 !default; // Boosted mod
+$nav-underline-border-width:              calc(var(--#{$prefix}border-width) * .5) !default; // Boosted mod: instead of `.125rem`
+$nav-underline-border-color:              var(--#{$prefix}border-color-translucent) !default; // Boosted mod
 $nav-underline-border-radius:             var(--#{$prefix}border-radius) !default; // Boosted mod
-$nav-underline-link-active-color:         var(--#{$prefix}emphasis-color) !default;
+$nav-underline-link-active-color:         var(--#{$prefix}hover-color) !default; // Boosted mod instead of `var(--#{$prefix}emphasis-color)`
 $nav-underline-link-padding-x:            1.8125rem !default; // Boosted mod
-$nav-underline-link-hover-color:          $accessible-orange !default; // Boosted mod
+$nav-underline-link-hover-color:          var(--#{$prefix}link-hover-color) !default; // Boosted mod
 // stylelint-disable-next-line function-disallowed-list
 $nav-underline-link-border-width:         0 0 calc(var(--#{$prefix}nav-underline-border-width) * 4) !default; // Boosted mod
-$nav-underline-link-active-bg:            var(--#{$prefix}body-bg) !default; // Boosted mod
-$nav-underline-link-active-border-color:  $accessible-orange !default; // Boosted mod
+$nav-underline-link-active-bg:            transparent !default; // Boosted mod
+$nav-underline-link-active-border-color:  var(--#{$prefix}link-hover-color) !default; // Boosted mod
 // scss-docs-end nav-variables