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

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,
@@ -18,6 +14,7 @@ $vv-avatar: (
 	background-size: contain,
 	background-repeat: no-repeat,
 	object-fit: contain,
+	flex-shrink: 0,
 	state: (
 		focus: (
 			outline: var(--spacing-px) solid var(--color-brand),
@@ -46,19 +43,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 +80,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-2),
+			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),
 				),
 			),
 		),

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

@@ -1,13 +1,10 @@
 $vv-badge: (
 	--badge-font-size: 0.7rem,
-	--badge-color: var(--color-white),
-	--badge-background-color: var(--color-brand),
-	--badge-border-width: 0,
 	[font-size]: var(--badge-font-size),
-	[background-color]: var(--badge-background-color),
-	[color]: var(--badge-color),
-	[border-width]: var(--badge-border-width),
-	[border-color]: var(--badge-background-color),
+	border-width: 0,
+	background-color: var(--color-brand),
+	border-color: var(--color-brand),
+	color: var(--color-white),
 	border-style: solid,
 	border-radius: 0.5em,
 	min-height: 2em,
@@ -24,6 +21,7 @@ $vv-badge: (
 	line-height: var(--leading-none),
 	overflow: hidden,
 	flex-shrink: 0,
+	vertical-align: middle,
 	state: (
 		empty: (
 			font-size: inherit,
@@ -36,7 +34,7 @@ $vv-badge: (
 		),
 		focus-within: (
 			outline-offset: var(--spacing-4),
-			[outline]: var(--spacing-px) solid var(--badge-background-color),
+			outline: var(--spacing-px) solid currentcolor,
 		),
 	),
 	element: (
@@ -67,48 +65,89 @@ $vv-badge: (
 		rounded: (
 			border-radius: 1em,
 		),
-		outline: (
-			--badge-border-width: var(--border),
-			[background-color]: transparent,
-			[color]: var(--badge-background-color),
-		),
-		ghost: (
-			[background-color]: transparent,
-			[color]: var(--badge-background-color),
-		),
 		white: (
-			--badge-background-color:
+			background-color:
 				hsla(
 					var(--color-white-hue) var(--color-white-saturation)
 						var(--color-white-lightness) / 80%
 				),
-			--badge-color: var(--color-black),
+			color: var(--color-black),
 		),
 		black: (
-			--badge-background-color:
+			background-color:
 				hsla(
 					var(--color-black-hue) var(--color-black-saturation)
 						var(--color-black-lightness) / 80%
 				),
-			--badge-color: var(--color-white),
+			color: var(--color-white),
 		),
 		danger: (
-			--badge-background-color: var(--color-danger),
+			background-color: var(--color-danger),
 		),
 		success: (
-			--badge-background-color: var(--color-success),
+			background-color: var(--color-success),
 		),
 		warning: (
-			--badge-background-color: var(--color-warning),
+			background-color: var(--color-warning-darken-5),
 		),
 		info: (
-			--badge-background-color: var(--color-info),
+			background-color: var(--color-info-darken-5),
 		),
 		accent: (
-			--badge-background-color: var(--color-accent),
+			background-color: var(--color-accent),
 		),
 		gray: (
-			--badge-background-color: var(--color-gray),
+			background-color: var(--color-gray-darken-1),
+		),
+		outline: (
+			border-width: var(--border),
+			color: var(--color-brand),
+			border-color: currentcolor,
+			background-color: transparent,
+			modifier: (
+				danger: (
+					color: var(--color-danger),
+				),
+				success: (
+					color: var(--color-success),
+				),
+				warning: (
+					color: var(--color-warning-darken-5),
+				),
+				info: (
+					color: var(--color-info-darken-5),
+				),
+				accent: (
+					color: var(--color-accent),
+				),
+				gray: (
+					color: var(--color-gray-darken-1),
+				),
+			),
+		),
+		ghost: (
+			background-color: transparent,
+			color: var(--color-brand),
+			modifier: (
+				danger: (
+					color: var(--color-danger),
+				),
+				success: (
+					color: var(--color-success),
+				),
+				warning: (
+					color: var(--color-warning-darken-5),
+				),
+				info: (
+					color: var(--color-info-darken-5),
+				),
+				accent: (
+					color: var(--color-accent),
+				),
+				gray: (
+					color: var(--color-gray-darken-1),
+				),
+			),
 		),
 	),
 ) !default;

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

@@ -142,12 +142,15 @@ $vv-button: (
 				),
 				hover: (
 					background: var(--color-gray-lighten-5),
+					color: var(--color-word-2),
 				),
 				active: (
 					background: var(--color-gray-lighten-4),
+					color: var(--color-word-2),
 				),
 				pressed: (
 					background: var(--color-gray-lighten-4),
+					color: var(--color-word-2),
 				),
 			),
 		),
@@ -156,7 +159,7 @@ $vv-button: (
 			border-width: var(--border-0),
 			padding: 0,
 			color: var(--color-brand-darken-1),
-			font-weight: var(--font-normal),
+			font-weight: inherit,
 			text-shadow: none,
 			state: (
 				focus-visible: (
@@ -244,11 +247,12 @@ $vv-button: (
 				),
 				active: (
 					background: var(--color-surface-5),
+					color: var(--color-word),
 				),
 				pressed: (
 					color: var(--color-white),
-					background: var(--color-gray),
-					border-color: var(--color-gray),
+					background: var(--color-gray-darken-1),
+					border-color: var(--color-gray-darken-1),
 				),
 			),
 			element: (
@@ -282,11 +286,12 @@ $vv-button: (
 				active: (
 					background: var(--color-surface-5),
 					border-color: var(--color-surface-5),
+					color: var(--color-word),
 				),
 				pressed: (
 					color: var(--color-white),
-					background: var(--color-gray),
-					border-color: var(--color-gray),
+					background: var(--color-gray-darken-1),
+					border-color: var(--color-gray-darken-1),
 				),
 			),
 			element: (

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

@@ -8,6 +8,7 @@ $vv-checkbox-group: (
 			_alias: '> legend',
 			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-dialog.scss

@@ -18,6 +18,9 @@ $vv-dialog: (
 		close: (
 			display: none,
 		),
+		open: (
+			overflow: hidden,
+		),
 	),
 	element: (
 		wrapper: (

package/src/settings/components/_vv-dropdown-option.scss

@@ -13,7 +13,7 @@ $vv-dropdown-option: (
 		),
 		focus-visible: (
 			background-color: var(--color-surface-success),
-			color: var(--color-success),
+			color: var(--color-success-darken-1),
 			element: (
 				hint: (
 					opacity: var(--opacity-100),
@@ -23,7 +23,7 @@ $vv-dropdown-option: (
 		selected: (
 			font-weight: var(--font-bold),
 			background-color: var(--color-surface-brand),
-			color: var(--color-brand),
+			color: var(--color-brand-darken-1),
 		),
 	),
 	modifier: (

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

@@ -9,26 +9,42 @@ $vv-dropdown: (
 	width: 'max-content',
 	element: (
 		list: (
-			_alias: 'ul',
+			_alias: 'div:is([role="menu"],[role="list-box"])',
 			[border-radius]: var(--dropdown-border-radius),
 			background-color: var(--color-surface-1),
 			overflow: auto,
+			pseudo: (
+				-webkit-scrollbar: (
+						width: var(--spacing-2),
+						height: var(--spacing-2),
+					),
+				-webkit-scrollbar-thumb: (
+						background-color: var(--color-brand-lighten-4),
+						border: var(--spacing-0) solid transparent,
+						background-clip: content-box,
+					),
+				-webkit-scrollbar-track: (
+						background-color: transparent,
+						padding: 0,
+					),
+			),
 		),
 		item: (
-			_alias: 'li',
+			_alias: ':is([role="option"],[role="presentation"])',
 		),
 		item-first: (
-			_alias: 'li:first-child',
+			_alias: ':is([role="option"],[role="presentation"]):first-child',
 			[border-top-left-radius]: var(--dropdown-border-radius),
 			[border-top-right-radius]: var(--dropdown-border-radius),
 		),
 		item-last: (
-			_alias: 'li:last-child',
+			_alias: ':is([role="option"],[role="presentation"]):last-child',
 			[border-bottom-left-radius]: var(--dropdown-border-radius),
 			[border-bottom-right-radius]: var(--dropdown-border-radius),
 		),
 		item-not-last: (
-			_alias: 'li:not(:last-child)',
+			_alias:
+				':is([role="option"],[role="presentation"]):not(:last-child)',
 			border-width: 0 0 var(--border) 0,
 			border-color: var(--color-surface-3),
 			border-style: solid,
@@ -37,9 +53,11 @@ $vv-dropdown: (
 			display: block,
 			min-width: 0,
 			align-items: center,
-			min-height: var(--spacing-50),
+			min-height: var(--input-min-height),
 			background-color: var(--color-surface-2),
-			padding: var(--spacing-sm),
+			padding: var(--input-spacing-top) var(--input-spacing-right)
+				var(--input-spacing-bottom) var(--input-spacing-left),
+			font-size: var(--input-font-size),
 			pseudo: (
 				search-cancel-button: (
 					-webkit-appearance: none,
@@ -159,6 +177,14 @@ $vv-dropdown: (
 						down-xs: (
 							z-index: var(--z-modal),
 							margin-bottom: auto,
+							[border-radius]: var(--dropdown-border-radius),
+						),
+					),
+				),
+				search: (
+					breakpoint: (
+						down-xs: (
+							[border-radius]: var(--dropdown-border-radius),
 						),
 					),
 				),
@@ -173,6 +199,9 @@ $vv-dropdown: (
 					list: (
 						transition: var(--transition-transform),
 					),
+					search: (
+						transition: var(--transition-transform),
+					),
 				),
 			),
 			enter-from: (
@@ -181,6 +210,9 @@ $vv-dropdown: (
 					list: (
 						translate: 0 100%,
 					),
+					search: (
+						translate: 0 -100%,
+					),
 				),
 			),
 			leave-to: (
@@ -189,6 +221,60 @@ $vv-dropdown: (
 					list: (
 						translate: 0 100%,
 					),
+					search: (
+						translate: 0 -100%,
+					),
+				),
+			),
+		),
+		mobile-fade-block: (
+			active: (
+				transition: var(--transition-opacity),
+				element: (
+					list: (
+						transition: var(--transition-transform),
+					),
+					search: (
+						transition: var(--transition-transform),
+					),
+				),
+			),
+			enter-from: (
+				opacity: var(--opacity-0),
+				element: (
+					list: (
+						breakpoint: (
+							down-xs: (
+								translate: 0 100%,
+							),
+						),
+					),
+					search: (
+						breakpoint: (
+							down-xs: (
+								translate: 0 -100%,
+							),
+						),
+					),
+				),
+			),
+			leave-to: (
+				opacity: var(--opacity-0),
+				element: (
+					list: (
+						breakpoint: (
+							down-xs: (
+								translate: 0 100%,
+							),
+						),
+					),
+					search: (
+						breakpoint: (
+							down-xs: (
+								translate: 0 -100%,
+							),
+						),
+					),
 				),
 			),
 		),