@volverjs/style 0.1.12-beta.6 → 0.1.12-beta.7

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

@@ -0,0 +1,474 @@
+$vv-input-file: (
+	display: var(--input-display),
+	flex: var(--input-flex),
+	flex-direction: var(--input-flex-direction),
+	margin-bottom: var(--input-gap),
+	font-size: var(--input-font-size),
+	line-height: var(--input-line-height),
+	min-width: var(--input-min-width),
+	element: (
+		label: (
+			_alias: '> label',
+			display: var(--input-label-display),
+			font-size: var(--input-label-font-size),
+			font-weight: var(--input-label-font-weight),
+			color: var(--input-label-color),
+			margin: 0 0 var(--input-label-gap) 0,
+			white-space: var(--input-label-white-space),
+			text-overflow: var(--input-label-text-overflow),
+			overflow: var(--input-label-overflow),
+			max-width: var(--input-label-max-width),
+		),
+		wrapper: (
+			position: relative,
+			display: flex,
+			align-items: center,
+			flex: 1,
+			overflow: hidden,
+			background-color: var(--input-background-color),
+			will-change: background-color,
+			transition: var(--transition-colors),
+			pseudo: (
+				before: (
+					position: absolute,
+					height: var(--spacing-1),
+					inset: auto 0 0 0,
+					background: var(--color-word-5),
+				),
+				after: (
+					position: absolute,
+					height: var(--spacing-2),
+					inset: auto 0 0 0,
+					background: var(--color-brand),
+					scale: 0 1,
+					transform-origin: left,
+					will-change: transform,
+					transition: var(--transition-transform),
+				),
+			),
+			state: (
+				hover: (
+					background-color: var(--input-background-color-hover),
+				),
+				focus-within: (
+					background-color: var(--input-background-color-focus),
+					pseudo: (
+						after: (
+							scale: 1,
+						),
+					),
+				),
+			),
+		),
+		inner: (
+			position: relative,
+			display: flex,
+			flex: 1,
+			min-width: 0,
+		),
+		input: (
+			_alias: 'input[type="file"]',
+			flex: 1,
+			white-space: nowrap,
+			cursor: pointer,
+			color: var(--input-color),
+			[padding-block]: var(--input-spacing-top) 0,
+			[padding-inline]: var(--input-spacing-left)
+				var(--input-spacing-right),
+			min-width: 0,
+			min-height: var(--input-min-height),
+			text-overflow: var(--input-text-overflow),
+			pseudo: (
+				file-selector-button: (
+					appearance: none,
+					border: none,
+					background: transparent,
+					cursor: pointer,
+					text-decoration: underline,
+					color: var(--input-color),
+				),
+			),
+			state: (
+				disabled: (
+					cursor: not-allowed,
+				),
+				readonly: (
+					cursor: text,
+					user-select: text,
+					pointer-events: none,
+					pseudo: (
+						file-selector-button: (
+							opacity: var(--opacity-50),
+						),
+					),
+				),
+			),
+		),
+		input-before: (
+			display: flex,
+			padding-left: var(--input-spacing-left),
+		),
+		input-after: (
+			display: flex,
+			padding-right: var(--input-spacing-right),
+		),
+		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),
+			pointer-events: var(--input-icon-pointer-events),
+		),
+		icon-after: (
+			_alias: 'input + :where(svg, [data-icon])',
+			position: var(--input-icon-position),
+			right: 0,
+			left: auto,
+		),
+		hint: (
+			_alias: '> small',
+			display: var(--input-hint-display),
+			font-size: var(--input-hint-font-size),
+			color: var(--input-hint-color),
+			padding-top: var(--input-hint-gap),
+			padding-inline: var(--spacing-xs),
+			white-space: var(--input-hint-white-space),
+			text-overflow: var(--input-hint-text-overflow),
+			overflow: var(--input-hint-overflow),
+		),
+		drop-area: (
+			position: relative,
+			background-color: var(--input-background-color),
+			color: var(--input-hint-color),
+			min-height: var(--spacing-100),
+			padding: var(--spacing-16),
+			display: flex,
+			text-align: center,
+			align-items: center,
+			justify-content: center,
+			margin-bottom: var(--input-label-gap),
+			cursor: pointer,
+			transition: var(--transition-all),
+			overflow: hidden,
+			text-overflow: ellipsis,
+			pseudo: (
+				after: (
+					position: absolute,
+					inset: 0,
+					opacity: var(--opacity-100),
+					border-width: var(--border-2),
+					border-style: dashed,
+					border-color: var(--color-word-5),
+					transition: var(--transition-all),
+				),
+			),
+			state: (
+				hover: (
+					background-color: var(--color-surface-2),
+					color: var(--input-color),
+				),
+			),
+		),
+		preview: (
+			position: absolute,
+			display: flex,
+			inset: var(--spacing-4),
+			font-size: var(--text-xl),
+			align-items: center,
+			justify-content: center,
+			object-fit: contain,
+			object-position: center,
+			background: var(--bg-chessboard),
+			overflow: hidden,
+		),
+		progress: (
+			position: absolute,
+			width: 100%,
+			height: var(--border-2),
+			bottom: 0,
+			left: 0,
+			z-index: 1,
+			pseudo: (
+				-webkit-progress-bar: (
+						background-color: transparent,
+					),
+				-moz-progress-bar: (
+						background-color: var(--color-brand),
+						transition: var(--transition-all),
+					),
+				-webkit-progress-value: (
+						background-color: var(--color-brand),
+						transition: var(--transition-all),
+					),
+			),
+		),
+		list: (
+			display: flex,
+			flex-direction: column,
+			gap: var(--input-label-gap),
+			margin-top: var(--input-label-gap),
+			state: (
+				empty: (
+					display: none,
+				),
+			),
+		),
+		item: (
+			display: flex,
+			font-size: var(--input-label-font-size),
+			align-items: center,
+			gap: var(--spacing-8),
+			background-color: var(--input-background-color),
+			padding: var(--spacing-8),
+		),
+		item-name: (
+			white-space: nowrap,
+			text-overflow: ellipsis,
+			overflow: hidden,
+		),
+		item-info: (
+			font-size: smaller,
+			white-space: nowrap,
+			color: var(--color-word-5),
+			align-self: flex-end,
+		),
+		item-link: (
+			cursor: pointer,
+			text-decoration: underline,
+		),
+		item-icon: (
+			flex-shrink: 0,
+		),
+		item-remove: (
+			flex-shrink: 0,
+			background-image: var(--bg-close),
+			width: 1.4em,
+			height: 1.4em,
+			background-size: 0.8em,
+			background-repeat: no-repeat,
+			background-position: center,
+			border-radius: var(--rounded-full),
+			background-color: var(--color-surface-3),
+			margin-inline-start: auto,
+			cursor: pointer,
+			transition: var(--transition-colors),
+			state: (
+				hover: (
+					background-color: var(--color-surface-4),
+				),
+				active: (
+					background-color: var(--color-surface-5),
+				),
+				focus-visible: (
+					outline: var(--spacing-px) solid var(--color-gray-lighten-4),
+				),
+				disabled: (
+					cursor: not-allowed,
+					opacity: var(--opacity-50),
+				),
+			),
+		),
+	),
+	modifier: (
+		icon-before: (
+			--input-spacing-left: calc(var(--spacing-sm) * 2 + 1em),
+		),
+		icon-after: (
+			--input-spacing-right: calc(var(--spacing-sm) * 2 + 1em),
+			element: (
+				limit: (
+					margin-left: calc((var(--spacing-sm) + 1em) * -1),
+				),
+			),
+		),
+		with-progress: (
+			element: (
+				drop-area: (
+					cursor: not-allowed,
+					height: var(--spacing-2),
+					min-height: 0,
+					padding-block: 0,
+					color: var(--color-transparent),
+					background-color: var(--color-surface-3),
+					pseudo: (
+						after: (
+							opacity: var(--opacity-0),
+						),
+					),
+				),
+			),
+		),
+		valid: (
+			element: (
+				wrapper: (
+					pseudo: (
+						after: (
+							background: var(--input-valid-color),
+							scale: 1,
+						),
+					),
+				),
+				hint: (
+					color: var(--input-valid-color),
+				),
+				limit: (
+					color: var(--input-valid-color),
+				),
+				icon-after: (
+					color: var(--input-valid-color),
+				),
+				drop-area: (
+					pseudo: (
+						after: (
+							border-color: var(--input-valid-color),
+						),
+					),
+				),
+			),
+		),
+		invalid: (
+			element: (
+				wrapper: (
+					pseudo: (
+						after: (
+							background: var(--input-invalid-color),
+							scale: 1,
+						),
+					),
+				),
+				hint: (
+					color: var(--input-invalid-color),
+				),
+				limit: (
+					color: var(--input-invalid-color),
+				),
+				icon-after: (
+					color: var(--input-invalid-color),
+				),
+				drop-area: (
+					pseudo: (
+						after: (
+							border-color: var(--input-invalid-color),
+						),
+					),
+				),
+			),
+		),
+		loading: (
+			element: (
+				wrapper: (
+					pseudo: (
+						after: (
+							opacity: var(--opacity-100),
+							animation: var(--animation-indeterminate),
+						),
+					),
+				),
+				drop-area: (
+					pseudo: (
+						after: (
+							border-color: var(--color-brand),
+							animation: var(--animation-clippath),
+						),
+					),
+				),
+			),
+		),
+		hidden: (
+			element: (
+				wrapper: (
+					display: none,
+				),
+				drop-area: (
+					margin-bottom: var(--spacing-0),
+				),
+			),
+		),
+		dragging: (
+			element: (
+				drop-area: (
+					background-color: var(--color-surface-2),
+					color: var(--input-color),
+					pseudo: (
+						after: (
+							border-color: var(--color-brand),
+						),
+					),
+				),
+			),
+		),
+		square: (
+			element: (
+				drop-area: (
+					aspect-ratio: var(--aspect-square),
+				),
+			),
+		),
+		circle: (
+			element: (
+				drop-area: (
+					aspect-ratio: var(--aspect-square),
+					border-radius: var(--rounded-full),
+					pseudo: (
+						after: (
+							border-radius: var(--rounded-full),
+						),
+					),
+				),
+				preview: (
+					border-radius: var(--rounded-full),
+				),
+			),
+		),
+	),
+	state: (
+		disabled: (
+			opacity: var(--opacity-50),
+			element: (
+				wrapper: (
+					state: (
+						hover: (
+							background-color: var(--input-background-color),
+						),
+						focus-within: (
+							background-color: var(--input-background-color),
+						),
+					),
+				),
+				drop-area: (
+					cursor: not-allowed,
+					background-color: var(--input-background-color),
+					color: var(--input-hint-color),
+				),
+			),
+		),
+		readonly: (
+			element: (
+				wrapper: (
+					pseudo: (
+						before: (
+							opacity: var(--opacity-0),
+						),
+						after: (
+							opacity: var(--opacity-0),
+						),
+					),
+					state: (
+						hover: (
+							background-color: var(--input-background-color),
+						),
+						focus-within: (
+							background-color: var(--input-background-color),
+						),
+					),
+				),
+				drop-area: (
+					display: none,
+				),
+			),
+		),
+	),
+) !default;

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

@@ -11,6 +11,7 @@ $vv-input-text: (
 			_alias: '> label',
 			display: var(--input-label-display),
 			font-size: var(--input-label-font-size),
+			font-weight: var(--input-label-font-weight),
 			color: var(--input-label-color),
 			margin: 0 0 var(--input-label-gap) 0,
 			white-space: var(--input-label-white-space),

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

@@ -35,7 +35,7 @@ $vv-nav: (
 				),
 			),
 		),
-		divider: (
+		separator: (
 			_alias: 'li[role="separator"]',
 			display: block,
 			margin-block: var(--spacing-16),
@@ -84,7 +84,7 @@ $vv-nav: (
 						),
 					),
 				),
-				divider: (
+				separator: (
 					margin-block: var(--spacing-8),
 				),
 			),
@@ -135,6 +135,7 @@ $vv-nav: (
 				),
 				item-label: (
 					display: block,
+					width: 100%,
 					text-align: center,
 				),
 			),

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

@@ -17,9 +17,11 @@ $vv-progress: (
 			),
 		-moz-progress-bar: (
 				background-color: var(--color-brand),
+				transition: var(--transition-all),
 			),
 		-webkit-progress-value: (
 				background-color: var(--color-brand),
+				transition: var(--transition-all),
 			),
 	),
 	state: (

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

@@ -12,6 +12,7 @@ $vv-select: (
 			_alias: '> label',
 			display: var(--input-label-display),
 			font-size: var(--input-label-font-size),
+			font-weight: var(--input-label-font-weight),
 			color: var(--input-label-color),
 			margin: 0 0 var(--input-label-gap) 0,
 			white-space: var(--input-label-white-space),
@@ -72,6 +73,7 @@ $vv-select: (
 			display: flex,
 			flex: 1,
 			width: 100%,
+			min-width: 0,
 		),
 		value: (
 			text-overflow: var(--input-text-overflow),

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

@@ -7,6 +7,7 @@ $vv-text: (
 		headline: (
 			font-weight: var(--font-semibold),
 			line-height: var(--leading-tight),
+			letter-spacing: var(--tracking-tight),
 			margin-top: var(--spacing-24),
 			margin-bottom: var(--spacing-16),
 		),

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

@@ -11,6 +11,7 @@ $vv-textarea: (
 			_alias: '> label',
 			display: var(--input-label-display),
 			font-size: var(--input-label-font-size),
+			font-weight: var(--input-label-font-weight),
 			color: var(--input-label-color),
 			margin: 0 0 var(--input-label-gap) 0,
 			white-space: var(--input-label-white-space),

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

@@ -6,6 +6,8 @@ $dark-background-image: (
 	none: none,
 	chevron:
 		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(#{hex-to-rgb($dark-color-word)})' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"),
+	chessboard:
+		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' width='200' height='400'%3E%3Cdefs%3E%3Cpattern id='grid' width='20' height='20' patternUnits='userSpaceOnUse'%3E%3Crect fill='white' x='0' y='0' width='10' height='10' opacity='0.1'/%3E%3Crect fill='black' x='10' y='0' width='10' height='10'/%3E%3Crect fill='white' x='10' y='10' width='10' height='10' opacity='0.1'/%3E%3Crect fill='black' x='0' y='10' width='10' height='10'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23grid)' x='0' y='0' width='100%25' height='100%25'/%3E%3C/svg%3E"),
 	grid:
 		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(51 65 85 / 0.25)'%3E%3Cpath d='M0 .5H31.5V32'/%3E%3C/svg%3E"),
 	check:

package/src/tools/_mixins.scss

@@ -428,6 +428,7 @@
 					disabled,
 					checked,
 					checked-within,
+					multiple,
 					selected,
 					readonly,
 					empty,
@@ -514,7 +515,14 @@
 								'#{$modifier}#{$alias}:not(:has(*:placeholder-shown))'
 							);
 						}
-					} @else if $state == 'disabled' or $state == 'readonly' {
+					} @else if
+						$state ==
+						'disabled' or
+						$state ==
+						'readonly' or
+						$state ==
+						'multiple'
+					{
 						$selectors: list.join(
 							$selectors,
 							'#{$modifier}#{$block-item}[#{$state}]'
@@ -844,6 +852,8 @@
 										datetime-edit,
 										datetime-edit-fields-wrapper,
 										datetime-edit-day-field,
+										backdrop,
+										file-selector-button,
 										-webkit-progress-bar,
 										-webkit-progress-value,
 										-webkit-inner-element,

package/src/utilities/backgrounds.scss

@@ -53,6 +53,7 @@
 	$map: $background-image,
 	$class: bg,
 	$attribute: background-image,
+	$prop: bg,
 	$zero-specificity: $zero-specificity-for-utilities
 );
 

package/src/utilities/typography.scss

@@ -195,6 +195,16 @@
 	@extend %text-clip;
 }
 
+%text-balance {
+	text-wrap: balance;
+}
+@include wrap-with-where(
+	$selector: '.text-balance',
+	$enabled: $zero-specificity-for-utilities
+) {
+	@extend %text-balance;
+}
+
 // word break
 %break-normal {
 	overflow-wrap: normal;