Migrate SASS

src/App.scss

@@ -1 +1 @@
-@import './styles/main';
+@use 'styles/main';

src/styles/base/_base-config.scss

@@ -20,7 +20,7 @@
  */
 
 
-@import "reset";
-@import "variables";
-@import "layout";
-@import "fonts";
+@use "reset";
+@use "variables";
+@use "layout";
+@use "fonts";

src/styles/base/_fonts.scss

@@ -1,3 +1,6 @@
+@use "sass:meta";
+@use "variables";
+
 /**
  * Licensed to The Apereo Foundation under one or more contributor license
  * agreements. See the NOTICE file distributed with this work for additional
@@ -26,10 +29,10 @@
 @mixin font-face($font-family, $file, $font-weight, $font-style) {
   @font-face {
     font-family: $font-family;
-      src: url('#{$font-path}#{$file}.eot');
-      src: url('#{$font-path}#{$file}.eot?#iefix') format('embedded-opentype'),
-           url('#{$font-path}#{$file}.woff') format('woff'),
-           url('#{$font-path}#{$file}.ttf') format('truetype');
+      src: url('#{variables.$font-path}#{$file}.eot');
+      src: url('#{variables.$font-path}#{$file}.eot?#iefix') format('embedded-opentype'),
+           url('#{variables.$font-path}#{$file}.woff') format('woff'),
+           url('#{variables.$font-path}#{$file}.ttf') format('truetype');
     font-weight: $font-weight;
     font-style: $font-style;
   }
@@ -53,4 +56,4 @@
 
 @include font-face('FontAwesome', 'fontawesome-webfont', normal, normal);
 
-@import "fontawesome/fontawesome-config";
+@include meta.load-css("fontawesome/fontawesome-config");

src/styles/base/_layout.scss

@@ -1,3 +1,5 @@
+@use "variables";
+
 /**
  * Licensed to The Apereo Foundation under one or more contributor license
  * agreements. See the NOTICE file distributed with this work for additional
@@ -24,15 +26,15 @@ html,
 body {
     width: 100%;
     height: 100%;
-    font-family: $font-stack;
+    font-family: variables.$font-stack;
 }
 
 body {
-    background: $body-background;
+    background: variables.$body-background;
     font-size: 14px;
-    font-family: $font-stack;
+    font-family: variables.$font-stack;
     position: relative;
-    color: $global-text-color;
+    color: variables.$global-text-color;
 
 }
 
@@ -43,7 +45,7 @@ a {
     text-decoration: none;
 
     &:hover {
-        color: $color-link-hover;
+        color: variables.$color-link-hover;
     }
 }
 

src/styles/base/_variables.scss

@@ -1,3 +1,6 @@
+@use "sass:color";
+@use "../../../node_modules/bourbon/core/bourbon/library/shade";
+
 /**
  * Licensed to The Apereo Foundation under one or more contributor license
  * agreements. See the NOTICE file distributed with this work for additional
@@ -64,10 +67,10 @@ $color-white:               #fff;
 
 
 // Primary color with light/medium/darker shades
-$prim-color:                   darken(#fff, 50%);
-$light-prim-color:             lighten($prim-color, 15%);
-$medium-prim-color:            darken($prim-color, 10%);
-$dark-prim-color:              darken($prim-color, 30%);
+$prim-color:                   color.adjust(#fff, $lightness: -50%);
+$light-prim-color:             color.adjust($prim-color, $lightness: 15%);
+$medium-prim-color:            color.adjust($prim-color, $lightness: -10%);
+$dark-prim-color:              color.adjust($prim-color, $lightness: -30%);
 
 $global-text-color:            $medium-prim-color;
 
@@ -86,15 +89,15 @@ $color-link-hover:              $dark-prim-color;
 
 // Highlights and Lowlights
 // ----------------------------------------
-$primary-color-green-light-3: lighten($primary-color-green, 24%);   // #92e0bb
-$primary-color-green-light-2: lighten($primary-color-green, 12%);   // #63d29e
-$primary-color-green-light-1: lighten($primary-color-green, 6%);    // #4bcc8f
+$primary-color-green-light-3: color.adjust($primary-color-green, $lightness: 24%);   // #92e0bb
+$primary-color-green-light-2: color.adjust($primary-color-green, $lightness: 12%);   // #63d29e
+$primary-color-green-light-1: color.adjust($primary-color-green, $lightness: 6%);    // #4bcc8f
 
-$primary-color-green-dark-1: darken($primary-color-green, 9%);      // #2d9d68
-$primary-color-green-dark-2: darken($primary-color-green, 15%);     // #268558
-$primary-color-green-dark-3: darken($primary-color-green, 20%);     // #20724b
+$primary-color-green-dark-1: color.adjust($primary-color-green, $lightness: -9%);      // #2d9d68
+$primary-color-green-dark-2: color.adjust($primary-color-green, $lightness: -15%);     // #268558
+$primary-color-green-dark-3: color.adjust($primary-color-green, $lightness: -20%);     // #20724b
 
-$table-highlight: lighten($light-prim-color, 28%);
+$table-highlight: color.adjust($light-prim-color, $lightness: 28%);
 
 // Border
 // ----------------------------------------
@@ -143,8 +146,8 @@ $modal-nav-bg-color:            #eeeff0;
 $modal-nav-border-color:        #d6d6d6;
 $modal-nav-link-color:          #646E75;
 $modal-nav-link-active-color:   $header-link-color;
-$subpage-navigation-link-color: lighten($header-link-color, 25%);
-$subpage-navigation-link-hover-color: lighten($header-link-color, 35%);
+$subpage-navigation-link-color: color.adjust($header-link-color, $lightness: 25%);
+$subpage-navigation-link-hover-color: color.adjust($header-link-color, $lightness: 35%);
 
 // Stats
 // ----------------------------------------
@@ -208,22 +211,22 @@ $img-path:                      "/src/img/";
 // Success (Green)
 $state-success-text:             #3c763d;
 $state-success-bg:               #dff0d8;
-$state-success-border:           darken(shade($state-success-bg, 1%), 3%);
+$state-success-border:           color.adjust(shade.shade($state-success-bg, 1%), $lightness: -3%);
 
 // Info (Blue)
-$state-info-text:                lighten(#31708f, 5%);
+$state-info-text:                color.adjust(#31708f, $lightness: 5%);
 $state-info-bg:                  #d9edf7;
-$state-info-border:              darken(shade($state-info-bg, 1%), 5%);
+$state-info-border:              color.adjust(shade.shade($state-info-bg, 1%), $lightness: -5%);
 
 // Warning (Yellow)
 $state-warning-text:             #8a6d3b;
 $state-warning-bg:               #fcf8e3;
-$state-warning-border:           darken(shade($state-warning-bg, 1%), 5%);
+$state-warning-border:           color.adjust(shade.shade($state-warning-bg, 1%), $lightness: -5%);
 
 // Danger (Red)
 $state-danger-text:              #a94442;
 $state-danger-bg:                #f2dede;
-$state-danger-border:            darken(shade($state-danger-bg, 1%), 3%);
+$state-danger-border:            color.adjust(shade.shade($state-danger-bg, 1%), $lightness: -3%);
 
 // Transition
 $alert-transition: color 300ms ease-in;

src/styles/base/fontawesome/_animated.scss

@@ -1,12 +1,14 @@
+@use "variables";
+
 // Spinning Icons
 // --------------------------
 
-.#{$fa-css-prefix}-spin {
+.#{variables.$fa-css-prefix}-spin {
   -webkit-animation: fa-spin 2s infinite linear;
           animation: fa-spin 2s infinite linear;
 }
 
-.#{$fa-css-prefix}-pulse {
+.#{variables.$fa-css-prefix}-pulse {
   -webkit-animation: fa-spin 1s infinite steps(8);
           animation: fa-spin 1s infinite steps(8);
 }

src/styles/base/fontawesome/_bordered-pulled.scss

@@ -1,25 +1,27 @@
+@use "variables";
+
 // Bordered & Pulled
 // -------------------------
 
-.#{$fa-css-prefix}-border {
+.#{variables.$fa-css-prefix}-border {
   padding: .2em .25em .15em;
-  border: solid .08em $fa-border-color;
+  border: solid .08em variables.$fa-border-color;
   border-radius: .1em;
 }
 
-.#{$fa-css-prefix}-pull-left { float: left; }
-.#{$fa-css-prefix}-pull-right { float: right; }
+.#{variables.$fa-css-prefix}-pull-left { float: left; }
+.#{variables.$fa-css-prefix}-pull-right { float: right; }
 
-.#{$fa-css-prefix} {
-  &.#{$fa-css-prefix}-pull-left { margin-right: .3em; }
-  &.#{$fa-css-prefix}-pull-right { margin-left: .3em; }
+.#{variables.$fa-css-prefix} {
+  &.#{variables.$fa-css-prefix}-pull-left { margin-right: .3em; }
+  &.#{variables.$fa-css-prefix}-pull-right { margin-left: .3em; }
 }
 
 /* Deprecated as of 4.4.0 */
 .pull-right { float: right; }
 .pull-left { float: left; }
 
-.#{$fa-css-prefix} {
+.#{variables.$fa-css-prefix} {
   &.pull-left { margin-right: .3em; }
   &.pull-right { margin-left: .3em; }
 }

src/styles/base/fontawesome/_core.scss

@@ -1,11 +1,13 @@
+@use "variables";
+
 @use "sass:list";
 
 // Base Class Definition
 // -------------------------
 
-.#{$fa-css-prefix} {
+.#{variables.$fa-css-prefix} {
   display: inline-block;
-  font: normal normal normal list.slash($fa-font-size-base, $fa-line-height-base) FontAwesome; // shortening font declaration
+  font: normal normal normal list.slash(variables.$fa-font-size-base, variables.$fa-line-height-base) FontAwesome; // shortening font declaration
   font-size: inherit; // can't have font-size inherit on line above, so need to override
   text-rendering: auto; // optimizelegibility throws things off #1094
   -webkit-font-smoothing: antialiased;

src/styles/base/fontawesome/_fa-mixins.scss

@@ -67,4 +67,18 @@
     &:#{$pseudo-position} {
         float: $float;
     }
-}
+}
+
+// Font Smoothing
+@mixin font-smoothing($value: on) {
+
+    @if $value == on {
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+
+    @if $value == off {
+        -webkit-font-smoothing: subpixel-antialiased;
+        -moz-osx-font-smoothing: auto;
+    }
+}

src/styles/base/fontawesome/_fa-variables.scss

@@ -1,3 +1,5 @@
+@use "variables";
+
 /**
  * Licensed to The Apereo Foundation under one or more contributor license
  * agreements. See the NOTICE file distributed with this work for additional
@@ -19,4 +21,4 @@
  *
  */
 
-$fa-icon-warning-sign:  $fa-var-warning;
+$fa-icon-warning-sign:  variables.$fa-var-warning;

src/styles/base/fontawesome/_fixed-width.scss

@@ -1,9 +1,11 @@
+@use "variables";
+
 @use "sass:math";
 
 // Fixed Width Icons
 // -------------------------
 
-.#{$fa-css-prefix}-fw {
+.#{variables.$fa-css-prefix}-fw {
   width: math.div(18em, 14);
   text-align: center;
 }

src/styles/base/fontawesome/_fontawesome-config.scss

@@ -20,18 +20,18 @@
  */
 
 
-@import "variables";
-@import "fa-variables"; // Our own version
-@import "mixins";
-@import "fa-mixins"; // Our own version
+@use "variables";
+@use "fa-variables"; // Our own version
+@use "mixins";
+@use "fa-mixins"; // Our own version
 //@import "path"; // already included
-@import "core";
-@import "larger";
-@import "fixed-width";
-@import "list";
-@import "bordered-pulled";
-@import "animated";
-@import "rotated-flipped";
-@import "stacked";
-@import "icons";
-@import "screen-reader";
+@use "core";
+@use "larger";
+@use "fixed-width";
+@use "list";
+@use "bordered-pulled";
+@use "animated";
+@use "rotated-flipped";
+@use "stacked";
+@use "icons";
+@use "screen-reader";