Use --bs-border-width for some components

[jonnysp]

Description

Use border-width classes on some components
to combine utility borders (border-1, boder-2, ...) on these.
like "card border-2", "alert border-4" , ...

Motivation & Context

Fixes #37326

Type of changes

adds variable border-width to some components.

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Refactoring (non-breaking change)
• Breaking change (fix or feature that would change existing functionality)

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation
• I have updated the documentation accordingly
• I have added tests to cover my changes
• All new and existing tests passed

Live previews

• https://deploy-preview-{your_pr_number}--twbs-bootstrap.netlify.app/

Related issues

[mdo]

@jonnysp Can you check linter errors and bundle watch? (Bump the later by .25kb increments)

[mdo]

Thanks!

[rxbracho]

Thank you for closing the bug #37326, I assume it is fixed but not yet in 5.2.2 so I will continue with my workaround. Do I understand correctly that this fix, which included that bug, is slated for 5.3.0? If so, I will wait, thank you. BTW, I placed a comment in that original bug, responding to the request for a CodePen.

[zackd]

seeing some issues where variables are not working with calc() e.g.
margin-left: calc($input-border-width * -1);

using interpolation fixes this:
margin-left: calc(#{$input-border-width} * -1);

[jonnysp]

seeing some issues where variables are not working with calc() e.g. margin-left: calc($input-border-width * -1);

using interpolation fixes this: margin-left: calc(#{$input-border-width} * -1);

I can't see any problems here.
can you describe this in more detail.

[julien-deramond]

@zackd If there are any issues, please create a new one and add a link to this PR (or any other elements) in the description. It's easier for us to track things.

[zackd]

@jonnysp so the source scss is margin-left: calc($input-border-width * -1);
and the generated css is margin-left: calc($input-border-width * -1); .. which obviously is not valid
changing the scss to margin-left: calc(#{$input-border-width} * -1);
outputs css like margin-left: calc(1px * -1); .. which I assume is what is intended

If this looks like a genuine issue I'll create a ticket ...

[jonnysp]

the generated is

bootstrap/dist/css/bootstrap.css

Line 2746 in 0d27f3c

margin-left: calc(var(--bs-border-width) * -1);