Give helpers folder an index.scss, migrate ratio helper to aspect-ratio utility

scss/_helpers.scss

@@ -1,12 +0,0 @@
-@import "helpers/clearfix";
-@import "helpers/color-bg";
-@import "helpers/colored-links";
-@import "helpers/focus-ring";
-@import "helpers/icon-link";
-@import "helpers/ratio";
-@import "helpers/position";
-@import "helpers/stacks";
-@import "helpers/visually-hidden";
-@import "helpers/stretched-link";
-@import "helpers/text-truncation";
-@import "helpers/vr";

scss/_utilities.scss

@@ -18,6 +18,13 @@ $utilities: map.merge(
       values: baseline top middle bottom text-bottom text-top
     ),
     // scss-docs-end utils-vertical-align
+    // scss-docs-start utils-aspect-ratio
+    "aspect-ratio": (
+      property: aspect-ratio,
+      class: ratio,
+      values: $aspect-ratios
+    ),
+    // scss-docs-end utils-aspect-ratio
     // scss-docs-start utils-float
     "float": (
       responsive: true,

scss/_variables.scss

@@ -302,7 +302,6 @@ $transition-collapse:         height .35s ease !default;
 $transition-collapse-width:   width .35s ease !default;
 // scss-docs-end collapse-transition
 
-// stylelint-disable function-disallowed-list
 // scss-docs-start aspect-ratios
 $aspect-ratios: (
   "auto": auto,
@@ -312,7 +311,6 @@ $aspect-ratios: (
   "21x9": #{"21 / 9"}
 ) !default;
 // scss-docs-end aspect-ratios
-// stylelint-enable function-disallowed-list
 
 // Typography
 //

scss/helpers/_ratio.scss

@@ -1,30 +0,0 @@
-@use "../config" as *;
-@use "../variables" as *;
-// mdo-do: remve for utilities
-
-// Credit: Nicolas Gallagher and SUIT CSS.
-
-.ratio {
-  position: relative;
-  width: 100%;
-
-  &::before {
-    display: block;
-    padding-top: var(--#{$prefix}aspect-ratio);
-    content: "";
-  }
-
-  > * {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-}
-
-@each $key, $ratio in $aspect-ratios {
-  .ratio-#{$key} {
-    --#{$prefix}aspect-ratio: #{$ratio};
-  }
-}

scss/helpers/index.scss

@@ -1,11 +1,11 @@
-@forward "clearfix";
-@forward "color-bg";
-@forward "colored-links";
-@forward "focus-ring";
-@forward "icon-link";
-@forward "position";
-@forward "stacks";
-@forward "visually-hidden";
-@forward "stretched-link";
-@forward "text-truncation";
-@forward "vr";
+@import "clearfix";
+@import "color-bg";
+@import "colored-links";
+@import "focus-ring";
+@import "icon-link";
+@import "position";
+@import "stacks";
+@import "visually-hidden";
+@import "stretched-link";
+@import "text-truncation";
+@import "vr";