@volverjs/style 0.1.12-beta.9 → 0.1.13

package/src/tools/_functions.scss

@@ -5,17 +5,55 @@
 @use 'sass:list';
 @use 'sass:math';
 
+@function color-hue($color) {
+	@return color.channel($color, 'hue', $space: hsl);
+}
+
+@function color-saturation($color) {
+	@return color.channel($color, 'saturation', $space: hsl);
+}
+
+@function color-lightness($color) {
+	@return color.channel($color, 'lightness', $space: hsl);
+}
+
+@function color-alpha($color) {
+	@return color.channel($color, 'alpha');
+}
+
+@function color-hsla($color) {
+	@return hsla(
+		color-hue($color),
+		color.channel($color, 'saturation', $space: hsl),
+		color.channel($color, 'lightness', $space: hsl),
+		color.channel($color, 'alpha')
+	);
+}
+
+@function color-red($color) {
+	@return color.channel($color, 'red', $space: rgb);
+}
+
+@function color-green($color) {
+	@return color.channel($color, 'green', $space: rgb);
+}
+
+@function color-blue($color) {
+	@return color.channel($color, 'blue', $space: rgb);
+}
+
 @function hsla-map($color, $name, $noVarExport: false) {
 	@if $noVarExport {
 		@return (
-			#{$name}: hsla(color.hue($color), color.saturation($color), color.lightness($color), color.alpha($color))
+			#{$name}: hsla(color-hue($color), color.channel($color, 'saturation', $space:
+							hsl), color.channel($color, 'lightness', $space: hsl), color.channel($color, 'alpha'))
 		);
 	} @else {
 		@return (
-			hue: color.hue($color),
-			saturation: color.saturation($color),
-			lightness: color.lightness($color),
-			#{$name}: hsla(var(--color-#{$name}-hue), var(--color-#{$name}-saturation), var(--color-#{$name}-lightness), color.alpha($color))
+			hue: color-hue($color),
+			saturation: color.channel($color, 'saturation', $space: hsl),
+			lightness: color.channel($color, 'lightness', $space: hsl),
+			#{$name}: hsla(var(--color-#{$name}-hue), var(--color-#{$name}-saturation), var(--color-#{$name}-lightness), color.channel($color, 'alpha'))
 		);
 	}
 }
@@ -24,9 +62,9 @@
 	@if $noVarExport {
 		@return (
 			hsla(
-				color.hue($color),
-				color.saturation($color),
-				color.lightness($color),
+				color-hue($color),
+				color.channel($color, 'saturation', $space: hsl),
+				color.channel($color, 'lightness', $space: hsl),
 				$alpha
 			)
 		);
@@ -41,7 +79,9 @@
 }
 
 @function hex-to-rgb($hex) {
-	@return red($hex), green($hex), blue($hex);
+	@return color.channel($hex, 'red', $space: rgb),
+		color.channel($hex, 'green', $space: rgb),
+		color.channel($hex, 'blue', $space: rgb);
 }
 
 @function color-alpha-map(
@@ -52,6 +92,7 @@
 	$noVarExport: false
 ) {
 	$result: hsla-map($color, $name, $noVarExport);
+
 	@for $index from 1 to ($steps + 1) {
 		$result: map.merge(
 			$result,
@@ -61,6 +102,7 @@
 			)
 		);
 	}
+
 	@return $result;
 }
 
@@ -96,6 +138,7 @@
 			$noVarExport
 		)
 	);
+
 	@return $result;
 }
 
@@ -110,29 +153,38 @@
 	$inverted: true
 ) {
 	$result: hsla-map($color, $name, $noVarExport);
+
 	@for $counter from 1 to ($steps + 1) {
 		$index: $counter;
+
 		@if $inverted {
 			$index: $steps + 1 - $counter;
 		}
 
 		$key: $index;
+
 		@if $prefix != '' {
 			$key: $prefix + '-' + $index;
 		}
 
 		@if $fixed {
 			$increment: $scale * $index;
+
 			@if $noVarExport {
-				$alpha: color.lightness($color) + $increment;
+				$alpha: color.channel($color, 'lightness', $space: hsl) +
+					$increment;
 				$result: map.merge(
 					$result,
 					(
 						#{$key}:
 							hsla(
-								color.hue($color),
-								color.saturation($color),
-								color.lightness($color),
+								color-hue($color),
+								color.channel(
+									$color,
+									'saturation',
+									$space: hsl
+								),
+								color.channel($color, 'lightness', $space: hsl),
 								$alpha
 							)
 					)
@@ -157,16 +209,22 @@
 			$increment: math.div($scale * $index, 100);
 			$increment: math.div($increment, ($increment * 0 + 1));
 			$increment: $increment + 1;
+
 			@if $noVarExport {
-				$alpha: color.lightness($color) * $increment;
+				$alpha: color.channel($color, 'lightness', $space: hsl) *
+					$increment;
 				$result: map.merge(
 					$result,
 					(
 						#{$key}:
 							hsla(
-								color.hue($color),
-								color.saturation($color),
-								color.lightness($color),
+								color-hue($color),
+								color.channel(
+									$color,
+									'saturation',
+									$space: hsl
+								),
+								color.channel($color, 'lightness', $space: hsl),
 								$alpha
 							)
 					)
@@ -189,6 +247,7 @@
 			}
 		}
 	}
+
 	@return $result;
 }
 
@@ -206,27 +265,35 @@
 
 	@for $counter from 1 to ($steps + 1) {
 		$index: $counter;
+
 		@if $inverted {
 			$index: $steps + 1 - $counter;
 		}
 
 		$key: $index;
+
 		@if $prefix != '' {
 			$key: $prefix + '-' + $index;
 		}
 
 		@if $fixed {
 			$decrement: $scale * $index;
+
 			@if $noVarExport {
-				$alpha: color.lightness($color) - $decrement;
+				$alpha: color.channel($color, 'lightness', $space: hsl) -
+					$decrement;
 				$result: map.merge(
 					$result,
 					(
 						#{$key}:
 							hsla(
-								color.hue($color),
-								color.saturation($color),
-								color.lightness($color),
+								color-hue($color),
+								color.channel(
+									$color,
+									'saturation',
+									$space: hsl
+								),
+								color.channel($color, 'lightness', $space: hsl),
 								$alpha
 							)
 					)
@@ -251,16 +318,22 @@
 			$decrement: math.div($scale * $index, 100);
 			$decrement: math.div($decrement, ($decrement * 0 + 1));
 			$decrement: 1 - $decrement;
+
 			@if $noVarExport {
-				$alpha: color.lightness($color) * $decrement;
+				$alpha: color.channel($color, 'lightness', $space: hsl) *
+					$decrement;
 				$result: map.merge(
 					$result,
 					(
 						#{$key}:
 							hsla(
-								color.hue($color),
-								color.saturation($color),
-								color.lightness($color),
+								color-hue($color),
+								color.channel(
+									$color,
+									'saturation',
+									$space: hsl
+								),
+								color.channel($color, 'lightness', $space: hsl),
 								$alpha
 							)
 					)
@@ -283,6 +356,7 @@
 			}
 		}
 	}
+
 	@return $result;
 }
 
@@ -320,7 +394,7 @@
 @function list-to-string($list, $glue: ', ') {
 	$result: null;
 
-	@for $i from 1 through length($list) {
+	@for $i from 1 through list.length($list) {
 		$e: list.nth($list, $i);
 
 		@if $result and $e {

package/src/tools/_mixins.scss

@@ -3,6 +3,7 @@
 @use 'sass:string';
 @use 'sass:meta';
 @use 'sass:selector';
+@use 'sass:math';
 @use 'functions' as *;
 @use 'breakpoints' as *;
 
@@ -11,10 +12,11 @@
 @mixin assert-ascending($map, $map-name) {
 	$prev-key: null;
 	$prev-num: null;
+
 	@each $key, $num in $map {
-		@if not $prev-num or unit($num) == '%' {
+		@if not $prev-num or math.unit($num) == '%' {
 			// Do nothing
-		} @else if not comparable($prev-num, $num) {
+		} @else if not compatible($prev-num, $num) {
 			@warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
 		} @else if $prev-num >= $num {
 			@warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
@@ -30,6 +32,7 @@
 @mixin assert-starts-at-zero($map, $map-name: '$grid-breakpoints') {
 	$values: map.values($map);
 	$first-value: list.nth($values, 1);
+
 	@if $first-value != 0 {
 		@warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
 	}
@@ -39,6 +42,7 @@
 @mixin spread-map-into-props($map: (), $prefix: '', $old-key: '', $deep: true) {
 	@each $key, $value in $map {
 		$name: meta.inspect($key);
+
 		@if $name == meta.inspect($old-key) {
 			$name: $prefix;
 		} @else if $prefix != '' and meta.inspect($prefix) != meta.inspect($key)
@@ -56,7 +60,7 @@
 			string.slice(meta.inspect($key), 1, 1) !=
 			'['
 		{
-			@if type-of($value) == 'map' {
+			@if meta.type-of($value) == 'map' {
 				@if $deep {
 					@include spread-map-into-props($value, $name, $key);
 				}
@@ -81,17 +85,21 @@
 	$prefix: '',
 	$zero-specificity: false
 ) {
-	@if (type-of($map) == 'map' or type-of($map) == 'list') and $attribute != ''
+	@if (meta.type-of($map) == 'map' or meta.type-of($map) == 'list') and
+		$attribute !=
+		''
 	{
 		@each $breakpoint, $breakpoint-value in $bps {
 			@if $breakpoint-value > 0 {
 				$prefix: $breakpoint + '\\:';
 			}
+
 			@each $key, $value in $map {
 				@if $name != '' and meta.inspect($key) != meta.inspect($name) {
 					$key: #{$name}-#{meta.inspect($key)};
 				}
-				@if type-of($value) == 'map' and $deep {
+
+				@if meta.type-of($value) == 'map' and $deep {
 					@include spread-map-into-utilities(
 						$map: $value,
 						$class: $class,
@@ -125,27 +133,28 @@
 					$var: str-replace($var, '\\/', '-');
 
 					// check if value is not a map (spacing-dynamic)
-					@if type-of($value) != 'map' {
+					@if meta.type-of($value) != 'map' {
 						$default: $value;
 					}
 
 					// check if map is a list
-					@if type-of($map) ==
+					@if meta.type-of($map) ==
 						'list' and
 						(not $default or $default == '')
 					{
 						$default: $key;
 					}
 
-					@if type-of($default) == 'string' {
+					@if meta.type-of($default) == 'string' {
 						$default: string.unquote($default);
 					}
 
 					%#{$prefix}#{$class-name} {
 						@include media-breakpoint-up($breakpoint, $bps) {
-							@if type-of($attribute) != 'list' {
+							@if meta.type-of($attribute) != 'list' {
 								$attribute: ($attribute);
 							}
+
 							@each $attr in $attribute {
 								@if $default {
 									@if $var != '' {
@@ -159,6 +168,7 @@
 							}
 						}
 					}
+
 					@include wrap-with-where(
 						$selector: '.' + $prefix + $class-name,
 						$enabled: $zero-specificity
@@ -188,10 +198,12 @@
 	@if not $original {
 		$original: $map;
 	}
+
 	@if not $block {
 		$block: &;
 	}
-	@if type-of(map.get($map, $key)) == 'map' {
+
+	@if meta.type-of(map.get($map, $key)) == 'map' {
 		@each $item, $value in map.get($map, $key) {
 			$selector: $block + '--' + $item;
 
@@ -300,13 +312,25 @@
 		$block: &;
 	}
 
-	@if type-of(map.get($map, $key)) == 'map' {
+	@if meta.type-of(map.get($map, $key)) == 'map' {
 		@each $element, $value in map.get($map, $key) {
 			$selector: $block + '__' + $element;
 
+			// combinator
+			$combinator: map.get($value, '_combinator');
+
+			@if not $combinator {
+				$combinator: map.get($original, $key, $element, '_combinator');
+			}
+
 			@if $modifier {
 				$selectors: ();
+
 				@each $item in selector.parse($modifier) {
+					@if $combinator {
+						$item: '#{$item} #{$combinator}';
+					}
+
 					$selectors: list.join(
 						$selectors,
 						selector.nest($item, $selector)
@@ -326,6 +350,7 @@
 			@if $alias {
 				@if $modifier {
 					$aliases: ();
+
 					@each $item in selector.parse($modifier) {
 						$aliases: list.join(
 							$aliases,
@@ -414,7 +439,7 @@
 		$blocks: &;
 	}
 
-	@if type-of(map.get($map, $key)) == 'map' {
+	@if meta.type-of(map.get($map, $key)) == 'map' {
 		@each $state, $value in map.get($map, $key) {
 			@if list.index(
 				(
@@ -685,10 +710,12 @@
 	@if not $original {
 		$original: $map;
 	}
+
 	@if not $block {
 		$block: &;
 	}
-	@if type-of(map.get($map, $key)) == 'map' {
+
+	@if meta.type-of(map.get($map, $key)) == 'map' {
 		@each $breakpoint, $value in map.get($map, $key) {
 			@if string.index($breakpoint, '-') {
 				$operator: list.nth(string.split($breakpoint, '-'), 1);
@@ -712,6 +739,7 @@
 							}
 						}
 					}
+
 					@if $operator == 'down' {
 						@include wrap-with-where(
 							$selector: '#{$modifier}#{$block}',
@@ -729,6 +757,7 @@
 							}
 						}
 					}
+
 					@if map.has-key($bps, $operator) {
 						@include wrap-with-where(
 							$selector: '#{$modifier}#{$block}',
@@ -818,10 +847,13 @@
 		xxs: 0,
 	)
 ) {
-	@if type-of($map) == 'map' and $prefix != '' {
+	@if meta.type-of($map) == 'map' and $prefix != '' {
 		@each $key, $value in $map {
 			@if not list.index($ignore, $key) {
-				@if type-of($value) == 'map' and ($deep or $key == 'pseudo') {
+				@if meta.type-of($value) ==
+					'map' and
+					($deep or $key == 'pseudo')
+				{
 					$original: map.get($original, $key);
 
 					@if not $original {
@@ -831,9 +863,10 @@
 					@if $postfix != '' {
 						$key: #{$postfix}-#{$key};
 					}
+
 					@if $key == 'pseudo' {
 						@each $pseudo-element, $pseudo-map in $value {
-							@if type-of($pseudo-map) == 'map' {
+							@if meta.type-of($pseudo-map) == 'map' {
 								@if list.index(
 									(
 										before,
@@ -916,7 +949,7 @@
 						);
 					}
 				} @else if
-					type-of($value) !=
+					meta.type-of($value) !=
 					'map' and
 					(string.slice(meta.inspect($key), 1, 1) != '_')
 				{
@@ -968,9 +1001,10 @@
 
 // Wrap selector with :where()
 @mixin wrap-with-where($selector, $enabled: true) {
-	@if type-of($selector) == 'map' or type-of($selector) == 'list' {
+	@if meta.type-of($selector) == 'map' or meta.type-of($selector) == 'list' {
 		$selector: #{$selector};
 	}
+
 	@if $enabled {
 		$selector: ':where(#{unquote($selector)})';
 	}
@@ -1000,7 +1034,7 @@
 	$custom-transitions: false,
 	$bps: (xxs: 0)
 ) {
-	@if type-of($map) == 'map' and $block != '' {
+	@if meta.type-of($map) == 'map' and $block != '' {
 		$selector: '.' + $block;
 
 		// custom props
@@ -1028,6 +1062,7 @@
 				// content
 				@content;
 			}
+
 			@include wrap-with-where(
 				$selector: $selector,
 				$enabled: $zero-specificity
@@ -1131,12 +1166,13 @@
 	@if not $block {
 		$block: &;
 	}
-	@if type-of(map.get($map, $key)) == 'map' {
+
+	@if meta.type-of(map.get($map, $key)) == 'map' {
 		@each $transition, $states in map.get($map, $key) {
 			@each $state, $value in $states {
 				@if $state in [ 'enter-from', 'enter-active', 'enter-to',
 					'leave-from', 'leave-active', 'leave-to', 'active',
-					'inert'] and type-of($value) == 'map'
+					'inert'] and meta.type-of($value) == 'map'
 				{
 					$selector: '.#{$transition}';
 

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/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),