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

package/scss/_bottom-navigation.scss

@@ -1,10 +1,12 @@
+@use "variables";
+
 .fwe-bottom-navigation {
   width: 100%;
   display: flex;
-  background: $white;
+  background: variables.$white;
   align-items: flex-start;
   justify-content: space-around;
-  border-top: 1px solid $border;
+  border-top: 1px solid variables.$border;
   height: 84px;
   padding: 22px 16px;
   .fwe-bottom-navigation-button {
@@ -18,7 +20,7 @@
     background: none;
     border: none;
     outline: none;
-    color: $hero-gray;
+    color: variables.$hero-gray;
     position: relative;
     :after {
       content: "";
@@ -27,18 +29,18 @@
       left: 0px;
       right: 0px;
       height: 0px;
-      background: $hero;
+      background: variables.$hero;
       transition: height 0.3s ease;
     }
     &.fwe-selected {
-      color: $hero;
+      color: variables.$hero;
       cursor: default;
       :after {
         height: 4px;
       }
     }
     &:active {
-      color: $hero-active;
+      color: variables.$hero-active;
     }
   }
 }

package/scss/_bottom-sheet.scss

@@ -1,3 +1,6 @@
+@use "mixins";
+@use "variables";
+
 .fwe-bottom-sheet {
   &-header {
     position: relative;
@@ -16,31 +19,31 @@
   }
 
   &-drag-handle {
-    width: $spacer-l;
-    height: $spacer-xxxs;
-    background-color: $hero-gray;
+    width: variables.$spacer-l;
+    height: variables.$spacer-xxxs;
+    background-color: variables.$hero-gray;
     border-radius: 3px;
-    margin: $spacer 0;
+    margin: variables.$spacer 0;
   }
 
   &-toggle-btn {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
-    left: $spacer-s;
+    left: variables.$spacer-s;
   }
 
   &-close-btn {
-    width: $spacer-m;
-    height: $spacer-m;
+    width: variables.$spacer-m;
+    height: variables.$spacer-m;
     position: absolute;
     right: 20px;
     top: 20px;
     padding: 0;
     border: none;
-    min-width: $spacer-m;
+    min-width: variables.$spacer-m;
     cursor: pointer;
-    background: $text;
+    background: variables.$text;
     mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjExIC0xODMpIj48cGF0aCBkPSJNMCwwSDI0VjI0SDBaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMTEgMTgzKSIgZmlsbD0ibm9uZSIvPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIxNSAxODcpIj48cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNMTIuOTUsNC40NjQsMTEuNTM2LDMuMDUsOCw2LjU4Niw0LjQ2NCwzLjA1LDMuMDUsNC40NjQsNi41ODYsOCwzLjA1LDExLjUzNiw0LjQ2NCwxMi45NSw4LDkuNDE0bDMuNTM2LDMuNTM2LDEuNDE0LTEuNDE0TDkuNDE0LDhaIiBmaWxsPSIjMzMzIi8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIxNSAxODcpIj48cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNMTIuOTUsNC40NjQsMTEuNTM2LDMuMDUsOCw2LjU4Niw0LjQ2NCwzLjA1LDMuMDUsNC40NjQsNi41ODYsOCwzLjA1LDExLjUzNiw0LjQ2NCwxMi45NSw4LDkuNDE0bDMuNTM2LDMuNTM2LDEuNDE0LTEuNDE0TDkuNDE0LDhaIiBmaWxsPSIjMzMzIi8+PC9nPjwvZz48L3N2Zz4=");
   }
 
@@ -50,7 +53,7 @@
     left: 0;
 
     background: rgba(0, 0, 0, 0.5);
-    z-index: $zindex-modal-backdrop;
+    z-index: variables.$zindex-modal-backdrop;
     opacity: 0;
     transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
 
@@ -66,10 +69,10 @@
     bottom: 0;
     left: 50%;
     right: 50%;
-    background: $white;
+    background: variables.$white;
     box-shadow: 0px 1px 8px #33333333;
-    z-index: $zindex-modal;
-    border-radius: $spacer-xs $spacer-xs 0 0;
+    z-index: variables.$zindex-modal;
+    border-radius: variables.$spacer-xs variables.$spacer-xs 0 0;
     overflow: hidden;
     opacity: 0;
     max-width: 768px;
@@ -105,9 +108,9 @@
   }
 
   &-content {
-    padding: $spacer $spacer-l;
-    height: calc(100% - $spacer-l);
+    padding: variables.$spacer variables.$spacer-l;
+    height: calc(100% - variables.$spacer-l);
     overflow-y: auto;
-    @include custom-scrollbar;
+    @include mixins.custom-scrollbar;
   }
 }

package/scss/_breadcrumb.scss

@@ -1,3 +1,5 @@
+@use "variables";
+
 .fwe-breadcrumb {
   display: flex;
   flex-wrap: wrap;
@@ -8,20 +10,20 @@
     display: flex;
     align-items: center;
     min-height: 24px;
-    color: $text;
+    color: variables.$text;
     text-decoration: none;
     user-select: none;
-    font-size: $font-size-md;
-    line-height: calc(#{$font-size-md} + 2px);
+    font-size: variables.$font-size-md;
+    line-height: calc(#{variables.$font-size-md} + 2px);
     &:focus {
       outline: none;
     }
     &:not(:last-child) {
       &:hover {
-        color: $hero;
+        color: variables.$hero;
       }
       &:active {
-        color: $hero-active;
+        color: variables.$hero-active;
       }
       cursor: pointer;
       &::after {

package/scss/_button.scss

@@ -1,3 +1,6 @@
+@use "variables";
+@use "icons";
+
 a.fwe-btn,
 button.fwe-btn {
   line-height: normal;
@@ -6,13 +9,13 @@ button.fwe-btn {
   align-items: center;
   text-align: center;
   justify-content: center;
-  font-family: $font-family-base;
-  font-size: $font-size-base;
+  font-family: variables.$font-family-base;
+  font-size: variables.$font-size-base;
   padding: 4px 16px;
   min-height: 32px;
-  color: $text;
-  background: $control;
-  border-radius: $control-border-radius;
+  color: variables.$text;
+  background: variables.$control;
+  border-radius: variables.$control-border-radius;
   cursor: pointer;
   border: none;
 
@@ -23,12 +26,12 @@ button.fwe-btn {
   }
 
   &:hover {
-    color: $text;
-    background: $control-hover;
+    color: variables.$text;
+    background: variables.$control-hover;
   }
 
   &:active {
-    background: $control-active;
+    background: variables.$control-active;
   }
 
   &:focus {
@@ -38,27 +41,27 @@ button.fwe-btn {
   &:disabled,
   &.fwe-disabled {
     cursor: default;
-    background: $control-disabled;
-    color: $text-disabled;
+    background: variables.$control-disabled;
+    color: variables.$text-disabled;
   }
 
   &.fwe-btn-hero {
-    color: $white;
-    background: $hero;
+    color: variables.$white;
+    background: variables.$hero;
 
     &:hover {
-      color: $white;
-      background: $hero-hover;
+      color: variables.$white;
+      background: variables.$hero-hover;
     }
 
     &:active {
-      background: $hero-active;
+      background: variables.$hero-active;
     }
 
     &:disabled,
     &.fwe-disabled {
-      background: $control-disabled;
-      color: $text-disabled;
+      background: variables.$control-disabled;
+      color: variables.$text-disabled;
     }
   }
 
@@ -68,7 +71,7 @@ button.fwe-btn {
 
   &.fwe-btn-link {
     background: none;
-    color: $hero;
+    color: variables.$hero;
     padding: 0;
 
     i[class^="fwe-icon-"],
@@ -78,22 +81,22 @@ button.fwe-btn {
     }
 
     &.fwe-dark {
-      color: $text;
+      color: variables.$text;
     }
 
     &:hover {
       background: none;
-      color: $hero-hover;
+      color: variables.$hero-hover;
     }
 
     &:active {
       background: none;
-      color: $hero-hover;
+      color: variables.$hero-hover;
     }
 
     &:disabled,
     &.fwe-disabled {
-      color: $text-disabled;
+      color: variables.$text-disabled;
     }
   }
 

package/scss/_cards.scss

@@ -1,9 +1,11 @@
+@use "variables";
+
 .fwe-card {
   display: flex;
   flex-direction: column;
-  border: 1px solid $border;
-  background-color: $white;
-  border-radius: $border-radius-m;
+  border: 1px solid variables.$border;
+  background-color: variables.$white;
+  border-radius: variables.$border-radius-m;
 
   .fwe-card-img {
     width: 100%;
@@ -36,8 +38,8 @@
 
     .fwe-card-title {
       h5 {
-        line-height: $font-size-xl;
-        font-size: $font-size-xl;
+        line-height: variables.$font-size-xl;
+        font-size: variables.$font-size-xl;
         margin: 0;
         padding: 0;
       }
@@ -45,8 +47,8 @@
       p {
         padding: 0;
         margin: 0;
-        color: $text-light;
-        font-size: $font-size-md;
+        color: variables.$text-light;
+        font-size: variables.$font-size-md;
       }
     }
   }
@@ -81,9 +83,9 @@
       padding-left: 16px;
 
       h6 {
-        line-height: $font-size-base;
-        font-size: $font-size-base;
-        font-weight: $font-weight-bold;
+        line-height: variables.$font-size-base;
+        font-size: variables.$font-size-base;
+        font-weight: variables.$font-weight-bold;
         margin: 0;
         padding: 0;
       }
@@ -91,7 +93,7 @@
       p {
         padding: 0;
         margin: 0;
-        color: $text;
+        color: variables.$text;
       }
     }
   }

package/scss/_checkbox.scss

@@ -1,3 +1,5 @@
+@use "variables";
+
 $defaultHeight: 16px;
 $defaultWidth: 16px;
 $lgHeight: 24px;
@@ -26,7 +28,7 @@ $lgWidth: 24px;
   min-height: $lgHeight;
   width: $lgWidth;
   min-width: $lgWidth;
-  border-radius: $border-radius-s;
+  border-radius: variables.$border-radius-s;
   &:before {
     height: 18px;
     width: 18px;
@@ -77,7 +79,7 @@ label.fwe-checkbox {
     width: $defaultWidth;
     min-width: $defaultWidth;
     border-radius: 2px;
-    border: 1px solid $control-border;
+    border: 1px solid variables.$control-border;
     background-color: white;
     &::before {
       content: "";
@@ -114,11 +116,11 @@ label.fwe-checkbox {
     cursor: pointer;
 
     &:hover ~ .fwe-checkbox-checkmark {
-      background-color: $control;
+      background-color: variables.$control;
     }
 
     &:active ~ .fwe-checkbox-checkmark {
-      background-color: $control-hover;
+      background-color: variables.$control-hover;
     }
 
     &:indeterminate ~ .fwe-checkbox-checkmark {
@@ -129,20 +131,20 @@ label.fwe-checkbox {
 
     &:checked ~ .fwe-checkbox-checkmark,
     &:indeterminate ~ .fwe-checkbox-checkmark {
-      background-color: $hero;
-      border-color: $hero;
+      background-color: variables.$hero;
+      border-color: variables.$hero;
     }
 
     &:hover:checked:not(:disabled) ~ .fwe-checkbox-checkmark,
     &:hover:indeterminate:not(:disabled) ~ .fwe-checkbox-checkmark {
-      background-color: $hero-hover;
-      border-color: $hero-hover;
+      background-color: variables.$hero-hover;
+      border-color: variables.$hero-hover;
     }
 
     &:active:checked:not(:disabled) ~ .fwe-checkbox-checkmark,
     &:active:indeterminate:not(:disabled) ~ .fwe-checkbox-checkmark {
-      background-color: $hero-active;
-      border-color: $hero-active;
+      background-color: variables.$hero-active;
+      border-color: variables.$hero-active;
     }
 
     &:checked ~ .fwe-checkbox-checkmark:before,
@@ -151,15 +153,15 @@ label.fwe-checkbox {
     }
 
     &:disabled ~ .fwe-checkbox-checkmark {
-      background-color: $white;
-      border-color: $control-disabled;
+      background-color: variables.$white;
+      border-color: variables.$control-disabled;
       cursor: not-allowed;
     }
 
     &:disabled:checked ~ .fwe-checkbox-checkmark,
     &:disabled:indeterminate ~ .fwe-checkbox-checkmark {
-      background-color: $control-disabled;
-      border-color: $control-disabled;
+      background-color: variables.$control-disabled;
+      border-color: variables.$control-disabled;
     }
 
     &:disabled {
@@ -167,12 +169,12 @@ label.fwe-checkbox {
     }
 
     &:disabled ~ .fwe-checkbox-label-content {
-      color: $text-disabled;
+      color: variables.$text-disabled;
       cursor: not-allowed;
     }
 
     &:invalid ~ .fwe-checkbox-checkmark {
-      border-color: $red;
+      border-color: variables.$red;
     }
   }
 }

package/scss/_chips.scss

@@ -1,6 +1,9 @@
+@use "icons";
+@use "variables";
+
 %chip-lg {
-  font-size: $font-size-base;
-  border-radius: $border-radius-xl;
+  font-size: variables.$font-size-base;
+  border-radius: variables.$border-radius-xl;
   padding: 0px 16px;
   height: 32px;
   i[class^="fwe-icon-"],
@@ -45,13 +48,13 @@
   position: relative;
   display: flex;
   align-items: center;
-  font-size: $font-size-md;
+  font-size: variables.$font-size-md;
   text-align: center;
-  border-radius: $border-radius-l;
+  border-radius: variables.$border-radius-l;
   cursor: pointer;
-  background: $control;
-  color: $text;
-  border: 1px solid $control;
+  background: variables.$control;
+  color: variables.$text;
+  border: 1px solid variables.$control;
   box-sizing: border-box;
   padding: 0px 12px;
   i[class^="fwe-icon-"],
@@ -62,18 +65,18 @@
     line-height: 1;
   }
   &:hover {
-    background: $control-hover;
-    border: 1px solid $control-hover;
+    background: variables.$control-hover;
+    border: 1px solid variables.$control-hover;
   }
   &:active {
-    background: $control-active;
-    border: 1px solid $control-active;
+    background: variables.$control-active;
+    border: 1px solid variables.$control-active;
   }
   &.fwe-selected {
     cursor: default;
     background: transparent;
-    border: 1px solid $hero;
-    color: $hero;
+    border: 1px solid variables.$hero;
+    color: variables.$hero;
     &.fwe-category {
       cursor: pointer;
       padding-right: 24px;
@@ -87,13 +90,13 @@
         background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iYTAwMzhlNDEtMjFlNi00ZjBlLWFmZjctMzViMzY2MWQ0ZDhlIiBkYXRhLW5hbWU9ImNvbnRlbnQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDE2IDE2Ij4NCgk8ZyBpZD0iZmQwZDc0NmQtZTE2My00Yjk4LTkxYTctYjk0MGYyYTlkZDc4IiBkYXRhLW5hbWU9ImFiYjU1YWU4LWNhNTUtNDcwYy04N2MzLTRiMDY3MzhiNDM2MCI+DQoJCTxyZWN0IHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIvPg0KCTwvZz4NCgk8ZyBpZD0iYTE4OTFiZmMtNDBjMS00Y2EwLWFmOTgtMmJiOTQ1YTdmMDFmIiBkYXRhLW5hbWU9ImI2NGIxZWQyLWI4MzEtNDM1Yy05Y2VlLWI5OTY0MjYwMjA5ZCI+DQoJCTxwb2x5Z29uIHBvaW50cz0iMTAuMjQgNS4wNSA4IDcuMyA1Ljc1IDUuMDUgNS4wNSA1Ljc2IDcuMjkgOCA1LjA1IDEwLjI1IDUuNzUgMTAuOTUgOCA4LjcxIDEwLjI0IDEwLjk1IDEwLjk1IDEwLjI1IDguNyA4IDEwLjk1IDUuNzYgMTAuMjQgNS4wNSAxMC4yNCA1LjA1IiBmaWxsPSIjMzMzIi8+DQoJPC9nPg0KPC9zdmc+");
       }
       &:hover {
-        background: $gray-100;
+        background: variables.$gray-100;
         &::after {
           background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iYTAwMzhlNDEtMjFlNi00ZjBlLWFmZjctMzViMzY2MWQ0ZDhlIiBkYXRhLW5hbWU9ImNvbnRlbnQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDE2IDE2Ij4NCgk8ZyBpZD0iZmQwZDc0NmQtZTE2My00Yjk4LTkxYTctYjk0MGYyYTlkZDc4IiBkYXRhLW5hbWU9ImFiYjU1YWU4LWNhNTUtNDcwYy04N2MzLTRiMDY3MzhiNDM2MCI+DQoJCTxyZWN0IHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIvPg0KCTwvZz4NCgk8ZyBpZD0iYTE4OTFiZmMtNDBjMS00Y2EwLWFmOTgtMmJiOTQ1YTdmMDFmIiBkYXRhLW5hbWU9ImI2NGIxZWQyLWI4MzEtNDM1Yy05Y2VlLWI5OTY0MjYwMjA5ZCI+DQoJCTxwb2x5Z29uIHBvaW50cz0iMTAuMjQgNS4wNSA4IDcuMyA1Ljc1IDUuMDUgNS4wNSA1Ljc2IDcuMjkgOCA1LjA1IDEwLjI1IDUuNzUgMTAuOTUgOCA4LjcxIDEwLjI0IDEwLjk1IDEwLjk1IDEwLjI1IDguNyA4IDEwLjk1IDUuNzYgMTAuMjQgNS4wNSAxMC4yNCA1LjA1IiBmaWxsPSIjMDA5MWRjIi8+DQoJPC9nPg0KPC9zdmc+");
         }
       }
       &:active {
-        background: $gray-200;
+        background: variables.$gray-200;
       }
     }
     &.fwe-filter {
@@ -109,24 +112,24 @@
         background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+DQoJPGcgaWQ9ImJhNmJmZGNhLWJhMzgtNDczMC04MjlkLTcyYmIzNzI3YjUzNCIgZGF0YS1uYW1lPSJjb250ZW50Ij4NCgkJPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJub25lIi8+DQoJCTxwb2x5Z29uIHBvaW50cz0iNi4xNDEgMTIuODE0IDEuOTM0IDguNjA3IDMuMzQ4IDcuMTkzIDYuMTQxIDkuOTg2IDEyLjkzNCAzLjE5MyAxNC4zNDggNC42MDcgNi4xNDEgMTIuODE0IiBmaWxsPSIjMDA5MWRjIi8+DQoJPC9nPg0KPC9zdmc+");
       }
       &:hover {
-        background: $gray-100;
+        background: variables.$gray-100;
       }
       &:active {
-        background: $gray-200;
+        background: variables.$gray-200;
       }
     }
   }
   &.fwe-readonly {
     cursor: default;
     background: transparent;
-    color: $text-light;
-    border: 1px solid $text-light;
+    color: variables.$text-light;
+    border: 1px solid variables.$text-light;
   }
   &.fwe-disabled {
     cursor: default;
-    background: $control-disabled;
-    border: 1px solid $control-disabled;
-    color: $text-disabled;
+    background: variables.$control-disabled;
+    border: 1px solid variables.$control-disabled;
+    color: variables.$text-disabled;
 
     &.fwe-filter.fwe-selected {
       cursor: default;

package/scss/_colors.scss

@@ -1,4 +1,6 @@
-@each $key, $value in $colors {
+@use "variables";
+
+@each $key, $value in variables.$colors {
   .fwe-color-#{$key} {
     color: $value !important;
   }

package/scss/_display.scss

@@ -1,4 +1,8 @@
-@import "mixins";
+@use "sass:map";
+@use "mixins";
+@use "utils";
+@use "variables";
+
 @mixin displays($infix: "") {
   .fwe-d#{$infix}-none {
     display: none !important;
@@ -41,9 +45,9 @@
   }
 }
 
-@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 displays();
@@ -55,5 +59,5 @@
 }
 
 .fwe-sr-only {
-  @include visual-hidden();
+  @include mixins.visual-hidden();
 }

package/scss/_flex.scss

@@ -1,3 +1,8 @@
+@use "sass:list";
+@use "sass:map";
+@use "utils";
+@use "variables";
+
 $basic-keywords: normal, stretch, center, start, end, flex-start, flex-end;
 $baseline-keywords: baseline, first baseline, last baseline, safe center, unsafe center;
 $positional-keywords: left, right;
@@ -157,8 +162,8 @@ $flex-properties: (
   }
 
   @each $classname, $properties in $flex-properties {
-    $property: nth($properties, 1);
-    $value: nth($properties, 2);
+    $property: list.nth($properties, 1);
+    $value: list.nth($properties, 2);
 
     .fwe-flex#{$infix}-#{$classname} {
       #{$property}: $value !important;
@@ -250,9 +255,9 @@ $flex-properties: (
   }
 }
 
-@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 flex-helpers();

package/scss/_fonts.scss

@@ -1,3 +1,5 @@
+@use "variables";
+
 /* Festo regular */
 @font-face {
   font-family: "Festo";
@@ -39,27 +41,27 @@
 }
 
 .fwe-font-size-small {
-  font-size: $font-size-small;
+  font-size: variables.$font-size-small;
 }
 
 .fwe-font-size-md {
-  font-size: $font-size-md;
+  font-size: variables.$font-size-md;
 }
 
 .fwe-font-size-base {
-  font-size: $font-size-base;
+  font-size: variables.$font-size-base;
 }
 
 .fwe-font-size-xl {
-  font-size: $font-size-xl;
+  font-size: variables.$font-size-xl;
 }
 
 .fwe-font-size-xxl {
-  font-size: $font-size-xxl;
+  font-size: variables.$font-size-xxl;
 }
 
 .fwe-line-height-base {
-  line-height: $line-height-base;
+  line-height: variables.$line-height-base;
 }
 
 .fwe-line-height-1 {
@@ -67,22 +69,22 @@
 }
 
 .fwe-font-weight-base {
-  font-weight: $font-weight-base;
+  font-weight: variables.$font-weight-base;
 }
 
 .fwe-font-weight-normal {
-  font-weight: $font-weight-normal;
+  font-weight: variables.$font-weight-normal;
 }
 
 .fwe-font-weight-bold {
-  font-weight: $font-weight-bold;
+  font-weight: variables.$font-weight-bold;
 }
 
 .fwe-font-family-sans-serif {
-  font-family: $font-family-sans-serif;
+  font-family: variables.$font-family-sans-serif;
 }
 
 .fwe-font-family-monospace,
 .fwe-font-family-code {
-  font-family: $font-family-monospace;
+  font-family: variables.$font-family-monospace;
 }