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

package/src/tools/_functions.scss

@@ -5,19 +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'))
 		);
 	}
 }
@@ -26,32 +62,37 @@
 	@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
 			)
 		);
 	} @else {
 		@return hsla(
-			var(--color-#{$name}-hue) var(--color-#{$name}-saturation)
-				var(--color-#{$name}-lightness) / #{$alpha}
+			var(--color-#{$name}-hue),
+			var(--color-#{$name}-saturation),
+			var(--color-#{$name}-lightness),
+			$alpha
 		);
 	}
 }
 
 @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(
 	$color,
 	$name,
 	$steps: 9,
-	$scale: 10%,
+	$scale: 0.1,
 	$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;
 }
 
@@ -73,8 +115,7 @@
 	$noVarExport: false
 ) {
 	$result: map.merge(
-		map.merge(
-			(#{$name}: $color),
+		map.set(
 			color-lighten-map(
 				$color,
 				$name,
@@ -83,7 +124,9 @@
 				'lighten',
 				$fixed,
 				$noVarExport
-			)
+			),
+			$name,
+			$color
 		),
 		color-darken-map(
 			$color,
@@ -95,6 +138,7 @@
 			$noVarExport
 		)
 	);
+
 	@return $result;
 }
 
@@ -105,27 +149,42 @@
 	$scale: 10%,
 	$prefix: '',
 	$fixed: false,
-	$noVarExport: false
+	$noVarExport: false,
+	$inverted: true
 ) {
 	$result: hsla-map($color, $name, $noVarExport);
-	@for $index from 1 to ($steps + 1) {
+
+	@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
 							)
 					)
@@ -150,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
 							)
 					)
@@ -182,6 +247,7 @@
 			}
 		}
 	}
+
 	@return $result;
 }
 
@@ -192,28 +258,42 @@
 	$scale: 10%,
 	$prefix: '',
 	$fixed: false,
-	$noVarExport: false
+	$noVarExport: false,
+	$inverted: false
 ) {
 	$result: hsla-map($color, $name, $noVarExport);
 
-	@for $index from 1 to ($steps + 1) {
+	@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
 							)
 					)
@@ -238,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
 							)
 					)
@@ -270,6 +356,7 @@
 			}
 		}
 	}
+
 	@return $result;
 }
 
@@ -307,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(
 				(
@@ -428,6 +453,7 @@
 					disabled,
 					checked,
 					checked-within,
+					multiple,
 					selected,
 					readonly,
 					empty,
@@ -514,7 +540,14 @@
 								'#{$modifier}#{$alias}:not(:has(*:placeholder-shown))'
 							);
 						}
-					} @else if $state == 'disabled' or $state == 'readonly' {
+					} @else if
+						$state ==
+						'disabled' or
+						$state ==
+						'readonly' or
+						$state ==
+						'multiple'
+					{
 						$selectors: list.join(
 							$selectors,
 							'#{$modifier}#{$block-item}[#{$state}]'
@@ -677,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);
@@ -704,6 +739,7 @@
 							}
 						}
 					}
+
 					@if $operator == 'down' {
 						@include wrap-with-where(
 							$selector: '#{$modifier}#{$block}',
@@ -721,6 +757,7 @@
 							}
 						}
 					}
+
 					@if map.has-key($bps, $operator) {
 						@include wrap-with-where(
 							$selector: '#{$modifier}#{$block}',
@@ -810,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 {
@@ -823,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,
@@ -844,6 +885,8 @@
 										datetime-edit,
 										datetime-edit-fields-wrapper,
 										datetime-edit-day-field,
+										backdrop,
+										file-selector-button,
 										-webkit-progress-bar,
 										-webkit-progress-value,
 										-webkit-inner-element,
@@ -851,7 +894,9 @@
 										-moz-progress-value,
 										-moz-inner-element,
 										-webkit-details-marker,
-										-webkit-scrollbar
+										-webkit-scrollbar,
+										-webkit-scrollbar-track,
+										-webkit-scrollbar-thumb
 									),
 									$pseudo-element
 								)
@@ -904,7 +949,7 @@
 						);
 					}
 				} @else if
-					type-of($value) !=
+					meta.type-of($value) !=
 					'map' and
 					(string.slice(meta.inspect($key), 1, 1) != '_')
 				{
@@ -933,9 +978,15 @@
 						$prop-to-replace-with: #{$prop-to-replace-with}-#{$key};
 
 						@if map.get($original, $key) {
-							#{$prop-to-replace}: var(#{$prop-to-replace-with});
+							& {
+								#{$prop-to-replace}: var(
+									#{$prop-to-replace-with}
+								);
+							}
 						} @else {
-							#{$key}: var(#{$prop-to-replace-with});
+							& {
+								#{$key}: var(#{$prop-to-replace-with});
+							}
 						}
 					} @else {
 						@if string.slice(meta.inspect($key), 1, 1) == '[' {
@@ -946,7 +997,9 @@
 							);
 						}
 
-						#{$key}: $value;
+						& {
+							#{$key}: $value;
+						}
 					}
 				}
 			}
@@ -956,9 +1009,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)})';
 	}
@@ -988,7 +1042,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
@@ -1016,6 +1070,7 @@
 				// content
 				@content;
 			}
+
 			@include wrap-with-where(
 				$selector: $selector,
 				$enabled: $zero-specificity
@@ -1119,12 +1174,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}';
 
@@ -1178,6 +1234,21 @@
 							$bps: $bps
 						);
 					}
+
+					// map breakpoints
+					@if map.get($value, 'breakpoint') {
+						@include spread-map-into-breakpoints(
+							$original: $map,
+							$map: $value,
+							$prefix: #{$prefix}-#{$key}-#{$transition}-#{$state},
+							$key: 'breakpoint',
+							$block: $block,
+							$modifier: $selector,
+							$props: $props,
+							$zero-specificity: $zero-specificity,
+							$bps: $bps
+						);
+					}
 				}
 			}
 		}