Fix deprecated functions in sass files

src/scss/components/_button.scss

@@ -1,10 +1,12 @@
+@use '../functions';
+
 .button,
 .btn {
   display: inline-block;
   border: 0;
   background-color: var(--color-action-bg);
   color: var(--color-action-text);
-  padding: get-size(300) get-size('base');
+  padding: functions.get-size(300) functions.get-size('base');
   line-height: 1;
   margin: 0;
   text-decoration: none;

src/scss/components/_form.scss

@@ -1,3 +1,6 @@
+@use '../tokens';
+@use 'sass:map';
+
 .home .form-container {
   svg > path:first-child {
     fill: #f1f0f6;
@@ -40,7 +43,7 @@ label {
 input,
 textarea,
 select {
-  font-family: #{map-get($tokens, 'fonts', 'base')};
+  font-family: #{map.get(tokens.$tokens, 'fonts', 'base')};
   background-color: var(--color-primary-glare);
   font: inherit;
   border: 0;

src/scss/components/_intro.scss

@@ -1,3 +1,5 @@
+@use '../functions';
+
 .intro {
   margin-top: 8rem;
   
@@ -7,8 +9,8 @@
   }
 
   &__summary {
-    --flow-space: #{get-size(500)};
-    font-size: get-size(500);
+    --flow-space: #{functions.get-size(500)};
+    font-size: functions.get-size(500);
 
     a {
       color: currentColor;

src/scss/components/_modal.scss

@@ -1,3 +1,6 @@
+@use '../tokens';
+@use 'sass:map';
+
 .modal-content {
   border: 0;
   border-radius: 1.5rem;
@@ -10,7 +13,7 @@
   }
 
   h3 {
-    font-family: #{map-get($tokens, 'fonts', 'brand')};
+    font-family: #{map.get(tokens.$tokens, 'fonts', 'brand')};
     font-size: 1.5rem;
   }
 }

src/scss/components/_nav.scss

@@ -1,3 +1,5 @@
+@use '../functions';
+
 .nav {
   &__list {
     overflow-x: auto;
@@ -19,7 +21,7 @@
   }
 
   &__item {
-    padding: get-size(300) 0;
+    padding: functions.get-size(300) 0;
     flex-shrink: 0;
 
     a {

src/scss/components/_post.scss

@@ -1,3 +1,9 @@
+@use '../config';
+@use '../functions';
+@use '../tokens';
+@use '../utilities/visually-hidden';
+@use 'sass:map';
+
 .post {
   margin-bottom: 8rem;
 
@@ -38,23 +44,23 @@
     blockquote {
       border-left: .4rem solid var(--color-theme-primary-glare);
       margin-left: 0;
-      padding-left: get-size(500);
+      padding-left: functions.get-size(500);
       font-style: italic;
-      font-size: get-size(600);
+      font-size: functions.get-size(600);
 
       p {
         opacity: .85;
-        padding: get-size(500) 0;
+        padding: functions.get-size(500) 0;
       }
     }
 
     ol:not([class]),
     ul:not([class]) {
-      margin-left: get-size(800);
+      margin-left: functions.get-size(800);
       margin-bottom: 1rem;
 
       li + li {
-        margin-top: get-size(300);
+        margin-top: functions.get-size(300);
       }
     }
 
@@ -64,7 +70,7 @@
     .video-player,
     .video-player + *,
     video {
-      --flow-space: #{get-size('max')};
+      --flow-space: #{functions.get-size('max')};
     }
 
     figure,
@@ -72,7 +78,7 @@
     .video-player,
     video {
       width: 100%;
-      max-width: map-get($metrics, 'wrap-max-width');
+      max-width: map.get(config.$metrics, 'wrap-max-width');
       position: relative;
     }
 
@@ -84,9 +90,9 @@
     figcaption {
       font-size: .8em;
       font-style: italic;
-      max-width: map-get($metrics, 'wrap-inner-max-width');
+      max-width: map.get(config.$metrics, 'wrap-inner-max-width');
       margin: .5rem auto 0;
-      padding: 0 get-size(500);
+      padding: 0 functions.get-size(500);
     }
 
     .post-info {
@@ -103,8 +109,8 @@
     pre > code {
       display: block;
       background: var(--color-dark);
-      padding: get-size(700);
-      font-size: get-size(500);
+      padding: functions.get-size(700);
+      font-size: functions.get-size(500);
     }
 
     // page specific
@@ -288,7 +294,7 @@
           }
 
           h2 {
-            font-family: #{map-get($tokens, 'fonts', 'base')};
+            font-family: #{map.get(tokens.$tokens, 'fonts', 'base')};
             text-align: left;
             font-weight: 600;
             margin-bottom: 1rem;
@@ -328,7 +334,7 @@
 
     h2 {
       flex-shrink: 0;
-      margin-right: get-size('base');
+      margin-right: functions.get-size('base');
       color: var(--color-dark);
     }
 

src/scss/components/_skip-link.scss

@@ -1,3 +1,6 @@
+@use '../functions';
+@use '../utilities/visually-hidden';
+
 .skip-link:not(:focus) {
   @extend %visually-hidden;
 }
@@ -7,7 +10,7 @@
   position: absolute;
   top: 0;
   left: 0;
-  padding: get-size(300) get-size(500) get-size('base') get-size(500);
+  padding: functions.get-size(300) functions.get-size(500) functions.get-size('base') functions.get-size(500);
   background-color: var(--color-action-bg);
   color: var(--color-action-text);
   line-height: 1;