@volverjs/style 0.1.2-beta.22 → 0.1.2-beta.24

package/src/tools/_breakpoints.scss

@@ -28,7 +28,7 @@
 // Minimum breakpoint width. Null for the smallest (first) breakpoint.
 //    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    576px
-@function breakpoint-min($name, $bps: $breakpoints) {
+@function breakpoint-min($name, $bps) {
 	$min: map.get($bps, $name);
 	@return if($min != 0, $min, null);
 }
@@ -41,7 +41,7 @@
 // See https://bugs.webkit.org/show_bug.cgi?id=178261
 //    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    767.98px
-@function breakpoint-max($name, $bps: $breakpoints) {
+@function breakpoint-max($name, $bps) {
 	$next: breakpoint-next($name, $bps);
 	@return if($next, breakpoint-min($next, $bps) - 0.02, null);
 }
@@ -52,13 +52,13 @@
 //    ""  (Returns a blank string)
 //    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    "-sm"
-@function breakpoint-infix($name, $bps: $breakpoints) {
+@function breakpoint-infix($name, $bps) {
 	@return if(breakpoint-min($name, $bps) == null, '', '-#{$name}');
 }
 
 // Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
 // Makes the @content apply to the given breakpoint and wider.
-@mixin media-breakpoint-up($name, $bps: $breakpoints) {
+@mixin media-breakpoint-up($name, $bps) {
 	$min: breakpoint-min($name, $bps);
 	@if $min {
 		@media (min-width: $min) {
@@ -71,7 +71,7 @@
 
 // Media of at most the maximum breakpoint width. No query for the largest breakpoint.
 // Makes the @content apply to the given breakpoint and narrower.
-@mixin media-breakpoint-down($name, $bps: $breakpoints) {
+@mixin media-breakpoint-down($name, $bps) {
 	$max: breakpoint-max($name, $bps);
 	@if $max {
 		@media (max-width: $max) {
@@ -84,7 +84,7 @@
 
 // Media that spans multiple breakpoint widths.
 // Makes the @content apply between the min and max breakpoints
-@mixin media-breakpoint-between($lower, $upper, $bps: $breakpoints) {
+@mixin media-breakpoint-between($lower, $upper, $bps) {
 	$min: breakpoint-min($lower, $bps);
 	$max: breakpoint-max($upper, $bps);
 
@@ -106,7 +106,7 @@
 // Media between the breakpoint's minimum and maximum widths.
 // No minimum for the smallest breakpoint, and no maximum for the largest one.
 // Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
-@mixin media-breakpoint-only($name, $bps: $breakpoints) {
+@mixin media-breakpoint-only($name, $bps) {
 	$min: breakpoint-min($name, $bps);
 	$max: breakpoint-max($name, $bps);
 

package/src/tools/_index.scss

@@ -1,3 +1,3 @@
-@import 'functions';
-@import 'mixins';
-@import 'breakpoints';
+@forward 'functions';
+@forward 'mixins';
+@forward 'breakpoints';

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;
@@ -593,7 +610,9 @@
 	$key: 'breakpoint',
 	$block: null,
 	$props: true,
-	$bps: $breakpoints,
+	$bps: (
+		xxs: 0,
+	),
 	$zero-specificity: true
 ) {
 	@if not $block {
@@ -633,7 +652,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 +681,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,6 +717,8 @@
 										progress-value,
 										inner-element,
 										marker,
+										datetime-edit-fields-wrapper,
+										datetime-edit-day-field,
 										-webkit-progress-bar,
 										-webkit-progress-value,
 										-webkit-inner-element,
@@ -838,7 +864,8 @@
 	$custom-elements: false,
 	$custom-modifiers: false,
 	$custom-states: false,
-	$custom-breakpoints: false
+	$custom-breakpoints: false,
+	$bps: (xxs: 0)
 ) {
 	@if type-of($map) == 'map' and $block != '' {
 		$selector: '.' + $block;
@@ -888,7 +915,8 @@
 					$key: $elements-key,
 					$block: $selector,
 					$props: $props,
-					$zero-specificity: $zero-specificity
+					$zero-specificity: $zero-specificity,
+					$bps: $bps
 				);
 			}
 		}
@@ -902,7 +930,8 @@
 					$key: $states-key,
 					$block: $selector,
 					$props: $props,
-					$zero-specificity: $zero-specificity
+					$zero-specificity: $zero-specificity,
+					$bps: $bps
 				);
 			}
 		}
@@ -916,7 +945,8 @@
 					$key: $modifiers-key,
 					$block: $selector,
 					$props: $props,
-					$zero-specificity: $zero-specificity
+					$zero-specificity: $zero-specificity,
+					$bps: $bps
 				);
 			}
 		}
@@ -930,7 +960,8 @@
 					$key: $breakpoints-key,
 					$block: $selector,
 					$props: $props,
-					$zero-specificity: $zero-specificity
+					$zero-specificity: $zero-specificity,
+					$bps: $bps
 				);
 			}
 		}

package/src/utilities/animation.scss

@@ -1,8 +1,9 @@
-@import '../context';
+@use '../context' as *;
 
 // animate
 @include spread-map-into-utilities(
 	$map: $animate,
 	$class: 'animate',
-	$attribute: 'animation'
+	$attribute: 'animation',
+	$zero-specificity: $zero-specificity-for-utilities
 );

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,8 @@
 	$map: $border-width,
 	$class: border,
 	$attribute: border-width,
-	$prop: border
+	$prop: border,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 @include spread-map-into-utilities(
@@ -47,7 +51,8 @@
 		border-right-width,
 		border-left-width,
 	),
-	$prop: border
+	$prop: border,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 @include spread-map-into-utilities(
@@ -57,7 +62,8 @@
 		border-top-width,
 		border-bottom-width,
 	),
-	$prop: border
+	$prop: border,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 @each $key, $value in (t: top, r: right, b: bottom, l: left) {
@@ -67,7 +73,8 @@
 		$attribute: (
 			border- + $value + -width,
 		),
-		$prop: border
+		$prop: border,
+		$zero-specificity: $zero-specificity-for-utilities
 	);
 }
 
@@ -75,5 +82,6 @@
 @include spread-map-into-utilities(
 	$map: $border-style,
 	$class: border,
-	$attribute: border-style
+	$attribute: border-style,
+	$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,25 @@
-@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
 );
 
 // 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
 	);
 }

package/src/utilities/grid.scss

@@ -1,12 +1,13 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 // grid template columns
 @include spread-map-into-utilities(
 	$map: $grid-template-columns,
 	$class: grid-cols,
 	$attribute: grid-template-columns,
-	$bps: $breakpoints
+	$bps: $breakpoints,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // grid column
@@ -14,7 +15,8 @@
 	$map: $grid-column,
 	$class: col,
 	$attribute: grid-column,
-	$bps: $breakpoints
+	$bps: $breakpoints,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // grid column start/end
@@ -25,7 +27,8 @@
 		$map: $grid-column-start-end,
 		$class: $class,
 		$attribute: $attribute,
-		$bps: $breakpoints
+		$bps: $breakpoints,
+		$zero-specificity: $zero-specificity-for-utilities
 	);
 }
 
@@ -34,7 +37,8 @@
 	$map: $grid-template-rows,
 	$class: grid-rows,
 	$attribute: grid-template-rows,
-	$bps: $breakpoints
+	$bps: $breakpoints,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // grid row
@@ -42,7 +46,8 @@
 	$map: $grid-row,
 	$class: row,
 	$attribute: grid-row,
-	$bps: $breakpoints
+	$bps: $breakpoints,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // grid row start/end
@@ -51,7 +56,8 @@
 		$map: $grid-row-start-end,
 		$class: $class,
 		$attribute: $attribute,
-		$bps: $breakpoints
+		$bps: $breakpoints,
+		$zero-specificity: $zero-specificity-for-utilities
 	);
 }
 
@@ -60,7 +66,8 @@
 	$map: $grid-auto-flow,
 	$class: grid-flow,
 	$attribute: grid-auto-flow,
-	$bps: $breakpoints
+	$bps: $breakpoints,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // grid auto rows/columns
@@ -71,6 +78,7 @@
 		$map: $grid-auto-rows-columns,
 		$class: $class,
 		$attribute: $attribute,
-		$bps: $breakpoints
+		$bps: $breakpoints,
+		$zero-specificity: $zero-specificity-for-utilities
 	);
 }

package/src/utilities/index.scss

@@ -1,12 +1,13 @@
-@import 'animation';
-@import 'backgrounds';
-@import 'borders';
-@import 'colors';
-@import 'effects';
-@import 'filters';
-@import 'flexbox';
-@import 'grid';
-@import 'layout';
-@import 'sizing';
-@import 'spacing';
-@import 'typography';
+@forward 'animation';
+@forward 'backgrounds';
+@forward 'borders';
+@forward 'colors';
+@forward 'effects';
+@forward 'filters';
+@forward 'flexbox';
+@forward 'grid';
+@forward 'layout';
+@forward 'sizing';
+@forward 'spacing';
+@forward 'typography';
+@forward 'transitions';