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

package/dist/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/dist/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/dist/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/dist/scss/_text-link.scss

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

package/dist/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/dist/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/dist/scss/festo-web-essentials.scss

@@ -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
  */

package/dist/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/dist/scss/themes/flatpickr/festo.scss

@@ -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
  */
@@ -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;
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@festo-ui/web-essentials",
-  "version": "7.0.0-dev.304",
+  "version": "7.0.0-dev.314",
   "description": "CSS framework and utils to build FESTO web applications",
   "keywords": [
     "css",

package/scss/_bottom-navigation.scss

@@ -18,7 +18,7 @@
     background: none;
     border: none;
     outline: none;
-    color: $icon-gray;
+    color: $hero-gray;
     position: relative;
     :after {
       content: "";
@@ -38,7 +38,7 @@
       }
     }
     &:active {
-      color: $hero-darker;
+      color: $hero-active;
     }
   }
 }

package/scss/_breadcrumb.scss

@@ -23,7 +23,7 @@
         color: $hero;
       }
       &:active {
-        color: $hero-darker;
+        color: $hero-active;
       }
       cursor: pointer;
     }

package/scss/_button.scss

@@ -10,8 +10,8 @@ button.fwe-btn {
   font-size: $font-size-base;
   padding: 4px 16px;
   min-height: 32px;
-  color: $btn-text;
-  background: $btn;
+  color: $text;
+  background: $control;
   border-radius: $control-border-radius;
   cursor: pointer;
   border: none;
@@ -23,12 +23,12 @@ button.fwe-btn {
   }
 
   &:hover {
-    color: $btn-text-hover;
-    background: $btn-hover;
+    color: $text;
+    background: $control-hover;
   }
 
   &:active {
-    background: $btn-active;
+    background: $control-active;
   }
 
   &:focus {
@@ -38,27 +38,27 @@ button.fwe-btn {
   &:disabled,
   &.fwe-disabled {
     cursor: default;
-    background: $btn-disabled;
-    color: $btn-text-disabled;
+    background: $control-disabled;
+    color: $text-disabled;
   }
 
   &.fwe-btn-hero {
-    color: $btn-hero-text;
-    background: $btn-hero;
+    color: $white;
+    background: $hero;
 
     &:hover {
-      color: $btn-hero-text-hover;
-      background: $btn-hero-hover;
+      color: $white;
+      background: $hero-hover;
     }
 
     &:active {
-      background: $btn-hero-active;
+      background: $hero-active;
     }
 
     &:disabled,
     &.fwe-disabled {
-      background: $btn-hero-disabled;
-      color: $btn-hero-text-disabled;
+      background: $control-disabled;
+      color: $text-disabled;
     }
   }
 
@@ -83,17 +83,17 @@ button.fwe-btn {
 
     &:hover {
       background: none;
-      color: $hero-dark;
+      color: $hero-hover;
     }
 
     &:active {
       background: none;
-      color: $hero-dark;
+      color: $hero-hover;
     }
 
     &:disabled,
     &.fwe-disabled {
-      color: $btn-text-disabled;
+      color: $text-disabled;
     }
   }
 

package/scss/_checkbox.scss

@@ -119,7 +119,7 @@ label.fwe-checkbox {
     }
 
     &:active ~ .fwe-checkbox-checkmark {
-      background-color: $control-dark;
+      background-color: $control-hover;
     }
 
     &:checked ~ .fwe-checkbox-checkmark {
@@ -128,13 +128,13 @@ label.fwe-checkbox {
     }
 
     &:hover:checked:not(:disabled) ~ .fwe-checkbox-checkmark {
-      background-color: $hero-dark;
-      border-color: $hero-dark;
+      background-color: $hero-hover;
+      border-color: $hero-hover;
     }
 
     &:active:checked ~ .fwe-checkbox-checkmark {
-      background-color: $hero-darker;
-      border-color: $hero-darker;
+      background-color: $hero-active;
+      border-color: $hero-active;
     }
 
     &:checked ~ .fwe-checkbox-checkmark:before {

package/scss/_chips.scss

@@ -64,12 +64,12 @@
     margin-right: 8px;
   }
   &:hover {
-    background: $control-dark;
-    border: 1px solid $control-dark;
+    background: $control-hover;
+    border: 1px solid $control-hover;
   }
   &:active {
-    background: $control-darker;
-    border: 1px solid $control-darker;
+    background: $control-active;
+    border: 1px solid $control-active;
   }
   &.fwe-selected {
     cursor: default;

package/scss/_list.scss

@@ -86,7 +86,7 @@ ul.fwe-list-group {
     &.fwe-disabled {
       color: $text-disabled;
       &::before {
-        background-color: $control-dark;
+        background-color: $control-hover;
       }
     }
   }
@@ -171,7 +171,7 @@ ul.fwe-list-group {
       &.fwe-disabled {
         color: $text-disabled;
         &::before {
-          background-color: $control-dark;
+          background-color: $control-hover;
         }
       }
     }

package/scss/_navbar-menu.scss

@@ -232,16 +232,16 @@
   &:hover {
     &.fwe-warning {
       color: $white;
-      background: $orange-dark;
+      background: $orange-hover;
       &::before {
-        background: $orange-dark;
+        background: $orange-hover;
       }
     }
     &.fwe-error {
       color: $white;
-      background: $red-dark;
+      background: $red-hover;
       &::before {
-        background: $red-dark;
+        background: $red-hover;
       }
     }
   }

package/scss/_pagination.scss

@@ -28,7 +28,7 @@
 
     &:active {
       &::before {
-        background-color: $hero-dark;
+        background-color: $hero-hover;
       }
     }
 
@@ -66,7 +66,7 @@
     background: $control-border;
     border-radius: 50%;
     &:hover {
-      background: $control-border-dark;
+      background: $control-border-hover;
     }
     &.fwe-selected {
       background: $hero;

package/scss/_radio.scss

@@ -138,11 +138,11 @@ label.fwe-radio {
     }
 
     &:hover:checked:not(:disabled) ~ .fwe-radio-checkmark::after {
-      border-color: $hero-dark;
+      border-color: $hero-hover;
     }
 
     &:active ~ .fwe-radio-checkmark::before {
-      border-color: $control-dark;
+      border-color: $control-hover;
       background-color: $white;
     }
 

package/scss/_root.scss

@@ -1,7 +1,7 @@
 :root {
   --fwe-black: #000000;
   --fwe-white: #ffffff;
-  --fwe-white-dark: #ededed;
+  --fwe-white-hover: #ededed;
   --fwe-caerul: #0091dc;
   --fwe-sucaerul: #dcebf6;
   --fwe-sucanul: #f2f3f5;
@@ -11,65 +11,42 @@
   --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;
-
-  // button vars
-  --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;
-
-  // control colors
   --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; // 90% * --fwe-gray-300 + 10% * #333333
-  --fwe-control-darker: #b7babe; // 80% * --fwe-gray-300 + 20% * #333333
+  --fwe-control-hover: #c7cbcf;
+  --fwe-control-active: #b7babe; // 80% * --fwe-gray-300 + 20% * #333333
   --fwe-control-disabled: #e6e9ec; // 64% * --fwe-gray-300 + 36% * #FFFFFF
-
-  --fwe-control-border: #b6bec6;
-  --fwe-control-border-dark: #a9b0b7; // 90% * --fwe-gray-400 + 10% * #333333
-  --fwe-control-border-darker: #9ca2a9; // 80% * --fwe-gray-400 + 20% * #333333
-  --fwe-control-scrollbar: #d2d5d9; // 80% * --fwe-control-dark + 20% * #FFFFFF
-
-  --fwe-background: #f2f3f5;
+  --fwe-control-border: #b6bec6; // OK
+  --fwe-control-border-hover: #a9b0b7; // 90% * --fwe-gray-400 + 10% * #333333
+  --fwe-control-border-active: #9ca2a9; // 80% * --fwe-gray-400 + 20% * #333333
+  --fwe-control-scrollbar: #d2d5d9; // 80% * --fwe-control-hover + 20% * #FFFFFF
 
   --fwe-border: #d8dce1;
   --fwe-border-disabled: #e6e9ec; // 64% * --fwe-gray-300 + 36% * #FFFFFF
 
-  --fwe-snackbar-info-bg: #c8e6fa;
-  --fwe-snackbar-warning-bg: #fbf0e1;
-  --fwe-snackbar-error-bg: #f7e1e1;
+  --fwe-background: #f2f3f5;
 
   @each $name, $size in $grid-breakpoints {
     --fwe-breakpoint-#{$name}: #{$size};