@volverjs/style 0.1.11 → 0.1.12-beta.10

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

@@ -1,10 +1,10 @@
 $vv-accordion: (
 	--accordion-marker-size:
 		calc(var(--spacing-sm) + var(--leading-normal) * 1em),
-	--accordion-padding-top: var(--spacing-xs),
-	--accordion-padding-right: var(--spacing-xs),
-	--accordion-padding-bottom: var(--spacing-xs),
-	--accordion-padding-left: var(--spacing-xs),
+	--accordion-padding-top: var(--spacing-14),
+	--accordion-padding-right: var(--spacing-14),
+	--accordion-padding-bottom: var(--spacing-14),
+	--accordion-padding-left: var(--spacing-14),
 	overflow: hidden,
 	state: (
 		open: (
@@ -13,7 +13,7 @@ $vv-accordion: (
 					background-color: var(--color-surface-2),
 					pseudo: (
 						before: (
-							transform: rotate(0),
+							rotate: 0,
 						),
 					),
 				),
@@ -34,6 +34,7 @@ $vv-accordion: (
 			_alias: '> summary',
 			position: relative,
 			cursor: pointer,
+			user-select: none,
 			[padding-top]: var(--accordion-padding-top),
 			[padding-right]: var(--accordion-padding-right),
 			[padding-bottom]: var(--accordion-padding-bottom),
@@ -45,7 +46,6 @@ $vv-accordion: (
 			color: var(--color-word-2),
 			will-change: background-color,
 			transition: var(--transition-colors),
-			font-size: var(--text-sm),
 			border-radius: var(--rounded-lg),
 			-webkit-tap-highlight-color: transparent,
 			outline: none,
@@ -61,9 +61,9 @@ $vv-accordion: (
 					background-position: center,
 					background-size: 1em,
 					background-repeat: no-repeat,
-					will-change: transform,
+					will-change: rotate,
 					transition: var(--transition-transform),
-					transform: rotate(-90deg),
+					rotate: -90deg,
 				),
 				marker: (
 					display: none,
@@ -102,7 +102,7 @@ $vv-accordion: (
 						before: (
 							left: auto,
 							[right]: var(--accordion-padding-right),
-							transform: rotate(0def),
+							rotate: 0,
 						),
 					),
 				),
@@ -113,7 +113,7 @@ $vv-accordion: (
 						summary: (
 							pseudo: (
 								before: (
-									transform: rotate(-180deg),
+									rotate: -180deg,
 								),
 							),
 						),

package/src/settings/components/_vv-alert-group.scss

@@ -5,17 +5,24 @@ $vv-alert-group: (
 	flex-direction: column,
 	gap: var(--spacing-sm),
 	overflow: hidden,
+	pointer-events: none,
 	element: (
 		list: (
 			_alias: '> [role="group"]',
 			display: flex,
 			flex-direction: column,
 			gap: var(--spacing-xs),
+			state: (
+				empty: (
+					display: none,
+				),
+			),
 		),
 		item: (
 			_alias: '> [role="group"] > *',
 			transition: var(--transition-all),
 			flex-shrink: 0,
+			pointer-events: auto,
 		),
 		not-first: (
 			_alias: '> [role="group"] > *:not(:first-child)',
@@ -58,10 +65,10 @@ $vv-alert-group: (
 			max-height: var(--h-full),
 		),
 		reverse: (
-			flex-flow: column-reverse,
+			flex-direction: column-reverse,
 			element: (
 				list: (
-					flex-flow: column-reverse,
+					flex-direction: column-reverse,
 				),
 			),
 		),
@@ -72,7 +79,7 @@ $vv-alert-group: (
 		top-middle: (
 			inset-block: 0 auto,
 			inset-inline: 50% auto,
-			transform: translateX(-50%),
+			translate: -50%,
 		),
 		top-end: (
 			inset-block: 0 auto,
@@ -80,18 +87,18 @@ $vv-alert-group: (
 		),
 		center-start: (
 			inset-block: 50% auto,
-			transform: translateY(-50%),
+			translate: 0 -50%,
 			inset-inline: 0 auto,
 		),
 		center-middle: (
 			inset-block: 50% auto,
 			inset-inline: 50% auto,
-			transform: translate(-50%, -50%),
+			translate: -50% -50%,
 		),
 		center-end: (
 			inset-block: 50% auto,
 			inset-inline: auto 0,
-			transform: translateY(-50%),
+			translate: 0 -50%,
 		),
 		bottom-start: (
 			inset-block: auto 0,
@@ -100,7 +107,7 @@ $vv-alert-group: (
 		bottom-middle: (
 			inset-block: auto 0,
 			inset-inline: 50% auto,
-			transform: translateX(-50%),
+			translate: -50%,
 		),
 		bottom-end: (
 			inset-block: auto 0,
@@ -119,9 +126,8 @@ $vv-alert-group: (
 					z-index: var(--z-notification-alert),
 				),
 				not-first: (
-					[transform]:
-						translateY(calc(-100% * (var(--alert-counter, 1) - 1)))
-						scale(calc(1 - 0.05 * (var(--alert-counter, 1) - 1))),
+					[translate]: 0 calc(-100% * (var(--alert-counter, 1) - 1)),
+					[scale]: calc(1 - 0.05 * (var(--alert-counter, 1) - 1)),
 					[z-index]:
 						calc(
 							var(--z-notification-alert) -
@@ -137,7 +143,8 @@ $vv-alert-group: (
 				hover: (
 					element: (
 						not-first: (
-							transform: none,
+							translate: 0,
+							scale: 1,
 							filter: none,
 						),
 					),
@@ -147,22 +154,18 @@ $vv-alert-group: (
 				reverse: (
 					element: (
 						not-first: (
-							[transform]:
-								translateY(
-									calc(100% * (var(--alert-counter, 1) - 1))
-								)
-								scale(
-									calc(
-										1 - 0.05 * (var(--alert-counter, 1) - 1)
-									)
-								),
+							[translate]: 0
+								calc(100% * (var(--alert-counter, 1) - 1)),
+							[scale]:
+								calc(1 - 0.05 * (var(--alert-counter, 1) - 1)),
 						),
 					),
 					state: (
 						hover: (
 							element: (
 								not-first: (
-									transform: none,
+									translate: 0,
+									scale: 1,
 								),
 							),
 						),

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

@@ -12,7 +12,6 @@ $vv-alert: (
 	gap: var(--spacing-sm),
 	min-width: 0,
 	overflow: hidden,
-	font-size: var(--text-sm),
 	padding: var(--spacing-sm),
 	element: (
 		header: (
@@ -23,6 +22,7 @@ $vv-alert: (
 			color: var(--color-word),
 			overflow: hidden,
 			text-overflow: ellipsis,
+			flex-shrink: 0,
 		),
 		title: (
 			min-width: 0,
@@ -133,10 +133,10 @@ $vv-alert: (
 			background-color: var(--color-surface-brand),
 			element: (
 				icon: (
-					color: var(--color-brand-darken-2),
+					color: var(--color-brand-darken-3),
 				),
 				header: (
-					color: var(--color-brand-darken-2),
+					color: var(--color-brand-darken-3),
 				),
 			),
 		),
@@ -152,73 +152,6 @@ $vv-alert: (
 				),
 			),
 		),
-		auto-close: (
-			element: (
-				close: (
-					background-color: var(--color-white),
-					border: var(--border) solid var(--color-white),
-					border-radius: 50%,
-					overflow: hidden,
-					opacity: var(--opacity-80),
-					background-image: none,
-					background-size: 70% auto,
-					inline-size: 1.1em,
-					block-size: 1.1em,
-					[animation]: fade-out var(--alert-duration) forwards,
-					pseudo: (
-						before: (
-							position: absolute,
-							top: 0,
-							width: 50%,
-							height: 100%,
-							transform-origin: 100% 50%,
-							background-color: var(--color-gray),
-							border-radius: 100% 0 0 100% / 50% 0 0 50%,
-							[animation]: spin var(--alert-duration) linear,
-						),
-						after: (
-							position: absolute,
-							top: 0,
-							width: 50%,
-							height: 100%,
-							background-color: var(--color-white),
-							border-radius: 100% 0 0 100% / 50% 0 0 50%,
-							[animation]: pie-masks var(--alert-duration)
-								steps(1, end),
-							opacity: var(--opacity-0),
-						),
-					),
-				),
-				close-mask: (
-					display: block,
-				),
-			),
-			state: (
-				hover: (
-					element: (
-						close-mask: (
-							opacity: var(--opacity-0),
-							animation: none,
-						),
-						close: (
-							border-radius: var(--rounded),
-							background-image: var(--bg-close),
-							animation: none,
-							pseudo: (
-								before: (
-									opacity: var(--opacity-0),
-									animation: none,
-								),
-								after: (
-									opacity: var(--opacity-0),
-									animation: none,
-								),
-							),
-						),
-					),
-				),
-			),
-		),
 		notification: (
 			padding: var(--spacing-0),
 			width: clamp(15dvw, 20rem, 80dvw),
@@ -241,7 +174,7 @@ $vv-alert: (
 				),
 				content: (
 					padding: var(--spacing-sm),
-					font-size: var(--text-xs),
+					font-size: var(--text-14),
 				),
 				footer: (
 					padding: 0 var(--spacing-sm) var(--spacing-sm)
@@ -282,18 +215,18 @@ $vv-alert: (
 					),
 				),
 				warning: (
-					border-color: var(--color-warning),
+					border-color: var(--color-warning-darken-5),
 					element: (
 						header: (
-							background-color: var(--color-warning),
+							background-color: var(--color-warning-darken-5),
 						),
 					),
 				),
 				info: (
-					border-color: var(--color-info),
+					border-color: var(--color-info-darken-5),
 					element: (
 						header: (
-							background-color: var(--color-info),
+							background-color: var(--color-info-darken-5),
 						),
 					),
 				),
@@ -330,6 +263,73 @@ $vv-alert: (
 				),
 			),
 		),
+		auto-close: (
+			element: (
+				close: (
+					background-color: var(--color-white),
+					border: var(--border) solid var(--color-white),
+					border-radius: 50%,
+					overflow: hidden,
+					opacity: var(--opacity-80),
+					background-image: none,
+					background-size: 70% auto,
+					inline-size: 1.1em,
+					block-size: 1.1em,
+					[animation]: fade-out var(--alert-duration) forwards,
+					pseudo: (
+						before: (
+							position: absolute,
+							top: 0,
+							width: 50%,
+							height: 100%,
+							transform-origin: 100% 50%,
+							background-color: var(--color-gray),
+							border-radius: 100% 0 0 100% / 50% 0 0 50%,
+							[animation]: spin var(--alert-duration) linear,
+						),
+						after: (
+							position: absolute,
+							top: 0,
+							width: 50%,
+							height: 100%,
+							background-color: var(--color-white),
+							border-radius: 100% 0 0 100% / 50% 0 0 50%,
+							[animation]: pie-masks var(--alert-duration)
+								steps(1, end),
+							opacity: var(--opacity-0),
+						),
+					),
+				),
+				close-mask: (
+					display: block,
+				),
+			),
+			state: (
+				hover: (
+					element: (
+						close-mask: (
+							opacity: var(--opacity-0),
+							animation: none,
+						),
+						close: (
+							border-radius: var(--rounded),
+							background-image: var(--bg-close),
+							animation: none,
+							pseudo: (
+								before: (
+									opacity: var(--opacity-0),
+									animation: none,
+								),
+								after: (
+									opacity: var(--opacity-0),
+									animation: none,
+								),
+							),
+						),
+					),
+				),
+			),
+		),
 	),
 	transition: (
 		fade-inline-end: (
@@ -338,11 +338,11 @@ $vv-alert: (
 			),
 			enter-from: (
 				opacity: var(--opacity-0),
-				transform: translateX(100%),
+				translate: 100%,
 			),
 			leave-to: (
 				opacity: var(--opacity-0),
-				transform: translateX(100%),
+				translate: 100%,
 			),
 		),
 		fade-inline-start: (
@@ -351,11 +351,11 @@ $vv-alert: (
 			),
 			enter-from: (
 				opacity: var(--opacity-0),
-				transform: translateX(-100%),
+				translate: -100%,
 			),
 			leave-to: (
 				opacity: var(--opacity-0),
-				transform: translateX(-100%),
+				translate: -100%,
 			),
 		),
 		fade-block-top: (
@@ -364,11 +364,11 @@ $vv-alert: (
 			),
 			enter-from: (
 				opacity: var(--opacity-0),
-				transform: translateY(-100%),
+				translate: 0 -100%,
 			),
 			leave-to: (
 				opacity: var(--opacity-0),
-				transform: translateY(-100%),
+				translate: 0 -100%,
 			),
 		),
 		fade-block-bottom: (
@@ -377,11 +377,11 @@ $vv-alert: (
 			),
 			enter-from: (
 				opacity: var(--opacity-0),
-				transform: translateY(100%),
+				translate: 0 100%,
 			),
 			leave-to: (
 				opacity: var(--opacity-0),
-				transform: translateY(100%),
+				translate: 0 100%,
 			),
 		),
 		fade: (

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

@@ -1,11 +1,7 @@
 $vv-avatar: (
-	--avatar-background-color: var(--color-brand),
-	--avatar-color: var(--color-white),
-	--avatar-border-radius: var(--rounded),
-	--avatar-border-color: var(--color-brand-darken-3),
-	[background-color]: var(--avatar-background-color),
-	[border-radius]: var(--avatar-border-radius),
-	[color]: var(--avatar-color),
+	background-color: var(--color-brand),
+	border-radius: var(--rounded),
+	color: var(--color-white),
 	display: inline-flex,
 	position: relative,
 	justify-content: center,
@@ -30,7 +26,7 @@ $vv-avatar: (
 			position: absolute,
 			top: 0,
 			right: 0,
-			transform: translate(50%, -33.3%),
+			translate: 50% -33.3%,
 			box-shadow: var(--shadow-sm),
 		),
 		badge-bottom: (
@@ -38,7 +34,7 @@ $vv-avatar: (
 			position: absolute,
 			bottom: 0,
 			right: 0,
-			transform: translate(50%, 33.3%),
+			translate: 50% 33.3%,
 			box-shadow: var(--shadow-sm),
 		),
 		image: (
@@ -46,19 +42,29 @@ $vv-avatar: (
 			width: 100%,
 			height: 100%,
 			object-fit: inherit,
-			[border-radius]: var(--avatar-border-radius),
+			border-radius: var(--rounded),
 			overflow: hidden,
 		),
 	),
 	modifier: (
 		rounded: (
-			--avatar-border-radius: var(--rounded-full),
+			border-radius: var(--rounded-full),
+			element: (
+				image: (
+					border-radius: var(--rounded-full),
+				),
+			),
 		),
 		square: (
-			--avatar-border-radius: var(--rounded-none),
+			border-radius: var(--rounded-none),
+			element: (
+				image: (
+					border-radius: var(--rounded-none),
+				),
+			),
 		),
 		bordered: (
-			[border-color]: var(--avatar-border-color),
+			border-color: var(--color-brand-darken-3),
 			border-width: var(--border),
 			border-style: solid,
 		),
@@ -73,79 +79,71 @@ $vv-avatar: (
 			height: var(--spacing-40),
 		),
 		transparent: (
-			--avatar-background-color: var(--color-transparent),
+			background-color: var(--color-transparent),
 		),
 		surface: (
-			--avatar-background-color: var(--color-surface-1),
-			--avatar-border-color: var(--color-surface-3),
-			--avatar-color: var(--color-word-2),
+			background-color: var(--color-surface-1),
+			border-color: var(--color-surface-3),
+			color: var(--color-word-2),
 		),
 		danger: (
-			--avatar-background-color: var(--color-danger),
-			--avatar-border-color: var(--color-danger-darken-3),
+			background-color: var(--color-danger),
+			border-color: var(--color-danger-darken-3),
 		),
 		success: (
-			--avatar-background-color: var(--color-success),
-			--avatar-border-color: var(--color-success-darken-3),
+			background-color: var(--color-success),
+			border-color: var(--color-success-darken-3),
 		),
 		warning: (
-			--avatar-background-color: var(--color-warning),
-			--avatar-border-color: var(--color-warning-darken-3),
+			background-color: var(--color-warning-darken-5),
+			border-color: var(--color-warning-darken-3),
 		),
 		info: (
-			--avatar-background-color: var(--color-info),
-			--avatar-border-color: var(--color-info-darken-3),
+			background-color: var(--color-info-darken-5),
+			border-color: var(--color-info-darken-3),
 		),
 		accent: (
-			--avatar-background-color: var(--color-accent),
-			--avatar-border-color: var(--color-accent-darken-3),
+			background-color: var(--color-accent),
+			border-color: var(--color-accent-darken-3),
 		),
 		gray: (
-			--avatar-background-color: var(--color-gray),
-			--avatar-border-color: var(--color-gray-darken-3),
+			background-color: var(--color-gray-darken-1),
+			border-color: var(--color-gray-darken-3),
 		),
 		ring: (
-			--avatar-color: var(--color-brand),
-			--avatar-background-color: var(--color-surface-brand),
-			--avatar-border-color: var(--color-brand),
-			[border-color]: var(--avatar-border-color),
+			color: var(--color-brand-darken-3),
+			background-color: var(--color-surface-brand),
+			border-color: currentcolor,
 			border-width: var(--border),
 			border-style: solid,
 			modifier: (
 				surface: (
-					--avatar-background-color: var(--color-surface),
-					--avatar-border-color: var(--color-surface-5),
-					--avatar-color: var(--color-word-2),
+					background-color: var(--color-surface),
+					color: var(--color-word-2),
 				),
 				danger: (
-					--avatar-background-color: var(--color-surface-danger),
-					--avatar-border-color: var(--color-danger),
-					--avatar-color: var(--color-danger),
+					background-color: var(--color-surface-danger),
+					color: var(--color-danger),
 				),
 				success: (
-					--avatar-background-color: var(--color-surface-success),
-					--avatar-border-color: var(--color-success),
-					--avatar-color: var(--color-success),
+					background-color: var(--color-surface-success),
+					color: var(--color-success-darken-3),
 				),
 				warning: (
-					--avatar-background-color: var(--color-surface-warning),
-					--avatar-border-color: var(--color-warning),
-					--avatar-color: var(--color-warning),
+					background-color: var(--color-surface-warning),
+					color: var(--color-warning-darken-5),
 				),
 				info: (
-					--avatar-background-color: var(--color-surface-info),
-					--avatar-border-color: var(--color-info),
-					--avatar-color: var(--color-info),
+					background-color: var(--color-surface-info),
+					color: var(--color-info-darken-5),
 				),
 				accent: (
-					--avatar-background-color: var(--color-surface-accent),
-					--avatar-border-color: var(--color-accent),
-					--avatar-color: var(--color-accent),
+					background-color: var(--color-surface-accent),
+					color: var(--color-accent),
 				),
 				gray: (
-					--avatar-background-color: var(--color-surface-4),
-					--avatar-border-color: var(--color-gray),
-					--avatar-color: var(--color-word-2),
+					background-color: var(--color-surface-4),
+					color: var(--color-word-2),
 				),
 			),
 		),