Use SASS modules, remove all uses of @import rule

frontend/src/app/components/errorHelperText/error-helper-text.scss

@@ -1,16 +1,18 @@
+@use "../../../styles/variables" as v;
+
 .error-helper-text {
   &__container {
-    color: get-color(basic, error);
-    margin-top: get-spacing(xxs);
-    margin-left: get-spacing(md);
+    color: v.get-color(basic, error);
+    margin-top: v.get-spacing(xxs);
+    margin-left: v.get-spacing(md);
   }
 
   &__enter {
     opacity: 0;
 
     &-active {
       opacity: 1;
-      transition: opacity get-time(normal) ease-in;
+      transition: opacity v.get-time(normal) ease-in;
     }
   }
 
@@ -19,7 +21,7 @@
 
     &-active {
       opacity: 0;
-      transition: opacity get-time(normal) ease-out;
+      transition: opacity v.get-time(normal) ease-out;
     }
   }
 }

frontend/src/app/components/layout/layout.scss

@@ -1,23 +1,25 @@
+@use "../../../styles/variables" as v;
+
 .layout {
   &__container {
     width: 100%;
     display: flex;
     flex-direction: column;
     flex-grow: 1;
-    padding: get-spacing(md);
+    padding: v.get-spacing(md);
     align-items: center;
-    background-color: get-color(basic, background);
+    background-color: v.get-color(basic, background);
 
-    @media (min-width: get-media(md)) {
-      padding: get-spacing(lg);
+    @media (min-width: v.get-media(md)) {
+      padding: v.get-spacing(lg);
     }
 
-    @media (min-width: get-media(lg)) {
-      padding: get-spacing(lg) 4rem;
+    @media (min-width: v.get-media(lg)) {
+      padding: v.get-spacing(lg) 4rem;
     }
 
-    @media (min-width: get-media(xl)) {
-      padding: get-spacing(lg) 6rem;
+    @media (min-width: v.get-media(xl)) {
+      padding: v.get-spacing(lg) 6rem;
     }
 
     &-content {
@@ -32,21 +34,21 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    background-color: get-color(basic, background);
+    background-color: v.get-color(basic, background);
 
-    @media (min-width: get-media(xs)) {
+    @media (min-width: v.get-media(xs)) {
       flex: 1 1 auto;
     }
 
     &-content {
       width: 100%;
-      padding: get-spacing(md);
-      background-color: get-color(basic, brightest);
+      padding: v.get-spacing(md);
+      background-color: v.get-color(basic, brightest);
 
-      @media (min-width: get-media(xs)) {
+      @media (min-width: v.get-media(xs)) {
         max-width: 442px;
-        border-radius: get-border-radius(md);
-        padding: get-spacing(xl);
+        border-radius: v.get-border-radius(md);
+        padding: v.get-spacing(xl);
       }
     }
   }

frontend/src/app/components/loading/loading.scss

@@ -1,19 +1,21 @@
+@use "../../../styles/variables" as v;
+
 .loading {
   display: flex;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  background: get-color(basic, brightest);
-  z-index: get-z(1000);
+  background: v.get-color(basic, brightest);
+  z-index: v.get-z(1000);
 
   &__enter {
     opacity: 0;
 
     &-active {
       opacity: 1;
-      transition: opacity get-time(slow) ease-in;
+      transition: opacity v.get-time(slow) ease-in;
     }
   }
 
@@ -22,7 +24,7 @@
 
     &-active {
       opacity: 0;
-      transition: opacity get-time(slow) ease-out;
+      transition: opacity v.get-time(slow) ease-out;
     }
   }
 

frontend/src/app/components/spinner/spinner.scss

@@ -1,3 +1,5 @@
+@use "../../../styles/variables" as v;
+
 @keyframes spinner-rotate {
   0% {
     width: 64px;
@@ -24,12 +26,12 @@
   display: block;
   position: relative;
   background-image: linear-gradient(
-      get-color(primary, dark) 16px,
+      v.get-color(primary, dark) 16px,
       transparent 0
     ),
-    linear-gradient(get-color(primary, main) 16px, transparent 0),
-    linear-gradient(get-color(primary, main) 16px, transparent 0),
-    linear-gradient(get-color(primary, dark) 16px, transparent 0);
+    linear-gradient(v.get-color(primary, main) 16px, transparent 0),
+    linear-gradient(v.get-color(primary, main) 16px, transparent 0),
+    linear-gradient(v.get-color(primary, dark) 16px, transparent 0);
   background-repeat: no-repeat;
   background-size: 16px 16px;
   background-position:

frontend/src/app/components/typography/typography.scss

@@ -1,108 +1,110 @@
+@use "../../../styles/variables" as v;
+
 .typography {
   &__heading1 {
-    font-size: get-font-size(xtl);
-    line-height: get-line-height(xxl);
-    font-weight: get-font-weight(semi-bold);
-    letter-spacing: get-letter-spacing(xs);
-    color: get-color(basic, text);
+    font-size: v.get-font-size(xtl);
+    line-height: v.get-line-height(xxl);
+    font-weight: v.get-font-weight(semi-bold);
+    letter-spacing: v.get-letter-spacing(xs);
+    color: v.get-color(basic, text);
   }
 
   &__heading2 {
-    font-size: get-font-size(xxl);
-    line-height: get-line-height(xl);
-    font-weight: get-font-weight(bold);
-    letter-spacing: get-letter-spacing(sm);
-    color: get-color(basic, text);
+    font-size: v.get-font-size(xxl);
+    line-height: v.get-line-height(xl);
+    font-weight: v.get-font-weight(bold);
+    letter-spacing: v.get-letter-spacing(sm);
+    color: v.get-color(basic, text);
   }
 
   &__heading3 {
-    font-size: get-font-size(xl);
-    line-height: get-line-height(lg);
-    font-weight: get-font-weight(bold);
-    color: get-color(basic, text);
+    font-size: v.get-font-size(xl);
+    line-height: v.get-line-height(lg);
+    font-weight: v.get-font-weight(bold);
+    color: v.get-color(basic, text);
   }
 
   &__heading4 {
-    font-size: get-font-size(lg);
-    line-height: get-line-height(md);
-    font-weight: get-font-weight(bold);
-    letter-spacing: get-letter-spacing(lg);
-    color: get-color(basic, text);
+    font-size: v.get-font-size(lg);
+    line-height: v.get-line-height(md);
+    font-weight: v.get-font-weight(bold);
+    letter-spacing: v.get-letter-spacing(lg);
+    color: v.get-color(basic, text);
   }
 
   &__heading5 {
-    font-size: get-font-size(md);
-    line-height: get-line-height(sm);
-    font-weight: get-font-weight(semi-bold);
-    color: get-color(basic, text);
+    font-size: v.get-font-size(md);
+    line-height: v.get-line-height(sm);
+    font-weight: v.get-font-weight(semi-bold);
+    color: v.get-color(basic, text);
   }
 
   &__heading6 {
-    font-size: get-font-size(sm);
-    line-height: get-line-height(xs);
-    font-weight: get-font-weight(medium);
-    letter-spacing: get-letter-spacing(md);
-    color: get-color(basic, text);
+    font-size: v.get-font-size(sm);
+    line-height: v.get-line-height(xs);
+    font-weight: v.get-font-weight(medium);
+    letter-spacing: v.get-letter-spacing(md);
+    color: v.get-color(basic, text);
   }
 
   &__subtitle1 {
-    font-size: get-font-size(xs);
-    line-height: get-line-height(xs);
-    font-weight: get-font-weight(medium);
-    letter-spacing: get-letter-spacing(lg);
+    font-size: v.get-font-size(xs);
+    line-height: v.get-line-height(xs);
+    font-weight: v.get-font-weight(medium);
+    letter-spacing: v.get-letter-spacing(lg);
   }
 
   &__subtitle2 {
-    font-size: get-font-size(xxs);
-    line-height: get-line-height(xxs);
-    font-weight: get-font-weight(medium);
-    letter-spacing: get-letter-spacing(md);
+    font-size: v.get-font-size(xxs);
+    line-height: v.get-line-height(xxs);
+    font-weight: v.get-font-weight(medium);
+    letter-spacing: v.get-letter-spacing(md);
   }
 
   &__body1 {
-    font-size: get-font-size(xs);
-    line-height: get-line-height(xs);
-    font-weight: get-font-weight(regular);
-    letter-spacing: get-letter-spacing(lg);
+    font-size: v.get-font-size(xs);
+    line-height: v.get-line-height(xs);
+    font-weight: v.get-font-weight(regular);
+    letter-spacing: v.get-letter-spacing(lg);
   }
 
   &__body2 {
-    font-size: get-font-size(xxs);
-    line-height: get-line-height(xxs);
-    font-weight: get-font-weight(regular);
-    letter-spacing: get-letter-spacing(md);
+    font-size: v.get-font-size(xxs);
+    line-height: v.get-line-height(xxs);
+    font-weight: v.get-font-weight(regular);
+    letter-spacing: v.get-letter-spacing(md);
   }
 
   &__caption {
-    font-size: get-font-size(xts);
-    line-height: get-line-height(xxs);
-    font-weight: get-font-weight(regular);
-    letter-spacing: get-letter-spacing(xl);
+    font-size: v.get-font-size(xts);
+    line-height: v.get-line-height(xxs);
+    font-weight: v.get-font-weight(regular);
+    letter-spacing: v.get-letter-spacing(xl);
   }
 
   &__overline {
-    font-size: get-font-size(xts);
-    line-height: get-line-height(xxs);
-    font-weight: get-font-weight(regular);
-    letter-spacing: get-letter-spacing(xxl);
+    font-size: v.get-font-size(xts);
+    line-height: v.get-line-height(xxs);
+    font-weight: v.get-font-weight(regular);
+    letter-spacing: v.get-letter-spacing(xxl);
     text-transform: uppercase;
   }
 
   &__button-small {
-    font-size: get-font-size(xts);
-    line-height: get-line-height(xs);
-    font-weight: get-font-weight(semi-bold);
+    font-size: v.get-font-size(xts);
+    line-height: v.get-line-height(xs);
+    font-weight: v.get-font-weight(semi-bold);
   }
 
   &__button-medium {
-    font-size: get-font-size(xxs);
-    line-height: get-line-height(xs);
-    font-weight: get-font-weight(semi-bold);
+    font-size: v.get-font-size(xxs);
+    line-height: v.get-line-height(xs);
+    font-weight: v.get-font-weight(semi-bold);
   }
 
   &__button-large {
-    font-size: get-font-size(xs);
-    line-height: get-line-height(xs);
-    font-weight: get-font-weight(semi-bold);
+    font-size: v.get-font-size(xs);
+    line-height: v.get-line-height(xs);
+    font-weight: v.get-font-weight(semi-bold);
   }
 }

frontend/src/app/components/uikit/uikitBlock/uikit-block.scss

@@ -1,17 +1,19 @@
+@use "../../../../styles/variables" as v;
+
 .uikit-block {
   display: flex;
   flex-direction: column;
-  gap: get-spacing(xs);
+  gap: v.get-spacing(xs);
 
   &__pre {
-    border-radius: get-border-radius(sm);
-    padding: get-spacing(sm);
+    border-radius: v.get-border-radius(sm);
+    padding: v.get-spacing(sm);
     position: relative;
   }
 
   &__copy-btn {
     position: absolute;
-    right: get-spacing(xxs);
-    top: get-spacing(xxs);
+    right: v.get-spacing(xxs);
+    top: v.get-spacing(xxs);
   }
 }

frontend/src/app/components/uikit/uikitNav/uikit-nav.scss

@@ -1,14 +1,18 @@
+@use "../../../../styles/mixins/media-queries" as m;
+@use "../../../../styles/mixins/generics" as g;
+@use "../../../../styles/variables" as v;
+
 .uikit-nav {
   display: none;
 
-  @include media-min(xs) {
+  @include m.media-min(xs) {
     display: flex;
     flex-direction: column;
-    gap: get-spacing(xs);
+    gap: v.get-spacing(xs);
     height: 100%;
-    margin-top: get-spacing(md);
-    max-width: rem(250);
+    margin-top: v.get-spacing(md);
+    max-width: g.rem(250);
     position: sticky;
-    top: get-spacing(md);
+    top: v.get-spacing(md);
   }
 }