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

package/dist/scss/organisms/_header-modul.scss

@@ -1,10 +1,12 @@
+@use "../variables";
+
 @use "sass:math";
 
 .fwe-header-modul-container {
   display: flex;
   flex-direction: column;
-  padding-top: $spacer-l;
-  padding-bottom: $spacer-l;
+  padding-top: variables.$spacer-l;
+  padding-bottom: variables.$spacer-l;
 
   .fwe-header-modul-content {
     order: 2;
@@ -22,9 +24,9 @@
     }
 
     p {
-      font-size: $font-size-xl;
+      font-size: variables.$font-size-xl;
       line-height: 32px;
-      color: $text-light;
+      color: variables.$text-light;
       margin: 0;
       padding-bottom: 34px;
     }
@@ -36,18 +38,18 @@
       content: "";
       width: 28px;
       height: 10px;
-      background-color: $gray-400;
+      background-color: variables.$gray-400;
     }
   }
 
   .fwe-header-modul-media {
     min-height: 111px;
-    background-color: $hero;
+    background-color: variables.$hero;
     order: 1;
   }
 }
 
-@media only screen and (min-width: $grid-breakpoint-xs) {
+@media only screen and (min-width: variables.$grid-breakpoint-xs) {
   .fwe-header-modul-container {
     .fwe-header-modul-media {
       min-height: 132px;
@@ -55,7 +57,7 @@
   }
 }
 
-@media only screen and (min-width: $grid-breakpoint-sm) {
+@media only screen and (min-width: variables.$grid-breakpoint-sm) {
   .fwe-header-modul-container {
     .fwe-header-modul-content {
       h1,
@@ -69,7 +71,7 @@
   }
 }
 
-@media only screen and (min-width: $grid-breakpoint-md) {
+@media only screen and (min-width: variables.$grid-breakpoint-md) {
   .fwe-header-modul-container {
     .fwe-header-modul-media {
       min-height: 352px;
@@ -77,14 +79,14 @@
   }
 }
 
-@media only screen and (min-width: $grid-breakpoint-lg) {
+@media only screen and (min-width: variables.$grid-breakpoint-lg) {
   .fwe-header-modul-container {
     flex-direction: row;
 
     .fwe-header-modul-content {
       order: 1;
       width: math.div(100%, 2.4);
-      margin-right: $spacer-m;
+      margin-right: variables.$spacer-m;
 
       h1,
       .fwe-h1 {
@@ -100,7 +102,7 @@
   }
 }
 
-@media only screen and (min-width: $grid-breakpoint-xl) {
+@media only screen and (min-width: variables.$grid-breakpoint-xl) {
   .fwe-header-modul-container {
     .fwe-header-modul-media {
       min-height: 400px;

package/dist/scss/organisms/_header-slider.scss

@@ -1,7 +1,9 @@
+@use "../variables";
+
 .fwe-header-slider-container {
   .fwe-header-slider-box {
     height: 142px;
-    background-color: $hero;
+    background-color: variables.$hero;
   }
 
   .fwe-header-slider {
@@ -15,8 +17,8 @@
   display: flex;
   flex-direction: column;
   padding: 24px 28px;
-  background-color: $white;
-  border-radius: $border-radius-s;
+  background-color: variables.$white;
+  border-radius: variables.$border-radius-s;
   box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2);
 
   .fwe-header-slider-content {
@@ -52,7 +54,7 @@
   }
 }
 
-@media only screen and (min-width: $grid-breakpoint-xs) {
+@media only screen and (min-width: variables.$grid-breakpoint-xs) {
   .fwe-header-slider-container {
     .fwe-header-slider-box {
       height: 166px;
@@ -60,7 +62,7 @@
   }
 }
 
-@media only screen and (min-width: $grid-breakpoint-sm) {
+@media only screen and (min-width: variables.$grid-breakpoint-sm) {
   .fwe-header-slider-container {
     .fwe-header-slider-box {
       height: 341px;
@@ -72,7 +74,7 @@
   }
 }
 
-@media only screen and (min-width: $grid-breakpoint-md) {
+@media only screen and (min-width: variables.$grid-breakpoint-md) {
   .fwe-header-slider-container {
     .fwe-header-slider-box {
       height: 455px;
@@ -126,7 +128,7 @@
   }
 }
 
-@media only screen and (min-width: $grid-breakpoint-xl) {
+@media only screen and (min-width: variables.$grid-breakpoint-xl) {
   .fwe-header-slider-container {
     .fwe-header-slider-box {
       height: 640px;
@@ -144,7 +146,7 @@
   }
 }
 
-@media only screen and (min-width: $grid-breakpoint-xxl) {
+@media only screen and (min-width: variables.$grid-breakpoint-xxl) {
   .fwe-header-slider-container {
     .fwe-header-slider {
       width: 1192px;

package/dist/scss/organisms/_image-gallery.scss

@@ -1,3 +1,5 @@
+@use "../variables";
+
 /* stylelint-disable selector-class-pattern -- Doing swiper overrides here */
 .fwe-modal-image-gallery {
   background: transparent;
@@ -29,10 +31,10 @@
       border: none;
       min-width: 32px;
       cursor: pointer;
-      background: $white;
+      background: variables.$white;
       mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgzMnYzMkgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PHBhdGggZmlsbD0iIzMzMyIgZD0iTTIxLjQ4IDkuMSAxNiAxNC41OSAxMC41MSA5LjEgOS4xIDEwLjUyIDE0LjU4IDE2IDkuMSAyMS40OWwxLjQxIDEuNDFMMTYgMTcuNDJsNS40OCA1LjQ4IDEuNDItMS40MUwxNy40MSAxNmw1LjQ5LTUuNDgtMS40Mi0xLjQyeiIgZGF0YS1uYW1lPSJjb250ZW50Ii8+PC9zdmc+");
       &:hover {
-        background: $hero;
+        background: variables.$hero;
       }
     }
 
@@ -43,10 +45,10 @@
       border: none;
       min-width: 24px;
       cursor: pointer;
-      background: $white;
+      background: variables.$white;
       mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgzMnYzMkgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PGcgZGF0YS1uYW1lPSJjb250ZW50Ij48cGF0aCBkPSJtMTguMTAxIDQgMi44MjggMi44MjgtNC4yNDMgNC4yNDMgNC4yNDMgNC4yNDMgNC4yNDMtNC4yNDNMMjggMTMuODk5VjRoLTkuODk5ek0xMS4wNzEgMTYuNjg2bC00LjI0MyA0LjI0M0w0IDE4LjEwMVYyOGg5LjlsLTIuODI5LTIuODI4IDQuMjQzLTQuMjQzLTQuMjQzLTQuMjQzeiIvPjwvZz48L3N2Zz4=");
       &:hover {
-        background: $hero;
+        background: variables.$hero;
       }
     }
   }
@@ -63,7 +65,7 @@
     border-bottom: none;
 
     .fwe-image-gallery-header {
-      margin-top: $spacer-m - 6px;
+      margin-top: variables.$spacer-m - 6px;
     }
   }
 }
@@ -75,21 +77,21 @@
 }
 
 .fwe-image-gallery-content {
-  color: $white;
-  padding-top: $spacer-xl;
-  padding-bottom: $spacer-m;
+  color: variables.$white;
+  padding-top: variables.$spacer-xl;
+  padding-bottom: variables.$spacer-m;
 
   h3 {
-    font-weight: $font-weight-bold;
+    font-weight: variables.$font-weight-bold;
     margin-top: 0;
-    margin-bottom: $spacer;
+    margin-bottom: variables.$spacer;
   }
 }
 
 .fwe-image-gallery-header {
   display: flex;
   align-items: center;
-  margin-bottom: $spacer-m;
+  margin-bottom: variables.$spacer-m;
   margin-top: 0px;
 }
 
@@ -140,7 +142,7 @@
         content: "";
         height: 4px;
         width: 100%;
-        background-color: $hero;
+        background-color: variables.$hero;
         bottom: 0px;
         opacity: 0;
         transition: opacity 0.3s;
@@ -203,7 +205,7 @@
       content: "";
       height: 4px;
       width: 100%;
-      background-color: $hero;
+      background-color: variables.$hero;
       bottom: 0px;
       opacity: 0;
       transition: opacity 0.3s;
@@ -224,7 +226,7 @@
   }
 }
 
-@media only screen and (min-width: $grid-breakpoint-xxs) {
+@media only screen and (min-width: variables.$grid-breakpoint-xxs) {
   .fwe-modal-image-gallery {
     width: 342px;
     max-height: 90vh;
@@ -236,7 +238,7 @@
   }
 }
 
-@media only screen and (min-width: $grid-breakpoint-sm) {
+@media only screen and (min-width: variables.$grid-breakpoint-sm) {
   .fwe-modal-image-gallery {
     width: 696px;
   }
@@ -247,7 +249,7 @@
   }
 }
 
-@media only screen and (min-width: $grid-breakpoint-md) {
+@media only screen and (min-width: variables.$grid-breakpoint-md) {
   .fwe-modal-image-gallery {
     width: 696px;
   }
@@ -258,7 +260,7 @@
   }
 }
 
-@media only screen and (min-width: $grid-breakpoint-xl) {
+@media only screen and (min-width: variables.$grid-breakpoint-xl) {
   .fwe-modal-image-gallery {
     width: 960px;
     min-height: 726px;

package/dist/scss/organisms/_login.scss

@@ -1,20 +1,22 @@
+@use "../variables";
+
 .fwe-login-layout {
   position: fixed;
-  background: $background;
+  background: variables.$background;
   top: 0px;
   right: 0px;
   bottom: 0px;
   left: 0px;
   .fwe-login-background {
-    top: $navbar-height;
+    top: variables.$navbar-height;
     position: absolute;
-    height: calc(100vh - #{$navbar-height});
+    height: calc(100vh - #{variables.$navbar-height});
     width: 100vw;
     object-fit: cover;
     object-position: center;
   }
   .fwe-login-container {
-    height: calc(100vh - #{$navbar-height});
+    height: calc(100vh - #{variables.$navbar-height});
     overflow: auto;
     display: flex;
     align-items: center;
@@ -22,26 +24,26 @@
       z-index: 1;
       margin-left: 20%;
       width: 432px;
-      background: $white;
-      padding: $spacer-xl;
+      background: variables.$white;
+      padding: variables.$spacer-xl;
       h1 {
         margin: 0px 0px 48px 0px;
       }
       .fwe-login-link-container {
-        margin-top: $spacer-m;
+        margin-top: variables.$spacer-m;
         display: flex;
         justify-content: space-between;
         flex-direction: row-reverse;
       }
-      @media (max-width: $grid-breakpoint-xxs) {
-        padding-left: $spacer-s;
-        padding-right: $spacer-s;
+      @media (max-width: variables.$grid-breakpoint-xxs) {
+        padding-left: variables.$spacer-s;
+        padding-right: variables.$spacer-s;
       }
     }
   }
-  @media (max-width: $grid-breakpoint-xs), (max-height: $grid-breakpoint-xs) {
+  @media (max-width: variables.$grid-breakpoint-xs), (max-height: variables.$grid-breakpoint-xs) {
     .fwe-login-container {
-      background-color: $white;
+      background-color: variables.$white;
       position: unset;
       left: unset;
       top: unset;

package/dist/scss/organisms/_side-menu.scss

@@ -1,17 +1,20 @@
+@use "../mixins";
+@use "../variables";
+
 .fwe-side-menu {
   flex-shrink: 0;
   width: 240px;
   display: flex;
   flex-direction: column;
   .fwe-side-menu-item {
-    border-left: 1px solid $border;
+    border-left: 1px solid variables.$border;
     line-height: 1.2;
     display: flex;
     align-items: center;
     height: 42px;
     cursor: pointer;
     margin-left: -1px;
-    color: $text;
+    color: variables.$text;
     padding: 0px 8px 0px 16px;
     position: relative;
     &::before {
@@ -21,11 +24,11 @@
       left: -1px;
       bottom: 0px;
       width: 0px;
-      background: $hero;
+      background: variables.$hero;
       transition: width 0.2s, height 0.2s;
     }
     &.fwe-active {
-      color: $hero;
+      color: variables.$hero;
       &::before {
         width: 4px;
       }
@@ -37,12 +40,12 @@
   }
 
   &--horizontal {
-    @include custom-scrollbar;
     display: flex;
     flex-direction: row;
     width: 100%;
     overflow-y: hidden;
     overflow-x: auto;
+    @include mixins.custom-scrollbar;
 
     .fwe-side-menu-item {
       border: unset;

package/dist/scss/organisms/_teaser.scss

@@ -1,3 +1,5 @@
+@use "../variables";
+
 .fwe-teaser-horbox {
   display: flex;
   background-color: var(--fwe-sucanul);
@@ -57,7 +59,7 @@
 
   .fwe-teaser-c12-content {
     order: 2;
-    background-color: $sucanul;
+    background-color: variables.$sucanul;
     padding-top: 16px;
     padding-bottom: 13px;
     padding-left: 20px;
@@ -68,26 +70,26 @@
       font-size: 12px;
       line-height: 14px;
       margin-bottom: 4px;
-      font-weight: $font-weight-normal;
+      font-weight: variables.$font-weight-normal;
     }
 
     h2,
     .fwe-h2 {
       font-size: 16px;
       line-height: 24px;
-      font-weight: $font-weight-bold;
+      font-weight: variables.$font-weight-bold;
       margin-top: 0;
     }
   }
 
   .fwe-teaser-c12-img {
     order: 1;
-    background-color: $hero;
+    background-color: variables.$hero;
     min-height: 114px;
   }
 }
 
-@media only screen and (min-width: $grid-breakpoint-md) {
+@media only screen and (min-width: variables.$grid-breakpoint-md) {
   .fwe-teaser-verbox h2 {
     padding-top: 48px;
   }

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

@@ -4,13 +4,13 @@
  * Licensed under Apache-2.0
  */
 
-@import "../variables";
-@import "../mixins";
+@use "../variables";
+@use "../mixins";
 
-@import "footer";
-@import "teaser";
-@import "header-slider";
-@import "header-modul";
-@import "image-gallery";
-@import "login";
-@import "side-menu";
+@use "footer";
+@use "teaser";
+@use "header-slider";
+@use "header-modul";
+@use "image-gallery";
+@use "login";
+@use "side-menu";

package/dist/scss/themes/flatpickr/festo.scss

@@ -1,10 +1,10 @@
 /*!
- * 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 "../../variables";
+@use "../../variables" as *;
 
 .fng-flatpickr {
   span {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@festo-ui/web-essentials",
-  "version": "7.3.0-dev.461",
+  "version": "7.3.0-dev.464",
   "description": "CSS framework and utils to build FESTO web applications",
   "keywords": [
     "css",
@@ -93,8 +93,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rollup": "^1.32.1",
-    "sass": "^1.57.1",
-    "sass-loader": "12.6.0",
+    "sass": "^1.82.0",
+    "sass-loader": "^16.0.4",
     "sort-package-json": "^2.1.0",
     "storybook": "^7.4.0",
     "style-loader": "^3.2.1",

package/scss/_accordion.scss

@@ -1,29 +1,31 @@
+@use "variables";
+
 .fwe-accordion {
-  background-color: $white;
+  background-color: variables.$white;
 
   &-header {
     display: flex;
     align-items: center;
-    height: $spacer-xl;
-    padding: 0 $spacer-s 0 $spacer-m;
-    font-size: $font-size-md;
-    font-weight: $font-weight-bold;
-    color: $text;
-    border-bottom: 1px solid $gray-100;
+    height: variables.$spacer-xl;
+    padding: 0 variables.$spacer-s 0 variables.$spacer-m;
+    font-size: variables.$font-size-md;
+    font-weight: variables.$font-weight-bold;
+    color: variables.$text;
+    border-bottom: 1px solid variables.$gray-100;
   }
 
   &-item {
     position: relative;
-    padding: 0 $spacer-s 0 $spacer-m;
-    border-top: 1px solid $gray-100;
-    border-bottom: 1px solid $gray-100;
+    padding: 0 variables.$spacer-s 0 variables.$spacer-m;
+    border-top: 1px solid variables.$gray-100;
+    border-bottom: 1px solid variables.$gray-100;
 
     &-header {
       outline: none;
       display: flex;
       align-items: center;
-      padding: $spacer-m $spacer-xxl $spacer-m 0;
-      min-height: $spacer-xl;
+      padding: variables.$spacer-m variables.$spacer-xxl variables.$spacer-m 0;
+      min-height: variables.$spacer-xl;
       cursor: pointer;
     }
 
@@ -37,28 +39,28 @@
       left: 0;
       display: block;
       content: "";
-      width: $spacer-xxxs;
+      width: variables.$spacer-xxxs;
       height: 0px;
-      background-color: $caerul;
+      background-color: variables.$caerul;
     }
 
     &::after {
       position: absolute;
       top: 21px;
-      right: $spacer-s;
+      right: variables.$spacer-s;
       display: block;
-      font-family: $font-family-icons-32;
-      font-size: $font-size-xxl;
+      font-family: variables.$font-family-icons-32;
+      font-size: variables.$font-size-xxl;
       content: "\e900";
-      height: $spacer-l;
-      line-height: $spacer-l;
+      height: variables.$spacer-l;
+      line-height: variables.$spacer-l;
       transition: transform 0.2s ease;
       pointer-events: none;
     }
 
     &[open] {
       .fwe-accordion-item-header {
-        font-weight: $font-weight-bold;
+        font-weight: variables.$font-weight-bold;
       }
 
       &::after {
@@ -71,13 +73,13 @@
     }
 
     &:not([open]) .fwe-accordion-item-header {
-      font-weight: $font-weight-normal;
+      font-weight: variables.$font-weight-normal;
     }
 
     &-body {
       overflow: hidden;
       margin-right: 0;
-      margin-bottom: $spacer-m;
+      margin-bottom: variables.$spacer-m;
 
       > :first-child {
         margin-top: 0 !important;
@@ -96,11 +98,11 @@
   }
 }
 
-@media (min-width: $grid-breakpoint-xs) {
+@media (min-width: variables.$grid-breakpoint-xs) {
   .fwe-accordion {
     &-item {
       &-body {
-        margin-right: $spacer-xxl;
+        margin-right: variables.$spacer-xxl;
       }
     }
   }

package/scss/_badge.scss

@@ -1,46 +1,48 @@
+@use "variables";
+
 .fwe-badge {
   display: inline-block;
   border-radius: 2px;
-  font-size: $font-size-md;
+  font-size: variables.$font-size-md;
   padding-left: 6px;
   padding-right: 6px;
-  color: $white;
+  color: variables.$white;
   max-height: 19px;
   height: 19px;
   line-height: 17px;
-  background-color: $hero;
-  font-weight: $font-weight-bold;
+  background-color: variables.$hero;
+  font-weight: variables.$font-weight-bold;
 
   &.fwe-badge-sm {
-    font-size: $font-size-small;
+    font-size: variables.$font-size-small;
     max-height: 17px;
     height: 17px;
     line-height: 16px;
   }
 
   &.fwe-badge-md {
-    font-size: $font-size-base;
+    font-size: variables.$font-size-base;
     max-height: 22px;
     height: 22px;
     line-height: 20px;
   }
 
   &.fwe-badge-lg {
-    font-size: $font-size-xl;
+    font-size: variables.$font-size-xl;
     max-height: 32px;
     height: 32px;
     line-height: 30px;
   }
 
   &.fwe-badge-xl {
-    font-size: $font-size-xxl;
+    font-size: variables.$font-size-xxl;
     max-height: 44px;
     height: 44px;
     line-height: 42px;
   }
 }
 
-@each $key, $value in $badge-colors {
+@each $key, $value in variables.$badge-colors {
   .fwe-badge-#{$key} {
     background-color: $value !important;
   }

package/scss/_border.scss

@@ -1,3 +1,7 @@
+@use "sass:map";
+@use "utils";
+@use "variables";
+
 @function border-name($borderKey) {
   @return if($borderKey != 0, "-#{$borderKey}", null);
 }
@@ -68,15 +72,15 @@
   }
 }
 
-@each $breakpoint in map-keys($grid-breakpoints) {
-  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-  $size: map-get($grid-breakpoints, $breakpoint);
+@each $breakpoint in map.keys(variables.$grid-breakpoints) {
+  $infix: utils.breakpoint-infix($breakpoint, variables.$grid-breakpoints);
+  $size: map.get(variables.$grid-breakpoints, $breakpoint);
 
   @if $size == 0 {
-    @include borders($borders);
+    @include borders(variables.$borders);
   } @else {
     @media (min-width: $size) {
-      @include borders($borders, $infix);
+      @include borders(variables.$borders, $infix);
     }
   }
 }