b217

Author: UnderlineWords

src/Core/Global/Colors.scss

@@ -7,10 +7,10 @@
 @use "sass:color" as color;
 @use "../Theme/Getters" as *;
 
-/// Grey
-$grey        : color.mix(theme('color', 'text'), theme('color', 'background'), 14.5%);
-$dark-grey   : color.mix(theme('color', 'text'), theme('color', 'background'), 9.5%);
-$darken-grey : color.mix(theme('color', 'text'), theme('color', 'background'), 4.5%);
+// Grey
+$grey       : color.mix(theme('color', 'text'), theme('color', 'background'), 14.5%);
+$dark-grey  : color.mix(theme('color', 'text'), theme('color', 'background'), 9.5%);
+$darken-grey: color.mix(theme('color', 'text'), theme('color', 'background'), 4.5%);
 //
 $sharp-grey  : color.mix(theme('color', 'text'), theme('color', 'dark'), 24.5%);
 $sharpen-grey: color.mix(theme('color', 'text'), theme('color', 'dark'), 45%);

src/Modules/Utilities/index.scss

@@ -127,6 +127,40 @@ $helpers: (
 		)
 	),
 	///
+	/// Background Colors
+	/// The background-color property sets 
+	/// the background color of an element. The background of 
+	/// an element is the total size of the element, 
+	/// including padding and border (but not the margin).
+	/// 
+	/// @example bg-color
+	/// @example bg-primary
+	///
+	'background-color': (
+		'enabled'    : true, // true or false
+		'property'   : 'background-color', // css property name (don't change it !)
+		'prefix'     : 'bg-', // prefix of class name
+		'specificity': !important, // or null
+		'unit'       : null, // length units (px, rem, em, %, vh, vw etc)
+		'specs'      : null, // for extra variables
+		'palette'    : (
+			'shade-step': 5,
+			'max-range' : 50
+		),
+		'values'     : (
+			// class name (suffix), value
+			("color", theme('color', 'background')),
+			("grey", color.$grey),
+			("white", white),
+			("black", black),
+			("dark", theme('color', 'dark')),
+			("primary", theme('color', 'primary')),
+			("success", theme('color', 'success')),
+			("warning", theme('color', 'warning')),
+			("error", theme('color', 'error'))
+		)
+	),
+	///
 	/// Background Origin
 	/// The background-origin property specifies 
 	/// the origin position (the background positioning area) 
@@ -210,36 +244,6 @@ $helpers: (
 		'values'     : (auto,cover,contain)
 	),
 	///
-	/// Background Colors
-	/// The background-color property sets 
-	/// the background color of an element. The background of 
-	/// an element is the total size of the element, 
-	/// including padding and border (but not the margin).
-	/// 
-	/// @example bg-color
-	/// @example bg-primary
-	///
-	'background-color': (
-		'enabled'    : true, // true or false
-		'property'   : 'background-color', // css property name (don't change it !)
-		'prefix'     : 'bg-', // prefix of class name
-		'specificity': !important, // or null
-		'unit'       : null, // length units (px, rem, em, %, vh, vw etc)
-		'specs'      : null, // for extra variables
-		'values'     : (
-			// class name (suffix), value
-			("color", theme('color', 'background')),
-			("grey", color.$grey),
-			("white", white),
-			("black", black),
-			("dark", theme('color', 'dark')),
-			("primary", theme('color', 'primary')),
-			("success", theme('color', 'success')),
-			("warning", theme('color', 'warning')),
-			("error", theme('color', 'error'))
-		)
-	),
-	///
 	/// Border Color
 	/// 
 	/// The border-color property sets the color
@@ -373,6 +377,10 @@ $helpers: (
 		'specificity': !important, // or null
 		'unit'       : null, // length units (px, rem, em, %, vh, vw etc)
 		'specs'      : null, // for extra variables
+		'palette'    : (
+			'shade-step': 5,
+			'max-range' : 50
+		),
 		'values'     : (
 			// class name (suffix), value
 			("grey", color.$grey),

src/Modules/Utilities/mixins.scss

@@ -116,13 +116,15 @@
 	$prefix     : map.get($colors, 'prefix');
 	$specificity: map.get($colors, 'specificity');
 	$values     : map.get($colors, 'values');
+	$shade-step : map.get(map.get($colors, 'palette'), 'shade-step');
+	$max-range  : map.get(map.get($colors, 'palette'), 'max-range');
 
 	@if $enabled {
-		@for $i from 5 through 35 {
+		@for $i from $shade-step through $max-range {
 			@each $suffix, $color in $values {
 				// if the remainder of an integer
-				// division of $i by 5 is zero
-				@if $i % 5 == 0 {
+				// division of $i by $shade-step is zero
+				@if $i % $shade-step == 0 {
 					$percentage: $i*1%; // convert remainder to percentage
 					.#{$prefix}#{$suffix}-darken-#{$i} {
 						#{$property}: mix(black, $color, $percentage) $specificity;