From 21357de85622d8991d5d0c0b427279c661086e1b Mon Sep 17 00:00:00 2001
From: Krystian <chrisski96@gmail.com>
Date: Tue, 3 Mar 2020 13:09:49 +0100
Subject: [PATCH] feat(theme): adjustment to new SFUI version with CSS
 variables (#442)

Co-authored-by: Anna Musial <ania.musial13@gmail.com>
---
 .../components/SwAddressList.vue              |  11 +-
 .../components/SwBottomNavigation.vue         |  89 +++++----
 packages/default-theme/components/SwCart.vue  |  47 ++---
 .../components/SwCartProduct.vue              |  10 +-
 packages/default-theme/components/SwLogin.vue |  10 +-
 .../components/SwProductCard.vue              |  31 ++-
 .../components/SwProductCarousel.vue          |  39 ++--
 .../components/SwProductDetails.vue           | 150 ++++++--------
 .../components/SwProductGallery.vue           |   2 +-
 .../components/SwProductHeading.vue           |  42 +++-
 .../default-theme/components/SwRegister.vue   |  12 +-
 .../components/SwResetPassword.vue            |  10 +-
 .../components/TopNavigation.vue              | 188 +++++++++---------
 .../account/MyAddresses/Address.vue           |  31 +--
 .../components/checkout/OrderReview.vue       |  24 +--
 .../components/checkout/OrderSummary.vue      |  46 ++---
 .../components/checkout/Payment.vue           |  37 ++--
 .../components/checkout/PersonalDetails.vue   |  24 +--
 .../components/checkout/ReviewOrder.vue       |  26 +--
 .../checkout/ReviewOrder/OrderItemsTable.vue  |  14 +-
 .../checkout/ReviewOrder/Summary.vue          |  26 +--
 .../components/checkout/Shipping.vue          |  26 +--
 .../cms/elements/SwCategoryNavigationSlot.vue |  22 +-
 .../cms/elements/SwCategorySidebarFilter.vue  | 150 ++++++++------
 .../components/cms/elements/SwFooter.vue      |   6 +-
 .../cms/elements/SwProductListingSlot.vue     |  21 +-
 .../components/cms/elements/SwSlots.vue       |   8 +-
 .../components/cms/elements/SwTextSlot.vue    |   2 +-
 .../components/forms/SwAddress.vue            |  17 +-
 .../components/forms/SwEmail.vue              |  19 +-
 .../components/forms/SwPassword.vue           |  21 +-
 .../components/forms/SwPersonalInfo.vue       |  19 +-
 .../components/modals/SwLoginModal.vue        |  33 +--
 .../components/views/ProductView.vue          | 100 +++++-----
 packages/default-theme/layouts/default.vue    |  96 ++++++---
 packages/default-theme/layouts/error.vue      |   3 +-
 packages/default-theme/package.json           |   2 +-
 packages/default-theme/pages/_.vue            |   2 -
 packages/default-theme/pages/account.vue      |   1 -
 .../default-theme/pages/account/addresses.vue |   9 +-
 .../default-theme/pages/account/orders.vue    |   1 -
 .../default-theme/pages/account/profile.vue   |  19 +-
 packages/default-theme/pages/checkout.vue     |  10 +-
 packages/default-theme/pages/index/index.vue  |  45 ++---
 packages/default-theme/pages/login.vue        |   1 -
 packages/default-theme/pages/success-page.vue |   2 +-
 yarn.lock                                     |  18 +-
 47 files changed, 740 insertions(+), 782 deletions(-)

diff --git a/packages/default-theme/components/SwAddressList.vue b/packages/default-theme/components/SwAddressList.vue
index b01462f67..e242d7ab1 100644
--- a/packages/default-theme/components/SwAddressList.vue
+++ b/packages/default-theme/components/SwAddressList.vue
@@ -70,20 +70,19 @@ export default {
 
 <style lang="scss" scoped>
 @import '~@storefront-ui/vue/styles.scss';
-@import '~@storefront-ui/shared/styles/helpers/visibility';
 .shipping-list {
-  margin-bottom: $spacer-extra-big;
+  margin-bottom: var(--spacer-extra-big);
   width: 100%;
   &__address {
     display: flex;
-    padding: $spacer-big 0;
-    border-top: 1px solid $c-light;
+    padding: var(--spacer-big) 0;
+    border-top: 1px solid var(--c-light);
   }
 }
 .shipping {
   display: flex;
-  padding: $spacer-big 0;
-  border-top: 1px solid $c-light;
+  padding: var(--spacer-big) 0;
+  border-top: 1px solid var(--c-light);
   
 }
 </style>
\ No newline at end of file
diff --git a/packages/default-theme/components/SwBottomNavigation.vue b/packages/default-theme/components/SwBottomNavigation.vue
index 3fda09582..56fecc951 100644
--- a/packages/default-theme/components/SwBottomNavigation.vue
+++ b/packages/default-theme/components/SwBottomNavigation.vue
@@ -2,46 +2,70 @@
   <div class="sw-bottom-navigation">
     <SfBottomNavigation>
       <nuxt-link to="/">
-        <SfBottomNavigationItem>
-          <SfIcon icon="home" size="20px" />
-        </SfBottomNavigationItem>
+        <SfBottomNavigationItem icon="home" icon-size="20px" />
       </nuxt-link>
       <SfBottomNavigationItem class="menu-button">
-        <SfIcon icon="menu" size="20px" style="width: 25px" />
-        <SfSelect v-model="currentRoute" class="menu-button__select">
-          <SfSelectOption v-for="route in routes" :key="route.routeLabel" :value="route">
-              <SfProductOption :value="route" :label="route.routeLabel"></SfProductOption>
-          </SfSelectOption>
-        </SfSelect>
+        <template #icon>
+          <SfIcon icon="menu" size="20px" style="width: 25px" />
+          <SfSelect v-model="currentRoute" class="menu-button__select">
+            <SfSelectOption
+              v-for="route in routes"
+              :key="route.routeLabel"
+              :value="route"
+            >
+              <SfProductOption
+                :value="route"
+                :label="route.routeLabel"
+              ></SfProductOption>
+            </SfSelectOption>
+          </SfSelect>
+        </template>
       </SfBottomNavigationItem>
-      <SfBottomNavigationItem>
-        <SfIcon icon="profile" @click="userIconClick" size="20px" />
-      </SfBottomNavigationItem>
-      <SfBottomNavigationItem>
-        <SfCircleIcon
-          class="sf-bottom-navigation__floating-icon"
-          @click="toggleSidebar"
-        >
-          <SfIcon icon="add_to_cart" size="20px" color="white" />
-        </SfCircleIcon>
+      <SfBottomNavigationItem
+        icon="profile"
+        size="20px"
+        @click="userIconClick"
+      />
+      <SfBottomNavigationItem :is-floating="true">
+        <template #icon>
+          <SfCircleIcon @click="toggleSidebar">
+            <SfIcon icon="add_to_cart" size="20px" color="white" />
+          </SfCircleIcon>
+        </template>
       </SfBottomNavigationItem>
     </SfBottomNavigation>
   </div>
 </template>
 
 <script>
-import { SfButton, SfBottomNavigation, SfCircleIcon, SfIcon, SfSelect, SfProductOption } from '@storefront-ui/vue'
-import { useCartSidebar, useNavigation, useUser, useUserLoginModal } from '@shopware-pwa/composables'
+import {
+  SfBottomNavigation,
+  SfCircleIcon,
+  SfIcon,
+  SfSelect,
+  SfProductOption
+} from '@storefront-ui/vue'
+import {
+  useCartSidebar,
+  useNavigation,
+  useUser,
+  useUserLoginModal
+} from '@shopware-pwa/composables'
 import { PAGE_ACCOUNT } from '../helpers/pages'
 
-
 export default {
   name: 'SwBottomNavigation',
-  components: { SfButton, SfBottomNavigation, SfIcon, SfCircleIcon, SfSelect, SfProductOption },
+  components: {
+    SfBottomNavigation,
+    SfIcon,
+    SfCircleIcon,
+    SfSelect,
+    SfProductOption
+  },
   data() {
     return {
       navigationElements: [],
-      currentRoute: { routeLabel: '', routePath: '/' },
+      currentRoute: { routeLabel: '', routePath: '/' }
     }
   },
   setup() {
@@ -57,19 +81,19 @@ export default {
       toggleModal
     }
   },
+  watch: {
+    currentRoute(nextRoute) {
+      this.$router.push(nextRoute.routeLabel)
+    }
+  },
   methods: {
     userIconClick() {
       if (this.isLoggedIn) {
         this.$router.push(PAGE_ACCOUNT)
-        return;
+        return
       }
       this.toggleModal()
     }
-  },
-  watch: {
-    currentRoute(nextRoute) {
-      this.$router.push(nextRoute.routeLabel)
-    }
   }
 }
 </script>
@@ -84,11 +108,8 @@ export default {
     height: 100%;
   }
 }
- .sf-bottom-navigation {
-   z-index: 3;
- }
 
 ::v-deep .sf-select__selected > div:nth-child(1) > div:nth-child(1) {
   display: none;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/packages/default-theme/components/SwCart.vue b/packages/default-theme/components/SwCart.vue
index eeb0706b7..e6bc0def2 100644
--- a/packages/default-theme/components/SwCart.vue
+++ b/packages/default-theme/components/SwCart.vue
@@ -1,6 +1,7 @@
 <template>
   <div id="cart">
     <SfSidebar
+      title="My cart"
       :visible="isSidebarOpen"
       heading-title="My Cart"
       class="sf-sidebar--right"
@@ -26,7 +27,12 @@
               <SfPrice :regular="totalPrice | price" class="sf-price--big" />
             </template>
           </SfProperty>
-          <SfButton class="sf-button--full-width" aria-label="go-to-checkout" @click="goToCheckout()">Go to checkout</SfButton>
+          <SfButton
+            class="sf-button--full-width"
+            aria-label="go-to-checkout"
+            @click="goToCheckout()"
+            >Go to checkout</SfButton
+          >
         </div>
         <div v-else key="empty-cart" class="empty-cart">
           <div class="empty-cart__banner">
@@ -48,8 +54,8 @@
 <script>
 import { SfSidebar, SfButton, SfProperty, SfPrice } from '@storefront-ui/vue'
 import { useCart, useCartSidebar } from '@shopware-pwa/composables'
-import SwCartProduct from './SwCartProduct'
 import { PAGE_CHECKOUT } from '../helpers/pages'
+import SwCartProduct from './SwCartProduct'
 
 export default {
   name: 'Cart',
@@ -80,20 +86,17 @@ export default {
   },
   methods: {
     goToCheckout() {
-      this.toggleSidebar();
-      return this.$router.push(PAGE_CHECKOUT);
+      this.toggleSidebar()
+      return this.$router.push(PAGE_CHECKOUT)
     }
-  },
+  }
 }
 </script>
 <style lang="scss" scoped>
 @import '~@storefront-ui/vue/styles';
-@mixin for-desktop {
-  @media screen and (min-width: $desktop-min) {
-    @content;
-  }
-}
+
 #cart {
+  --overlay-z-index: 4;
   box-sizing: border-box;
   @include for-desktop {
     max-width: 1240px;
@@ -105,20 +108,20 @@ export default {
   display: flex;
   flex-direction: column;
   &__total-items {
-    font-family: $body-font-family-secondary;
-    font-size: $font-size-big-mobile;
-    font-weight: $body-font-weight-secondary;
+    font-family: var(--body-font-family-secondary);
+    font-size: var(--font-size-big-mobile);
+    font-weight: var(--body-font-weight-secondary);
     @include for-desktop {
-      font-size: $font-size-big-desktop;
+      font-size: var(--font-size-big-desktop);
     }
   }
   &__total-price {
-    margin-bottom: $spacer-big;
+    margin-bottom: var(--spacer-big);
   }
 }
 .collected-product-list {
   flex: 1;
-  margin: $spacer-big -#{$spacer-big};
+  margin: var(--spacer-big) calc(var(--spacer-big) * -1);
 }
 .empty-cart {
   flex: 1;
@@ -145,17 +148,15 @@ export default {
     text-align: center;
   }
   &__label {
-    margin-top: $spacer-extra-big;
-    font-size: $font-size-big-desktop;
+    margin-top: var(--spacer-extra-big);
+    font-size: var(--font-size-big-desktop);
   }
   &__description {
-    margin-top: $spacer-big;
+    margin-top: var(--spacer-big);
   }
 }
-::v-deep .sf-overlay {
-  z-index: 4;
-}
+
 ::v-deep .sf-sidebar__aside {
   z-index: 4;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/packages/default-theme/components/SwCartProduct.vue b/packages/default-theme/components/SwCartProduct.vue
index 3b2fa33b3..cabdf4ef6 100644
--- a/packages/default-theme/components/SwCartProduct.vue
+++ b/packages/default-theme/components/SwCartProduct.vue
@@ -112,15 +112,11 @@ export default {
 </script>
 <style lang="scss" scoped>
 @import '~@storefront-ui/vue/styles';
-@mixin for-desktop {
-  @media screen and (min-width: $desktop-min) {
-    @content;
-  }
-}
+
 .collected-product {
-  margin: $spacer-big 0;
+  margin: var(--spacer-big)0;
   &__properties {
-    margin-top: $spacer-big;
+    margin-top: var(--spacer-big);
   }
   &__actions {
     opacity: 0;
diff --git a/packages/default-theme/components/SwLogin.vue b/packages/default-theme/components/SwLogin.vue
index 790578b7c..516c4d4ba 100644
--- a/packages/default-theme/components/SwLogin.vue
+++ b/packages/default-theme/components/SwLogin.vue
@@ -94,22 +94,22 @@ export default {
 
 .sw-login {
   &__alert {
-    margin-bottom: $spacer-small;
+    margin-bottom: var(--spacer-small);
   }
   &__header {
-    margin-bottom: $spacer-big;
+    margin-bottom: var(--spacer-big);
   }
 }
 
 .form {
   &__input {
-    margin-bottom: $spacer-extra-big;
+    margin-bottom: var(--spacer-extra-big);
   }
   &__checkbox {
-    margin-bottom: $spacer-big;
+    margin-bottom: var(--spacer-big);
   }
   &__button {
-    margin-top: $spacer-big;
+    margin-top: var(--spacer-big);
   }
 }
 </style>
diff --git a/packages/default-theme/components/SwProductCard.vue b/packages/default-theme/components/SwProductCard.vue
index 2cb9089d6..6eae8d66f 100644
--- a/packages/default-theme/components/SwProductCard.vue
+++ b/packages/default-theme/components/SwProductCard.vue
@@ -8,12 +8,12 @@
     :score-rating="getProductRating"
     :image-width="700"
     :image-height="1000"
-    :isOnWishlist="false"
+    :is-on-wishlist="false"
     :link="getRouterLink"
-    @click:wishlist="toggleWishlist"
     class="products__product-card"
-    :showAddToCartButton="true"
-    :isAddedToCart="isInCart"
+    :show-add-to-cart-button="true"
+    :is-added-to-cart="isInCart"
+    @click:wishlist="toggleWishlist"
     @click:add-to-cart="addToCart"
   >
     <template #title="{title}">
@@ -51,15 +51,15 @@ export default {
       isInCart
     }
   },
-  data() {
-    return {}
-  },
   props: {
     product: {
       type: Object,
       default: () => ({})
     }
   },
+  data() {
+    return {}
+  },
   computed: {
     getName() {
       return getProductName({ product: this.product })
@@ -85,8 +85,7 @@ export default {
     },
     getImageUrl() {
       return (
-        getProductMainImageUrl(this.product) ||
-        require('~/assets/productB.jpg')
+        getProductMainImageUrl(this.product) || require('~/assets/productB.jpg')
       )
     }
   },
@@ -108,18 +107,18 @@ export default {
   text-overflow: ellipsis;
 
   &__title {
-    font-family: $body-font-family-secondary;
-    font-size: $font-size-regular-mobile;
+    font-family: var(--body-font-family-secondary);
+    font-size: var(--font-size-regular-mobile);
     font-weight: 300;
     line-height: 1.6;
-    margin: $spacer-small 0;
-    @media (min-width: $desktop-min) {
-      margin: $spacer 0 $spacer-small;
-      font-size: $font-size-regular-desktop;
+    margin: var(--spacer-small) 0;
+    @include for-desktop {
+      margin: var(--spacer) 0 var(--spacer-small);
+      font-size: var(--font-size-regular-desktop);
     }
     &:hover {
       cursor: pointer;
-      color: $c_gray;
+      color: var(--c-gray);
     }
   }
 }
diff --git a/packages/default-theme/components/SwProductCarousel.vue b/packages/default-theme/components/SwProductCarousel.vue
index ac88404c9..c0af5bc08 100644
--- a/packages/default-theme/components/SwProductCarousel.vue
+++ b/packages/default-theme/components/SwProductCarousel.vue
@@ -1,6 +1,10 @@
 <template>
   <div class="Sw-products-gallery">
-    <SfSection title-heading="You may also like" v-if="products && products.length > 0">
+    <SfSection
+      v-if="products && products.length > 0"
+      class="section"
+      title-heading="You may also like"
+    >
       <SfCarousel class="product-carousel">
         <SfCarouselItem v-for="product in products" :key="product.id">
           <SwProductCard :product="product" />
@@ -26,13 +30,11 @@ export default {
   },
   data() {
     return {
-      products: {},
-      
+      products: {}
     }
   },
   async mounted() {
-    const result = await getProducts(
-    {
+    const result = await getProducts({
       sort: {
         field: 'price',
         desc: false
@@ -48,34 +50,21 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '~@storefront-ui/shared/styles/variables';
-
-@mixin for-desktop {
-  @media screen and (min-width: $desktop-min) {
-    @content;
-  }
-}
+@import '~@storefront-ui/vue/styles';
 
 .section {
-  padding-left: $spacer-big;
-  padding-right: $spacer-big;
+  padding: 0 var(--spacer-big);
   @include for-desktop {
-    padding-left: 0;
-    padding-right: 0;
+    padding: 0;
   }
 }
 
 .product-carousel {
-  margin: -20px -#{$spacer-big} -20px 0;
+  margin: 0 calc(var(--spacer-big) * -1) 0 0;
   @include for-desktop {
-    margin: -20px 0;
-  }
-  ::v-deep .sf-carousel__wrapper {
-    padding: 20px 0;
-    @include for-desktop {
-      padding: 20px;
-      max-width: calc(100% - 216px);
-    }
+    margin: var(--spacer-big) 0;
+    --carousel-padding: var(--spacer-big);
+    --carousel-max-width: calc(100% - 13.5rem);
   }
 }
 </style>
diff --git a/packages/default-theme/components/SwProductDetails.vue b/packages/default-theme/components/SwProductDetails.vue
index d3e9f7dd1..569b12f19 100644
--- a/packages/default-theme/components/SwProductDetails.vue
+++ b/packages/default-theme/components/SwProductDetails.vue
@@ -17,13 +17,15 @@
       <button v-if="sizes.length > 0" class="sf-action">Size guide</button>
     </div> -->
     <div v-if="hasChildren" class="product-details__section">
+
       <SwProductSelect
         v-for="(options, code) in getAllProductOptions"
-        v-bind:key="code"
-        :options="options"
+        :key="code"
         v-model="selected[code]"
-        :changeHandler="handleChange"
-        :label="code" />
+        :options="options"
+        :change-handler="handleChange"
+        :label="code"
+      />
     </div>
     <div class="product-details__section">
       <SfAlert
@@ -38,10 +40,10 @@
         @click="addToCart"
       />
       <div class="product-details__action">
-        <button class="sf-action">Save for later</button>
+        <SfButton class="sf-action sf-button--text">Save for later</SfButton>
       </div>
       <div class="product-details__action">
-        <button class="sf-action">Add to compare</button>
+        <SfButton class="sf-action sf-button--text">Add to compare</SfButton>
       </div>
     </div>
     <SwProductTabs>
@@ -92,6 +94,7 @@
 <script>
 import {
   SfAlert,
+  SfButton,
   SfProperty,
   SfHeading,
   SfProductOption,
@@ -118,6 +121,7 @@ export default {
   name: 'SwProductDetails',
   components: {
     SfAlert,
+    SfButton,
     SfProperty,
     SfHeading,
     SfProductOption,
@@ -160,10 +164,18 @@ export default {
       return price && '$' + price
     },
     name() {
-      return this.product && (this.product.name || this.product.translated && this.product.translated.name)
+      return (
+        this.product &&
+        (this.product.name ||
+          (this.product.translated && this.product.translated.name))
+      )
     },
     description() {
-      return this.product && (this.product.description || this.product.translated && this.product.translated.description)
+      return (
+        this.product &&
+        (this.product.description ||
+          (this.product.translated && this.product.translated.description))
+      )
     },
     ratingAverage() {
       return this.product && this.product.ratingAverage
@@ -176,14 +188,14 @@ export default {
     properties() {
       return getProductProperties({ product: this.product })
     },
-    getAllProductOptions(){
+    getAllProductOptions() {
       const options = getProductOptions({
         product: this.product
       })
 
-      return options;
+      return options
     },
-    getAllProductOption(){
+    getAllProductOption() {
       return getProductOptions({
         product: this.product
       })
@@ -200,12 +212,15 @@ export default {
   },
   watch: {
     selectedOptions(selected, selectedOld) {
-      if (Object.keys(this.getAllProductOptions).length !== Object.keys(selected).length) {
-        return;
+      if (
+        Object.keys(this.getAllProductOptions).length !==
+        Object.keys(selected).length
+      ) {
+        return
       }
 
-      const options = [];
-      for(let attribute of Object.keys(selected)) {
+      const options = []
+      for (const attribute of Object.keys(selected)) {
         options.push(selected[attribute])
       }
       const url = getProductOptionsUrl({
@@ -219,8 +234,10 @@ export default {
 
   mounted() {
     this.product.options.forEach(option => {
-      this.selected = Object.assign({}, this.selected, { [option.group.name]: option.id })
-    });
+      this.selected = Object.assign({}, this.selected, {
+        [option.group.name]: option.id
+      })
+    })
   },
 
   methods: {
@@ -235,15 +252,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '~@storefront-ui/shared/styles/variables';
-@import '~@storefront-ui/shared/styles/helpers/visibility';
-@import '~@storefront-ui/vue/src/utilities/transitions/transitions.scss';
+@import '~@storefront-ui/vue/styles';
 
-@mixin for-desktop {
-  @media screen and (min-width: $desktop-min) {
-    @content;
-  }
-}
 @mixin for-iOS {
   @supports (-webkit-overflow-scrolling: touch) {
     @content;
@@ -253,7 +263,7 @@ export default {
 .product-details {
   &__action {
     display: flex;
-    margin: $spacer-big 0 ($spacer-big / 2);
+    margin: var(--spacer-big) 0 calc(var(--spacer-big) / 2);
     @include for-desktop {
       justify-content: flex-end;
     }
@@ -261,44 +271,35 @@ export default {
   &__add-to-cart {
     margin-top: 1.5rem;
     @include for-desktop {
-      margin-top: $spacer-extra-big;
+      margin-top: var(--spacer-extra-big);
     }
   }
   &__alert {
     margin-top: 1.5rem;
   }
   &__attribute {
-    margin-bottom: $spacer-big;
+    margin-bottom: var(--spacer-big);
   }
   &__description {
-    margin: $spacer-extra-big 0 ($spacer-big * 3) 0;
-    font-family: $body-font-family-secondary;
-    font-size: $font-size-regular-mobile;
+    margin: var(--spacer-extra-big) 0 calc(var(--spacer-big) * 3) 0;
+    font-family: var(--body-font-family-secondary);
+    font-size: var(--font-size-regular-mobile);
     line-height: 1.6;
-    @include for-desktop {
-      font-size: $font-size-regular-desktop;
-    }
   }
   &__divider {
     margin-top: 30px;
   }
   &__heading {
-    margin-top: $spacer-big;
-    ::v-deep .sf-heading__title {
-      font-size: $font-size-big-mobile;
-      font-weight: $body-font-weight-primary;
-      @include for-desktop {
-        font-size: $h1-font-size-desktop;
-        font-weight: $body-font-weight-secondary;
-      }
-    }
+    --heading-title-font-weight: var(--body-font-weight-primary);
+    margin: var(--spacer-big) 0 0 0;
     @include for-desktop {
-      margin-top: 0;
+      --heading-title-font-weight: var(--body-font-weight-secondary);
+      margin: 0;
     }
   }
   &__mobile-bar {
     display: none;
-    padding: $spacer-medium 0;
+    padding: var(--spacer-medium) 0;
     box-sizing: border-box;
     .product--is-active & {
       display: block;
@@ -318,31 +319,7 @@ export default {
     }
   }
   &__properties {
-    margin-top: $spacer-big;
-  }
-  &__sub {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-  }
-  &__sub-price {
-    flex-basis: 100%;
-    margin-top: $spacer-big / 4;
-    @include for-desktop {
-      flex-basis: auto;
-      margin-top: $spacer-big / 2;
-    }
-  }
-  &__sub-rating {
-    display: flex;
-    margin-top: $spacer-big / 2;
-    @include for-desktop {
-      margin-left: auto;
-    }
-  }
-  &__sub-reviews {
-    margin-left: 10px;
-    font-size: 0.75rem;
+    margin-top: var(--spacer-big);
   }
   &__section {
     border-bottom: 1px solid #f1f2f3;
@@ -352,54 +329,51 @@ export default {
       border: 0;
       padding-bottom: 0;
     }
-    @media (max-width: $desktop-min) {
-      padding-left: $spacer-big;
-      padding-right: $spacer-big;
-    }
   }
   &__tabs {
-    margin-top: $spacer-big;
+    margin-top: var(--spacer-big);
     @include for-desktop {
-      margin-top: 5 * $spacer-big;
+      margin-top: calc(5 * var(--spacer-big));
     }
     p {
       margin: 0;
     }
   }
   &__review {
-    padding-bottom: $spacer-big;
+    padding-bottom: var(--spacer-big);
     @include for-desktop {
-      padding-bottom: $spacer-extra-big;
-      border-bottom: 1px solid $c-primary;
+      padding-bottom: var(--spacer-extra-big);
+      border-bottom: 1px solid var(--c-primary);
     }
     & + & {
-      padding-top: $spacer-extra-big;
-      border-top: 1px solid $c-primary;
+      padding-top: var(--spacer-extra-big);
+      border-top: 1px solid var(--c-primary);
       @include for-desktop {
         border-top: 0;
-        padding-top: $spacer-extra-big;
+        padding-top: var(--spacer-extra-big);
       }
     }
   }
   &__product-property {
-    padding: $spacer-small 0;
+    padding: var(--spacer-small) 0;
   }
 }
 
 .sf-action {
+  --button-font-size: var(--font-size-small);
   padding: 0;
   border: 0;
   outline: none;
   background-color: transparent;
-  color: $c-text;
-  font-family: $body-font-family-secondary;
-  font-size: $font-size-regular-mobile;
-  font-weight: $body-font-weight-secondary;
+  color: var(--c-text);
+  font-family: var(--body-font-family-secondary);
+  font-size: var(--font-size-regular-mobile);
+  font-weight: var(--body-font-weight-secondary);
   line-height: 1.6;
   text-decoration: underline;
   cursor: pointer;
   @include for-desktop {
-    font-size: $font-size-regular-desktop;
+    --button-font-size: var(--font-size-regular-desktop);
   }
 }
 </style>
diff --git a/packages/default-theme/components/SwProductGallery.vue b/packages/default-theme/components/SwProductGallery.vue
index 788ab0ff7..4acbc0c81 100644
--- a/packages/default-theme/components/SwProductGallery.vue
+++ b/packages/default-theme/components/SwProductGallery.vue
@@ -99,7 +99,7 @@ export default {
     }
     #{$this}__item {
       &:not(:first-child) {
-        margin: 0 0 0 $spacer;
+        margin: 0 0 0 var(--spacer);
       }
     }
   }
diff --git a/packages/default-theme/components/SwProductHeading.vue b/packages/default-theme/components/SwProductHeading.vue
index c39b247d0..9e8347a33 100644
--- a/packages/default-theme/components/SwProductHeading.vue
+++ b/packages/default-theme/components/SwProductHeading.vue
@@ -7,21 +7,21 @@
         class="sf-heading--no-underline sf-heading--left"
       />
     </slot>
-    <div class="product-details__sub">
+    <div class="product-heading__sub">
       <slot name="price" v-bind="{ price, special }">
         <SfPrice
           :regular="`${price}`"
           :special="special"
-          class="sf-price--big product-details__sub-price"
+          class="sf-price--big product-heading__sub-price"
         />
       </slot>
       <slot name="reviews" v-bind="reviews">
-        <div v-if="reviews.length" class="product-details__sub-rating">
+        <div v-if="reviews.length" class="product-heading__sub-rating">
           <SfRating :score="ratingAverage" :max="5" />
-          <div class="product-details__sub-reviews desktop-only">
+          <div class="product-heading__sub-reviews desktop-only">
             Read all {{ reviews.length }} review
           </div>
-          <div class="product-details__sub-reviews mobile-only">
+          <div class="product-heading__sub-reviews mobile-only">
             ({{ reviews.length }})
           </div>
         </div>
@@ -59,3 +59,35 @@ export default {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+@import '~@storefront-ui/shared/styles/variables';
+
+.product-heading {
+  &__sub {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+  &__sub-price {
+    --price-font-size: 1.5rem;
+    flex-basis: 100%;
+    margin-top: calc(var(--spacer-big) / 4);
+    @include for-desktop {
+      flex-basis: auto;
+      margin-top: calc(var(--spacer-big) / 2);
+    }
+  }
+  &__sub-rating {
+    display: flex;
+    margin-top: calc(var(--spacer-big) / 2);
+    @include for-desktop {
+      margin-left: auto;
+    }
+  }
+  &__sub-reviews {
+    margin-left: 10px;
+    font-size: 0.75rem;
+  }
+}
+</style>
diff --git a/packages/default-theme/components/SwRegister.vue b/packages/default-theme/components/SwRegister.vue
index 682249c3b..c7c96e521 100644
--- a/packages/default-theme/components/SwRegister.vue
+++ b/packages/default-theme/components/SwRegister.vue
@@ -273,30 +273,30 @@ export default {
 
 .sw-login {
   &__alert {
-    margin-bottom: $spacer-small;
+    margin-bottom: var(--spacer-small);
   }
 
   &__header {
-    margin-bottom: $spacer-big;
+    margin-bottom: var(--spacer-big);
   }
 }
 
 .form {
   &__input {
-    margin-bottom: $spacer-big;
+    margin-bottom: var(--spacer-big);
   }
 
   &__checkbox {
-    margin-bottom: $spacer-big;
+    margin-bottom: var(--spacer-big);
   }
 
   &__button {
-    margin-top: $spacer-big;
+    margin-top: var(--spacer-big);
   }
 }
 
 .sf-button--muted {
-  color: $c-text-muted;
+  color: var(--c-text-muted);
 }
 </style>
 
diff --git a/packages/default-theme/components/SwResetPassword.vue b/packages/default-theme/components/SwResetPassword.vue
index d0bc3e372..79420ab81 100644
--- a/packages/default-theme/components/SwResetPassword.vue
+++ b/packages/default-theme/components/SwResetPassword.vue
@@ -62,22 +62,22 @@ export default {
 
 .sw-reset-password {
   &__alert {
-    margin-bottom: $spacer-small;
+    margin-bottom: var(--spacer-small);
   }
   &__header {
-    margin-bottom: $spacer-big;
+    margin-bottom: var(--spacer-big);
   }
 }
 
 .form {
   &__input {
-    margin-bottom: $spacer-extra-big;
+    margin-bottom: var(--spacer-extra-big);
   }
   &__checkbox {
-    margin-bottom: $spacer-big;
+    margin-bottom: var(--spacer-big);
   }
   &__button {
-    margin-top: $spacer-big;
+    margin-top: var(--spacer-big);
   }
 }
 </style>
diff --git a/packages/default-theme/components/TopNavigation.vue b/packages/default-theme/components/TopNavigation.vue
index a4929d7ad..f0d244f71 100644
--- a/packages/default-theme/components/TopNavigation.vue
+++ b/packages/default-theme/components/TopNavigation.vue
@@ -1,74 +1,84 @@
 <template>
   <div class="top-navigation">
-    <slot v-bind="{ navigationElements, activeSidebar, activeIcon }">
-      <SfHeader title="Shopware PWA" active-sidebar="activeSidebar">
-        <template #logo>
-          <nuxt-link to="/" class="sf-header__logo">
-            <SfImage
-              src="/img/logo.svg"
-              alt="Shopware PWA"
-              class="sf-header__logo-image"
-            />
-          </nuxt-link>
-        </template>
-        <template #navigation>
-          <nuxt-link to="/">
-            <SfHeaderNavigationItem>Home</SfHeaderNavigationItem>
-          </nuxt-link>
-          <nuxt-link
-            v-for="{routeLabel, routePath } in routes"
-            :key="routePath"
-            :to="routePath"
-          >
-            <SfHeaderNavigationItem>{{ routeLabel }}</SfHeaderNavigationItem>
-          </nuxt-link>
-        </template>
+    <SfHeader
+      title="Shopware-PWA"
+      :has-mobile-search="false"
+      :is-sticky="false"
+      :cart-items-qty="count.toString()"
+    >
+      <template #logo>
+        <nuxt-link to="/" class="sf-header__logo">
+          <SfImage src="/img/logo.svg" alt="Shopware PWA" />
+        </nuxt-link>
+      </template>
 
-        <template #header-icons="{accountIcon, wishlistIcon, cartIcon}">
+      <template #search>
+        <div class="sf-search-bar"></div>
+      </template>
+
+      <template #navigation>
+        <SfHeaderNavigationItem
+          v-for="{ routeLabel, routePath } in routes"
+          :key="routeLabel"
+          class="sf-header__link"
+        >
+          <nuxt-link class="sf-header__link" :to="routePath">
+            <a
+              :style="{
+                display: 'flex',
+                alignItems: 'center',
+                height: '100%'
+              }"
+            >
+              {{ routeLabel }}
+            </a>
+          </nuxt-link>
+        </SfHeaderNavigationItem>
+      </template>
+      <template #header-icons="{accountIcon, cartIcon}">
+        <div class="sf-header__icons desktop-only">
           <div class="sf-header__icons">
             <SfCircleIcon
               v-if="accountIcon"
               :icon="accountIcon"
-              icon-size="20px"
-              icon-color="black"
-              class="sf-header__icon"
+              icon-size="1.25rem"
+              class="sf-header__circle-icon"
+              :class="{
+                'sf-header__circle-icon--is-active':
+                  activeIcon === 'account-icon'
+              }"
               role="button"
-              aria-label="account"
-              :aria-pressed="activeIcon === 'account' ? 'true' : 'false'"
+              aria-label="account-icon"
+              :aria-pressed="activeIcon === 'account-icon' ? 'true' : 'false'"
               :has-badge="isLoggedIn"
               @click="userIconClick"
             />
-            <div
-              class="top-navigation__header-icon header-icons__cart cart-icon"
-            >
-              <SfCircleIcon
-                v-if="cartIcon"
-                :icon="cartIcon"
-                icon-size="20px"
-                icon-color="black"
-                class="sf-header__icon"
-                :class="{ 'sf-header__icon--is-active': activeIcon === 'cart' }"
-                role="button"
-                aria-label="cart"
-                :aria-pressed="activeIcon === 'cart' ? 'true' : 'false'"
-                :has-badge="count > 0"
-                @click="toggleSidebar"
-              >
-                <template #badge>
-                  <SfBadge class="cart-icon__badge">{{ count }}</SfBadge>
-                </template>
-              </SfCircleIcon>
-            </div>
+            <SfCircleIcon
+              v-if="cartIcon"
+              :icon="cartIcon"
+              :has-badge="count > 0"
+              :badge-label="count.toString()"
+              icon-size="1.25rem"
+              class="sf-header__circle-icon"
+              :class="{
+                'sf-header__circle-icon--is-active':
+                  activeIcon === 'cart-icon'
+              }"
+              role="button"
+              aria-label="cart-icon"
+              :aria-pressed="activeIcon === 'cart-icon' ? 'true' : 'false'"
+              @click="toggleSidebar"
+            />
           </div>
-        </template>
-      </SfHeader>
-      <SwLoginModal :is-open="isModalOpen" @close="isModalOpen = false" />
-    </slot>
+        </div>
+      </template>
+    </SfHeader>
+    <SwLoginModal :is-open="isModalOpen" @close="isModalOpen = false" />
   </div>
 </template>
 
 <script>
-import { SfHeader, SfCircleIcon, SfBadge, SfImage } from '@storefront-ui/vue'
+import { SfHeader, SfCircleIcon, SfImage } from '@storefront-ui/vue'
 import {
   useUser,
   useCart,
@@ -76,11 +86,11 @@ import {
   useUserLoginModal,
   useNavigation
 } from '@shopware-pwa/composables'
-import SwLoginModal from './modals/SwLoginModal'
 import { PAGE_ACCOUNT } from '../helpers/pages'
+import SwLoginModal from './modals/SwLoginModal'
 
 export default {
-  components: { SfHeader, SfCircleIcon, SfBadge, SwLoginModal, SfImage },
+  components: { SfHeader, SfCircleIcon, SwLoginModal, SfImage },
   setup() {
     const { routes, fetchRoutes } = useNavigation()
     const { isLoggedIn, logout } = useUser()
@@ -107,10 +117,10 @@ export default {
     }
   },
   async mounted() {
-    await this.fetchRoutes({depth: 1})
+    await this.fetchRoutes({ depth: 1 })
   },
   methods: {
-    async userIconClick() {
+    userIconClick() {
       if (this.isLoggedIn) this.$router.push(PAGE_ACCOUNT)
       else this.toggleModal()
     }
@@ -120,49 +130,39 @@ export default {
 
 <style lang="scss">
 @import '~@storefront-ui/vue/styles.scss';
-@import '~@storefront-ui/shared/styles/helpers/visibility';
-
-@mixin for-desktop {
-  @media screen and (min-width: $desktop-min) {
-    @content;
-  }
-}
 
 .top-navigation {
   @include for-desktop {
+    margin-bottom: var(--spacer-medium);
+
     .sf-header {
       display: flex;
       justify-content: space-between;
-    }
-  }
 
-  .sf-search-bar {
-    display: none;
-  }
+      &__sticky-container {
+        width: 100%;
+      }
 
-  .cart-icon {
-    position: relative;
-    display: flex;
-
-    &__badge {
-      position: absolute;
-      bottom: 2.2em;
-      left: 2.8em;
-      font-size: 0.6em;
-      padding: 0.3em 0;
-      border-radius: 100%;
-      width: 2.2em;
-      min-height: 2.2em;
-    }
-  }
+      &__container {
+        @include for-desktop {
+          padding: 0px;
+        }
+      }
+
+      &__navigation {
+        flex: 1;
+      }
 
-  .sf-header__navigation {
-    flex: 1;
+      &__link {
+        display: flex;
+        align-items: center;
+        height: 100;
+      }
+    }
   }
 
-  .sf-header__logo-image {
-    height: 100%;
-    width: 100%;
+  .sf-search-bar {
+    display: none;
   }
 
   .sf-image img {
@@ -174,4 +174,8 @@ export default {
     visibility: hidden;
   }
 }
-</style>
+
+.sf-header__logo {
+  height: 2rem;
+}
+</style>
\ No newline at end of file
diff --git a/packages/default-theme/components/account/MyAddresses/Address.vue b/packages/default-theme/components/account/MyAddresses/Address.vue
index 4286ba966..39b73edfe 100644
--- a/packages/default-theme/components/account/MyAddresses/Address.vue
+++ b/packages/default-theme/components/account/MyAddresses/Address.vue
@@ -106,30 +106,19 @@ export default {
 
 <style lang="scss" scoped>
 @import '~@storefront-ui/vue/styles.scss';
-@import '~@storefront-ui/shared/styles/helpers/visibility';
-@mixin for-mobile {
-  @media screen and (max-width: $desktop-min) {
-    @content;
-  }
-}
-@mixin for-desktop {
-  @media screen and (min-width: $desktop-min) {
-    @content;
-  }
-}
-.shipping {
 
+.shipping {
   &:last-child {
-    border-bottom: 1px solid $c-light;
+    border-bottom: 1px solid var(--c-light);
   }
   &__content {
     flex: 1;
-    color: $c-text;
-    font-size: $font-size-small-mobile;
+    color: var(--c-text);
+    font-size: var(--font-size-small-mobile);
     font-weight: 300;
     line-height: 1.6;
     @include for-desktop {
-      font-size: $font-size-small-desktop;
+      font-size: var(--font-size-small-desktop);
     }
   }
   &__actions {
@@ -158,20 +147,20 @@ export default {
     }
   }
   &__button-mark {
-    background-color: $c-light;
-    color: $c-text-muted;
+    background-color: var(--c-light);
+    color: var(--c-text-muted);
     @include for-desktop {
-      margin-left: $spacer-big;
+      margin-left: var(--spacer-big);
     }
   }
   &__address {
-    margin: 0 0 $spacer-big 0;
+    margin: 0 0 var(--spacer-big) 0;
     &:last-child {
       margin: 0;
     }
   }
   &__client-name {
-    font-size: $font-size-regular-desktop;
+    font-size: var(--font-size-regular-desktop);
     font-weight: 500;
   }
 }
diff --git a/packages/default-theme/components/checkout/OrderReview.vue b/packages/default-theme/components/checkout/OrderReview.vue
index e32593a51..e1293d0c3 100644
--- a/packages/default-theme/components/checkout/OrderReview.vue
+++ b/packages/default-theme/components/checkout/OrderReview.vue
@@ -112,11 +112,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 @import '~@storefront-ui/vue/styles';
-@mixin for-desktop {
-  @media screen and (min-width: $desktop-min) {
-    @content;
-  }
-}
+
 
 #checkout {
   margin: none;
@@ -129,8 +125,8 @@ export default {
   box-sizing: border-box;
   width: 100%;
   background-color: #f1f2f3;
-  padding: $spacer-extra-big;
-  margin-bottom: $spacer-big;
+  padding: var(--spacer-extra-big);
+  margin-bottom: var(--spacer-big);
   &:last-child {
     margin-bottom: 0;
   }
@@ -141,21 +137,21 @@ export default {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: $spacer-big;
+    margin-bottom: var(--spacer-big);
   }
   &__title {
-    font-family: $body-font-family-primary;
-    font-size: $font-size-big-desktop;
+    font-family: var(--body-font-family-primary);
+    font-size: var(--font-size-big-desktop);
     line-height: 1.6;
   }
 }
 .title {
-  margin-bottom: $spacer-extra-big;
+  margin-bottom: var(--spacer-extra-big);
 }
 .content {
-  margin: 0 0 $spacer-big 0;
-  color: $c-text;
-  font-size: $font-size-extra-small-desktop;
+  margin: 0 0 var(--spacer-big) 0;
+  color: var(--c-text);
+  font-size: var(--font-size-extra-small-desktop);
   font-weight: 300;
   line-height: 1.6;
   &:last-child {
diff --git a/packages/default-theme/components/checkout/OrderSummary.vue b/packages/default-theme/components/checkout/OrderSummary.vue
index eb65224ab..f5c0a549c 100644
--- a/packages/default-theme/components/checkout/OrderSummary.vue
+++ b/packages/default-theme/components/checkout/OrderSummary.vue
@@ -170,17 +170,13 @@ export default {
 </script>
 <style lang="scss" scoped>
 @import '~@storefront-ui/vue/styles';
-@mixin for-desktop {
-  @media screen and (min-width: $desktop-min) {
-    @content;
-  }
-}
+
 .highlighted {
   box-sizing: border-box;
   width: 100%;
   background-color: #f1f2f3;
-  padding: $spacer-extra-big;
-  margin-bottom: $spacer-big;
+  padding: var(--spacer-extra-big);
+  margin-bottom: var(--spacer-big);
   &:last-child {
     margin-bottom: 0;
   }
@@ -189,26 +185,26 @@ export default {
   }
 }
 .title {
-  margin-bottom: $spacer-extra-big;
+  margin-bottom: var(--spacer-extra-big);
 }
 .total-items {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: $spacer-big;
+  margin-bottom: var(--spacer-big);
 }
 .property {
-  margin-bottom: $spacer;
+  margin-bottom: var(--spacer);
   ::v-deep .sf-property__name {
     text-transform: unset;
   }
 }
 .property-total {
-  margin-top: $spacer-extra-big;
-  font-size: $font-size-extra-big-desktop;
+  margin-top: var(--spacer-extra-big);
+  font-size: var(--font-size-extra-big-desktop);
   font-weight: 500;
   ::v-deep .sf-property__name {
-    color: $c-text;
+    color: var(--c-text);
   }
 }
 .collected-product-list {
@@ -216,46 +212,46 @@ export default {
 }
 .collected-product {
   &:not(:last-child) {
-    margin-bottom: $spacer-big;
+    margin-bottom: var(--spacer-big);
   }
 }
 .characteristic {
   &:not(:last-child) {
-    margin-bottom: $spacer-big;
+    margin-bottom: var(--spacer-big);
   }
 }
 .promo-code {
   &__button {
     padding: 0;
     background-color: transparent;
-    color: $c-primary;
-    font-size: $font-size-big-desktop;
+    color: var(--c-primary);
+    font-size: var(--font-size-big-desktop);
   }
   &__input {
-    margin: $spacer-big 0;
+    margin: var(--spacer-big) 0;
     ::v-deep input {
-      border-color: $c-gray-variant;
+      border-color: var(--c-gray-variant);
     }
   }
 }
 .product {
   &__properties {
-    margin: $spacer-big 0 0 0;
+    margin: var(--spacer-big) 0 0 0;
   }
   &__property,
   &__action {
-    font-size: $font-size-extra-small-desktop;
+    font-size: var(--font-size-extra-small-desktop);
   }
   &__action {
-    color: $c-gray-variant;
-    font-size: $font-size-extra-small-desktop;
-    margin: 0 0 $spacer-small 0;
+    color: var(--c-gray-variant);
+    font-size: var(--font-size-extra-small-desktop);
+    margin: 0 0 var(--spacer-small) 0;
     &:last-child {
       margin: 0;
     }
   }
   &__qty {
-    color: $c-text;
+    color: var(--c-text);
   }
 }
 </style>
diff --git a/packages/default-theme/components/checkout/Payment.vue b/packages/default-theme/components/checkout/Payment.vue
index 43b4f4352..9b6c35e1b 100644
--- a/packages/default-theme/components/checkout/Payment.vue
+++ b/packages/default-theme/components/checkout/Payment.vue
@@ -391,18 +391,9 @@ export default {
 </script>
 <style lang="scss" scoped>
 @import '~@storefront-ui/vue/styles';
-@mixin for-desktop {
-  @media screen and (min-width: $desktop-min) {
-    @content;
-  }
-}
-@mixin for-mobile {
-  @media screen and (max-width: $desktop-min) {
-    @content;
-  }
-}
+
 .title {
-  margin-bottom: $spacer-extra-big;
+  margin-bottom: var(--spacer-extra-big);
 }
 .form {
   @include for-desktop {
@@ -412,7 +403,7 @@ export default {
     align-items: center;
   }
   &__element {
-    margin-bottom: $spacer-extra-big;
+    margin-bottom: var(--spacer-extra-big);
     @include for-desktop {
       flex: 0 0 100%;
     }
@@ -422,7 +413,7 @@ export default {
       }
       &-even {
         @include for-desktop {
-          padding-left: $spacer-extra-big;
+          padding-left: var(--spacer-extra-big);
         }
       }
     }
@@ -436,7 +427,7 @@ export default {
   &__action-button {
     flex: 1;
     &--secondary {
-      margin: $spacer-big 0;
+      margin: var(--spacer-big) 0;
       @include for-desktop {
         order: -1;
         margin: 0;
@@ -466,13 +457,13 @@ export default {
 .payment-methods {
   @include for-desktop {
     display: flex;
-    padding: $spacer-big 0;
-    border-top: 1px solid $c-light;
-    border-bottom: 1px solid $c-light;
+    padding: var(--spacer-big) 0;
+    border-top: 1px solid var(--c-light);
+    border-bottom: 1px solid var(--c-light);
   }
 }
 .payment-method {
-  border-top: 1px solid $c-light;
+  border-top: 1px solid var(--c-light);
   @include for-mobile {
     background-color: transparent;
   }
@@ -481,7 +472,7 @@ export default {
     border-radius: 4px;
   }
   &:last-child {
-    border-bottom: 1px solid $c-light;
+    border-bottom: 1px solid var(--c-light);
     @include for-desktop {
       border-bottom: 0;
     }
@@ -492,13 +483,13 @@ export default {
         align-items: center;
       }
       &__content {
-        margin: 0 0 0 $spacer;
+        margin: 0 0 0 var(--spacer);
       }
     }
   }
 }
 .credit-card-form {
-  margin-bottom: $spacer-big;
+  margin-bottom: var(--spacer-big);
   @include for-desktop {
     flex: 0 0 66.666%;
     padding: 0 calc((100% - 66.666%) / 2);
@@ -507,7 +498,7 @@ export default {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin: 0 0 $spacer-big 0;
+    margin: 0 0 var(--spacer-big) 0;
   }
   &__label {
     flex: unset;
@@ -522,7 +513,7 @@ export default {
       flex: 0 0 46.666%;
     }
     & + & {
-      margin-left: $spacer-big;
+      margin-left: var(--spacer-big);
     }
   }
 }
diff --git a/packages/default-theme/components/checkout/PersonalDetails.vue b/packages/default-theme/components/checkout/PersonalDetails.vue
index 2f29bf37a..f6a2d800f 100644
--- a/packages/default-theme/components/checkout/PersonalDetails.vue
+++ b/packages/default-theme/components/checkout/PersonalDetails.vue
@@ -153,13 +153,9 @@ export default {
 </script>
 <style lang="scss" scoped>
 @import '~@storefront-ui/vue/styles';
-@mixin for-desktop {
-  @media screen and (min-width: $desktop-min) {
-    @content;
-  }
-}
+
 .title {
-  margin-bottom: $spacer-extra-big;
+  margin-bottom: var(--spacer-extra-big);
 }
 .form {
   @include for-desktop {
@@ -168,7 +164,7 @@ export default {
     align-items: center;
   }
   &__element {
-    margin-bottom: $spacer-extra-big;
+    margin-bottom: var(--spacer-extra-big);
     @include for-desktop {
       flex: 0 0 100%;
     }
@@ -178,7 +174,7 @@ export default {
       }
       &-even {
         @include for-desktop {
-          padding-left: $spacer-extra-big;
+          padding-left: var(--spacer-extra-big);
         }
       }
     }
@@ -196,7 +192,7 @@ export default {
   &__action-button {
     flex: 1;
     &--secondary {
-      margin: $spacer-big 0;
+      margin: var(--spacer-big) 0;
       @include for-desktop {
         margin: 0;
         text-align: right;
@@ -205,22 +201,22 @@ export default {
   }
 }
 .info {
-  margin-left: $spacer-big;
-  color: $c-text-muted;
+  margin-left: var(--spacer-big);
+  color: var(--c-text-muted);
   text-decoration: none;
 }
 .characteristic {
-  margin-bottom: $spacer-big;
+  margin-bottom: var(--spacer-big);
 }
 .modal {
   .modal {
     &__heading {
-      margin-bottom: $spacer-extra-big;
+      margin-bottom: var(--spacer-extra-big);
     }
   }
   &__button {
     display: block;
-    margin-top: $spacer-extra-big;
+    margin-top: var(--spacer-extra-big);
   }
 }
 </style>
diff --git a/packages/default-theme/components/checkout/ReviewOrder.vue b/packages/default-theme/components/checkout/ReviewOrder.vue
index e1046cd86..2bc654385 100644
--- a/packages/default-theme/components/checkout/ReviewOrder.vue
+++ b/packages/default-theme/components/checkout/ReviewOrder.vue
@@ -134,11 +134,11 @@ export default {
 @import '~@storefront-ui/vue/styles';
 
 .title {
-  margin-bottom: $spacer-extra-big;
+  margin-bottom: var(--spacer-extra-big);
 }
 
 .accordion {
-  margin: 0 0 $spacer-extra-big 0;
+  margin: 0 0 var(--spacer-extra-big) 0;
   &__item {
     display: flex;
     align-items: flex-start;
@@ -155,17 +155,17 @@ export default {
   cursor: pointer;
 }
 .property {
-  margin: 0 0 $spacer 0;
-  font-size: $font-size-small-desktop;
+  margin: 0 0 var(--spacer) 0;
+  font-size: var(--font-size-small-desktop);
   line-height: 1.6;
   &__name {
-    color: $c-text-muted;
+    color: var(--c-text-muted);
   }
 }
 .content {
-  margin: 0 0 $spacer-big 0;
-  color: $c-text;
-  font-size: $font-size-extra-small-desktop;
+  margin: 0 0 var(--spacer-big) 0;
+  color: var(--c-text);
+  font-size: var(--font-size-extra-small-desktop);
   font-weight: 300;
   line-height: 1.6;
   &:last-child {
@@ -182,16 +182,16 @@ export default {
 }
 
 .product-sku {
-  color: $c-text-muted;
-  font-size: $font-size-extra-small-desktop;
+  color: var(--c-text-muted);
+  font-size: var(--font-size-extra-small-desktop);
 }
 .product-price {
   display: flex;
   flex-direction: column;
-  font-size: $font-size-small-desktop;
+  font-size: var(--font-size-small-desktop);
   ::v-deep .sf-price__special {
     order: 1;
-    color: $c-text;
+    color: var(--c-text);
   }
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/packages/default-theme/components/checkout/ReviewOrder/OrderItemsTable.vue b/packages/default-theme/components/checkout/ReviewOrder/OrderItemsTable.vue
index e47c16630..ed2c3ca18 100644
--- a/packages/default-theme/components/checkout/ReviewOrder/OrderItemsTable.vue
+++ b/packages/default-theme/components/checkout/ReviewOrder/OrderItemsTable.vue
@@ -86,22 +86,18 @@ export default {
 </script>
 <style lang="scss" scoped>
 @import '~@storefront-ui/vue/styles';
-@mixin for-desktop {
-  @media screen and (min-width: $desktop-min) {
-    @content;
-  }
-}
+
 .table {
-  margin-bottom: $spacer-big;
+  margin-bottom: var(--spacer-big);
   &__header {
-    font-size: $font-size-regular-desktop;
-    font-weight: $body-font-weight-primary;
+    font-size: var(--font-size-regular-desktop);
+    font-weight: var(--body-font-weight-primary);
     @include for-desktop {
       text-align: center;
     }
   }
   &__data {
-    font-size: $font-size-small-desktop;
+    font-size: var(--font-size-small-desktop);
     text-align: center;
   }
   &__image {
diff --git a/packages/default-theme/components/checkout/ReviewOrder/Summary.vue b/packages/default-theme/components/checkout/ReviewOrder/Summary.vue
index 4a40e9b0b..e1e1a52c4 100644
--- a/packages/default-theme/components/checkout/ReviewOrder/Summary.vue
+++ b/packages/default-theme/components/checkout/ReviewOrder/Summary.vue
@@ -125,22 +125,18 @@ export default {
 </script>
 <style lang="scss" scoped>
 @import '~@storefront-ui/vue/styles';
-@mixin for-desktop {
-  @media screen and (min-width: $desktop-min) {
-    @content;
-  }
-}
+
 .summary {
-  background-color: $c-light;
-  margin: 0 -#{$spacer-big};
-  padding: $spacer-big;
+  background-color: var(--c-light);
+  margin: 0 calc(var(--spacer-big) * -1);
+  padding: var(--spacer-big);
   @include for-desktop {
     background-color: transparent;
   }
   &__group {
     @include for-desktop {
       display: flex;
-      margin: 20px 0 $spacer-extra-big 0;
+      margin: 20px 0 var(--spacer-extra-big) 0;
     }
     .notification {
       margin: auto;
@@ -149,11 +145,11 @@ export default {
   &__terms {
     flex: 1;
     order: -1;
-    margin-bottom: $spacer-big;
+    margin-bottom: var(--spacer-big);
   }
   &__total {
-    margin: 0 0 $spacer-extra-big 0;
-    padding: 0 $spacer-big;
+    margin: 0 0 var(--spacer-extra-big) 0;
+    padding: 0 var(--spacer-big);
     flex: 0 0 16.875rem;
     @include for-desktop {
       padding: 0;
@@ -162,7 +158,7 @@ export default {
   &__action-button {
     flex: 1;
     &--secondary {
-      margin: $spacer-big 0;
+      margin: var(--spacer-big) 0;
       @include for-desktop {
         order: -1;
         margin: 0;
@@ -171,9 +167,9 @@ export default {
     }
   }
   &__property-total {
-    margin: $spacer-big 0 0 0;
+    margin: var(--spacer-big) 0 0 0;
     text-transform: uppercase;
-    font-size: $font-size-regular-desktop;
+    font-size: var(--font-size-regular-desktop);
     line-height: 1.6;
     font-weight: 500;
   }
diff --git a/packages/default-theme/components/checkout/Shipping.vue b/packages/default-theme/components/checkout/Shipping.vue
index dc4f5be77..91725a9c9 100644
--- a/packages/default-theme/components/checkout/Shipping.vue
+++ b/packages/default-theme/components/checkout/Shipping.vue
@@ -262,13 +262,9 @@ export default {
 </script>
 <style lang="scss" scoped>
 @import '~@storefront-ui/vue/styles';
-@mixin for-desktop {
-  @media screen and (min-width: $desktop-min) {
-    @content;
-  }
-}
+
 .title {
-  margin-bottom: $spacer-extra-big;
+  margin-bottom: var(--spacer-extra-big);
 }
 .form {
   @include for-desktop {
@@ -277,7 +273,7 @@ export default {
     align-items: center;
   }
   &__element {
-    margin-bottom: $spacer-extra-big;
+    margin-bottom: var(--spacer-extra-big);
     @include for-desktop {
       flex: 0 0 100%;
     }
@@ -287,7 +283,7 @@ export default {
       }
       &-even {
         @include for-desktop {
-          padding-left: $spacer-extra-big;
+          padding-left: var(--spacer-extra-big);
         }
       }
     }
@@ -301,7 +297,7 @@ export default {
   &__action-button {
     flex: 1;
     &--secondary {
-      margin: $spacer-big 0;
+      margin: var(--spacer-big) 0;
       @include for-desktop {
         order: -1;
         margin: 0;
@@ -319,12 +315,12 @@ export default {
     margin-bottom: 0;
     &-group {
       flex: 0 0 100%;
-      margin: 0 0 $spacer-extra-big 0;
+      margin: 0 0 var(--spacer-extra-big) 0;
     }
   }
 }
 .shipping {
-  margin: 0 -#{$spacer-big};
+  margin: 0 calc(var(--spacer-big) * -1);
   &__label {
     display: flex;
     justify-content: space-between;
@@ -334,24 +330,24 @@ export default {
     margin-top: 0;
   }
   &__delivery {
-    color: $c-text-muted;
+    color: var(--c-text-muted);
   }
   &__action {
     align-items: center;
-    margin-left: $spacer;
+    margin-left: var(--spacer);
     text-decoration: none;
     &::before {
       content: '+';
     }
     &--is-active {
-      color: $c-primary;
+      color: var(--c-primary);
       &::before {
         content: '-';
       }
     }
   }
   &__info {
-    margin-top: $spacer;
+    margin-top: var(--spacer);
   }
 }
 </style>
diff --git a/packages/default-theme/components/cms/elements/SwCategoryNavigationSlot.vue b/packages/default-theme/components/cms/elements/SwCategoryNavigationSlot.vue
index 8e749f096..7a5f3536d 100644
--- a/packages/default-theme/components/cms/elements/SwCategoryNavigationSlot.vue
+++ b/packages/default-theme/components/cms/elements/SwCategoryNavigationSlot.vue
@@ -4,7 +4,7 @@
       <h1 class="sw-category-navigation__title">{{ navTitle }}</h1>
     </div>
     <div class="sw-category-navigation__menu">
-      <SfHeading subtitle="No subcategories" v-if="!navigation.length"/>
+      <SfHeading subtitle="No subcategories" v-if="!navigation.length" />
       <SfAccordion :show-chevron="true">
         <SfAccordionItem
           v-for="accordion in navigation"
@@ -28,7 +28,7 @@
               v-if="accordion.route && accordion.name"
               :to="getCategoryUrl(accordion.route)"
             >
-            See {{ accordion.name }}
+              See {{ accordion.name }}
             </nuxt-link>
           </template>
         </SfAccordionItem>
@@ -89,30 +89,24 @@ export default {
 <style lang="scss" scoped>
 @import '~@storefront-ui/vue/styles.scss';
 
-@mixin for-desktop {
-  @media screen and (min-width: $desktop-min) {
-    @content;
-  }
-}
-
 .sw-category-navigation {
   margin: 0 0 20px 20px !important;
   &__header {
     flex: 0 0 15%;
     align-items: center;
     display: flex;
-    height: 3.56rem;
+    height: 3.22rem;
     padding-top: 20px;
     @include for-desktop {
       padding: 20px;
-      border-top: 1px solid $c-light;
-      border-bottom: 1px solid $c-light;
+      border-top: 1px solid var(--c-light);
+      border-bottom: 1px solid var(--c-light);
     }
   }
 
   &__title {
     padding: 0;
-    font-size: $font-size-big-desktop;
+    font-size: var(--font-size-big-desktop);
   }
 
   &__menu {
@@ -128,8 +122,8 @@ export default {
       display: flex;
       align-items: center;
       flex: 0 0 15%;
-      padding: $spacer-big $spacer-extra-big;
-      border-right: 1px solid $c-light;
+      padding: var(--spacer-big) var(--spacer-extra-big);
+      border-right: 1px solid var(--c-light);
     }
   }
 }
diff --git a/packages/default-theme/components/cms/elements/SwCategorySidebarFilter.vue b/packages/default-theme/components/cms/elements/SwCategorySidebarFilter.vue
index 7fec7a96f..5ed1e11e7 100644
--- a/packages/default-theme/components/cms/elements/SwCategorySidebarFilter.vue
+++ b/packages/default-theme/components/cms/elements/SwCategorySidebarFilter.vue
@@ -36,14 +36,14 @@
       </SfButton>
       <div class="navbar__sort desktop-only">
         <span class="navbar__label">Sort by:</span>
-        <SfSelect :size="sorting.length" v-model="sortBy" class="sort-by">
-          <SfSelectOption 
+        <SfSelect v-model="sortBy" :size="sorting.length" class="sort-by">
+          <SfSelectOption
             v-for="(option, key) in sorting"
             :key="key"
             :value="option"
             class="sort-by__option"
           >
-            {{getSortLabel(option)}}
+            {{ getSortLabel(option) }}
           </SfSelectOption>
         </SfSelect>
       </div>
@@ -55,17 +55,18 @@
       </div>
 
       <SfSelect v-model="sortBy" class="sort-by sort-by--mobile mobile-only">
-        <SfSelectOption 
+        <SfSelectOption
           v-for="(option, key) in sorting"
           :key="key"
           :value="option"
           class="sort-by__option"
         >
-          {{getSortLabel(option)}}
+          {{ getSortLabel(option) }}
         </SfSelectOption>
       </SfSelect>
 
       <SfSidebar
+        title="Filters"
         :visible="isFilterSidebarOpen"
         @close="isFilterSidebarOpen = false"
       >
@@ -79,17 +80,26 @@
                 :label="option.label"
                 :count="option.count"
                 :color="option.color ? option.color : null"
-                :selected="selectedFilters[filter.name] && !!selectedFilters[filter.name].find((propertyId) => propertyId === option.value)"
-                @change.native="toggleFilter({type: 'equals', value: option.value, field: filter.name})"
+                :selected="
+                  selectedFilters[filter.name] &&
+                    !!selectedFilters[filter.name].find(
+                      propertyId => propertyId === option.value
+                    )
+                "
                 class="filters__item"
+                @change.native="
+                  toggleFilter({
+                    type: 'equals',
+                    value: option.value,
+                    field: filter.name
+                  })
+                "
               />
             </div>
           </div>
 
           <div class="filters__buttons">
-            <SfButton
-              class="sf-button--full-width"
-              @click="submitFilters()"
+            <SfButton class="sf-button--full-width" @click="submitFilters()"
               >Done</SfButton
             >
             <SfButton
@@ -113,10 +123,12 @@ import {
   SfSidebar,
   SfProductOption
 } from '@storefront-ui/vue'
-import { useCategoryFilters, useProductListing } from '@shopware-pwa/composables'
-const { availableFilters, availableSorting } = useCategoryFilters()
+import {
+  useCategoryFilters,
+  useProductListing
+} from '@shopware-pwa/composables'
 import { getSortingLabel } from '@shopware-pwa/helpers'
-
+const { availableFilters, availableSorting } = useCategoryFilters()
 
 export default {
   components: {
@@ -133,10 +145,26 @@ export default {
       default: () => ({})
     }
   },
-  setup () {
-    const { toggleFilter, changeSorting, selectedSorting, search, selectedFilters, resetFilters, productsTotal } = useProductListing()
+  setup() {
+    const {
+      toggleFilter,
+      changeSorting,
+      selectedSorting,
+      search,
+      selectedFilters,
+      resetFilters,
+      productsTotal
+    } = useProductListing()
 
-    return { toggleFilter, changeSorting, selectedSorting, search, selectedFilters, resetFilters, productsTotal }
+    return {
+      toggleFilter,
+      changeSorting,
+      selectedSorting,
+      search,
+      selectedFilters,
+      resetFilters,
+      productsTotal
+    }
   },
   data() {
     return {
@@ -144,14 +172,6 @@ export default {
       sortBy: this.selectedSorting
     }
   },
-  watch: {
-    sortBy(newSorting, oldOne){
-      // prevent reloading on default sorting
-      if (oldOne.name !== newSorting.name) {
-        this.changeSorting(newSorting)
-      }
-    }
-  },
   computed: {
     filters() {
       return (availableFilters && availableFilters.value) || []
@@ -175,6 +195,14 @@ export default {
       return true
     }
   },
+  watch: {
+    sortBy(newSorting, oldOne) {
+      // prevent reloading on default sorting
+      if (oldOne.name !== newSorting.name) {
+        this.changeSorting(newSorting)
+      }
+    }
+  },
   methods: {
     async clearAllFilters() {
       this.resetFilters()
@@ -193,28 +221,24 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "~@storefront-ui/vue/styles";
-@mixin for-desktop {
-  @media screen and (min-width: $desktop-min) {
-    @content;
-  }
-}
+@import '~@storefront-ui/vue/styles';
+
 .navbar {
   position: relative;
   display: flex;
   @include for-desktop {
     margin: 20px 20px 20px 0px !important;
-    border-top: 1px solid $c-light;
-    border-bottom: 1px solid $c-light;
+    border-top: 1px solid var(--c-light);
+    border-bottom: 1px solid var(--c-light);
   }
   &::after {
     position: absolute;
     bottom: 0;
-    left: $spacer-big;
-    width: calc(100% - (#{$spacer-big} * 2));
+    left: var(--spacer-big);
+    width: calc(100% - (var(--spacer-big) * -2));
     height: 1px;
-    background-color: $c-light;
-    content: "";
+    background-color: var(--c-light);
+    content: '';
     @include for-desktop {
       content: none;
     }
@@ -223,22 +247,22 @@ export default {
     display: flex;
     align-items: center;
     flex: 0 0 15%;
-    padding: $spacer-big $spacer-extra-big;
-    border-right: 1px solid $c-light;
+    padding: var(--spacer-big) var(--spacer-extra-big);
+    border-right: 1px solid var(--c-light);
   }
   &__main {
     flex: 1;
     display: flex;
     align-items: center;
-    padding: $spacer-medium 0;
-    font-size: $font-size-small-desktop;
+    padding: var(--spacer-medium) 0;
+    font-size: var(--font-size-small-desktop);
     @include for-desktop {
-      padding: $spacer-big 0;
+      padding: var(--spacer-big) 0;
     }
   }
   &__title {
     padding: 0;
-    font-size: $font-size-big-desktop;
+    font-size: var(--font-size-big-desktop);
     line-height: 2.23;
   }
   &__filters-button {
@@ -251,30 +275,30 @@ export default {
     font-size: inherit;
     font-weight: 500;
     @include for-desktop {
-      margin: 0 0 0 $spacer-extra-big;
+      margin: 0 0 0 var(--spacer-extra-big);
       font-weight: 400;
       text-transform: none;
     }
     svg {
-      fill: $c-dark;
+      fill: var(--c-dark);
       @include for-desktop {
-        fill: $c-gray-variant;
+        fill: var(--c-gray-variant);
       }
     }
     &:hover {
-      color: $c-primary;
+      color: var(--c-primary);
       svg {
-        fill: $c-primary;
+        fill: var(--c-primary);
       }
     }
   }
   &__label {
-    color: $c-gray-variant;
+    color: var(--c-gray-variant);
   }
   &__sort {
     display: flex;
     align-items: center;
-    margin-left: $spacer-extra-big;
+    margin-left: var(--spacer-extra-big);
     margin-right: auto;
   }
   &__counter {
@@ -286,7 +310,7 @@ export default {
   &__view {
     display: flex;
     align-items: center;
-    margin: 0 $spacer-extra-big;
+    margin: 0 var(--spacer-extra-big);
     &-icon {
       margin-left: 10px;
     }
@@ -294,8 +318,8 @@ export default {
 }
 
 .section {
-  padding-left: $spacer-big;
-  padding-right: $spacer-big;
+  padding-left: var(--spacer-big);
+  padding-right: var(--spacer-big);
   @include for-desktop {
     padding-left: 0;
     padding-right: 0;
@@ -303,7 +327,6 @@ export default {
 }
 .sort-by {
   flex: unset;
-  z-index: 2;
   width: 190px;
   padding: 0 10px;
   font-size: inherit;
@@ -319,32 +342,29 @@ export default {
 }
 
 .filters {
-  padding: $spacer-big;
+  padding: var(--spacer-big);
   &__title {
-    margin: $spacer-big * 3 0 $spacer-big;
-    font-size: $font-size-big-desktop;
+    margin: calc(var(--spacer-big) * 3) 0 var(--spacer-big);
+    font-size: var(--font-size-big-desktop);
     line-height: 1.6;
     &:first-child {
-      margin: 0 0 $spacer-big 0;
+      margin: 0 0 var(--spacer-big) 0;
     }
   }
   &__item {
-    padding: $spacer-small 0;
+    padding: var(--spacer-small) 0;
     &--color {
-      margin: 0 $spacer;
+      margin: 0 var(--spacer);
     }
   }
   &__buttons {
-    margin: $spacer-big * 3 0 0 0;
+    margin: calc(var(--spacer-big) * 3) 0 0 0;
   }
   &__button-clear {
     color: #a3a5ad;
     margin-top: 10px;
-    background-color: $c-light;
+    background-color: var(--c-light);
   }
 }
 
-::v-deep .sf-sidebar {
-  z-index: 4;
-}
-</style>
\ No newline at end of file
+</style>
diff --git a/packages/default-theme/components/cms/elements/SwFooter.vue b/packages/default-theme/components/cms/elements/SwFooter.vue
index f6b84630d..59a0bdcc3 100644
--- a/packages/default-theme/components/cms/elements/SwFooter.vue
+++ b/packages/default-theme/components/cms/elements/SwFooter.vue
@@ -27,11 +27,7 @@ export default {
 
 <style lang="scss">
 @import "~@storefront-ui/vue/styles.scss";
-@mixin for-desktop {
-  @media screen and (min-width: $desktop-min) {
-    @content;
-  }
-}
+
 
 .sw-footer{
   width: 100%;
diff --git a/packages/default-theme/components/cms/elements/SwProductListingSlot.vue b/packages/default-theme/components/cms/elements/SwProductListingSlot.vue
index b21c8405c..c47cc64e4 100644
--- a/packages/default-theme/components/cms/elements/SwProductListingSlot.vue
+++ b/packages/default-theme/components/cms/elements/SwProductListingSlot.vue
@@ -70,7 +70,6 @@ export default {
 
 <style lang="scss" scoped>
 @import '~@storefront-ui/vue/styles.scss';
-@import '~@storefront-ui/shared/styles/helpers/visibility';
 
 // additional screen variables
 $desktop-big: 1200px;
@@ -147,37 +146,37 @@ $col-prod-1: 1 0 $mx-photo-wth-1;
 
   ::v-deep &__product-card {
     flex: 1 0 50%;
-    padding: $spacer;
+    padding: var(--spacer);
 
     @include for-phone {
       flex: $col-prod-3;
-      padding: $spacer;
+      padding: var(--spacer);
     }
 
     @include for-tablet-small {
       flex: $col-prod-3;
-      padding: $spacer;
+      padding: var(--spacer);
     }
 
     @include for-tablet {
       flex: $col-prod-4;
-      padding: $spacer;
+      padding: var(--spacer);
     }
 
     @include for-desktop-small {
       flex: $col-prod-4;
-      padding: $spacer;
+      padding: var(--spacer);
     }
 
 
     @include for-desktop {
       flex: $col-prod-4;
-      padding: $spacer;
+      padding: var(--spacer);
     }
 
     @include for-desktop-big {
       flex: $col-prod-5;
-      padding: $spacer-big;
+      padding: var(--spacer-big);
     }
   }
  
@@ -185,15 +184,15 @@ $col-prod-1: 1 0 $mx-photo-wth-1;
     @include for-desktop-small {
       display: flex;
       justify-content: center;
-      margin-top: $spacer-big;
+      margin-top: var(--spacer-big);
     }
   }
 }
 
 .section {
   @media (max-width: $desktop-min) {
-    padding-left: $spacer-big;
-    padding-right: $spacer-big;
+    padding-left: var(--spacer-big);
+    padding-right: var(--spacer-big);
   }
 }
 
diff --git a/packages/default-theme/components/cms/elements/SwSlots.vue b/packages/default-theme/components/cms/elements/SwSlots.vue
index cf8fe4e8b..11f058dea 100644
--- a/packages/default-theme/components/cms/elements/SwSlots.vue
+++ b/packages/default-theme/components/cms/elements/SwSlots.vue
@@ -78,18 +78,14 @@ export default {
 <style lang="scss">
 @import '~@storefront-ui/vue/styles.scss';
 
-@mixin for-desktop {
-  @media screen and (min-width: $desktop-min) {
-    @content;
-  }
-}
+
 
 .sw-blocks {
   &:nth-child(2) > div:nth-child(1) {
     @include for-desktop() {
       min-height: 50vh;
       margin-top: 20px;
-      border-right: 1px solid $c-light;
+      border-right: 1px solid var(--c-light);
     }
   }
 }
diff --git a/packages/default-theme/components/cms/elements/SwTextSlot.vue b/packages/default-theme/components/cms/elements/SwTextSlot.vue
index d7b6b2da3..52918f7d0 100644
--- a/packages/default-theme/components/cms/elements/SwTextSlot.vue
+++ b/packages/default-theme/components/cms/elements/SwTextSlot.vue
@@ -36,6 +36,6 @@ export default {
 <style lang="scss" scoped>
 @import "~@storefront-ui/vue/styles.scss";
 .sw-text {
-  padding: $spacer-big $spacer-extra-big $spacer-extra-big;
+  padding: var(--spacer-big) var(--spacer-extra-big) var(--spacer-extra-big);
 }
 </style>
diff --git a/packages/default-theme/components/forms/SwAddress.vue b/packages/default-theme/components/forms/SwAddress.vue
index 1d41b4116..efcb7636b 100644
--- a/packages/default-theme/components/forms/SwAddress.vue
+++ b/packages/default-theme/components/forms/SwAddress.vue
@@ -279,16 +279,7 @@ export default {
 
 <style lang="scss" scoped>
 @import '~@storefront-ui/vue/styles';
-@mixin for-mobile {
-  @media screen and (max-width: $desktop-min) {
-    @content;
-  }
-}
-@mixin for-desktop {
-  @media screen and (min-width: $desktop-min) {
-    @content;
-  }
-}
+
 .form {
   @include for-desktop {
     display: flex;
@@ -296,7 +287,7 @@ export default {
     align-items: center;
   }
   &__element {
-    margin-bottom: $spacer-extra-big;
+    margin-bottom: var(--spacer-extra-big);
     @include for-desktop {
       flex: 0 0 100%;
     }
@@ -306,7 +297,7 @@ export default {
       }
       &-even {
         @include for-desktop {
-          padding-left: $spacer-extra-big;
+          padding-left: var(--spacer-extra-big);
         }
       }
     }
@@ -322,7 +313,7 @@ export default {
       width: auto;
     }
     &--back {
-      margin-left: $spacer-big;
+      margin-left: var(--spacer-big);
     }
   }
 }
diff --git a/packages/default-theme/components/forms/SwEmail.vue b/packages/default-theme/components/forms/SwEmail.vue
index 8bb107a67..bc198693a 100644
--- a/packages/default-theme/components/forms/SwEmail.vue
+++ b/packages/default-theme/components/forms/SwEmail.vue
@@ -118,12 +118,7 @@ export default {
 
 <style lang="scss" scoped>
 @import '~@storefront-ui/vue/styles.scss';
-@import '~@storefront-ui/shared/styles/helpers/visibility';
-@mixin for-desktop {
-  @media screen and (min-width: $desktop-min) {
-    @content;
-  }
-}
+
 .form {
   @include for-desktop {
     display: flex;
@@ -131,7 +126,7 @@ export default {
     align-items: center;
   }
   &__element {
-    margin-bottom: $spacer-extra-big;
+    margin-bottom: var(--spacer-extra-big);
     @include for-desktop {
       flex: 0 0 100%;
     }
@@ -141,7 +136,7 @@ export default {
       }
       &-even {
         @include for-desktop {
-          padding-left: $spacer-extra-big;
+          padding-left: var(--spacer-extra-big);
         }
       }
     }
@@ -156,11 +151,11 @@ export default {
 
 .message {
   line-height: 1.6;
-  font-family: $body-font-family-primary;
-  margin: 0 0 $spacer-extra-big 0;
-  font-size: $font-size-regular-mobile;
+  font-family: var(--body-font-family-primary);
+  margin: 0 0 var(--spacer-extra-big) 0;
+  font-size: var(--font-size-regular-mobile);
   @include for-desktop {
-    font-size: $font-size-regular-desktop;
+    font-size: var(--font-size-regular-desktop);
   }
   &__label {
     font-weight: 400;
diff --git a/packages/default-theme/components/forms/SwPassword.vue b/packages/default-theme/components/forms/SwPassword.vue
index 1c9d62423..b4f398a70 100644
--- a/packages/default-theme/components/forms/SwPassword.vue
+++ b/packages/default-theme/components/forms/SwPassword.vue
@@ -122,12 +122,7 @@ export default {
 
 <style lang="scss" scoped>
 @import '~@storefront-ui/vue/styles.scss';
-@import '~@storefront-ui/shared/styles/helpers/visibility';
-@mixin for-desktop {
-  @media screen and (min-width: $desktop-min) {
-    @content;
-  }
-}
+
 .form {
   @include for-desktop {
     display: flex;
@@ -135,7 +130,7 @@ export default {
     align-items: center;
   }
   &__element {
-    margin-bottom: $spacer-extra-big;
+    margin-bottom: var(--spacer-extra-big);
     @include for-desktop {
       flex: 0 0 100%;
     }
@@ -145,7 +140,7 @@ export default {
       }
       &-even {
         @include for-desktop {
-          padding-left: $spacer-extra-big;
+          padding-left: var(--spacer-extra-big);
         }
       }
     }
@@ -160,12 +155,12 @@ export default {
 
 .message {
   line-height: 1.6;
-  font-weight: $body-font-weight-primary;
-  font-family: $body-font-family-primary;
-  margin: 0 0 $spacer-extra-big 0;
-  font-size: $font-size-regular-mobile;
+  font-weight: var(--body-font-weight-primary);
+  font-family: var(--body-font-family-primary);
+  margin: 0 0 var(--spacer-extra-big) 0;
+  font-size: var(--font-size-regular-mobile);
   @include for-desktop {
-    font-size: $font-size-regular-desktop;
+    font-size: var(--font-size-regular-desktop);
   }
   &__label {
     font-weight: 400;
diff --git a/packages/default-theme/components/forms/SwPersonalInfo.vue b/packages/default-theme/components/forms/SwPersonalInfo.vue
index 1fb118c7b..6863ce198 100644
--- a/packages/default-theme/components/forms/SwPersonalInfo.vue
+++ b/packages/default-theme/components/forms/SwPersonalInfo.vue
@@ -180,12 +180,7 @@ export default {
 
 <style lang="scss" scoped>
 @import '~@storefront-ui/vue/styles.scss';
-@import '~@storefront-ui/shared/styles/helpers/visibility';
-@mixin for-desktop {
-  @media screen and (min-width: $desktop-min) {
-    @content;
-  }
-}
+
 .form {
   @include for-desktop {
     display: flex;
@@ -193,7 +188,7 @@ export default {
     align-items: center;
   }
   &__element {
-    margin-bottom: $spacer-extra-big;
+    margin-bottom: var(--spacer-extra-big);
     @include for-desktop {
       flex: 0 0 100%;
     }
@@ -203,7 +198,7 @@ export default {
       }
       &-even {
         @include for-desktop {
-          padding-left: $spacer-extra-big;
+          padding-left: var(--spacer-extra-big);
         }
       }
     }
@@ -223,11 +218,11 @@ export default {
 
 .message {
   line-height: 1.6;
-  font-family: $body-font-family-primary;
-  margin: 0 0 $spacer-extra-big 0;
-  font-size: $font-size-regular-mobile;
+  font-family: var(--body-font-family-primary);
+  margin: 0 0 var(--spacer-extra-big) 0;
+  font-size: var(--font-size-regular-mobile);
   @include for-desktop {
-    font-size: $font-size-regular-desktop;
+    font-size: var(--font-size-regular-desktop);
   }
   &__label {
     font-weight: 400;
diff --git a/packages/default-theme/components/modals/SwLoginModal.vue b/packages/default-theme/components/modals/SwLoginModal.vue
index ad33de126..042091978 100644
--- a/packages/default-theme/components/modals/SwLoginModal.vue
+++ b/packages/default-theme/components/modals/SwLoginModal.vue
@@ -107,13 +107,8 @@ export default {
 
 <style lang="scss" scoped>
 @import '~@storefront-ui/vue/styles.scss';
-@import '~@storefront-ui/shared/styles/helpers/visibility';
 
-@mixin for-desktop {
-  @media screen and (min-width: $desktop-min) {
-    @content;
-  }
-}
+
 
 #sw-login-modal {
   box-sizing: border-box;
@@ -131,45 +126,37 @@ export default {
 
 .form {
   &__input {
-    margin-bottom: $spacer-medium;
+    margin-bottom: var(--spacer-medium);
     &--email {
-      margin-bottom: $spacer-medium;
+      margin-bottom: var(--spacer-medium);
     }
   }
   &__checkbox {
-    margin-bottom: $spacer-big;
+    margin-bottom: var(--spacer-big);
   }
   &__button {
-    margin-top: $spacer-big;
+    margin-top: var(--spacer-big);
   }
 }
 
 .action {
-  margin-top: $spacer-big;
+  margin-top: var(--spacer-big);
   text-align: center;
 }
 
 .bottom {
-  padding-top: $spacer-extra-big;
-  margin-top: $spacer-extra-big;
-  border-top: 1px solid $c-light;
+  padding-top: var(--spacer-extra-big);
+  margin-top: var(--spacer-extra-big);
+  border-top: 1px solid var(--c-light);
   line-height: 1.6;
   text-align: center;
 }
 
 .sf-button--muted {
-  color: $c-text-muted;
+  color: var(--c-text-muted);
 }
 
 .salutation {
   width: 8vw;
 }
-
-::v-deep .sf-overlay {
-  z-index: 4;
-}
-
-::v-deep .sf-modal__container {
-  z-index: 4;
-}
 </style>
\ No newline at end of file
diff --git a/packages/default-theme/components/views/ProductView.vue b/packages/default-theme/components/views/ProductView.vue
index b68d8e2b0..9c141f65e 100644
--- a/packages/default-theme/components/views/ProductView.vue
+++ b/packages/default-theme/components/views/ProductView.vue
@@ -14,38 +14,36 @@
         <SwProductCarousel />
       </div>
     </div>
-    <div class="">
-      <SfSection
-        title-heading="Share Your Look"
-        subtitle-heading="#YOURLOOK"
-        class="section"
-      >
-        <div class="images-grid">
-          <div class="images-grid__row">
-            <div class="images-grid__col">
-              <SfImage src="/img/imageA.png">katherina_trn</SfImage>
-            </div>
-            <div class="images-grid__col">
-              <SfImage src="/img/imageB.png">katherina_trn</SfImage>
-            </div>
-            <div class="images-grid__col">
-              <SfImage src="/img/imageC.png">katherina_trn</SfImage>
-            </div>
+    <SfSection
+      title-heading="Share Your Look"
+      subtitle-heading="#YOURLOOK"
+      class="section"
+    >
+      <div class="images-grid">
+        <div class="images-grid__row">
+          <div class="images-grid__col">
+            <SfImage src="/img/imageA.png">katherina_trn</SfImage>
           </div>
-          <div class="images-grid__row">
-            <div class="images-grid__col">
-              <SfImage src="/img/imageC.png">katherina_trn</SfImage>
-            </div>
-            <div class="images-grid__col">
-              <SfImage src="/img/imageD.png">katherina_trn</SfImage>
-            </div>
-            <div class="images-grid__col">
-              <SfImage src="/img/imageA.png">katherina_trn</SfImage>
-            </div>
+          <div class="images-grid__col">
+            <SfImage src="/img/imageB.png">katherina_trn</SfImage>
+          </div>
+          <div class="images-grid__col">
+            <SfImage src="/img/imageC.png">katherina_trn</SfImage>
           </div>
         </div>
-      </SfSection>
-    </div>
+        <div class="images-grid__row">
+          <div class="images-grid__col">
+            <SfImage src="/img/imageC.png">katherina_trn</SfImage>
+          </div>
+          <div class="images-grid__col">
+            <SfImage src="/img/imageD.png">katherina_trn</SfImage>
+          </div>
+          <div class="images-grid__col">
+            <SfImage src="/img/imageA.png">katherina_trn</SfImage>
+          </div>
+        </div>
+      </div>
+    </SfSection>
     <div class="product__advertisement">
       <SwProductAdvertisement />
     </div>
@@ -86,7 +84,9 @@ export default {
   },
   computed: {
     product() {
-      return this.productWithAssociations ? this.productWithAssociations.value : this.page.product
+      return this.productWithAssociations
+        ? this.productWithAssociations.value
+        : this.page.product
     }
   },
   async mounted() {
@@ -98,26 +98,18 @@ export default {
       'associations[productReviews][]': true, // can be fetched asynchronously
       'associations[manufacturer][]': true,
       'associations[children][associations][options][associations][group][]': true,
-      "associations[children][associations][seoUrls][]": true,
+      'associations[children][associations][seoUrls][]': true
     }
 
     const { loadAssociations, product } = useProduct(this.page.product)
     this.productWithAssociations = product
     loadAssociations(associations)
-    
   }
 }
 </script>
 <style lang="scss" scoped>
-@import '~@storefront-ui/shared/styles/variables';
-@import '~@storefront-ui/shared/styles/helpers/visibility';
-@import '~@storefront-ui/vue/src/utilities/transitions/transitions.scss';
+@import '~@storefront-ui/vue/styles';
 
-@mixin for-desktop {
-  @media screen and (min-width: $desktop-min) {
-    @content;
-  }
-}
 @mixin for-iOS {
   @supports (-webkit-overflow-scrolling: touch) {
     @content;
@@ -126,13 +118,19 @@ export default {
 
 #product {
   box-sizing: border-box;
-  margin: 0 0 60px 0;
   @include for-desktop {
     max-width: 1240px;
     margin: auto;
   }
 }
 
+.section {
+  padding: 0 var(--spacer-big);
+  @include for-desktop {
+    padding: 0;
+  }
+}
+
 .product {
   @include for-desktop {
     display: flex;
@@ -142,33 +140,29 @@ export default {
     flex: 1;
   }
   &__description {
-    padding: 0 $spacer-big;
+    padding: 0 var(--spacer-big);
     @include for-desktop {
-      margin-left: $spacer-big * 5;
+      margin-left: calc(var(--spacer-big) * 5);
     }
   }
 }
 
-.product-details {
-  z-index: 0;
-}
-
 .images-grid {
   &__row {
     display: flex;
     & + & {
-      margin-top: $spacer-big / 2;
+      margin-top: calc(var(--spacer-big) / 2);
       @include for-desktop {
-        margin-top: $spacer-big;
+        margin-top: var(--spacer-big);
       }
     }
   }
   &__col {
     margin: 0;
     & + & {
-      margin-left: $spacer-big / 2;
+      margin-left: calc(var(--spacer-big) / 2);
       @include for-desktop {
-        margin-left: $spacer-big;
+        margin-left: var(--spacer-big);
       }
     }
   }
@@ -182,9 +176,9 @@ export default {
     flex: 1;
   }
   &__description {
-    padding: 0 $spacer-big;
+    padding: 0 var(--spacer-big);
     @include for-desktop {
-      margin-left: $spacer-big * 5;
+      margin-left: calc(var(--spacer-big) * 5);
     }
   }
 }
diff --git a/packages/default-theme/layouts/default.vue b/packages/default-theme/layouts/default.vue
index 534b91b5b..4499a6642 100644
--- a/packages/default-theme/layouts/default.vue
+++ b/packages/default-theme/layouts/default.vue
@@ -4,11 +4,12 @@
     <SfBreadcrumbs
       v-show="getBreadcrumbs.length > 0"
       :breadcrumbs="getBreadcrumbs"
-      v-on:click="redirectTo"
-      class="sw-breadcrumbs"/>
+      class="sw-breadcrumbs"
+      @click="redirectTo"
+    />
     <nuxt />
     <SwCart />
-    <SwBottomNavigation class="layout__bottom-navigation"/>
+    <SwBottomNavigation class="layout__bottom-navigation" />
     <SwFooter />
   </div>
 </template>
@@ -32,24 +33,25 @@ export default {
     componentBreadcrumbs() {
       // TODO probably move to vuex now as it's not rendered on server side
       return (
-        this.$route.matched.map((r) => {
+        this.$route.matched.map(r => {
           return r.components.default.options.data().breadcrumbs
         })[0] || {}
       )
     },
-    getBreadcrumbs () {
-      return Object.keys(this.componentBreadcrumbs).map(key => this.componentBreadcrumbs[key]).map(breadcrumb => ({
-        text: breadcrumb.name,
-        route: {
-          link: breadcrumb.path
-        }
-      }))
-    },
-    
+    getBreadcrumbs() {
+      return Object.keys(this.componentBreadcrumbs)
+        .map(key => this.componentBreadcrumbs[key])
+        .map(breadcrumb => ({
+          text: breadcrumb.name,
+          route: {
+            link: breadcrumb.path
+          }
+        }))
+    }
   },
   methods: {
     redirectTo(route) {
-      return this.$router.push(route.link);
+      return this.$router.push(route.link)
     }
   }
 }
@@ -57,23 +59,71 @@ export default {
 
 <style lang="scss">
 @import '~@storefront-ui/vue/styles';
-@import '~@storefront-ui/shared/styles/helpers/visibility';
-@import '~@storefront-ui/vue/src/utilities/transitions/transitions';
 
-@mixin for-desktop {
-  @media screen and (min-width: $desktop-min) {
-    @content;
-  }
-}
 html {
+  overflow-x: hidden;
   height: 100vh;
+}
+
+a {
+  text-decoration: none;
+  color: var(--c-link);
+  &:hover {
+    color: var(--c-link-hover);
+  }
+}
+
+/*Header styles*/
 
+h1 {
+  font-family: var(--body-font-family-secondary);
+  font-size: var(--h1-font-size);
+  font-weight: var(--h1-font-weight);
+  line-height: 1.6;
+  margin: 0;
+}
+
+h2 {
+  font-family: var(--body-font-family-secondary);
+  font-size: var(--h2-font-size);
+  font-weight: var(--h2-font-weight);
+  line-height: 1.6;
+  margin: 0;
+}
+
+h3 {
+  font-family: var(--body-font-family-secondary);
+  font-size: var(--h3-font-size);
+  font-weight: var(--h3-font-weight);
+  line-height: 1.6;
+  margin: 0;
+}
+
+h4 {
+  font-family: var(--body-font-family-secondary);
+  font-size: var(--h4-font-size);
+  font-weight: var(--h4-font-weight);
+  line-height: 1.6;
+  margin: 0;
+}
+
+h5 {
+  font-family: var(--body-font-family-secondary);
+  font-size: var(--h5-font-size);
+  font-weight: var(--h5-font-weight);
+  line-height: 1.6;
+  margin: 0;
 }
 
 body {
+  overflow-x: hidden;
   padding: 0;
   margin: 0;
   min-height: 100vh;
+  font-family: var(--body-font-family-primary);
+  font-weight: var(--body-font-weight-primary);
+  font-size: var(--font-size-regular);
+  line-height: 1.6;
 }
 
 #__nuxt {
@@ -93,7 +143,7 @@ body {
   height: 100%;
   display: flex;
   flex-direction: column;
-  
+
   &__bottom-navigation {
     @include for-desktop() {
       display: none;
@@ -102,7 +152,7 @@ body {
 }
 
 .sw-breadcrumbs {
-  padding: $spacer-big $spacer-extra-big $spacer-extra-big;
+  padding: var(--spacer-big) var(--spacer-extra-big) var(--spacer-extra-big);
 }
 
 /* Delete firefox outline */
diff --git a/packages/default-theme/layouts/error.vue b/packages/default-theme/layouts/error.vue
index 146d90be8..61b89abee 100644
--- a/packages/default-theme/layouts/error.vue
+++ b/packages/default-theme/layouts/error.vue
@@ -52,7 +52,6 @@ export default {
 </script>
 <style lang="scss">
 @import '~@storefront-ui/vue/styles.scss';
-@import '~@storefront-ui/shared/styles/helpers/visibility';
 .error-page {
   text-align: center;
   margin: auto;
@@ -64,7 +63,7 @@ export default {
     margin-bottom: 30px;
     h2 {
       font-size: 5rem;
-      color: $c-primary;
+      color: var(--c-primary);
     }
   }
 
diff --git a/packages/default-theme/package.json b/packages/default-theme/package.json
index 6361c8af8..7b56af44e 100644
--- a/packages/default-theme/package.json
+++ b/packages/default-theme/package.json
@@ -24,7 +24,7 @@
     "@nuxtjs/axios": "^5.9.3",
     "@nuxtjs/pwa": "^3.0.0-beta.19",
     "@shopware-pwa/shopware-6-client": "latest",
-    "@storefront-ui/vue": "^0.5.1",
+    "@storefront-ui/vue": "^0.6.0",
     "@vue/composition-api": "^0.3.4",
     "cookie-universal-nuxt": "^2.1.0",
     "currency.js": "^1.2.2",
diff --git a/packages/default-theme/pages/_.vue b/packages/default-theme/pages/_.vue
index 163fc7f94..de8d47abf 100644
--- a/packages/default-theme/pages/_.vue
+++ b/packages/default-theme/pages/_.vue
@@ -66,6 +66,4 @@ export default {
 </script>
 <style lang="scss" scoped>
 @import '~@storefront-ui/vue/styles.scss';
-@import '~@storefront-ui/shared/styles/helpers/visibility';
-
 </style>
diff --git a/packages/default-theme/pages/account.vue b/packages/default-theme/pages/account.vue
index 280fae0b9..3b4a6448c 100644
--- a/packages/default-theme/pages/account.vue
+++ b/packages/default-theme/pages/account.vue
@@ -89,5 +89,4 @@ export default {
 </script>
 <style lang="scss" scoped>
 @import '~@storefront-ui/vue/styles.scss';
-@import '~@storefront-ui/shared/styles/helpers/visibility';
 </style>
diff --git a/packages/default-theme/pages/account/addresses.vue b/packages/default-theme/pages/account/addresses.vue
index c49084302..859b908a3 100644
--- a/packages/default-theme/pages/account/addresses.vue
+++ b/packages/default-theme/pages/account/addresses.vue
@@ -61,16 +61,11 @@ export default {
 
 <style lang="scss" scoped>
 @import '~@storefront-ui/vue/styles.scss';
-@import '~@storefront-ui/shared/styles/helpers/visibility';
 
-@mixin for-desktop {
-  @media screen and (min-width: $desktop-min) {
-    @content;
-  }
-}
+
 
 .shipping-list {
-  margin-bottom: $spacer-extra-big;
+  margin-bottom: var(--spacer-extra-big);
   width: 100%;
 }
 </style>
diff --git a/packages/default-theme/pages/account/orders.vue b/packages/default-theme/pages/account/orders.vue
index 7de540f3d..208d79592 100644
--- a/packages/default-theme/pages/account/orders.vue
+++ b/packages/default-theme/pages/account/orders.vue
@@ -94,5 +94,4 @@ export default {
 
 <style lang="scss" scoped>
 @import '~@storefront-ui/vue/styles.scss';
-@import '~@storefront-ui/shared/styles/helpers/visibility';
 </style>
diff --git a/packages/default-theme/pages/account/profile.vue b/packages/default-theme/pages/account/profile.vue
index 3fed7415e..a2f542234 100644
--- a/packages/default-theme/pages/account/profile.vue
+++ b/packages/default-theme/pages/account/profile.vue
@@ -51,24 +51,19 @@ export default {
 
 <style lang="scss" scoped>
 @import '~@storefront-ui/vue/styles.scss';
-@import '~@storefront-ui/shared/styles/helpers/visibility';
-@mixin for-desktop {
-  @media screen and (min-width: $desktop-min) {
-    @content;
-  }
-}
+
 
 .notice {
-  font-family: $body-font-family-primary;
-  font-weight: $body-font-weight-primary;
+  font-family: var(--body-font-family-primary);
+  font-weight: var(--body-font-weight-primary);
   line-height: 1.6;
-  margin: $spacer-big 0 0 0;
-  font-size: $font-size-extra-small-mobile;
+  margin: var(--spacer-big) 0 0 0;
+  font-size: var(--font-size-extra-small-mobile);
 
   @include for-desktop {
     max-width: 70%;
-    margin: $spacer 0 0 0;
-    font-size: $font-size-extra-small-desktop;
+    margin: var(--spacer) 0 0 0;
+    font-size: var(--font-size-extra-small-desktop);
   }
 }
 </style>
diff --git a/packages/default-theme/pages/checkout.vue b/packages/default-theme/pages/checkout.vue
index de018d18f..e9046fdc0 100644
--- a/packages/default-theme/pages/checkout.vue
+++ b/packages/default-theme/pages/checkout.vue
@@ -242,17 +242,13 @@ export default {
 </script>
 <style lang="scss" scoped>
 @import '~@storefront-ui/vue/styles';
-@mixin for-desktop {
-  @media screen and (min-width: $desktop-min) {
-    @content;
-  }
-}
+
 #checkout {
   box-sizing: border-box;
-  padding: 0 $spacer-big;
+  padding: 0 var(--spacer-big);
   @include for-desktop {
     max-width: 1240px;
-    padding: $spacer-extra-big;
+    padding: var(--spacer-extra-big);
   }
 }
 .checkout {
diff --git a/packages/default-theme/pages/index/index.vue b/packages/default-theme/pages/index/index.vue
index 1aea4569b..94e471305 100644
--- a/packages/default-theme/pages/index/index.vue
+++ b/packages/default-theme/pages/index/index.vue
@@ -251,22 +251,17 @@ export default {
 </script>
 <style lang="scss" scoped>
 @import '~@storefront-ui/vue/styles.scss';
-@import '~@storefront-ui/shared/styles/helpers/visibility';
 
-@mixin for-desktop {
-  @media screen and (min-width: $desktop-min) {
-    @content;
-  }
-}
+
 
 #home {
   box-sizing: border-box;
 }
 .call-to-action-newsletter {
-  margin: $spacer-big 0;
+  margin: var(--spacer-big) 0;
   box-sizing: border-box;
   @include for-desktop {
-    margin: $spacer-extra-big * 2 0;
+    margin: calc(var(--spacer-extra-big) * 2) 0;
   }
 }
 .banner-central {
@@ -287,28 +282,28 @@ export default {
   padding-left: 2.5rem;
   line-height: 1.6;
   &__title {
-    margin: $spacer-big 0 0 0;
-    font-size: $h1-font-size-desktop;
-    font-weight: $h1-font-weight-desktop;
+    margin: var(--spacer-big) 0 0 0;
+    font-size: var(--h1-font-size-desktop);
+    font-weight: var(--h1-font-weight-desktop);
   }
   &__subtitle {
     color: #a3a5ad;
-    font-family: $body-font-family-primary;
-    font-size: $font-size-extra-big-desktop;
-    font-weight: $body-font-weight-primary;
+    font-family: var(--body-font-family-primary);
+    font-size: var(--font-size-extra-big-desktop);
+    font-weight: var(--body-font-weight-primary);
   }
   &__download {
     max-height: 47px;
-    margin-top: $spacer-extra-big;
+    margin-top: var(--spacer-extra-big);
     & + & {
-      margin-left: $spacer-big;
+      margin-left: var(--spacer-big);
     }
   }
 }
 .banners {
-  margin: $spacer-big 0;
+  margin: var(--spacer-big) 0;
   @include for-desktop {
-    margin: $spacer-extra-big 0;
+    margin: var(--spacer-extra-big) 0;
   }
 }
 .images-grid {
@@ -317,18 +312,18 @@ export default {
   &__row {
     display: flex;
     & + & {
-      margin-top: $spacer-big / 2;
+      margin-top: calc(var(--spacer-big) / 2);
       @include for-desktop {
-        margin-top: $spacer-big;
+        margin-top: var(--spacer-big);
       }
     }
   }
   &__col {
     margin: 0;
     & + & {
-      margin-left: $spacer-big / 2;
+      margin-left: calc(var(--spacer-big) / 2);
       @include for-desktop {
-        margin-left: $spacer-big;
+        margin-left: var(--spacer-big);
       }
     }
   }
@@ -342,7 +337,7 @@ export default {
   }
 }
 .product-carousel {
-  margin: -20px -#{$spacer-big} -20px 0;
+  margin: -20px calc(var(--spacer-big) * -1) -20px 0;
   @include for-desktop {
     margin: -20px 0;
   }
@@ -355,8 +350,8 @@ export default {
   }
 }
 .section {
-  padding-left: $spacer-big;
-  padding-right: $spacer-big;
+  padding-left: var(--spacer-big);
+  padding-right: var(--spacer-big);
   @include for-desktop {
     padding-left: 0;
     padding-right: 0;
diff --git a/packages/default-theme/pages/login.vue b/packages/default-theme/pages/login.vue
index 07632d9bc..aa95786ba 100644
--- a/packages/default-theme/pages/login.vue
+++ b/packages/default-theme/pages/login.vue
@@ -28,7 +28,6 @@ export default {
 </script>
 <style lang="scss" scoped>
 @import '~@storefront-ui/vue/styles.scss';
-@import '~@storefront-ui/shared/styles/helpers/visibility';
 #login {
   width: 100%;
   height: 65vh;
diff --git a/packages/default-theme/pages/success-page.vue b/packages/default-theme/pages/success-page.vue
index a90fbf117..b29dedf7a 100644
--- a/packages/default-theme/pages/success-page.vue
+++ b/packages/default-theme/pages/success-page.vue
@@ -36,7 +36,7 @@ export default {
     text-align: center;
     h2 {
       font-size: 5rem;
-      color: $c-primary;
+      color: var(--c-primary);
     }
   }
 
diff --git a/yarn.lock b/yarn.lock
index 4c39f1702..189790128 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3096,18 +3096,18 @@
   dependencies:
     type-detect "4.0.8"
 
-"@storefront-ui/shared@^0.5.1":
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/@storefront-ui/shared/-/shared-0.5.1.tgz#313cf978470e43cf7a1af401d65617eb496f6ba4"
-  integrity sha512-WhyhVug+RDyxlVq4Beb46OD6jePnHBz3luSj2NbTUAhDGWWcnr6GcaGJALdtxSIcl58lyr11wnHSD+aE+a7c1A==
+"@storefront-ui/shared@^0.6.1":
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/@storefront-ui/shared/-/shared-0.6.1.tgz#bc82b8b457bf883fee4f952c4cf4710b77c0f64b"
+  integrity sha512-Qa6Nen0ETomtz4T8jWb2X3AVda9zUSAKBYgi/SpGSBDxjvIYhu6plLog8SPs255s7lfKdR52YpUtocwCSP/ScA==
 
-"@storefront-ui/vue@^0.5.1":
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/@storefront-ui/vue/-/vue-0.5.1.tgz#62c69d204232bd4050beb01963829fc4a4fbf751"
-  integrity sha512-ocuZNggS9oEyuXhYHjshJSfHQQ0iSUrFPWPz5ijG3Q1Af9c/GXZ0NPG/agPehRynpgiCOkMsZzPtbU8FK4+u4g==
+"@storefront-ui/vue@^0.6.0":
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/@storefront-ui/vue/-/vue-0.6.1.tgz#b60e8a64cef1cc10580411831f877cc4fd928851"
+  integrity sha512-nFHT8Ow/PBjQbvmqU2HMGQolHqvWq3G0mkZf1exhxtgmhtWe4rNHQnfg2JtBoxjlC9SF4nug/XVopCR87zk0Bg==
   dependencies:
     "@glidejs/glide" "^3.3.0"
-    "@storefront-ui/shared" "^0.5.1"
+    "@storefront-ui/shared" "^0.6.1"
     "@vue/babel-preset-app" "^4.0.0-alpha.1"
     body-scroll-lock "^2.6.4"
     core-js "^3.1.3"