@volverjs/style 0.0.0

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

@@ -0,0 +1,92 @@
+$vv-input-checkbox: (
+	display: inline-flex,
+	flex-wrap: nowrap,
+	align-items: center,
+	cursor: pointer,
+	user-select: none,
+	margin: 0 var(--input-gap) var(--input-gap) 0,
+	color: var(--input-color),
+	font-size: var(--input-font-size),
+	line-height: var(--input-line-height),
+	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),
+			height: var(--spacing-20),
+			margin: 0 var(--input-label-gap) 0 0,
+			background-position: center,
+			background-size: var(--text-12) auto,
+			background-repeat: no-repeat,
+			cursor: pointer,
+			position: relative,
+			state: (
+				checked: (
+					background-image: var(--bg-check),
+				),
+				indeterminate: (
+					background-image: var(--bg-minus),
+				),
+				focus-visible: (
+					outline: var(--spacing-px) solid var(--color-brand),
+					outline-offset: var(--spacing-2),
+				),
+			),
+		),
+	),
+	modifier: (
+		switch: (
+			element: (
+				input: (
+					border: 0,
+					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,
+					pseudo: (
+						after: (
+							width: var(--spacing-20),
+							height: var(--spacing-20),
+							border-radius: 50%,
+							position: absolute,
+							inset: var(--spacing-2) 0 0 var(--spacing-2),
+							background: var(--color-white),
+							will-change: transform,
+							transition: transform 0.2s ease-in-out,
+						),
+					),
+					state: (
+						hover: (
+							background-color: var(--color-word-4),
+						),
+						active: (
+							background-color: var(--color-word-3),
+						),
+						checked: (
+							background-image: none,
+							background-color: var(--color-brand),
+							pseudo: (
+								after: (
+									transform: translateX(100%),
+								),
+							),
+						),
+					),
+				),
+			),
+		),
+	),
+) !default;

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

@@ -0,0 +1 @@
+$vv-input-radio-group: $vv-input-checkbox-group !default;

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

@@ -0,0 +1,60 @@
+$vv-input-radio: (
+	display: inline-flex,
+	flex-wrap: nowrap,
+	align-items: center,
+	cursor: pointer,
+	user-select: none,
+	margin: 0 var(--input-gap) var(--input-gap) 0,
+	color: var(--input-color),
+	font-size: var(--input-font-size),
+	line-height: var(--input-line-height),
+	state: (
+		disabled: (
+			opacity: 0.3,
+			cursor: not-allowed,
+		),
+		readonly: (
+			cursor: default,
+			pointer-events: none,
+		),
+	),
+	element: (
+		input: (
+			_alias: "> input[type='radio']",
+			border: var(--spacing-2) solid var(--input-color),
+			width: var(--spacing-20),
+			height: var(--spacing-20),
+			border-radius: 50%,
+			margin: 0 var(--input-label-gap) 0 0,
+			background: transparent,
+			cursor: pointer,
+			position: relative,
+			pseudo: (
+				after: (
+					position: absolute,
+					width: 70%,
+					height: 70%,
+					background: var(--input-color),
+					inset: 50% 50%,
+					border-radius: 50%,
+					transform: translate(-50%, -50%) scale(0),
+					will-change: transform,
+					transition: transform 0.2s ease-in-out,
+				),
+			),
+			state: (
+				checked: (
+					pseudo: (
+						after: (
+							transform: translate(-50%, -50%) scale(1),
+						),
+					),
+				),
+				focus-visible: (
+					outline: var(--spacing-px) solid var(--color-brand),
+					outline-offset: var(--spacing-2),
+				),
+			),
+		),
+	),
+) !default;

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

@@ -0,0 +1,327 @@
+$vv-input-text: (
+	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),
+	element: (
+		label: (
+			_alias: '> label',
+			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,
+			align-items: center,
+			flex: 1,
+			overflow: hidden,
+			background-color: var(--input-background-color),
+			will-change: background-color,
+			transition: background-color 0.2s ease-in-out,
+			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),
+					transform: scaleX(0),
+					transform-origin: left,
+					will-change: transform,
+					transition: transform 0.2s ease-in-out,
+				),
+			),
+			state: (
+				hover: (
+					background-color: var(--color-surface-3),
+				),
+				focus-within: (
+					background-color: var(--color-surface-2),
+					pseudo: (
+						after: (
+							transform: scaleX(1),
+						),
+					),
+				),
+			),
+		),
+		input: (
+			_alias: 'input',
+			display: block,
+			flex: 1,
+			color: var(--input-color),
+			[padding]: var(--input-padding-top) var(--input-padding-right)
+				var(--input-padding-bottom) var(--input-padding-left),
+			min-height: var(--spacing-50),
+			pseudo: (
+				placeholder: (
+					color: var(--input-placeholder-color),
+				),
+				calendar-picker-indicator: (
+					position: absolute,
+					padding: var(--spacing-sm),
+					top: 0,
+					right: 0,
+					opacity: 0,
+				),
+				search-cancel-button: (
+					display: none,
+				),
+				color-swatch-wrapper: (
+					display: block,
+					border: none,
+					height: 100%,
+					padding: 0,
+				),
+				color-swatch: (
+					display: block,
+					border: none,
+					height: var(--spacing-20),
+					border-radius: var(--spacing-4),
+				),
+				outer-spin-button: (
+					display: none,
+				),
+				inner-spin-button: (
+					display: none,
+				),
+			),
+			state: (
+				disabled: (
+					cursor: not-allowed,
+				),
+				readonly: (
+					cursor: text,
+				),
+			),
+		),
+		number: (
+			_alias: 'input[type="number"]',
+			-moz-appearance: textfield,
+		),
+		icon: (
+			_alias: ':where(svg, [data-icon])',
+			margin: var(--input-padding-top) var(--input-padding-right)
+				var(--input-padding-bottom) var(--input-padding-left),
+			position: var(--input-icon-position),
+			width: var(--input-icon-width),
+			height: var(--input-icon-height),
+			padding: var(--input-icon-padding),
+			pointer-events: var(--input-icon-pointer-events),
+		),
+		icon-right: (
+			_alias: 'input + :where(svg, [data-icon])',
+			right: 0,
+		),
+		actions-group: (
+			display: flex,
+			flex-direction: column,
+			position: absolute,
+			right: 0,
+			top: 0,
+			bottom: var(--spacing-px),
+		),
+		action-chevron: (
+			flex: 1,
+			width: calc(1em + var(--spacing-sm) * 2),
+			background-position: center var(--spacing-2),
+			background-size: var(--text-14) auto,
+			background-repeat: no-repeat,
+			background-image: var(--bg-chevron),
+			cursor: pointer,
+			state: (
+				hover: (
+					background-color: var(--color-surface-4),
+				),
+				active: (
+					background-color: var(--color-surface-5),
+				),
+			),
+		),
+		action-chevron-up: (
+			transform: rotate(180deg),
+		),
+		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),
+			max-width: var(--input-hint-max-width),
+		),
+	),
+	modifier: (
+		icon-left: (
+			--input-padding-left: calc(var(--spacing-sm) * 2 + 1em),
+		),
+		icon-right: (
+			--input-padding-right: calc(var(--spacing-sm) * 2 + 1em),
+		),
+		valid: (
+			element: (
+				wrapper: (
+					pseudo: (
+						after: (
+							background: var(--input-valid-color),
+							transform: scaleX(1),
+						),
+					),
+				),
+				hint: (
+					color: var(--input-valid-color),
+				),
+				icon-right: (
+					color: var(--input-valid-color),
+				),
+			),
+		),
+		invalid: (
+			element: (
+				wrapper: (
+					pseudo: (
+						after: (
+							background: var(--input-invalid-color),
+							transform: scaleX(1),
+						),
+					),
+				),
+				hint: (
+					color: var(--input-invalid-color),
+				),
+				icon-right: (
+					color: var(--input-invalid-color),
+				),
+			),
+		),
+		loading: (
+			element: (
+				wrapper: (
+					pseudo: (
+						before: (
+							height: 2px,
+							background: var(--color-brand-lighten-5),
+						),
+						after: (
+							animation: var(--animate-indeterminate),
+						),
+					),
+				),
+			),
+		),
+		floating: (
+			[margin-left]: var(--input-padding-left),
+			[margin-right]: var(--input-padding-right),
+			element: (
+				wrapper: (
+					[margin-left]: calc(var(--input-padding-left) * -1),
+					[margin-right]: calc(var(--input-padding-right) * -1),
+				),
+				hint: (
+					[margin-left]: calc(var(--input-padding-left) * -1),
+					[margin-right]: calc(var(--input-padding-right) * -1),
+				),
+				label: (
+					position: absolute,
+					z-index: 1,
+					pointer-events: none,
+					font-size: inherit,
+					[padding-top]: var(--input-padding-top),
+					[padding-bottom]: var(--input-padding-bottom),
+					padding-inline: 0,
+					margin: 0,
+					will-change: 'transform',
+					transform-origin: left,
+					transition: all 0.2s ease-in-out,
+				),
+				input: (
+					pseudo: (
+						placeholder: (
+							opacity: 0,
+						),
+					),
+				),
+			),
+			state: (
+				focus-within: (
+					element: (
+						label: (
+							transform: translateY(-1.2ch),
+							font-size: var(--text-12),
+						),
+						input: (
+							transform: translateY(0.85ch),
+							pseudo: (
+								placeholder: (
+									opacity: 1,
+								),
+							),
+						),
+					),
+				),
+				dirty: (
+					element: (
+						label: (
+							transform: translateY(-1.2ch),
+							font-size: var(--text-12),
+						),
+						input: (
+							transform: translateY(0.85ch),
+							pseudo: (
+								placeholder: (
+									opacity: 1,
+								),
+							),
+						),
+					),
+				),
+			),
+		),
+	),
+	state: (
+		disabled: (
+			opacity: 0.5,
+			element: (
+				wrapper: (
+					state: (
+						hover: (
+							background-color: var(--color-surface-1),
+						),
+					),
+				),
+			),
+		),
+		readonly: (
+			element: (
+				wrapper: (
+					pseudo: (
+						after: (
+							opacity: 0,
+						),
+					),
+					state: (
+						hover: (
+							background-color: var(--color-surface-1),
+						),
+					),
+				),
+			),
+		),
+	),
+) !default;

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

@@ -0,0 +1,45 @@
+@use 'sass:map';
+
+$vv-progress: (
+	position: relative,
+	display: flex,
+	appearance: none,
+	width: 100%,
+	height: var(--spacing-8),
+	border: var(--border-0),
+	border-radius: var(--rounded-full),
+	overflow: hidden,
+	color: var(--color-brand),
+	background-color: var(--color-surface-2),
+	pseudo: (
+		-webkit-progress-bar: (
+				background-color: transparent,
+			),
+		-moz-progress-bar: (
+				background-color: var(--color-brand),
+			),
+		-webkit-progress-value: (
+				background-color: var(--color-brand),
+			),
+	),
+	state: (
+		indeterminate: (
+			background: var(--color-surface-2)
+				linear-gradient(
+					to right,
+					var(--color-brand) 30%,
+					var(--color-surface-2) 30%
+				)
+				top left/150% 150% no-repeat,
+			animation: var(--animate-progress-indeterminate),
+			pseudo: (
+				progress-bar: (
+					background: transparent,
+				),
+				progress-value: (
+					background: transparent,
+				),
+			),
+		),
+	),
+) !default;