@oardi/css-utils 0.112.0 → 0.114.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oardi/css-utils",
-	"version": "0.112.0",
+	"version": "0.114.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/components/progress.scss

@@ -0,0 +1,194 @@
+@use '../layers.scss';
+
+@layer components {
+	.progress {
+		--progress-block-size: 0.5rem;
+		--progress-inline-size: 8rem;
+		--progress-track-color: var(--bg-active);
+		--progress-value-color: var(--primary);
+		--progress-border-color: var(--control-border-color);
+		--progress-border-width: var(--border-width);
+		--progress-border-radius: 9999px;
+		--progress-animation-duration: 1.5s;
+		--progress-animation-easing: ease-in-out;
+
+		box-sizing: border-box;
+		display: block;
+		inline-size: 100%;
+		block-size: var(--progress-block-size);
+		overflow: hidden;
+		appearance: none;
+		border: var(--progress-border-width) solid var(--progress-border-color);
+		border-radius: var(--progress-border-radius);
+		background-color: var(--progress-track-color);
+		color: var(--progress-value-color);
+		vertical-align: middle;
+		accent-color: var(--progress-value-color);
+	}
+
+	.progress::-webkit-progress-bar {
+		background-color: var(--progress-track-color);
+		border-radius: inherit;
+	}
+
+	.progress::-webkit-progress-value {
+		background-color: var(--progress-value-color);
+		border-radius: inherit;
+		transition: inline-size var(--progress-animation-duration) var(--progress-animation-easing);
+	}
+
+	.progress::-moz-progress-bar {
+		background-color: var(--progress-value-color);
+		border-radius: inherit;
+		transition: inline-size var(--progress-animation-duration) var(--progress-animation-easing);
+	}
+
+	.progress:indeterminate {
+		background:
+			linear-gradient(
+					to right,
+					transparent 0%,
+					transparent 25%,
+					var(--progress-value-color) 25%,
+					var(--progress-value-color) 75%,
+					transparent 75%,
+					transparent 100%
+				) -100%
+				0 / 50% 100% no-repeat,
+			var(--progress-track-color);
+		animation: progress-indeterminate var(--progress-animation-duration)
+			var(--progress-animation-easing) infinite;
+	}
+
+	.progress:indeterminate::-webkit-progress-bar {
+		background: transparent;
+	}
+
+	.progress:indeterminate::-webkit-progress-value {
+		background: transparent;
+	}
+
+	.progress:indeterminate::-moz-progress-bar {
+		background: transparent;
+	}
+
+	.progress-sm {
+		--progress-block-size: 0.375rem;
+	}
+
+	.progress-md {
+		--progress-block-size: 0.5rem;
+	}
+
+	.progress-lg {
+		--progress-block-size: 0.75rem;
+	}
+
+	.progress-inline {
+		display: inline-block;
+		inline-size: var(--progress-inline-size);
+	}
+
+	.progress-block {
+		display: block;
+		inline-size: 100%;
+	}
+
+	.spinner {
+		--spinner-size: 1rem;
+		--spinner-border-width: 0.125rem;
+		--spinner-track-color: color-mix(in srgb, var(--spinner-color) 25%, transparent);
+		--spinner-color: var(--primary);
+		--spinner-animation-duration: 0.75s;
+		--spinner-animation-easing: linear;
+
+		box-sizing: border-box;
+		display: inline-block;
+		flex: 0 0 auto;
+		inline-size: var(--spinner-size);
+		block-size: var(--spinner-size);
+		border: var(--spinner-border-width) solid var(--spinner-track-color);
+		border-inline-start-color: var(--spinner-color);
+		border-radius: 50%;
+		vertical-align: -0.125em;
+		animation: spinner-rotate var(--spinner-animation-duration) var(--spinner-animation-easing)
+			infinite;
+	}
+
+	.spinner-sm {
+		--spinner-size: 0.75rem;
+		--spinner-border-width: 0.125rem;
+	}
+
+	.spinner-md {
+		--spinner-size: 1rem;
+		--spinner-border-width: 0.125rem;
+	}
+
+	.spinner-lg {
+		--spinner-size: 1.5rem;
+		--spinner-border-width: 0.1875rem;
+	}
+
+	.spinner-inline {
+		display: inline-block;
+	}
+
+	.spinner-block {
+		display: block;
+	}
+
+	@each $color in primary, secondary, success, warning, error {
+		.progress-#{$color} {
+			--progress-value-color: var(--#{$color});
+		}
+
+		.spinner-#{$color} {
+			--spinner-color: var(--#{$color});
+		}
+	}
+
+	@keyframes progress-indeterminate {
+		to {
+			background-position:
+				200% 0,
+				0 0;
+		}
+	}
+
+	@keyframes spinner-rotate {
+		to {
+			transform: rotate(1turn);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.progress:indeterminate {
+			background-position:
+				50% 0,
+				0 0;
+			animation: none;
+		}
+
+		.spinner {
+			animation: none;
+		}
+	}
+
+	@media (forced-colors: active) {
+		.progress {
+			--progress-track-color: Canvas;
+			--progress-value-color: Highlight;
+			--progress-border-color: CanvasText;
+
+			forced-color-adjust: none;
+		}
+
+		.spinner {
+			--spinner-track-color: GrayText;
+			--spinner-color: Highlight;
+
+			forced-color-adjust: none;
+		}
+	}
+}

package/scss/gap-responsive.scss

@@ -7,17 +7,19 @@
 	@each $bp, $bp-value in map.get(theme.$theme, breakpoints) {
 		@media (min-width: #{$bp-value}) {
 			@each $key, $value in map.get(theme.$theme, spacings) {
-				$spacing: var(--spacer-#{$key}, #{$value});
+				$suffix: theme.spacing-selector-suffix($key);
+				$token: theme.spacing-token-suffix($key);
+				$spacing: var(--spacer-#{$token}, #{$value});
 
-				.gap-#{$bp}-#{$key} {
+				.gap-#{$bp}-#{$suffix} {
 					gap: $spacing;
 				}
 
-				.row-gap-#{$bp}-#{$key} {
+				.row-gap-#{$bp}-#{$suffix} {
 					row-gap: $spacing;
 				}
 
-				.column-gap-#{$bp}-#{$key} {
+				.column-gap-#{$bp}-#{$suffix} {
 					column-gap: $spacing;
 				}
 			}

package/scss/gap.scss

@@ -4,17 +4,19 @@
 
 @layer utilities {
 	@each $key, $value in map.get(theme.$theme, spacings) {
-		$spacing: var(--spacer-#{$key}, #{$value});
+		$suffix: theme.spacing-selector-suffix($key);
+		$token: theme.spacing-token-suffix($key);
+		$spacing: var(--spacer-#{$token}, #{$value});
 
-		.gap-#{$key} {
+		.gap-#{$suffix} {
 			gap: $spacing;
 		}
 
-		.row-gap-#{$key} {
+		.row-gap-#{$suffix} {
 			row-gap: $spacing;
 		}
 
-		.column-gap-#{$key} {
+		.column-gap-#{$suffix} {
 			column-gap: $spacing;
 		}
 	}

package/scss/index.scss

@@ -43,6 +43,7 @@
 @forward './components/navbar.scss';
 @forward './components/overlay.scss';
 @forward './components/pagination.scss';
+@forward './components/progress.scss';
 @forward './components/range-slider.scss';
 @forward './components/skeleton.scss';
 @forward './components/stepper.scss';

package/scss/spacings-responsive.scss

@@ -36,50 +36,70 @@
 			}
 
 			@each $key, $value in map.get(theme.$theme, spacings) {
-				$spacing: var(--spacer-#{$key}, #{$value});
+				$suffix: theme.spacing-selector-suffix($key);
+				$token: theme.spacing-token-suffix($key);
+				$spacing: var(--spacer-#{$token}, #{$value});
 
-				.m-#{$bp}-#{$key} {
+				.m-#{$bp}-#{$suffix} {
 					margin: $spacing;
 				}
 
-				.p-#{$bp}-#{$key} {
+				.p-#{$bp}-#{$suffix} {
 					padding: $spacing;
 				}
 			}
 
 			@each $key, $value in map.get(theme.$theme, spacings) {
-				$spacing: var(--spacer-#{$key}, #{$value});
+				$suffix: theme.spacing-selector-suffix($key);
+				$token: theme.spacing-token-suffix($key);
+				$spacing: var(--spacer-#{$token}, #{$value});
 
-				.mx-#{$bp}-#{$key} {
+				.mx-#{$bp}-#{$suffix} {
 					margin-left: $spacing;
 					margin-right: $spacing;
 				}
 
-				.my-#{$bp}-#{$key} {
+				.my-#{$bp}-#{$suffix} {
 					margin-top: $spacing;
 					margin-bottom: $spacing;
 				}
 
-				.px-#{$bp}-#{$key} {
+				.px-#{$bp}-#{$suffix} {
 					padding-left: $spacing;
 					padding-right: $spacing;
 				}
 
-				.py-#{$bp}-#{$key} {
+				.py-#{$bp}-#{$suffix} {
 					padding-top: $spacing;
 					padding-bottom: $spacing;
 				}
 			}
 
 			@each $key, $value in map.get(theme.$theme, spacings) {
-				$spacing: var(--spacer-#{$key}, #{$value});
+				$suffix: theme.spacing-selector-suffix($key);
+				$token: theme.spacing-token-suffix($key);
+				$spacing: var(--spacer-#{$token}, #{$value});
+
+				.space-x-#{$bp}-#{$suffix} > :where(* + *) {
+					margin-inline-start: $spacing;
+				}
+
+				.space-y-#{$bp}-#{$suffix} > :where(* + *) {
+					margin-block-start: $spacing;
+				}
+			}
+
+			@each $key, $value in map.get(theme.$theme, spacings) {
+				$suffix: theme.spacing-selector-suffix($key);
+				$token: theme.spacing-token-suffix($key);
+				$spacing: var(--spacer-#{$token}, #{$value});
 
 				@each $dir, $prop in map.get(theme.$theme, directions) {
-					.m#{$dir}-#{$bp}-#{$key} {
+					.m#{$dir}-#{$bp}-#{$suffix} {
 						margin-#{$prop}: $spacing;
 					}
 
-					.p#{$dir}-#{$bp}-#{$key} {
+					.p#{$dir}-#{$bp}-#{$suffix} {
 						padding-#{$prop}: $spacing;
 					}
 				}

package/scss/spacings.scss

@@ -36,51 +36,71 @@
 	// margin / padding spacings
 	// i.e. .m-2, .m-5, p-1,
 	@each $key, $value in map.get(theme.$theme, spacings) {
-		$spacing: var(--spacer-#{$key}, #{$value});
+		$suffix: theme.spacing-selector-suffix($key);
+		$token: theme.spacing-token-suffix($key);
+		$spacing: var(--spacer-#{$token}, #{$value});
 
-		.m-#{$key} {
+		.m-#{$suffix} {
 			margin: $spacing;
 		}
 
-		.p-#{$key} {
+		.p-#{$suffix} {
 			padding: $spacing;
 		}
 	}
 	@each $key, $value in map.get(theme.$theme, spacings) {
-		$spacing: var(--spacer-#{$key}, #{$value});
+		$suffix: theme.spacing-selector-suffix($key);
+		$token: theme.spacing-token-suffix($key);
+		$spacing: var(--spacer-#{$token}, #{$value});
 
-		.mx-#{$key} {
+		.mx-#{$suffix} {
 			margin-left: $spacing;
 			margin-right: $spacing;
 		}
 
-		.my-#{$key} {
+		.my-#{$suffix} {
 			margin-top: $spacing;
 			margin-bottom: $spacing;
 		}
 
-		.px-#{$key} {
+		.px-#{$suffix} {
 			padding-left: $spacing;
 			padding-right: $spacing;
 		}
 
-		.py-#{$key} {
+		.py-#{$suffix} {
 			padding-top: $spacing;
 			padding-bottom: $spacing;
 		}
 	}
 
+	@each $key, $value in map.get(theme.$theme, spacings) {
+		$suffix: theme.spacing-selector-suffix($key);
+		$token: theme.spacing-token-suffix($key);
+		$spacing: var(--spacer-#{$token}, #{$value});
+
+		.space-x-#{$suffix} > :where(* + *) {
+			margin-inline-start: $spacing;
+		}
+
+		.space-y-#{$suffix} > :where(* + *) {
+			margin-block-start: $spacing;
+		}
+	}
+
 	// margin / padding with directions
 	// i.e. mt-2, mb-5, pt-1, ...
 	@each $key, $value in map.get(theme.$theme, spacings) {
-		$spacing: var(--spacer-#{$key}, #{$value});
+		$suffix: theme.spacing-selector-suffix($key);
+		$token: theme.spacing-token-suffix($key);
+		$spacing: var(--spacer-#{$token}, #{$value});
 
 		@each $dir, $prop in map.get(theme.$theme, directions) {
-			.m#{$dir}-#{$key} {
+			.m#{$dir}-#{$suffix} {
 				margin-#{$prop}: $spacing;
 			}
 
-			.p#{$dir}-#{$key} {
+			.p#{$dir}-#{$suffix} {
 				padding-#{$prop}: $spacing;
 			}
 		}

package/scss/theme.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:string';
 
 $-spacer: 1rem;
 
@@ -101,13 +102,37 @@ $-directions: (
 
 $-spacings: (
 	0: 0,
+	0.5: $-spacer * 0.125,
 	1: $-spacer * 0.25,
+	1.5: $-spacer * 0.375,
 	2: $-spacer * 0.5,
+	2.5: $-spacer * 0.75,
 	3: $-spacer,
+	3.5: $-spacer * 1.25,
 	4: $-spacer * 1.5,
+	4.5: $-spacer * 2.25,
 	5: $-spacer * 3, // add auto
 );
 
+@function -replace($value, $search, $replacement) {
+	$index: string.index($value, $search);
+
+	@if $index {
+		@return string.slice($value, 1, $index - 1) + $replacement +
+			-replace(string.slice($value, $index + string.length($search)), $search, $replacement);
+	}
+
+	@return $value;
+}
+
+@function spacing-token-suffix($key) {
+	@return -replace('#{$key}', '.', '-');
+}
+
+@function spacing-selector-suffix($key) {
+	@return string.unquote(-replace('#{$key}', '.', '\\.'));
+}
+
 $-positions: (relative, absolute, fixed, static, sticky, inherit, initial, unset);
 
 $-z-index-levels: (

package/scss/variables.scss

@@ -28,7 +28,7 @@
 		}
 
 		@each $name, $value in map.get(theme.$theme, spacings) {
-			--spacer-#{$name}: #{$value};
+			--spacer-#{theme.spacing-token-suffix($name)}: #{$value};
 		}
 
 		--line-height: 1.8;