Add a Root component as a Base, Contains root CSS3 Bootstrap variables to Vartheme BS5

Problem/Motivation

As a content admin,
I want to easily apply styles to my content.
so that I can make an engaging page that follow only the approved styles per the guide.

Proposed resolution

• #3462274: Add a Root component as a Base, Contains root CSS3 Bootstrap variables to Varbase Components
• Add a new component called "root" as a Subatomic particle Base: Consisting of the color palette, typography, shadows, and spacing. which will contain a list of CSS3 variables.
• Include the new root component to vartheme_bs5 and load the component instead to be part of the "bootstrap.base.scss" file.
• Add varbase_components/root: vartheme_bs5/root in libraries-override in the vartheme_bs5.info.yml file

This will be removed from the "bootstrap.base.scss" file and moved to be a component.

#3467445: Fix theme source theme vartheme_bs5 is not a valid starter kit when Create new Vartheme BS5 Cloned Generated Theme

Change on Cloned Generated Theme themes
( new and old custom cloned themes)

• Add ckeditor5.bootstrap.base.css file to ckeditor5-stylesheets in the vartheme_bs5.info.yml file. with .ck-content wrapper class
  

  ckeditor5-stylesheets:
    - css/base/ckeditor5.bootstrap.base.css
  

  with

  @import "../defaults";   // Global defaults.
  
  // CKEditor 5 integration with Bootstrap 5 styling.
  // -----------------------------------------------------------------------------
  
  .ck-content {
    @import "../../node_modules/bootstrap/scss/reboot";
    @import "../../node_modules/bootstrap/scss/type";
    @import "../../node_modules/bootstrap/scss/images";
    @import "../../node_modules/bootstrap/scss/tables";
    @import "../../node_modules/bootstrap/scss/buttons";
    @import "../../node_modules/bootstrap/scss/badge";
    @import "../../node_modules/bootstrap/scss/list-group";
  }
  
  

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
• ➖ UX/UI designer responsibilities
• ➖ Accessibility and Readability
• ✅ Code review from 1 Varbase core team member
• ✅ Full testing and approval
• ✅ Credit contributors
• ✅ Review with the product owner
• ✅ Update Release Notes and Update Helper on new feature change/addition
• ✅ Release varbase-10.0.1, vartheme_bs5-3.0.1

Varbase update type

• ✅ No Update
• ➖ Optional Update
• ➖ Forced Update
• ➖ Forced Update if Unchanged

User interface changes

• #3466509: Change the list of styles for heading with display, callout, alert and remove leftover BS3 and BS4 legacy classes and logic in favour of the new logic in Bootstrap 5
• #3462855: Add ckeditor5-styles library with dependencies from other used components to use it for ckeditor5 styles

API changes

• N/A

Data model changes

• N/A

Release notes snippet

• Issue #3462276 by n.ghunaim: Added a Root component as a Base, Contains root CSS3 Bootstrap variables to Vartheme BS5