chore: address/ignore SCSS warnings from upgraded sass + stylelint

* used sass-migrator to auto-fix use of deprecated global functions like mix(), map-merge()
* used sass-migrator to auto-fix things like @media query syntax
* suppress other SASS deprecation warnings that we cannot fix at this time
* update stylelint rules

.stylelintrc.json

@@ -31,6 +31,13 @@
       "ignoreProperties": ["xs", "sm", "md", "lg", "xl", "xxl"]
     }],
     "alpha-value-notation": "number",
-    "color-function-notation": "legacy"
+    "color-function-notation": "legacy",
+    "import-notation": "string",
+    "at-rule-empty-line-before": ["always", {
+      "except": ["blockless-after-same-name-blockless", "first-nested"],
+      "ignore": ["after-comment"],
+      "ignoreAtRules": ["import"]
+    }],
+    "declaration-block-no-redundant-longhand-properties": null
   }
 }

build-scss.js

@@ -18,6 +18,8 @@ var coreResult = sass.renderSync({
   file: './scss/core/core.scss',
   outputStyle: 'compressed',
   importer: tildaImporter,
+  // For now we can't resolve these warnings as we need to upgrade our 'bootstrap' dependency to do so:
+  silenceDeprecations: ['abs-percent', 'color-functions', 'import', 'mixed-decls', 'global-builtin'],
 });
 
 fs.writeFileSync('./dist/paragon.css', coreResult.css);

scss/core/_exports.module.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 // Grid breakpoints
 //
 // Define the minimum dimensions at which your layout will change,
@@ -13,10 +14,10 @@ $grid-breakpoints: (
 ) !default;
 
 :export {
-  xs: map-get($grid-breakpoints, "xs");
-  sm: map-get($grid-breakpoints, "sm");
-  md: map-get($grid-breakpoints, "md");
-  lg: map-get($grid-breakpoints, "lg");
-  xl: map-get($grid-breakpoints, "xl");
-  xxl: map-get($grid-breakpoints, "xxl");
+  xs: map.get($grid-breakpoints, "xs");
+  sm: map.get($grid-breakpoints, "sm");
+  md: map.get($grid-breakpoints, "md");
+  lg: map.get($grid-breakpoints, "lg");
+  xl: map.get($grid-breakpoints, "xl");
+  xxl: map.get($grid-breakpoints, "xxl");
 }

scss/core/_functions.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+@use "sass:meta";
 @import "~bootstrap/scss/functions";
 
 //
@@ -15,20 +17,20 @@
   $base-color: #808080 !default;
   $color-level: 500 !default;
 
-  @if map-has-key($theme-colors, $color-name) {
-    $base-color: map-get($theme-colors, $color-name);
+  @if map.has-key($theme-colors, $color-name) {
+    $base-color: map.get($theme-colors, $color-name);
   }
 
-  @if type-of($variant) == "number" {
+  @if meta.type-of($variant) == "number" {
     $color-level: $variant;
   }
 
-  @else if map-has-key($element-color-levels, $variant) {
-    $color-level: map-get($element-color-levels, $variant);
+  @else if map.has-key($element-color-levels, $variant) {
+    $color-level: map.get($element-color-levels, $variant);
   }
 
-  @if map-has-key($theme-color-levels, "#{$color-name}-#{$color-level}") {
-    @return map-get($theme-color-levels, "#{$color-name}-#{$color-level}");
+  @if map.has-key($theme-color-levels, "#{$color-name}-#{$color-level}") {
+    @return map.get($theme-color-levels, "#{$color-name}-#{$color-level}");
   }
 
   @return $base-color;

scss/core/_typography.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @import "~bootstrap/scss/type";
 
 @mixin mobile-type {
@@ -40,7 +41,7 @@
   }
 }
 
-@media (max-width: map-get($grid-breakpoints, "sm")) {
+@media (max-width: map.get($grid-breakpoints, "sm")) {
   @include mobile-type;
 }
 

scss/core/_utilities.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @import "~bootstrap/scss/utilities";
 
 // Add background, border, and text color utilities
@@ -81,7 +82,7 @@ $color-levels: 100, 200, 300, 400, 500, 600, 700, 800, 900;
 
 // Define classes for z-index
 $indexes: () !default;
-$indexes: map-merge(
+$indexes: map.merge(
   (
     0: 0,
     1: 200,