chore: Fix sass deprecation warnings

src/anchor-navigation/styles.scss

@@ -39,17 +39,18 @@ $guide-line-offset: -2px; // Negative to expand 2px beyond the element
 }
 
 .anchor-item {
-  @include styles.with-motion {
-    transition: awsui.$motion-duration-slow;
-    transition-property: all;
-  }
   @include styles.font-body-m;
 
   color: awsui.$color-text-body-secondary;
   font-weight: styles.$font-weight-normal;
   margin-block: awsui.$space-scaled-xxs;
   margin-inline: 0;
 
+  @include styles.with-motion {
+    transition: awsui.$motion-duration-slow;
+    transition-property: all;
+  }
+
   &--active {
     position: relative;
 

src/column-layout/styles.scss

@@ -112,9 +112,9 @@ div.column-layout {
     }
 
     &.grid-variant-text-grid {
-      @include make-vertical-borders('inline-start');
       margin-block: calc(-1 * #{$grid-gutter-width} / 2);
       margin-inline: calc(-1 * #{$grid-gutter-width});
+      @include make-vertical-borders('inline-start');
     }
     /* stylelint-disable-next-line selector-max-universal */
     &:not(.grid-no-gutters) > * {

src/internal/styles/links.scss

@@ -50,20 +50,20 @@
 }
 
 @mixin link-default($font-size: 'inherit') {
-  @include link-variant-style(map.get(constants.$link-variants, 'secondary'));
   @include link-font-size-style(map.get(constants.$link-font-sizes, $font-size));
+  @include link-variant-style(map.get(constants.$link-variants, 'secondary'));
 }
 
-/* Style used for links in slots/components that are text heavy, to help links stand out among 
+/* Style used for links in slots/components that are text heavy, to help links stand out among
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
 @mixin link-inline($font-size: 'inherit') {
-  @include link-variant-style(map.get(constants.$link-variants, 'primary'));
   @include link-font-size-style(map.get(constants.$link-font-sizes, $font-size));
+  @include link-variant-style(map.get(constants.$link-variants, 'primary'));
 }
 
 // Need style as a mixin for tag editor only, because it needs special keyup/keydown behavior and thus cannot use the Link component
 @mixin link-recovery($font-size: 'inherit') {
   @include typography.font-smoothing;
-  @include link-variant-style(map.get(constants.$link-variants, 'recovery'));
   @include link-font-size-style(map.get(constants.$link-font-sizes, $font-size));
+  @include link-variant-style(map.get(constants.$link-variants, 'recovery'));
 }

src/table/body-cell/styles.scss

@@ -118,17 +118,17 @@ $cell-negative-space-vertical: 2px;
 
 .body-cell {
   box-sizing: border-box;
-  @include cell-padding-inline-start($cell-horizontal-padding);
-  @include cell-padding-block-start($cell-vertical-padding);
-  @include cell-padding-block-end($cell-vertical-padding-w-border);
-  @include cell-padding-inline-end($cell-horizontal-padding);
   border-block-start: awsui.$border-divider-list-width solid transparent;
   word-wrap: break-word;
   border-block-end: awsui.$border-divider-list-width solid awsui.$color-border-divider-secondary;
   font-weight: inherit;
-
   text-align: start;
 
+  @include cell-padding-inline-start($cell-horizontal-padding);
+  @include cell-padding-block-start($cell-vertical-padding);
+  @include cell-padding-block-end($cell-vertical-padding-w-border);
+  @include cell-padding-inline-end($cell-horizontal-padding);
+
   &-content {
     box-sizing: border-box;
   }

src/table/expandable-rows/styles.scss

@@ -38,13 +38,12 @@
   padding-inline: 0;
   background: none;
   outline: 0;
+  color: awsui.$color-text-interactive-default;
 
   @include focus-visible.when-visible {
     @include styles.focus-highlight(awsui.$space-button-inline-icon-focus-outline-gutter);
   }
 
-  color: awsui.$color-text-interactive-default;
-
   &:hover {
     color: awsui.$color-text-interactive-hover;
   }

src/table/header-cell/styles.scss

@@ -82,6 +82,11 @@
     position: sticky;
     background: awsui.$color-background-table-header;
     z-index: 798; // Lower than the AppLayout's notification slot z-index(799)
+    @include styles.with-motion {
+      transition-property: padding;
+      transition-duration: awsui.$motion-duration-transition-show-quick;
+      transition-timing-function: awsui.$motion-easing-sticky;
+    }
     &-pad-left:not(.has-selection) {
       padding-inline-start: awsui.$space-table-horizontal;
     }
@@ -106,12 +111,6 @@
         clip-path: inset(0 -24px 0 0);
       }
     }
-
-    @include styles.with-motion {
-      transition-property: padding;
-      transition-duration: awsui.$motion-duration-transition-show-quick;
-      transition-timing-function: awsui.$motion-easing-sticky;
-    }
   }
 }
 
@@ -132,8 +131,8 @@
 .header-cell-content {
   position: relative;
   padding-block: awsui.$space-scaled-xxs;
-  @include cell-offset(awsui.$space-s);
   padding-inline-end: awsui.$space-s;
+  @include cell-offset(awsui.$space-s);
 
   .header-cell-sortable > & {
     padding-inline-end: calc(#{awsui.$space-xl} + #{awsui.$space-xxs});

src/table/resizer/styles.scss

@@ -68,8 +68,8 @@ th:not(:last-child) > .divider {
   }
   &.has-focus {
     @include focus-visible.when-visible-unfocused {
-      @include styles.focus-highlight(calc(#{awsui.$space-table-header-focus-outline-gutter} - 2px));
       position: absolute;
+      @include styles.focus-highlight(calc(#{awsui.$space-table-header-focus-outline-gutter} - 2px));
     }
   }
 }

src/table/styles.scss

@@ -22,14 +22,14 @@
   padding-inline: 0;
 
   &-filtering {
+    max-inline-size: 100%;
+    margin-inline-end: awsui.$space-l;
     @supports (flex-basis: fit-content) {
       flex: 1 1 fit-content;
     }
     @supports not (flex-basis: fit-content) {
       flex: 1 1 auto;
     }
-    max-inline-size: 100%;
-    margin-inline-end: awsui.$space-l;
   }
 
   &-align-right {
@@ -97,7 +97,7 @@
   padding-inline: 0;
   &.has-footer {
     /*
-    Add a bottom border to the body cell of an empty table as a separator between the 
+    Add a bottom border to the body cell of an empty table as a separator between the
     table and the footer
     */
     border-block-end: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
@@ -127,7 +127,7 @@
 }
 
 /*
-The min/max/width token values in Visual Refresh should align 
+The min/max/width token values in Visual Refresh should align
 the table header and body cells selection control with the table
 filter search icon.
 */

src/tabs/tab-header-bar.scss

@@ -178,6 +178,7 @@ $label-horizontal-spacing: awsui.$space-xs;
 
   padding-inline-start: calc(#{awsui.$space-xxs} - 1px);
   padding-inline-end: awsui.$space-xxs;
+  @include styles.font-smoothing;
 
   &.refresh {
     padding-block-start: calc(awsui.$space-static-xs - 1px);
@@ -194,12 +195,10 @@ $label-horizontal-spacing: awsui.$space-xs;
     outline: none;
   }
 
-  @include styles.font-smoothing;
-
   @include focus-visible.when-visible {
     z-index: 1;
-    @include styles.focus-highlight(awsui.$space-tabs-focus-outline-gutter);
     border-inline-end-color: transparent;
+    @include styles.focus-highlight(awsui.$space-tabs-focus-outline-gutter);
   }
 }
 

src/tiles/styles.scss

@@ -39,6 +39,12 @@ $gutter: awsui.$space-grid-gutter;
   padding-block: awsui.$space-xs;
   padding-inline: awsui.$space-scaled-m;
 
+  @include styles.with-motion {
+    transition:
+      border-color awsui.$motion-duration-transition-quick awsui.$motion-easing-transition-quick,
+      background-color awsui.$motion-duration-transition-quick awsui.$motion-easing-transition-quick;
+  }
+
   &.refresh {
     padding-block: awsui.$space-xs;
     padding-inline: awsui.$space-s;
@@ -66,12 +72,6 @@ $gutter: awsui.$space-grid-gutter;
   &.readonly {
     @include styles.form-readonly-element;
   }
-
-  @include styles.with-motion {
-    transition:
-      border-color awsui.$motion-duration-transition-quick awsui.$motion-easing-transition-quick,
-      background-color awsui.$motion-duration-transition-quick awsui.$motion-easing-transition-quick;
-  }
 }
 
 .columns {

src/toggle/styles.scss

@@ -60,6 +60,15 @@ $shadow-color: rgba(0, 0, 0, 0.25);
   inset-block-start: $handle-offset;
   inset-inline-start: $handle-offset;
 
+  @include styles.with-motion {
+    // Exception: The toggle state transition does not follow the motion guidelines
+    // for the "State transition (quick)" group and is therefore not using
+    // standard variables from that group.
+    transition:
+      transform awsui.$motion-duration-fast awsui.$motion-easing-ease-out-quart,
+      background-color awsui.$motion-duration-fast awsui.$motion-easing-ease-out-quart;
+  }
+
   &-checked {
     transform: translateX(0.8 * styles.$base-size);
 
@@ -79,13 +88,4 @@ $shadow-color: rgba(0, 0, 0, 0.25);
       background: awsui.$color-foreground-control-read-only;
     }
   }
-
-  @include styles.with-motion {
-    // Exception: The toggle state transition does not follow the motion guidelines
-    // for the "State transition (quick)" group and is therefore not using
-    // standard variables from that group.
-    transition:
-      transform awsui.$motion-duration-fast awsui.$motion-easing-ease-out-quart,
-      background-color awsui.$motion-duration-fast awsui.$motion-easing-ease-out-quart;
-  }
 }

src/tutorial-panel/components/tutorial-list/motion.scss

@@ -9,8 +9,8 @@
 .content {
   &-enter {
     @include styles.with-motion {
-      @include styles.animation-fade-in;
       animation: awsui-motion-fade-in tokens.$motion-duration-show-paced tokens.$motion-easing-show-paced;
+      @include styles.animation-fade-in;
     }
   }
 }