@volverjs/style 0.1.2-beta.9 → 0.1.2

package/src/tools/_mixins.scss

@@ -3,6 +3,8 @@
 @use 'sass:string';
 @use 'sass:meta';
 @use 'sass:selector';
+@use 'functions' as *;
+@use 'breakpoints' as *;
 
 // Check ascending order
 // Used to ensure the breakpoints are ordered ascending.
@@ -77,7 +79,7 @@
 		xxs: 0,
 	),
 	$prefix: '',
-	$zero-specificity: $zero-specificity-for-utilities
+	$zero-specificity: false
 ) {
 	@if (type-of($map) == 'map' or type-of($map) == 'list') and $attribute != ''
 	{
@@ -91,12 +93,14 @@
 				}
 				@if type-of($value) == 'map' and $deep {
 					@include spread-map-into-utilities(
-						$value,
-						$class,
-						$attribute,
-						$prop,
-						$key,
-						$prefix
+						$map: $value,
+						$class: $class,
+						$attribute: $attribute,
+						$prop: $prop,
+						$name: $key,
+						$bps: $bps,
+						$prefix: $prefix,
+						$zero-specificity: $zero-specificity
 					);
 				} @else {
 					$default: null;
@@ -133,8 +137,12 @@
 						$default: $key;
 					}
 
+					@if type-of($default) == 'string' {
+						$default: string.unquote($default);
+					}
+
 					%#{$prefix}#{$class-name} {
-						@include media-breakpoint-up($breakpoint) {
+						@include media-breakpoint-up($breakpoint, $bps) {
 							@if type-of($attribute) != 'list' {
 								$attribute: ($attribute);
 							}
@@ -170,7 +178,10 @@
 	$key: 'modifier',
 	$block: null,
 	$props: true,
-	$zero-specificity: true
+	$zero-specificity: true,
+	$bps: (
+		xxs: 0,
+	)
 ) {
 	@if not $block {
 		$block: &;
@@ -255,7 +266,10 @@
 	$block: null,
 	$modifier: null,
 	$props: true,
-	$zero-specificity: true
+	$zero-specificity: true,
+	$bps: (
+		xxs: 0,
+	)
 ) {
 	@if not $block {
 		$block: &;
@@ -360,7 +374,10 @@
 	$modifier: '',
 	$alias: null,
 	$props: true,
-	$zero-specificity: true
+	$zero-specificity: true,
+	$bps: (
+		xxs: 0,
+	)
 ) {
 	@if not $original {
 		$original: $map;
@@ -397,7 +414,7 @@
 					close,
 					determinate,
 					indeterminate,
-					selected,
+					pressed,
 					current
 				),
 				$state
@@ -519,16 +536,16 @@
 								'#{$modifier}#{$alias}:#{$state}'
 							);
 						}
-					} @else if $state == 'selected' {
+					} @else if $state == 'pressed' {
 						$selectors: list.join(
 							$selectors,
-							'#{$modifier}#{$block-item}[aria-selected="true"]'
+							'#{$modifier}#{$block-item}[aria-pressed="true"]'
 						);
 
 						@if $alias {
 							$selectors: list.join(
 								$selectors,
-								'#{$modifier}#{$alias}[aria-selected="true"]'
+								'#{$modifier}#{$alias}[aria-pressed="true"]'
 							);
 						}
 					} @else if $state != 'current' {
@@ -561,6 +578,7 @@
 						$props: $props
 					);
 				}
+
 				@include wrap-with-where(
 					$selector: $selector,
 					$enabled: $zero-specificity
@@ -593,7 +611,9 @@
 	$key: 'breakpoint',
 	$block: null,
 	$props: true,
-	$bps: $breakpoints,
+	$bps: (
+		xxs: 0,
+	),
 	$zero-specificity: true
 ) {
 	@if not $block {
@@ -633,7 +653,9 @@
 			outer-spin-button,
 			progress-bar,
 			progress-value,
-			progress-inner-element
+			progress-inner-element,
+			datetime-edit-fields-wrapper,
+			datetime-edit-day-field
 		),
 		$pseudo-element
 	)
@@ -660,7 +682,10 @@
 	$postfix: '',
 	$deep: false,
 	$ignore: (),
-	$props: true
+	$props: true,
+	$bps: (
+		xxs: 0,
+	)
 ) {
 	@if type-of($map) == 'map' and $prefix != '' {
 		@each $key, $value in $map {
@@ -693,13 +718,16 @@
 										progress-value,
 										inner-element,
 										marker,
+										datetime-edit-fields-wrapper,
+										datetime-edit-day-field,
 										-webkit-progress-bar,
 										-webkit-progress-value,
 										-webkit-inner-element,
 										-moz-progress-bar,
 										-moz-progress-value,
 										-moz-inner-element,
-										-webkit-details-marker
+										-webkit-details-marker,
+										-webkit-scrollbar
 									),
 									$pseudo-element
 								)
@@ -804,17 +832,17 @@
 
 // Wrap selector with :where()
 @mixin wrap-with-where($selector, $enabled: true) {
-	@if type-of($selector) == 'map' {
+	@if type-of($selector) == 'map' or type-of($selector) == 'list' {
 		$merged: '';
 		@each $element in $selector {
 			@if $enabled {
-				$merged: '#{$merged}, :where(#{$element})';
+				$merged: '#{$merged}, :where(#{unquote($element)})';
 			} @else {
-				$merged: '#{$merged}, #{$element}';
+				$merged: '#{$merged}, #{unquote($element)}';
 			}
 		}
 	} @else if $enabled {
-		$selector: ':where(#{$selector})';
+		$selector: ':where(#{unquote($selector)})';
 	}
 
 	#{$selector} {
@@ -830,25 +858,31 @@
 	$modifiers-key: 'modifier',
 	$states-key: 'state',
 	$breakpoints-key: 'breakpoint',
+	$transitions-key: 'transition',
 	$props: true,
 	$zero-specificity: true,
+	$custom-props: false,
 	$custom-block: false,
 	$custom-elements: false,
 	$custom-modifiers: false,
 	$custom-states: false,
-	$custom-breakpoints: false
+	$custom-breakpoints: false,
+	$custom-transitions: false,
+	$bps: (xxs: 0)
 ) {
 	@if type-of($map) == 'map' and $block != '' {
 		$selector: '.' + $block;
 
 		// custom props
-		@if $props {
-			:where(:host, :root, .theme) {
-				@include spread-map-into-props(
-					$map: $map,
-					$prefix: $block,
-					$deep: true
-				);
+		@if not $custom-props {
+			@if $props {
+				:where(:host, :root, .theme) {
+					@include spread-map-into-props(
+						$map: $map,
+						$prefix: $block,
+						$deep: true
+					);
+				}
 			}
 		}
 
@@ -884,7 +918,8 @@
 					$key: $elements-key,
 					$block: $selector,
 					$props: $props,
-					$zero-specificity: $zero-specificity
+					$zero-specificity: $zero-specificity,
+					$bps: $bps
 				);
 			}
 		}
@@ -898,7 +933,8 @@
 					$key: $states-key,
 					$block: $selector,
 					$props: $props,
-					$zero-specificity: $zero-specificity
+					$zero-specificity: $zero-specificity,
+					$bps: $bps
 				);
 			}
 		}
@@ -912,7 +948,23 @@
 					$key: $modifiers-key,
 					$block: $selector,
 					$props: $props,
-					$zero-specificity: $zero-specificity
+					$zero-specificity: $zero-specificity,
+					$bps: $bps
+				);
+			}
+		}
+
+		// transition
+		@if not $custom-transitions {
+			@if map.has-key($map, $transitions-key) {
+				@include spread-map-into-transitions(
+					$map: $map,
+					$prefix: $block,
+					$key: $transitions-key,
+					$block: $selector,
+					$props: $props,
+					$zero-specificity: $zero-specificity,
+					$bps: $bps
 				);
 			}
 		}
@@ -926,9 +978,88 @@
 					$key: $breakpoints-key,
 					$block: $selector,
 					$props: $props,
-					$zero-specificity: $zero-specificity
+					$zero-specificity: $zero-specificity,
+					$bps: $bps
 				);
 			}
 		}
 	}
 }
+
+// Transform a map into a list of transitions
+@mixin spread-map-into-transitions(
+	$map: (),
+	$prefix: '',
+	$key: 'transition',
+	$block: null,
+	$props: true,
+	$zero-specificity: true,
+	$bps: (
+		xxs: 0,
+	)
+) {
+	@if not $block {
+		$block: &;
+	}
+	@if 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'
+				{
+					$selector: '.#{$transition}';
+
+					@if $prefix != '' {
+						$selector: '.#{$prefix}--#{$transition}';
+					}
+
+					@if $state == 'active' {
+						$selector: (
+							'#{$selector}-enter-active',
+							'#{$selector}-leave-active'
+						);
+					} @else if $state == 'inert' {
+						$selector: (
+							'#{$selector}-enter-from',
+							'#{$selector}-leave-to'
+						);
+					} @else {
+						$selector: '#{$selector}-#{$state}';
+					}
+
+					// map props and attributes
+					@include wrap-with-where(
+						$selector,
+						$enabled: $zero-specificity
+					) {
+						@include spread-map-into-attrs(
+							$map: $value,
+							$prefix: $prefix,
+							$variant: #{$key}-#{$transition}-#{$state},
+							$deep: true,
+							$ignore: (
+								'element',
+							),
+							$props: $props
+						);
+					}
+
+					// map elements
+					@if map.get($value, 'element') {
+						@include spread-map-into-elements(
+							$original: $map,
+							$map: $value,
+							$prefix: #{$prefix}-#{$key}-#{$transition}-#{$state},
+							$key: 'element',
+							$block: $block,
+							$modifier: $selector,
+							$props: $props,
+							$zero-specificity: $zero-specificity
+						);
+					}
+				}
+			}
+		}
+	}
+}

package/src/utilities/backgrounds.scss

@@ -1,50 +1,57 @@
-@import '../context';
+@use '../context' as *;
 
 // background-attachment
 @include spread-map-into-utilities(
 	$map: $background-attachment,
 	$class: 'bg',
-	$attribute: 'background-attachment'
+	$attribute: 'background-attachment',
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // background-clip
 @include spread-map-into-utilities(
 	$map: $background-clip,
 	$class: 'bg-clip',
-	$attribute: 'background-clip'
+	$attribute: 'background-clip',
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // background-origin
 @include spread-map-into-utilities(
 	$map: $background-origin,
 	$class: 'bg-origin',
-	$attribute: 'background-origin'
+	$attribute: 'background-origin',
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // background-position
 @include spread-map-into-utilities(
 	$map: $background-position,
 	$class: 'bg',
-	$attribute: 'background-position'
+	$attribute: 'background-position',
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // background-repeat
 @include spread-map-into-utilities(
 	$map: $background-repeat,
 	$class: bg,
-	$attribute: background-repeat
+	$attribute: background-repeat,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // background-size
 @include spread-map-into-utilities(
 	$map: $background-size,
 	$class: bg,
-	$attribute: background-size
+	$attribute: background-size,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // background-image
 @include spread-map-into-utilities(
 	$map: $background-image,
 	$class: bg,
-	$attribute: background-image
+	$attribute: background-image,
+	$zero-specificity: $zero-specificity-for-utilities
 );

package/src/utilities/borders.scss

@@ -1,12 +1,13 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 // border-radius
 @include spread-map-into-utilities(
 	$map: $border-radius,
 	$class: rounded,
 	$attribute: border-radius,
-	$prop: rounded
+	$prop: rounded,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 @each $x-key, $x-value in (t: top, b: bottom) {
@@ -17,7 +18,8 @@
 			border- + $x-value + -left-radius,
 			border- + $x-value + -right-radius,
 		),
-		$prop: rounded
+		$prop: rounded,
+		$zero-specificity: $zero-specificity-for-utilities
 	);
 
 	@each $y-key, $y-value in (r: right, l: left) {
@@ -27,7 +29,8 @@
 			$attribute: (
 				border- + $x-value + '-' + $y-value + -radius,
 			),
-			$prop: rounded
+			$prop: rounded,
+			$zero-specificity: $zero-specificity-for-utilities
 		);
 	}
 }
@@ -37,7 +40,9 @@
 	$map: $border-width,
 	$class: border,
 	$attribute: border-width,
-	$prop: border
+	$prop: border,
+	$bps: $breakpoints,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 @include spread-map-into-utilities(
@@ -47,7 +52,9 @@
 		border-right-width,
 		border-left-width,
 	),
-	$prop: border
+	$bps: $breakpoints,
+	$prop: border,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 @include spread-map-into-utilities(
@@ -57,7 +64,9 @@
 		border-top-width,
 		border-bottom-width,
 	),
-	$prop: border
+	$bps: $breakpoints,
+	$prop: border,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 @each $key, $value in (t: top, r: right, b: bottom, l: left) {
@@ -67,7 +76,9 @@
 		$attribute: (
 			border- + $value + -width,
 		),
-		$prop: border
+		$bps: $breakpoints,
+		$prop: border,
+		$zero-specificity: $zero-specificity-for-utilities
 	);
 }
 
@@ -75,5 +86,7 @@
 @include spread-map-into-utilities(
 	$map: $border-style,
 	$class: border,
-	$attribute: border-style
+	$attribute: border-style,
+	$bps: $breakpoints,
+	$zero-specificity: $zero-specificity-for-utilities
 );

package/src/utilities/colors.scss

@@ -1,11 +1,12 @@
-@import '../context';
+@use '../context' as *;
 
 // background-color
 @include spread-map-into-utilities(
 	$map: $colors,
 	$class: bg,
 	$attribute: background-color,
-	$prop: color
+	$prop: color,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // color
@@ -13,7 +14,8 @@
 	$map: $colors,
 	$class: text,
 	$attribute: color,
-	$prop: color
+	$prop: color,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // text-decoration-color
@@ -21,7 +23,8 @@
 	$map: $colors,
 	$class: decoration,
 	$attribute: text-decoration-color,
-	$prop: color
+	$prop: color,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // border-color
@@ -29,5 +32,6 @@
 	$map: $colors,
 	$class: border,
 	$attribute: border-color,
-	$prop: color
+	$prop: color,
+	$zero-specificity: $zero-specificity-for-utilities
 );

package/src/utilities/effects.scss

@@ -1,15 +1,33 @@
-@import '../context';
+@use '../context' as *;
 
 // box shadow
 @include spread-map-into-utilities(
 	$map: $box-shadow,
 	$class: shadow,
-	$attribute: box-shadow
+	$attribute: box-shadow,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
-// blend mode
+// opacity
 @include spread-map-into-utilities(
-	$map: $blend-mode,
+	$map: $opacity,
+	$class: opacity,
+	$attribute: opacity,
+	$zero-specificity: $zero-specificity-for-utilities
+);
+
+// mix blend mode
+@include spread-map-into-utilities(
+	$map: $mix-blend-mode,
 	$class: mix-blend,
-	$attribute: mix-blend-mode
+	$attribute: mix-blend-mode,
+	$zero-specificity: $zero-specificity-for-utilities
+);
+
+// background blend mode
+@include spread-map-into-utilities(
+	$map: $background-blend-mode,
+	$class: bg-blend,
+	$attribute: background-blend-mode,
+	$zero-specificity: $zero-specificity-for-utilities
 );

package/src/utilities/filters.scss

@@ -1,22 +1,33 @@
-@import '../context';
+@use '../context' as *;
 
 // blur
 @include spread-map-into-utilities(
 	$map: $blur,
 	$class: blur,
-	$attribute: filter
+	$attribute: filter,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // brightness
 @include spread-map-into-utilities(
 	$map: $brightness,
 	$class: brightness,
-	$attribute: filter
+	$attribute: filter,
+	$zero-specificity: $zero-specificity-for-utilities
+);
+
+// saturation
+@include spread-map-into-utilities(
+	$map: $saturation,
+	$class: saturate,
+	$attribute: filter,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // backdrop blur
 @include spread-map-into-utilities(
 	$map: $blur,
 	$class: backdrop-blur,
-	$attribute: backdrop-filter
+	$attribute: backdrop-filter,
+	$zero-specificity: $zero-specificity-for-utilities
 );

package/src/utilities/flexbox.scss

@@ -1,12 +1,13 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 // flex direction
 @include spread-map-into-utilities(
 	$map: $flex-direction,
 	$class: flex,
 	$attribute: flex-direction,
-	$bps: $breakpoints
+	$bps: $breakpoints,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // flex wrap
@@ -14,7 +15,8 @@
 	$map: $flex-wrap,
 	$class: flex,
 	$attribute: flex-wrap,
-	$bps: $breakpoints
+	$bps: $breakpoints,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // flex
@@ -22,7 +24,8 @@
 	$map: $flex,
 	$class: flex,
 	$attribute: flex,
-	$bps: $breakpoints
+	$bps: $breakpoints,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // flex grow
@@ -45,7 +48,8 @@
 	$map: $order,
 	$class: order,
 	$attribute: order,
-	$bps: $breakpoints
+	$bps: $breakpoints,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // gap
@@ -99,7 +103,8 @@
 		$map: $justify-align-content,
 		$class: $class,
 		$attribute: $attribute,
-		$bps: $breakpoints
+		$bps: $breakpoints,
+		$zero-specificity: $zero-specificity-for-utilities
 	);
 }
 
@@ -109,7 +114,8 @@
 		$map: $justify-align-items,
 		$class: $class,
 		$attribute: $attribute,
-		$bps: $breakpoints
+		$bps: $breakpoints,
+		$zero-specificity: $zero-specificity-for-utilities
 	);
 }
 
@@ -119,6 +125,7 @@
 		$map: $justify-align-self,
 		$class: $class,
 		$attribute: $attribute,
-		$bps: $breakpoints
+		$bps: $breakpoints,
+		$zero-specificity: $zero-specificity-for-utilities
 	);
 }