From 034f17b0fbc40bcc2d7c0c23bf98f6ebd781bbee Mon Sep 17 00:00:00 2001
From: Rajab Natshah <rajabn@gmail.com>
Date: Sat, 1 Jul 2023 01:38:51 +0300
Subject: [PATCH] Issue #3371723: Fix VBP Associate background and foreground
 colors with CSS3 variables in SASS with PostCSS

---
 css/base/vbp-default.admin.css             |  50 ++--
 css/theme/vbp-colors.theme.css             | 254 ++++++++++++---------
 scss/_defaults.scss                        |  15 +-
 scss/_vartheme-mixins.scss                 |   2 -
 scss/_vartheme-variables.scss              |   7 -
 scss/theme/vbp-colors.theme.scss           |  83 +++----
 varbase_bootstrap_paragraphs.info.yml      |   2 +-
 varbase_bootstrap_paragraphs.libraries.yml |   2 +-
 varbase_bootstrap_paragraphs.module        |  24 --
 webpack.config.js                          |   2 +-
 yarn.lock                                  | 131 +++--------
 11 files changed, 260 insertions(+), 312 deletions(-)
 delete mode 100644 scss/_vartheme-mixins.scss
 delete mode 100644 scss/_vartheme-variables.scss

diff --git a/css/base/vbp-default.admin.css b/css/base/vbp-default.admin.css
index 21db239..f51da74 100644
--- a/css/base/vbp-default.admin.css
+++ b/css/base/vbp-default.admin.css
@@ -196,32 +196,32 @@
 
 .field--name-bp-width .form-type-radio label.option.paragraph--width--tiny,
 .field--name-bp-width .form-type--radio label.option.paragraph--width--tiny {
-  background-image: url(../../../../images/icons/paragraph--width--tiny.svg);
+  background-image: url(../../images/icons/paragraph--width--tiny.svg);
 }
 
 .field--name-bp-width .form-type-radio label.option.paragraph--width--narrow,
 .field--name-bp-width .form-type--radio label.option.paragraph--width--narrow {
-  background-image: url(../../../../images/icons/paragraph--width--narrow.svg);
+  background-image: url(../../images/icons/paragraph--width--narrow.svg);
 }
 
 .field--name-bp-width .form-type-radio label.option.paragraph--width--medium,
 .field--name-bp-width .form-type--radio label.option.paragraph--width--medium {
-  background-image: url(../../../../images/icons/paragraph--width--medium.svg);
+  background-image: url(../../images/icons/paragraph--width--medium.svg);
 }
 
 .field--name-bp-width .form-type-radio label.option.paragraph--width--wide,
 .field--name-bp-width .form-type--radio label.option.paragraph--width--wide {
-  background-image: url(../../../../images/icons/paragraph--width--wide.svg);
+  background-image: url(../../images/icons/paragraph--width--wide.svg);
 }
 
 .field--name-bp-width .form-type-radio label.option.paragraph--width--full,
 .field--name-bp-width .form-type--radio label.option.paragraph--width--full {
-  background-image: url(../../../../images/icons/paragraph--width--full.svg);
+  background-image: url(../../images/icons/paragraph--width--full.svg);
 }
 
 .field--name-bp-width .form-type-radio label.option.bg-edge2edge,
 .field--name-bp-width .form-type--radio label.option.bg-edge2edge {
-  background-image: url(../../../../images/icons/paragraph--width--edge-to-edge.svg);
+  background-image: url(../../images/icons/paragraph--width--edge-to-edge.svg);
 }
 
 .field--name-bp-gutter .form-type-radio label.option.gutter-0,
@@ -235,12 +235,12 @@
 
 .field--name-bp-gutter .form-type-radio label.option.gutter-0,
 .field--name-bp-gutter .form-type--radio label.option.gutter-0 {
-  background-image: url(../../../../images/icons/paragraph--gutter--without-gutter.svg);
+  background-image: url(../../images/icons/paragraph--gutter--without-gutter.svg);
 }
 
 .field--name-bp-gutter .form-type-radio label.option.gutter-1,
 .field--name-bp-gutter .form-type--radio label.option.gutter-1 {
-  background-image: url(../../../../images/icons/paragraph--gutter--with-gutter.svg);
+  background-image: url(../../images/icons/paragraph--gutter--with-gutter.svg);
 }
 
 .field--name-bp-column-style-3 .form-type-radio label.option.paragraph--style--25-50-25,
@@ -262,32 +262,32 @@
 
 .field--name-bp-column-style-3 .form-type-radio label.option.paragraph--style--25-50-25,
 .field--name-bp-column-style-3 .form-type--radio label.option.paragraph--style--25-50-25 {
-  background-image: url(../../../../images/icons/paragraph--style--25-50-25.svg);
+  background-image: url(../../images/icons/paragraph--style--25-50-25.svg);
 }
 
 .field--name-bp-column-style-3 .form-type-radio label.option.paragraph--style--50-25-25,
 .field--name-bp-column-style-3 .form-type--radio label.option.paragraph--style--50-25-25 {
-  background-image: url(../../../../images/icons/paragraph--style--50-25-25.svg);
+  background-image: url(../../images/icons/paragraph--style--50-25-25.svg);
 }
 
 .field--name-bp-column-style-3 .form-type-radio label.option.paragraph--style--25-25-50,
 .field--name-bp-column-style-3 .form-type--radio label.option.paragraph--style--25-25-50 {
-  background-image: url(../../../../images/icons/paragraph--style--25-25-50.svg);
+  background-image: url(../../images/icons/paragraph--style--25-25-50.svg);
 }
 
 .field--name-bp-column-style-3 .form-type-radio label.option.paragraph--style--16-66-16,
 .field--name-bp-column-style-3 .form-type--radio label.option.paragraph--style--16-66-16 {
-  background-image: url(../../../../images/icons/paragraph--style--16-66-16.svg);
+  background-image: url(../../images/icons/paragraph--style--16-66-16.svg);
 }
 
 .field--name-bp-column-style-3 .form-type-radio label.option.paragraph--style--66-16-16,
 .field--name-bp-column-style-3 .form-type--radio label.option.paragraph--style--66-16-16 {
-  background-image: url(../../../../images/icons/paragraph--style--66-16-16.svg);
+  background-image: url(../../images/icons/paragraph--style--66-16-16.svg);
 }
 
 .field--name-bp-column-style-3 .form-type-radio label.option.paragraph--style--16-16-66,
 .field--name-bp-column-style-3 .form-type--radio label.option.paragraph--style--16-16-66 {
-  background-image: url(../../../../images/icons/paragraph--style--16-16-66.svg);
+  background-image: url(../../images/icons/paragraph--style--16-16-66.svg);
 }
 
 .field--name-bp-column-style-2 .form-type-radio label.option.paragraph--style--75-25,
@@ -305,22 +305,22 @@
 
 .field--name-bp-column-style-2 .form-type-radio label.option.paragraph--style--75-25,
 .field--name-bp-column-style-2 .form-type--radio label.option.paragraph--style--75-25 {
-  background-image: url(../../../../images/icons/paragraph--style--75-25.svg);
+  background-image: url(../../images/icons/paragraph--style--75-25.svg);
 }
 
 .field--name-bp-column-style-2 .form-type-radio label.option.paragraph--style--66-33,
 .field--name-bp-column-style-2 .form-type--radio label.option.paragraph--style--66-33 {
-  background-image: url(../../../../images/icons/paragraph--style--66-33.svg);
+  background-image: url(../../images/icons/paragraph--style--66-33.svg);
 }
 
 .field--name-bp-column-style-2 .form-type-radio label.option.paragraph--style--25-75,
 .field--name-bp-column-style-2 .form-type--radio label.option.paragraph--style--25-75 {
-  background-image: url(../../../../images/icons/paragraph--style--25-75.svg);
+  background-image: url(../../images/icons/paragraph--style--25-75.svg);
 }
 
 .field--name-bp-column-style-2 .form-type-radio label.option.paragraph--style--33-66,
 .field--name-bp-column-style-2 .form-type--radio label.option.paragraph--style--33-66 {
-  background-image: url(../../../../images/icons/paragraph--style--33-66.svg);
+  background-image: url(../../images/icons/paragraph--style--33-66.svg);
 }
 
 .field--name-text-and-image-style .form-type-radio label.option.paragraph--style--50-50,
@@ -340,27 +340,27 @@
 
 .field--name-text-and-image-style .form-type-radio label.option.paragraph--style--50-50,
 .field--name-text-and-image-style .form-type--radio label.option.paragraph--style--50-50 {
-  background-image: url(../../../../images/icons/paragraph--style--50-50.svg);
+  background-image: url(../../images/icons/paragraph--style--50-50.svg);
 }
 
 .field--name-text-and-image-style .form-type-radio label.option.paragraph--style--75-25,
 .field--name-text-and-image-style .form-type--radio label.option.paragraph--style--75-25 {
-  background-image: url(../../../../images/icons/paragraph--style--75-25.svg);
+  background-image: url(../../images/icons/paragraph--style--75-25.svg);
 }
 
 .field--name-text-and-image-style .form-type-radio label.option.paragraph--style--66-33,
 .field--name-text-and-image-style .form-type--radio label.option.paragraph--style--66-33 {
-  background-image: url(../../../../images/icons/paragraph--style--66-33.svg);
+  background-image: url(../../images/icons/paragraph--style--66-33.svg);
 }
 
 .field--name-text-and-image-style .form-type-radio label.option.paragraph--style--25-75,
 .field--name-text-and-image-style .form-type--radio label.option.paragraph--style--25-75 {
-  background-image: url(../../../../images/icons/paragraph--style--25-75.svg);
+  background-image: url(../../images/icons/paragraph--style--25-75.svg);
 }
 
 .field--name-text-and-image-style .form-type-radio label.option.paragraph--style--33-66,
 .field--name-text-and-image-style .form-type--radio label.option.paragraph--style--33-66 {
-  background-image: url(../../../../images/icons/paragraph--style--33-66.svg);
+  background-image: url(../../images/icons/paragraph--style--33-66.svg);
 }
 
 .field--name-field-image-position .form-type-radio label.option.right,
@@ -374,12 +374,12 @@
 
 .field--name-field-image-position .form-type-radio label.option.right,
 .field--name-field-image-position .form-type--radio label.option.right {
-  background-image: url(../../../../images/icons/paragraph--style--right.svg);
+  background-image: url(../../images/icons/paragraph--style--right.svg);
 }
 
 .field--name-field-image-position .form-type-radio label.option.left,
 .field--name-field-image-position .form-type--radio label.option.left {
-  background-image: url(../../../../images/icons/paragraph--style--left.svg);
+  background-image: url(../../images/icons/paragraph--style--left.svg);
 }
 
 [dir=rtl] .field--name-bp-background .form-type-radio label,
diff --git a/css/theme/vbp-colors.theme.css b/css/theme/vbp-colors.theme.css
index 76cae76..fd7237a 100755
--- a/css/theme/vbp-colors.theme.css
+++ b/css/theme/vbp-colors.theme.css
@@ -29,172 +29,206 @@
   }
 }
 
-.vbp_color_01 {
-  background-color: #338ec7;
-  color: #fff;
+:root {
+  /* VBP Palette background colors */
+  --vbp-palette-color-boston-blue: #338ec7;
+  --vbp-palette-color-pickled-bluewood: #2c3e50;
+  --vbp-palette-color-silver-chalice: #a4a4a4;
+  --vbp-palette-color-alto: #d3d3d3;
+  --vbp-palette-color-persian-red: #cc3c2d;
+  --vbp-palette-color-anzac: #e4b649;
 }
 
-.vbp_color_01 a {
-  color: #fff;
+body {
+  /* VBP Associate background colors */
+  --vbp_color_01: var(--vbp-palette-color-boston-blue);
+  --vbp_color_02: var(--vbp-palette-color-pickled-bluewood);
+  --vbp_color_03: var(--vbp-palette-color-silver-chalice);
+  --vbp_color_04: var(--vbp-palette-color-alto);
+  --vbp_color_05: var(--vbp-palette-color-persian-red);
 }
 
-.vbp_color_01 a:hover,
- .vbp_color_01 a:focus,
- .vbp_color_01 a:active,
- .vbp_color_01 a.is-active,
- .vbp_color_01 a.active {
-  color: #fff;
+:root {
+  /* VBP palette foreground colors */
+  --vbp-palette-color-black: #000;
+  --vbp-palette-color-white: #fff;
 }
 
-.vbp_color_02 {
-  background-color: #2c3e50;
-  color: #fff;
+body {
+  /* VBP Associate foreground colors */
+  --vbp_foreground_color_01: var(--vbp-palette-color-white);
+  --vbp_foreground_color_02: var(--vbp-palette-color-white);
+  --vbp_foreground_color_03: var(--vbp-palette-color-white);
+  --vbp_foreground_color_04: var(--vbp-palette-color-black);
+  --vbp_foreground_color_05: var(--vbp-palette-color-white);
 }
 
-.vbp_color_02 a {
-  color: #fff;
+body .vbp_color_01 {
+  background-color: var(--vbp_color_01);
+  color: var(--vbp_foreground_color_01);
 }
 
-.vbp_color_02 a:hover,
- .vbp_color_02 a:focus,
- .vbp_color_02 a:active,
- .vbp_color_02 a.is-active,
- .vbp_color_02 a.active {
-  color: #fff;
+body .vbp_color_01 a {
+  color: var(--vbp_foreground_color_01);
 }
 
-.vbp_color_03 {
-  background-color: #a4a4a4;
-  color: #fff;
+body .vbp_color_01 a:hover,
+ body .vbp_color_01 a:focus,
+ body .vbp_color_01 a:active,
+ body .vbp_color_01 a.is-active,
+ body .vbp_color_01 a.active {
+  color: var(--vbp_foreground_color_01);
 }
 
-.vbp_color_03 a {
-  color: #fff;
+body .vbp_color_02 {
+  background-color: var(--vbp_color_02);
+  color: var(--vbp_foreground_color_02);
 }
 
-.vbp_color_03 a:hover,
- .vbp_color_03 a:focus,
- .vbp_color_03 a:active,
- .vbp_color_03 a.is-active,
- .vbp_color_03 a.active {
-  color: #fff;
+body .vbp_color_02 a {
+  color: var(--vbp_foreground_color_02);
 }
 
-.vbp_color_04 {
-  background-color: #d3d3d3;
-  color: #000;
+body .vbp_color_02 a:hover,
+ body .vbp_color_02 a:focus,
+ body .vbp_color_02 a:active,
+ body .vbp_color_02 a.is-active,
+ body .vbp_color_02 a.active {
+  color: var(--vbp_foreground_color_02);
 }
 
-.vbp_color_04 a {
-  color: #000;
+body .vbp_color_03 {
+  background-color: var(--vbp_color_03);
+  color: var(--vbp_foreground_color_03);
 }
 
-.vbp_color_04 a:hover,
- .vbp_color_04 a:focus,
- .vbp_color_04 a:active,
- .vbp_color_04 a.is-active,
- .vbp_color_04 a.active {
-  color: #000;
+body .vbp_color_03 a {
+  color: var(--vbp_foreground_color_03);
 }
 
-.vbp_color_05 {
-  background-color: #cc3c2d;
-  color: #fff;
+body .vbp_color_03 a:hover,
+ body .vbp_color_03 a:focus,
+ body .vbp_color_03 a:active,
+ body .vbp_color_03 a.is-active,
+ body .vbp_color_03 a.active {
+  color: var(--vbp_foreground_color_03);
 }
 
-.vbp_color_05 a {
-  color: #fff;
+body .vbp_color_04 {
+  background-color: var(--vbp_color_04);
+  color: var(--vbp_foreground_color_04);
 }
 
-.vbp_color_05 a:hover,
- .vbp_color_05 a:focus,
- .vbp_color_05 a:active,
- .vbp_color_05 a.is-active,
- .vbp_color_05 a.active {
-  color: #fff;
+body .vbp_color_04 a {
+  color: var(--vbp_foreground_color_04);
 }
 
-#drupal-off-canvas .vbp_color_01 {
-  background-color: #338ec7;
-  color: #fff;
+body .vbp_color_04 a:hover,
+ body .vbp_color_04 a:focus,
+ body .vbp_color_04 a:active,
+ body .vbp_color_04 a.is-active,
+ body .vbp_color_04 a.active {
+  color: var(--vbp_foreground_color_04);
 }
 
-#drupal-off-canvas .vbp_color_01 a {
-  color: #fff;
+body .vbp_color_05 {
+  background-color: var(--vbp_color_05);
+  color: var(--vbp_foreground_color_05);
 }
 
-#drupal-off-canvas .vbp_color_01 a:hover,
- #drupal-off-canvas .vbp_color_01 a:focus,
- #drupal-off-canvas .vbp_color_01 a:active,
- #drupal-off-canvas .vbp_color_01 a.is-active,
- #drupal-off-canvas .vbp_color_01 a.active {
-  color: #fff;
+body .vbp_color_05 a {
+  color: var(--vbp_foreground_color_05);
 }
 
-#drupal-off-canvas .vbp_color_02 {
-  background-color: #2c3e50;
-  color: #fff;
+body .vbp_color_05 a:hover,
+ body .vbp_color_05 a:focus,
+ body .vbp_color_05 a:active,
+ body .vbp_color_05 a.is-active,
+ body .vbp_color_05 a.active {
+  color: var(--vbp_foreground_color_05);
 }
 
-#drupal-off-canvas .vbp_color_02 a {
-  color: #fff;
+#drupal-off-canvas body .vbp_color_01 {
+  background-color: var(--vbp_color_01);
+  color: var(--vbp_foreground_color_01);
 }
 
-#drupal-off-canvas .vbp_color_02 a:hover,
- #drupal-off-canvas .vbp_color_02 a:focus,
- #drupal-off-canvas .vbp_color_02 a:active,
- #drupal-off-canvas .vbp_color_02 a.is-active,
- #drupal-off-canvas .vbp_color_02 a.active {
-  color: #fff;
+#drupal-off-canvas body .vbp_color_01 a {
+  color: var(--vbp_foreground_color_01);
 }
 
-#drupal-off-canvas .vbp_color_03 {
-  background-color: #a4a4a4;
-  color: #fff;
+#drupal-off-canvas body .vbp_color_01 a:hover,
+ #drupal-off-canvas body .vbp_color_01 a:focus,
+ #drupal-off-canvas body .vbp_color_01 a:active,
+ #drupal-off-canvas body .vbp_color_01 a.is-active,
+ #drupal-off-canvas body .vbp_color_01 a.active {
+  color: var(--vbp_foreground_color_01);
 }
 
-#drupal-off-canvas .vbp_color_03 a {
-  color: #fff;
+#drupal-off-canvas body .vbp_color_02 {
+  background-color: var(--vbp_color_02);
+  color: var(--vbp_foreground_color_02);
 }
 
-#drupal-off-canvas .vbp_color_03 a:hover,
- #drupal-off-canvas .vbp_color_03 a:focus,
- #drupal-off-canvas .vbp_color_03 a:active,
- #drupal-off-canvas .vbp_color_03 a.is-active,
- #drupal-off-canvas .vbp_color_03 a.active {
-  color: #fff;
+#drupal-off-canvas body .vbp_color_02 a {
+  color: var(--vbp_foreground_color_02);
 }
 
-#drupal-off-canvas .vbp_color_04 {
-  background-color: #d3d3d3;
-  color: #000;
+#drupal-off-canvas body .vbp_color_02 a:hover,
+ #drupal-off-canvas body .vbp_color_02 a:focus,
+ #drupal-off-canvas body .vbp_color_02 a:active,
+ #drupal-off-canvas body .vbp_color_02 a.is-active,
+ #drupal-off-canvas body .vbp_color_02 a.active {
+  color: var(--vbp_foreground_color_02);
 }
 
-#drupal-off-canvas .vbp_color_04 a {
-  color: #000;
+#drupal-off-canvas body .vbp_color_03 {
+  background-color: var(--vbp_color_03);
+  color: var(--vbp_foreground_color_03);
 }
 
-#drupal-off-canvas .vbp_color_04 a:hover,
- #drupal-off-canvas .vbp_color_04 a:focus,
- #drupal-off-canvas .vbp_color_04 a:active,
- #drupal-off-canvas .vbp_color_04 a.is-active,
- #drupal-off-canvas .vbp_color_04 a.active {
-  color: #000;
+#drupal-off-canvas body .vbp_color_03 a {
+  color: var(--vbp_foreground_color_03);
 }
 
-#drupal-off-canvas .vbp_color_05 {
-  background-color: #cc3c2d;
-  color: #fff;
+#drupal-off-canvas body .vbp_color_03 a:hover,
+ #drupal-off-canvas body .vbp_color_03 a:focus,
+ #drupal-off-canvas body .vbp_color_03 a:active,
+ #drupal-off-canvas body .vbp_color_03 a.is-active,
+ #drupal-off-canvas body .vbp_color_03 a.active {
+  color: var(--vbp_foreground_color_03);
 }
 
-#drupal-off-canvas .vbp_color_05 a {
-  color: #fff;
+#drupal-off-canvas body .vbp_color_04 {
+  background-color: var(--vbp_color_04);
+  color: var(--vbp_foreground_color_04);
 }
 
-#drupal-off-canvas .vbp_color_05 a:hover,
- #drupal-off-canvas .vbp_color_05 a:focus,
- #drupal-off-canvas .vbp_color_05 a:active,
- #drupal-off-canvas .vbp_color_05 a.is-active,
- #drupal-off-canvas .vbp_color_05 a.active {
-  color: #fff;
+#drupal-off-canvas body .vbp_color_04 a {
+  color: var(--vbp_foreground_color_04);
+}
+
+#drupal-off-canvas body .vbp_color_04 a:hover,
+ #drupal-off-canvas body .vbp_color_04 a:focus,
+ #drupal-off-canvas body .vbp_color_04 a:active,
+ #drupal-off-canvas body .vbp_color_04 a.is-active,
+ #drupal-off-canvas body .vbp_color_04 a.active {
+  color: var(--vbp_foreground_color_04);
+}
+
+#drupal-off-canvas body .vbp_color_05 {
+  background-color: var(--vbp_color_05);
+  color: var(--vbp_foreground_color_05);
+}
+
+#drupal-off-canvas body .vbp_color_05 a {
+  color: var(--vbp_foreground_color_05);
+}
+
+#drupal-off-canvas body .vbp_color_05 a:hover,
+ #drupal-off-canvas body .vbp_color_05 a:focus,
+ #drupal-off-canvas body .vbp_color_05 a:active,
+ #drupal-off-canvas body .vbp_color_05 a.is-active,
+ #drupal-off-canvas body .vbp_color_05 a.active {
+  color: var(--vbp_foreground_color_05);
 }
diff --git a/scss/_defaults.scss b/scss/_defaults.scss
index d9004c0..ecf5c51 100644
--- a/scss/_defaults.scss
+++ b/scss/_defaults.scss
@@ -5,11 +5,10 @@
 // Custom default path for the location of custom SCSS source files
 // from within "./components/{component_type}/{component_name}".
 
-@import "./bootstrap-variables";                       // Override Bootstrap 5 variables.
-@import "./vartheme-variables";                        // Vartheme custom variables.
-@import "./vartheme-mixins";                           // Vartheme custom mixins.
-@import "../node_modules/bootstrap/scss/functions";    // Bootstrap functions.
-@import "../node_modules/bootstrap/scss/variables";    // Bootstrap variables.
-@import "../node_modules/bootstrap/scss/maps";         // Bootstrap maps.
-@import "../node_modules/bootstrap/scss/mixins";       // Bootstrap mixins.
-@import "../node_modules/bootstrap/scss/utilities";    // Bootstrap utilities.
+@import "./bootstrap-variables";                           // Override Bootstrap 5 variables.
+@import "../node_modules/bootstrap/scss/functions";        // Bootstrap functions.
+@import "../node_modules/bootstrap/scss/variables";        // Bootstrap variables.
+@import "../node_modules/bootstrap/scss/variables-dark";   // Bootstrap dark variables.
+@import "../node_modules/bootstrap/scss/maps";             // Bootstrap maps.
+@import "../node_modules/bootstrap/scss/mixins";           // Bootstrap mixins.
+@import "../node_modules/bootstrap/scss/utilities";        // Bootstrap utilities.
diff --git a/scss/_vartheme-mixins.scss b/scss/_vartheme-mixins.scss
deleted file mode 100644
index ec0871b..0000000
--- a/scss/_vartheme-mixins.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-// Vartheme custom mixins
-// -----------------------------------------------------------------------------
diff --git a/scss/_vartheme-variables.scss b/scss/_vartheme-variables.scss
deleted file mode 100644
index bc7451f..0000000
--- a/scss/_vartheme-variables.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-// Vartheme custom variables
-// -----------------------------------------------------------------------------
-
-// View Mode Inventory (VMI).
-// -----------------------------------------------------------------------------
-$grid-gutter-width: 30px;
-$view-modes-padding: math.div($grid-gutter-width, 2);
diff --git a/scss/theme/vbp-colors.theme.scss b/scss/theme/vbp-colors.theme.scss
index cb5d808..9ac27ac 100644
--- a/scss/theme/vbp-colors.theme.scss
+++ b/scss/theme/vbp-colors.theme.scss
@@ -27,33 +27,34 @@
 // vbp_color_05: Red
 
 // List of palette background colors by name.
-$vbp-palette-color-boston-blue:      #338ec7;
-$vbp-palette-color-pickled-bluewood: #2c3e50;
-$vbp-palette-color-silver-chalice:   #a4a4a4;
-$vbp-palette-color-alto:             #d3d3d3;
-$vbp-palette-color-persian-red:      #cc3c2d;
-$vbp-palette-color-anzac:            #E4B649;
+:root {
+  /* VBP Palette background colors */
+  --vbp-palette-color-boston-blue:      #338ec7;
+  --vbp-palette-color-pickled-bluewood: #2c3e50;
+  --vbp-palette-color-silver-chalice:   #a4a4a4;
+  --vbp-palette-color-alto:             #d3d3d3;
+  --vbp-palette-color-persian-red:      #cc3c2d;
+  --vbp-palette-color-anzac:            #E4B649;
+}
 
 // Associate background colors names to a function name.
-$vbp_color_01: $vbp-palette-color-boston-blue;       // Blue
-$vbp_color_02: $vbp-palette-color-pickled-bluewood;  // Madison
-$vbp_color_03: $vbp-palette-color-silver-chalice;    // Dark Gray
-$vbp_color_04: $vbp-palette-color-alto;              // Light Gray
-$vbp_color_05: $vbp-palette-color-persian-red;       // Red
+body {
+  /* VBP Associate background colors */
+  --vbp_color_01: var(--vbp-palette-color-boston-blue);       // Blue
+  --vbp_color_02: var(--vbp-palette-color-pickled-bluewood);  // Madison
+  --vbp_color_03: var(--vbp-palette-color-silver-chalice);    // Dark Gray
+  --vbp_color_04: var(--vbp-palette-color-alto);              // Light Gray
+  --vbp_color_05: var(--vbp-palette-color-persian-red);       // Red
+}
 
 // Map of background colors by function.
-$vbp-colors: () !default;
-$vbp-colors: map-merge(
-  (
-    "vbp_color_01": $vbp_color_01,
-    "vbp_color_02": $vbp_color_02,
-    "vbp_color_03": $vbp_color_03,
-    "vbp_color_04": $vbp_color_04,
-    "vbp_color_05": $vbp_color_05
-  ),
-  $vbp-colors
+$vbp-colors: (
+  "vbp_color_01": var(--vbp_color_01),
+  "vbp_color_02": var(--vbp_color_02),
+  "vbp_color_03": var(--vbp_color_03),
+  "vbp_color_04": var(--vbp_color_04),
+  "vbp_color_05": var(--vbp_color_05)
 );
-
 // Foreground colors:
 // -----------------------------------------------------------------------------
 // vbp_foreground_color_01: White for background vbp_color_01 color.
@@ -63,34 +64,36 @@ $vbp-colors: map-merge(
 // vbp_foreground_color_05: White for background vbp_color_05 color.
 
 // List of palette foreground colors by name.
-$vbp-palette-color-black:            #000000;
-$vbp-palette-color-white:            #ffffff;
+:root {
+  /* VBP palette foreground colors */
+  --vbp-palette-color-black: #000000;
+  --vbp-palette-color-white: #ffffff;
+}
 
 // Associate foreground colors names to a function name.
-$vbp_foreground_color_01: $vbp-palette-color-white; // White
-$vbp_foreground_color_02: $vbp-palette-color-white; // White
-$vbp_foreground_color_03: $vbp-palette-color-white; // White
-$vbp_foreground_color_04: $vbp-palette-color-black; // Black
-$vbp_foreground_color_05: $vbp-palette-color-white; // White
+body {
+  /* VBP Associate foreground colors */
+  --vbp_foreground_color_01: var(--vbp-palette-color-white); // White
+  --vbp_foreground_color_02: var(--vbp-palette-color-white); // White
+  --vbp_foreground_color_03: var(--vbp-palette-color-white); // White
+  --vbp_foreground_color_04: var(--vbp-palette-color-black); // Black
+  --vbp_foreground_color_05: var(--vbp-palette-color-white); // White
+}
 
 // Map of foreground colors by function.
-$vbp-foreground-colors: () !default;
-$vbp-foreground-colors: map-merge(
-  (
-    "vbp_color_01": $vbp_foreground_color_01,
-    "vbp_color_02": $vbp_foreground_color_02,
-    "vbp_color_03": $vbp_foreground_color_03,
-    "vbp_color_04": $vbp_foreground_color_04,
-    "vbp_color_05": $vbp_foreground_color_05
-  ),
-  $vbp-foreground-colors
+$vbp-foreground-colors: (
+  "vbp_color_01": var(--vbp_foreground_color_01),
+  "vbp_color_02": var(--vbp_foreground_color_02),
+  "vbp_color_03": var(--vbp_foreground_color_03),
+  "vbp_color_04": var(--vbp_foreground_color_04),
+  "vbp_color_05": var(--vbp_foreground_color_05)
 );
 
 // Varbase Bootstrap Paragraphs color default template for the vbp_color_{NUM}
 // we could copy this mixin and change it for other type of styling options.
 // This could be changed in your sub-theme, in the way you custom sites.
 @mixin vbp_color($vbp_color_name, $vbp_background_color, $vbp_foreground_color) {
-  .#{$vbp_color_name} {
+  body .#{$vbp_color_name} {
     background-color: $vbp_background_color;
     color: $vbp_foreground_color;
 
diff --git a/varbase_bootstrap_paragraphs.info.yml b/varbase_bootstrap_paragraphs.info.yml
index 81d94eb..8f501b8 100755
--- a/varbase_bootstrap_paragraphs.info.yml
+++ b/varbase_bootstrap_paragraphs.info.yml
@@ -1,6 +1,6 @@
 name: "Varbase Bootstrap Paragraphs"
 type: module
-description: "A suite of Paragraph bundles to be used for Varbase distribution. Made with the Boostrap framework, based on a fork of Bootstrap Paragraph module (bootstrap_paragraphs)."
+description: "A suite of Paragraph bundles to be used for Varbase distribution. Made with the Bootstrap framework, based on a fork of Bootstrap Paragraph module (bootstrap_paragraphs)."
 core_version_requirement: ~10.1.0
 package: Varbase
 configure: varbase_bootstrap_paragraphs.settings
diff --git a/varbase_bootstrap_paragraphs.libraries.yml b/varbase_bootstrap_paragraphs.libraries.yml
index a85b8ba..2c66d47 100755
--- a/varbase_bootstrap_paragraphs.libraries.yml
+++ b/varbase_bootstrap_paragraphs.libraries.yml
@@ -17,7 +17,7 @@ vbp-default-admin:
     - core/drupal
     - core/jquery
     - core/drupal.debounce
-
+    - varbase_bootstrap_paragraphs/vbp-colors
 
 # Varbase Bootstrap Paragraphs colors theme.
 vbp-colors:
diff --git a/varbase_bootstrap_paragraphs.module b/varbase_bootstrap_paragraphs.module
index aecfcbd..7626807 100755
--- a/varbase_bootstrap_paragraphs.module
+++ b/varbase_bootstrap_paragraphs.module
@@ -145,18 +145,6 @@ function varbase_bootstrap_paragraphs_field_widget_entity_reference_paragraphs_f
     // Updated the bp_background options with the list of vbp colors.
     $element['subform']['bp_background']['widget']['#options'] = $background_colors_options;
 
-    // Get the default active theme for the site.
-    $default_system_theme = \Drupal::configFactory()->getEditable('system.theme');
-    $default_active_theme_name = $default_system_theme->get('default');
-    $default_active_theme_libraries = \Drupal::service('library.discovery')->getLibrariesByExtension($default_active_theme_name);
-
-    // If the default active theme has got the vbp-colors library use it.
-    if (isset($default_active_theme_libraries['vbp-colors'])) {
-      $element['subform']['#attached']['library'][] = $default_active_theme_name . '/vbp-colors';
-    }
-    else {
-      $element['subform']['#attached']['library'][] = 'varbase_bootstrap_paragraphs/vbp-colors';
-    }
   }
 }
 
@@ -256,18 +244,6 @@ function varbase_bootstrap_paragraphs_form_alter(&$form, FormStateInterface $for
       // Updated the bp_background options with the list of vbp colors.
       $form['bp_background']['widget']['#options'] = $background_colors_options;
 
-      // Get the default active theme for the site.
-      $default_system_theme = \Drupal::configFactory()->getEditable('system.theme');
-      $default_active_theme_name = $default_system_theme->get('default');
-      $default_active_theme_libraries = \Drupal::service('library.discovery')->getLibrariesByExtension($default_active_theme_name);
-
-      // If the default active theme has got the vbp-colors library use it.
-      if (isset($default_active_theme_libraries['vbp-colors'])) {
-        $form['#attached']['library'][] = $default_active_theme_name . '/vbp-colors';
-      }
-      else {
-        $form['#attached']['library'][] = 'varbase_bootstrap_paragraphs/vbp-colors';
-      }
     }
 
   }
diff --git a/webpack.config.js b/webpack.config.js
index 55b5416..2eadb99 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -26,7 +26,7 @@ module.exports = {
   output: {
     path: path.resolve(__dirname, 'css'),
     pathinfo: true,
-    publicPath: '../../',
+    publicPath: '',
   },
   module: {
     rules: [
diff --git a/yarn.lock b/yarn.lock
index f72c948..564a8e3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,6 +2,11 @@
 # yarn lockfile v1
 
 
+"@aashutoshrathi/word-wrap@^1.2.3":
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz#bd9154aec9983f77b3a034ecaa015c2e4201f6cf"
+  integrity sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==
+
 "@babel/code-frame@^7.0.0":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.22.5.tgz#234d98e1551960604f1246e6475891a570ad5658"
@@ -326,44 +331,22 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
   integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
 
-"@jridgewell/gen-mapping@^0.3.0":
-  version "0.3.3"
-  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz#7e02e6eb5df901aaedb08514203b096614024098"
-  integrity sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==
-  dependencies:
-    "@jridgewell/set-array" "^1.0.1"
-    "@jridgewell/sourcemap-codec" "^1.4.10"
-    "@jridgewell/trace-mapping" "^0.3.9"
-
 "@jridgewell/resolve-uri@3.1.0":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz#2203b118c157721addfe69d47b70465463066d78"
   integrity sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==
 
-"@jridgewell/set-array@^1.0.1":
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.2.tgz#7c6cf998d6d20b914c0a55a91ae928ff25965e72"
-  integrity sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==
-
 "@jridgewell/source-map@^0.3.3":
-  version "0.3.3"
-  resolved "https://registry.yarnpkg.com/@jridgewell/source-map/-/source-map-0.3.3.tgz#8108265659d4c33e72ffe14e33d6cc5eb59f2fda"
-  integrity sha512-b+fsZXeLYi9fEULmfBrhxn4IrPlINf8fiNarzTof004v3lFdntdwa9PF7vFJqm3mg7s+ScJMxXaE3Acp1irZcg==
-  dependencies:
-    "@jridgewell/gen-mapping" "^0.3.0"
-    "@jridgewell/trace-mapping" "^0.3.9"
+  version "0.3.4"
+  resolved "https://registry.yarnpkg.com/@jridgewell/source-map/-/source-map-0.3.4.tgz#856a142864530d4059dda415659b48d37db2d556"
+  integrity sha512-KE/SxsDqNs3rrWwFHcRh15ZLVFrI0YoZtgAdIyIq9k5hUNmiWRXXThPomIxHuL20sLdgzbDFyvkUMna14bvtrw==
 
 "@jridgewell/sourcemap-codec@1.4.14":
   version "1.4.14"
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz#add4c98d341472a289190b424efbdb096991bb24"
   integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
 
-"@jridgewell/sourcemap-codec@^1.4.10":
-  version "1.4.15"
-  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
-  integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
-
-"@jridgewell/trace-mapping@^0.3.17", "@jridgewell/trace-mapping@^0.3.9":
+"@jridgewell/trace-mapping@^0.3.17":
   version "0.3.18"
   resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz#25783b2086daf6ff1dcb53c9249ae480e4dd4cd6"
   integrity sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==
@@ -927,7 +910,7 @@ available-typed-arrays@^1.0.5:
   resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz#92f95616501069d07d10edb2fc37d3e1c65123b7"
   integrity sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==
 
-axe-core@^4.6.3:
+axe-core@^4.7.2:
   version "4.7.2"
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.7.2.tgz#040a7342b20765cb18bb50b628394c21bccc17a0"
   integrity sha512-zIURGIS1E1Q4pcrMjp+nnEh+16G56eG/MUllJH8yEvw7asDo7Ac9uhC9KIH5jzpITueEZolfYglnCGIuSBz39g==
@@ -1078,9 +1061,9 @@ camelcase@^6.0.0, camelcase@^6.2.0:
   integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
 
 caniuse-lite@^1.0.30001464, caniuse-lite@^1.0.30001503:
-  version "1.0.30001508"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001508.tgz#4461bbc895c692a96da399639cc1e146e7302a33"
-  integrity sha512-sdQZOJdmt3GJs1UMNpCCCyeuS2IEGLXnHyAo9yIO5JJDjbjoVRij4M1qep6P6gFpptD1PqIYgzM+gwJbOi92mw==
+  version "1.0.30001509"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001509.tgz#2b7ad5265392d6d2de25cd8776d1ab3899570d14"
+  integrity sha512-2uDDk+TRiTX5hMcUYT/7CSyzMZxjfGu0vAUjS2g0LSD8UoXOv0LtpH4LxGMemsiPq6LCVIUjNwVM0erkOkGCDA==
 
 chai-nightwatch@0.5.3:
   version "0.5.3"
@@ -1504,7 +1487,7 @@ deep-eql@4.0.1:
   dependencies:
     type-detect "^4.0.0"
 
-deep-is@^0.1.3, deep-is@~0.1.3:
+deep-is@^0.1.3:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
   integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
@@ -1650,9 +1633,9 @@ ejs@3.1.8:
     jake "^10.8.5"
 
 electron-to-chromium@^1.4.431:
-  version "1.4.441"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.441.tgz#94dd9c1cbf081d83f032a4f1cd9f787e21fc24ce"
-  integrity sha512-LlCgQ8zgYZPymf5H4aE9itwiIWH4YlCiv1HFLmmcBeFYi5E+3eaIFnjHzYtcFQbaKfAW+CqZ9pgxo33DZuoqPg==
+  version "1.4.447"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.447.tgz#ac69d3a7b3713e9ae94bb30ba65c3114e4d76a38"
+  integrity sha512-sxX0LXh+uL41hSJsujAN86PjhrV/6c79XmpY0TvjZStV6VxIgarf8SRkUoUTuYmFcZQTemsoqo8qXOGw5npWfw==
 
 emoji-regex@^8.0.0:
   version "8.0.0"
@@ -1785,14 +1768,13 @@ escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
   integrity sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==
 
 escodegen@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-2.0.0.tgz#5e32b12833e8aa8fa35e1bf0befa89380484c7dd"
-  integrity sha512-mmHKys/C8BFUGI+MAWNcSYoORYLMdPzjrknd2Vc+bUsjN5bXcr8EhrNB+UTqfL1y3I9c4fw2ihgtMPQLBRiQxw==
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-2.1.0.tgz#ba93bbb7a43986d29d6041f99f5262da773e2e17"
+  integrity sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==
   dependencies:
     esprima "^4.0.1"
     estraverse "^5.2.0"
     esutils "^2.0.2"
-    optionator "^0.8.1"
   optionalDependencies:
     source-map "~0.6.1"
 
@@ -2000,9 +1982,9 @@ fast-diff@^1.1.2:
   integrity sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==
 
 fast-glob@^3.2.11, fast-glob@^3.2.12, fast-glob@^3.2.9:
-  version "3.2.12"
-  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.12.tgz#7f39ec99c2e6ab030337142da9e0c18f37afae80"
-  integrity sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.0.tgz#7c40cb491e1e2ed5664749e87bfb516dbe8727c0"
+  integrity sha512-ChDuvbOypPuNjO8yIDf36x7BlZX1smcUMTTcyoIjycexOxd6DFsKsg21qVBzEmr3G7fUKIRy2/psii+CIUt7FA==
   dependencies:
     "@nodelib/fs.stat" "^2.0.2"
     "@nodelib/fs.walk" "^1.2.3"
@@ -2015,7 +1997,7 @@ fast-json-stable-stringify@^2.0.0:
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
   integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
 
-fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.6:
+fast-levenshtein@^2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
   integrity sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==
@@ -2988,14 +2970,6 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
-levn@~0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"
-  integrity sha512-0OO4y2iOHix2W6ujICbKIaEQXvFQHue65vUG3pb5EUomzPI90z9hsA1VsO/dbIIpC53J8gxM9Q4Oho0jrCM/yA==
-  dependencies:
-    prelude-ls "~1.1.2"
-    type-check "~0.3.2"
-
 lie@~3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/lie/-/lie-3.3.0.tgz#dcf82dee545f46074daf200c7c1c5a08e0f40f6a"
@@ -3440,11 +3414,11 @@ neo-async@^2.6.2:
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
 
 nightwatch-axe-verbose@^2.1.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/nightwatch-axe-verbose/-/nightwatch-axe-verbose-2.2.0.tgz#fb43e40173656314dd47439c05c0a8ad910a05bf"
-  integrity sha512-Dh2ctNE0aDCzE1H3T7PWINcx+Tz/bJUMKmwmyFLKeoo9Y0FYk/pKxs43Povyh+0RrXWx8bYyF1FZHSAQT+0jEw==
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/nightwatch-axe-verbose/-/nightwatch-axe-verbose-2.2.1.tgz#507f0940e384913111b1c8a25bf815130fef337f"
+  integrity sha512-Mp+L6dgmIbzkIBeWYJQ3dQ8TlA9FgjzCUanGe/hBJ9xqNgMDXIosQvZ+uWIfpZPGajR/z3uh8q5LtLX6I3a81g==
   dependencies:
-    axe-core "^4.6.3"
+    axe-core "^4.7.2"
 
 nightwatch@^2.3.9:
   version "2.6.21"
@@ -3624,29 +3598,17 @@ open@8.4.0:
     is-docker "^2.1.1"
     is-wsl "^2.2.0"
 
-optionator@^0.8.1:
-  version "0.8.3"
-  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.3.tgz#84fa1d036fe9d3c7e21d99884b601167ec8fb495"
-  integrity sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==
-  dependencies:
-    deep-is "~0.1.3"
-    fast-levenshtein "~2.0.6"
-    levn "~0.3.0"
-    prelude-ls "~1.1.2"
-    type-check "~0.3.2"
-    word-wrap "~1.2.3"
-
 optionator@^0.9.1:
-  version "0.9.1"
-  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.1.tgz#4f236a6373dae0566a6d43e1326674f50c291499"
-  integrity sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==
+  version "0.9.3"
+  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.3.tgz#007397d44ed1872fdc6ed31360190f81814e2c64"
+  integrity sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==
   dependencies:
+    "@aashutoshrathi/word-wrap" "^1.2.3"
     deep-is "^0.1.3"
     fast-levenshtein "^2.0.6"
     levn "^0.4.1"
     prelude-ls "^1.2.1"
     type-check "^0.4.0"
-    word-wrap "^1.2.3"
 
 ora@5.4.1:
   version "5.4.1"
@@ -4219,11 +4181,6 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
-prelude-ls@~1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
-  integrity sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==
-
 prepend-http@^1.0.0:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
@@ -5092,9 +5049,9 @@ terser-webpack-plugin@^5.3.3, terser-webpack-plugin@^5.3.7:
     terser "^5.16.8"
 
 terser@^5.14.2, terser@^5.16.8:
-  version "5.18.1"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-5.18.1.tgz#6d8642508ae9fb7b48768e48f16d675c89a78460"
-  integrity sha512-j1n0Ao919h/Ai5r43VAnfV/7azUYW43GPxK7qSATzrsERfW7+y2QW9Cp9ufnRF5CQUWbnLSo7UJokSWCqg4tsQ==
+  version "5.18.2"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.18.2.tgz#ff3072a0faf21ffd38f99acc9a0ddf7b5f07b948"
+  integrity sha512-Ah19JS86ypbJzTzvUCX7KOsEIhDaRONungA4aYBjEP3JZRf4ocuDzTg4QWZnPn9DEMiMYGJPiSOy7aykoCc70w==
   dependencies:
     "@jridgewell/source-map" "^0.3.3"
     acorn "^8.8.2"
@@ -5159,13 +5116,6 @@ type-check@^0.4.0, type-check@~0.4.0:
   dependencies:
     prelude-ls "^1.2.1"
 
-type-check@~0.3.2:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.3.2.tgz#5884cab512cf1d355e3fb784f30804b2b520db72"
-  integrity sha512-ZCmOJdvOWDBYJlzAoFkC+Q0+bUyEOS1ltgp1MGU03fqHG+dbi9tBFU2Rd9QKiDZFAYrhPh2JUf7rZRIuHRKtOg==
-  dependencies:
-    prelude-ls "~1.1.2"
-
 type-detect@4.0.8, type-detect@^4.0.0:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.8.tgz#7646fb5f18871cfbb7749e69bd39a6388eb7450c"
@@ -5399,9 +5349,9 @@ webpack-sources@^3.2.3:
   integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
 
 webpack@^5.77.0:
-  version "5.88.0"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.88.0.tgz#a07aa2f8e7a64a8f1cec0c6c2e180e3cb34440c8"
-  integrity sha512-O3jDhG5e44qIBSi/P6KpcCcH7HD+nYIHVBhdWFxcLOcIGN8zGo5nqF3BjyNCxIh4p1vFdNnreZv2h2KkoAw3lw==
+  version "5.88.1"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.88.1.tgz#21eba01e81bd5edff1968aea726e2fbfd557d3f8"
+  integrity sha512-FROX3TxQnC/ox4N+3xQoWZzvGXSuscxR32rbzjpXgEzWudJFEJBpdlkkob2ylrv5yzzufD1zph1OoFsLtm6stQ==
   dependencies:
     "@types/eslint-scope" "^3.7.3"
     "@types/estree" "^1.0.0"
@@ -5505,11 +5455,6 @@ wildcard@^2.0.0:
   resolved "https://registry.yarnpkg.com/wildcard/-/wildcard-2.0.1.tgz#5ab10d02487198954836b6349f74fff961e10f67"
   integrity sha512-CC1bOL87PIWSBhDcTrdeLo6eGT7mCFtrg0uIJtqJUFyK+eJnzl8A1niH56uu7KMa5XFrtiV+AQuHO3n7DsHnLQ==
 
-word-wrap@^1.2.3, word-wrap@~1.2.3:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
-  integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
-
 workerpool@6.2.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/workerpool/-/workerpool-6.2.0.tgz#827d93c9ba23ee2019c3ffaff5c27fccea289e8b"
-- 
GitLab