Iterate on border utilities

[mdo]

We set --bs-border-opacity: 1 globally at the :root level, so redeclaring it on every .border-* utility doesn't make much sense. I think we can drop this.

Edit: Per conversation below, I've also removed the global --bs-border-opacity and restored it on the .border-{color} utilities. There's no need for border opacity on default .border utilities, just the color ones, which now properly matches our .text-{color} and .bg-{color} utilities. In addition, this rearranged the utilities map to put border-color at the end (without which .border-opacity-* classes wouldn't work properly.

[julien-deramond]

Tested it in border utilities and some components. Indeed it seems safe to drop this 👌
However, Utilities > Borders > Opacity > How it works would probably need an update:

• Drop --bs-border-opacity: 1; in the code shown for .border-success since it is defined in :root.
• Modify the description just after which mentions "(with a default value 1 thanks to a local CSS variable)".

[mdo]

@julien-deramond Should we do the global value, or use a local one? We use local ones on our .bg-* and .text-* utilities... should we maybe restore the local and remove the global, so they all match?

[julien-deramond]

Yes indeed you could restore the local and remove the global so they all match.

If I am remembering well 🤔 there are some edge cases in https://twbs-bootstrap.netlify.app/docs/5.1/utilities/borders/#additive where you can add .border-danger to .border-top, .border-bottom, .border-bottom-0, etc. (without having to add an extra .border).
After removing the global, maybe you will need to add the following:

"border-color": (
  // ...
  local-vars: (
    "border-opacity": 1
  ),
  // ...
),

[mdo]

Good eyes @julien-deramond. I think the latest commit addresses all concerns. Played around with mixing the utilities and using them on components.

[julien-deramond]

The latest commit addresses all concerns. Also played around with mixing the utilities and using them on components and didn't see any regressions. I "approve" this PR :)

By the way it would be very interesting to have the .border-*-0 (or .border-{top|end|etc.}) + .border-{color} combos automatically visually tested (or with components as well) to avoid any regressions. IMO it shouldn't be in the documentation so having them automatically tested would offer security; we won't remember those edge cases in few weeks or months.

[mdo]

Added some examples @julien-deramond:

Also removed the callout that was now out of date regarding the setting of CSS variables only for utilities. We backtracked from that on .text-* and .bg-* awhile back for backward compatibility. In v6, we'll make these utilities use CSS vars only I believe. More to test on that though when the time comes.