Add Bootstrap Border Color (side) variations to Bootstrap Base Utilities list in Vartheme BS5

Problem/Motivation

#3244849: Fix border color (side) variation classes in Bootstrap Styles for Varbase Layout Builder default configs
Bootstrap 5 doesn't have a specific border selector for side border coloring.

Steps to reproduce

Given that using border-primary or border-secondary on any div or HTML element
When selecting another color for each side of the HTML element like ( border color for top, bottom, start/left or end/right )
Then no Bootstrap 5 set of utility classes to do that
But it's needed in the case of advances Layout Builder editing with VLB

Proposed resolution

Have a set of ready classes in for example the top border and the primary color

• .border-top-primary
• .border-bottom-primary
• .border-right-primary or .border-start-primary
• .border-left-primary or .border-end-primary

And same for other border sides and all Bootstrap default colors
This should be in SCSS then it will compile to CSS to match the primary and secondary and other colors in a project.

Using the $theme-colors only not any other colors

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
) !default;

As Bootstrap 5 only has the list in the following link
https://github.com/twbs/bootstrap/blob/v5.1.3/dist/css/bootstrap.css#L6866

If themers added more color to the $theme-colors map in the bootstrap-variables.scss file it could have a border-top-[color-name] in css .. and the other border sides.

Updates:

Bootstrap Borders Utilities

https://github.com/Vardot/bootstrap-borders-utilities

Add it to your Bootstrap theme project using NPM or Yarn

npm add bootstrap-borders-utilities

or

yarn add bootstrap-borders-utilities

Having the following in dependencies or devDependencies in the package.json file

  "dependencies": {
    "bootstrap-borders-utilities": "^1.0.2"
  }

or

  "devDependencies": {
    "bootstrap-borders-utilities": "^1.0.2"
  }

The default bootstrap-borders-utilities.css example file, with default Bootstrap variables

To compile scss to css in projects
The border-color-variants.scss file can be imported as in bootstrap-borders-utilities.scss

The library could be imported in Vartheme BS5 and in any VARTHEME_BS5_SUBTHEME with

Import the library in the Bootstrap 5 theme

// Bootstrap base from bootstrap library 
// -----------------------------------------------------------------------------
@import "../../node_modules/bootstrap/scss/functions";  // Bootstrap functions.
@import "../../node_modules/bootstrap/scss/mixins";     // Bootstrap mixins.
@import "../variables";                                 // Vartheme variables.
@import "../mixins";                                    // Vartheme mixins.
@import "../../node_modules/bootstrap/scss/_utilities"; // Bootstrap utilities.
// -----------------------------------------------------------------------------

@import "../../node_modules/bootstrap-borders-utilities/utilities/scss/border-color-variants.scss";

and in the VARTHEME_BS5_SUBTHEME

// VARTHEME_BS5_SUBTHEME base, with Bootstrap overrides.
// -----------------------------------------------------------------------------
@import "../../node_modules/bootstrap/scss/functions";  // Bootstrap functions.
@import "../../node_modules/bootstrap/scss/mixins";     // Bootstrap mixins.
@import "../variables";                   // VARTHEME_BS5_SUBTHEME variables.
@import "../mixins";                      // VARTHEME_BS5_SUBTHEME mixins.
@import "../../node_modules/bootstrap/scss/_utilities"; // Bootstrap utilities.
// -----------------------------------------------------------------------------

/* Insert your VARTHEME_BS5_SUBTHEME base overrides over Vartheme BS4 and Bootstrap */

@import "../../node_modules/bootstrap-borders-utilities/utilities/scss/border-color-variants.scss";

Remaining tasks

• ✅ File an issue about this project
• ✅ Addition/Change/Update/Fix to this project
• ✅ Testing to ensure no regression
• ❌ Automated unit/functional testing coverage
• ❌ Developer Documentation support on feature change/addition
• ❌ User Guide Documentation support on feature change/addition
• ✅ Code review from 1 Varbase core team member
• ✅ Full testing and approval
• ✅ Credit contributors
• ✅ Review with the product owner
• ❌ Release vartheme_bs5-1.0.0-alpha1

User interface changes

User interface changes

After the fix - Edit Layout for test border color side variation classes

Front-End after the fix

RTL - After the fix - Edit Layout for test border color side variation classes

RTL - Front-End after the fix

API changes

• N/A

Data model changes

• N/A