@volverjs/style 0.1.8 → 0.1.9-beta.2

package/src/settings/components/_vv-input-text.scss

@@ -10,7 +10,6 @@ $vv-input-text: (
 		label: (
 			_alias: '> label',
 			display: var(--input-label-display),
-			align-items: var(--input-label-align-items),
 			font-size: var(--input-label-font-size),
 			color: var(--input-label-color),
 			margin: 0 0 var(--input-label-gap) 0,
@@ -48,10 +47,10 @@ $vv-input-text: (
 			),
 			state: (
 				hover: (
-					background-color: var(--color-surface-3),
+					background-color: var(--input-background-color-hover),
 				),
 				focus-within: (
-					background-color: var(--color-surface-2),
+					background-color: var(--input-background-color-focus),
 					pseudo: (
 						after: (
 							transform: scaleX(1),
@@ -64,6 +63,7 @@ $vv-input-text: (
 			position: relative,
 			display: flex,
 			flex: 1,
+			min-width: 0,
 		),
 		input: (
 			_alias: 'input',
@@ -95,7 +95,7 @@ $vv-input-text: (
 					opacity: var(--opacity-0),
 				),
 				color-swatch-wrapper: (
-					padding: 1px,
+					padding: var(--spacing-px),
 				),
 				color-swatch: (
 					height: var(--spacing-20),
@@ -124,6 +124,7 @@ $vv-input-text: (
 				),
 				readonly: (
 					cursor: text,
+					user-select: text,
 				),
 			),
 		),
@@ -142,6 +143,8 @@ $vv-input-text: (
 		icon: (
 			_alias: '> div > :where(svg, [data-icon])',
 			position: var(--input-icon-position),
+			top: 0,
+			left: 0,
 			width: var(--input-icon-width),
 			height: var(--input-min-height),
 			margin: var(--input-icon-margin),
@@ -151,6 +154,7 @@ $vv-input-text: (
 			_alias: 'input + :where(svg, [data-icon])',
 			position: var(--input-icon-position),
 			right: 0,
+			left: auto,
 		),
 		actions-group: (
 			display: flex,
@@ -158,26 +162,19 @@ $vv-input-text: (
 			height: var(--input-min-height),
 		),
 		action: (
-			cursor: pointer,
-			state: (
-				focus-visible: (
-					text-shadow: 0 1px 0 var(--color-gray-darken-5),
-				),
-			),
-		),
-		action-chevron: (
-			flex: 1,
+			position: relative,
 			width:
 				calc(
 					var(--input-icon-width) + var(--input-spacing-left) +
 						var(--input-spacing-right)
 				),
-			background-position: center var(--spacing-2),
-			background-size: var(--text-14) auto,
-			background-repeat: no-repeat,
-			background-image: var(--bg-chevron),
+			height: var(--input-min-height),
 			cursor: pointer,
 			state: (
+				disabled: (
+					cursor: not-allowed,
+					opacity: var(--opacity-50),
+				),
 				focus-visible: (
 					background-color: var(--color-surface-3),
 				),
@@ -189,6 +186,13 @@ $vv-input-text: (
 				),
 			),
 		),
+		action-chevron: (
+			flex: 1,
+			background-position: center var(--spacing-2),
+			background-size: var(--text-14) auto,
+			background-repeat: no-repeat,
+			background-image: var(--bg-chevron),
+		),
 		action-chevron-up: (
 			transform: rotate(180deg),
 		),
@@ -209,6 +213,15 @@ $vv-input-text: (
 			font-size: var(--input-hint-font-size),
 			color: var(--input-hint-color),
 		),
+		unit: (
+			color: var(--input-placeholder-color),
+			display: flex,
+			align-items: center,
+			flex: 0 1 auto,
+			[padding-right]: var(--input-spacing-right),
+			[padding-block]: var(--input-spacing-top)
+				var(--input-spacing-bottom),
+		),
 	),
 	modifier: (
 		icon-before: (
@@ -295,10 +308,9 @@ $vv-input-text: (
 					position: absolute,
 					z-index: 1,
 					min-height: var(--input-min-height),
+					line-height: var(--input-min-height),
 					pointer-events: none,
 					font-size: inherit,
-					[padding-top]: var(--input-spacing-top),
-					[padding-bottom]: var(--input-spacing-bottom),
 					padding-inline: 0,
 					margin: 0,
 					will-change: 'transform',
@@ -355,6 +367,45 @@ $vv-input-text: (
 				),
 			),
 		),
+		auto-width: (
+			element: (
+				inner: (
+					[padding-block]: var(--input-spacing-top)
+						var(--input-spacing-bottom),
+					[padding-inline]: var(--input-spacing-left)
+						var(--input-spacing-right),
+					min-height: var(--input-min-height),
+					cursor: text,
+				),
+				input: (
+					padding-block: 0,
+					padding-inline: 0,
+					min-width: 1ch,
+					min-height: 1em,
+					text-align: left,
+				),
+				unit: (
+					padding-right: 0,
+					padding-block: 0,
+				),
+			),
+			state: (
+				dirty: (
+					element: (
+						input: (
+							flex: 0 1 auto,
+						),
+					),
+				),
+				disabled: (
+					element: (
+						inner: (
+							cursor: not-allowed,
+						),
+					),
+				),
+			),
+		),
 	),
 	state: (
 		disabled: (
@@ -363,7 +414,10 @@ $vv-input-text: (
 				wrapper: (
 					state: (
 						hover: (
-							background-color: var(--color-surface-1),
+							background-color: var(--input-background-color),
+						),
+						focus-within: (
+							background-color: var(--input-background-color),
 						),
 					),
 				),
@@ -373,13 +427,19 @@ $vv-input-text: (
 			element: (
 				wrapper: (
 					pseudo: (
+						before: (
+							opacity: var(--opacity-0),
+						),
 						after: (
 							opacity: var(--opacity-0),
 						),
 					),
 					state: (
 						hover: (
-							background-color: var(--color-surface-1),
+							background-color: var(--input-background-color),
+						),
+						focus-within: (
+							background-color: var(--input-background-color),
 						),
 					),
 				),

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

@@ -11,7 +11,6 @@ $vv-select: (
 		label: (
 			_alias: '> label',
 			display: var(--input-label-display),
-			align-items: var(--input-label-align-items),
 			font-size: var(--input-label-font-size),
 			color: var(--input-label-color),
 			margin: 0 0 var(--input-label-gap) 0,
@@ -48,10 +47,10 @@ $vv-select: (
 			),
 			state: (
 				hover: (
-					background-color: var(--color-surface-3),
+					background-color: var(--input-background-color-hover),
 				),
 				focus-within: (
-					background-color: var(--color-surface-2),
+					background-color: var(--input-background-color-focus),
 					pseudo: (
 						after: (
 							transform: scaleX(1),
@@ -59,7 +58,7 @@ $vv-select: (
 					),
 				),
 				open: (
-					background-color: var(--color-surface-2),
+					background-color: var(--input-background-color-focus),
 					pseudo: (
 						after: (
 							transform: scaleX(1),
@@ -253,10 +252,9 @@ $vv-select: (
 					position: absolute,
 					z-index: 1,
 					min-height: var(--input-min-height),
+					line-height: var(--input-min-height),
 					pointer-events: none,
 					font-size: inherit,
-					[padding-top]: var(--input-spacing-top),
-					[padding-bottom]: var(--input-spacing-bottom),
 					padding-inline: 0,
 					margin: 0,
 					will-change: 'transform',
@@ -302,17 +300,24 @@ $vv-select: (
 		),
 		readonly: (
 			opacity: var(--opacity-100),
+			cursor: text,
 			user-select: text,
 			element: (
 				wrapper: (
 					pseudo: (
+						before: (
+							opacity: var(--opacity-0),
+						),
 						after: (
 							opacity: var(--opacity-0),
 						),
 					),
 					state: (
 						hover: (
-							background-color: var(--color-surface-1),
+							background-color: var(--input-background-color),
+						),
+						focus-within: (
+							background-color: var(--input-background-color),
 						),
 					),
 				),
@@ -330,7 +335,10 @@ $vv-select: (
 				wrapper: (
 					state: (
 						hover: (
-							background-color: var(--color-surface-1),
+							background-color: var(--input-background-color),
+						),
+						focus-within: (
+							background-color: var(--input-background-color),
 						),
 					),
 				),

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

@@ -10,7 +10,6 @@ $vv-textarea: (
 		label: (
 			_alias: '> label',
 			display: var(--input-label-display),
-			align-items: var(--input-label-align-items),
 			font-size: var(--input-label-font-size),
 			color: var(--input-label-color),
 			margin: 0 0 var(--input-label-gap) 0,
@@ -61,10 +60,10 @@ $vv-textarea: (
 			),
 			state: (
 				hover: (
-					background-color: var(--color-surface-3),
+					background-color: var(--input-background-color-hover),
 				),
 				focus-within: (
-					background-color: var(--color-surface-2),
+					background-color: var(--input-background-color-focus),
 					pseudo: (
 						after: (
 							transform: scaleX(1),
@@ -93,6 +92,7 @@ $vv-textarea: (
 				),
 				readonly: (
 					cursor: text,
+					user-select: text,
 				),
 			),
 		),
@@ -228,10 +228,9 @@ $vv-textarea: (
 					position: absolute,
 					z-index: 1,
 					min-height: var(--input-min-height),
+					line-height: var(--input-min-height),
 					pointer-events: none,
 					font-size: inherit,
-					[padding-top]: var(--input-spacing-top),
-					[padding-bottom]: var(--input-spacing-bottom),
 					padding-inline: 0,
 					margin: 0,
 					will-change: 'transform',
@@ -296,7 +295,10 @@ $vv-textarea: (
 				wrapper: (
 					state: (
 						hover: (
-							background-color: var(--color-surface-1),
+							background-color: var(--input-background-color),
+						),
+						focus-within: (
+							background-color: var(--input-background-color),
 						),
 					),
 				),
@@ -306,13 +308,19 @@ $vv-textarea: (
 			element: (
 				wrapper: (
 					pseudo: (
+						before: (
+							opacity: var(--opacity-0),
+						),
 						after: (
-							opacity: 0,
+							opacity: var(--opacity-0),
 						),
 					),
 					state: (
 						hover: (
-							background-color: var(--color-surface-1),
+							background-color: var(--input-background-color),
+						),
+						focus-within: (
+							background-color: var(--input-background-color),
 						),
 					),
 				),

package/src/tools/_mixins.scss

@@ -869,15 +869,9 @@
 // Wrap selector with :where()
 @mixin wrap-with-where($selector, $enabled: true) {
 	@if type-of($selector) == 'map' or type-of($selector) == 'list' {
-		$merged: '';
-		@each $element in $selector {
-			@if $enabled {
-				$merged: '#{$merged}, :where(#{unquote($element)})';
-			} @else {
-				$merged: '#{$merged}, #{unquote($element)}';
-			}
-		}
-	} @else if $enabled {
+		$selector: #{$selector};
+	}
+	@if $enabled {
 		$selector: ':where(#{unquote($selector)})';
 	}
 

package/src/utilities/typography.scss

@@ -120,7 +120,8 @@
 	$map: $text-align,
 	$class: text,
 	$attribute: text-align,
-	$zero-specificity: $zero-specificity-for-utilities
+	$zero-specificity: $zero-specificity-for-utilities,
+	$bps: $breakpoints
 );
 
 // text-decorator-line