From 7895f9ca2e936838e6476f60aa5ae606af361475 Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Wed, 25 Oct 2023 08:42:10 +0200 Subject: [PATCH] Dark mode: Navs Tabs (#2307) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Julien Déramond --- scss/_nav.scss | 7 +- scss/_variables-dark.scss | 2 +- scss/_variables.scss | 18 +- site/content/docs/5.3/dark-mode.md | 565 ++++++++++++++++++++++++----- 4 files changed, 498 insertions(+), 94 deletions(-) diff --git a/scss/_nav.scss b/scss/_nav.scss index cc840dcbe5..94b203eda1 100644 --- 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 index 22a7eeea31..65a02315cb 100644 --- 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 index d7a7f987f5..cd5f5919ef 100644 --- 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 diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md index 0faf554a3f..879b4193c1 100644 --- a/site/content/docs/5.3/dark-mode.md +++ b/site/content/docs/5.3/dark-mode.md @@ -41,6 +41,11 @@ sitemap_exclude: true
+
+
--bs-border-color
+
+
+
--bs-border-color-translucent
@@ -434,6 +439,88 @@ sitemap_exclude: true
+### Breadcrumb + +

No theme

+ +
+ +
+ +

Dark theme on container

+ +
+ +
+ +

Light theme on container

+ +
+ +
+ +

Dark theme on component

+ +
+ +
+ +

Light theme on component

+ +
+ +
+ ### Buttons

No theme

@@ -982,6 +1069,402 @@ sitemap_exclude: true +### Navs & tabs + +

No theme

+ +
+ + + + + + + + +
+
+ +
+
Content of Link A
+
Content of Link B
+
Content of Link C
+
Content of Link D
+
+
+
Content of Tab 2
+
Content of Tab 3
+
Content of Tab 4
+
+
+ +

Dark theme on container

+ +
+ + + + + +
+
+ +
+
Content of Link A
+
Content of Link B
+
Content of Link C
+
Content of Link D
+
+
+
Content of Tab 2
+
Content of Tab 3
+
Content of Tab 4
+
+
+ +

Light theme on container

+ +
+ + + + + +
+
+ +
+
Content of Link A
+
Content of Link B
+
Content of Link C
+
Content of Link D
+
+
+
Content of Tab 2
+
Content of Tab 3
+
Content of Tab 4
+
+
+ +

Dark theme on component

+ +
+ + + + + +
+
+ +
+
Content of Link A
+
Content of Link B
+
Content of Link C
+
Content of Link D
+
+
+
Content of Tab 2
+
Content of Tab 3
+
Content of Tab 4
+
+
+ +

Light theme on component

+ +
+ + + + + +
+
+ +
+
Content of Link A
+
Content of Link B
+
Content of Link C
+
Content of Link D
+
+
+
Content of Tab 2
+
Content of Tab 3
+
Content of Tab 4
+
+
+ ### Spinners

No theme

@@ -2219,85 +2702,3 @@ sitemap_exclude: true - -### Breadcrumb - -

No theme

- -
- -
- -

Dark theme on container

- -
- -
- -

Light theme on container

- -
- -
- -

Dark theme on component

- -
- -
- -

Light theme on component

- -
- -