css var --mainnavigation-nav-font-size not set at all AND Idea to better set up navbar CSS vars

[Christian Friedrich]

Bugs and Idea to Bootstrap Package 14.0.4

--mainnavigation-nav-font-size should be --mainnavigation-link-font-size in _navbar.scss on line 42

IMPORTANT: In my opinion there shouldnt go "hard" values in css vars in _navbar.scss! It would make much more sense to set these css vars via scss vars from themes _variables.scss! So we can have the benefit of "!default" and developing is much more clear and simple. I did that for us:

Scss/bootstrap5/_variables.scss

//
// Navbar
// --------------------------------------------------
$mainnavigation-hightlight:                 $primary !default;
$mainnavigation-nav-spacing-y:              1px !default;
$mainnavigation-nav-spacing-x:              .75em !default;
$mainnavigation-link-font-size:             1rem !default;
$mainnavigation-link-line-height:           1.45 !default;
$mainnavigation-link-padding-y:             .5rem !default;
$mainnavigation-link-padding-x:             .75rem !default;
$mainnavigation-dropdown-column-spacing:    1px !default;
$mainnavigation-dropdown-column-min-width:  220px !default;
$mainnavigation-dropdown-padding-y:         1rem !default;
$mainnavigation-dropdown-padding-x:         1rem !default;
$mainnavigation-dropdown-link-padding-y:    .2rem !default;
$mainnavigation-dropdown-link-padding-x:    .5rem !default;
$navbar-heights: (
    xs: 70px,
    sm: 70px,
    md: 70px,
    lg: 100px,
    xl: 110px,
    xxl: 110px
) !default;
$navbar-dropdown-columns: (
    xs: 2,
    sm: 2,
    md: 4,
    lg: 4,
    xl: 6,
    xxl: 6
) !default;

Scss/components/_navbar.scss

//
// Main Navigation
//
.navbar-mainnavigation {
    --mainnavigation-hightlight: #{$mainnavigation-hightlight};
    --mainnavigation-nav-spacing-y: #{$mainnavigation-nav-spacing-y};
    --mainnavigation-nav-spacing-x: #{$mainnavigation-nav-spacing-x};
    --mainnavigation-link-font-size: #{$mainnavigation-link-font-size};
    --mainnavigation-link-line-height: #{$mainnavigation-link-line-height};
    --mainnavigation-link-padding-y: #{$mainnavigation-link-padding-y};
    --mainnavigation-link-padding-x: #{$mainnavigation-link-padding-x};
    --mainnavigation-link-height: calc((var(--mainnavigation-link-padding-y) * 2) + (var(--mainnavigation-link-line-height) * var(--mainnavigation-link-font-size)));
    @media (min-width: $grid-float-breakpoint) {
        --mainnavigation-link-padding-x: .5em;
    }
    --mainnavigation-dropdown-spacer: 0;
    @media (min-width: $grid-float-breakpoint) {
        --mainnavigation-dropdown-spacer: .5rem;
    }
    --mainnavigation-dropdown-column-spacing: #{$mainnavigation-dropdown-column-spacing};
    --mainnavigation-dropdown-column-min-width: #{$mainnavigation-dropdown-column-min-width};
    --mainnavigation-dropdown-padding-y: #{$mainnavigation-dropdown-padding-y};
    --mainnavigation-dropdown-padding-x: #{$mainnavigation-dropdown-padding-x};
    --mainnavigation-dropdown-link-padding-y: #{$mainnavigation-dropdown-link-padding-y};
    --mainnavigation-dropdown-link-padding-x: #{$mainnavigation-dropdown-link-padding-x};
}

AND another thought about optimized overriding of bootstrap package vars in general:

while upgrading the package e.g. from 11 to 12 or similar major update, it is hard to keep an eye on all your variables in the theme component files such as "_card.scss" where you can find for example:

$card-color:            $body-color !default;
$card-title-size:       1.35rem !default;
$card-subtitle-size:    1.2rem !default;
$card-link-color:       $link-color !default;
$card-link-hover-color: $link-hover-color !default;

I'm pretty sure it makes much more sense to handle that like bootstrap and put all vars directly to a main variables file -> Scss/bootstrap5/_variables.scss.

In this main var file are as well some vars for the cards:

//
// Cards
// --------------------------------------------------
$card-spacer-y:                     1.5rem !default;
$card-spacer-x:                     1.5rem !default;

Why not put them all together???

//
// Cards
// --------------------------------------------------
$card-spacer-y:                     1.5rem !default;
$card-spacer-x:                     1.5rem !default;
$card-color:            $body-color !default;
$card-title-size:       1.35rem !default;
$card-subtitle-size:    1.2rem !default;
$card-link-color:       $link-color !default;
$card-link-hover-color: $link-hover-color !default;

I think its absolute important to minimize places, where global variables are set, otherwise you often can run into big trouble...

And a last idea:

in the vars file there is on line 142 an total main bootstrap framework variable "$border-color" headlined by "Input". But this var is for every bootstrap component so i would follow the Bootstraps variables.scss approach and put them under // Components between // Options and // Fonts in bootstap package theme variables.scss:

//
// Options
// --------------------------------------------------
$enable-shadows:                    true !default;
$enable-negative-margins:           true !default;
$enable-responsive-font-sizes:      true !default;

//
// Components
// --------------------------------------------------
$border-color:                      $gray-400 !default;

//
// Fonts
// --------------------------------------------------
$font-size-base:                    1rem !default;
$h1-font-size:                      $font-size-base * 2 !default;

and

$input-border-color on line 143 in theme variables shoudn't have a hard color (#959595). There should go a variable instead ($gray-500 fits almost this #-value);

Thank you for your brilliant work!

[Benjamin Kott]

There is a lot to unwrap here, please always consider using dedicated issues.

1. You are right, i fixed the assignment - seems to be an oversight thx a lot for pointing that out!
2. I disagree moving everything to scss, you need to overwrite them anyways so is does not matter if you use css variables or scss variables.
3. The variables overwritten for cards where placed there since it was also used for bootstrap 4 and 5 running parallel, seemed to be the best option back then, since bootstrap 4 has lacked these options, can be reworked i guess.
4. Input borders is a an even more broad topic since the defaults are not considered accessible according WCAG and BITV, The default color are not meeting the requirement without going too dark. $gray-600 would be accessible, $gray-500 is not.