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/_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