@festo-ui/web-essentials 7.3.0-dev.461 → 7.3.0-dev.464

package/dist/scss/_text-link.scss

@@ -1,5 +1,7 @@
+@use "variables";
+
 a {
-  color: $hero;
+  color: variables.$hero;
   text-decoration: none;
 
   i.fwe-icon {
@@ -7,21 +9,21 @@ a {
   }
 
   &.fwe-dark {
-    color: $text;
+    color: variables.$text;
   }
 
   &.fwe-active {
-    color: $hero;
+    color: variables.$hero;
   }
 
   &.fwe-disabled {
     pointer-events: none;
-    color: $text-light;
+    color: variables.$text-light;
     cursor: default;
   }
 
   &:hover:not(.fwe-disabled) {
-    color: $hero-hover;
+    color: variables.$hero-hover;
     text-decoration: none;
   }
 }

package/dist/scss/_timepicker.scss

@@ -1,12 +1,14 @@
+@use "variables";
+
 .fwe-timepicker {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: $white;
-  border-radius: $border-radius-s;
-  box-shadow: $control-box-shadow;
+  background: variables.$white;
+  border-radius: variables.$border-radius-s;
+  box-shadow: variables.$control-box-shadow;
   max-width: 276px;
-  padding: $spacer-m;
+  padding: variables.$spacer-m;
 
   &-spinners {
     display: flex;
@@ -26,12 +28,12 @@
         transform: translateY(-50%);
         left: 38px;
         padding-bottom: 4px;
-        font-weight: $font-weight-bold;
+        font-weight: variables.$font-weight-bold;
       }
 
       input[type="number"] {
-        font-weight: $font-weight-bold;
-        color: $hero;
+        font-weight: variables.$font-weight-bold;
+        color: variables.$hero;
         outline: 0;
         border: none;
         text-align: center;
@@ -59,7 +61,7 @@
   }
 
   &.fwe-timepicker-am-pm {
-    padding-left: $spacer-xl;
+    padding-left: variables.$spacer-xl;
 
     .fwe-timepicker-spinners {
       justify-content: flex-start;

package/dist/scss/_toolbar.scss

@@ -1,8 +1,10 @@
+@use "variables";
+
 .fwe-toolbar {
-  width: $toolbar-width;
+  width: variables.$toolbar-width;
   padding: 0;
-  background-color: $white;
-  border-right: 1px solid $border;
+  background-color: variables.$white;
+  border-right: 1px solid variables.$border;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -37,13 +39,13 @@
         left: 0;
         height: 100%;
         width: 4px;
-        background-color: $hero;
+        background-color: variables.$hero;
         transform: scaleX(0);
         transition: transform 0.3s;
       }
 
       &.fwe-active {
-        color: $hero !important;
+        color: variables.$hero !important;
 
         &::after {
           transform: scaleX(1);
@@ -69,7 +71,7 @@
         }
 
         &.fwe-active {
-          color: $hero !important;
+          color: variables.$hero !important;
 
           &::after {
             transform: scaleX(1);

package/dist/scss/_tree.scss

@@ -1,27 +1,30 @@
+@use "mixins";
+@use "variables";
+
 .fwe-tree {
-  @include custom-scrollbar;
   position: relative;
+  @include mixins.custom-scrollbar;
 
   &-node {
     position: relative;
     display: flex;
     flex-basis: 100%;
     min-width: 0;
-    height: $spacer * 2.5;
+    height: variables.$spacer * 2.5;
 
     &-indicator {
       position: absolute;
       left: 0;
       width: 100%;
-      height: $spacer * 2.5;
+      height: variables.$spacer * 2.5;
 
       &::before {
         position: absolute;
         content: "";
         width: 1px;
-        height: $spacer * 2.5;
+        height: variables.$spacer * 2.5;
         left: 0;
-        background-color: $caerul;
+        background-color: variables.$caerul;
         transform-origin: left top;
         transform: scaleX(0);
         transition: none;
@@ -36,7 +39,7 @@
 
       &--selected {
         > .fwe-tree-node-indicator {
-          background-color: $background;
+          background-color: variables.$background;
 
           &::before {
             transform: scaleX(4);
@@ -48,20 +51,20 @@
           .fwe-btn--tree-node-toggle {
             .fwe-icon,
             .fwe-svg-icon {
-              color: $caerul;
+              color: variables.$caerul;
             }
           }
 
           .fwe-btn--tree-node-select {
             .fwe-icon,
             .fwe-svg-icon {
-              color: $caerul;
+              color: variables.$caerul;
             }
           }
 
           .fwe-tree-node-text {
-            color: $caerul;
-            font-weight: $font-weight-bold;
+            color: variables.$caerul;
+            font-weight: variables.$font-weight-bold;
           }
         }
       }
@@ -72,7 +75,7 @@
           .fwe-tree-node-alert {
             .fwe-icon,
             .fwe-svg-icon {
-              color: $text-disabled !important;
+              color: variables.$text-disabled !important;
             }
           }
         }
@@ -81,7 +84,7 @@
       $levels: 10;
       @for $i from 1 through $levels {
         &[aria-level="#{$i}"] {
-          padding-left: $spacer * ($i - 1);
+          padding-left: variables.$spacer * ($i - 1);
         }
       }
 
@@ -99,7 +102,7 @@
       &[aria-expanded="true"] {
         > .fwe-tree-node {
           .fwe-tree-node-text {
-            font-weight: $font-weight-bold;
+            font-weight: variables.$font-weight-bold;
           }
 
           .fwe-icon-arrows-right-2 {
@@ -113,29 +116,69 @@
 
       &:not([aria-expanded]) {
         > .fwe-tree-node {
-          margin-left: $spacer * 2.5;
+          margin-left: variables.$spacer * 2.5;
         }
       }
     }
 
     &-text {
-      font-size: $font-size-md;
-      height: $spacer-l;
-      line-height: $spacer-l;
+      font-size: variables.$font-size-md;
+      height: variables.$spacer-l;
+      line-height: variables.$spacer-l;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
-      margin: 0 $spacer-s 0 $spacer-xxs;
+      margin: 0 variables.$spacer-s 0 variables.$spacer-xxs;
     }
 
     &-alert {
-      width: $spacer * 2.5;
-      max-width: $spacer * 2.5;
+      width: variables.$spacer * 2.5;
+      max-width: variables.$spacer * 2.5;
       flex-shrink: 0;
       display: flex;
       align-items: center;
       justify-content: center;
     }
+
+    &:hover {
+      .fwe-tree-node-text {
+        color: variables.$hero-hover;
+      }
+
+      .fwe-btn--tree-node-select {
+        .fwe-icon,
+        .fwe-svg-icon {
+          color: variables.$hero-hover;
+        }
+      }
+
+      .fwe-btn--tree-node-toggle {
+        .fwe-icon,
+        .fwe-svg-icon {
+          color: variables.$hero-hover;
+        }
+      }
+    }
+
+    &:active {
+      .fwe-tree-node-text {
+        color: variables.$hero-active;
+      }
+
+      .fwe-btn--tree-node-select {
+        .fwe-icon,
+        .fwe-svg-icon {
+          color: variables.$hero-active;
+        }
+      }
+
+      .fwe-btn--tree-node-toggle {
+        .fwe-icon,
+        .fwe-svg-icon {
+          color: variables.$hero-active;
+        }
+      }
+    }
   }
 
   &--nested {
@@ -146,7 +189,7 @@
       width: inherit;
 
       .fwe-tree-node-container {
-        margin-left: $spacer;
+        margin-left: variables.$spacer;
       }
     }
   }
@@ -154,13 +197,13 @@
 
 .fwe-btn.fwe-btn-link {
   &.fwe-btn--tree-node-toggle {
-    color: $text;
-    padding: 0 $spacer-xxs 0 $spacer-s;
+    color: variables.$text;
+    padding: 0 variables.$spacer-xxs 0 variables.$spacer-s;
     justify-content: flex-start;
   }
 
   &.fwe-btn--tree-node-select {
-    color: $text;
+    color: variables.$text;
     justify-content: flex-start;
     min-width: 0;
     flex-basis: 100%;
@@ -172,47 +215,3 @@
     padding-right: 0;
   }
 }
-
-.fwe-tree-node {
-  &:hover {
-    .fwe-tree-node-text {
-      color: $hero-hover;
-    }
-
-    .fwe-btn--tree-node-select {
-      .fwe-icon,
-      .fwe-svg-icon {
-        color: $hero-hover;
-      }
-    }
-
-    .fwe-btn--tree-node-toggle {
-      .fwe-icon,
-      .fwe-svg-icon {
-        color: $hero-hover;
-      }
-    }
-  }
-}
-
-.fwe-tree-node {
-  &:active {
-    .fwe-tree-node-text {
-      color: $hero-active;
-    }
-
-    .fwe-btn--tree-node-select {
-      .fwe-icon,
-      .fwe-svg-icon {
-        color: $hero-active;
-      }
-    }
-
-    .fwe-btn--tree-node-toggle {
-      .fwe-icon,
-      .fwe-svg-icon {
-        color: $hero-active;
-      }
-    }
-  }
-}

package/dist/scss/_type.scss

@@ -1,48 +1,50 @@
+@use "variables";
+
 h1,
 .fwe-h1 {
   font-size: 32px;
   line-height: 40px;
-  font-weight: $font-weight-bold;
+  font-weight: variables.$font-weight-bold;
 }
 
 h2,
 .fwe-h2 {
   font-size: 24px;
   line-height: 32px;
-  font-weight: $font-weight-bold;
+  font-weight: variables.$font-weight-bold;
 }
 
 h3,
 .fwe-h3 {
   font-size: 24px;
   line-height: 32px;
-  font-weight: $font-weight-normal;
+  font-weight: variables.$font-weight-normal;
 }
 
 h4,
 .fwe-h4 {
   font-size: 16px;
   line-height: 24px;
-  font-weight: $font-weight-bold;
+  font-weight: variables.$font-weight-bold;
 }
 
 h5,
 .fwe-h5 {
   font-size: 14px;
   line-height: 18px;
-  font-weight: $font-weight-normal;
+  font-weight: variables.$font-weight-normal;
 }
 
 h6,
 .fwe-h6 {
   font-size: 12px;
   line-height: 14px;
-  font-weight: $font-weight-normal;
+  font-weight: variables.$font-weight-normal;
 }
 
 .fwe-h-intro {
   font-size: 24px;
   line-height: 32px;
-  font-weight: $font-weight-normal;
-  color: $text-light;
+  font-weight: variables.$font-weight-normal;
+  color: variables.$text-light;
 }

package/dist/scss/_utils.scss

@@ -1,5 +1,6 @@
+@use "sass:map";
 @function breakpoint-min($name, $breakpoints) {
-  $min: map-get($breakpoints, $name);
+  $min: map.get($breakpoints, $name);
   @return if($min != 0, $min, null);
 }
 

package/dist/scss/_variables.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 $black: var(--fwe-black) !default;
 $white: var(--fwe-white) !default;
 $white-dark: var(--fwe-white-dark) !default;
@@ -55,7 +56,7 @@ $red-bg: var(--fwe-red-bg) !default;
 
 // color map
 $colors: () !default;
-$colors: map-merge(
+$colors: map.merge(
   (
     "black": $black,
     "white": $white,
@@ -101,7 +102,7 @@ $colors: map-merge(
 );
 
 $badge-colors: () !default;
-$badge-colors: map-merge(
+$badge-colors: map.merge(
   (
     "caerul": $caerul,
     "green": $green,

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

@@ -1,61 +1,61 @@
 /*!
- * Festo UI - Web Essentials v7.3.0-dev.461 (https://storybook.festo.design/)
+ * Festo UI - Web Essentials v7.3.0-dev.464 (https://storybook.festo.design/)
  * Copyright 2022 Festo SE & Co. KG
  * Licensed under Apache-2.0
  */
 
-@import "rfs";
-@import "variables";
-@import "mixins";
-@import "fonts";
-@import "icons";
-@import "colors";
+@use "rfs";
+@use "variables";
+@use "mixins";
+@use "fonts";
+@use "icons";
+@use "colors";
 
-@import "type";
-@import "root";
-@import "normalize";
-@import "utils";
+@use "type";
+@use "root";
+@use "normalize";
+@use "utils";
 
-@import "misc";
-@import "display";
-@import "spacing";
-@import "border";
-@import "flex";
+@use "misc";
+@use "display";
+@use "spacing";
+@use "border";
+@use "flex";
 
-@import "layout";
-@import "toolbar";
-@import "grid";
-@import "table";
-@import "list";
-@import "navbar";
-@import "mobile-flyout";
-@import "breadcrumb";
-@import "text-link";
-@import "text-input";
-@import "chips";
-@import "radio";
-@import "checkbox";
-@import "switch";
-@import "button";
-@import "slider";
-@import "loading-indicator";
-@import "select";
-@import "badge";
-@import "cards";
-@import "progressbar";
-@import "pagination";
-@import "snackbar";
-@import "modal";
-@import "segment";
-@import "popover";
-@import "timepicker";
-@import "navbar-menu";
-@import "scroll";
-@import "search-input";
-@import "stepper-horizontal";
-@import "stepper-vertical";
-@import "bottom-navigation";
-@import "accordion";
-@import "tree";
-@import "sidebar-overlay";
-@import "bottom-sheet";
+@use "layout";
+@use "toolbar";
+@use "grid";
+@use "table";
+@use "list";
+@use "navbar";
+@use "mobile-flyout";
+@use "breadcrumb";
+@use "text-link";
+@use "text-input";
+@use "chips";
+@use "radio";
+@use "checkbox";
+@use "switch";
+@use "button";
+@use "slider";
+@use "loading-indicator";
+@use "select";
+@use "badge";
+@use "cards";
+@use "progressbar";
+@use "pagination";
+@use "snackbar";
+@use "modal";
+@use "segment";
+@use "popover";
+@use "timepicker";
+@use "navbar-menu";
+@use "scroll";
+@use "search-input";
+@use "stepper-horizontal";
+@use "stepper-vertical";
+@use "bottom-navigation";
+@use "accordion";
+@use "tree";
+@use "sidebar-overlay";
+@use "bottom-sheet";

package/dist/scss/organisms/_footer.scss

@@ -1,17 +1,19 @@
+@use "../variables";
+
 footer.fwe-footer {
   .fwe-social-media {
     display: flex;
     flex-direction: row;
     justify-content: center;
     padding: 24px 0px;
-    border-bottom: 1px solid $control-border-active;
+    border-bottom: 1px solid variables.$control-border-active;
     margin-bottom: 24px;
 
     .fwe-social-media-link {
       display: block;
       width: 32px;
       height: 32px;
-      border-radius: $border-radius-s;
+      border-radius: variables.$border-radius-s;
       margin-right: 24px;
       opacity: 0.3;
       transition: opacity 0.3s;
@@ -27,12 +29,12 @@ footer.fwe-footer {
   }
   .fwe-footer-details {
     padding-bottom: 24px;
-    border-bottom: 1px solid $control-border-active;
+    border-bottom: 1px solid variables.$control-border-active;
 
     h4 {
       font-size: 16px;
       line-height: 24px;
-      font-weight: $font-weight-bold;
+      font-weight: variables.$font-weight-bold;
       list-style-type: none;
       position: relative;
       margin-top: 0px;
@@ -55,7 +57,7 @@ footer.fwe-footer {
     }
   }
   .fwe-bottomline {
-    font-size: $font-size-small;
+    font-size: variables.$font-size-small;
     padding-top: 24px;
     text-align: center;
 
@@ -66,7 +68,7 @@ footer.fwe-footer {
         padding-bottom: 8px;
 
         a {
-          color: $control-border-active;
+          color: variables.$control-border-active;
           padding-right: 8px;
 
           &:last-child {
@@ -79,7 +81,7 @@ footer.fwe-footer {
         padding-bottom: 24px;
 
         a {
-          color: $control-border-active;
+          color: variables.$control-border-active;
           padding-right: 8px;
 
           &:last-child {
@@ -93,12 +95,12 @@ footer.fwe-footer {
       order: 1;
       justify-content: center;
       padding-bottom: 24px;
-      color: $control-border-active;
+      color: variables.$control-border-active;
     }
   }
 }
 
-@media only screen and (min-width: $grid-breakpoint-lg) {
+@media only screen and (min-width: variables.$grid-breakpoint-lg) {
   footer.fwe-footer {
     .fwe-footer-details {
       border-bottom: none;
@@ -110,7 +112,7 @@ footer.fwe-footer {
       }
     }
     .fwe-bottomline {
-      font-size: $font-size-small;
+      font-size: variables.$font-size-small;
       padding-top: 24px;
       text-align: left;
       display: flex;
@@ -126,7 +128,7 @@ footer.fwe-footer {
   }
 }
 
-@media only screen and (min-width: $grid-breakpoint-xl) {
+@media only screen and (min-width: variables.$grid-breakpoint-xl) {
   footer.fwe-footer {
     .fwe-social-media {
       .fwe-social-media-link {