From c6c74bb5f3a40f6fb4b972f5591c4bad240555ab Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Wed, 4 Oct 2023 07:54:54 +0200 Subject: [PATCH] Dark mode: Local navigation (#2276) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Julien Déramond Co-authored-by: Louis-Maxime Piton --- scss/_root.scss | 12 ++++++++++++ scss/_variables.scss | 16 ++++++++-------- site/content/docs/5.3/dark-mode.md | 24 ++++++++++++++++++++---- 3 files changed, 40 insertions(+), 12 deletions(-) diff --git a/scss/_root.scss b/scss/_root.scss index 874e311d03..2dd0baf72e 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -137,6 +137,12 @@ --#{$prefix}form-invalid-color: #{$form-invalid-color}; --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color}; // scss-docs-end root-form-validation-variables + + // ******* Additions for dark-mode + --#{$prefix}hover-color: #{$body-color}; + --#{$prefix}active-bg: #{$gray-400}; + --#{$prefix}disabled-color: #{$gray-500}; + // ******* End additions for dark-mode } @if $enable-dark-mode { @@ -202,6 +208,12 @@ --#{$prefix}form-valid-border-color: #{$form-valid-border-color-dark}; --#{$prefix}form-invalid-color: #{$form-invalid-color-dark}; --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color-dark}; + + // ******* Additions for dark-mode + --#{$prefix}hover-color: #{$brand-orange}; + --#{$prefix}active-bg: #{$gray-700}; + --#{$prefix}disabled-color: #{$gray-700}; + // ******* End additions for dark-mode // scss-docs-end root-dark-mode-vars } } diff --git a/scss/_variables.scss b/scss/_variables.scss index 50d4cc621a..559d211365 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1182,7 +1182,7 @@ $form-star-margin-between: -.125rem !default; $form-star-rating-checked-color: var(--#{$prefix}link-hover-color) !default; $form-star-rating-unchecked-color: var(--#{$prefix}secondary-color) !default; $form-star-rating-hover-color: var(--#{$prefix}highlight-bg) !default; -$form-star-rating-disabled-color: var(--#{$prefix}border-color-translucent) !default; +$form-star-rating-disabled-color: var(--#{$prefix}disabled-color) !default; $form-star-rating-checked-icon: escape-svg(url("data:image/svg+xml,")) !default; $form-star-rating-unchecked-icon: escape-svg(url("data:image/svg+xml,")) !default; @@ -1390,7 +1390,7 @@ $nav-link-font-weight: $font-weight-bold !default; $nav-link-color: var(--#{$prefix}link-color) !default; $nav-link-hover-color: var(--#{$prefix}link-hover-color) !default; $nav-link-transition: null !default; // Boosted mod -$nav-link-disabled-color: $gray-500 !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)` +$nav-link-disabled-color: var(--#{$prefix}disabled-color) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)` // Boosted mod: no `$nav-link-focus-box-shadow` $nav-tabs-border-color: var(--#{$prefix}border-color) !default; @@ -1451,7 +1451,7 @@ $navbar-toggler-transition: $transition-focus !default; // Boosted mod $navbar-light-color: var(--#{$prefix}emphasis-color) !default; // Boosted mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), .65)` $navbar-light-hover-color: $accessible-orange !default; // Boosted mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), .8)` $navbar-light-active-color: $accessible-orange !default; // Boosted mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), 1)` -$navbar-light-disabled-color: $gray-500 !default; // Boosted mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), .3)` +$navbar-light-disabled-color: var(--#{$prefix}disabled-color) !default; // Boosted mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), .3)` // Boosted mod: no $navbar-light-icon-color $navbar-light-toggler-icon-bg: $burger-icon !default; // Boosted mod: instead of inline SVG $navbar-light-toggler-icon-bg-small: $burger-icon-small !default; // Boosted mod: slightly different burger icon for small breakpoints @@ -2356,12 +2356,12 @@ $tag-font-size-sm: $font-size-sm !default; $local-nav-padding-y: $navbar-nav-link-padding-y !default; $local-nav-color: var(--#{$prefix}body-color) !default; $local-nav-bg: var(--#{$prefix}body-bg) !default; -$local-nav-hover-color: $local-nav-color !default; -$local-nav-hover-bg: $gray-300 !default; -$local-nav-active-color: $accessible-orange !default; -$local-nav-active-bg: $gray-400 !default; +$local-nav-hover-color: var(--#{$prefix}hover-color) !default; +$local-nav-hover-bg: var(--#{$prefix}secondary-bg) !default; +$local-nav-active-color: var(--#{$prefix}link-hover-color) !default; +$local-nav-active-bg: var(--#{$prefix}active-bg) !default; $local-nav-active-marker-width: $spacer * .2 !default; -$local-nav-border-color: $gray-500 !default; +$local-nav-border-color: var(--#{$prefix}border-color-translucent) !default; $local-nav-border-width: calc(var(--#{$prefix}border-width) * .5) !default; // stylelint-disable-line function-disallowed-list // scss-docs-end local-nav-variables // End mod diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md index 8e85c925ab..8b22de888d 100644 --- a/site/content/docs/5.3/dark-mode.md +++ b/site/content/docs/5.3/dark-mode.md @@ -81,6 +81,22 @@ sitemap_exclude: true
+Additional variables for dark-mode (temporary) +
+
--bs-hover-color
+
+
+
+
+
--bs-active-bg
+
+
+
+
+
--bs-disabled-color
+
+
+
## Components @@ -368,7 +384,7 @@ Using bg-body #### Dark theme on component
-