updated and fixed helpers

Author: UnderlineWords

src/Utilities/_config/_specs.scss

@@ -4,11 +4,22 @@
 ///
 
 $specs: (
-	"spaces"        : (0,5,10,15,20,30,40,50,75,100,125,150,175,200), // padding and margin (px)
+	"spaces"		: (0,5,10,15,20,30,40,50,75,100,125,150,175,200), // padding and margin (px)
 	"font-weight"   : (100,200,300,400,500,600,700,800,900,normal,bold,bolder,lighter),
 	"borders"       : (0,1,2,3,4,5), // border width (px)
 	"border-radius" : (2,4,8,10,12,14,16,500), // (px)
 	"orders"        : (1,2,3,4,5),
 	"line-height"   : (0,1,2,3,4,5),
-	"z-index"       : (-1,0,1,10,20,30,40,50,100,999,9999,99999)
+	"z-index"       : (-1,0,1,10,20,30,40,50,100,999,9999,99999),
+	"sizes"			: (
+		// used for padding, margin, width and height
+		("tiny", 1rem), // 16px
+		("mini", 2rem), // 32px
+		("small", 4rem), // 64px
+		("large", 8rem), // 128px
+		("big", 10rem), // 160px
+		("huge", 12rem), // 190px
+		("massive", 18rem), // 288px
+		("giant", 24rem) // 384px
+	),
 );

src/Utilities/_config/height.scss

@@ -12,10 +12,4 @@ $height-helpers: (
 	("height-50", 50%),
 	("height-75", 75%),
 	("height-100", 100%),
-	("tiny-height", 1rem), // 16px
-	("mini-height", 2rem), // 32px
-	("small-height", 4rem), // 64px
-	("large-height", 8rem), // 128px
-	("huge-height", 12rem), // 190px
-	("giant-height", 24rem) // 384px
 );

src/Utilities/_config/width.scss

@@ -9,13 +9,9 @@ $width-helpers: (
 	("width-max-content", max-content),
 	("width-fit-content", fit-content),
 	("width-25", 25%),
+	("width-33", 33%),
 	("width-50", 50%),
+	("width-66", 66%),
 	("width-75", 75%),
 	("width-100", 100%),
-	("tiny-width", 1rem), // 16px
-	("mini-width", 2rem), // 32px
-	("small-width", 4rem), // 64px
-	("large-width", 8rem), // 128px
-	("huge-width", 12rem), // 192px
-	("giant-width", 24rem) // 384px
 );

src/Utilities/helpers.scss

@@ -5,6 +5,7 @@
 
 @use "variables" as *;
 @use "mixins" as *;
+@use "../_global/_getters" as *;
 
 @if options('helpers', 'enable') {
 	/// Align Items
@@ -68,6 +69,7 @@
 
 	/// Height
 	@include setHelperList($height-helpers, "height", "!important");
+	@include setSizeHelpers(null, specs('sizes'), "height");
 
 	/// Inset
 	@include setNestedHelperList($insets);
@@ -86,6 +88,7 @@
 
 	/// Margin
 	@include setHelperListWithRange($margin-helpers, specs('spaces'), "px", "!important");
+	@include setSizeHelpers($margin-helpers, specs('sizes'));
 	@include setHelperListWithRange($margin-helpers, auto, null, "!important"); // margin auto
 
 	/// Object-Fit
@@ -100,6 +103,7 @@
 
 	/// Padding
 	@include setHelperListWithRange($padding-helpers, specs('spaces'), "px", "!important");
+	@include setSizeHelpers($padding-helpers, specs('sizes'));
 	@include setHelperListWithRange($padding-helpers, auto, null, "!important"); // padding auto
 
 	/// Place Content
@@ -135,6 +139,7 @@
 
 	/// Width
 	@include setHelperList($width-helpers, "width", "!important");
+	@include setSizeHelpers(null, specs('sizes'), "width");
 
 	/// Z-Index
 	@include setHelperListWithRange($z-indexes, specs('z-index'), null, "!important");

src/Utilities/mixins.scss

@@ -103,6 +103,31 @@
 	}
 }
 
+///
+/// Set Size Helpers
+/// @param {List} $list
+/// @param {List} $sizes
+/// @param {String} $suffix (must also be a name of css property)
+///
+@mixin setSizeHelpers($list: null, $sizes: null, $suffix: null) {
+
+	@if $suffix {
+		@each $name, $value in $sizes {
+			.#{$name}-#{$suffix} {
+				@include setProperties($suffix, $value, null, "!important");
+			}
+		}
+	} @else {
+		@each $classname, $prop in $list {
+			@each $name, $value in $sizes {
+				.#{$classname}#{$name} {
+					@include setProperties($prop, $value, null, "!important");
+				}
+			}
+		}
+	}
+}
+
 ///
 /// Set Properties
 /// @param {Property|String} $property