Decide whether `$spacers` needs a 2px step

Open
  • Is something wrong?
#43,033 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
45/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Active
Tech stack
css, sass, scss
Domain
design, frontend

Research direction

Read the spacing audit in #42907 and inspect the listed variables and properties in scss/, especially _menu.scss, _nav.scss, _root.scss, content/_reboot.scss, and forms/. Compare the three proposed approaches, including the effect on spacing utility classes. Done means choosing and documenting a consistent treatment for 2px spacing and aligning the validation feedback value.

Written by the indexing model from the issue text.

Description

css design feature needs-decision v6

The spacing audit in #42907 found that almost every spacing value in v6's scss/ that isn't on the $spacers scale is 2px (.125rem). The scale has no such step: it goes from 0 straight to 1 (.25rem, 4px). We should decide whether 2px becomes a step or stays a literal.

Where 2px-ish values are hardcoded on main today:

  • .125rem as a component variable: --menu-gap, --menu-spacer and --menu-divider-margin-y (_menu.scss), --nav-gap (_nav.scss), --btn-input-xs-padding-y (_root.scss), --kbd-padding-y (content/_reboot.scss), --check-margin-block, --radio-margin-block and --switch-margin-block (forms/).
  • .125rem or -.125rem as a property: the datepicker (margin-inline, padding-top, padding-bottom), two margin-top in _menu.scss, one in forms/_form-range.scss.
  • .1rem: margin-top in forms/_validation.scss, probably meant to be 2px too.
  • 2px in a transform: translateY(-2px) in _avatar.scss, translate3d(2px, 0, 0) in a keyframe in utilities/_api.scss. These are visual nudges, not spacing, and can stay as they are.

The options:

  1. Add a 2px step. The keys are 0 to 12, so it needs a key between 0 and 1 (like 0.5 or px), or a renumbering, which would change every spacing utility class while v6 is in alpha. The variables above would then read from the scale, and every spacing utility would get a 2px class unless the utility API leaves the step out.
  2. Keep 2px out of the scale, but name it once (for example $spacer-hairline: $spacer * .125), and use that variable in the places above. No new utilities.
  3. Leave it as it is. The values are intentional and few; the audit is only a count.

Either way, the .1rem in the validation feedback should probably move to the same value as the others.

🤖 Generated with Claude Code

Dominant language
MDX
Stars
175k
Forks
78.7k
Avg merge
1d 7h
Merged PRs (30d)
103

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from twbs/bootstrap

All issues in twbs/bootstrap

Similar issues

More Design issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.