Merge pull request #3088 from tvdeyen/sass-deprecations

Convert Sass `@import` into `@use`

app/stylesheets/alchemy/_defaults.scss

@@ -1,3 +1,3 @@
-@import "./variables";
-@import "./mixins";
-@import "./extends";
+@use "variables";
+@use "mixins";
+@use "extends";

app/stylesheets/alchemy/_deprecated_variables.scss

@@ -1,45 +1,45 @@
-@import "./deprecation";
+@use "deprecation";
 
-@include alchemy-deprecated-variable("$default-padding", "var(--spacing-1)");
-@include alchemy-deprecated-variable("$default-margin", "var(--spacing-1)");
-@include alchemy-deprecated-variable("$text-color", "var(--color-text)");
-@include alchemy-deprecated-variable(
+@include deprecation.alchemy-deprecated-variable("$default-padding", "var(--spacing-1)");
+@include deprecation.alchemy-deprecated-variable("$default-margin", "var(--spacing-1)");
+@include deprecation.alchemy-deprecated-variable("$text-color", "var(--color-text)");
+@include deprecation.alchemy-deprecated-variable(
   "$muted-text-color",
   "var(--color-text_muted)"
 );
-@include alchemy-deprecated-variable("$icon-color", "var(--color-icon)");
-@include alchemy-deprecated-variable(
+@include deprecation.alchemy-deprecated-variable("$icon-color", "var(--color-icon)");
+@include deprecation.alchemy-deprecated-variable(
   "$light-gray",
   "var(--color-grey_very_light)"
 );
-@include alchemy-deprecated-variable("$medium-gray", "var(--color-grey_light)");
-@include alchemy-deprecated-variable("$dark-gray", "var(--color-grey_dark)");
-@include alchemy-deprecated-variable(
+@include deprecation.alchemy-deprecated-variable("$medium-gray", "var(--color-grey_light)");
+@include deprecation.alchemy-deprecated-variable("$dark-gray", "var(--color-grey_dark)");
+@include deprecation.alchemy-deprecated-variable(
   "$very-dark-gray",
   "var(--color-grey_very_dark)"
 );
-@include alchemy-deprecated-variable(
+@include deprecation.alchemy-deprecated-variable(
   "$light_yellow",
   "var(--color-yellow_light)"
 );
-@include alchemy-deprecated-variable("$orange", "var(--color-orange_medium)");
-@include alchemy-deprecated-variable(
+@include deprecation.alchemy-deprecated-variable("$orange", "var(--color-orange_medium)");
+@include deprecation.alchemy-deprecated-variable(
   "$dark-orange",
   "var(--color-orange_dark)"
 );
-@include alchemy-deprecated-variable(
+@include deprecation.alchemy-deprecated-variable(
   "$very-dark-orange",
   "var(--color-orange_very_dark)"
 );
-@include alchemy-deprecated-variable(
+@include deprecation.alchemy-deprecated-variable(
   "$very-light-blue",
   "var(--color-blue_very_light)"
 );
-@include alchemy-deprecated-variable("$light-blue", "var(--color-blue_light)");
-@include alchemy-deprecated-variable("$blue", "var(--color-blue_medium)");
-@include alchemy-deprecated-variable("$dark-blue", "var(--color-blue_dark)");
-@include alchemy-deprecated-variable("$white", "var(--color-white)");
-@include alchemy-deprecated-variable(
+@include deprecation.alchemy-deprecated-variable("$light-blue", "var(--color-blue_light)");
+@include deprecation.alchemy-deprecated-variable("$blue", "var(--color-blue_medium)");
+@include deprecation.alchemy-deprecated-variable("$dark-blue", "var(--color-blue_dark)");
+@include deprecation.alchemy-deprecated-variable("$white", "var(--color-white)");
+@include deprecation.alchemy-deprecated-variable(
   "$small-font-size",
   "var(--font-size_small)"
 );

app/stylesheets/alchemy/_deprecation.scss

@@ -1,3 +1,4 @@
+@use "sass:meta";
 @charset "UTF-8";
 
 /// Throws Sass warnings to announce backend deprecations. You can disable them
@@ -9,7 +10,7 @@ $output-alchemy-deprecation-warnings: true !default;
 
 @mixin alchemy-deprecated-variable($variable, $replacement) {
   @if $output-alchemy-deprecation-warnings == true {
-    @if global-variable-exists($variable) {
+    @if meta.global-variable-exists($variable) {
       @warn "[Alchemy] [Deprecation] Sass variable `#{$variable}` is deprecated and will be " +
         "removed in Alchemy 8.0. Please use custom property `#{$replacement}` instead";
     }

app/stylesheets/alchemy/_extends.scss

@@ -1,3 +1,7 @@
+@use "sass:color";
+@use "mixins";
+@use "variables" as vars;
+
 %text-overflow {
   white-space: nowrap;
   overflow: hidden;
@@ -8,39 +12,41 @@
 }
 
 %field-with-error {
-  border-color: $error_border_color;
-  color: $error_text_color;
-  background-color: lighten($error_background_color, 8%);
-  box-shadow: inset 0px 0 1px rgba($error_border_color, 0.5);
+  border-color: vars.$error_border_color;
+  color: vars.$error_text_color;
+  background-color: color.adjust(vars.$error_background_color, $lightness: 8%);
+  box-shadow: inset 0px 0 1px rgba(vars.$error_border_color, 0.5);
 }
 
 %default-input-style {
-  border-radius: $default-border-radius;
-  box-shadow: $form-field-box-shadow;
-  font: $default-font-style;
-  color: $form-field-text-color;
-  padding: $form-field-padding;
-  margin: $form-field-margin;
-  background: $form-field-background-color;
-  border-width: $form-field-border-width;
-  border-style: $form-field-border-style;
-  border-color: $form-field-border-color;
-  height: $form-field-height;
+  border-radius: vars.$default-border-radius;
+  box-shadow: vars.$form-field-box-shadow;
+  font: vars.$default-font-style;
+  color: vars.$form-field-text-color;
+  padding: vars.$form-field-padding;
+  margin: vars.$form-field-margin;
+  background: vars.$form-field-background-color;
+  border-width: vars.$form-field-border-width;
+  border-style: vars.$form-field-border-style;
+  border-color: vars.$form-field-border-color;
+  height: vars.$form-field-height;
   width: 100%;
-  font-size: $form-field-font-size;
-  line-height: $form-field-line-height;
-  transition: $transition-duration;
+  font-size: vars.$form-field-font-size;
+  line-height: vars.$form-field-line-height;
+  transition: vars.$transition-duration;
 
   &:focus:not(.readonly) {
-    @include default-focus-style($box-shadow: 0 0 0 1px $focus-color);
+    @include mixins.default-focus-style(
+      $box-shadow: 0 0 0 1px vars.$focus-color
+    );
   }
 
   &[disabled],
   &.disabled,
   &:not(.flatpickr-input)[readonly],
   &:not(.flatpickr-input).readonly {
-    color: $form-field-disabled-text-color;
-    background-color: $form-field-disabled-bg-color;
+    color: vars.$form-field-disabled-text-color;
+    background-color: vars.$form-field-disabled-bg-color;
     cursor: default;
   }
 
@@ -56,7 +62,7 @@
 }
 
 %gradiated-toolbar {
-  background: $toolbar-bg-color;
+  background: vars.$toolbar-bg-color;
   padding: var(--spacing-2) var(--spacing-1);
-  height: $toolbar-height;
+  height: vars.$toolbar-height;
 }

app/stylesheets/alchemy/_mixins.scss

@@ -1,7 +1,10 @@
+@use "sass:color";
+@use "variables" as vars;
+
 @mixin default-focus-style(
-  $border-color: $focus-color,
-  $box-shadow: 0 0 0 2px $focus-color,
-  $border-radius: $default-border-radius
+  $border-color: vars.$focus-color,
+  $box-shadow: 0 0 0 2px vars.$focus-color,
+  $border-radius: vars.$default-border-radius
 ) {
   border-color: $border-color;
   border-radius: $border-radius;
@@ -15,25 +18,25 @@
 }
 
 @mixin button-defaults(
-  $background-color: $button-bg-color,
-  $hover-color: $button-hover-bg-color,
-  $hover-border-color: $button-hover-border-color,
-  $border-radius: $button-border-radius,
-  $border: $button-border-width solid $button-border-color,
-  $box-shadow: $button-box-shadow,
-  $padding: $button-padding,
-  $margin: $button-margin,
-  $color: $button-text-color,
-  $line-height: $form-field-line-height,
-  $focus-border-color: $button-focus-border-color,
-  $focus-box-shadow: $button-focus-box-shadow
+  $background-color: vars.$button-bg-color,
+  $hover-color: vars.$button-hover-bg-color,
+  $hover-border-color: vars.$button-hover-border-color,
+  $border-radius: vars.$button-border-radius,
+  $border: vars.$button-border-width solid vars.$button-border-color,
+  $box-shadow: vars.$button-box-shadow,
+  $padding: vars.$button-padding,
+  $margin: vars.$button-margin,
+  $color: vars.$button-text-color,
+  $line-height: vars.$form-field-line-height,
+  $focus-border-color: vars.$button-focus-border-color,
+  $focus-box-shadow: vars.$button-focus-box-shadow
 ) {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-family: $default-font-family;
-  font-size: $default-font-size;
-  font-weight: $button-font-weight;
+  font-family: vars.$default-font-family;
+  font-size: vars.$default-font-size;
+  font-weight: vars.$button-font-weight;
   height: 30px;
   padding: $padding;
   cursor: pointer;
@@ -44,7 +47,7 @@
   color: $color;
   margin: $margin;
   -webkit-appearance: none;
-  transition: all $transition-duration;
+  transition: all vars.$transition-duration;
   @include antialiased-font-smoothing;
 
   &:hover {
@@ -55,7 +58,7 @@
 
   &:active,
   &.active {
-    box-shadow: inset $button-box-shadow;
+    box-shadow: inset vars.$button-box-shadow;
   }
 
   &:focus {
@@ -83,26 +86,26 @@
 }
 
 @mixin form-label {
-  width: $form-left-width;
+  width: vars.$form-left-width;
   padding-right: var(--spacing-2);
   padding-top: 0.6em;
   margin-top: var(--spacing-1);
   vertical-align: top;
   word-break: normal;
   float: left;
   text-align: right;
-  font-size: $default-font-size;
+  font-size: vars.$default-font-size;
 }
 
 @mixin form-value-display {
   float: right;
-  width: $form-right-width;
-  margin: $form-field-margin;
+  width: vars.$form-right-width;
+  margin: vars.$form-field-margin;
   padding: var(--spacing-1) var(--spacing-2);
   line-height: 21px;
-  min-height: $form-field-height;
+  min-height: vars.$form-field-height;
   background: white;
-  border-radius: $default-border-radius;
+  border-radius: vars.$default-border-radius;
 }
 
 @mixin form-hint(
@@ -116,7 +119,7 @@
   border: 1px solid $border-color;
   display: block;
   clear: both;
-  border-radius: $default-border-radius;
+  border-radius: vars.$default-border-radius;
 }
 
 @mixin animate-left {
@@ -159,7 +162,7 @@
   background-color: var(--color-grey_light);
   overflow: hidden;
   position: relative;
-  border-radius: $default-border-radius;
+  border-radius: vars.$default-border-radius;
   color: var(--color-text);
 }
 
@@ -178,21 +181,24 @@
   }
 
   &:focus {
-    @include default-focus-style($box-shadow: inset 0 0 0 2px $focus-color);
+    @include default-focus-style(
+      $box-shadow: inset 0 0 0 2px vars.$focus-color
+    );
   }
 }
 
 @mixin linked-button(
-  $border-radius: $default-border-radius,
-  $line-height: $form-field-line-height,
+  $border-radius: vars.$default-border-radius,
+  $line-height: vars.$form-field-line-height,
   $padding: 3px
 ) {
   @include button-defaults(
     $line-height: $line-height,
-    $background-color: $linked-button-color,
-    $hover-color: darken($linked-button-color, 10%),
-    $border: 1px solid $linked-border-color,
-    $hover-border-color: darken($linked-border-color, 10%),
+    $background-color: vars.$linked-button-color,
+    $hover-color: color.adjust(vars.$linked-button-color, $lightness: -10%),
+    $border: 1px solid vars.$linked-border-color,
+    $hover-border-color:
+      color.adjust(vars.$linked-border-color, $lightness: -10%),
     $border-radius: $border-radius,
     $box-shadow: none,
     $padding: $padding,

app/stylesheets/alchemy/_variables.scss

@@ -1,4 +1,4 @@
-@import "./deprecated_variables";
+@use "deprecated_variables";
 
 $light-blue: hsl(203deg, 32%, 85%);
 $very-light-blue: hsl(203deg, 32%, 97%);