Keep a --radius-pill value passed through $root-tokens

[julien-deramond]

--radius-pill is set to 50rem after the user's $root-tokens map is merged, so $root-tokens: (--radius-pill: 0) is silently replaced and Sass can't change the token (there's no $radii step for it). The default is now only set when the map doesn't already have the key.

To see it, compile with @use "bootstrap" with ($radius: 0, $root-tokens: (--radius-pill: 0));: --radius-pill is now 0 instead of 50rem. Without the override it's still 50rem.

What was done

• scss/_root.scss: the map.set is wrapped in @if not map.has-key($root-tokens, --radius-pill). The now unneeded stylelint-disable-next-line comment is gone.
• scss/tests/modules/_root-tokens.test.scss: --radius-pill: 0 is passed in the configuration and a spec checks it's kept.
• Choice: not adding pill to $radii. That map also builds the .rounded-* utilities, which already have a .rounded-pill, so it would change the utilities map.
• Checks: npx jasmine --config=scss/tests/jasmine.cjs passes (48 specs) and fails on the new spec without the change; npx stylelint passes on both files; a sass build of scss/bootstrap.scss with and without the override gives 0 and 50rem. Not run: npm run lint, a browser check beyond the screenshots below.
• dist/css/bootstrap.css, built before and after the change: identical with the default settings. With $radius: 0 and $root-tokens: (--radius-pill: 0), one line changes:

@@ -287,7 +287,7 @@
   --btn-input-lg-font-size: var(--font-size-md);
   --btn-input-lg-line-height: var(--line-height-md);
   --btn-input-lg-border-radius: var(--radius-7);
-  --radius-pill: 50rem;
+  --radius-pill: 0;
   --font-size-xs: 0.75rem;
   --line-height-xs: 1.25;
   --font-size-sm: 0.875rem;

How to review

See it: the same test page at 640px in light mode, built with $radius: 0 and $root-tokens: (--radius-pill: 0). It holds pill badges, a pill button and an element with .rounded-pill. They stay round before the change and turn square after it, which is enough for a change that only moves one token value.

Try it: git fetch origin main-jd-root-tokens-radius-pill && git switch main-jd-root-tokens-radius-pill && npm ci && npx jasmine --config=scss/tests/jasmine.cjs, then compile a file with the @use … with line above and look for --radius-pill in the output.

🤖 Generated with Claude Code