@volverjs/style 0.1.12-beta.2 → 0.1.12-beta.21

package/src/utilities/backgrounds.scss

@@ -3,7 +3,7 @@
 // background-attachment
 @include spread-map-into-utilities(
 	$map: $background-attachment,
-	$class: 'bg',
+	$class: bg,
 	$attribute: 'background-attachment',
 	$zero-specificity: $zero-specificity-for-utilities
 );
@@ -11,7 +11,7 @@
 // background-clip
 @include spread-map-into-utilities(
 	$map: $background-clip,
-	$class: 'bg-clip',
+	$class: bg-clip,
 	$attribute: 'background-clip',
 	$zero-specificity: $zero-specificity-for-utilities
 );
@@ -19,7 +19,7 @@
 // background-origin
 @include spread-map-into-utilities(
 	$map: $background-origin,
-	$class: 'bg-origin',
+	$class: bg-origin,
 	$attribute: 'background-origin',
 	$zero-specificity: $zero-specificity-for-utilities
 );
@@ -27,7 +27,7 @@
 // background-position
 @include spread-map-into-utilities(
 	$map: $background-position,
-	$class: 'bg',
+	$class: bg,
 	$attribute: 'background-position',
 	$zero-specificity: $zero-specificity-for-utilities
 );
@@ -53,5 +53,15 @@
 	$map: $background-image,
 	$class: bg,
 	$attribute: background-image,
+	$prop: bg,
+	$zero-specificity: $zero-specificity-for-utilities
+);
+
+// background gradients
+@include spread-map-into-utilities(
+	$map: $gradient,
+	$class: bg-gradient,
+	$attribute: background-image,
+	$prop: gradient,
 	$zero-specificity: $zero-specificity-for-utilities
 );

package/src/utilities/flexbox.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:meta';
 @use '../context' as *;
 
 // flex direction
@@ -34,6 +35,7 @@
 		%#{$prefix}#{$postfix} {
 			#{$prop}: #{$value};
 		}
+
 		@include wrap-with-where(
 			$selector: '.#{$prefix}#{$postfix}',
 			$enabled: $zero-specificity-for-utilities
@@ -57,7 +59,7 @@
 	$default: null;
 
 	// check if value is not a map (spacing-dynamic)
-	@if type-of($value) != 'map' {
+	@if meta.type-of($value) != 'map' {
 		$default: $value;
 	}
 
@@ -67,6 +69,7 @@
 	%gap-#{$size} {
 		gap: #{$var};
 	}
+
 	@include wrap-with-where(
 		$selector: '.gap-#{$size}',
 		$enabled: $zero-specificity-for-utilities
@@ -78,6 +81,7 @@
 	%gap-x-#{$size} {
 		column-gap: #{$var};
 	}
+
 	@include wrap-with-where(
 		$selector: '.gap-x-#{$size}',
 		$enabled: $zero-specificity-for-utilities
@@ -89,6 +93,7 @@
 	%gap-y-#{$size} {
 		row-gap: #{$var};
 	}
+
 	@include wrap-with-where(
 		$selector: '.gap-y-#{$size}',
 		$enabled: $zero-specificity-for-utilities

package/src/utilities/index.scss

@@ -4,7 +4,6 @@
 @forward 'effects';
 @forward 'filters';
 @forward 'flexbox';
-@forward 'gradients';
 @forward 'grid';
 @forward 'interactivity';
 @forward 'layout';

package/src/utilities/interactivity.scss

@@ -1,10 +1,26 @@
 @use 'sass:map';
 @use '../context' as *;
 
-// grid template columns
+// cursor
 @include spread-map-into-utilities(
 	$map: $cursor,
 	$class: cursor,
 	$attribute: cursor,
 	$zero-specificity: $zero-specificity-for-utilities
 );
+
+// pointer events
+@include spread-map-into-utilities(
+	$map: $pointer-events,
+	$class: pointer-events,
+	$attribute: pointer-events,
+	$zero-specificity: $zero-specificity-for-utilities
+);
+
+// user select
+@include spread-map-into-utilities(
+	$map: $user-select,
+	$class: user-select,
+	$attribute: user-select,
+	$zero-specificity: $zero-specificity-for-utilities
+);

package/src/utilities/layout.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:meta';
 @use '../context' as *;
 
 // aspect
@@ -63,7 +64,6 @@
 	$attribute: display,
 	$zero-specificity: $zero-specificity-for-utilities
 );
-
 @include spread-map-into-utilities(
 	$map: $display-with-breakpoints,
 	$attribute: display,
@@ -135,10 +135,12 @@
 	$value in map.merge($placement, map.merge($spacing, $spacing-dynamic))
 {
 	$var: $value;
-	@if not map-has-key($placement, $size) {
+
+	@if not map.has-key($placement, $size) {
 		// check if value is not a map (spacing-dynamic)
 		$var: var(--spacing-#{$size});
-		@if type-of($value) != 'map' {
+
+		@if meta.type-of($value) != 'map' {
 			$var: var(--spacing-#{$size}, #{$value});
 		}
 	}
@@ -147,6 +149,7 @@
 	%inset-#{$size} {
 		inset: #{$var};
 	}
+
 	@include wrap-with-where(
 		$selector: '.inset-#{$size}',
 		$enabled: $zero-specificity-for-utilities
@@ -158,6 +161,7 @@
 	%inset-x-#{$size} {
 		inset-inline: #{$var};
 	}
+
 	@include wrap-with-where(
 		$selector: '.inset-x-#{$size}',
 		$enabled: $zero-specificity-for-utilities
@@ -169,6 +173,7 @@
 	%inset-y-#{$size} {
 		inset-block: #{$var};
 	}
+
 	@include wrap-with-where(
 		$selector: '.inset-y-#{$size}',
 		$enabled: $zero-specificity-for-utilities
@@ -181,6 +186,7 @@
 		%#{$direction}-#{$size} {
 			#{$direction}: #{$var};
 		}
+
 		@include wrap-with-where(
 			$selector: '.#{$direction}-#{$size}',
 			$enabled: $zero-specificity-for-utilities

package/src/utilities/sizing.scss

@@ -1,9 +1,17 @@
 @use 'sass:map';
 @use '../context' as *;
 
-// width / height / max-width / max-height
+// width / height / max-width / max-height / min-width / min-height
 @each $class,
-	$attribute in(w: width, h: height, max-w: max-width, max-h: max-height)
+	$attribute
+		in(
+			w: width,
+			h: height,
+			max-w: max-width,
+			max-h: max-height,
+			min-w: min-width,
+			min-h: min-height
+		)
 {
 	@include spread-map-into-utilities(
 		$map: map.merge($spacing, $spacing-dynamic),

package/src/utilities/spacing.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:meta';
 @use '../context' as *;
 
 @each $prefix, $prop in (m: margin, p: padding, n: margin) {
@@ -6,7 +7,7 @@
 		$var: var(--spacing-#{$size});
 
 		// check if value is not a map (spacing-dynamic)
-		@if type-of($value) != 'map' {
+		@if meta.type-of($value) != 'map' {
 			$var: var(--spacing-#{$size}, #{$value});
 		}
 
@@ -19,6 +20,7 @@
 		%#{$prefix}#{$size} {
 			#{$prop}: #{$var};
 		}
+
 		@include wrap-with-where(
 			$selector: '.#{$prefix}-#{$size}',
 			$enabled: $zero-specificity-for-utilities
@@ -30,6 +32,7 @@
 		%#{$prefix}x-#{$size} {
 			#{$prop}-inline: #{$var};
 		}
+
 		@include wrap-with-where(
 			$selector: '.#{$prefix}x-#{$size}',
 			$enabled: $zero-specificity-for-utilities
@@ -41,6 +44,7 @@
 		%#{$prefix}y-#{$size} {
 			#{$prop}-block: #{$var};
 		}
+
 		@include wrap-with-where(
 			$selector: '.#{$prefix}y-#{$size}',
 			$enabled: $zero-specificity-for-utilities
@@ -55,6 +59,7 @@
 			%#{$prefix}#{$direction-prefix}-#{$size} {
 				#{$prop}-#{$direction}: #{$var};
 			}
+
 			@include wrap-with-where(
 				$selector: '.#{$prefix}#{$direction-prefix}-#{$size}',
 				$enabled: $zero-specificity-for-utilities
@@ -69,6 +74,7 @@
 %m-auto {
 	margin: auto;
 }
+
 @include wrap-with-where(
 	$selector: '.m-auto',
 	$enabled: $zero-specificity-for-utilities
@@ -79,6 +85,7 @@
 %mx-auto {
 	margin-inline: auto;
 }
+
 @include wrap-with-where(
 	$selector: '.mx-auto',
 	$enabled: $zero-specificity-for-utilities
@@ -89,6 +96,7 @@
 %my-auto {
 	margin-block: auto;
 }
+
 @include wrap-with-where(
 	$selector: '.my-auto',
 	$enabled: $zero-specificity-for-utilities
@@ -100,6 +108,7 @@
 	%m#{$direction-prefix}-auto {
 		margin-#{$direction}: auto;
 	}
+
 	@include wrap-with-where(
 		$selector: '.m#{$direction-prefix}-auto',
 		$enabled: $zero-specificity-for-utilities

package/src/utilities/transforms.scss

@@ -62,7 +62,7 @@
 	}
 
 	%translate-x-#{$size} {
-		translate: #{$value};
+		translate: #{$value} 0;
 	}
 	@include wrap-with-where(
 		$selector: '.translate-x-#{$size}',
@@ -92,7 +92,7 @@
 	}
 
 	%-translate-x-#{$size} {
-		translate: -#{$value};
+		translate: -#{$value} 0;
 	}
 	@include wrap-with-where(
 		$selector: '.-translate-x-#{$size}',

package/src/utilities/typography.scss

@@ -34,6 +34,7 @@
 %italic {
 	font-style: italic;
 }
+
 @include wrap-with-where(
 	$selector: '.italic',
 	$enabled: $zero-specificity-for-utilities
@@ -44,6 +45,7 @@
 %non-italic {
 	font-style: normal;
 }
+
 @include wrap-with-where(
 	$selector: '.non-italic',
 	$enabled: $zero-specificity-for-utilities
@@ -56,6 +58,7 @@
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 }
+
 @include wrap-with-where(
 	$selector: '.antialiased',
 	$enabled: $zero-specificity-for-utilities
@@ -67,6 +70,7 @@
 	-webkit-font-smoothing: auto;
 	-moz-osx-font-smoothing: auto;
 }
+
 @include wrap-with-where(
 	$selector: '.subpixel-antialiased',
 	$enabled: $zero-specificity-for-utilities
@@ -168,6 +172,7 @@
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
+
 @include wrap-with-where(
 	$selector: '.truncate',
 	$enabled: $zero-specificity-for-utilities
@@ -178,6 +183,7 @@
 %text-ellipsis {
 	text-overflow: ellipsis;
 }
+
 @include wrap-with-where(
 	$selector: '.text-ellipsis',
 	$enabled: $zero-specificity-for-utilities
@@ -188,6 +194,7 @@
 %text-clip {
 	text-overflow: clip;
 }
+
 @include wrap-with-where(
 	$selector: '.text-clip',
 	$enabled: $zero-specificity-for-utilities
@@ -195,11 +202,23 @@
 	@extend %text-clip;
 }
 
+%text-balance {
+	text-wrap: balance;
+}
+
+@include wrap-with-where(
+	$selector: '.text-balance',
+	$enabled: $zero-specificity-for-utilities
+) {
+	@extend %text-balance;
+}
+
 // word break
 %break-normal {
 	overflow-wrap: normal;
 	word-break: normal;
 }
+
 @include wrap-with-where(
 	$selector: '.break-normal',
 	$enabled: $zero-specificity-for-utilities
@@ -210,6 +229,7 @@
 %break-words {
 	overflow-wrap: break-word;
 }
+
 @include wrap-with-where(
 	$selector: '.break-words',
 	$enabled: $zero-specificity-for-utilities
@@ -220,6 +240,7 @@
 %break-all {
 	word-break: break-all;
 }
+
 @include wrap-with-where(
 	$selector: '.break-all',
 	$enabled: $zero-specificity-for-utilities

package/dist/props/gradient.css

@@ -1 +0,0 @@
-:where(:host,:root,.theme){--gradient-brand: linear-gradient(to bottom right, var(--color-brand-darken-3), var(--color-brand), var(--color-brand-lighten-3));--gradient-accent: linear-gradient(to bottom right, var(--color-accent-darken-3), var(--color-accent), var(--color-accent-lighten-3));--gradient-1: linear-gradient(to bottom right, #1f005c, #5b0060, #870160, #ac255e, #ca485c, #e16b5c, #f39060, #ffb56b);--gradient-2: linear-gradient(to bottom right, #48005c, #8300e2, #a269ff);--gradient-3: radial-gradient(circle at top right, hsl(180, 100%, 50%), hsla(180, 100%, 50%, 0)), radial-gradient(circle at bottom left, hsl(328, 100%, 54%), hsla(328, 100%, 54%, 0));--gradient-4: linear-gradient(to bottom right, #00f5a0, #00d9f5);--gradient-5: conic-gradient(from -270deg at 75% 110%, fuchsia, floralwhite);--gradient-6: conic-gradient(from -90deg at top left, black, white);--gradient-7: linear-gradient(to bottom right, #72c6ef, #004e8f);--gradient-8: conic-gradient(from 90deg at 50% 0%, #111, 50%, #222, #111);--gradient-9: conic-gradient(from .5turn at bottom center, lightblue, white);--gradient-10: conic-gradient(from 90deg at 40% -25%, #ffd700, #f79d03, #ee6907, #e6390a, #de0d0d, #d61039, #cf1261, #c71585, #cf1261, #d61039, #de0d0d, #ee6907, #f79d03, #ffd700, #ffd700, #ffd700);--gradient-11: conic-gradient(at bottom left, deeppink, cyan);--gradient-12: conic-gradient(from 90deg at 25% -10%, #ff4500, #d3f340, #7bee85, #afeeee, #7bee85);--gradient-13: radial-gradient(circle at 50% 200%, #000142, #3b0083, #b300c3, #ff059f, #ff4661, #ffad86, #fff3c7);--gradient-14: conic-gradient(at top right, lime, cyan);--gradient-15: linear-gradient(to bottom right, #c7d2fe, #fecaca, #fef3c7);--gradient-16: radial-gradient(circle at 50% -250%, #374151, #111827, #000);--gradient-17: conic-gradient(from -90deg at 50% -25%, blue, blueviolet);--gradient-18: linear-gradient(0deg, hsla(0, 100%, 50%, .8), hsla(0, 100%, 50%, 0) 75%), linear-gradient(60deg, hsla(60, 100%, 50%, .8), hsla(60, 100%, 50%, 0) 75%), linear-gradient(120deg, hsla(120, 100%, 50%, .8), hsla(120, 100%, 50%, 0) 75%), linear-gradient(180deg, hsla(180, 100%, 50%, .8), hsla(180, 100%, 50%, 0) 75%), linear-gradient(240deg, hsla(240, 100%, 50%, .8), hsla(240, 100%, 50%, 0) 75%), linear-gradient(300deg, hsla(300, 100%, 50%, .8), hsla(300, 100%, 50%, 0) 75%);--gradient-19: linear-gradient(to bottom right, #ffe259, #ffa751);--gradient-20: conic-gradient(from -135deg at -10% center, #ffa500, #ff7715, #ff522a, #ff3f47, #ff5482, #ff69b4);--gradient-21: conic-gradient(from -90deg at 25% 115%, #f00, #f06, #f0c, #c0f, #60f, #00f, #00f, #00f, #00f);--gradient-22: linear-gradient(to bottom right, #acb6e5, #86fde8);--gradient-23: linear-gradient(to bottom right, #536976, #292e49);--gradient-24: conic-gradient(from .5turn at 0% 0%, #00c476, 10%, #82b0ff, 90%, #00c476);--gradient-25: conic-gradient(at 125% 50%, #b78cf7, #ff7c94, #ffcf0d, #ff7c94, #b78cf7);--gradient-26: linear-gradient(to bottom right, #9796f0, #fbc7d4);--gradient-27: conic-gradient(from .5turn at bottom left, deeppink, #639);--gradient-28: conic-gradient(from -90deg at 50% 105%, white, orchid);--gradient-29: radial-gradient(circle at top right, hsl(250, 100%, 85%), hsla(250, 100%, 85%, 0)), radial-gradient(circle at bottom left, hsl(220, 90%, 75%), hsla(220, 90%, 75%, 0));--gradient-30: radial-gradient(circle at top right, hsl(150, 100%, 50%), hsla(150, 100%, 50%, 0)), radial-gradient(circle at bottom left, hsl(150, 100%, 84%), hsla(150, 100%, 84%, 0));--noise-1: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.005' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");--noise-2: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");--noise-3: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.25' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");--noise-4: url("data:image/svg+xml,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");--noise-5: url("data:image/svg+xml,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");--noise-filter-1: contrast(300%) brightness(100%);--noise-filter-2: contrast(200%) brightness(150%);--noise-filter-3: contrast(200%) brightness(250%);--noise-filter-4: contrast(200%) brightness(500%);--noise-filter-5: contrast(200%) brightness(1000%)}

package/dist/utilities/gradients.css

@@ -1 +0,0 @@
-:where(.bg-gradient-brand){background:var(--gradient-brand, linear-gradient(to bottom right, var(--color-brand-darken-3), var(--color-brand), var(--color-brand-lighten-3)))}:where(.bg-gradient-accent){background:var(--gradient-accent, linear-gradient(to bottom right, var(--color-accent-darken-3), var(--color-accent), var(--color-accent-lighten-3)))}:where(.bg-gradient-1){background:var(--gradient-1, linear-gradient(to bottom right, #1f005c, #5b0060, #870160, #ac255e, #ca485c, #e16b5c, #f39060, #ffb56b))}:where(.bg-gradient-2){background:var(--gradient-2, linear-gradient(to bottom right, #48005c, #8300e2, #a269ff))}:where(.bg-gradient-3){background:var(--gradient-3, radial-gradient(circle at top right, hsl(180, 100%, 50%), hsla(180, 100%, 50%, 0)), radial-gradient(circle at bottom left, hsl(328, 100%, 54%), hsla(328, 100%, 54%, 0)))}:where(.bg-gradient-4){background:var(--gradient-4, linear-gradient(to bottom right, #00f5a0, #00d9f5))}:where(.bg-gradient-5){background:var(--gradient-5, conic-gradient(from -270deg at 75% 110%, fuchsia, floralwhite))}:where(.bg-gradient-6){background:var(--gradient-6, conic-gradient(from -90deg at top left, black, white))}:where(.bg-gradient-7){background:var(--gradient-7, linear-gradient(to bottom right, #72c6ef, #004e8f))}:where(.bg-gradient-8){background:var(--gradient-8, conic-gradient(from 90deg at 50% 0%, #111, 50%, #222, #111))}:where(.bg-gradient-9){background:var(--gradient-9, conic-gradient(from .5turn at bottom center, lightblue, white))}:where(.bg-gradient-10){background:var(--gradient-10, conic-gradient(from 90deg at 40% -25%, #ffd700, #f79d03, #ee6907, #e6390a, #de0d0d, #d61039, #cf1261, #c71585, #cf1261, #d61039, #de0d0d, #ee6907, #f79d03, #ffd700, #ffd700, #ffd700))}:where(.bg-gradient-11){background:var(--gradient-11, conic-gradient(at bottom left, deeppink, cyan))}:where(.bg-gradient-12){background:var(--gradient-12, conic-gradient(from 90deg at 25% -10%, #ff4500, #d3f340, #7bee85, #afeeee, #7bee85))}:where(.bg-gradient-13){background:var(--gradient-13, radial-gradient(circle at 50% 200%, #000142, #3b0083, #b300c3, #ff059f, #ff4661, #ffad86, #fff3c7))}:where(.bg-gradient-14){background:var(--gradient-14, conic-gradient(at top right, lime, cyan))}:where(.bg-gradient-15){background:var(--gradient-15, linear-gradient(to bottom right, #c7d2fe, #fecaca, #fef3c7))}:where(.bg-gradient-16){background:var(--gradient-16, radial-gradient(circle at 50% -250%, #374151, #111827, #000))}:where(.bg-gradient-17){background:var(--gradient-17, conic-gradient(from -90deg at 50% -25%, blue, blueviolet))}:where(.bg-gradient-18){background:var(--gradient-18, linear-gradient(0deg, hsla(0, 100%, 50%, .8), hsla(0, 100%, 50%, 0) 75%), linear-gradient(60deg, hsla(60, 100%, 50%, .8), hsla(60, 100%, 50%, 0) 75%), linear-gradient(120deg, hsla(120, 100%, 50%, .8), hsla(120, 100%, 50%, 0) 75%), linear-gradient(180deg, hsla(180, 100%, 50%, .8), hsla(180, 100%, 50%, 0) 75%), linear-gradient(240deg, hsla(240, 100%, 50%, .8), hsla(240, 100%, 50%, 0) 75%), linear-gradient(300deg, hsla(300, 100%, 50%, .8), hsla(300, 100%, 50%, 0) 75%))}:where(.bg-gradient-19){background:var(--gradient-19, linear-gradient(to bottom right, #ffe259, #ffa751))}:where(.bg-gradient-20){background:var(--gradient-20, conic-gradient(from -135deg at -10% center, #ffa500, #ff7715, #ff522a, #ff3f47, #ff5482, #ff69b4))}:where(.bg-gradient-21){background:var(--gradient-21, conic-gradient(from -90deg at 25% 115%, #f00, #f06, #f0c, #c0f, #60f, #00f, #00f, #00f, #00f))}:where(.bg-gradient-22){background:var(--gradient-22, linear-gradient(to bottom right, #acb6e5, #86fde8))}:where(.bg-gradient-23){background:var(--gradient-23, linear-gradient(to bottom right, #536976, #292e49))}:where(.bg-gradient-24){background:var(--gradient-24, conic-gradient(from .5turn at 0% 0%, #00c476, 10%, #82b0ff, 90%, #00c476))}:where(.bg-gradient-25){background:var(--gradient-25, conic-gradient(at 125% 50%, #b78cf7, #ff7c94, #ffcf0d, #ff7c94, #b78cf7))}:where(.bg-gradient-26){background:var(--gradient-26, linear-gradient(to bottom right, #9796f0, #fbc7d4))}:where(.bg-gradient-27){background:var(--gradient-27, conic-gradient(from .5turn at bottom left, deeppink, #639))}:where(.bg-gradient-28){background:var(--gradient-28, conic-gradient(from -90deg at 50% 105%, white, orchid))}:where(.bg-gradient-29){background:var(--gradient-29, radial-gradient(circle at top right, hsl(250, 100%, 85%), hsla(250, 100%, 85%, 0)), radial-gradient(circle at bottom left, hsl(220, 90%, 75%), hsla(220, 90%, 75%, 0)))}:where(.bg-gradient-30){background:var(--gradient-30, radial-gradient(circle at top right, hsl(150, 100%, 50%), hsla(150, 100%, 50%, 0)), radial-gradient(circle at bottom left, hsl(150, 100%, 84%), hsla(150, 100%, 84%, 0)))}

package/src/props/gradient.scss

@@ -1,7 +0,0 @@
-@use '../context' as *;
-
-:where(:host, :root, .theme) {
-	@include spread-map-into-props($gradient, $prefix: gradient);
-	@include spread-map-into-props($noise, $prefix: noise);
-	@include spread-map-into-props($noise-filter, $prefix: noise-filter);
-}

package/src/settings/_gradient.scss

@@ -1,201 +0,0 @@
-// Noise
-$noise: (
-	1:
-		url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.005' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"),
-	2:
-		url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"),
-	3:
-		url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.25' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"),
-	4:
-		url("data:image/svg+xml,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"),
-	5:
-		url("data:image/svg+xml,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"),
-) !default;
-
-// Noise filter
-$noise-filter: (
-	1: contrast(300%) brightness(100%),
-	2: contrast(200%) brightness(150%),
-	3: contrast(200%) brightness(250%),
-	4: contrast(200%) brightness(500%),
-	5: contrast(200%) brightness(1000%),
-) !default;
-$gradient: (
-	brand:
-		linear-gradient(
-			to bottom right,
-			var(--color-brand-darken-3),
-			var(--color-brand),
-			var(--color-brand-lighten-3)
-		),
-	accent:
-		linear-gradient(
-			to bottom right,
-			var(--color-accent-darken-3),
-			var(--color-accent),
-			var(--color-accent-lighten-3)
-		),
-	1:
-		linear-gradient(
-			to bottom right,
-			#1f005c,
-			#5b0060,
-			#870160,
-			#ac255e,
-			#ca485c,
-			#e16b5c,
-			#f39060,
-			#ffb56b
-		),
-	2: linear-gradient(to bottom right, #48005c, #8300e2, #a269ff),
-	3: #{radial-gradient(
-			circle at top right,
-			hsl(180deg 100% 50%),
-			hsl(180deg 100% 50% / 0%)
-		),
-	radial-gradient(
-			circle at bottom left,
-			hsl(328deg 100% 54%),
-			hsl(328deg 100% 54% / 0%)
-		)},
-	4: linear-gradient(to bottom right, #00f5a0, #00d9f5),
-	5: conic-gradient(from -270deg at 75% 110%, fuchsia, floralwhite),
-	6: conic-gradient(from -90deg at top left, black, white),
-	7: linear-gradient(to bottom right, #72c6ef, #004e8f),
-	8: conic-gradient(from 90deg at 50% 0%, #111, 50%, #222, #111),
-	9: conic-gradient(from 0.5turn at bottom center, lightblue, white),
-	10:
-		conic-gradient(
-			from 90deg at 40% -25%,
-			#ffd700,
-			#f79d03,
-			#ee6907,
-			#e6390a,
-			#de0d0d,
-			#d61039,
-			#cf1261,
-			#c71585,
-			#cf1261,
-			#d61039,
-			#de0d0d,
-			#ee6907,
-			#f79d03,
-			#ffd700,
-			#ffd700,
-			#ffd700
-		),
-	11: conic-gradient(at bottom left, deeppink, cyan),
-	12:
-		conic-gradient(
-			from 90deg at 25% -10%,
-			#ff4500,
-			#d3f340,
-			#7bee85,
-			#afeeee,
-			#7bee85
-		),
-	13:
-		radial-gradient(
-			circle at 50% 200%,
-			#000142,
-			#3b0083,
-			#b300c3,
-			#ff059f,
-			#ff4661,
-			#ffad86,
-			#fff3c7
-		),
-	14: conic-gradient(at top right, lime, cyan),
-	15: linear-gradient(to bottom right, #c7d2fe, #fecaca, #fef3c7),
-	16: radial-gradient(circle at 50% -250%, #374151, #111827, #000),
-	17: conic-gradient(from -90deg at 50% -25%, blue, blueviolet),
-	18: #{linear-gradient(
-			0deg,
-			hsla(0deg 100% 50% / 80%),
-			hsla(0deg 100% 50% / 0%) 75%
-		),
-	linear-gradient(
-		60deg,
-		hsla(60deg 100% 50% / 80%),
-		hsla(60deg 100% 50% / 0%) 75%,
-	),
-	linear-gradient(
-		120deg,
-		hsla(120deg 100% 50% / 80%),
-		hsla(120deg 100% 50% / 0%) 75%,
-	),
-	linear-gradient(
-		180deg,
-		hsla(180deg 100% 50% / 80%),
-		hsla(180deg 100% 50% / 0%) 75%,
-	),
-	linear-gradient(
-		240deg,
-		hsla(240deg 100% 50% / 80%),
-		hsla(240deg 100% 50% / 0%) 75%,
-	),
-	linear-gradient(
-			300deg,
-			hsla(300deg 100% 50% / 80%),
-			hsla(300deg 100% 50% / 0%) 75%
-		)},
-	19: linear-gradient(to bottom right, #ffe259, #ffa751),
-	20:
-		conic-gradient(
-			from -135deg at -10% center,
-			#ffa500,
-			#ff7715,
-			#ff522a,
-			#ff3f47,
-			#ff5482,
-			#ff69b4
-		),
-	21:
-		conic-gradient(
-			from -90deg at 25% 115%,
-			#f00,
-			#f06,
-			#f0c,
-			#c0f,
-			#60f,
-			#00f,
-			#00f,
-			#00f,
-			#00f
-		),
-	22: linear-gradient(to bottom right, #acb6e5, #86fde8),
-	23: linear-gradient(to bottom right, #536976, #292e49),
-	24:
-		conic-gradient(
-			from 0.5turn at 0% 0%,
-			#00c476,
-			10%,
-			#82b0ff,
-			90%,
-			#00c476
-		),
-	25: conic-gradient(at 125% 50%, #b78cf7, #ff7c94, #ffcf0d, #ff7c94, #b78cf7),
-	26: linear-gradient(to bottom right, #9796f0, #fbc7d4),
-	27: conic-gradient(from 0.5turn at bottom left, deeppink, rebeccapurple),
-	28: conic-gradient(from -90deg at 50% 105%, white, orchid),
-	29: #{radial-gradient(
-			circle at top right,
-			hsl(250deg 100% 85%),
-			hsl(250deg 100% 85% / 0%)
-		),
-	radial-gradient(
-			circle at bottom left,
-			hsl(220deg 90% 75%),
-			hsl(220deg 90% 75% / 0%)
-		)},
-	30: #{radial-gradient(
-			circle at top right,
-			hsl(150deg 100% 50%),
-			hsl(150deg 100% 50% / 0%)
-		),
-	radial-gradient(
-			circle at bottom left,
-			hsl(150deg 100% 84%),
-			hsl(150deg 100% 84% / 0%)
-		)},
-) !default;

package/src/utilities/gradients.scss

@@ -1,11 +0,0 @@
-@use 'sass:map';
-@use '../context' as *;
-
-// background gradients
-@include spread-map-into-utilities(
-	$map: $gradient,
-	$class: bg-gradient,
-	$attribute: background,
-	$prop: gradient,
-	$zero-specificity: $zero-specificity-for-utilities
-);