fix(styles): fix mixed-decls warning from form footer (#3869)

packages/styles/src/components/form-footer.scss

@@ -1,18 +1,18 @@
-@use '../mixins/utilities' as utility-mx;
 @use '../tokens/components';
-@use '../functions/tokens' as tokens;
+@use '../functions/tokens';
+
+@use '../mixins/layout';
 
 tokens.$default-map: components.$post-form-footer;
 
 .form-footer {
-  @include utility-mx.responsive-actions();
   border-block-start-width: tokens.get('form-footer-border-block-start-width');
   border-block-start-color: tokens.get('form-footer-border-start-color');
   border-block-start-style: tokens.get('form-footer-border-block-start-style');
   padding-block-start: tokens.get('form-footer-padding-block-start');
   gap: tokens.get('form-footer-gap');
 
-  &-primary-actions {
+  @include layout.responsive-actions {
     gap: tokens.get('form-footer-gap');
   }
 }

packages/styles/src/functions/_breakpoint.scss

@@ -0,0 +1,9 @@
+@use 'sass:map';
+@use '../variables/breakpoints';
+
+/**
+  Gets a breakpoint from the map based on the key
+*/
+@function min-width($key) {
+  @return map.get(breakpoints.$grid-breakpoints, $key);
+}

packages/styles/src/mixins/_layout.scss

@@ -0,0 +1,26 @@
+@use './media';
+
+@mixin responsive-actions {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  @include media.min(md) {
+    flex-direction: row-reverse;
+
+    > .btn {
+      margin-right: auto;
+    }
+  }
+
+  &-primary-actions {
+    display: flex;
+    flex-direction: column;
+    @content;
+
+    @include media.min(md) {
+      flex-direction: row-reverse;
+      margin-left: auto;
+    }
+  }
+}

packages/styles/src/mixins/_media.scss

@@ -1,4 +1,16 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use '../functions/breakpoint';
+
+/**
+  Creates a min-width breakpoint with the given value
+  @param $device-size A pixel value or a key for the breakpoints map
+*/
 @mixin min($device-size) {
+  @if (meta.type-of($device-size) == 'string') {
+    $device-size: breakpoint.min-width($device-size);
+  }
+
   @if $device-size != 0 {
     @media screen and (min-width: $device-size) {
       @content;
@@ -8,13 +20,33 @@
   }
 }
 
+/**
+  Creates a max-width breakpoint with the given value
+  @param $device-size A pixel value or a key for the breakpoints map
+*/
 @mixin max($device-size) {
+  @if (meta.type-of($device-size) == 'string') {
+    $device-size: breakpoint.min-width($device-size);
+  }
+
   @media screen and (max-width: ($device-size - 0.01)) {
     @content;
   }
 }
 
+/**
+  Creates an in-between breakpoint with the given values
+  @param $min-size A pixel value or a key for the breakpoints map
+  @param $max-size A pixel value or a key for the breakpoints map
+*/
 @mixin between($min-size, $max-size) {
+  @if (meta.type-of($min-size) == 'string') {
+    $min-size: breakpoint.min-width($min-size);
+  }
+  @if (meta.type-of($max-size) == 'string') {
+    $max-size: breakpoint.min-width($max-size);
+  }
+
   @media screen and (min-width: $min-size) and (max-width: ($max-size - 0.01)) {
     @content;
   }

packages/styles/src/mixins/_utilities.scss

@@ -173,27 +173,3 @@
     }
   }
 }
-
-@mixin responsive-actions {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-
-  @include media-breakpoint-up(md) {
-    flex-direction: row-reverse;
-
-    > .btn {
-      margin-right: auto;
-    }
-  }
-
-  &-primary-actions {
-    display: flex;
-    flex-direction: column;
-
-    @include media-breakpoint-up(md) {
-      flex-direction: row-reverse;
-      margin-left: auto;
-    }
-  }
-}