Fix border color (side) variation classes in Bootstrap Styles for Varbase Layout Builder default configs

Problem/Motivation

Having border-primary or border-secondary is too strong as in

border-top border-primary|Primary
border-top border-secondary|Secondary
border-top border-dark|Dark
border-top border-white|White

Current border classes are too generic and taken over the right, left, top and bottom.

Steps to reproduce

Given that a user with a permission to use the Layout Builder was logged in
And had created a Landing page (Layout Builder)
And added a section to the page
When chaining the style with borders
And selected a (top, bottom, start/left, or end/right) border color
Then the system and Bootstrap 4 or 5 dose not have a way to set a color for a side of the border
But themers want to be able able to SCSS compile the ( primary, secondary .. and all Bootstrap colors in Vartheme BS4 or Vartheme BS5 )
And make use of that changed color for the side border too

Proposed resolution

Changed config for borders by adding the side of the boarder ( top, bottom, start/left, and end/right)

Example border-top-*{bootstrap $theme-colors}

border-top border-top-primary|Primary
border-top border-top-secondary|Secondary
border-top border-top-dark|Dark
border-top border-top-white|White

Example border-bottom-*{bootstrap $theme-colors}

border-bottom border-bottom-primary|Primary
border-bottom border-bottom-secondary|Secondary
border-bottom border-bottom-dark|Dark
border-bottom border-bottom-white|White

Example border-(left|start)-*{bootstrap $theme-colors}

border-(left|start) border-(left|start)-primary|Primary
border-(left|start) border-(left|start)-secondary|Secondary
border-(left|start) border-(left|start)-dark|Dark
border-(left|start) border-(left|start)-white|White

Example border-(right|end)-*{bootstrap $theme-colors}

border-(right|end) border-(right|end)-primary|Primary
border-(right|end) border-(right|end)-secondary|Secondary
border-(right|end) border-(right|end)-dark|Dark
border-(right|end) border-(right|end)-white|White

Use the Bootstrap 5 utility tools to generate the needed css class for borders and for each bootstrap default colors.
It is a new Border utility tool library.
#3244846: Add Bootstrap Border Color (side) variations to Bootstrap Base Utilities list in Vartheme BS4

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 BS4 or Vartheme BS5 .. and in any VARTHEME_SUBTHEME with

Import the library in the Bootstrap 4/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_BS4_SUBTHEME

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

/* Insert your VARTHEME_BS4_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
• ✅ Fix border color (side) variation classes. And have a hook update
• ✅ 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 varbase-9.0.3, varbase_layout_builder-10.0.6

User interface changes

Test updating border color site variation classes

Bootstrap Settings after the fix and update

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