refactor(toasts): use new mixin toast-class-variant() and the old one toast-variant() to have backward compatibility.

Author: sciborrudnicki

src/_toasts.scss

@@ -6,9 +6,8 @@
 // Toasts
 .toast {
   // @include toast-variant($dark-color); // old spectre.css
-  // @include toast-variant('dark-color'); // old @angular-package/spectre.css
-  background: color('dark-color', $alpha: 0.95);
-  border-color: color('dark-color');
+  @include toast-variant($color: 'dark-color');
+
   // border: $border-width solid $dark-color; // old spectre.css
   border: get-var('border-width') solid color('dark-color');
   // border-radius: $border-radius; // old spectre.css
@@ -21,18 +20,18 @@
   width: 100%;
 
   // Variants.
-  @include toast-variant($name: 'accent', $color: 'accent-color'); // ! New toast variant.
-  @include toast-variant($name: 'disabled', $color: 'disabled-color'); // ! New toast variant.
-  @include toast-variant($name: 'error', $color: 'error-color');
-  @include toast-variant($name: 'gray', $color: 'gray-color'); // ! New toast variant.
-  @include toast-variant($name: 'gray-dark', $color: 'gray-color-dark'); // ! New toast variant.
-  @include toast-variant($name: 'gray-light', $color: 'gray-color-light'); // ! New toast variant.
-  @include toast-variant($name: 'info', $color: 'info-color'); // ! New toast variant.
-  @include toast-variant($name: 'light', $color: 'light-color'); // ! New toast variant.
-  @include toast-variant($name: 'primary', $color: 'primary-color');
-  @include toast-variant($name: 'secondary', $color: 'secondary-color'); // ! New toast variant.
-  @include toast-variant($name: 'success', $color: 'success-color');
-  @include toast-variant($name: 'warning', $color: 'warning-color');
+  @include toast-class-variant($name: 'accent', $color: 'accent-color'); // ! New toast variant.
+  @include toast-class-variant($name: 'disabled', $color: 'disabled-color'); // ! New toast variant.
+  @include toast-class-variant($name: 'error', $color: 'error-color');
+  @include toast-class-variant($name: 'gray', $color: 'gray-color'); // ! New toast variant.
+  @include toast-class-variant($name: 'gray-dark', $color: 'gray-color-dark'); // ! New toast variant.
+  @include toast-class-variant($name: 'gray-light', $color: 'gray-color-light'); // ! New toast variant.
+  @include toast-class-variant($name: 'info', $color: 'info-color'); // ! New toast variant.
+  @include toast-class-variant($name: 'light', $color: 'light-color'); // ! New toast variant.
+  @include toast-class-variant($name: 'primary', $color: 'primary-color');
+  @include toast-class-variant($name: 'secondary', $color: 'secondary-color'); // ! New toast variant.
+  @include toast-class-variant($name: 'success', $color: 'success-color');
+  @include toast-class-variant($name: 'warning', $color: 'warning-color');
 
   &.toast-disabled {
     color: color('disabled-color', $lightness: -10%);