@oardi/css-utils 0.127.0 → 0.129.0

package/css-utils-manifest.json

@@ -1,6 +1,6 @@
 {
 	"package": "@oardi/css-utils",
-	"version": "0.127.0",
+	"version": "0.129.0",
 	"breakpoints": { "sm": "576px", "md": "768px", "lg": "992px", "xl": "1200px", "xxl": "1400px" },
 	"utilities": {
 		"Display": {
@@ -235,6 +235,19 @@
 		},
 		"Borders": {
 			"families": [
+				{
+					"patterns": ["border-ring-{value}"],
+					"values": [
+						"accent",
+						"animated",
+						"error",
+						"glow",
+						"primary",
+						"secondary",
+						"success",
+						"warning"
+					]
+				},
 				{
 					"patterns": ["border-{value}"],
 					"values": [
@@ -249,6 +262,7 @@
 						"e",
 						"error",
 						"primary",
+						"ring",
 						"s",
 						"secondary",
 						"success",
@@ -367,7 +381,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.129.0`
 - Source: public SCSS entry point and utility configuration
 
 ## Usage guidance
@@ -192,7 +192,11 @@ Values: `0` | `1` | `2` | `3` | `4` | `5` | `first` | `last`
 
 ## Borders
 
-Values: `0` | `1` | `2` | `3` | `4` | `5` | `accent` | `b` | `e` | `error` | `primary` | `s` | `secondary` | `success` | `t` | `transparent` | `warning`
+Values: `accent` | `animated` | `error` | `glow` | `primary` | `secondary` | `success` | `warning`
+
+- `border-ring-{value}`
+
+Values: `0` | `1` | `2` | `3` | `4` | `5` | `accent` | `b` | `e` | `error` | `primary` | `ring` | `s` | `secondary` | `success` | `t` | `transparent` | `warning`
 
 - `border-{value}`
 
@@ -268,7 +272,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.129.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/borders.scss

@@ -4,6 +4,12 @@
 
 $borderWidths: 0, 1, 2, 3, 4, 5;
 
+@property --border-ring-angle {
+	syntax: '<angle>';
+	inherits: false;
+	initial-value: 0deg;
+}
+
 @layer utilities {
 	.border {
 		border: var(--border-width) solid var(--border-color);
@@ -40,4 +46,67 @@ $borderWidths: 0, 1, 2, 3, 4, 5;
 	.border-transparent {
 		--border-color: transparent;
 	}
+
+	.border-ring {
+		--border-ring-color: currentColor;
+		--border-ring-width: 2px;
+		--border-ring-size: 90deg;
+		--border-ring-offset: 0px;
+		--border-ring-duration: 1.5s;
+		--border-ring-glow-blur: 6px;
+		--border-ring-glow-opacity: 0.8;
+
+		position: relative;
+
+		&::before,
+		&.border-ring-glow::after {
+			content: '';
+			position: absolute;
+			inset: calc(var(--border-ring-offset) * -1);
+			padding: var(--border-ring-width);
+			border-radius: inherit;
+			pointer-events: none;
+			background: conic-gradient(
+				from var(--border-ring-angle),
+				var(
+					--border-ring-stops,
+					var(--border-ring-color) 0 var(--border-ring-size),
+					transparent var(--border-ring-size)
+				)
+			);
+			mask:
+				linear-gradient(#000 0 0) content-box,
+				linear-gradient(#000 0 0);
+			mask-composite: exclude;
+		}
+
+		&.border-ring-glow::after {
+			filter: blur(var(--border-ring-glow-blur));
+			opacity: var(--border-ring-glow-opacity);
+		}
+	}
+
+	.border-ring-animated::before,
+	.border-ring-animated.border-ring-glow::after {
+		animation: border-ring-rotate var(--border-ring-duration, 1.5s) linear infinite;
+	}
+
+	@each $name, $value in map.get(theme.$theme, colors) {
+		.border-ring-#{$name} {
+			--border-ring-color: var(--#{$name});
+		}
+	}
+
+	@keyframes border-ring-rotate {
+		to {
+			--border-ring-angle: 360deg;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.border-ring-animated::before,
+		.border-ring-animated.border-ring-glow::after {
+			animation: none;
+		}
+	}
 }

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 {