refactor: use meteor tokens (#58)

Author: larskemper

.gitlab/Dockerfile

@@ -2,10 +2,12 @@
 
 .swag-migration-assistant {
     h4.swag-migration-assistant__headline {
-        font-size: 32px;
+        color: var(--color-text-primary-default);
+        font-size: var(--font-size-2xl);
+        font-weight: var(--font-weight-medium);
+        padding-top: var(--scale-size-10);
         text-align: center;
         margin: 0;
-        padding-top: var(--scale-size-10);
     }
 
     .swag-migration-assistant__paragraph {
@@ -23,7 +25,7 @@
     }
 
     .swag-migration-assistant__illustration {
-        width: 136px;
+        width: var(--scale-size-128);
         display: block;
         margin: 0 auto;
         padding-bottom: var(--scale-size-16);
@@ -32,15 +34,17 @@
     h5.swag-migration-assistant__title {
         font-weight: var(--font-weight-semibold);
         margin-bottom: var(--scale-size-8);
+        color: var(--color-text-primary-default);
     }
 
     .swag-migration-assistant__content {
         white-space: pre-line;
+        color: var(--color-text-secondary-default);
     }
 
     .swag-migration-assistant__content,
     .swag-migration-assistant__link a.link {
-        font-size: $font-size-xxs;
-        line-height: 22px;
+        font-size: var(--font-size-xs);
+        line-height: var(--font-line-height-xs);
     }
 }

.gitlab/install_test_data.php

@@ -3,29 +3,30 @@
 .swag-migration-confirm-warning {
     .swag-migration-confirm-warning__card {
         text-align: center;
-        font-size: 14px;
+        font-size: var(--font-size-xs);
     }
 
     .swag-migration-confirm-warning__bubble {
         margin: var(--scale-size-12) auto var(--scale-size-20) auto;
         width: var(--scale-size-72);
         height: var(--scale-size-72);
         border-radius: var(--border-radius-round);
-        background-color: $color-pumpkin-spice-50;
+        background-color: var(--color-background-attention-default);
         flex-shrink: 0;
         display: flex;
         align-items: center;
         justify-content: center;
     }
 
     .swag-migration-confirm-warning__bubble-icon {
-        color: $color-pumpkin-spice-500;
+        color: var(--color-icon-attention-default);
     }
 
     h5.swag-migration-confirm-warning__title {
-        font-size: 18px;
+        font-size: var(--font-size-m);
         font-weight: var(--font-weight-semibold);
-        line-height: 25px;
+        line-height: var(--font-line-height-s);
+        color: var(--color-text-primary-default);
     }
 
     .swag-migration-confirm-warning__alert {

.gitlab/post_install_migration_assistant.sh

@@ -31,7 +31,7 @@
         {% endblock %}
 
         {% block swag_migration_premapping_success_card %}
-            <mt-card v-if="!isLoading && isPremappingValid"
+            <mt-card v-if="!isLoading && isPremappingValid && premapping?.length > 0"
                      class="swag-migration-premapping__success-card"
                      position-identifier="swag-migration-premapping__success-card">
 

src/Resources/app/administration/src/module/swag-migration/component/card/swag-migration-assistant/swag-migration-assistant.scss

@@ -3,68 +3,75 @@
 .swag-migration-premapping {
     .swag-migration-premapping__success-card {
         text-align: center;
-        font-size: 14px;
+        font-size: var(--font-size-xs);
+
+        .mt-card__content {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            height: var(--scale-size-256);
+        }
     }
 
     .swag-migration-premapping__success-bubble {
-        margin: var(--scale-size-12) auto var(--scale-size-20) auto;
+        margin: 0 auto var(--scale-size-20) auto;
         width: var(--scale-size-72);
         height: var(--scale-size-72);
         border-radius: var(--border-radius-round);
-        background-color: $color-emerald-50;
+        background-color: var(--color-background-positive-default);
         flex-shrink: 0;
         display: flex;
         align-items: center;
         justify-content: center;
     }
 
     .swag-migration-premapping__success-icon {
-        color: $color-emerald-500;
+        color: var(--color-icon-positive-default);
     }
 
     .swag-migration-premapping__success-title {
-        font-size: 18px;
+        font-size: var(--font-size-m);
         font-weight: var(--font-weight-semibold);
-        margin-bottom: 5px;
+        margin-bottom: var(--scale-size-4);
     }
 
     .swag-migration-premapping__success-caption {
-        color: $color-gray-500;
-        margin-bottom: 45px;
+        color: var(--color-text-secondary-default);
     }
 
     .swag-migration-premapping__loading-card {
         text-align: center;
-        font-size: 14px;
+        font-size: var(--font-size-xs);
     }
 
     .swag-migration-premapping__loading-title {
-        font-size: 18px;
+        font-size: var(--font-size-m);
         font-weight: var(--font-weight-semibold);
-        margin-bottom: 5px;
+        margin-bottom: var(--scale-size-4);
     }
 
     .swag-migration-premapping__loading-caption {
-        color: $color-gray-500;
-        margin-bottom: 45px;
+        color: var(--color-text-secondary-default);
+        margin-bottom: var(--scale-size-48);
     }
 
     .sw-loader.swag-migration-premapping__loader {
         position: relative;
-        margin: var(--scale-size-12) auto 42px auto;
+        margin: var(--scale-size-12) auto var(--scale-size-40) auto;
 
         .sw-loader__container {
             transform: translate(-50%);
         }
     }
 
     .swag-migration-premapping__alert {
-        max-width: 800px;
+        max-width: 60rem;
         margin-left: auto;
         margin-right: auto;
 
-        @media screen and (max-width: 1360px) {
-            max-width: 770px;
+        @media screen and (max-width: 85rem) {
+            max-width: calc(var(--scale-size-256) * 3);
         }
     }
 
@@ -75,30 +82,30 @@
     .swag-migration-premapping__unfilled-card {
         margin-top: var(--scale-size-40);
         text-align: center;
-        font-size: 14px;
+        font-size: var(--font-size-xs);
     }
 
     .swag-migration-premapping__unfilled-title {
-        font-size: 18px;
+        font-size: var(--font-size-m);
         font-weight: var(--font-weight-semibold);
         margin-top: var(--scale-size-10);
-        margin-bottom: 5px;
+        margin-bottom: var(--scale-size-4);
     }
 
     .swag-migration-premapping__unfilled-caption {
-        color: $color-gray-500;
+        color: var(--color-text-secondary-default);
         margin-bottom: var(--scale-size-10);
     }
 
     .swag-migration-premapping__tab-card {
-        font-size: 14px;
+        font-size: var(--font-size-xs);
     }
 
     .swag-migration-premapping__tab-card-item {
-        font-size: 14px;
+        font-size: var(--font-size-xs);
     }
 
     .sw-grid__cell-label {
-        font-size: 14px;
+        font-size: var(--font-size-xs);
     }
-}
+}

src/Resources/app/administration/src/module/swag-migration/component/card/swag-migration-confirm-warning/swag-migration-confirm-warning.scss

@@ -27,11 +27,11 @@
 
   .swag-migration-progress-bar__point {
     position: absolute;
-    display:flex;
+    display: flex;
     flex-direction: column;
     align-items: center;
     top: var(--scale-size-30);
-    font-size: 14px;
+    font-size: var(--font-size-xs);
     font-weight: var(--font-weight-semibold);
   }
 
@@ -51,27 +51,27 @@
   }
 
   .swag-migration-progress-bar__bubble--active {
-    background-color: $color-shopware-brand-50;
-    color: $color-shopware-brand-500;
+    background-color: var(--color-background-brand-default);
+    color: var(--color-icon-brand-default);
   }
 
   .swag-migration-progress-bar__bubble--disabled {
-    background-color: $color-gray-100;
+    background-color: var(--color-background-tertiary-default);
 
     .swag-migration-progress-bar__icon {
-      color: $color-gray-300;
+      color: var(--color-icon-secondary-default);
     }
   }
 
   .swag-migration-progress-bar__caption {
     margin-top: var(--scale-size-12);
-    font-size: 14px;
+    font-size: var(--font-size-xs);
     text-align: center;
   }
 
   .swag-migration-progress-bar__heading {
-    margin-bottom: 5px;
-    font-size: 14px;
+    margin-bottom: var(--scale-size-4);
+    font-size: var(--font-size-xs);
     text-align: center;
     font-weight: var(--font-weight-semibold);
   }