@volverjs/style 0.1.11 → 0.1.12-beta.10

package/src/tools/_functions.scss

@@ -15,9 +15,7 @@
 			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))
+			#{$name}: hsla(var(--color-#{$name}-hue), var(--color-#{$name}-saturation), var(--color-#{$name}-lightness), color.alpha($color))
 		);
 	}
 }
@@ -34,8 +32,10 @@
 		);
 	} @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
 		);
 	}
 }
@@ -48,7 +48,7 @@
 	$color,
 	$name,
 	$steps: 9,
-	$scale: 10%,
+	$scale: 0.1,
 	$noVarExport: false
 ) {
 	$result: hsla-map($color, $name, $noVarExport);
@@ -73,8 +73,7 @@
 	$noVarExport: false
 ) {
 	$result: map.merge(
-		map.merge(
-			(#{$name}: $color),
+		map.set(
 			color-lighten-map(
 				$color,
 				$name,
@@ -83,7 +82,9 @@
 				'lighten',
 				$fixed,
 				$noVarExport
-			)
+			),
+			$name,
+			$color
 		),
 		color-darken-map(
 			$color,
@@ -105,10 +106,16 @@
 	$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;
@@ -192,11 +199,17 @@
 	$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;

package/src/tools/_mixins.scss

@@ -428,6 +428,7 @@
 					disabled,
 					checked,
 					checked-within,
+					multiple,
 					selected,
 					readonly,
 					empty,
@@ -514,7 +515,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}]'
@@ -640,6 +648,21 @@
 						$bps: $bps
 					);
 				}
+
+				// breakpoints
+				@if map.get($value, 'breakpoint') {
+					@include spread-map-into-breakpoints(
+						$original: $original,
+						$map: $value,
+						$prefix: #{$prefix}-#{$key}-#{$state},
+						$key: 'breakpoint',
+						$block: $block,
+						$modifier: $selector,
+						$props: $props,
+						$zero-specificity: $zero-specificity,
+						$bps: $bps
+					);
+				}
 			}
 		}
 	}
@@ -829,6 +852,8 @@
 										datetime-edit,
 										datetime-edit-fields-wrapper,
 										datetime-edit-day-field,
+										backdrop,
+										file-selector-button,
 										-webkit-progress-bar,
 										-webkit-progress-value,
 										-webkit-inner-element,
@@ -836,7 +861,9 @@
 										-moz-progress-value,
 										-moz-inner-element,
 										-webkit-details-marker,
-										-webkit-scrollbar
+										-webkit-scrollbar,
+										-webkit-scrollbar-track,
+										-webkit-scrollbar-thumb
 									),
 									$pseudo-element
 								)
@@ -1163,6 +1190,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
+						);
+					}
 				}
 			}
 		}

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/transforms.scss

@@ -3,7 +3,7 @@
 // scale
 @each $size, $value in $scale {
 	%scale-#{$size} {
-		transform: scale(#{$value});
+		scale: #{$value};
 	}
 	@include wrap-with-where(
 		$selector: '.scale-#{$size}',
@@ -13,7 +13,7 @@
 	}
 
 	%scale-x-#{$size} {
-		transform: scaleX(#{$value});
+		scale: #{$value} 1;
 	}
 	@include wrap-with-where(
 		$selector: '.scale-x-#{$size}',
@@ -23,7 +23,7 @@
 	}
 
 	%scale-y-#{$size} {
-		transform: scaleY(#{$value});
+		scale: 1 #{$value};
 	}
 	@include wrap-with-where(
 		$selector: '.scale-y-#{$size}',
@@ -52,7 +52,7 @@
 // translate
 @each $size, $value in $translate {
 	%translate-#{$size} {
-		transform: translate(#{$value}, #{$value});
+		translate: #{$value} #{$value};
 	}
 	@include wrap-with-where(
 		$selector: '.translate-#{$size}',
@@ -62,7 +62,7 @@
 	}
 
 	%translate-x-#{$size} {
-		transform: translateX(#{$value});
+		translate: #{$value};
 	}
 	@include wrap-with-where(
 		$selector: '.translate-x-#{$size}',
@@ -72,7 +72,7 @@
 	}
 
 	%translate-y-#{$size} {
-		transform: translateY(#{$value});
+		translate: 0 #{$value};
 	}
 	@include wrap-with-where(
 		$selector: '.translate-y-#{$size}',
@@ -82,7 +82,7 @@
 	}
 
 	%-translate-#{$size} {
-		transform: translate(-#{$value}, -#{$value});
+		translate: -#{$value} -#{$value};
 	}
 	@include wrap-with-where(
 		$selector: '.-translate-#{$size}',
@@ -92,7 +92,7 @@
 	}
 
 	%-translate-x-#{$size} {
-		transform: translateX(-#{$value});
+		translate: -#{$value};
 	}
 	@include wrap-with-where(
 		$selector: '.-translate-x-#{$size}',
@@ -102,7 +102,7 @@
 	}
 
 	%-translate-y-#{$size} {
-		transform: translateY(-#{$value});
+		translate: 0 -#{$value};
 	}
 	@include wrap-with-where(
 		$selector: '.-translate-y-#{$size}',

package/src/utilities/typography.scss

@@ -195,6 +195,16 @@
 	@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;