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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@volverjs/style",
-  "version": "0.1.2-beta.29",
+  "version": "0.1.2-beta.30",
   "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/settings/_colors.scss

@@ -9,7 +9,7 @@ $color-black: #000 !default;
 $color-white: #fff !default;
 $color-brand: #1976d2 !default;
 $color-accent: #9c27b0 !default;
-$color-success: #21ba45 !default;
+$color-success: #178230 !default;
 $color-danger: #c10015 !default;
 $color-info: #31ccec !default;
 $color-warning: #f2c037 !default;

package/src/settings/_input.scss

@@ -2,10 +2,10 @@ $input: (
 	display: flex,
 	flex: 1,
 	flex-direction: column,
-	padding-top: var(--spacing-sm),
-	padding-right: var(--spacing-sm),
-	padding-bottom: var(--spacing-sm),
-	padding-left: var(--spacing-sm),
+	spacing-top: var(--spacing-sm),
+	spacing-right: var(--spacing-sm),
+	spacing-bottom: var(--spacing-sm),
+	spacing-left: var(--spacing-sm),
 	color: var(--color-word),
 	background-color: var(--color-surface-1),
 	gap: var(--spacing-md),
@@ -14,7 +14,7 @@ $input: (
 	min-height: var(--spacing-50),
 	min-width: 0,
 	label: (
-		color: var(--color-word-3),
+		color: var(--color-word-2),
 		display: block,
 		font-size: var(--text-xs),
 		gap: var(--spacing-xs),
@@ -34,7 +34,7 @@ $input: (
 	hint: (
 		display: block,
 		font-size: var(--text-12),
-		color: var(--color-word-4),
+		color: var(--color-word-2),
 		gap: var(--spacing-8),
 		white-space: nowrap,
 		text-overflow: ellipsis,

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

@@ -39,6 +39,7 @@ $vv-accordion: (
 			font-size: var(--text-sm),
 			border-radius: var(--rounded-lg),
 			-webkit-tap-highlight-color: transparent,
+			outline: none,
 			pseudo: (
 				before: (
 					display: block,
@@ -66,6 +67,9 @@ $vv-accordion: (
 				hover: (
 					background-color: var(--color-surface-1),
 				),
+				focus-visible: (
+					background-color: var(--color-surface-1),
+				),
 			),
 		),
 		content: (

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

@@ -32,7 +32,7 @@ $vv-button: (
 			background: var(--color-brand-darken-2),
 			border-color: var(--color-brand-darken-2),
 		),
-		selected: (
+		pressed: (
 			background: var(--color-brand-darken-2),
 			border-color: var(--color-brand-darken-2),
 		),
@@ -78,7 +78,7 @@ $vv-button: (
 					background: var(--color-gray-darken-5),
 					border-color: var(--color-gray-darken-5),
 				),
-				selected: (
+				pressed: (
 					background: var(--color-gray-darken-5),
 					border-color: var(--color-gray-darken-5),
 				),
@@ -100,7 +100,7 @@ $vv-button: (
 				active: (
 					background: var(--color-gray-lighten-3),
 				),
-				selected: (
+				pressed: (
 					background: var(--color-gray-lighten-4),
 				),
 			),
@@ -121,7 +121,7 @@ $vv-button: (
 					background: var(--color-danger-darken-2),
 					border-color: var(--color-danger-darken-2),
 				),
-				selected: (
+				pressed: (
 					background: var(--color-danger-darken-2),
 					border-color: var(--color-danger-darken-2),
 				),
@@ -130,7 +130,7 @@ $vv-button: (
 		ghost: (
 			background: transparent,
 			border-color: transparent,
-			color: var(--color-gray),
+			color: var(--color-gray-darken-1),
 			text-shadow: 0 1px 0 var(--color-gray-lighten-5),
 			state: (
 				focus-visible: (
@@ -143,7 +143,7 @@ $vv-button: (
 				active: (
 					background: var(--color-gray-lighten-4),
 				),
-				selected: (
+				pressed: (
 					background: var(--color-gray-lighten-4),
 				),
 			),
@@ -152,7 +152,7 @@ $vv-button: (
 			background: transparent,
 			border-width: var(--border-0),
 			padding: 0,
-			color: var(--color-brand),
+			color: var(--color-brand-darken-1),
 			font-weight: var(--font-normal),
 			text-shadow: none,
 			state: (
@@ -187,7 +187,7 @@ $vv-button: (
 					border-color: var(--color-gray-lighten-4),
 					background: var(--color-gray-lighten-4),
 				),
-				selected: (
+				pressed: (
 					border-color: var(--color-gray-lighten-4),
 					background: var(--color-gray-lighten-4),
 				),
@@ -210,7 +210,7 @@ $vv-button: (
 					border-color: var(--color-gray-darken-3),
 					background: var(--color-gray-darken-3),
 				),
-				selected: (
+				pressed: (
 					border-color: var(--color-gray-darken-3),
 					background: var(--color-gray-darken-3),
 				),
@@ -237,7 +237,7 @@ $vv-button: (
 				active: (
 					background: var(--color-surface-5),
 				),
-				selected: (
+				pressed: (
 					color: var(--color-white),
 					background: var(--color-gray),
 					border-color: var(--color-gray),
@@ -275,7 +275,7 @@ $vv-button: (
 					background: var(--color-surface-5),
 					border-color: var(--color-surface-5),
 				),
-				selected: (
+				pressed: (
 					color: var(--color-white),
 					background: var(--color-gray),
 					border-color: var(--color-gray),

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

@@ -27,6 +27,7 @@ $vv-input-text: (
 			background-color: var(--input-background-color),
 			will-change: background-color,
 			transition: var(--transition-colors),
+			min-height: var(--spacing-50),
 			pseudo: (
 				before: (
 					position: absolute,
@@ -64,10 +65,11 @@ $vv-input-text: (
 			display: block,
 			flex: 1,
 			color: var(--input-color),
-			[padding]: var(--input-padding-top) var(--input-padding-right)
-				var(--input-padding-bottom) var(--input-padding-left),
-			min-height: var(--input-min-height),
+			[margin-block]: var(--input-spacing-top) var(--input-spacing-bottom),
+			[padding-inline]: var(--input-spacing-left)
+				var(--input-spacing-right),
 			min-width: 0,
+			block-size: calc(var(--input-line-height) * var(--input-font-size)),
 			pseudo: (
 				placeholder: (
 					color: var(--input-placeholder-color),
@@ -83,9 +85,13 @@ $vv-input-text: (
 					-webkit-appearance: none,
 					opacity: 0,
 				),
+				color-swatch-wrapper: (
+					padding: 1px,
+				),
 				color-swatch: (
 					height: var(--spacing-20),
 					border-radius: var(--spacing-4),
+					padding: 0,
 				),
 				outer-spin-button: (
 					display: none,
@@ -115,35 +121,52 @@ $vv-input-text: (
 		),
 		icon: (
 			_alias: ':where(svg, [data-icon])',
-			margin: var(--input-padding-top) var(--input-padding-right)
-				var(--input-padding-bottom) var(--input-padding-left),
-			position: var(--input-icon-position),
+			margin: var(--input-spacing-top) var(--input-spacing-right)
+				var(--input-spacing-bottom) var(--input-spacing-left),
 			width: var(--input-icon-width),
 			height: var(--input-icon-height),
 			padding: var(--input-icon-padding),
+		),
+		icon-left: (
+			_alias: '> div > :where(svg, [data-icon])',
+			position: var(--input-icon-position),
 			pointer-events: var(--input-icon-pointer-events),
 		),
 		icon-right: (
 			_alias: 'input + :where(svg, [data-icon])',
+			position: var(--input-icon-position),
+			pointer-events: var(--input-icon-pointer-events),
 			right: 0,
 		),
 		actions-group: (
 			display: flex,
 			flex-direction: column,
-			position: absolute,
-			right: 0,
-			top: 0,
-			bottom: var(--spacing-px),
+			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,
-			width: calc(1em + var(--spacing-sm) * 2),
+			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),
 			cursor: pointer,
 			state: (
+				focus-visible: (
+					background-color: var(--color-surface-3),
+				),
 				hover: (
 					background-color: var(--color-surface-4),
 				),
@@ -168,17 +191,17 @@ $vv-input-text: (
 			max-width: var(--input-hint-max-width),
 		),
 		limit: (
-			[padding-right]: var(--input-padding-right),
+			[padding-right]: var(--input-spacing-right),
 			font-size: var(--input-hint-font-size),
 			color: var(--input-hint-color),
 		),
 	),
 	modifier: (
 		icon-left: (
-			--input-padding-left: calc(var(--spacing-sm) * 2 + 1em),
+			--input-spacing-left: calc(var(--spacing-sm) * 2 + 1em),
 		),
 		icon-right: (
-			--input-padding-right: calc(var(--spacing-sm) * 2 + 1em),
+			--input-spacing-right: calc(var(--spacing-sm) * 2 + 1em),
 			element: (
 				limit: (
 					margin-left: calc((var(--spacing-sm) + 1em) * -1),
@@ -243,16 +266,16 @@ $vv-input-text: (
 			),
 		),
 		floating: (
-			[margin-left]: var(--input-padding-left),
-			[margin-right]: var(--input-padding-right),
+			[margin-left]: var(--input-spacing-left),
+			[margin-right]: var(--input-spacing-right),
 			element: (
 				wrapper: (
-					[margin-left]: calc(var(--input-padding-left) * -1),
-					[margin-right]: calc(var(--input-padding-right) * -1),
+					[margin-left]: calc(var(--input-spacing-left) * -1),
+					[margin-right]: calc(var(--input-spacing-right) * -1),
 				),
 				hint: (
-					[margin-left]: calc(var(--input-padding-left) * -1),
-					[margin-right]: calc(var(--input-padding-right) * -1),
+					[margin-left]: calc(var(--input-spacing-left) * -1),
+					[margin-right]: calc(var(--input-spacing-right) * -1),
 				),
 				label: (
 					position: absolute,
@@ -262,17 +285,20 @@ $vv-input-text: (
 					min-height: var(--input-min-height),
 					pointer-events: none,
 					font-size: inherit,
-					[padding-top]: var(--input-padding-top),
-					[padding-bottom]: var(--input-padding-bottom),
+					[padding-top]: var(--input-spacing-top),
+					[padding-bottom]: var(--input-spacing-bottom),
 					padding-inline: 0,
 					margin: 0,
 					will-change: 'transform',
-					transform-origin: left,
 					transition: var(--transition-all),
 				),
 				input: (
+					will-change: 'transform',
+					transition: var(--transition-all),
 					pseudo: (
 						placeholder: (
+							will-change: 'opacity',
+							transition: var(--transition-opacity),
 							opacity: 0,
 						),
 					),

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

@@ -73,13 +73,13 @@ $vv-select: (
 			align-items: center,
 			flex: 1,
 			color: var(--input-placeholder-color),
-			[padding]: var(--input-padding-top) var(--input-padding-right)
-				var(--input-padding-bottom) var(--input-padding-left),
-			min-height: var(--spacing-50),
+			[padding]: var(--input-spacing-top) var(--input-spacing-right)
+				var(--input-spacing-bottom) var(--input-spacing-left),
 			background-image: var(--bg-chevron),
 			background-repeat: no-repeat,
-			[background-position]: right var(--input-padding-right) center,
+			[background-position]: right var(--input-spacing-right) center,
 			background-size: 1em,
+			min-height: var(--spacing-50),
 			state: (
 				disabled: (
 					cursor: not-allowed,
@@ -96,8 +96,8 @@ $vv-select: (
 		),
 		icon: (
 			_alias: ':where(svg, [data-icon])',
-			margin: var(--input-padding-top) var(--input-padding-right)
-				var(--input-padding-bottom) var(--input-padding-left),
+			margin: var(--input-spacing-top) var(--input-spacing-right)
+				var(--input-spacing-bottom) var(--input-spacing-left),
 			position: var(--input-icon-position),
 			width: var(--input-icon-width),
 			height: var(--input-icon-height),
@@ -130,10 +130,10 @@ $vv-select: (
 			),
 		),
 		icon-left: (
-			--input-padding-left: calc(var(--spacing-sm) * 2 + 1em),
+			--input-spacing-left: calc(var(--spacing-sm) * 2 + 1em),
 		),
 		icon-right: (
-			--input-padding-right: calc(var(--spacing-sm) * 2 + 1em),
+			--input-spacing-right: calc(var(--spacing-sm) * 2 + 1em),
 		),
 		valid: (
 			element: (
@@ -187,24 +187,24 @@ $vv-select: (
 			),
 		),
 		floating: (
-			[margin-left]: var(--input-padding-left),
-			[margin-right]: var(--input-padding-right),
+			[margin-left]: var(--input-spacing-left),
+			[margin-right]: var(--input-spacing-right),
 			element: (
 				wrapper: (
-					[margin-left]: calc(var(--input-padding-left) * -1),
-					[margin-right]: calc(var(--input-padding-right) * -1),
+					[margin-left]: calc(var(--input-spacing-left) * -1),
+					[margin-right]: calc(var(--input-spacing-right) * -1),
 				),
 				hint: (
-					[margin-left]: calc(var(--input-padding-left) * -1),
-					[margin-right]: calc(var(--input-padding-right) * -1),
+					[margin-left]: calc(var(--input-spacing-left) * -1),
+					[margin-right]: calc(var(--input-spacing-right) * -1),
 				),
 				label: (
 					position: absolute,
 					z-index: 1,
 					pointer-events: none,
 					font-size: inherit,
-					[padding-top]: var(--input-padding-top),
-					[padding-bottom]: var(--input-padding-bottom),
+					[padding-top]: var(--input-spacing-top),
+					[padding-bottom]: var(--input-spacing-bottom),
 					padding-inline: 0,
 					margin: 0,
 					will-change: 'transform',
@@ -220,25 +220,6 @@ $vv-select: (
 				),
 			),
 			state: (
-				focus-within: (
-					element: (
-						label: (
-							transform: translateY(-0.8em),
-							font-size: var(--text-12),
-						),
-						input: (
-							[padding-top]:
-								calc(var(--input-padding-top) + 0.55em),
-							[padding-bottom]:
-								calc(var(--input-padding-bottom) - 0.55em),
-							pseudo: (
-								placeholder: (
-									opacity: 1,
-								),
-							),
-						),
-					),
-				),
 				dirty: (
 					element: (
 						label: (
@@ -247,9 +228,9 @@ $vv-select: (
 						),
 						input: (
 							[padding-top]:
-								calc(var(--input-padding-top) + 0.55em),
+								calc(var(--input-spacing-top) + 0.55em),
 							[padding-bottom]:
-								calc(var(--input-padding-bottom) - 0.55em),
+								calc(var(--input-spacing-bottom) - 0.55em),
 							pseudo: (
 								placeholder: (
 									opacity: 1,

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

@@ -34,6 +34,7 @@ $vv-textarea: (
 			background-color: var(--input-background-color),
 			will-change: background-color,
 			transition: var(--transition-colors),
+			min-height: var(--spacing-50),
 			pseudo: (
 				before: (
 					position: absolute,
@@ -71,9 +72,8 @@ $vv-textarea: (
 			display: block,
 			flex: 1,
 			color: var(--input-color),
-			[padding]: var(--input-padding-top) var(--input-padding-right)
-				var(--input-padding-bottom) var(--input-padding-left),
-			min-height: var(--spacing-50),
+			[margin]: var(--input-spacing-top) var(--input-spacing-right)
+				var(--input-spacing-bottom) var(--input-spacing-left),
 			overflow: auto,
 			pseudo: (
 				placeholder: (
@@ -91,8 +91,8 @@ $vv-textarea: (
 		),
 		icon: (
 			_alias: ':where(svg, [data-icon])',
-			margin: var(--input-padding-top) var(--input-padding-right)
-				var(--input-padding-bottom) var(--input-padding-left),
+			margin: var(--input-spacing-top) var(--input-spacing-right)
+				var(--input-spacing-bottom) var(--input-spacing-left),
 			position: var(--input-icon-position),
 			width: var(--input-icon-width),
 			height: var(--input-icon-height),
@@ -126,10 +126,10 @@ $vv-textarea: (
 	),
 	modifier: (
 		icon-left: (
-			--input-padding-left: calc(var(--spacing-sm) * 2 + 1em),
+			--input-spacing-left: calc(var(--spacing-sm) * 2 + 1em),
 		),
 		icon-right: (
-			--input-padding-right: calc(var(--spacing-sm) * 2 + 1em),
+			--input-spacing-right: calc(var(--spacing-sm) * 2 + 1em),
 		),
 		resizable: (
 			element: (
@@ -196,33 +196,36 @@ $vv-textarea: (
 			),
 		),
 		floating: (
-			[margin-left]: var(--input-padding-left),
-			[margin-right]: var(--input-padding-right),
+			[margin-left]: var(--input-spacing-left),
+			[margin-right]: var(--input-spacing-right),
 			element: (
 				wrapper: (
-					[margin-left]: calc(var(--input-padding-left) * -1),
-					[margin-right]: calc(var(--input-padding-right) * -1),
+					[margin-left]: calc(var(--input-spacing-left) * -1),
+					[margin-right]: calc(var(--input-spacing-right) * -1),
 				),
 				hint: (
-					[margin-left]: calc(var(--input-padding-left) * -1),
-					[margin-right]: calc(var(--input-padding-right) * -1),
+					[margin-left]: calc(var(--input-spacing-left) * -1),
+					[margin-right]: calc(var(--input-spacing-right) * -1),
 				),
 				label: (
 					position: absolute,
 					z-index: 1,
 					pointer-events: none,
 					font-size: inherit,
-					[padding-top]: var(--input-padding-top),
-					[padding-bottom]: var(--input-padding-bottom),
+					[padding-top]: var(--input-spacing-top),
+					[padding-bottom]: var(--input-spacing-bottom),
 					padding-inline: 0,
 					margin: 0,
 					will-change: 'transform',
-					transform-origin: left,
 					transition: var(--transition-all),
 				),
 				input: (
+					will-change: 'transform',
+					transition: var(--transition-all),
 					pseudo: (
 						placeholder: (
+							will-change: 'opacity',
+							transition: var(--transition-opacity),
 							opacity: 0,
 						),
 					),

package/src/themes/dark/props/_input.scss

@@ -0,0 +1,15 @@
+@use '../context' as *;
+
+@mixin theme-dark-input {
+	@include spread-map-into-props($dark-input, 'input');
+}
+
+:where(:host, :root, .theme):not(.theme--light) {
+	@media (prefers-color-scheme: dark) {
+		@include theme-dark-input;
+	}
+}
+
+:where(.theme.theme--dark) {
+	@include theme-dark-input;
+}

package/src/themes/dark/props/index.scss

@@ -1,2 +1,3 @@
 @use 'background';
 @use 'colors';
+@use 'input';

package/src/themes/dark/settings/_index.scss

@@ -1,4 +1,5 @@
 @forward 'colors';
 @forward 'background';
+@forward 'input';
 
 @forward 'components/vv-button';

package/src/themes/dark/settings/_input.scss

@@ -0,0 +1,8 @@
+$dark-input: (
+	invalid: (
+		color: var(--color-danger-lighten-2),
+	),
+	valid: (
+		color: var(--color-success-lighten-2),
+	),
+) !default;

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

@@ -1,20 +1,20 @@
 $dark-vv-button: (
 	modifier: (
 		primary: (
-			border-color: var(--color-gray-lighten-3),
-			background: var(--color-gray-lighten-3),
+			border-color: var(--color-gray-darken-1),
+			background: var(--color-gray-darken-1),
 			state: (
 				focus-visible: (
 					outline: var(--spacing-px) solid var(--color-gray),
 				),
 				hover: (
-					background: var(--color-gray-lighten-2),
-					border-color: var(--color-gray-lighten-2),
-				),
-				active: (
 					background: var(--color-gray-lighten-1),
 					border-color: var(--color-gray-lighten-1),
 				),
+				active: (
+					background: var(--color-gray),
+					border-color: var(--color-gray),
+				),
 			),
 		),
 		secondary: (
@@ -51,8 +51,8 @@ $dark-vv-button: (
 				),
 			),
 		),
-		text: (
-			text-shadow: 0 1px 0 var(--color-gray-darken-5),
+		link: (
+			color: var(--color-brand-lighten-1),
 		),
 	),
 ) !default;

package/src/tools/_mixins.scss

@@ -414,7 +414,7 @@
 					close,
 					determinate,
 					indeterminate,
-					selected,
+					pressed,
 					current
 				),
 				$state
@@ -536,16 +536,16 @@
 								'#{$modifier}#{$alias}:#{$state}'
 							);
 						}
-					} @else if $state == 'selected' {
+					} @else if $state == 'pressed' {
 						$selectors: list.join(
 							$selectors,
-							'#{$modifier}#{$block-item}[aria-selected="true"]'
+							'#{$modifier}#{$block-item}[aria-pressed="true"]'
 						);
 
 						@if $alias {
 							$selectors: list.join(
 								$selectors,
-								'#{$modifier}#{$alias}[aria-selected="true"]'
+								'#{$modifier}#{$alias}[aria-pressed="true"]'
 							);
 						}
 					} @else if $state != 'current' {
@@ -578,6 +578,7 @@
 						$props: $props
 					);
 				}
+
 				@include wrap-with-where(
 					$selector: $selector,
 					$enabled: $zero-specificity
@@ -831,17 +832,17 @@
 
 // Wrap selector with :where()
 @mixin wrap-with-where($selector, $enabled: true) {
-	@if type-of($selector) == 'map' {
+	@if type-of($selector) == 'map' or type-of($selector) == 'list' {
 		$merged: '';
 		@each $element in $selector {
 			@if $enabled {
-				$merged: '#{$merged}, :where(#{$element})';
+				$merged: '#{$merged}, :where(#{unquote($element)})';
 			} @else {
-				$merged: '#{$merged}, #{$element}';
+				$merged: '#{$merged}, #{unquote($element)}';
 			}
 		}
 	} @else if $enabled {
-		$selector: ':where(#{$selector})';
+		$selector: ':where(#{unquote($selector)})';
 	}
 
 	#{$selector} {