@volverjs/style 0.1.2-beta.30 → 0.1.2-beta.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@volverjs/style",
-  "version": "0.1.2-beta.30",
+  "version": "0.1.2-beta.31",
   "description": "@volverjs/style is a lightweight responsive CSS utility library to accompany @volverjs/ui and static webpages as well.",
   "main": "dist/style.css",
   "style": "dist/style.css",

package/src/export.scss

@@ -27,7 +27,7 @@
 					}
 				}
 			}
-		} @else {
+		} @else if $key != 'scheme' {
 			#{'colors__' + $key}: $value;
 		}
 	}
@@ -45,7 +45,7 @@
 	}
 
 	// breakpoints
-	@each $key, $value in $breakpoints {
+	@each $key, $value in map.remove($breakpoints, 'xxs') {
 		#{'breakpoints__' + $key}: $value;
 	}
 
@@ -89,6 +89,11 @@
 		#{'object-position__' + $key}: $value;
 	}
 
+	// overflow
+	@each $key, $value in $overflow {
+		#{'overflow__' + $key}: $value;
+	}
+
 	// position
 	@each $index in $position {
 		#{'position__' + $index}: $index;
@@ -221,7 +226,7 @@
 		$name: meta.inspect($key);
 		$name: str-replace($name, '\\/', '_');
 
-		#{'width-spacer__' + $name}: $value;
+		#{'width__' + $name}: $value;
 	}
 
 	// height spacer
@@ -229,17 +234,17 @@
 		$name: meta.inspect($key);
 		$name: str-replace($name, '\\/', '_');
 
-		#{'height-spacer__' + $name}: $value;
+		#{'height__' + $name}: $value;
 	}
 
 	// border radius
 	@each $key, $value in $border-radius {
-		#{'border-radius-spacer__' + $key}: $value;
+		#{'border-radius__' + $key}: $value;
 	}
 
 	// border width
 	@each $key, $value in $border-width {
-		#{'border-width-spacer__' + $key}: $value;
+		#{'border-width__' + $key}: $value;
 	}
 
 	// #endregion

package/src/props/layout.scss

@@ -1,6 +1,11 @@
+@use 'sass:map';
 @use '../context' as *;
 
 :where(:host, :root, .theme) {
 	@include spread-map-into-props($map: $aspect-ratio, $prefix: aspect);
 	@include spread-map-into-props($map: $z-index, $prefix: z);
+	@include spread-map-into-props(
+		$map: map.remove($breakpoints, 'xxs'),
+		$prefix: breakpoint
+	);
 }

package/src/settings/_layout.scss

@@ -83,6 +83,14 @@ $object-position: (
 	top: top,
 ) !default;
 
+// overflow
+$overflow: (
+	visible: visible,
+	hidden: hidden,
+	scroll: scroll,
+	auto: auto,
+) !default;
+
 // position
 $position: (static, fixed, absolute, relative, sticky) !default;
 
@@ -95,15 +103,15 @@ $visibility: (
 // z-index
 $z-index: (
 	dropdown: 1000,
-	sticky: 1020,
-	fixed: 1030,
-	modal-backdrop: 1040,
-	modal: 1050,
-	confirm-backdrop: 1060,
-	confirm: 1070,
-	popover: 1060,
-	tooltip: 1070,
-	toast: 1080,
-	notification-alert: 1090,
+	sticky: 1010,
+	fixed: 1020,
+	modal-backdrop: 1030,
+	modal: 1040,
+	confirm-backdrop: 1050,
+	confirm: 1060,
+	popover: 1070,
+	tooltip: 1080,
+	toast: 1090,
+	notification-alert: 1100,
 	auto: 'auto',
 ) !default;

package/src/settings/components/_vv-badge.scss

@@ -21,6 +21,7 @@ $vv-badge: (
 	font-family: var(--font-sans),
 	font-weight: var(--font-normal),
 	text-shadow: none,
+	line-height: var(--leading-none),
 	state: (
 		empty: (
 			font-size: inherit,

package/src/settings/components/_vv-button.scss

@@ -52,7 +52,6 @@ $vv-button: (
 			flex-shrink: 0,
 			stroke-linecap: round,
 			stroke-linejoin: round,
-			[min-height]: calc(var(--button-line-height) * 1em),
 		),
 		label: (
 			white-space: nowrap,

package/src/settings/components/_vv-textarea.scss

@@ -72,7 +72,7 @@ $vv-textarea: (
 			display: block,
 			flex: 1,
 			color: var(--input-color),
-			[margin]: var(--input-spacing-top) var(--input-spacing-right)
+			[padding]: var(--input-spacing-top) var(--input-spacing-right)
 				var(--input-spacing-bottom) var(--input-spacing-left),
 			overflow: auto,
 			pseudo: (

package/src/utilities/layout.scss

@@ -94,28 +94,28 @@
 );
 
 // overflow
-@each $overflow in (auto, hidden, clip, visible, scroll) {
-	%overflow-#{$overflow} {
-		overflow: #{$overflow};
+@each $key, $value in $overflow {
+	%overflow-#{$key} {
+		overflow: #{$value};
 	}
 
 	@include wrap-with-where(
-		$selector: '.overflow-#{$overflow}',
+		$selector: '.overflow-#{$key}',
 		$enabled: $zero-specificity-for-utilities
 	) {
-		@extend %overflow-#{$overflow};
+		@extend %overflow-#{$key};
 	}
 
 	@each $prefix in (x, y) {
-		%overflow-#{$prefix}-#{$overflow} {
-			overflow-#{$prefix}: #{$overflow};
+		%overflow-#{$prefix}-#{$key} {
+			overflow-#{$prefix}: #{$value};
 		}
 
 		@include wrap-with-where(
-			$selector: '.overflow-#{$prefix}-#{$overflow}',
+			$selector: '.overflow-#{$prefix}-#{$key}',
 			$enabled: $zero-specificity-for-utilities
 		) {
-			@extend %overflow-#{$prefix}-#{$overflow};
+			@extend %overflow-#{$prefix}-#{$key};
 		}
 	}
 }