Changed [Background Color] in the Styling Settings to use a set of Color set to choose with [Color boxes] with a general color settings

As requested by Razem

1. Add the library as a commented line in VARTHEME_SUBTHEME #2905057: Added the vbp-colors library as a commented line in Vartheme and VARTHEME_SUBTHEME
2. Make the form attach library be aware of overridden libraries from default active theme, if not load from module
3. Edit the form description as below:

LABEL: Available CSS styles (classes) for Varbase Bootstrap Paragraphs
DESCRIPTION:

The list of CSS classes available as background styles for Varbase Bootstrap Pargaraphs. Enter one value per line, in the format key|label where key is the CSS class name (without the .), and label is the human readable name of the style in administration forms.

These styles are defined and can be customized in vbp-colors library that is defined in varbase_bootstrap_paragraphs/varbase_bootstrap_paragraphs.libraries.yml.

To customize the styles to fit your brand with your own theme, do the following:

1. Copy the LESS (varbase_bootstrap_paragraphs/less/theme/vbp-colors.theme.less) and CSS (varbase_bootstrap_paragraphs/css/theme/vbp-colors.theme.css) files to your own theme.
2. Override or replace the vbp-colors library in your own frontend theme. You will need to edit YOURTHEME.libraries.yml and YOURTHEME.info.yml. Refer to the documentation manual for overriding libraries in your theme for more details.
3. Edit the LESS/CSS files in your own theme to customize the styles as you wish. You will notice that the admin form will load your styles in the available "Background color" options for Paragraphs.

@link: https://www.drupal.org/docs/8/theming-drupal-8/adding-stylesheets-css-an...

Given I am a logged in user with a "site admin" user role
When I go to "/admin/config/varbase/varbase-bootstrap-paragraphs"
And I fill in "Available CSS styles (classes) for Varbase Bootstrap Paragraphs" with """

vbp_color_01|Blue
vbp_color_02|Madison
vbp_color_03|Dark Gray
vbp_color_04|Light Gray
vbp_color_05|Red
vbp_color_06|Green
vbp_color_07|Orange

"""
And I press "Save configuration" button
Then I should see "The configuration options have been saved."

Given I am a logged in user with a "site admin" user role
When I go to "/node/add/landing_page"
And wait
And I add 4 paragraphs
Then I should see this in the back-end

And I should see this in the front-end

When the developer Uncomment """

# VARTHEME_SUBTHEME Varbase Bootstrap Paragraphs colors theme.
# Uncomment the following line to load vbp-colors with this theme colors.
#  - vartheme/vbp-colors

""" in the YOURTHEME.yml file
When the developer Uncomment """

# VARTHEME_SUBTHEME Varbase Bootstrap Paragraphs colors theme.
# Uncomment the following line to override vbp-colors with this theme colors.
#  varbase_bootstrap_paragraphs/vbp-colors: vartheme/vbp-colors

""" in the YOURTHEME.yml file
And add """

.vbp_color_06 {
  background: #437100;
  color: #ffffff;
}
.vbp_color_06 a {
  color: #ffffff;
}
.vbp_color_06 a:hover,
.vbp_color_06 a:focus,
.vbp_color_06 a:active,
.vbp_color_06 a.is-active {
  color: #ffffff;
}
.vbp_color_07 {
  background: #FFA500;
  color: #ffffff;
}
.vbp_color_07 a {
  color: #ffffff;
}
.vbp_color_07 a:hover,
.vbp_color_07 a:focus,
.vbp_color_07 a:active,
.vbp_color_07 a.is-active {
  color: #ffffff;
}

""" in the "css/theme/vbp-colors.theme.css" by updating "less/theme/vbp-colors.theme.less" to do the dynamic less pre-process
And the developer Uncomment """

# VARTHEME_SUBTHEME Varbase Bootstrap Paragraphs colors theme.
# Uncommit the following to load your colors file.
#vbp-colors:
#  css:
#    theme:
#      css/theme/vbp-colors.theme.css: {}

""" in the "YOUR_THEME/YOUR_THEME.libraries.yml" file
Then I should see this in the back-end

And I should see this in the front-end