feat(@clayui/css): Aspect Ratio adds aspect-ratio-8-to-3 (37.5%)

    - Adds `$aspect-ratio-sizes` map for generating all aspect-ratio sizes and placeholders

packages/clay-css/src/scss/_variables.scss

@@ -1,6 +1,7 @@
 @import 'variables/_globals';
 @import 'variables/_globals-z-index';
 
+@import 'variables/_aspect-ratio';
 @import 'variables/_images';
 
 @import 'variables/_carousel';

packages/clay-css/src/scss/components/_aspect-ratio.scss

@@ -158,44 +158,31 @@
 	@extend %aspect-ratio-item-center-middle;
 }
 
-// 3 to 2
-
-%aspect-ratio-3-to-2 {
-	@include clay-aspect-ratio(3, 2);
-}
-
-.aspect-ratio-3-to-2 {
-	@extend %aspect-ratio-3-to-2;
-}
-
-// 4 to 3
-
-%aspect-ratio-4-to-3 {
-	@include clay-aspect-ratio(4, 3);
-}
-
-.aspect-ratio-4-to-3 {
-	@extend %aspect-ratio-4-to-3;
-}
-
-// 8 to 5
-
-%aspect-ratio-8-to-5 {
-	@include clay-aspect-ratio(8, 5);
-}
-
-.aspect-ratio-8-to-5 {
-	@extend %aspect-ratio-8-to-5;
-}
-
-// 16 to 9
-
-%aspect-ratio-16-to-9 {
-	@include clay-aspect-ratio(16, 9);
-}
-
-.aspect-ratio-16-to-9 {
-	@extend %aspect-ratio-16-to-9;
+// aspect-ratio-#-to-#
+
+@each $selector, $value in $aspect-ratio-sizes {
+	$selector: if(
+		starts-with($selector, '.') or starts-with($selector, '#'),
+		$selector,
+		str-insert($selector, '.', 1)
+	);
+
+	$placeholder: str-insert(
+		str-slice($selector, 2, str-length($selector)),
+		'%',
+		1
+	);
+
+	#{$placeholder} {
+		@include clay-aspect-ratio(
+			map-get($value, width),
+			map-get($value, height)
+		);
+	}
+
+	#{$selector} {
+		@extend #{$placeholder} !optional;
+	}
 }
 
 // Bg Contain

packages/clay-css/src/scss/variables/_aspect-ratio.scss

@@ -0,0 +1,26 @@
+$aspect-ratio-sizes: () !default;
+$aspect-ratio-sizes: map-deep-merge(
+	(
+		aspect-ratio-3-to-2: (
+			height: 2,
+			width: 3,
+		),
+		aspect-ratio-4-to-3: (
+			height: 3,
+			width: 4,
+		),
+		aspect-ratio-8-to-3: (
+			height: 3,
+			width: 8,
+		),
+		aspect-ratio-8-to-5: (
+			height: 5,
+			width: 8,
+		),
+		aspect-ratio-16-to-9: (
+			height: 9,
+			width: 16,
+		),
+	),
+	$aspect-ratio-sizes
+);