@volverjs/style 0.1.12 → 0.1.14

package/src/settings/_input.scss

@@ -18,7 +18,7 @@ $input: (
 	text-overflow: ellipsis,
 	label: (
 		color: var(--color-word-2),
-		display: inline,
+		display: block,
 		font-size: var(--text-14),
 		font-weight: var(--font-normal),
 		gap: var(--spacing-xs),

package/src/tools/_breakpoints.scss

@@ -27,15 +27,23 @@
 	);
 }
 
+@function bp-next($name, $bps: $breakpoints, $bps-names: map.keys($bps)) {
+	@return breakpoint-next($name, $bps, $bps-names);
+}
+
 // 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) {
+@function breakpoint-min($name, $bps: $breakpoints) {
 	$min: map.get($bps, $name);
 
 	@return if($min != 0, $min, null);
 }
 
+@function bp-min($name, $bps: $breakpoints) {
+	@return breakpoint-min($name, $bps);
+}
+
 // Maximum breakpoint width. Null for the largest (last) breakpoint.
 // The maximum value is calculated as the minimum of the next one less 0.02px
 // to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.
@@ -44,25 +52,33 @@
 // 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) {
+@function breakpoint-max($name, $bps: $breakpoints) {
 	$next: breakpoint-next($name, $bps);
 
 	@return if($next, breakpoint-min($next, $bps) - 0.02, null);
 }
 
+@function bp-max($name, $bps: $breakpoints) {
+	@return breakpoint-max($name, $bps);
+}
+
 // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
 // Useful for making responsive utilities.
 //    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    ""  (Returns a blank string)
 //    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    "-sm"
-@function breakpoint-infix($name, $bps) {
+@function breakpoint-infix($name, $bps: $breakpoints) {
 	@return if(breakpoint-min($name, $bps) == null, '', '-#{$name}');
 }
 
+@function bp-infix($name, $bps: $breakpoints) {
+	@return breakpoint-infix($name, $bps);
+}
+
 // 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) {
+@mixin media-breakpoint-up($name, $bps: $breakpoints) {
 	$min: breakpoint-min($name, $bps);
 
 	@if $min {
@@ -78,23 +94,39 @@
 	}
 }
 
+@mixin bp-up($name, $bps: $breakpoints) {
+	@include media-breakpoint-up($name, $bps) {
+		@content;
+	}
+}
+
 // 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) {
+@mixin media-breakpoint-down($name, $bps: $breakpoints) {
 	$max: breakpoint-max($name, $bps);
 
 	@if $max {
 		@media (max-width: $max) {
-			@content;
+			& {
+				@content;
+			}
 		}
 	} @else {
+		& {
+			@content;
+		}
+	}
+}
+
+@mixin bp-down($name, $bps: $breakpoints) {
+	@include media-breakpoint-down($name, $bps) {
 		@content;
 	}
 }
 
 // Media that spans multiple breakpoint widths.
 // Makes the @content apply between the min and max breakpoints
-@mixin media-breakpoint-between($lower, $upper, $bps) {
+@mixin media-breakpoint-between($lower, $upper, $bps: $breakpoints) {
 	$min: breakpoint-min($lower, $bps);
 	$max: breakpoint-max($upper, $bps);
 
@@ -113,10 +145,16 @@
 	}
 }
 
+@mixin bp-between($lower, $upper, $bps: $breakpoints) {
+	@include media-breakpoint-between($lower, $upper, $bps) {
+		@content;
+	}
+}
+
 // 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) {
+@mixin media-breakpoint-only($name, $bps: $breakpoints) {
 	$min: breakpoint-min($name, $bps);
 	$max: breakpoint-max($name, $bps);
 
@@ -134,3 +172,9 @@
 		}
 	}
 }
+
+@mixin bp-only($name, $bps: $breakpoints) {
+	@include media-breakpoint-only($name, $bps) {
+		@content;
+	}
+}

package/src/tools/_mixins.scss

@@ -978,15 +978,9 @@
 						$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) == '[' {
@@ -997,9 +991,7 @@
 							);
 						}
 
-						& {
-							#{$key}: $value;
-						}
+						#{$key}: $value;
 					}
 				}
 			}
@@ -1014,7 +1006,7 @@
 	}
 
 	@if $enabled {
-		$selector: ':where(#{unquote($selector)})';
+		$selector: ':where(#{string.unquote($selector)})';
 	}
 
 	#{$selector} {

package/src/utilities/tables.scss

@@ -1,4 +1,4 @@
-@import '../context';
+@use '../context' as *;
 
 // border-collapse
 @include spread-map-into-utilities(

package/src/utilities/transforms.scss

@@ -1,10 +1,11 @@
-@import '../context';
+@use '../context' as *;
 
 // scale
 @each $size, $value in $scale {
 	%scale-#{$size} {
 		scale: #{$value};
 	}
+
 	@include wrap-with-where(
 		$selector: '.scale-#{$size}',
 		$enabled: $zero-specificity-for-utilities
@@ -15,6 +16,7 @@
 	%scale-x-#{$size} {
 		scale: #{$value} 1;
 	}
+
 	@include wrap-with-where(
 		$selector: '.scale-x-#{$size}',
 		$enabled: $zero-specificity-for-utilities
@@ -25,6 +27,7 @@
 	%scale-y-#{$size} {
 		scale: 1 #{$value};
 	}
+
 	@include wrap-with-where(
 		$selector: '.scale-y-#{$size}',
 		$enabled: $zero-specificity-for-utilities
@@ -54,6 +57,7 @@
 	%translate-#{$size} {
 		translate: #{$value} #{$value};
 	}
+
 	@include wrap-with-where(
 		$selector: '.translate-#{$size}',
 		$enabled: $zero-specificity-for-utilities
@@ -64,6 +68,7 @@
 	%translate-x-#{$size} {
 		translate: #{$value} 0;
 	}
+
 	@include wrap-with-where(
 		$selector: '.translate-x-#{$size}',
 		$enabled: $zero-specificity-for-utilities
@@ -74,6 +79,7 @@
 	%translate-y-#{$size} {
 		translate: 0 #{$value};
 	}
+
 	@include wrap-with-where(
 		$selector: '.translate-y-#{$size}',
 		$enabled: $zero-specificity-for-utilities
@@ -84,6 +90,7 @@
 	%-translate-#{$size} {
 		translate: -#{$value} -#{$value};
 	}
+
 	@include wrap-with-where(
 		$selector: '.-translate-#{$size}',
 		$enabled: $zero-specificity-for-utilities
@@ -94,6 +101,7 @@
 	%-translate-x-#{$size} {
 		translate: -#{$value} 0;
 	}
+
 	@include wrap-with-where(
 		$selector: '.-translate-x-#{$size}',
 		$enabled: $zero-specificity-for-utilities
@@ -104,6 +112,7 @@
 	%-translate-y-#{$size} {
 		translate: 0 -#{$value};
 	}
+
 	@include wrap-with-where(
 		$selector: '.-translate-y-#{$size}',
 		$enabled: $zero-specificity-for-utilities

package/src/volver.scss

@@ -1,11 +1,7 @@
+@use 'sass:meta';
+
 // base
 @use 'base';
 
-// components
-@use 'components';
-
-// utilities
-@use 'utilities';
-
-// preflight
-@import 'preflight';
+// preflight (components and utilities are included here)
+@use 'preflight';