@festo-ui/web-essentials 11.0.1 → 11.1.0-dev.977

package/scss/_popover.scss

@@ -137,7 +137,7 @@
 @mixin popover-menu {
   font-size: variables.$font-size-base;
   line-height: 1.5rem;
-  padding: 16px;
+  padding: 18px 16px 10px 16px;
 
   button {
     all: unset;
@@ -176,12 +176,25 @@
     }
 
     &:hover {
-      background-color: #3333331a;
+      color: variables.$hero;
     }
 
     &:active {
       background-color: #33333333;
     }
+
+    &:disabled {
+      color: variables.$text-disabled;
+      cursor: default;
+
+      &:hover {
+        color: variables.$text-disabled;
+      }
+
+      &:active {
+        background-color: transparent;
+      }
+    }
   }
 }
 

package/scss/_root.scss

@@ -1,7 +1,7 @@
 @use "variables";
 
 :root {
-  --fwe-black: #000000;
+  --fwe-black: #333333;
   --fwe-white: #ffffff;
   --fwe-white-hover: #ededed;
   --fwe-caerul: #0091dc;
@@ -15,7 +15,7 @@
 
   --fwe-text: #333333;
   --fwe-text-light: #82868b;
-  --fwe-text-disabled: #b9babb;
+  --fwe-text-disabled: #a9b0b7;
 
   --fwe-hero: #0091dc;
   --fwe-hero-hover: #0588cb;
@@ -36,12 +36,12 @@
   --fwe-orange-bg: #fbf0e1;
   --fwe-red-bg: #f7e1e1;
 
-  --fwe-control: #d3d8dd;
+  --fwe-control: #dbdfe3;
   --fwe-control-hover: #c5cbd1;
   --fwe-control-active: #a9b0b7; // 80% * --fwe-gray-300 + 20% * #333333
   --fwe-control-disabled: #e2e5e8; // 64% * --fwe-gray-300 + 36% * #FFFFFF
   --fwe-control-border: #b6bec6; // OK
-  --fwe-control-border-hover: #a9b0b7; // 90% * --fwe-gray-400 + 10% * #333333
+  --fwe-control-border-hover: #c5cbd1;
   --fwe-control-border-active: #9ca2a9; // 80% * --fwe-gray-400 + 20% * #333333
   --fwe-control-scrollbar: #d2d5d9; // 80% * --fwe-control-hover + 20% * #FFFFFF
 

package/scss/_snackbar.scss

@@ -71,7 +71,7 @@
 
   &.fwe-snackbar-warning {
     border-color: variables.$orange;
-    background-color: variables.$orange-bg;
+    background-color: #ffeacc;
     span::before {
       background-color: variables.$orange;
       mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGcgZGF0YS1uYW1lPSJjb250ZW50Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTIyLjQgMTkuODYgMTMuMjczIDIuNzQzYTEuNDQxIDEuNDQxIDAgMCAwLTIuNTQ0IDBMMS42IDE5Ljg2YTEuNDQxIDEuNDQxIDAgMCAwIDEuMjcyIDIuMTJIMjEuMTNhMS40NDEgMS40NDEgMCAwIDAgMS4yNzItMi4xMlpNMTEgN2gydjhoLTJabTIuMDA1IDExLjk2NWgtMi4wMXYtMi4wMWgyLjAxWiIvPjwvZz48L3N2Zz4=");
@@ -83,7 +83,7 @@
 
   &.fwe-snackbar-error {
     border-color: variables.$red;
-    background-color: variables.$red-bg;
+    background-color: #f6cccc;
     span::before {
       background-color: variables.$red;
       mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGcgZGF0YS1uYW1lPSJjb250ZW50Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTEyIDFhMTEgMTEgMCAxIDAgMTEgMTFBMTEgMTEgMCAwIDAgMTIgMVptNS43IDE1LjItMS41IDEuNS00LjItNC4zLTQuMiA0LjMtMS41LTEuNSA0LjMtNC4yLTQuMy00LjIgMS41LTEuNSA0LjIgNC4zIDQuMi00LjMgMS41IDEuNS00LjMgNC4yWiIvPjwvZz48L3N2Zz4=");
@@ -100,7 +100,8 @@
     background: variables.$hero;
   }
 
-  &.fwe-snackbar-b {
+  &.fwe-snackbar-b, // deprecated
+  &.fwe-snackbar-light {
     border: none;
     background-color: variables.$white;
 
@@ -113,7 +114,8 @@
     }
   }
 
-  &.fwe-snackbar-c {
+  &.fwe-snackbar-c, // deprecated
+  &.fwe-snackbar-strong {
     border: none;
     color: variables.$white;
     background-color: variables.$hero;

package/scss/_tree.scss

@@ -207,7 +207,8 @@
   }
 }
 
-.fwe-btn.fwe-btn-link {
+.fwe-btn.fwe-btn-link, // override for deprecated class fwe-btn-link
+.fwe-btn.fwe-btn-tertiary {
   &.fwe-btn--tree-node-toggle {
     color: variables.$text;
     padding: 0 variables.$spacer-xxs 0 variables.$spacer-s;

package/scss/festo-web-essentials.scss

@@ -52,7 +52,7 @@
 @use "search-input";
 @use "stepper-horizontal";
 @use "stepper-vertical";
-@use "bottom-navigation";
+@use "mobile-tab-bar";
 @use "accordion";
 @use "tree";
 @use "sidebar-overlay";

package/scss/light/festo-web-essentials-light.scss

@@ -51,7 +51,7 @@
 @use "../search-input";
 @use "../stepper-horizontal";
 @use "../stepper-vertical";
-@use "../bottom-navigation";
+@use "../mobile-tab-bar";
 @use "../accordion";
 @use "../tree";
 @use "../sidebar-overlay";

package/scss/organisms/_header-slider.scss

@@ -35,7 +35,8 @@
       margin: 0;
     }
 
-    button.fwe-btn-hero {
+    button.fwe-btn-hero, // override for deprecated class fwe-btn-hero
+    button.fwe-btn-primary {
       margin-top: 24px;
       justify-content: center;
       margin-left: 18px;
@@ -97,7 +98,8 @@
         -webkit-line-clamp: 3;
       }
 
-      button.fwe-btn-hero {
+      button.fwe-btn-hero, // override for deprecated class fwe-btn-hero
+      button.fwe-btn-primary {
         justify-content: center;
         margin-top: 0;
         margin-left: 34px;

package/scss/organisms/_image-gallery.scss

@@ -12,8 +12,10 @@
   overflow-x: hidden;
   overflow-y: hidden;
 
-  .fwe-btn-link i.fwe-icon-arrows-scale-up.fwe-modal-image-gallery-scale,
-  .fwe-btn-link i.fwe-icon-arrows-scale-down.fwe-modal-image-gallery-scale {
+  .fwe-btn-tertiary i.fwe-icon-arrows-scale-up.fwe-modal-image-gallery-scale,
+  .fwe-btn-link i.fwe-icon-arrows-scale-up.fwe-modal-image-gallery-scale, // override for deprecated class fwe-btn-link
+  .fwe-btn-link i.fwe-icon-arrows-scale-down.fwe-modal-image-gallery-scale, // override for deprecated class fwe-btn-link
+  .fwe-btn-tertiary i.fwe-icon-arrows-scale-down.fwe-modal-image-gallery-scale {
     font-size: 24px;
     margin-right: 0px;
     padding-right: 0px;

package/scss/organisms/_side-menu.scss

@@ -33,6 +33,12 @@
         width: 4px;
       }
     }
+    &.fwe-disabled,
+    &[aria-disabled="true"] {
+      color: variables.$text-disabled;
+      cursor: unset;
+      pointer-events: none;
+    }
   }
 
   @media (max-width: 900px) {