@festo-ui/web-essentials 7.0.0-dev.304 → 7.0.0-dev.314

package/dist/css/festo-web-essentials.css

@@ -1,5 +1,5 @@
 /*!
- * Festo UI - Web Essentials v7.0.0-dev.304 (https://storybook.festo.design/)
+ * Festo UI - Web Essentials v7.0.0-dev.314 (https://storybook.festo.design/)
  * Copyright 2022 Festo SE & Co. KG
  * Licensed under Apache-2.0
  */
@@ -2193,44 +2193,12 @@ button.fwe-btn.fwe-btn-lg i[class*=" fwe-icon-"]:before, .fwe-chip.fwe-chip-lg i
   background-color: var(--fwe-gray-400) !important;
 }
 
-.fwe-color-icon-black {
-  color: var(--fwe-icon-black) !important;
+.fwe-color-hero-gray {
+  color: var(--fwe-hero-gray) !important;
 }
 
-.fwe-bg-icon-black {
-  background-color: var(--fwe-icon-black) !important;
-}
-
-.fwe-color-icon-white {
-  color: var(--fwe-icon-white) !important;
-}
-
-.fwe-bg-icon-white {
-  background-color: var(--fwe-icon-white) !important;
-}
-
-.fwe-color-icon-gray {
-  color: var(--fwe-icon-gray) !important;
-}
-
-.fwe-bg-icon-gray {
-  background-color: var(--fwe-icon-gray) !important;
-}
-
-.fwe-color-icon-hero {
-  color: var(--fwe-icon-hero) !important;
-}
-
-.fwe-bg-icon-hero {
-  background-color: var(--fwe-icon-hero) !important;
-}
-
-.fwe-color-icon-hero-light {
-  color: var(--fwe-icon-hero-light) !important;
-}
-
-.fwe-bg-icon-hero-light {
-  background-color: var(--fwe-icon-hero-light) !important;
+.fwe-bg-hero-gray {
+  background-color: var(--fwe-hero-gray) !important;
 }
 
 .fwe-color-green {
@@ -2265,36 +2233,52 @@ button.fwe-btn.fwe-btn-lg i[class*=" fwe-icon-"]:before, .fwe-chip.fwe-chip-lg i
   background-color: var(--fwe-red) !important;
 }
 
-.fwe-color-green-dark {
-  color: var(--fwe-green-dark) !important;
+.fwe-color-green-hover {
+  color: var(--fwe-green-hover) !important;
+}
+
+.fwe-bg-green-hover {
+  background-color: var(--fwe-green-hover) !important;
+}
+
+.fwe-color-yellow-hover {
+  color: var(--fwe-yellow-hover) !important;
+}
+
+.fwe-bg-yellow-hover {
+  background-color: var(--fwe-yellow-hover) !important;
+}
+
+.fwe-color-orange-hover {
+  color: var(--fwe-orange-hover) !important;
 }
 
-.fwe-bg-green-dark {
-  background-color: var(--fwe-green-dark) !important;
+.fwe-bg-orange-hover {
+  background-color: var(--fwe-orange-hover) !important;
 }
 
-.fwe-color-yellow-dark {
-  color: var(--fwe-yellow-dark) !important;
+.fwe-color-red-hover {
+  color: var(--fwe-red-hover) !important;
 }
 
-.fwe-bg-yellow-dark {
-  background-color: var(--fwe-yellow-dark) !important;
+.fwe-bg-red-hover {
+  background-color: var(--fwe-red-hover) !important;
 }
 
-.fwe-color-orange-dark {
-  color: var(--fwe-orange-dark) !important;
+.fwe-color-orange-active {
+  color: var(--fwe-orange-active) !important;
 }
 
-.fwe-bg-orange-dark {
-  background-color: var(--fwe-orange-dark) !important;
+.fwe-bg-orange-active {
+  background-color: var(--fwe-orange-active) !important;
 }
 
-.fwe-color-red-dark {
-  color: var(--fwe-red-dark) !important;
+.fwe-color-red-active {
+  color: var(--fwe-red-active) !important;
 }
 
-.fwe-bg-red-dark {
-  background-color: var(--fwe-red-dark) !important;
+.fwe-bg-red-active {
+  background-color: var(--fwe-red-active) !important;
 }
 
 .fwe-color-text {
@@ -2329,20 +2313,20 @@ button.fwe-btn.fwe-btn-lg i[class*=" fwe-icon-"]:before, .fwe-chip.fwe-chip-lg i
   background-color: var(--fwe-hero) !important;
 }
 
-.fwe-color-hero-dark {
-  color: var(--fwe-hero-dark) !important;
+.fwe-color-hero-hover {
+  color: var(--fwe-hero-hover) !important;
 }
 
-.fwe-bg-hero-dark {
-  background-color: var(--fwe-hero-dark) !important;
+.fwe-bg-hero-hover {
+  background-color: var(--fwe-hero-hover) !important;
 }
 
-.fwe-color-hero-darker {
-  color: var(--fwe-hero-darker) !important;
+.fwe-color-hero-active {
+  color: var(--fwe-hero-active) !important;
 }
 
-.fwe-bg-hero-darker {
-  background-color: var(--fwe-hero-darker) !important;
+.fwe-bg-hero-active {
+  background-color: var(--fwe-hero-active) !important;
 }
 
 .fwe-color-control {
@@ -2353,20 +2337,20 @@ button.fwe-btn.fwe-btn-lg i[class*=" fwe-icon-"]:before, .fwe-chip.fwe-chip-lg i
   background-color: var(--fwe-control) !important;
 }
 
-.fwe-color-control-dark {
-  color: var(--fwe-control-dark) !important;
+.fwe-color-control-hover {
+  color: var(--fwe-control-hover) !important;
 }
 
-.fwe-bg-control-dark {
-  background-color: var(--fwe-control-dark) !important;
+.fwe-bg-control-hover {
+  background-color: var(--fwe-control-hover) !important;
 }
 
-.fwe-color-control-darker {
-  color: var(--fwe-control-darker) !important;
+.fwe-color-control-active {
+  color: var(--fwe-control-active) !important;
 }
 
-.fwe-bg-control-darker {
-  background-color: var(--fwe-control-darker) !important;
+.fwe-bg-control-active {
+  background-color: var(--fwe-control-active) !important;
 }
 
 .fwe-color-control-disabled {
@@ -2385,20 +2369,20 @@ button.fwe-btn.fwe-btn-lg i[class*=" fwe-icon-"]:before, .fwe-chip.fwe-chip-lg i
   background-color: var(--fwe-control) !important;
 }
 
-.fwe-color-control-border-dark {
-  color: var(--fwe-control-dark) !important;
+.fwe-color-control-border-hover {
+  color: var(--fwe-control-hover) !important;
 }
 
-.fwe-bg-control-border-dark {
-  background-color: var(--fwe-control-dark) !important;
+.fwe-bg-control-border-hover {
+  background-color: var(--fwe-control-hover) !important;
 }
 
-.fwe-color-control-border-darker {
-  color: var(--fwe-control-darker) !important;
+.fwe-color-control-border-active {
+  color: var(--fwe-control-active) !important;
 }
 
-.fwe-bg-control-border-darker {
-  background-color: var(--fwe-control-darker) !important;
+.fwe-bg-control-border-active {
+  background-color: var(--fwe-control-active) !important;
 }
 
 .fwe-color-control-border-disabled {
@@ -2493,7 +2477,7 @@ h6,
 :root {
   --fwe-black: #000000;
   --fwe-white: #ffffff;
-  --fwe-white-dark: #ededed;
+  --fwe-white-hover: #ededed;
   --fwe-caerul: #0091dc;
   --fwe-sucaerul: #dcebf6;
   --fwe-sucanul: #f2f3f5;
@@ -2501,53 +2485,37 @@ h6,
   --fwe-gray-200: #e5e8eb;
   --fwe-gray-300: #d8dce1;
   --fwe-gray-400: #b6bec6;
-  --fwe-icon-black: #333333;
-  --fwe-icon-white: #ffffff;
-  --fwe-icon-gray: #a3b2bc;
-  --fwe-icon-hero: #0091dc;
-  --fwe-icon-hero-light: #c8e6fa;
-  --fwe-green: #80ca3d;
-  --fwe-yellow: #ffd600;
-  --fwe-orange: #ff9600;
-  --fwe-red: #d50000;
-  --fwe-green-dark: #73b637;
-  --fwe-yellow-dark: #e6c100;
-  --fwe-orange-dark: #e68700;
-  --fwe-red-dark: #c00000;
-  --fwe-btn: #d8dce1;
-  --fwe-btn-hover: #c7cbcf;
-  --fwe-btn-active: #b7babe;
-  --fwe-btn-disabled: #e6e9ec;
-  --fwe-btn-text: #333333;
-  --fwe-btn-text-hover: #333333;
-  --fwe-btn-text-disabled: #b9babb;
-  --fwe-btn-hero: #0091dc;
-  --fwe-btn-hero-hover: #0587cb;
-  --fwe-btn-hero-active: #0a7eba;
-  --fwe-btn-hero-disabled: #e6e9ec;
-  --fwe-btn-hero-text: #ffffff;
-  --fwe-btn-hero-text-hover: #ffffff;
-  --fwe-btn-hero-text-disabled: #b9babb;
   --fwe-text: #333333;
   --fwe-text-light: #b6bec6;
   --fwe-text-disabled: #b9babb;
   --fwe-hero: #0091dc;
-  --fwe-hero-dark: #0587cb;
-  --fwe-hero-darker: #0a7eba;
+  --fwe-hero-hover: #0587cb;
+  --fwe-hero-active: #0a7eba;
+  --fwe-hero-gray: #a3b2bc;
+  --fwe-hero-bg: #c8e6fa;
+  --fwe-green: #80ca3d;
+  --fwe-yellow: #ffd600;
+  --fwe-orange: #ff9600;
+  --fwe-red: #d50000;
+  --fwe-green-hover: #73b637;
+  --fwe-yellow-hover: #e6c100;
+  --fwe-orange-hover: #e68700;
+  --fwe-red-hover: #c00000;
+  --fwe-orange-active: #d6820a;
+  --fwe-red-active: #b50a0a;
+  --fwe-orange-bg: #fbf0e1;
+  --fwe-red-bg: #f7e1e1;
   --fwe-control: #d8dce1;
-  --fwe-control-dark: #c7cbcf;
-  --fwe-control-darker: #b7babe;
+  --fwe-control-hover: #c7cbcf;
+  --fwe-control-active: #b7babe;
   --fwe-control-disabled: #e6e9ec;
   --fwe-control-border: #b6bec6;
-  --fwe-control-border-dark: #a9b0b7;
-  --fwe-control-border-darker: #9ca2a9;
+  --fwe-control-border-hover: #a9b0b7;
+  --fwe-control-border-active: #9ca2a9;
   --fwe-control-scrollbar: #d2d5d9;
-  --fwe-background: #f2f3f5;
   --fwe-border: #d8dce1;
   --fwe-border-disabled: #e6e9ec;
-  --fwe-snackbar-info-bg: #c8e6fa;
-  --fwe-snackbar-warning-bg: #fbf0e1;
-  --fwe-snackbar-error-bg: #f7e1e1;
+  --fwe-background: #f2f3f5;
   --fwe-breakpoint-unset: 0;
   --fwe-breakpoint-xxs: 375px;
   --fwe-breakpoint-xs: 600px;
@@ -14078,7 +14046,7 @@ ul.fwe-list-group {
   color: var(--fwe-text-disabled);
 }
 .fwe-list-group .fwe-list-group-item.fwe-disabled::before {
-  background-color: var(--fwe-control-dark);
+  background-color: var(--fwe-control-hover);
 }
 .fwe-list-group a.fwe-list-group-item {
   cursor: pointer;
@@ -14150,7 +14118,7 @@ ul.fwe-list-group {
   color: var(--fwe-text-disabled);
 }
 .fwe-list-group.fwe-list-group-horizontal .fwe-list-group-item.fwe-disabled::before {
-  background-color: var(--fwe-control-dark);
+  background-color: var(--fwe-control-hover);
 }
 .fwe-list-group.fwe-list-group-horizontal.fwe-bb .fwe-list-group-item::before {
   bottom: -1px;
@@ -14590,7 +14558,7 @@ header.fwe-fixed-header {
   color: var(--fwe-hero);
 }
 .fwe-breadcrumb a:not(:last-child):active {
-  color: var(--fwe-hero-darker);
+  color: var(--fwe-hero-active);
 }
 .fwe-breadcrumb a:last-child {
   color: var(--fwe-text);
@@ -14617,7 +14585,7 @@ a.fwe-disabled {
   cursor: default;
 }
 a:hover:not(.fwe-disabled) {
-  color: var(--fwe-hero-dark);
+  color: var(--fwe-hero-hover);
   text-decoration: none;
 }
 
@@ -14965,12 +14933,12 @@ label.fwe-input-text.fwe-input-text-icon textarea {
   margin-right: 8px;
 }
 .fwe-chip:hover {
-  background: var(--fwe-control-dark);
-  border: 1px solid var(--fwe-control-dark);
+  background: var(--fwe-control-hover);
+  border: 1px solid var(--fwe-control-hover);
 }
 .fwe-chip:active {
-  background: var(--fwe-control-darker);
-  border: 1px solid var(--fwe-control-darker);
+  background: var(--fwe-control-active);
+  border: 1px solid var(--fwe-control-active);
 }
 .fwe-chip.fwe-selected {
   cursor: default;
@@ -15127,10 +15095,10 @@ label.fwe-radio input[type=radio]:hover:not(:disabled) ~ .fwe-radio-checkmark::b
   background-color: var(--fwe-control);
 }
 label.fwe-radio input[type=radio]:hover:checked:not(:disabled) ~ .fwe-radio-checkmark::after {
-  border-color: var(--fwe-hero-dark);
+  border-color: var(--fwe-hero-hover);
 }
 label.fwe-radio input[type=radio]:active ~ .fwe-radio-checkmark::before {
-  border-color: var(--fwe-control-dark);
+  border-color: var(--fwe-control-hover);
   background-color: var(--fwe-white);
 }
 label.fwe-radio input[type=radio]:checked ~ .fwe-radio-checkmark::before {
@@ -15238,19 +15206,19 @@ label.fwe-checkbox input[type=checkbox]:hover ~ .fwe-checkbox-checkmark {
   background-color: var(--fwe-control);
 }
 label.fwe-checkbox input[type=checkbox]:active ~ .fwe-checkbox-checkmark {
-  background-color: var(--fwe-control-dark);
+  background-color: var(--fwe-control-hover);
 }
 label.fwe-checkbox input[type=checkbox]:checked ~ .fwe-checkbox-checkmark {
   background-color: var(--fwe-hero);
   border-color: var(--fwe-hero);
 }
 label.fwe-checkbox input[type=checkbox]:hover:checked:not(:disabled) ~ .fwe-checkbox-checkmark {
-  background-color: var(--fwe-hero-dark);
-  border-color: var(--fwe-hero-dark);
+  background-color: var(--fwe-hero-hover);
+  border-color: var(--fwe-hero-hover);
 }
 label.fwe-checkbox input[type=checkbox]:active:checked ~ .fwe-checkbox-checkmark {
-  background-color: var(--fwe-hero-darker);
-  border-color: var(--fwe-hero-darker);
+  background-color: var(--fwe-hero-active);
+  border-color: var(--fwe-hero-active);
 }
 label.fwe-checkbox input[type=checkbox]:checked ~ .fwe-checkbox-checkmark:before {
   display: block;
@@ -15348,10 +15316,10 @@ label.fwe-switch input[type=checkbox] {
   cursor: pointer;
 }
 label.fwe-switch input[type=checkbox]:hover ~ .fwe-switch-track {
-  background-color: var(--fwe-control-border-dark);
+  background-color: var(--fwe-control-border-hover);
 }
 label.fwe-switch input[type=checkbox]:active ~ .fwe-switch-track {
-  background-color: var(--fwe-control-border-darker);
+  background-color: var(--fwe-control-border-active);
 }
 label.fwe-switch input[type=checkbox]:checked ~ .fwe-switch-track {
   background-color: var(--fwe-caerul);
@@ -15360,10 +15328,10 @@ label.fwe-switch input[type=checkbox]:checked ~ .fwe-switch-track:after {
   left: 19px;
 }
 label.fwe-switch input[type=checkbox]:hover:checked ~ .fwe-switch-track {
-  background-color: var(--fwe-hero-dark);
+  background-color: var(--fwe-hero-hover);
 }
 label.fwe-switch input[type=checkbox]:active:checked ~ .fwe-switch-track {
-  background-color: var(--fwe-hero-darker);
+  background-color: var(--fwe-hero-active);
 }
 label.fwe-switch input[type=checkbox]:disabled ~ .fwe-switch-track {
   background-color: var(--fwe-control-disabled);
@@ -15393,8 +15361,8 @@ button.fwe-btn {
   font-size: var(--fwe-font-size-base);
   padding: 4px 16px;
   min-height: 32px;
-  color: var(--fwe-btn-text);
-  background: var(--fwe-btn);
+  color: var(--fwe-text);
+  background: var(--fwe-control);
   border-radius: 4px;
   cursor: pointer;
   border: none;
@@ -15409,12 +15377,12 @@ button.fwe-btn .fwe-svg-icon {
 }
 a.fwe-btn:hover,
 button.fwe-btn:hover {
-  color: var(--fwe-btn-text-hover);
-  background: var(--fwe-btn-hover);
+  color: var(--fwe-text);
+  background: var(--fwe-control-hover);
 }
 a.fwe-btn:active,
 button.fwe-btn:active {
-  background: var(--fwe-btn-active);
+  background: var(--fwe-control-active);
 }
 a.fwe-btn:focus,
 button.fwe-btn:focus {
@@ -15424,28 +15392,28 @@ a.fwe-btn:disabled, a.fwe-btn.fwe-disabled,
 button.fwe-btn:disabled,
 button.fwe-btn.fwe-disabled {
   cursor: default;
-  background: var(--fwe-btn-disabled);
-  color: var(--fwe-btn-text-disabled);
+  background: var(--fwe-control-disabled);
+  color: var(--fwe-text-disabled);
 }
 a.fwe-btn.fwe-btn-hero,
 button.fwe-btn.fwe-btn-hero {
-  color: var(--fwe-btn-hero-text);
-  background: var(--fwe-btn-hero);
+  color: var(--fwe-white);
+  background: var(--fwe-hero);
 }
 a.fwe-btn.fwe-btn-hero:hover,
 button.fwe-btn.fwe-btn-hero:hover {
-  color: var(--fwe-btn-hero-text-hover);
-  background: var(--fwe-btn-hero-hover);
+  color: var(--fwe-white);
+  background: var(--fwe-hero-hover);
 }
 a.fwe-btn.fwe-btn-hero:active,
 button.fwe-btn.fwe-btn-hero:active {
-  background: var(--fwe-btn-hero-active);
+  background: var(--fwe-hero-active);
 }
 a.fwe-btn.fwe-btn-hero:disabled, a.fwe-btn.fwe-btn-hero.fwe-disabled,
 button.fwe-btn.fwe-btn-hero:disabled,
 button.fwe-btn.fwe-btn-hero.fwe-disabled {
-  background: var(--fwe-btn-hero-disabled);
-  color: var(--fwe-btn-hero-text-disabled);
+  background: var(--fwe-control-disabled);
+  color: var(--fwe-text-disabled);
 }
 a.fwe-btn.fwe-btn-block,
 button.fwe-btn.fwe-btn-block {
@@ -15472,17 +15440,17 @@ button.fwe-btn.fwe-btn-link.fwe-dark {
 a.fwe-btn.fwe-btn-link:hover,
 button.fwe-btn.fwe-btn-link:hover {
   background: none;
-  color: var(--fwe-hero-dark);
+  color: var(--fwe-hero-hover);
 }
 a.fwe-btn.fwe-btn-link:active,
 button.fwe-btn.fwe-btn-link:active {
   background: none;
-  color: var(--fwe-hero-dark);
+  color: var(--fwe-hero-hover);
 }
 a.fwe-btn.fwe-btn-link:disabled, a.fwe-btn.fwe-btn-link.fwe-disabled,
 button.fwe-btn.fwe-btn-link:disabled,
 button.fwe-btn.fwe-btn-link.fwe-disabled {
-  color: var(--fwe-btn-text-disabled);
+  color: var(--fwe-text-disabled);
 }
 a.fwe-btn.fwe-btn-lg,
 button.fwe-btn.fwe-btn-lg {
@@ -15989,24 +15957,24 @@ input[type=range].fwe-slider-input:disabled::-ms-thumb {
   background-color: var(--fwe-hero) !important;
 }
 
-.fwe-badge-hero-dark {
-  background-color: var(--fwe-hero-dark) !important;
+.fwe-badge-hero-hover {
+  background-color: var(--fwe-hero-hover) !important;
 }
 
-.fwe-badge-hero-darker {
-  background-color: var(--fwe-hero-darker) !important;
+.fwe-badge-hero-active {
+  background-color: var(--fwe-hero-active) !important;
 }
 
 .fwe-badge-control {
   background-color: var(--fwe-control) !important;
 }
 
-.fwe-badge-control-dark {
-  background-color: var(--fwe-control-dark) !important;
+.fwe-badge-control-hover {
+  background-color: var(--fwe-control-hover) !important;
 }
 
-.fwe-badge-control-darker {
-  background-color: var(--fwe-control-darker) !important;
+.fwe-badge-control-active {
+  background-color: var(--fwe-control-active) !important;
 }
 
 .fwe-card {
@@ -16184,7 +16152,7 @@ fieldset.fwe-progress-container label {
   background-color: var(--fwe-hero);
 }
 .fwe-pagination .fwe-navigate-btn:active::before, .fwe-pagination .fwe-navigate-btn-down:active::before, .fwe-pagination .fwe-navigate-btn-up:active::before {
-  background-color: var(--fwe-hero-dark);
+  background-color: var(--fwe-hero-hover);
 }
 .fwe-pagination .fwe-navigate-btn:focus, .fwe-pagination .fwe-navigate-btn-down:focus, .fwe-pagination .fwe-navigate-btn-up:focus {
   outline: 0;
@@ -16213,7 +16181,7 @@ fieldset.fwe-progress-container label {
   border-radius: 50%;
 }
 .fwe-pagination .fwe-page-dot:hover {
-  background: var(--fwe-control-border-dark);
+  background: var(--fwe-control-border-hover);
 }
 .fwe-pagination .fwe-page-dot.fwe-selected {
   background: var(--fwe-hero);
@@ -16247,7 +16215,7 @@ fieldset.fwe-progress-container label {
 
 .fwe-snackbar {
   padding: 12px;
-  background-color: var(--fwe-snackbar-info-bg);
+  background-color: var(--fwe-hero-bg);
   border: 1px solid var(--fwe-hero);
   border-radius: 4px;
   margin: auto;
@@ -16304,7 +16272,7 @@ fieldset.fwe-progress-container label {
 }
 .fwe-snackbar.fwe-snackbar-warning {
   border-color: var(--fwe-orange);
-  background-color: var(--fwe-snackbar-warning-bg);
+  background-color: var(--fwe-orange-bg);
 }
 .fwe-snackbar.fwe-snackbar-warning span::before {
   background-color: var(--fwe-orange);
@@ -16322,7 +16290,7 @@ fieldset.fwe-progress-container label {
 }
 .fwe-snackbar.fwe-snackbar-error {
   border-color: var(--fwe-red);
-  background-color: var(--fwe-snackbar-error-bg);
+  background-color: var(--fwe-red-bg);
 }
 .fwe-snackbar.fwe-snackbar-error span::before {
   background-color: var(--fwe-red);
@@ -16355,7 +16323,7 @@ fieldset.fwe-progress-container label {
   background-color: var(--fwe-text);
 }
 .fwe-snackbar.fwe-snackbar-b .fwe-snackbar-close-btn:hover {
-  background-color: var(--fwe-hero-dark);
+  background-color: var(--fwe-hero-hover);
 }
 .fwe-snackbar.fwe-snackbar-b .fwe-snackbar-separator {
   background-color: var(--fwe-text);
@@ -16364,7 +16332,7 @@ fieldset.fwe-progress-container label {
   color: var(--fwe-hero);
 }
 .fwe-snackbar.fwe-snackbar-b .fwe-snackbar-link-btn:hover {
-  color: var(--fwe-hero-dark);
+  color: var(--fwe-hero-hover);
 }
 .fwe-snackbar.fwe-snackbar-c {
   border: none;
@@ -16653,16 +16621,16 @@ fieldset.fwe-progress-container label {
   text-align: center;
   cursor: pointer;
   border: 1px solid var(--fwe-gray-300);
-  color: var(--fwe-icon-gray);
+  color: var(--fwe-hero-gray);
   background-color: var(--fwe-white);
 }
 .fwe-segment-label:hover {
-  color: var(--fwe-hero-darker);
-  border-color: var(--fwe-hero-darker);
-  border-right: 1px solid var(--fwe-hero-darker);
+  color: var(--fwe-hero-active);
+  border-color: var(--fwe-hero-active);
+  border-right: 1px solid var(--fwe-hero-active);
 }
 .fwe-segment-label:hover + .fwe-segment-input + .fwe-segment-label {
-  border-left: 1px solid var(--fwe-hero-darker);
+  border-left: 1px solid var(--fwe-hero-active);
 }
 .fwe-segment .fwe-segment-label:not(:last-child) {
   border-right: 0;
@@ -16717,7 +16685,7 @@ fieldset.fwe-progress-container label {
   border-radius: 0 4px 4px 0;
 }
 .fwe-segment.fwe-segment-outline .fwe-segment-input:checked + .fwe-segment-label {
-  background-color: var(--fwe-icon-hero-light);
+  background-color: var(--fwe-sucaerul);
   color: var(--fwe-caerul);
   border-color: var(--fwe-caerul);
 }
@@ -17149,17 +17117,17 @@ fieldset.fwe-progress-container label {
 }
 .fwe-notification-button:hover.fwe-warning {
   color: var(--fwe-white);
-  background: var(--fwe-orange-dark);
+  background: var(--fwe-orange-hover);
 }
 .fwe-notification-button:hover.fwe-warning::before {
-  background: var(--fwe-orange-dark);
+  background: var(--fwe-orange-hover);
 }
 .fwe-notification-button:hover.fwe-error {
   color: var(--fwe-white);
-  background: var(--fwe-red-dark);
+  background: var(--fwe-red-hover);
 }
 .fwe-notification-button:hover.fwe-error::before {
-  background: var(--fwe-red-dark);
+  background: var(--fwe-red-hover);
 }
 
 .fwe-notification-menu {
@@ -17270,11 +17238,11 @@ fieldset.fwe-progress-container label {
 
 /* stylelint-disable */
 .simplebar-scrollbar::before {
-  background-color: var(--fwe-control-dark);
+  background-color: var(--fwe-control-hover);
 }
 
 .simplebar-dragging .simplebar-scrollbar::before {
-  background-color: var(--fwe-control-darker);
+  background-color: var(--fwe-control-active);
 }
 
 .simplebar-scrollbar.simplebar-visible:before {
@@ -17314,10 +17282,10 @@ fieldset.fwe-progress-container label {
   background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0iY29udGVudCIgdmlld0JveD0iMCAwIDE2IDE2Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDE2djE2SDB6IiBkYXRhLW5hbWU9ImFiYjU1YWU4LWNhNTUtNDcwYy04N2MzLTRiMDY3MzhiNDM2MCIvPjxwYXRoIGZpbGw9IiMzMzMiIGQ9Ik0xMC4yNCA1LjA1IDggNy4zIDUuNzUgNS4wNWwtLjcuNzFMNy4yOSA4bC0yLjI0IDIuMjUuNy43TDggOC43MWwyLjI0IDIuMjQuNzEtLjdMOC43IDhsMi4yNS0yLjI0LS43MS0uNzF6IiBkYXRhLW5hbWU9ImI2NGIxZWQyLWI4MzEtNDM1Yy05Y2VlLWI5OTY0MjYwMjA5ZCIvPjwvc3ZnPg==");
 }
 .fwe-search-input .fwe-clear-icon:hover {
-  background: var(--fwe-control-dark);
+  background: var(--fwe-control-hover);
 }
 .fwe-search-input .fwe-clear-icon:active {
-  background: var(--fwe-control-darker);
+  background: var(--fwe-control-active);
 }
 .fwe-search-input input {
   border-left: none;
@@ -17475,8 +17443,8 @@ input[type=search]::-webkit-search-cancel-button {
   cursor: pointer;
 }
 .fwe-stepper-horizontal .fwe-step-container.fwe-step-done .fwe-step:hover {
-  background: var(--fwe-hero-darker);
-  border-color: var(--fwe-hero-darker);
+  background: var(--fwe-hero-active);
+  border-color: var(--fwe-hero-active);
 }
 .fwe-stepper-horizontal .fwe-step-container.fwe-step-done .fwe-step .fwe-step-no {
   display: none;
@@ -17586,8 +17554,8 @@ input[type=search]::-webkit-search-cancel-button {
   cursor: pointer;
 }
 .fwe-stepper-vertical .fwe-step-container.fwe-step-done .fwe-step:hover {
-  background: var(--fwe-hero-darker);
-  border-color: var(--fwe-hero-darker);
+  background: var(--fwe-hero-active);
+  border-color: var(--fwe-hero-active);
 }
 .fwe-stepper-vertical .fwe-step-container.fwe-step-done .fwe-step .fwe-step-no {
   display: none;
@@ -17625,7 +17593,7 @@ input[type=search]::-webkit-search-cancel-button {
   background: none;
   border: none;
   outline: none;
-  color: var(--fwe-icon-gray);
+  color: var(--fwe-hero-gray);
   position: relative;
 }
 .fwe-bottom-navigation .fwe-bottom-navigation-button .fwe-icon, .fwe-bottom-navigation .fwe-bottom-navigation-button .fwe-navbar .fwe-navbar-burger-menu, .fwe-navbar .fwe-bottom-navigation .fwe-bottom-navigation-button .fwe-navbar-burger-menu {
@@ -17649,7 +17617,7 @@ input[type=search]::-webkit-search-cancel-button {
   height: 4px;
 }
 .fwe-bottom-navigation .fwe-bottom-navigation-button:active {
-  color: var(--fwe-hero-darker);
+  color: var(--fwe-hero-active);
 }
 
 .fwe-accordion {
@@ -17815,7 +17783,7 @@ input[type=search]::-webkit-search-cancel-button {
   pointer-events: none;
 }
 .fwe-tree-node-container--disabled > .fwe-tree-node .fwe-tree-node-alert .fwe-icon, .fwe-tree-node-container--disabled > .fwe-tree-node .fwe-tree-node-alert .fwe-navbar .fwe-navbar-burger-menu, .fwe-navbar .fwe-tree-node-container--disabled > .fwe-tree-node .fwe-tree-node-alert .fwe-navbar-burger-menu {
-  color: var(--fwe-btn-text-disabled) !important;
+  color: var(--fwe-text-disabled) !important;
 }
 .fwe-tree-node-container[aria-level="1"] {
   padding-left: 0px;
@@ -17905,23 +17873,23 @@ input[type=search]::-webkit-search-cancel-button {
 }
 
 .fwe-tree-node:hover .fwe-tree-node-text {
-  color: var(--fwe-btn-hero-hover);
+  color: var(--fwe-hero-hover);
 }
 .fwe-tree-node:hover .fwe-btn--tree-node-select .fwe-icon, .fwe-tree-node:hover .fwe-btn--tree-node-select .fwe-navbar .fwe-navbar-burger-menu, .fwe-navbar .fwe-tree-node:hover .fwe-btn--tree-node-select .fwe-navbar-burger-menu {
-  color: var(--fwe-btn-hero-hover);
+  color: var(--fwe-hero-hover);
 }
 .fwe-tree-node:hover .fwe-btn--tree-node-toggle .fwe-icon, .fwe-tree-node:hover .fwe-btn--tree-node-toggle .fwe-navbar .fwe-navbar-burger-menu, .fwe-navbar .fwe-tree-node:hover .fwe-btn--tree-node-toggle .fwe-navbar-burger-menu {
-  color: var(--fwe-btn-hero-hover);
+  color: var(--fwe-hero-hover);
 }
 
 .fwe-tree-node:active .fwe-tree-node-text {
-  color: var(--fwe-btn-hero-active);
+  color: var(--fwe-hero-active);
 }
 .fwe-tree-node:active .fwe-btn--tree-node-select .fwe-icon, .fwe-tree-node:active .fwe-btn--tree-node-select .fwe-navbar .fwe-navbar-burger-menu, .fwe-navbar .fwe-tree-node:active .fwe-btn--tree-node-select .fwe-navbar-burger-menu {
-  color: var(--fwe-btn-hero-active);
+  color: var(--fwe-hero-active);
 }
 .fwe-tree-node:active .fwe-btn--tree-node-toggle .fwe-icon, .fwe-tree-node:active .fwe-btn--tree-node-toggle .fwe-navbar .fwe-navbar-burger-menu, .fwe-navbar .fwe-tree-node:active .fwe-btn--tree-node-toggle .fwe-navbar-burger-menu {
-  color: var(--fwe-btn-hero-active);
+  color: var(--fwe-hero-active);
 }
 
 .fwe-sidebar-overlay {