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

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

@@ -0,0 +1,55 @@
+$vv-avatar: (
+	display: inline-flex,
+	position: relative,
+	justify-content: center,
+	align-items: center,
+	font-size: var(--text-12),
+	line-height: var(--leading-none),
+	width: var(--spacing-28),
+	height: var(--spacing-28),
+	border-radius: var(--rounded),
+	background-position: center,
+	background-size: contain,
+	background-repeat: no-repeat,
+	color: var(--color-white),
+	object-fit: contain,
+	modifier: (
+		rounded: (
+			border-radius: var(--rounded-full),
+			overflow: hidden,
+		),
+		md: (
+			font-size: var(--text-14),
+			width: var(--spacing-34),
+			height: var(--spacing-34),
+		),
+		lg: (
+			font-size: var(--text-16),
+			width: var(--spacing-40),
+			height: var(--spacing-40),
+		),
+	),
+	state: (
+		focus: (
+			outline: var(--spacing-px) solid var(--color-brand),
+			outline-offset: var(--spacing-0),
+		),
+	),
+	element: (
+		badge: (
+			_alias: '> sup',
+			position: absolute,
+			top: 0,
+			right: 0,
+			transform: translate(50%, -50%),
+			box-shadow: var(--shadow-sm),
+		),
+		image: (
+			_alias: '> img',
+			width: 100%,
+			height: 100%,
+			border-radius: inherit,
+			object-fit: inherit,
+		),
+	),
+) !default;

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

@@ -1,43 +1,83 @@
 $vv-badge: (
-	border-radius: 1.0465em,
-	background: var(--color-brand),
-	color: var(--color-white),
-	font-size: 0.6em,
-	height: 2.093em,
-	min-width: 2.093em,
-	padding: 0.37em 0.475em,
+	--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-style: solid,
+	border-radius: 0.5em,
+	min-height: 2em,
+	min-width: 2em,
+	padding: 0 0.5em,
 	display: inline-flex,
 	justify-content: center,
-	font-weight: normal,
+	align-items: center,
+	gap: 0.5ch,
+	white-space: nowrap,
 	font-family: var(--font-sans),
+	font-weight: var(--font-normal),
 	text-shadow: none,
 	state: (
 		empty: (
 			font-size: inherit,
-			width: 0.5em,
-			height: 0.5em,
 			min-width: 0,
-			border-radius: 0.25em,
+			min-height: 0,
+			[width]: var(--badge-font-size),
+			[height]: var(--badge-font-size),
+			[border-radius]: calc(var(--badge-font-size) * 0.5),
 			padding: 0,
 		),
 	),
 	modifier: (
+		sm: (
+			--badge-font-size: 0.6rem,
+		),
+		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: (
-			background: alpha-color('white', 80%),
-			color: var(--color-black),
+			--badge-background-color:
+				hsla(
+					var(--color-white-hue) var(--color-white-saturation)
+						var(--color-white-lightness) / 80%
+				),
+			--badge-color: var(--color-black),
 		),
 		black: (
-			background: alpha-color('black', 80%),
-			color: var(--color-white),
+			--badge-background-color:
+				hsla(
+					var(--color-black-hue) var(--color-black-saturation)
+						var(--color-black-lightness) / 80%
+				),
+			--badge-color: var(--color-white),
 		),
 		danger: (
-			background: var(--color-danger),
+			--badge-background-color: var(--color-danger),
 		),
 		success: (
-			background: var(--color-success),
+			--badge-background-color: var(--color-success),
 		),
 		warning: (
-			background: var(--color-warning),
+			--badge-background-color: var(--color-warning),
+		),
+		info: (
+			--badge-background-color: var(--color-info),
+		),
+		accent: (
+			--badge-background-color: var(--color-accent),
 		),
 	),
 ) !default;

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

@@ -0,0 +1,95 @@
+$vv-breadcrumb: (
+	position: relative,
+	pseudo: (
+		after: (
+			position: absolute,
+			top: 0,
+			bottom: 0,
+			right: 0,
+			display: block,
+			width: var(--spacing-sm),
+			background:
+				linear-gradient(45deg, transparent, var(--color-surface)),
+		),
+	),
+	element: (
+		list: (
+			_alias: '> ol',
+			position: relative,
+			overflow: auto hidden,
+			overscroll-behavior-x: contain,
+			scroll-behavior: smooth,
+			scroll-snap-type: x mandatory,
+			scrollbar-width: none,
+			display: flex,
+			flex-wrap: no-wrap,
+			list-style: none,
+			padding: 0,
+			background: var(--color-surface),
+			white-space: nowrap,
+			pseudo: (
+				-webkit-scrollbar: (
+						width: 0,
+						height: 0,
+					),
+			),
+		),
+		item: (
+			_alias: '> ol > li:has(a)',
+			display: inline-flex,
+			align-items: center,
+			color: var(--color-word-2),
+			pseudo: (
+				after: (
+					display: block,
+					margin-inline: 1ch,
+					width: calc(var(--leading-normal) * 1em),
+					height: calc(var(--leading-normal) * 1em),
+					background-image: var(--bg-chevron),
+					background-position: center,
+					background-size: 1em,
+					background-repeat: no-repeat,
+					transform: rotate(-90deg),
+				),
+			),
+		),
+		item-active: (
+			_alias: '> ol > li:not(:has(a))',
+			display: inline-flex,
+			align-items: center,
+			font-weight: var(--font-bold),
+			padding-right: var(--spacing-16),
+		),
+		link: (
+			_alias: '> ol > li > a',
+			state: (
+				hover: (
+					text-decoration: underline,
+				),
+				focus-within: (
+					text-decoration: underline,
+				),
+				active: (
+					color: var(--color-brand-darken-2),
+				),
+			),
+		),
+	),
+	modifier: (
+		multiline: (
+			element: (
+				list: (
+					flex-wrap: wrap,
+				),
+				item: (
+					font-size: var(--text-12),
+				),
+				item-active: (
+					width: 100%,
+					font-size: var(--text-18),
+					line-height: var(--leading-relaxed),
+				),
+			),
+		),
+	),
+) !default;

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

@@ -1,6 +1,10 @@
 $vv-button-group: (
 	display: inline-flex,
+	flex-wrap: wrap,
+	min-width: 0,
+	max-width: 100%,
 	align-items: center,
+	justify-content: center,
 	gap: var(--spacing-4),
 	modifier: (
 		block: (

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

@@ -1,19 +1,21 @@
 $vv-button: (
+	--button-border-width: var(--border-2),
+	--button-line-height: var(--leading-normal),
+	[border-width]: var(--button-border-width),
+	[line-height]: var(--button-line-height),
 	position: relative,
 	background: var(--color-brand),
 	border-radius: 0.5ch,
-	border-width: var(--spacing-2),
 	border-style: solid,
 	border-color: var(--color-brand),
 	color: var(--color-white),
 	font-family: var(--font-sans),
 	font-weight: var(--font-semibold),
 	gap: 1ch,
-	line-height: var(--leading-normal),
 	padding-block: 0.75ch,
 	padding-inline: 1.75ch,
 	text-shadow: 0 1px 0 var(--color-gray-darken-5),
-	transition: all 0.2s ease-in-out,
+	transition: var(--transition-all),
 	will-change: all,
 	min-width: 0,
 	state: (
@@ -24,11 +26,16 @@ $vv-button: (
 		hover: (
 			background: var(--color-brand-darken-1),
 			border-color: var(--color-brand-darken-1),
+			text-decoration: none,
 		),
 		active: (
 			background: var(--color-brand-darken-2),
 			border-color: var(--color-brand-darken-2),
 		),
+		pressed: (
+			background: var(--color-brand-darken-2),
+			border-color: var(--color-brand-darken-2),
+		),
 		disabled: (
 			opacity: 0.5,
 			cursor: not-allowed,
@@ -45,6 +52,7 @@ $vv-button: (
 			flex-shrink: 0,
 			stroke-linecap: round,
 			stroke-linejoin: round,
+			[min-height]: calc(var(--button-line-height) * 1em),
 		),
 		label: (
 			white-space: nowrap,
@@ -70,11 +78,14 @@ $vv-button: (
 					background: var(--color-gray-darken-5),
 					border-color: var(--color-gray-darken-5),
 				),
+				pressed: (
+					background: var(--color-gray-darken-5),
+					border-color: var(--color-gray-darken-5),
+				),
 			),
 		),
 		secondary: (
 			background: var(--color-white),
-			border-width: var(--spacing-2),
 			border-style: solid,
 			border-color: var(--color-gray-lighten-4),
 			color: var(--color-word),
@@ -89,6 +100,9 @@ $vv-button: (
 				active: (
 					background: var(--color-gray-lighten-3),
 				),
+				pressed: (
+					background: var(--color-gray-lighten-4),
+				),
 			),
 		),
 		danger: (
@@ -107,17 +121,21 @@ $vv-button: (
 					background: var(--color-danger-darken-2),
 					border-color: var(--color-danger-darken-2),
 				),
+				pressed: (
+					background: var(--color-danger-darken-2),
+					border-color: var(--color-danger-darken-2),
+				),
 			),
 		),
 		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: (
 					outline: var(--spacing-px) solid var(--color-gray-lighten-4),
-					outline-offset: 0,
+					outline-offset: var(--spacing-0),
 				),
 				hover: (
 					background: var(--color-gray-lighten-5),
@@ -125,23 +143,30 @@ $vv-button: (
 				active: (
 					background: var(--color-gray-lighten-4),
 				),
+				pressed: (
+					background: var(--color-gray-lighten-4),
+				),
 			),
 		),
-		text: (
+		link: (
 			background: transparent,
-			border-color: var(--color-word),
-			border-width: 0,
-			border-radius: 0,
+			border-width: var(--border-0),
 			padding: 0,
-			color: var(--color-word),
-			text-shadow: 0 1px 0 var(--color-gray-lighten-5),
+			color: var(--color-brand-darken-1),
+			font-weight: var(--font-normal),
+			text-shadow: none,
 			state: (
 				focus-visible: (
-					color: var(--color-brand),
-					outline: none,
+					outline: var(--spacing-px) solid
+						var(--color-brand-lighten-4),
+					outline-offset: var(--spacing-4),
 				),
 				hover: (
-					border-width: 0 0 1px 0,
+					text-decoration: underline,
+					text-underline-offset: var(--spacing-4),
+				),
+				active: (
+					color: var(--color-brand-darken-3),
 				),
 			),
 		),
@@ -162,6 +187,10 @@ $vv-button: (
 					border-color: var(--color-gray-lighten-4),
 					background: var(--color-gray-lighten-4),
 				),
+				pressed: (
+					border-color: var(--color-gray-lighten-4),
+					background: var(--color-gray-lighten-4),
+				),
 			),
 		),
 		static-dark: (
@@ -181,6 +210,83 @@ $vv-button: (
 					border-color: var(--color-gray-darken-3),
 					background: var(--color-gray-darken-3),
 				),
+				pressed: (
+					border-color: var(--color-gray-darken-3),
+					background: var(--color-gray-darken-3),
+				),
+			),
+		),
+		action: (
+			--button-border-width: var(--border),
+			--button-line-height: var(--leading-snug),
+			font-size: var(--text-14),
+			background: var(--color-surface-1),
+			color: var(--color-word-1),
+			border-color: var(--color-word-5),
+			font-weight: var(--font-normal),
+			padding-inline: 0.75ch,
+			padding-block: 0.5ch,
+			text-shadow: none,
+			state: (
+				focus-visible: (
+					outline: var(--spacing-px) solid var(--color-gray-lighten-4),
+				),
+				hover: (
+					background: var(--color-surface-2),
+				),
+				active: (
+					background: var(--color-surface-5),
+				),
+				pressed: (
+					color: var(--color-white),
+					background: var(--color-gray),
+					border-color: var(--color-gray),
+				),
+			),
+			element: (
+				icon: (
+					margin-inline: -0.125ch,
+					block-size: calc(1em * var(--leading-snug)),
+					inline-size: calc(1em * var(--leading-snug)),
+				),
+			),
+		),
+		action-quiet: (
+			--button-border-width: var(--border),
+			--button-line-height: var(--leading-snug),
+			font-size: var(--text-14),
+			background: transparent,
+			color: var(--color-word-1),
+			border-color: transparent,
+			font-weight: var(--font-normal),
+			padding-inline: 0.75ch,
+			padding-block: 0.5ch,
+			text-shadow: none,
+			state: (
+				focus-visible: (
+					outline: var(--spacing-px) solid var(--color-gray-lighten-4),
+					outline-offset: var(--spacing-0),
+				),
+				hover: (
+					background: var(--color-surface-2),
+					border-color: var(--color-surface-2),
+				),
+				active: (
+					background: var(--color-surface-5),
+					border-color: var(--color-surface-5),
+				),
+				pressed: (
+					color: var(--color-white),
+					background: var(--color-gray),
+					border-color: var(--color-gray),
+				),
+			),
+			element: (
+				icon: (
+					margin-inline: -0.125ch,
+					block-size: calc(1em * var(--leading-snug)),
+					inline-size: calc(1em * var(--leading-snug)),
+				),
 			),
 		),
 		rounded: (

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

@@ -9,7 +9,7 @@ $vv-card: (
 	border-bottom-width: var(--border),
 	border-left-width: var(--border),
 	border-style: none,
-	border-radius: var(--border-8),
+	border-radius: var(--rounded-lg),
 	margin: var(--spacing-0),
 	background-color: var(--color-surface),
 	box-shadow: var(--shadow-md),
@@ -19,7 +19,6 @@ $vv-card: (
 		header: (
 			_alias: '> header',
 			overflow: hidden,
-			font-size: var(--text-md),
 			padding: var(--spacing-md),
 			background-color: var(--color-surface-1),
 			border-bottom: var(--border) solid var(--color-surface-4),
@@ -29,16 +28,18 @@ $vv-card: (
 			display: block,
 			width: 100%,
 			height: auto,
+			object-fit: cover,
+			object-position: center,
 		),
 		content: (
 			padding: var(--spacing-md),
+			line-height: var(--leading-normal),
 			flex-grow: 1,
 			min-height: 0,
 			overflow: auto,
 		),
 		footer: (
 			_alias: '> footer',
-			background-color: var(--color-surface-1),
 			border-top: var(--border) solid var(--color-surface-4),
 			padding: var(--spacing-md),
 		),

package/src/settings/components/{_vv-input-checkbox-group.scss → _vv-checkbox-group.scss}

@@ -1,7 +1,8 @@
-$vv-input-checkbox-group: (
+$vv-checkbox-group: (
 	display: var(--input-display),
 	flex: var(--input-flex),
 	flex-direction: var(--input-flex-direction),
+	min-width: var(--input-min-width),
 	element: (
 		legend: (
 			_alias: '> legend',

package/src/settings/components/{_vv-input-checkbox.scss → _vv-checkbox.scss}

@@ -1,6 +1,6 @@
-$vv-input-checkbox: (
+$vv-checkbox: (
 	display: inline-flex,
-	flex-wrap: nowrap,
+	flex-wrap: wrap,
 	align-items: center,
 	cursor: pointer,
 	user-select: none,
@@ -8,21 +8,18 @@ $vv-input-checkbox: (
 	color: var(--input-color),
 	font-size: var(--input-font-size),
 	line-height: var(--input-line-height),
+	min-width: var(--input-min-width),
 	state: (
 		disabled: (
 			opacity: 0.3,
 			cursor: not-allowed,
 		),
-		readonly: (
-			cursor: default,
-			pointer-events: none,
-		),
 	),
 	element: (
 		input: (
 			_alias: "> input[type='checkbox']",
 			border: var(--spacing-2) solid var(--input-color),
-			width: var(--spacing-20),
+			min-width: var(--spacing-20),
 			height: var(--spacing-20),
 			margin: 0 var(--input-label-gap) 0 0,
 			background-position: center,
@@ -43,19 +40,36 @@ $vv-input-checkbox: (
 				),
 			),
 		),
+		hint: (
+			_alias: '> small',
+			flex-basis: 100%,
+			display: var(--input-hint-display),
+			font-size: var(--input-hint-font-size),
+			color: var(--input-hint-color),
+			padding-top: var(--input-hint-gap),
+			white-space: var(--input-hint-white-space),
+			text-overflow: var(--input-hint-text-overflow),
+			overflow: var(--input-hint-overflow),
+			max-width: var(--input-hint-max-width),
+		),
 	),
 	modifier: (
+		readonly: (
+			opacity: 1,
+			cursor: default,
+			pointer-events: none,
+		),
 		switch: (
 			element: (
 				input: (
 					border: 0,
-					width: var(--spacing-44),
+					min-width: var(--spacing-44),
 					height: var(--spacing-24),
 					border-radius: var(--spacing-12),
 					background-color: var(--color-word-5),
 					position: relative,
 					will-change: background-color,
-					transition: background-color 0.2s ease-in-out,
+					transition: var(--transition-colors),
 					pseudo: (
 						after: (
 							width: var(--spacing-20),
@@ -65,7 +79,7 @@ $vv-input-checkbox: (
 							inset: var(--spacing-2) 0 0 var(--spacing-2),
 							background: var(--color-white),
 							will-change: transform,
-							transition: transform 0.2s ease-in-out,
+							transition: var(--transition-transform),
 						),
 					),
 					state: (
@@ -75,6 +89,14 @@ $vv-input-checkbox: (
 						active: (
 							background-color: var(--color-word-3),
 						),
+						indeterminate: (
+							background-image: none,
+							pseudo: (
+								after: (
+									transform: translateX(50%),
+								),
+							),
+						),
 						checked: (
 							background-image: none,
 							background-color: var(--color-brand),
@@ -88,5 +110,19 @@ $vv-input-checkbox: (
 				),
 			),
 		),
+		valid: (
+			element: (
+				hint: (
+					color: var(--input-valid-color),
+				),
+			),
+		),
+		invalid: (
+			element: (
+				hint: (
+					color: var(--input-invalid-color),
+				),
+			),
+		),
 	),
 ) !default;