Improved code readability of transition classes

src/duomo/builder.scss

@@ -22,6 +22,8 @@ $__full-range: list.join($negative-range, $standard-range);
 	// @include display;
 
 	// @include stack-from-range($range: $standard-range, $resolver: rem);
+
+	// OK
 	// @include grid-from-range($range: $standard-range, $resolver: rem);
 
 	// OK
@@ -43,10 +45,11 @@ $__full-range: list.join($negative-range, $standard-range);
 	// @include text-decoration;
 	// @include color-from-map($map: $color-map, $opacity-range: $opacity-range);
 	// @include background-color-from-map($map: $color-map, $opacity-range: $opacity-range);
+
+	// OK
 	// @include border-width-from-range($range: $border-width-range, $resolver: rem);
 	// @include border-color-from-map($map: $color-map, $opacity-range: $opacity-range);
-
-	@include border-radius-from-range($range: $border-radius-range, $resolver: rem);
+	// @include border-radius-from-range($range: $border-radius-range, $resolver: rem);
 
 	// @include box-shadow-from-map($map: $shadow-map);
 
@@ -58,9 +61,9 @@ $__full-range: list.join($negative-range, $standard-range);
 
 	// CHECK
 	// @include pointer-events;
-	// @include transition($default-duration: 300ms, $default-timing-function: $ease-out);
+	@include transition($default-duration: 300ms, $default-timing-function: $ease-out);
 	// @include transition-duration-from-range($range: range(0, 1000, 100));
-	// @include transition-timing-function-from-map($map: $timing-function-map);
+	// @include transition-timing-function-from-map($map: $timing-map);
 }
 
 @at-root {

src/duomo/props/border/border-width.scss

@@ -1,7 +1,7 @@
 @use "../../helpers" as *;
 
 // prettier-ignore
-@mixin __impl($range, $resolver) {
+@mixin border-width-from-range($range, $resolver) {
 	@include generate-from-range(
 		"border",
 		(border-width),

src/duomo/props/transition.scss

@@ -1,45 +1,39 @@
-@use "../helpers";
-@use "../theme";
+@use "../helpers" as *;
+@use "../theme" as *;
 
 @mixin transition($default-duration, $default-timing-function) {
-	$amp: helpers.get-ampersand();
+	$amp: get-ampersand();
 
-	#{theme.$theme-aware-selector} {
-		#{$amp}transition {
-			--transition-duration: #{$default-duration};
-			--transition-timing-function: #{$default-timing-function};
-			transition: var(--transition-duration) var(--transition-timing-function);
-			transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
-		}
+	#{$theme-aware-selector} #{$amp}transition {
+		--transition-duration: #{$default-duration};
+		--transition-timing-function: #{$default-timing-function};
+		transition: var(--transition-duration) var(--transition-timing-function);
+		transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
 	}
 }
 
-// NOTE. Do not use `helpers.generate-from-range` because `$amp` is repeated.
 @mixin transition-duration-from-range($range) {
-	$amp: helpers.get-ampersand();
+	$amp: get-ampersand();
 
-	#{theme.$theme-aware-selector} {
-		@each $v in $range {
-			#{$amp}duration-#{helpers.escape($v)} {
-				--transition-duration: #{$v};
-			}
+	// NOTE: Do not use a generator because of `$theme-aware-selector`.
+	@each $v in $range {
+		#{$theme-aware-selector} #{$amp}duration-#{escape($v)} {
+			--transition-duration: #{$v};
 		}
 	}
 }
 
-// NOTE. Do not use `helpers.generate-from-range` because `$amp` is repeated.
 @mixin transition-timing-function-from-map($map) {
-	$amp: helpers.get-ampersand();
+	$amp: get-ampersand();
 
-	#{theme.$theme-aware-selector} {
-		@each $k, $v in $map {
-			// NOTE: Uses `ease-linear` for Tailwind CSS compatibility.
-			@if $k == "linear" {
-				$k: "ease-" + $k;
-			}
-			#{$amp}#{$k} {
-				--transition-timing-function: #{$v};
-			}
+	// NOTE: Do not use a generator because of `$theme-aware-selector`.
+	@each $k, $v in $map {
+		// COMPAT
+		@if $k == "linear" {
+			$k: "ease-" + $k;
+		}
+		#{$theme-aware-selector} #{$amp}#{$k} {
+			--transition-timing-function: #{$v};
 		}
 	}
 }