From e70c2aa4cf0b3a040e2ed6fcc4d46d4e39888817 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <juderamond@gmail.com>
Date: Mon, 27 Nov 2023 13:09:41 +0100
Subject: [PATCH] CSS: new `$navbar-*` aliases for `$navbar-light-*` Sass vars
---
scss/_navbar.scss | 16 +++++------
scss/_variables.scss | 31 +++++++++++++++-------
site/content/docs/5.3/components/navbar.md | 4 +++
3 files changed, 33 insertions(+), 18 deletions(-)
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 71619382cd..bba649199e 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -7,21 +7,21 @@
// scss-docs-start navbar-css-vars
--#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
--#{$prefix}navbar-padding-y: #{$navbar-padding-y};
- --#{$prefix}navbar-color: #{$navbar-light-color};
- --#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
- --#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
- --#{$prefix}navbar-active-color: #{$navbar-light-active-color};
+ --#{$prefix}navbar-color: #{$navbar-color};
+ --#{$prefix}navbar-hover-color: #{$navbar-hover-color};
+ --#{$prefix}navbar-disabled-color: #{$navbar-disabled-color};
+ --#{$prefix}navbar-active-color: #{$navbar-active-color};
--#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
--#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
--#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
- --#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
- --#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
+ --#{$prefix}navbar-brand-color: #{$navbar-brand-color};
+ --#{$prefix}navbar-brand-hover-color: #{$navbar-brand-hover-color};
--#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
--#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
--#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
--#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
- --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
- --#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
+ --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-toggler-icon-bg)};
+ --#{$prefix}navbar-toggler-border-color: #{$navbar-toggler-border-color};
--#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
--#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
--#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 2d70310a51..351b76b550 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1186,9 +1186,26 @@ $nav-underline-link-active-color: var(--#{$prefix}emphasis-color) !default;
// Navbar
+// scss-docs-start navbar-deprecated-variables
+$navbar-light-color: rgba(var(--#{$prefix}emphasis-color-rgb), .65) !default; // Deprecated in v5.3
+$navbar-light-hover-color: rgba(var(--#{$prefix}emphasis-color-rgb), .8) !default; // Deprecated in v5.3
+$navbar-light-active-color: rgba(var(--#{$prefix}emphasis-color-rgb), 1) !default; // Deprecated in v5.3
+$navbar-light-disabled-color: rgba(var(--#{$prefix}emphasis-color-rgb), .3) !default; // Deprecated in v5.3
+$navbar-light-icon-color: rgba($body-color, .75) !default; // Deprecated in v5.3
+$navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default; // Deprecated in v5.3
+$navbar-light-toggler-border-color: rgba(var(--#{$prefix}emphasis-color-rgb), .15) !default; // Deprecated in v5.3
+$navbar-light-brand-color: $navbar-light-active-color !default; // Deprecated in v5.3
+$navbar-light-brand-hover-color: $navbar-light-active-color !default; // Deprecated in v5.3
+// scss-docs-end navbar-deprecated-variables
+
// scss-docs-start navbar-variables
$navbar-padding-y: $spacer * .5 !default;
$navbar-padding-x: null !default;
+$navbar-color: $navbar-light-color !default;
+$navbar-hover-color: $navbar-light-hover-color !default;
+$navbar-active-color: $navbar-light-active-color !default;
+$navbar-disabled-color: $navbar-light-disabled-color !default;
+$navbar-icon-color: $navbar-light-icon-color !default;
$navbar-nav-link-padding-x: .5rem !default;
@@ -1198,6 +1215,8 @@ $nav-link-height: $font-size-base * $line-height-base + $nav-l
$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * .5 !default;
$navbar-brand-margin-end: 1rem !default;
+$navbar-brand-color: if($navbar-light-active-color == $navbar-light-brand-color, $navbar-active-color, $navbar-light-brand-color) !default;
+$navbar-brand-hover-color: if($navbar-light-brand-hover-color == $navbar-light-active-color, $navbar-active-color, $navbar-light-brand-hover-color) !default;
$navbar-toggler-padding-y: .25rem !default;
$navbar-toggler-padding-x: .75rem !default;
@@ -1205,16 +1224,8 @@ $navbar-toggler-font-size: $font-size-lg !default;
$navbar-toggler-border-radius: $btn-border-radius !default;
$navbar-toggler-focus-width: $btn-focus-width !default;
$navbar-toggler-transition: box-shadow .15s ease-in-out !default;
-
-$navbar-light-color: rgba(var(--#{$prefix}emphasis-color-rgb), .65) !default;
-$navbar-light-hover-color: rgba(var(--#{$prefix}emphasis-color-rgb), .8) !default;
-$navbar-light-active-color: rgba(var(--#{$prefix}emphasis-color-rgb), 1) !default;
-$navbar-light-disabled-color: rgba(var(--#{$prefix}emphasis-color-rgb), .3) !default;
-$navbar-light-icon-color: rgba($body-color, .75) !default;
-$navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
-$navbar-light-toggler-border-color: rgba(var(--#{$prefix}emphasis-color-rgb), .15) !default;
-$navbar-light-brand-color: $navbar-light-active-color !default;
-$navbar-light-brand-hover-color: $navbar-light-active-color !default;
+$navbar-toggler-icon-bg: if($navbar-light-toggler-icon-bg == url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>"), url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{if($navbar-light-icon-color == rgba($body-color, .75), $navbar-icon-color, $navbar-light-icon-color)}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>"), $navbar-light-toggler-icon-bg) !default; // Deprecated in v5.3
+$navbar-toggler-border-color: $navbar-light-toggler-border-color !default;
// scss-docs-end navbar-variables
// scss-docs-start navbar-dark-variables
diff --git a/site/content/docs/5.3/components/navbar.md b/site/content/docs/5.3/components/navbar.md
index ab6c2305ce..78c1750b03 100644
--- a/site/content/docs/5.3/components/navbar.md
+++ b/site/content/docs/5.3/components/navbar.md
@@ -806,6 +806,10 @@ Variables for all navbars:
{{< scss-docs name="navbar-variables" file="scss/_variables.scss" >}}
+Deprecated variables for the [light navbar](#color-schemes):
+
+{{< scss-docs name="navbar-deprecated-variables" file="scss/_variables.scss" >}}
+
Variables for the [dark navbar](#color-schemes):
{{< scss-docs name="navbar-dark-variables" file="scss/_variables.scss" >}}
--
GitLab