@volverjs/style 0.0.0

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

@@ -0,0 +1,214 @@
+$vv-button: (
+	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,
+	will-change: all,
+	min-width: 0,
+	state: (
+		focus-visible: (
+			outline-offset: var(--spacing-4),
+			outline: var(--spacing-px) solid var(--color-brand),
+		),
+		hover: (
+			background: var(--color-brand-darken-1),
+			border-color: var(--color-brand-darken-1),
+		),
+		active: (
+			background: var(--color-brand-darken-2),
+			border-color: var(--color-brand-darken-2),
+		),
+		disabled: (
+			opacity: 0.5,
+			cursor: not-allowed,
+		),
+	),
+	element: (
+		icon: (
+			_alias: '> :where(svg, [data-icon])',
+			block-size: 1.1em,
+			inline-size: 1.1em,
+			margin: 0,
+			stroke: currentcolor,
+			fill: none,
+			flex-shrink: 0,
+			stroke-linecap: round,
+			stroke-linejoin: round,
+		),
+		label: (
+			white-space: nowrap,
+			text-overflow: ellipsis,
+			min-width: 0,
+			overflow: hidden,
+		),
+	),
+	modifier: (
+		primary: (
+			background: var(--color-gray-darken-3),
+			border-color: var(--color-gray-darken-3),
+			color: var(--color-white),
+			state: (
+				focus-visible: (
+					outline: var(--spacing-px) solid var(--color-gray-darken-3),
+				),
+				hover: (
+					background: var(--color-gray-darken-4),
+					border-color: var(--color-gray-darken-4),
+				),
+				active: (
+					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),
+			text-shadow: 0 1px 0 var(--color-gray-lighten-5),
+			state: (
+				focus-visible: (
+					outline: var(--spacing-px) solid var(--color-gray-lighten-4),
+				),
+				hover: (
+					background: var(--color-gray-lighten-4),
+				),
+				active: (
+					background: var(--color-gray-lighten-3),
+				),
+			),
+		),
+		danger: (
+			background: var(--color-danger),
+			border-color: var(--color-danger),
+			color: var(--color-white),
+			state: (
+				focus-visible: (
+					outline: var(--spacing-px) solid var(--color-danger),
+				),
+				hover: (
+					background: var(--color-danger-darken-1),
+					border-color: var(--color-danger-darken-1),
+				),
+				active: (
+					background: var(--color-danger-darken-2),
+					border-color: var(--color-danger-darken-2),
+				),
+			),
+		),
+		ghost: (
+			background: transparent,
+			border-color: transparent,
+			color: var(--color-gray),
+			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,
+				),
+				hover: (
+					background: var(--color-gray-lighten-5),
+				),
+				active: (
+					background: var(--color-gray-lighten-4),
+				),
+			),
+		),
+		text: (
+			background: transparent,
+			border-color: var(--color-word),
+			border-width: 0,
+			border-radius: 0,
+			padding: 0,
+			color: var(--color-word),
+			text-shadow: 0 1px 0 var(--color-gray-lighten-5),
+			state: (
+				focus-visible: (
+					color: var(--color-brand),
+					outline: none,
+				),
+				hover: (
+					border-width: 0 0 1px 0,
+				),
+			),
+		),
+		static-light: (
+			background: var(--color-white),
+			border-color: var(--color-white),
+			color: var(--color-black),
+			text-shadow: 0 1px 0 var(--color-gray-lighten-5),
+			state: (
+				focus-visible: (
+					outline: var(--spacing-px) solid var(--color-gray-lighten-4),
+				),
+				hover: (
+					border-color: var(--color-gray-lighten-5),
+					background: var(--color-gray-lighten-5),
+				),
+				active: (
+					border-color: var(--color-gray-lighten-4),
+					background: var(--color-gray-lighten-4),
+				),
+			),
+		),
+		static-dark: (
+			background: var(--color-black),
+			border-color: var(--color-black),
+			color: var(--color-white),
+			text-shadow: 0 1px 0 var(--color-gray-darken-5),
+			state: (
+				focus-visible: (
+					outline: var(--spacing-px) solid var(--color-gray-darken-4),
+				),
+				hover: (
+					border-color: var(--color-gray-darken-4),
+					background: var(--color-gray-darken-4),
+				),
+				active: (
+					border-color: var(--color-gray-darken-3),
+					background: var(--color-gray-darken-3),
+				),
+			),
+		),
+		rounded: (
+			border-radius: var(--rounded-full),
+			element: (
+				icon: (
+					margin: 0 -1ch,
+				),
+			),
+		),
+		block: (
+			display: block,
+			width: 100%,
+			max-width: auto,
+		),
+		reverse: (
+			element: (
+				label: (
+					order: -1,
+				),
+			),
+		),
+		column: (
+			flex-direction: column,
+			gap: 0.2em,
+		),
+		full-bleed: (
+			min-width: 20ch,
+		),
+	),
+) !default;

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

@@ -0,0 +1,74 @@
+$vv-card: (
+	position: relative,
+	display: flex,
+	flex-direction: column,
+	overflow: hidden,
+	border-color: var(--color-surface-4),
+	border-top-width: var(--border),
+	border-right-width: var(--border),
+	border-bottom-width: var(--border),
+	border-left-width: var(--border),
+	border-style: none,
+	border-radius: var(--border-8),
+	margin: var(--spacing-0),
+	background-color: var(--color-surface),
+	box-shadow: var(--shadow-md),
+	color: var(--color-word-2),
+	backdrop-filter: none,
+	element: (
+		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),
+		),
+		picture: (
+			_alias: '> picture > img',
+			display: block,
+			width: 100%,
+			height: auto,
+		),
+		content: (
+			padding: var(--spacing-md),
+			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),
+		),
+	),
+	modifier: (
+		glass: (
+			background-color:
+				hsla(
+					var(--color-surface-hue) var(--color-surface-saturation)
+						var(--color-surface-lightness) / 60%
+				),
+			backdrop-filter: var(--blur-md),
+			element: (
+				header: (
+					background-color:
+						hsla(
+							var(--color-surface-hue)
+								var(--color-surface-saturation)
+								var(--color-surface-lightness) / 30%
+						),
+				),
+				footer: (
+					background-color:
+						hsla(
+							var(--color-surface-hue)
+								var(--color-surface-saturation)
+								var(--color-surface-lightness) / 30%
+						),
+				),
+			),
+		),
+	),
+) !default;

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

@@ -0,0 +1,111 @@
+$vv-collapse: (
+	display: block,
+	min-width: 2.093em,
+	padding: 0,
+	border-radius: 0,
+	border-bottom: var(--border) solid var(--color-surface-2),
+	margin: 0,
+	background: none,
+	font-family: var(--font-sans),
+	font-size: 0.6em,
+	font-weight: normal,
+	state: (
+		open: (
+			display: contents,
+			padding: 0,
+			margin: 0,
+			element: (
+				header: (
+					list-style-type: none,
+					color: var(--color-brand),
+					pseudo: (
+						after: (
+							transform: rotate(0deg),
+							will-change: transform,
+							transition: transform 0.2s ease-in-out,
+						),
+					),
+				),
+				content: (
+					height: auto,
+					opacity: 1,
+				),
+			),
+		),
+		blocked: (
+			cursor: not-allowed,
+			opacity: 0.5,
+			pointer-events: none,
+			user-select: none,
+		),
+	),
+	element: (
+		header: (
+			cursor: pointer,
+			list-style-type: none,
+			padding: 1em,
+			margin: var(--spacing-0),
+			background: none,
+			color: var(--color-word-3),
+			font-size: var(--text-sm),
+			line-height: 1em,
+			box-shadow: none,
+			pseudo: (
+				after: (
+					display: block,
+					float: right,
+					width: 1em,
+					height: 1em,
+					background-image: var(--bg-chevron),
+					background-position: right center,
+					background-size: 1em auto,
+					background-repeat: no-repeat,
+					transform: rotate(-90deg),
+					will-change: transform,
+					transition: transform 0.2s ease-in-out,
+				),
+			),
+		),
+		content: (
+			display: block,
+			height: 0,
+			padding: var(--spacing-0) 1em 1em 1em,
+			margin: var(--spacing-0),
+			background: none,
+			color: var(--color-word-4),
+			font-size: var(--text-xs),
+			box-shadow: none,
+			opacity: 0,
+			transition: all 0.7s ease-in-out,
+		),
+	),
+	modifier: (
+		minimal: (
+			display: contents,
+			padding: 0,
+			margin: 0,
+			state: (
+				open: (
+					element: (
+						header: (
+							list-style-type: disclosure-open,
+							color: var(--color-brand),
+						),
+					),
+				),
+			),
+			element: (
+				header: (
+					display: list-item,
+					counter-increment: list-item 0,
+					list-style-type: disclosure-closed,
+					pseudo: (
+						after: (
+							display: none,
+						),
+					),
+				),
+			),
+		),
+	),
+) !default;

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

@@ -0,0 +1,183 @@
+$vv-dialog: (
+	display: flex,
+	z-index: var(--z-modal-backdrop),
+	position: fixed,
+	inset: 0,
+	align-items: center,
+	justify-content: center,
+	width: inherit,
+	min-width: 100%,
+	height: inherit,
+	min-height: 100%,
+	padding: var(--spacing-md),
+	border: 0,
+	background-color: var(--color-backdrop),
+	backdrop-filter: var(--blur-sm),
+	opacity: 1,
+	state: (
+		close: (
+			display: none,
+		),
+	),
+	element: (
+		wrapper: (
+			_alias: '> article',
+			display: flex,
+			flex-direction: column,
+			position: relative,
+			box-shadow: var(--shadow-lg),
+			max-width: clamp(30vw, 40rem, 90vw),
+			max-height: 90vh,
+			z-index: var(--z-modal),
+			background: var(--color-surface),
+			border-radius: var(--rounded-md),
+			overflow: hidden,
+		),
+		header: (
+			_alias: '> article > header',
+			display: flex,
+			flex-wrap: no-wrap,
+			justify-content: space-between,
+			align-items: center,
+			font-size: var(--text-md),
+			padding: var(--spacing-md),
+			background: var(--color-surface-1),
+			border-bottom: var(--border) solid var(--color-surface-4),
+		),
+		close: (
+			display: flex,
+			cursor: pointer,
+		),
+		content: (
+			padding: var(--spacing-md),
+			flex: 1,
+			min-height: 0,
+			overflow: auto,
+		),
+		footer: (
+			_alias: '> article > footer',
+			display: flex,
+			justify-content: flex-end,
+			padding: var(--spacing-md),
+			background: var(--color-surface-1),
+			border-top: var(--border) solid var(--color-surface-4),
+		),
+	),
+	modifier: (
+		small: (
+			element: (
+				wrapper: (
+					max-width: clamp(10vw, 25rem, 90vw),
+				),
+			),
+		),
+		fullscreen: (
+			padding: 0,
+			element: (
+				wrapper: (
+					border-radius: var(--rounded-0),
+					max-width: auto,
+					max-height: auto,
+					width: 100%,
+					height: 100%,
+				),
+			),
+		),
+		fade-block-enter-active: (
+			transition: opacity 0.3s ease-in-out,
+			element: (
+				wrapper: (
+					transition: transform 0.3s ease-in-out,
+				),
+			),
+		),
+		fade-block-leave-active: (
+			transition: opacity 0.3s ease-in-out,
+			element: (
+				wrapper: (
+					transition: transform 0.3s ease-in-out,
+				),
+			),
+		),
+		fade-block-enter-from: (
+			opacity: 0,
+			element: (
+				wrapper: (
+					transform: translateY(100%),
+				),
+			),
+		),
+		fade-block-leave-to: (
+			opacity: 0,
+			element: (
+				wrapper: (
+					transform: translateY(-100%),
+				),
+			),
+		),
+		fade-inline-enter-active: (
+			transition: opacity 0.3s ease-in-out,
+			element: (
+				wrapper: (
+					transition: transform 0.3s ease-in-out,
+				),
+			),
+		),
+		fade-inline-leave-active: (
+			transition: opacity 0.3s ease-in-out,
+			element: (
+				wrapper: (
+					transition: transform 0.3s ease-in-out,
+				),
+			),
+		),
+		fade-inline-enter-from: (
+			opacity: 0,
+			element: (
+				wrapper: (
+					transform: translateX(-100%),
+				),
+			),
+		),
+		fade-inline-leave-to: (
+			opacity: 0,
+			element: (
+				wrapper: (
+					transform: translateX(100%),
+				),
+			),
+		),
+		scale-enter-active: (
+			transition: opacity 0.3s ease-in-out,
+			element: (
+				wrapper: (
+					transition: transform 0.3s ease-in-out,
+				),
+			),
+		),
+		scale-leave-active: (
+			transition: opacity 0.3s ease-in-out,
+			element: (
+				wrapper: (
+					transition: transform 0.3s ease-in-out,
+				),
+			),
+		),
+		scale-enter-from: (
+			opacity: 0,
+			element: (
+				wrapper: (
+					transform: scale(0%),
+				),
+			),
+		),
+		scale-leave-to: (
+			opacity: 0,
+			element: (
+				wrapper: (
+					transform: scale(0%),
+				),
+			),
+		),
+	),
+) !default;

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

@@ -0,0 +1,37 @@
+$vv-dropdown: (
+	position: absolute,
+	inset: auto 0,
+	z-index: var(--z-dropdown),
+	display: flex,
+	flex-direction: column,
+	background-color: var(--color-surface-1),
+	box-shadow: var(--shadow-lg),
+	element: (
+		item: (
+			_alias: '> li > :where(a, label, button)',
+			display: block,
+			padding: var(--spacing-sm),
+			state: (
+				hover: (
+					background-color: var(--color-surface-2),
+				),
+				active: (
+					background-color: var(--color-surface-3),
+				),
+				checked-within: (
+					color: var(--color-brand),
+					background-color: var(--color-surface-3),
+				),
+			),
+		),
+		input: (
+			_alias: '> li > input',
+			display: none,
+		),
+	),
+	modifier: (
+		place-top: (
+			bottom: 100%,
+		),
+	),
+) !default;

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

@@ -0,0 +1,60 @@
+$vv-input-checkbox-group: (
+	display: var(--input-display),
+	flex: var(--input-flex),
+	flex-direction: var(--input-flex-direction),
+	element: (
+		legend: (
+			_alias: '> legend',
+			display: var(--input-label-display),
+			font-size: var(--input-label-font-size),
+			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,
+			flex-direction: column,
+			flex-wrap: wrap,
+		),
+		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),
+			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),
+			margin-top: calc(var(--input-gap) * -1),
+			margin-bottom: var(--input-gap),
+		),
+	),
+	modifier: (
+		horizontal: (
+			element: (
+				wrapper: (
+					flex-direction: row,
+				),
+			),
+		),
+		valid: (
+			element: (
+				hint: (
+					color: var(--input-valid-color),
+				),
+			),
+		),
+		invalid: (
+			element: (
+				hint: (
+					color: var(--input-invalid-color),
+				),
+			),
+		),
+	),
+) !default;