Skip to content

[bug] v6: var(--bs-primary) is undefined but still referenced in source — silent failures (visible white-on-white on homepage) #42422

@anvme

Description

@anvme

Description

In v6, the var(--bs-primary) CSS custom property is referenced from project source code, but no rule in v6 defines --bs-primary — the variable is undefined. v6 exposes the primary color via a family of sub-tokens (--bs-primary-base, --bs-primary-bg, --bs-primary-fg, --bs-primary-bg-subtle, etc.), with no single --bs-primary.

Any CSS that references var(--bs-primary) (without a fallback) resolves to an empty value. Where this empty value feeds another token, the dependent style breaks silently.

Verified — variable is undefined in v6

getComputedStyle(document.documentElement) on https://v6-dev--twbs-bootstrap.netlify.app/ (v6-dev preview):

Property Value
--bs-primary (empty)
--bs-primary-base oklch(60% .24 240deg)
--bs-primary-bg oklch(60% .24 240deg)
--bs-primary-fg color-mix(in lab, #fff 20%, oklch(60% .24 240deg))

Searching the repo confirms var(--bs-primary) is still referenced from v6 source:

site/src/assets/examples/list-groups/list-groups.css
site/src/components/home/ComponentUtilities.astro

(Both are likely v5-era examples that were not updated when the primary token was split into sub-tokens.)

Visible failure on the homepage

On the homepage's "Quickly customize components" section, the right-side .nav-pills example sets:

<ul class="nav nav-pills bg-primary ..." id="pillNav2"
    style="
      --bs-nav-link-color: rgba(255, 255, 255, .75);
      --bs-nav-link-hover-color: #fff;
      --bs-nav-pills-link-active-color: var(--bs-primary);   /* ← resolves to empty */
      --bs-nav-pills-link-active-bg:    var(--bs-white);
    ">

Result in dark color scheme: active "Home" label inherits a near-white color (lab(95% …)) on top of a white pill background → white on white, unreadable.

Steps to reproduce

  1. Open https://v6-dev--twbs-bootstrap.netlify.app/ in dark mode.
  2. Scroll to "Quickly customize components".
  3. The active label on the right-side nav-pills example is invisible.

Expected

Either:

A. Re-introduce --bs-primary as an alias to one of the new sub-tokens — most likely --bs-primary-base — so v5-era code continues to work:

:root {
  --bs-primary: var(--bs-primary-base);
}

This is the lowest-friction option and would also help anyone migrating from v5 who has CSS using the old name.

B. Update every reference to var(--bs-primary) in v6 source to use a sub-token (--bs-primary-base, --bs-primary-bg, …), and consider adding a Sass/build-time check that fails the build if var(--bs-primary[^-]) slips back in.

Suggested fix

I'd recommend A (alias re-introduction) for backward compatibility, plus updating the two known source references to use --bs-primary-base directly so they don't rely on the alias.

Environment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions