@oardi/css-utils 0.127.0 → 0.128.0

package/css-utils-manifest.json

@@ -1,6 +1,6 @@
 {
 	"package": "@oardi/css-utils",
-	"version": "0.127.0",
+	"version": "0.128.0",
 	"breakpoints": { "sm": "576px", "md": "768px", "lg": "992px", "xl": "1200px", "xxl": "1400px" },
 	"utilities": {
 		"Display": {
@@ -367,7 +367,24 @@
 						"950"
 					]
 				},
-				{ "patterns": ["bg-opacity-{value}"], "values": ["10", "25", "50", "75"] },
+				{
+					"patterns": ["bg-opacity-{value}"],
+					"values": [
+						"0",
+						"10",
+						"100",
+						"20",
+						"25",
+						"30",
+						"40",
+						"50",
+						"60",
+						"70",
+						"75",
+						"80",
+						"90"
+					]
+				},
 				{
 					"patterns": ["bg-{value}"],
 					"values": [

package/css-utils-reference.md

@@ -3,7 +3,7 @@
 > Generated automatically. Do not edit manually.
 
 - Package: `@oardi/css-utils`
-- Version: `0.127.0`
+- Version: `0.128.0`
 - Source: public SCSS entry point and utility configuration
 
 ## Usage guidance
@@ -268,7 +268,7 @@ Values: `100` | `150` | `200` | `250` | `300` | `350` | `400` | `450` | `50` | `
 
 - `bg-gray-{value}`
 
-Values: `10` | `25` | `50` | `75`
+Values: `0` | `10` | `100` | `20` | `25` | `30` | `40` | `50` | `60` | `70` | `75` | `80` | `90`
 
 - `bg-opacity-{value}`
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oardi/css-utils",
-	"version": "0.127.0",
+	"version": "0.128.0",
 	"author": "Ardian Shala",
 	"homepage": "https://css-utils.oardi.com",
 	"description": "Powerful set of semantic css classes with support for breakpoints, directions and spacings",

package/scss/utilities.scss

@@ -1,5 +1,8 @@
 @use 'sass:color';
+@use 'sass:list';
 @use 'sass:map';
+@use 'sass:math';
+@use 'sass:string';
 @use './layers.scss';
 @use './display.scss';
 @use './theme.scss' as theme;
@@ -40,6 +43,31 @@ $-inset-properties: (
 
 $-overflow-wrap-values: normal, break-word, anywhere;
 
+$-background-opacities: (
+	0: 0,
+	10: 0.1,
+	20: 0.2,
+	25: 0.25,
+	30: 0.3,
+	40: 0.4,
+	50: 0.5,
+	60: 0.6,
+	70: 0.7,
+	75: 0.75,
+	80: 0.8,
+	90: 0.9,
+	100: 1,
+);
+
+$-background-opacity-selectors: ();
+@each $percentage, $opacity in $-background-opacities {
+	$-background-opacity-selectors: list.append(
+		$-background-opacity-selectors,
+		string.unquote('.bg-opacity-#{$percentage}'),
+		$separator: comma
+	);
+}
+
 // Guard the dynamic value: a var() declaration can otherwise become invalid only
 // at computed-value time, when an earlier color declaration cannot rescue it.
 @mixin -background-foreground($background, $fallback) {
@@ -63,7 +91,7 @@ $-overflow-wrap-values: normal, break-word, anywhere;
 	@supports (color: contrast-color(white)) {
 		background-color: rgb(from #{$background} r g b / var(--bg-opacity));
 
-		&:where(.bg-opacity-10, .bg-opacity-25, .bg-opacity-50, .bg-opacity-75) {
+		&:where(#{$-background-opacity-selectors}) {
 			--bg-opacity-backdrop: inherit;
 			--bg-opacity-composite: color-mix(
 				in srgb,
@@ -76,8 +104,7 @@ $-overflow-wrap-values: normal, break-word, anywhere;
 			fill: currentcolor;
 		}
 
-		:where(.bg-opacity-10, .bg-opacity-25, .bg-opacity-50, .bg-opacity-75)
-			> &:where(.bg-opacity-10, .bg-opacity-25, .bg-opacity-50, .bg-opacity-75) {
+		:where(#{$-background-opacity-selectors}) > &:where(#{$-background-opacity-selectors}) {
 			--bg-opacity-rendered: inherit;
 			--bg-opacity-composite: color-mix(
 				in srgb,
@@ -163,24 +190,11 @@ $-overflow-wrap-values: normal, break-word, anywhere;
 		@include -background-utility(var(--bg-active), var(--text-color));
 	}
 
-	.bg-opacity-10 {
-		--bg-opacity: 0.1;
-		--bg-opacity-percentage: 10%;
-	}
-
-	.bg-opacity-25 {
-		--bg-opacity: 0.25;
-		--bg-opacity-percentage: 25%;
-	}
-
-	.bg-opacity-50 {
-		--bg-opacity: 0.5;
-		--bg-opacity-percentage: 50%;
-	}
-
-	.bg-opacity-75 {
-		--bg-opacity: 0.75;
-		--bg-opacity-percentage: 75%;
+	@each $percentage, $opacity in $-background-opacities {
+		.bg-opacity-#{$percentage} {
+			--bg-opacity: #{$opacity};
+			--bg-opacity-percentage: #{math.percentage($opacity)};
+		}
 	}
 
 	.img-responsive {