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
- Open https://v6-dev--twbs-bootstrap.netlify.app/ in dark mode.
- Scroll to "Quickly customize components".
- 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
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):--bs-primary--bs-primary-baseoklch(60% .24 240deg)--bs-primary-bgoklch(60% .24 240deg)--bs-primary-fgcolor-mix(in lab, #fff 20%, oklch(60% .24 240deg))Searching the repo confirms
var(--bs-primary)is still referenced from v6 source:(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-pillsexample sets: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
Expected
Either:
A. Re-introduce
--bs-primaryas an alias to one of the new sub-tokens — most likely--bs-primary-base— so v5-era code continues to work: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 ifvar(--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-basedirectly so they don't rely on the alias.Environment
v6-dev