replace deprecated scss

resources/css/global/_typography.scss

@@ -1,3 +1,8 @@
+@use "fonts";
+@use "variables/breakpoints";
+@use "variables/colours";
+@use "variables/spacing";
+
 .wysiwyg {
   *:first-child {
     margin-top: 0;
@@ -14,9 +19,9 @@ h3,
 h4,
 h5,
 h6 {
-  color: $primary;
+  color: colours.$primary;
   font-weight: 700;
-  font-family: $font;
+  font-family: fonts.$font;
   line-height: 1.1em;
   margin: 1.5em 0 0.25em;
   padding: 0;
@@ -27,7 +32,7 @@ h6 {
 
   @media screen {
     .knockout & {
-      color: $white;
+      color: colours.$white;
     }
   }
 }
@@ -43,7 +48,7 @@ h3 { font-size: 1.25em; }
 h4,
 h5 { font-size: 1.15em; }
 
-@media (min-width: $screen-sm) {
+@media (min-width: breakpoints.$screen-sm) {
   h1 { font-size: 2.5em; }
   h2 { font-size: 2em; }
   h3 { font-size: 1.5em; }
@@ -58,8 +63,8 @@ p,
 li,
 td,
 label {
-  color: $grey;
-  font-family: $font;
+  color: colours.$grey;
+  font-family: fonts.$font;
   font-weight: 400;
   line-height: 1.5em;
   margin: 0 0 0.8em;
@@ -67,30 +72,30 @@ label {
 
   @media screen {
     .knockout & {
-      color: $white;
+      color: colours.$white;
     }
   }
 }
 
 a {
-  color: $primary;
+  color: colours.$primary;
   text-decoration: none;
   outline: none;
   transition: all 300ms ease;
 
   &:hover,
   &:focus {
-    color: $primary-dark;
+    color: colours.$primary-dark;
     text-decoration: none;
   }
 
   @media screen {
     .knockout & {
-      color: $white;
+      color: colours.$white;
 
       &:hover,
       &:focus {
-        color: $primary-light;
+        color: colours.$primary-light;
       }
     }
   }
@@ -126,12 +131,12 @@ ol {
 hr {
   margin: 1.5em auto 2em;
   height: 0;
-  border: 0 solid $grey-light;
-  border-width: $borderThin 0 0;
+  border: 0 solid colours.$grey-light;
+  border-width: spacing.$borderThin 0 0;
 
   @media screen {
     .knockout & {
-      border-color: $white;
+      border-color: colours.$white;
     }
   }
 }