@volverjs/style 0.1.12-beta.1 → 0.1.12-beta.11

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

@@ -0,0 +1,479 @@
+$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-inline]: var(--input-spacing-left)
+				var(--input-spacing-right),
+			min-width: 0,
+			min-height: var(--input-min-height),
+			display: flex,
+			align-items: center,
+			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),
+					min-height: var(--input-min-height),
+				),
+			),
+			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),
+			flex-shrink: 0,
+		),
+		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: (
+			position: relative,
+			overflow: hidden,
+			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),
@@ -149,6 +150,7 @@ $vv-input-text: (
 			height: var(--input-min-height),
 			margin: var(--input-icon-margin),
 			pointer-events: var(--input-icon-pointer-events),
+			flex-shrink: 0,
 		),
 		icon-after: (
 			_alias: 'input + :where(svg, [data-icon])',

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

@@ -18,12 +18,12 @@ $vv-nav: (
 			[padding]: var(--nav-item-padding),
 		),
 		item-label: (
-			_alias: 'li > a',
+			_alias: 'li > :is(a, button)',
 			display: flex,
 			align-items: center,
 			will-change: background-color color,
 			transition: var(--transition-all),
-			color: var(--color-word-3),
+			color: var(--color-word-2),
 			cursor: pointer,
 			[padding]: var(--nav-item-padding),
 			state: (
@@ -35,7 +35,7 @@ $vv-nav: (
 				),
 			),
 		),
-		divider: (
+		separator: (
 			_alias: 'li[role="separator"]',
 			display: block,
 			margin-block: var(--spacing-16),
@@ -50,15 +50,15 @@ $vv-nav: (
 				item-label: (
 					border-radius: var(--rounded-md),
 					state: (
-						hover: (
-							background-color: var(--color-surface-2),
-						),
 						active: (
 							background-color: var(--color-surface-3),
 						),
-						current: (
+						hover: (
 							background-color: var(--color-surface-2),
 						),
+						current: (
+							background-color: var(--color-surface-1),
+						),
 					),
 				),
 			),
@@ -84,7 +84,7 @@ $vv-nav: (
 						),
 					),
 				),
-				divider: (
+				separator: (
 					margin-block: var(--spacing-8),
 				),
 			),
@@ -116,7 +116,7 @@ $vv-nav: (
 						),
 						current: (
 							color: var(--color-brand),
-							border-color: var(--color-brand),
+							border-color: currentcolor,
 							background-color:
 								hsla(
 									var(--color-brand-hue)
@@ -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-radio.scss

@@ -41,7 +41,7 @@ $vv-radio: (
 			_alias: "> input[type='radio']",
 			border-width: var(--spacing-2),
 			border-style: solid,
-			border-color: var(--input-color),
+			border-color: currentcolor,
 			min-width: var(--spacing-20),
 			height: var(--spacing-20),
 			border-radius: 50%,
@@ -54,7 +54,7 @@ $vv-radio: (
 					position: absolute,
 					width: 70%,
 					height: 70%,
-					background-color: var(--input-color),
+					background-color: currentcolor,
 					inset: 50% 50%,
 					border-radius: 50%,
 					translate: -50% -50%,

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),
@@ -130,6 +132,7 @@ $vv-select: (
 			height: var(--input-min-height),
 			margin: var(--input-icon-margin),
 			pointer-events: var(--input-icon-pointer-events),
+			flex-shrink: 0,
 		),
 		icon-after: (
 			_alias: 'select + :where(svg, [data-icon])',

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

@@ -29,6 +29,10 @@ $vv-table: (
 				),
 			),
 		),
+		tfoot-tr: (
+			_alias: 'tfoot > tr',
+			border-width: 1px 0 0 0,
+		),
 		th: (
 			_alias: 'th',
 			font-weight: var(--font-semibold),
@@ -48,7 +52,21 @@ $vv-table: (
 	modifier: (
 		inline-spacing: (
 			--table-cell-padding: var(--spacing-md),
-			border-width: 0,
+		),
+		bordered: (
+			--table-cell-padding: var(--spacing-md),
+			element: (
+				th: (
+					border-width: 1px,
+					border-style: solid,
+					border-color: var(--color-surface-5),
+				),
+				td: (
+					border-width: 1px,
+					border-style: solid,
+					border-color: var(--color-surface-5),
+				),
+			),
 		),
 	),
 ) !default;

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

@@ -6,6 +6,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),
@@ -115,6 +116,7 @@ $vv-textarea: (
 			height: var(--input-min-height),
 			margin: var(--input-icon-margin),
 			pointer-events: var(--input-icon-pointer-events),
+			flex-shrink: 0,
 		),
 		icon-after: (
 			_alias: 'textarea + :where(svg, [data-icon])',

package/src/themes/dark/components/_vv-avatar.scss

@@ -0,0 +1,22 @@
+@use 'sass:map';
+@use '../context' as *;
+
+$component-name: map.get($components-names, vv-avatar);
+$component-map: $dark-vv-avatar;
+
+@mixin theme-dark-vv-avatar {
+	@include spread-map-into-props(
+		$map: $component-map,
+		$prefix: $component-name
+	);
+}
+
+:where(:host, :root, .theme):not(.theme--light) {
+	@media (prefers-color-scheme: dark) {
+		@include theme-dark-vv-avatar;
+	}
+}
+
+:where(.theme.theme--dark) {
+	@include theme-dark-vv-avatar;
+}

package/src/themes/dark/components/_vv-badge.scss

@@ -0,0 +1,22 @@
+@use 'sass:map';
+@use '../context' as *;
+
+$component-name: map.get($components-names, vv-badge);
+$component-map: $dark-vv-badge;
+
+@mixin theme-dark-vv-badge {
+	@include spread-map-into-props(
+		$map: $component-map,
+		$prefix: $component-name
+	);
+}
+
+:where(:host, :root, .theme):not(.theme--light) {
+	@media (prefers-color-scheme: dark) {
+		@include theme-dark-vv-badge;
+	}
+}
+
+:where(.theme.theme--dark) {
+	@include theme-dark-vv-badge;
+}