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

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';

package/src/utilities/layout.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 // aspect
 @include spread-map-into-utilities(
@@ -7,7 +7,8 @@
 	$class: aspect,
 	$attribute: aspect-ratio,
 	$prop: aspect,
-	$bps: $breakpoints
+	$bps: $breakpoints,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // container
@@ -16,7 +17,7 @@
 
 	@each $breakpoint, $value in $breakpoints {
 		@if $value > 0 {
-			@include media-breakpoint-up($breakpoint) {
+			@include media-breakpoint-up($breakpoint, $breakpoints) {
 				max-width: $value;
 			}
 		}
@@ -34,54 +35,62 @@
 	$map: $columns,
 	$class: columns,
 	$attribute: column-count,
-	$bps: $breakpoints
+	$bps: $breakpoints,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // break-after
 @include spread-map-into-utilities(
 	$map: $break-after,
 	$class: break-after,
-	$attribute: break-after
+	$attribute: break-after,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // break-before
 @include spread-map-into-utilities(
 	$map: $break-before,
 	$class: break-before,
-	$attribute: break-before
+	$attribute: break-before,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // break-inside
 @include spread-map-into-utilities(
 	$map: $break-inside,
 	$class: break-inside,
-	$attribute: break-inside
+	$attribute: break-inside,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // display
 @include spread-map-into-utilities(
 	$map: $display-without-breakpoints,
-	$attribute: display
+	$attribute: display,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 @include spread-map-into-utilities(
 	$map: $display-with-breakpoints,
 	$attribute: display,
-	$bps: $breakpoints
+	$bps: $breakpoints,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // object-fit
 @include spread-map-into-utilities(
 	$map: $object-fit,
 	$class: object,
-	$attribute: object-fit
+	$attribute: object-fit,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // object-position
 @include spread-map-into-utilities(
 	$map: $object-position,
 	$class: object,
-	$attribute: object-position
+	$attribute: object-position,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // overflow
@@ -115,14 +124,16 @@
 @include spread-map-into-utilities(
 	$map: $position,
 	$attribute: position,
-	$bps: $breakpoints
+	$bps: $breakpoints,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // visibility
 @include spread-map-into-utilities(
 	$map: $visibility,
 	$attribute: visibility,
-	$bps: $breakpoints
+	$bps: $breakpoints,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // top / right / bottom / left
@@ -185,5 +196,6 @@
 	$map: $z-index,
 	$class: z,
 	$attribute: z-index,
-	$prop: z
+	$prop: z,
+	$zero-specificity: $zero-specificity-for-utilities
 );

package/src/utilities/sizing.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 // width / height / max-width / max-height
 @each $class,
@@ -10,7 +10,8 @@
 		$class: $class,
 		$attribute: $attribute,
 		$bps: $breakpoints,
-		$prop: spacing
+		$prop: spacing,
+		$zero-specificity: $zero-specificity-for-utilities
 	);
 }
 
@@ -19,7 +20,8 @@
 	$class: w,
 	$attribute: width,
 	$bps: $breakpoints,
-	$prop: w
+	$prop: w,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 @include spread-map-into-utilities(
@@ -27,19 +29,22 @@
 	$class: h,
 	$attribute: height,
 	$bps: $breakpoints,
-	$prop: h
+	$prop: h,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 @include spread-map-into-utilities(
 	$map: $max-width,
 	$class: max-w,
-	$attribute: max-width
+	$attribute: max-width,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 @include spread-map-into-utilities(
 	$map: $max-height,
 	$class: max-h,
-	$attribute: max-height
+	$attribute: max-height,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 @each $breakpoint, $breakpoint-value in $breakpoints {
@@ -60,11 +65,13 @@
 @include spread-map-into-utilities(
 	$map: $min-width,
 	$class: min-w,
-	$attribute: min-width
+	$attribute: min-width,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 @include spread-map-into-utilities(
 	$map: $min-height,
 	$class: min-h,
-	$attribute: min-height
+	$attribute: min-height,
+	$zero-specificity: $zero-specificity-for-utilities
 );

package/src/utilities/spacing.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 @each $prefix, $prop in (m: margin, p: padding, n: margin) {
 	@each $size, $value in map.merge($spacing, $spacing-dynamic) {

package/src/utilities/transitions.scss

@@ -0,0 +1,30 @@
+@use 'sass:map';
+@use '../context' as *;
+
+// transition property
+@include spread-map-into-utilities(
+	$map: $transition-property,
+	$class: transition,
+	$attribute: transition-property,
+	$zero-specificity: $zero-specificity-for-utilities
+);
+
+// transition duration and transition delay
+@each $class,
+	$attribute in (duration: transition-duration, delay: transition-delay)
+{
+	@include spread-map-into-utilities(
+		$map: $transition-duration-delay,
+		$class: $class,
+		$attribute: $attribute,
+		$zero-specificity: $zero-specificity-for-utilities
+	);
+}
+
+// transition timing function
+@include spread-map-into-utilities(
+	$map: $transition-timing-function,
+	$class: ease,
+	$attribute: transition-timing-function,
+	$zero-specificity: $zero-specificity-for-utilities
+);