@festo-ui/web-essentials 7.0.0-dev.302 → 7.0.0-dev.310

package/scss/_scroll.scss

@@ -6,12 +6,12 @@
 // styles for js scrollbar (simplebar.js)
 /* stylelint-disable */
 .simplebar-scrollbar::before {
-  background-color: $control-dark;
+  background-color: $control-hover;
 }
 
 .simplebar-dragging {
   .simplebar-scrollbar::before {
-    background-color: $control-darker;
+    background-color: $control-active;
   }
 }
 

package/scss/_search-input.scss

@@ -30,10 +30,10 @@
     background: $control;
     border-radius: 50%;
     &:hover {
-      background: $control-dark;
+      background: $control-hover;
     }
     &:active {
-      background: $control-darker;
+      background: $control-active;
     }
   }
 

package/scss/_segment.scss

@@ -27,16 +27,16 @@
     text-align: center;
     cursor: pointer;
     border: 1px solid $gray-300;
-    color: $icon-gray;
+    color: $hero-gray;
     background-color: $white;
 
     &:hover {
-      color: $hero-darker;
-      border-color: $hero-darker;
-      border-right: 1px solid $hero-darker;
+      color: $hero-active;
+      border-color: $hero-active;
+      border-right: 1px solid $hero-active;
       + .fwe-segment-input {
         + .fwe-segment-label {
-          border-left: 1px solid $hero-darker;
+          border-left: 1px solid $hero-active;
         }
       }
     }
@@ -104,7 +104,7 @@
     .fwe-segment-input {
       &:checked {
         + .fwe-segment-label {
-          background-color: $icon-hero-light;
+          background-color: $sucaerul;
           color: $caerul;
           border-color: $caerul;
         }

package/scss/_snackbar.scss

@@ -1,6 +1,6 @@
 .fwe-snackbar {
   padding: $spacer-xs;
-  background-color: $snackbar-info-bg;
+  background-color: $hero-bg;
   border: 1px solid $hero;
   border-radius: $control-border-radius;
   margin: auto;
@@ -67,7 +67,7 @@
 
   &.fwe-snackbar-warning {
     border-color: $orange;
-    background-color: $snackbar-warning-bg;
+    background-color: $orange-bg;
     span::before {
       background-color: $orange;
       mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGcgZGF0YS1uYW1lPSJjb250ZW50Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTIyLjQgMTkuODYgMTMuMjczIDIuNzQzYTEuNDQxIDEuNDQxIDAgMCAwLTIuNTQ0IDBMMS42IDE5Ljg2YTEuNDQxIDEuNDQxIDAgMCAwIDEuMjcyIDIuMTJIMjEuMTNhMS40NDEgMS40NDEgMCAwIDAgMS4yNzItMi4xMlpNMTEgN2gydjhoLTJabTIuMDA1IDExLjk2NWgtMi4wMXYtMi4wMWgyLjAxWiIvPjwvZz48L3N2Zz4=");
@@ -85,7 +85,7 @@
 
   &.fwe-snackbar-error {
     border-color: $red;
-    background-color: $snackbar-error-bg;
+    background-color: $red-bg;
     span::before {
       background-color: $red;
       mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGcgZGF0YS1uYW1lPSJjb250ZW50Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTEyIDFhMTEgMTEgMCAxIDAgMTEgMTFBMTEgMTEgMCAwIDAgMTIgMVptNS43IDE1LjItMS41IDEuNS00LjItNC4zLTQuMiA0LjMtMS41LTEuNSA0LjMtNC4yLTQuMy00LjIgMS41LTEuNSA0LjIgNC4zIDQuMi00LjMgMS41IDEuNS00LjMgNC4yWiIvPjwvZz48L3N2Zz4=");
@@ -119,7 +119,7 @@
     .fwe-snackbar-close-btn {
       background-color: $text;
       &:hover {
-        background-color: $hero-dark;
+        background-color: $hero-hover;
       }
     }
     .fwe-snackbar-separator {
@@ -128,7 +128,7 @@
     .fwe-snackbar-link-btn {
       color: $hero;
       &:hover {
-        color: $hero-dark;
+        color: $hero-hover;
       }
     }
   }

package/scss/_stepper-horizontal.scss

@@ -88,8 +88,8 @@
       .fwe-step {
         cursor: pointer;
         &:hover {
-          background: $hero-darker;
-          border-color: $hero-darker;
+          background: $hero-active;
+          border-color: $hero-active;
         }
         .fwe-step-no {
           display: none;

package/scss/_stepper-vertical.scss

@@ -95,8 +95,8 @@ $vertical-step-height: 300px;
       .fwe-step {
         cursor: pointer;
         &:hover {
-          background: $hero-darker;
-          border-color: $hero-darker;
+          background: $hero-active;
+          border-color: $hero-active;
         }
         .fwe-step-no {
           display: none;

package/scss/_switch.scss

@@ -100,11 +100,11 @@ label.fwe-switch {
     cursor: pointer;
 
     &:hover ~ .fwe-switch-track {
-      background-color: $control-border-dark;
+      background-color: $control-border-hover;
     }
 
     &:active ~ .fwe-switch-track {
-      background-color: $control-border-darker;
+      background-color: $control-border-active;
     }
 
     &:checked ~ .fwe-switch-track {
@@ -115,11 +115,11 @@ label.fwe-switch {
     }
 
     &:hover:checked ~ .fwe-switch-track {
-      background-color: $hero-dark;
+      background-color: $hero-hover;
     }
 
     &:active:checked ~ .fwe-switch-track {
-      background-color: $hero-darker;
+      background-color: $hero-active;
     }
 
     &:disabled ~ .fwe-switch-track {

package/scss/_text-link.scss

@@ -21,7 +21,7 @@ a {
   }
 
   &:hover:not(.fwe-disabled) {
-    color: $hero-dark;
+    color: $hero-hover;
     text-decoration: none;
   }
 }

package/scss/_tree.scss

@@ -69,7 +69,7 @@
         > .fwe-tree-node {
           .fwe-tree-node-alert {
             .fwe-icon {
-              color: $btn-text-disabled !important;
+              color: $text-disabled !important;
             }
           }
         }
@@ -173,18 +173,18 @@
 .fwe-tree-node {
   &:hover {
     .fwe-tree-node-text {
-      color: $btn-hero-hover;
+      color: $hero-hover;
     }
 
     .fwe-btn--tree-node-select {
       .fwe-icon {
-        color: $btn-hero-hover;
+        color: $hero-hover;
       }
     }
 
     .fwe-btn--tree-node-toggle {
       .fwe-icon {
-        color: $btn-hero-hover;
+        color: $hero-hover;
       }
     }
   }
@@ -193,18 +193,18 @@
 .fwe-tree-node {
   &:active {
     .fwe-tree-node-text {
-      color: $btn-hero-active;
+      color: $hero-active;
     }
 
     .fwe-btn--tree-node-select {
       .fwe-icon {
-        color: $btn-hero-active;
+        color: $hero-active;
       }
     }
 
     .fwe-btn--tree-node-toggle {
       .fwe-icon {
-        color: $btn-hero-active;
+        color: $hero-active;
       }
     }
   }

package/scss/_variables.scss

@@ -10,37 +10,18 @@ $gray-200: var(--fwe-gray-200) !default;
 $gray-300: var(--fwe-gray-300) !default;
 $gray-400: var(--fwe-gray-400) !default;
 
-$icon-black: var(--fwe-icon-black) !default;
-$icon-white: var(--fwe-icon-white) !default;
-$icon-gray: var(--fwe-icon-gray) !default;
-$icon-hero: var(--fwe-icon-hero) !default;
-$icon-hero-light: var(--fwe-icon-hero-light) !default;
+$hero-gray: var(--fwe-hero-gray) !default;
 
 $green: var(--fwe-green) !default;
 $yellow: var(--fwe-yellow) !default;
 $orange: var(--fwe-orange) !default;
 $red: var(--fwe-red) !default;
-$green-dark: var(--fwe-green-dark) !default;
-$yellow-dark: var(--fwe-yellow-dark) !default;
-$orange-dark: var(--fwe-orange-dark) !default;
-$red-dark: var(--fwe-red-dark) !default;
-
-// button vars
-$btn: var(--fwe-btn) !default;
-$btn-hover: var(--fwe-btn-hover) !default;
-$btn-active: var(--fwe-btn-active) !default;
-$btn-disabled: var(--fwe-btn-disabled) !default;
-$btn-text: var(--fwe-btn-text) !default;
-$btn-text-hover: var(--fwe-btn-text-hover) !default;
-$btn-text-disabled: var(--fwe-btn-text-disabled) !default;
-
-$btn-hero: var(--fwe-btn-hero) !default;
-$btn-hero-hover: var(--fwe-btn-hero-hover) !default;
-$btn-hero-active: var(--fwe-btn-hero-active) !default;
-$btn-hero-disabled: var(--fwe-btn-hero-disabled) !default;
-$btn-hero-text: var(--fwe-btn-hero-text) !default;
-$btn-hero-text-hover: var(--fwe-btn-hero-text-hover) !default;
-$btn-hero-text-disabled: var(--fwe-btn-hero-text-disabled) !default;
+$green-hover: var(--fwe-green-hover) !default;
+$yellow-hover: var(--fwe-yellow-hover) !default;
+$orange-hover: var(--fwe-orange-hover) !default;
+$red-hover: var(--fwe-red-hover) !default;
+$orange-active: var(--fwe-orange-active) !default;
+$red-active: var(--fwe-red-active) !default;
 
 // control colors
 $text: var(--fwe-text) !default;
@@ -48,19 +29,19 @@ $text-light: var(--fwe-text-light) !default;
 $text-disabled: var(--fwe-text-disabled) !default;
 
 $hero: var(--fwe-hero) !default;
-$hero-dark: var(--fwe-hero-dark) !default;
-$hero-darker: var(--fwe-hero-darker) !default;
+$hero-hover: var(--fwe-hero-hover) !default;
+$hero-active: var(--fwe-hero-active) !default;
 
 $control: var(--fwe-control) !default;
-$control-dark: var(--fwe-control-dark) !default;
-$control-darker: var(--fwe-control-darker) !default;
+$control-hover: var(--fwe-control-hover) !default;
+$control-active: var(--fwe-control-active) !default;
 $control-disabled: var(--fwe-control-disabled) !default;
 $control-box-shadow: 0px 1px 8px rgba(black, 0.3) !default;
 $control-scrollbar: var(--fwe-control-scrollbar) !default;
 
 $control-border: var(--fwe-control-border) !default;
-$control-border-dark: var(--fwe-control-border-dark) !default;
-$control-border-darker: var(--fwe-control-border-darker) !default;
+$control-border-hover: var(--fwe-control-border-hover) !default;
+$control-border-active: var(--fwe-control-border-active) !default;
 
 $background: var(--fwe-background) !default;
 $background-modal: rgba(black, 0.7) !default;
@@ -68,9 +49,9 @@ $background-modal: rgba(black, 0.7) !default;
 $border: var(--fwe-border) !default;
 $border-disabled: var(--fwe-border-disabled) !default;
 
-$snackbar-info-bg: var(--fwe-snackbar-info-bg) !default;
-$snackbar-warning-bg: var(--fwe-snackbar-warning-bg) !default;
-$snackbar-error-bg: var(--fwe-snackbar-error-bg) !default;
+$hero-bg: var(--fwe-hero-bg) !default;
+$orange-bg: var(--fwe-orange-bg) !default;
+$red-bg: var(--fwe-red-bg) !default;
 
 // color map
 $colors: () !default;
@@ -86,32 +67,30 @@ $colors: map-merge(
     "gray-200": $gray-200,
     "gray-300": $gray-300,
     "gray-400": $gray-400,
-    "icon-black": $icon-black,
-    "icon-white": $icon-white,
-    "icon-gray": $icon-gray,
-    "icon-hero": $icon-hero,
-    "icon-hero-light": $icon-hero-light,
+    "hero-gray": $hero-gray,
     "green": $green,
     "yellow": $yellow,
     "orange": $orange,
     "red": $red,
-    "green-dark": $green-dark,
-    "yellow-dark": $yellow-dark,
-    "orange-dark": $orange-dark,
-    "red-dark": $red-dark,
+    "green-hover": $green-hover,
+    "yellow-hover": $yellow-hover,
+    "orange-hover": $orange-hover,
+    "red-hover": $red-hover,
+    "orange-active": $orange-active,
+    "red-active": $red-active,
     "text": $text,
     "text-light": $text-light,
     "text-disabled": $text-disabled,
     "hero": $hero,
-    "hero-dark": $hero-dark,
-    "hero-darker": $hero-darker,
+    "hero-hover": $hero-hover,
+    "hero-active": $hero-active,
     "control": $control,
-    "control-dark": $control-dark,
-    "control-darker": $control-darker,
+    "control-hover": $control-hover,
+    "control-active": $control-active,
     "control-disabled": $control-disabled,
     "control-border": $control,
-    "control-border-dark": $control-dark,
-    "control-border-darker": $control-darker,
+    "control-border-hover": $control-hover,
+    "control-border-active": $control-active,
     "control-border-disabled": $control-disabled,
     "background": $background,
     "background-modal": $background-modal,
@@ -130,11 +109,11 @@ $badge-colors: map-merge(
     "orange": $orange,
     "red": $red,
     "hero": $hero,
-    "hero-dark": $hero-dark,
-    "hero-darker": $hero-darker,
+    "hero-hover": $hero-hover,
+    "hero-active": $hero-active,
     "control": $control,
-    "control-dark": $control-dark,
-    "control-darker": $control-darker
+    "control-hover": $control-hover,
+    "control-active": $control-active
   ),
   $badge-colors
 );

package/scss/organisms/_footer.scss

@@ -4,7 +4,7 @@ footer.fwe-footer {
     flex-direction: row;
     justify-content: center;
     padding: 24px 0px;
-    border-bottom: 1px solid $control-border-darker;
+    border-bottom: 1px solid $control-border-active;
     margin-bottom: 24px;
 
     .fwe-social-media-link {
@@ -27,7 +27,7 @@ footer.fwe-footer {
   }
   .fwe-footer-details {
     padding-bottom: 24px;
-    border-bottom: 1px solid $control-border-darker;
+    border-bottom: 1px solid $control-border-active;
 
     h4 {
       font-size: 16px;
@@ -66,7 +66,7 @@ footer.fwe-footer {
         padding-bottom: 8px;
 
         a {
-          color: $control-border-darker;
+          color: $control-border-active;
           padding-right: 8px;
 
           &:last-child {
@@ -79,7 +79,7 @@ footer.fwe-footer {
         padding-bottom: 24px;
 
         a {
-          color: $control-border-darker;
+          color: $control-border-active;
           padding-right: 8px;
 
           &:last-child {
@@ -93,7 +93,7 @@ footer.fwe-footer {
       order: 1;
       justify-content: center;
       padding-bottom: 24px;
-      color: $control-border-darker;
+      color: $control-border-active;
     }
   }
 }

package/scss/themes/flatpickr/festo.scss

@@ -499,7 +499,7 @@ span.flatpickr-weekday {
 .flatpickr-day:hover {
   cursor: pointer;
   outline: 0;
-  color: $hero-dark;
+  color: $hero-hover;
 }
 
 .flatpickr-day.today {
@@ -508,7 +508,7 @@ span.flatpickr-weekday {
   text-decoration: underline;
 
   &:hover {
-    color: $hero-dark;
+    color: $hero-hover;
   }
 }