fix: Dart Sass @import/global built-in function deprecation warnings

remove Dart Sass 3.0.0 deprecation warnings when building:
 - Sass @import rules are deprecated
 - Global built-in functions are deprecated

done:
- `@import` → `@use` + namespacing functions and variables, e.g.
  `$breakpoint-m` → `hds.$breakpoint-m`
- exporting variables from .scss file to another by `@forward`, e.g. all
  `hds-design-tokens`'s variables are now explicitly exported from
  `variables.scss`
- `map-has-key` → `@use "sass:map"` + `map.has-key`
- `map-get` → `@use "sass:map"` + `map.get`
- changed some constants from CSS style to SASS style:
  - var(--breakpoint-xl) → variables.$breakpoint-xl
  - var(--color-black) → variables.$color-black
  - var(--color-black-5) → variables.$color-black-5
  - var(--color-summer) → variables.$color-summer
  - var(--color-white) → variables.$color-white
  - var(--spacing-2-xs) → variables.$spacing-2-xs
  - var(--spacing-l) → variables.$spacing-l
  - var(--spacing-layout-m) → variables.$spacing-layout-m
  - var(--spacing-layout-s) → variables.$spacing-layout-s
  - var(--spacing-layout-s) → variables.$spacing-layout-s
  - var(--spacing-layout-xs) → variables.$spacing-layout-xs
  - var(--spacing-m) → variables.$spacing-m
  - var(--spacing-s) → variables.$spacing-s
  - var(--spacing-s) → variables.$spacing-s
- Specifically in listPageLayout.module.scss:
  - removed unnecessary calc() use from `$backButtonAsideBreakpoint`:
    - `calc($backButtonWidth + $breakpoint-xl);` →
      `$backButtonWidth + variables.$breakpoint-xl;`
  - removed unnecessary SASS → CSS variable mapping by removing
    `--back-button-width: #{$backButtonWidth};`
  - simplified calculation
    `margin-left: calc(#{var(--back-button-width)} * -1);` →
    `margin-left: $backButtonWidth * -1;`
  - **NOTE**: Replaced `var(--color-text)` with
    `variables.$color-black-90` as there was no variable `color-text`
    i.e. **it had no value at all**
- Specifically in hero.module.scss:
  - Changed from using min-height calculation using CSS and
    interpolation to using SASS calculations directly i.e.
    `min-height: calc(0.265 * #{$containerMaxWidth});` →
    `min-height: 0.265 * variables.$containerMaxWidth;`

refs KK-1372

src/assets/styles/layout.scss

@@ -1,20 +1,22 @@
-@import '~hds-design-tokens/lib/breakpoint/all.scss';
+@use "sass:map";
+@use '~hds-design-tokens/lib/breakpoint/all.scss' as hds;
+@use '~styles/variables';
 
 $breakpoints: (
-  xs: $breakpoint-xs,
-  s: $breakpoint-s,
-  m: $breakpoint-m,
-  l: $breakpoint-l,
-  xl-minus: $container-width-xl,
-  xl: $breakpoint-xl,
-  xxl: 1600px, // $container-width-xl * 4 / 3
+  xs: hds.$breakpoint-xs,
+  s: hds.$breakpoint-s,
+  m: hds.$breakpoint-m,
+  l: hds.$breakpoint-l,
+  xl-minus: hds.$container-width-xl,
+  xl: hds.$breakpoint-xl,
+  xxl: 1600px, // hds.$container-width-xl * 4 / 3
 );
 
 @mixin respond-above($breakpoint) {
   // If the breakpoint exists in the map.
-  @if map-has-key($breakpoints, $breakpoint) {
+  @if map.has-key($breakpoints, $breakpoint) {
     // Get the breakpoint value.
-    $breakpoint-value: map-get($breakpoints, $breakpoint);
+    $breakpoint-value: map.get($breakpoints, $breakpoint);
 
     // Write the media query.
     @media (min-width: $breakpoint-value) {
@@ -30,9 +32,9 @@ $breakpoints: (
 
 @mixin respond-below($breakpoint) {
   // If the breakpoint exists in the map.
-  @if map-has-key($breakpoints, $breakpoint) {
+  @if map.has-key($breakpoints, $breakpoint) {
     // Get the breakpoint value.
-    $breakpoint-value: map-get($breakpoints, $breakpoint);
+    $breakpoint-value: map.get($breakpoints, $breakpoint);
 
     // Write the media query.
     @media (max-width: ($breakpoint-value - 1)) {
@@ -53,10 +55,10 @@ $breakpoints: (
 // @include respond-between(s, m) {}
 @mixin respond-between($lower, $upper) {
   // If both the lower and upper breakpoints exist in the map.
-  @if map-has-key($breakpoints, $lower) and map-has-key($breakpoints, $upper) {
+  @if map.has-key($breakpoints, $lower) and map.has-key($breakpoints, $upper) {
     // Get the lower and upper breakpoints.
-    $lower-breakpoint: map-get($breakpoints, $lower);
-    $upper-breakpoint: map-get($breakpoints, $upper);
+    $lower-breakpoint: map.get($breakpoints, $lower);
+    $upper-breakpoint: map.get($breakpoints, $upper);
 
     // Write the media query.
     @media (min-width: $lower-breakpoint) and (max-width: ($upper-breakpoint - 1)) {
@@ -66,13 +68,13 @@ $breakpoints: (
     // If one or both of the breakpoints don't exist.
   } @else {
     // If lower breakpoint is invalid.
-    @if (map-has-key($breakpoints, $lower) == false) {
+    @if (map.has-key($breakpoints, $lower) == false) {
       // Log a warning.
       @warn 'Your lower breakpoint was invalid: #{$lower}.';
     }
 
     // If upper breakpoint is invalid.
-    @if (map-has-key($breakpoints, $upper) == false) {
+    @if (map.has-key($breakpoints, $upper) == false) {
       // Log a warning.
       @warn 'Your upper breakpoint was invalid: #{$upper}.';
     }
@@ -82,7 +84,7 @@ $breakpoints: (
 @mixin formContainer() {
   @include respond-above(m) {
     display: grid;
-    grid-template-columns: 1fr minmax(auto, $containerFormMaxWidth) 1fr;
+    grid-template-columns: 1fr minmax(auto, variables.$containerFormMaxWidth) 1fr;
 
     > * {
       grid-column: 2;
@@ -97,6 +99,6 @@ $breakpoints: (
     grid-column: 2;
   }
   @include respond-above(l) {
-    grid-template-columns: 1fr minmax(auto, $containerFormMaxWidth) 1fr;
+    grid-template-columns: 1fr minmax(auto, variables.$containerFormMaxWidth) 1fr;
   }
 }

src/assets/styles/main.scss

@@ -1,16 +1,16 @@
-@import '~styles/fonts';
-@import '~styles/variables';
+@use '~styles/fonts';
+@use '~styles/variables';
 
 // Override globally all text to use Helsinki font.
 
 * {
-  font-family: $font-family-base;
+  font-family: fonts.$font-family-base;
 }
 
 p,
 span,
 li {
-  line-height: $baseLineHeight;
+  line-height: variables.$baseLineHeight;
 }
 
 #cookie-consent-language-selector-button {

src/assets/styles/mixins.scss

@@ -1,5 +1,5 @@
-@import '~styles/variables';
-@import '~styles/layout';
+@use '~styles/variables';
+@use '~styles/layout';
 
 /*
  * Pure CSS spinner, taken from:
@@ -17,7 +17,7 @@
 * You should use it in pseudo element, see sample below
 */
 @mixin add_spinner(
-  $size: $spinnerHeight,
+  $size: variables.$spinnerHeight,
   $main-color: var(--color-black-30),
   $alt-color: var(--color-black-90),
   $thickness: 2px

src/assets/styles/variables.scss

@@ -1,4 +1,5 @@
-@import '~hds-design-tokens/lib/all.scss';
+@use '~hds-design-tokens/lib/all.scss' as hds;
+@forward '~hds-design-tokens/lib/all.scss';
 
 $basePadding: 1rem;
 $largePadding: 3rem;
@@ -18,7 +19,7 @@ $imgHeight: 1.5rem;
 
 // Layout
 // (Designer proposal)
-$containerMaxWidth: $container-width-xl;
+$containerMaxWidth: hds.$container-width-xl;
 $containerFormMaxWidth: 800px;
 
 // Line height

src/common/components/alert/alertModal.module.scss

@@ -1,9 +1,9 @@
-@import '~styles/variables';
+@use '~styles/variables';
 
 .modal {
   text-align: center;
 }
 
 .okButton {
-  margin: $largeMargin 0;
+  margin: variables.$largeMargin 0;
 }

src/common/components/button/buttonOverrides.module.scss

@@ -1,4 +1,4 @@
-@import '~styles/variables';
+@use '~styles/variables';
 
 .button {
   --color: var(--color-black);

src/common/components/card/card.module.scss

@@ -1,4 +1,4 @@
-@import '~styles/layout';
+@use '~styles/layout';
 
 .wrapper {
   display: flex;
@@ -7,7 +7,7 @@
   column-gap: var(--spacing-xl);
   background: var(--color-white);
 
-  @include respond-above(m) {
+  @include layout.respond-above(m) {
     display: grid;
     grid-template-columns: 2fr 10fr 1fr;
     align-items: center;
@@ -20,7 +20,7 @@
 .image {
   margin-bottom: unset;
 
-  @include respond-above(m) {
+  @include layout.respond-above(m) {
     width: 20vw;
     height: 20vw;
     min-width: 200px;
@@ -62,7 +62,7 @@
 .cta {
   display: none;
 
-  @include respond-above(m) {
+  @include layout.respond-above(m) {
     display: block;
     justify-self: center;
   }

src/common/components/confirm/confirmModal.module.scss

@@ -1,24 +1,24 @@
-@import '~styles/variables';
-@import '~styles/layout';
+@use '~styles/variables';
+@use '~styles/layout';
 
 .modal {
   text-align: center;
 }
 
 .buttonGroup {
-  margin: $largeMargin 0;
+  margin: variables.$largeMargin 0;
 
-  @include respond-above(m) {
+  @include layout.respond-above(m) {
     display: grid;
-    grid-gap: $baseMargin;
+    grid-gap: variables.$baseMargin;
     grid-auto-flow: column;
   }
 
-  @include respond-below(m) {
+  @include layout.respond-below(m) {
     display: flex;
     flex-direction: column-reverse;
     .okButton {
-      margin-bottom: $baseMargin;
+      margin-bottom: variables.$baseMargin;
     }
   }
 }

src/common/components/error/error.module.scss

@@ -1,10 +1,10 @@
-@import '~styles/layout';
-@import '~styles/variables';
+@use '~styles/layout';
+@use '~styles/variables';
 
 .error {
-  margin: $baseMargin;
-  @include respond-above(m) {
+  margin: variables.$baseMargin;
+  @include layout.respond-above(m) {
     grid-column: 2;
-    margin: $baseMargin 0;
+    margin: variables.$baseMargin 0;
   }
 }

src/common/components/formikWrappers/formikInputs.module.scss

@@ -1,7 +1,7 @@
-@import '~styles/variables';
+@use '~styles/variables';
 
 .formField {
-  padding-bottom: $basePadding;
+  padding-bottom: variables.$basePadding;
 }
 
 /* Hide number input spinners */

src/common/components/giveFeedbackButton/giveFeedbackButton.module.scss

@@ -1,10 +1,10 @@
-@import '~styles/variables';
+@use '~styles/variables';
 
 .container {
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-top: $spacing-layout-l;
+  margin-top: variables.$spacing-layout-l;
 }
 
 .buttonLink {

src/common/components/icon/icon.module.scss

@@ -1,8 +1,8 @@
-@import '~styles/variables';
+@use '~styles/variables';
 
 .imgWrapper {
-  height: $imgHeight;
-  width: $imgHeight;
+  height: variables.$imgHeight;
+  width: variables.$imgHeight;
   display: flex;
   justify-items: center;
   align-items: center;

src/common/components/modal/modal.module.scss

@@ -1,29 +1,29 @@
-@import '~styles/fonts';
-@import '~styles/layout';
-@import '~styles/variables';
+@use '~styles/fonts';
+@use '~styles/layout';
+@use '~styles/variables';
 
 $modalPadding: 2rem;
 $modalWidthLg: 800px;
 
 .modal {
   position: relative;
 
-  background-color: var(--color-white);
+  background-color: variables.$color-white;
   margin: auto;
 
   &:focus {
     outline: none;
   }
 
   // Make tab-key jump between fields
-  @include respond-below(l) {
+  @include layout.respond-below(l) {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
   }
-  @include respond-above(l) {
+  @include layout.respond-above(l) {
     width: $modalWidthLg;
   }
 }
@@ -49,39 +49,39 @@ $modalWidthLg: 800px;
   display: flex;
   justify-content: flex-end;
 
-  @include respond-below(l) {
+  @include layout.respond-below(l) {
     z-index: 1;
     position: relative;
   }
 
   button {
     padding: 0;
     border: none;
-    height: $largeMargin;
-    width: $largeMargin;
+    height: variables.$largeMargin;
+    width: variables.$largeMargin;
   }
 }
 
 .modalContent {
-  background-color: var(--color-white);
-  padding: $basePadding $largePadding;
+  background-color: variables.$color-white;
+  padding: variables.$basePadding variables.$largePadding;
 
-  @include respond-below(l) {
+  @include layout.respond-below(l) {
     // Ensure that modal is vertically scrollable on mobile
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
-    padding: $largePadding 0;
+    padding: variables.$largePadding 0;
     overflow: auto;
   }
 }
 
 .modalChildren {
   padding: 0 $modalPadding;
 
-  @include respond-above(m) {
+  @include layout.respond-above(m) {
     padding: 0 $modalPadding;
   }
 }
@@ -90,13 +90,13 @@ $modalWidthLg: 800px;
   display: flex;
   flex-direction: row;
   align-items: center;
-  margin: 0 0 $largeMargin 0;
+  margin: 0 0 variables.$largeMargin 0;
   padding: 0 $modalPadding;
 
   .icon {
-    height: $largeMargin;
-    width: $largeMargin;
-    margin-right: $baseMargin;
+    height: variables.$largeMargin;
+    width: variables.$largeMargin;
+    margin-right: variables.$baseMargin;
   }
 
   h1 {

src/common/components/placeholderImage/placeholderImage.module.scss

@@ -1,4 +1,4 @@
-@import '~styles/variables';
+@use '~styles/variables';
 
 .placeholderImage {
   display: flex;
@@ -7,7 +7,7 @@
   width: 100%;
   height: 100%;
 
-  background-color: $color-summer;
+  background-color: variables.$color-summer;
 
   & > img {
     max-width: 9rem;