Fix #3757

CHANGELOG.md

@@ -33,6 +33,7 @@
 - Fix #3846: restore `--bulma-column-gap` CSS variable
 - Fix #3775: `has-background` helpers should only affect element it's applied to
 - Fix #3856: Sass nested rule deprecation warning
+- Fix #3757: restore use of `$navbar-burger-color`
 
 ## 1.0.1
 

css/bulma.css

@@ -7164,13 +7164,14 @@ button.dropdown-item.is-selected {
   --bulma-navbar-item-hover-background-l-delta: var(--bulma-hover-background-l-delta);
   --bulma-navbar-item-active-background-l-delta: var(--bulma-active-background-l-delta);
   --bulma-navbar-item-color-l: var(--bulma-text-l);
+  --bulma-navbar-item-color: hsl(var(--bulma-navbar-h), var(--bulma-navbar-s), var(--bulma-navbar-item-color-l));
   --bulma-navbar-item-selected-h: var(--bulma-link-h);
   --bulma-navbar-item-selected-s: var(--bulma-link-s);
   --bulma-navbar-item-selected-l: var(--bulma-link-l);
   --bulma-navbar-item-selected-background-l: var(--bulma-link-l);
   --bulma-navbar-item-selected-color-l: var(--bulma-link-invert-l);
   --bulma-navbar-item-img-max-height: 1.75rem;
-  --bulma-navbar-burger-color: var(--bulma-navbar-item-color);
+  --bulma-navbar-burger-color: var(--bulma-link);
   --bulma-navbar-tab-hover-background-color: transparent;
   --bulma-navbar-tab-hover-border-bottom-color: var(--bulma-link);
   --bulma-navbar-tab-active-color: var(--bulma-link);
@@ -7529,6 +7530,7 @@ body.has-navbar-fixed-bottom {
 }
 .navbar-burger {
   align-self: center;
+  color: var(--bulma-navbar-burger-color);
   margin-inline-start: auto;
   margin-inline-end: 0.375rem;
 }
@@ -7539,7 +7541,7 @@ body.has-navbar-fixed-bottom {
 
 .navbar-item,
 .navbar-link {
-  color: hsl(var(--bulma-navbar-h), var(--bulma-navbar-s), var(--bulma-navbar-item-color-l));
+  color: var(--bulma-navbar-item-color);
   display: block;
   gap: 0.75rem;
   line-height: 1.5;

css/versions/bulma-no-dark-mode.css

@@ -4361,13 +4361,14 @@ button.dropdown-item.is-selected {
   --bulma-navbar-item-hover-background-l-delta: var(--bulma-hover-background-l-delta);
   --bulma-navbar-item-active-background-l-delta: var(--bulma-active-background-l-delta);
   --bulma-navbar-item-color-l: var(--bulma-text-l);
+  --bulma-navbar-item-color: hsl(var(--bulma-navbar-h), var(--bulma-navbar-s), var(--bulma-navbar-item-color-l));
   --bulma-navbar-item-selected-h: var(--bulma-link-h);
   --bulma-navbar-item-selected-s: var(--bulma-link-s);
   --bulma-navbar-item-selected-l: var(--bulma-link-l);
   --bulma-navbar-item-selected-background-l: var(--bulma-link-l);
   --bulma-navbar-item-selected-color-l: var(--bulma-link-invert-l);
   --bulma-navbar-item-img-max-height: 1.75rem;
-  --bulma-navbar-burger-color: var(--bulma-navbar-item-color);
+  --bulma-navbar-burger-color: var(--bulma-link);
   --bulma-navbar-tab-hover-background-color: transparent;
   --bulma-navbar-tab-hover-border-bottom-color: var(--bulma-link);
   --bulma-navbar-tab-active-color: var(--bulma-link);
@@ -4726,6 +4727,7 @@ body.has-navbar-fixed-bottom {
 }
 .navbar-burger {
   align-self: center;
+  color: var(--bulma-navbar-burger-color);
   margin-inline-start: auto;
   margin-inline-end: 0.375rem;
 }
@@ -4736,7 +4738,7 @@ body.has-navbar-fixed-bottom {
 
 .navbar-item,
 .navbar-link {
-  color: hsl(var(--bulma-navbar-h), var(--bulma-navbar-s), var(--bulma-navbar-item-color-l));
+  color: var(--bulma-navbar-item-color);
   display: block;
   gap: 0.75rem;
   line-height: 1.5;

css/versions/bulma-no-helpers-prefixed.css

@@ -4361,13 +4361,14 @@ button.bulma-dropdown-item.bulma-is-selected {
   --bulma-navbar-item-hover-background-l-delta: var(--bulma-hover-background-l-delta);
   --bulma-navbar-item-active-background-l-delta: var(--bulma-active-background-l-delta);
   --bulma-navbar-item-color-l: var(--bulma-text-l);
+  --bulma-navbar-item-color: hsl(var(--bulma-navbar-h), var(--bulma-navbar-s), var(--bulma-navbar-item-color-l));
   --bulma-navbar-item-selected-h: var(--bulma-link-h);
   --bulma-navbar-item-selected-s: var(--bulma-link-s);
   --bulma-navbar-item-selected-l: var(--bulma-link-l);
   --bulma-navbar-item-selected-background-l: var(--bulma-link-l);
   --bulma-navbar-item-selected-color-l: var(--bulma-link-invert-l);
   --bulma-navbar-item-img-max-height: 1.75rem;
-  --bulma-navbar-burger-color: var(--bulma-navbar-item-color);
+  --bulma-navbar-burger-color: var(--bulma-link);
   --bulma-navbar-tab-hover-background-color: transparent;
   --bulma-navbar-tab-hover-border-bottom-color: var(--bulma-link);
   --bulma-navbar-tab-active-color: var(--bulma-link);
@@ -4726,6 +4727,7 @@ body.bulma-has-navbar-fixed-bottom {
 }
 .bulma-navbar-burger {
   align-self: center;
+  color: var(--bulma-navbar-burger-color);
   margin-inline-start: auto;
   margin-inline-end: 0.375rem;
 }
@@ -4736,7 +4738,7 @@ body.bulma-has-navbar-fixed-bottom {
 
 .bulma-navbar-item,
 .bulma-navbar-link {
-  color: hsl(var(--bulma-navbar-h), var(--bulma-navbar-s), var(--bulma-navbar-item-color-l));
+  color: var(--bulma-navbar-item-color);
   display: block;
   gap: 0.75rem;
   line-height: 1.5;

css/versions/bulma-no-helpers.css

@@ -4361,13 +4361,14 @@ button.dropdown-item.is-selected {
   --bulma-navbar-item-hover-background-l-delta: var(--bulma-hover-background-l-delta);
   --bulma-navbar-item-active-background-l-delta: var(--bulma-active-background-l-delta);
   --bulma-navbar-item-color-l: var(--bulma-text-l);
+  --bulma-navbar-item-color: hsl(var(--bulma-navbar-h), var(--bulma-navbar-s), var(--bulma-navbar-item-color-l));
   --bulma-navbar-item-selected-h: var(--bulma-link-h);
   --bulma-navbar-item-selected-s: var(--bulma-link-s);
   --bulma-navbar-item-selected-l: var(--bulma-link-l);
   --bulma-navbar-item-selected-background-l: var(--bulma-link-l);
   --bulma-navbar-item-selected-color-l: var(--bulma-link-invert-l);
   --bulma-navbar-item-img-max-height: 1.75rem;
-  --bulma-navbar-burger-color: var(--bulma-navbar-item-color);
+  --bulma-navbar-burger-color: var(--bulma-link);
   --bulma-navbar-tab-hover-background-color: transparent;
   --bulma-navbar-tab-hover-border-bottom-color: var(--bulma-link);
   --bulma-navbar-tab-active-color: var(--bulma-link);
@@ -4726,6 +4727,7 @@ body.has-navbar-fixed-bottom {
 }
 .navbar-burger {
   align-self: center;
+  color: var(--bulma-navbar-burger-color);
   margin-inline-start: auto;
   margin-inline-end: 0.375rem;
 }
@@ -4736,7 +4738,7 @@ body.has-navbar-fixed-bottom {
 
 .navbar-item,
 .navbar-link {
-  color: hsl(var(--bulma-navbar-h), var(--bulma-navbar-s), var(--bulma-navbar-item-color-l));
+  color: var(--bulma-navbar-item-color);
   display: block;
   gap: 0.75rem;
   line-height: 1.5;

css/versions/bulma-prefixed.min.css

@@ -7164,13 +7164,14 @@ button.bulma-dropdown-item.bulma-is-selected {
   --bulma-navbar-item-hover-background-l-delta: var(--bulma-hover-background-l-delta);
   --bulma-navbar-item-active-background-l-delta: var(--bulma-active-background-l-delta);
   --bulma-navbar-item-color-l: var(--bulma-text-l);
+  --bulma-navbar-item-color: hsl(var(--bulma-navbar-h), var(--bulma-navbar-s), var(--bulma-navbar-item-color-l));
   --bulma-navbar-item-selected-h: var(--bulma-link-h);
   --bulma-navbar-item-selected-s: var(--bulma-link-s);
   --bulma-navbar-item-selected-l: var(--bulma-link-l);
   --bulma-navbar-item-selected-background-l: var(--bulma-link-l);
   --bulma-navbar-item-selected-color-l: var(--bulma-link-invert-l);
   --bulma-navbar-item-img-max-height: 1.75rem;
-  --bulma-navbar-burger-color: var(--bulma-navbar-item-color);
+  --bulma-navbar-burger-color: var(--bulma-link);
   --bulma-navbar-tab-hover-background-color: transparent;
   --bulma-navbar-tab-hover-border-bottom-color: var(--bulma-link);
   --bulma-navbar-tab-active-color: var(--bulma-link);
@@ -7529,6 +7530,7 @@ body.bulma-has-navbar-fixed-bottom {
 }
 .bulma-navbar-burger {
   align-self: center;
+  color: var(--bulma-navbar-burger-color);
   margin-inline-start: auto;
   margin-inline-end: 0.375rem;
 }
@@ -7539,7 +7541,7 @@ body.bulma-has-navbar-fixed-bottom {
 
 .bulma-navbar-item,
 .bulma-navbar-link {
-  color: hsl(var(--bulma-navbar-h), var(--bulma-navbar-s), var(--bulma-navbar-item-color-l));
+  color: var(--bulma-navbar-item-color);
   display: block;
   gap: 0.75rem;
   line-height: 1.5;

sass/components/navbar.scss

@@ -4,9 +4,9 @@
 @use "../utilities/extends";
 @use "../utilities/mixins" as mx;
 
-$navbar-h: cv.getVar("scheme-h");
+$navbar-h: cv.getVar("scheme-h") !default;
-$navbar-s: cv.getVar("scheme-s");
+$navbar-s: cv.getVar("scheme-s") !default;
-$navbar-l: cv.getVar("scheme-main-l");
+$navbar-l: cv.getVar("scheme-main-l") !default;
 $navbar-background-color: cv.getVar("scheme-main") !default;
 $navbar-box-shadow-size: 0 0.125em 0 0 !default;
 $navbar-box-shadow-color: cv.getVar("background") !default;
@@ -16,26 +16,35 @@ $navbar-padding-horizontal: 2rem !default;
 $navbar-z: 30 !default;
 $navbar-fixed-z: 30 !default;
 
-$navbar-item-background-a: 0;
+$navbar-item-background-a: 0 !default;
-$navbar-item-background-l: cv.getVar("scheme-main-l");
+$navbar-item-background-l: cv.getVar("scheme-main-l") !default;
-$navbar-item-background-l-delta: 0%;
+$navbar-item-background-l-delta: 0% !default;
-$navbar-item-hover-background-l-delta: cv.getVar("hover-background-l-delta");
+$navbar-item-hover-background-l-delta: cv.getVar(
-$navbar-item-active-background-l-delta: cv.getVar("active-background-l-delta");
+  "hover-background-l-delta"
-$navbar-item-color-l: cv.getVar("text-l");
+) !default;
-$navbar-item-selected-h: cv.getVar("link-h");
+$navbar-item-active-background-l-delta: cv.getVar(
-$navbar-item-selected-s: cv.getVar("link-s");
+  "active-background-l-delta"
-$navbar-item-selected-l: cv.getVar("link-l");
+) !default;
-$navbar-item-selected-background-l: cv.getVar("link-l");
+$navbar-item-color-l: cv.getVar("text-l") !default;
-$navbar-item-selected-color-l: cv.getVar("link-invert-l");
+$navbar-item-color: hsl(
+  #{cv.getVar("navbar-h")},
+  #{cv.getVar("navbar-s")},
+  #{cv.getVar("navbar-item-color-l")}
+) !default;
+$navbar-item-selected-h: cv.getVar("link-h") !default;
+$navbar-item-selected-s: cv.getVar("link-s") !default;
+$navbar-item-selected-l: cv.getVar("link-l") !default;
+$navbar-item-selected-background-l: cv.getVar("link-l") !default;
+$navbar-item-selected-color-l: cv.getVar("link-invert-l") !default;
 $navbar-item-img-max-height: 1.75rem !default;
 
-$navbar-dropdown-item-h: cv.getVar("scheme-h");
+$navbar-dropdown-item-h: cv.getVar("scheme-h") !default;
-$navbar-dropdown-item-s: cv.getVar("scheme-s");
+$navbar-dropdown-item-s: cv.getVar("scheme-s") !default;
-$navbar-dropdown-item-l: cv.getVar("scheme-main-l");
+$navbar-dropdown-item-l: cv.getVar("scheme-main-l") !default;
-$navbar-dropdown-item-background-l: cv.getVar("scheme-main-l");
+$navbar-dropdown-item-background-l: cv.getVar("scheme-main-l") !default;
-$navbar-dropdown-item-color-l: cv.getVar("text-l");
+$navbar-dropdown-item-color-l: cv.getVar("text-l") !default;
 
-$navbar-burger-color: cv.getVar("navbar-item-color") !default;
+$navbar-burger-color: cv.getVar("link") !default;
 
 $navbar-tab-hover-background-color: transparent !default;
 $navbar-tab-hover-border-bottom-color: cv.getVar("link") !default;
@@ -119,6 +128,7 @@ $navbar-colors: dv.$colors !default;
       "navbar-item-hover-background-l-delta": #{$navbar-item-hover-background-l-delta},
       "navbar-item-active-background-l-delta": #{$navbar-item-active-background-l-delta},
       "navbar-item-color-l": #{$navbar-item-color-l},
+      "navbar-item-color": #{$navbar-item-color},
       "navbar-item-selected-h": #{$navbar-item-selected-h},
       "navbar-item-selected-s": #{$navbar-item-selected-s},
       "navbar-item-selected-l": #{$navbar-item-selected-l},
@@ -257,6 +267,7 @@ body {
 
   & {
     align-self: center;
+    color: cv.getVar("navbar-burger-color");
     margin-inline-start: auto;
     margin-inline-end: 0.375rem;
   }
@@ -268,11 +279,7 @@ body {
 
 .#{iv.$class-prefix}navbar-item,
 .#{iv.$class-prefix}navbar-link {
-  color: hsl(
+  color: cv.getVar("navbar-item-color");
-    #{cv.getVar("navbar-h")},
-    #{cv.getVar("navbar-s")},
-    #{cv.getVar("navbar-item-color-l")}
-  );
   display: block;
   gap: 0.75rem;
   line-height: 1.5;