Migrate SASS towards dart-sass version 1.80.

_sass/_mixins.scss

@@ -1,22 +1,25 @@
+@use "sass:color";
+@use "settings";
+
 @mixin screen-size($media) {
     @if $media == small {
-        @media only screen and (max-width: $break-small) {
+        @media only screen and (max-width: settings.$break-small) {
             @content;
         }
     } @else if $media == small-medium {
-        @media only screen and (max-width: $break-large - 1) {
+        @media only screen and (max-width: settings.$break-large - 1) {
             @content;
         }
     } @else if $media == medium {
-        @media only screen and (min-width: $break-small + 1) and (max-width: $break-large - 1) {
+        @media only screen and (min-width: settings.$break-small + 1) and (max-width: settings.$break-large - 1) {
             @content;
         }
     } @else if $media == medium-large {
-        @media only screen and (min-width: $break-small + 1) {
+        @media only screen and (min-width: settings.$break-small + 1) {
             @content;
         }
     } @else if $media == large {
-        @media only screen and (min-width: $break-large) {
+        @media only screen and (min-width: settings.$break-large) {
             @content;
         }
     }
@@ -158,7 +161,7 @@
     display: block;
 
     &.success {
-        background-color: $colour-success;
+        background-color: settings.$colour-success;
         color: white;
 
         a {
@@ -170,10 +173,10 @@
         }
     }
     &.notice {
-        background-color: $colour-notice;
+        background-color: settings.$colour-notice;
     }
     &.warning {
-        background-color: $colour-warning;
+        background-color: settings.$colour-warning;
         color: white;
 
         a {
@@ -235,14 +238,14 @@
     background-color: #efefef;
 
     &.success {
-        background-color: $colour-success;
-        color: darken($colour-success, 50%);
+        background-color: settings.$colour-success;
+        color: color.adjust(settings.$colour-success, $lightness: -50%);
     }
     &.notice {
-        background-color: $colour-notice;
+        background-color: settings.$colour-notice;
     }
     &.warning {
-        background-color: $colour-warning;
+        background-color: settings.$colour-warning;
         color: white;
     }
 }

_sass/_patterns.scss

@@ -1,42 +1,42 @@
 // Each pattern comes with a mixin. They may also be included seperately
 // in a project and applied on custom markup.
 
-@import "fonts";
-@import "settings";
-@import "mixins";
+@use "fonts";
+@use "settings";
+@use "mixins";
 
 // Individual scss files are imported for each Pattern. These files may
 // also be imported seperately in a project, but always require the Patterns
 // mixins
 
-@import "components/avatar";
-@import "components/button";
-@import "components/button-bar";
-@import "components/form";
-@import "components/icon";
-@import "src/pat/auto-scale/auto-scale";
-@import "src/pat/auto-suggest/auto-suggest";
-@import "src/pat/carousel/carousel";
-@import "src/pat/checklist/checklist";
-@import "src/pat/collapsible/collapsible";
-@import "src/pat/colour-picker/colour-picker";
-@import "src/pat/date-picker/date-picker";
-@import "src/pat/datetime-picker/datetime-picker";
-@import "src/pat/equaliser/equaliser";
-@import "src/pat/expandable-tree/expandable-tree";
-@import "src/pat/focus/focus";
-@import "src/pat/gallery/gallery";
-@import "src/pat/grid/grid";
-@import "src/pat/image-crop/image-crop";
-@import "src/pat/inject/inject";
-@import "src/pat/inject/injection";
-@import "src/pat/masonry/masonry";
-@import "src/pat/menu/menu";
-@import "src/pat/modal/modal";
-@import "src/pat/notification/notification";
-@import "src/pat/sortable/sortable";
-@import "src/pat/stacks/stacks";
-@import "src/pat/switch/switch";
-@import "src/pat/syntax-highlight/syntax-highlight";
-@import "src/pat/toggle/toggle";
-@import "src/pat/tooltip/tooltip";
+@use "components/avatar";
+@use "components/button";
+@use "components/button-bar";
+@use "components/form";
+@use "components/icon";
+@use "../src/pat/auto-scale/auto-scale";
+@use "../src/pat/auto-suggest/auto-suggest";
+@use "../src/pat/carousel/carousel";
+@use "../src/pat/checklist/checklist";
+@use "../src/pat/collapsible/collapsible";
+@use "../src/pat/colour-picker/colour-picker";
+@use "../src/pat/date-picker/date-picker";
+@use "../src/pat/datetime-picker/datetime-picker";
+@use "../src/pat/equaliser/equaliser";
+@use "../src/pat/expandable-tree/expandable-tree";
+@use "../src/pat/focus/focus";
+@use "../src/pat/gallery/gallery";
+@use "../src/pat/grid/grid";
+@use "../src/pat/image-crop/image-crop";
+@use "../src/pat/inject/inject";
+@use "../src/pat/inject/injection";
+@use "../src/pat/masonry/masonry";
+@use "../src/pat/menu/menu";
+@use "../src/pat/modal/modal";
+@use "../src/pat/notification/notification";
+@use "../src/pat/sortable/sortable";
+@use "../src/pat/stacks/stacks";
+@use "../src/pat/switch/switch";
+@use "../src/pat/syntax-highlight/syntax-highlight";
+@use "../src/pat/toggle/toggle";
+@use "../src/pat/tooltip/tooltip";

_sass/components/_avatar.scss

@@ -1,3 +1,5 @@
+@use "../mixins";
+
 .pat-avatar {
-    @include pat-avatar();
+    @include mixins.pat-avatar();
 }

_sass/components/_button.scss

@@ -1,7 +1,9 @@
+@use "../settings";
+
 @charset "UTF-8";
 
 @mixin pat-button() {
-    font-family: $body-font-family;
+    font-family: settings.$body-font-family;
     margin: 0 0.5em 0 0;
     border: 1px solid rgba(0, 0, 0, 0.3);
     cursor: default;
@@ -59,7 +61,7 @@
 
 ::-webkit-search-cancel-button {
     &:hover {
-        color: $colour-accent;
+        color: settings.$colour-accent;
     }
     &::after {
         content: "\e803";

_sass/components/_form.scss

@@ -1,3 +1,6 @@
+@use "../mixins";
+@use "../settings";
+
 @charset "UTF-8";
 
 form {
@@ -11,13 +14,13 @@ form {
 
     .pat-message,
     .message {
-        @include pat-message();
-        @include box-sizing();
-
         display: block;
         clear: both;
         margin-top: 0.5em;
         font-style: normal;
+
+        @include mixins.box-sizing();
+        @include mixins.pat-message();
     }
 
     h2 {
@@ -27,12 +30,13 @@ form {
     input,
     textarea,
     select {
+        @include mixins.box-sizing();
+
         -webkit-appearance: none;
         -moz-appearance: none;
         appearance: none;
-        font-family: $body-font-family;
+        font-family: settings.$body-font-family;
         display: inline-block;
-        @include box-sizing();
         padding: 0.2em 0.5em;
         margin: -0.2em 0;
         background-color: rgba(0, 0, 0, 0.09);
@@ -57,7 +61,7 @@ form {
 
         &::-webkit-search-cancel-button {
             &:hover {
-                color: $colour-accent;
+                color: settings.$colour-accent;
             }
             &::after {
                 content: "\e803";
@@ -97,7 +101,7 @@ form {
     input[type="range"]::-webkit-slider-runnable-track {
         // width: 300px;
         height: 0.5em;
-        background: $colour-base;
+        background: settings.$colour-base;
         border: none;
         border-radius: 1em;
     }
@@ -108,7 +112,7 @@ form {
         height: 1.4em;
         width: 1.4em;
         border-radius: 50%;
-        background: $colour-accent;
+        background: settings.$colour-accent;
         margin-top: -0.45em;
     }
 
@@ -125,7 +129,7 @@ form {
         height: 1.4em;
         width: 1.4em;
         border-radius: 50%;
-        background: $colour-accent;
+        background: settings.$colour-accent;
     }
 
     /*hide the outline behind the border*/
@@ -139,7 +143,7 @@ form {
         height: 0.5em;
 
         /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
-        background: $colour-base;
+        background: settings.$colour-base;
 
         /*leave room for the larger thumb to overflow with a transparent border */
         border-color: transparent;
@@ -166,7 +170,7 @@ form {
         height: 1.4em;
         width: 1.4em;
         border-radius: 50%;
-        background: $colour-accent;
+        background: settings.$colour-accent;
     }
 
     input[type="range"]:focus::-ms-fill-lower {

src/pat/auto-suggest/_auto-suggest.scss

@@ -1,5 +1,5 @@
 @charset "UTF-8";
-@import "settings";
+@use "../../../_sass/settings";
 
 /* @group Auto suggest */
 
@@ -357,15 +357,16 @@ Version: 3.4.3 Timestamp: Tue Sep 17 06:47:14 PDT 2013
         display: list-item;
     }
     .select2-disabled {
+        background: #f4f4f4;
+        display: list-item;
+        cursor: default;
+
         &.select2-highlighted {
             color: #666;
             background: #f4f4f4;
             display: list-item;
             cursor: default;
         }
-        background: #f4f4f4;
-        display: list-item;
-        cursor: default;
     }
     .select2-selected {
         display: none;
@@ -377,11 +378,12 @@ disabled look for disabled choices in the results dropdown
 */
 
 .select2-more-results {
+    background: #f4f4f4;
+    display: list-item;
+
     &.select2-active {
         background: #f4f4f4 url("select2-spinner.gif") no-repeat 100%;
     }
-    background: #f4f4f4;
-    display: list-item;
 }
 
 /* disabled styles */
@@ -478,7 +480,7 @@ disabled look for disabled choices in the results dropdown
         -moz-user-select: none;
         -ms-user-select: none;
         user-select: none;
-        background-color: $colour-accent;
+        background-color: settings.$colour-accent;
         font-size: 0.9em;
         font-weight: normal;
 
@@ -513,7 +515,7 @@ disabled look for disabled choices in the results dropdown
     font-size: 1em;
     outline: none;
     &:before {
-        content: "#{$glyph-close}";
+        content: "#{settings.$glyph-close}";
         color: white;
         font: 1em fontello;
     }

src/pat/checklist/_checklist.scss

@@ -1,5 +1,5 @@
 @charset "UTF-8";
-@import "settings";
+@use "../../../_sass/settings";
 
 .pat-checklist {
     > br {
@@ -15,15 +15,15 @@
         &.checked:before,
         &.unchecked:before {
             font-family: fontello;
-            content: "#{$glyph-checkbox}";
+            content: "#{settings.$glyph-checkbox}";
             float: left;
             position: absolute;
             left: 0;
             top: 0em;
         }
 
         &.checked:before {
-            content: "#{$glyph-checkbox-active}";
+            content: "#{settings.$glyph-checkbox-active}";
         }
 
         input[type="checkbox"],
@@ -35,10 +35,10 @@
 
     &.radio label {
         &:before {
-            content: "#{$glyph-radio-button}";
+            content: "#{settings.$glyph-radio-button}";
         }
         &.checked:before {
-            content: "#{$glyph-radio-button-active}";
+            content: "#{settings.$glyph-radio-button-active}";
         }
     }
 

src/pat/collapsible/_collapsible.scss

@@ -1,5 +1,5 @@
-@import "settings";
-@import "components/button";
+@use "../../../_sass/settings";
+@use "../../../_sass/components/button";
 
 .pat-collapsible {
     margin-bottom: 0.5em;
@@ -21,14 +21,13 @@
     }
 
     > *:first-child {
-        @include pat-button();
-
         font-weight: normal;
         width: 100%;
 
         -moz-box-sizing: border-box;
         -webkit-box-sizing: border-box;
         box-sizing: border-box;
         // font-size: 0.8em;
+        @include button.pat-button();
     }
 }

src/pat/colour-picker/_colour-picker.scss

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 
-@import "spectrum-colorpicker/spectrum";
+@use "../../../node_modules/spectrum-colorpicker/spectrum";
 
 .checkNative,
 .checkPattern {