feat: Resolve all deprecation warnings for sass

- Replace @import with @use and @forward
- Only color function is used in _basic.scss for now
- Change _all.scss to _index.scss
- Modules use direct dependencies
- Move @include from _config.scss to _common.scss, this was a long term mistake
- Remove $color_list
- Change basic_color()

mixins/_all.scss

@@ -1,6 +0,0 @@
-@import "media_query";
-@import "sprite";
-@import "flow";
-@import "color";
-@import "user_agent";
-@import "vendor";

mixins/_color.scss

@@ -1,22 +1,24 @@
 @use "sass:map";
 
-@mixin addDefaultColors() {
-  @if map.has-key($color_palette, alpha) {
-    $alpha_color: map.get($color_palette, alpha) !global;
+@use "../global/config";
+
+@mixin addDefaultColors {
+  @if map.has-key(config.$color_palette, alpha) {
+    $alpha_color: map.get(config.$color_palette, alpha) !global;
   }
-  @if map.has-key($color_palette, bravo) {
-    $bravo_color: map.get($color_palette, bravo) !global;
+  @if map.has-key(config.$color_palette, bravo) {
+    $bravo_color: map.get(config.$color_palette, bravo) !global;
   }
-  @if map.has-key($color_palette, charlie) {
-    $charlie_color: map.get($color_palette, charlie) !global;
+  @if map.has-key(config.$color_palette, charlie) {
+    $charlie_color: map.get(config.$color_palette, charlie) !global;
   }
-  @if map.has-key($color_palette, delta) {
-    $delta_color: map.get($color_palette, delta) !global;
+  @if map.has-key(config.$color_palette, delta) {
+    $delta_color: map.get(config.$color_palette, delta) !global;
   }
-  @if map.has-key($color_palette, echo) {
-    $echo_color: map.get($color_palette, echo) !global;
+  @if map.has-key(config.$color_palette, echo) {
+    $echo_color: map.get(config.$color_palette, echo) !global;
   }
-  @if map.has-key($color_palette, foxtrot) {
-    $foxtrot_color: map.get($color_palette, foxtrot) !global;
+  @if map.has-key(config.$color_palette, foxtrot) {
+    $foxtrot_color: map.get(config.$color_palette, foxtrot) !global;
   }
 }

mixins/_index.scss

@@ -0,0 +1,6 @@
+@forward "media_query";
+@forward "sprite";
+@forward "flow";
+//@use "./_color";
+@forward "user_agent";
+@forward "vendor";

mixins/_media_query.scss

@@ -1,32 +1,34 @@
+@use "../global/config";
+
 @use "sass:math";
 
 //Sections for Media Queries
 @mixin forPhoneUp {
-  @media (min-width: #{$screen_tiny - 1}) { @content; } //599px
+  @media (min-width: #{config.$screen_tiny - 1}) { @content; } //599px
 }
 @mixin forPhoneOnly {
-  @media (max-width: #{$screen_tiny - 1}) { @content; } //599px
+  @media (max-width: #{config.$screen_tiny - 1}) { @content; } //599px
 }
 @mixin forTabletPortraitUp {
-  @media (min-width: $screen_small) { @content; } //600px
+  @media (min-width: config.$screen_small) { @content; } //600px
 }
 @mixin forTabletPortraitOnly {
-  @media (min-width: $screen_tiny) and (max-width: #{$screen_small - 1}) { @content; } //600px - 899px
+  @media (min-width: config.$screen_tiny) and (max-width: #{config.$screen_small - 1}) { @content; } //600px - 899px
 }
 @mixin forTabletLandscapeUp {
-  @media (min-width: $screen_small) { @content; } //900px
+  @media (min-width: config.$screen_small) { @content; } //900px
 }
 @mixin forTabletLandscapeOnly {
-  @media (min-width: $screen_small) and (max-width: #{$screen_medium - 1}) { @content; } //900px - 1199px
+  @media (min-width: config.$screen_small) and (max-width: #{config.$screen_medium - 1}) { @content; } //900px - 1199px
 }
 @mixin forDesktopUp {
-  @media (min-width: $screen_medium) { @content; } //1200px
+  @media (min-width: config.$screen_medium) { @content; } //1200px
 }
 @mixin forDesktopOnly {
-  @media (min-width: $screen_medium) and (max-width: #{$screen_huge - 1}) { @content; } //1200px - 1799px
+  @media (min-width: config.$screen_medium) and (max-width: #{config.$screen_huge - 1}) { @content; } //1200px - 1799px
 }
 @mixin forBigDesktopUp {
-  @media (min-width: $screen_huge) { @content; } //1800px
+  @media (min-width: config.$screen_huge) { @content; } //1800px
 }
 
 //Mobile-first Media Query

mixins/_user_agent.scss

@@ -1,9 +1,9 @@
-@mixin overrideUserAgent() {
-  @if $no_agent_focus == true {
-    @each $el in $io_focus_list {
-      #{$el}:focus {
-        outline: 0;
-      }
-    }
-  }
+@mixin overrideUserAgent($active, $elements) {
+	@if $active == true {
+		@each $el in $elements {
+			#{$el}:focus {
+				outline: 0;
+			}
+		}
+	}
 }