@volverjs/style 0.1.2-beta.24 → 0.1.2-beta.26

package/src/props/{animation.scss → transitions.scss}

@@ -1,11 +1,45 @@
 @use '../context' as *;
 
 :where(:host, :root, .theme) {
+	// animation
 	@media (prefers-reduced-motion: no-preference) {
-		@include spread-map-into-props($animate, $prefix: animate);
+		// transition-property
+		@include spread-map-into-props(
+			$transition-property,
+			$prefix: transition-property
+		);
+
+		// duration
+		@include spread-map-into-props(
+			$transition-duration-delay,
+			$prefix: duration
+		);
+
+		// ease
+		@include spread-map-into-props(
+			$transition-timing-function,
+			$prefix: ease
+		);
+
+		// animation
+		@include spread-map-into-props($animation, animation);
+
+		// transition
+		@each $property, $value in $transition-property {
+			@if $property != 'none' {
+				--transition-#{$property}: var(
+						--transition-property-#{$property}
+					)
+					var(--duration-300)
+					var(--ease-in-out);
+			} @else {
+				--transition-#{$property}: none;
+			}
+		}
 	}
 }
 
+// keyframes
 @keyframes indeterminate {
 	0% {
 		transform: scaleX(0);
@@ -89,3 +123,9 @@
 		opacity: 0;
 	}
 }
+
+@keyframes shine {
+	to {
+		background-position-x: -200%;
+	}
+}

package/src/settings/_index.scss

@@ -1,19 +1,19 @@
 // utilities and custom props
-@forward 'animation';
+@forward 'colors';
+@forward 'background';
 @forward 'borders';
 @forward 'breakpoints';
-@forward 'colors';
-@forward 'layout';
+@forward 'effects';
 @forward 'filters';
 @forward 'flexbox';
 @forward 'grid';
+@forward 'input';
+@forward 'interactivity';
+@forward 'layout';
 @forward 'sizing';
 @forward 'spacing';
-@forward 'typography';
-@forward 'background';
-@forward 'effects';
-@forward 'input';
 @forward 'transitions';
+@forward 'typography';
 
 // components
 @forward 'components/vv-accordion';
@@ -34,6 +34,7 @@
 @forward 'components/vv-nav';
 @forward 'components/vv-progress';
 @forward 'components/vv-select';
+@forward 'components/vv-skeleton';
 @forward 'components/vv-tab';
 @forward 'components/vv-table';
 @forward 'components/vv-text';

package/src/settings/_interactivity.scss

@@ -0,0 +1,39 @@
+// cursor
+$cursor: (
+	auto: auto,
+	default: default,
+	pointer: pointer,
+	wait: wait,
+	text: text,
+	move: move,
+	help: help,
+	not-allowed: not-allowed,
+	none: none,
+	context-menu: context-menu,
+	progress: progress,
+	cell: cell,
+	crosshair: crosshair,
+	vertical-text: vertical-text,
+	alias: alias,
+	copy: copy,
+	no-drop: no-drop,
+	grab: grab,
+	grabbing: grabbing,
+	all-scroll: all-scroll,
+	col-resize: col-resize,
+	row-resize: row-resize,
+	n-resize: n-resize,
+	e-resize: e-resize,
+	s-resize: s-resize,
+	w-resize: w-resize,
+	ne-resize: ne-resize,
+	nw-resize: nw-resize,
+	se-resize: se-resize,
+	sw-resize: sw-resize,
+	ew-resize: ew-resize,
+	ns-resize: ns-resize,
+	nesw-resize: nesw-resize,
+	nwse-resize: nwse-resize,
+	zoom-in: zoom-in,
+	zoom-out: zoom-out,
+) !default;

package/src/settings/_transitions.scss

@@ -34,8 +34,11 @@ $transition-timing-function: (
 // animation
 $animation: (
 	none: none,
-	spin: spin 1s linear infinite,
+	indeterminate: indeterminate 2s infinite,
+	progress-indeterminate: progress-indeterminate 1.5s linear infinite,
+	spin: spin 1s infinite,
 	ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite,
 	pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite,
 	bounce: bounce 1s infinite,
+	shine: shine 1.5s infinite,
 ) !default;

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

@@ -35,7 +35,7 @@ $vv-accordion: (
 			line-height: var(--leading-normal),
 			color: var(--color-word-2),
 			will-change: background-color,
-			transition: background-color 0.3s ease-in-out,
+			transition: var(--transition-colors),
 			font-size: var(--text-sm),
 			border-radius: var(--rounded-lg),
 			-webkit-tap-highlight-color: transparent,
@@ -52,7 +52,7 @@ $vv-accordion: (
 					background-size: 1em,
 					background-repeat: no-repeat,
 					will-change: transform,
-					transition: transform 0.3s ease-in-out,
+					transition: var(--transition-transform),
 					transform: rotate(-90deg),
 				),
 				marker: (

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

@@ -15,7 +15,7 @@ $vv-button: (
 	padding-block: 0.75ch,
 	padding-inline: 1.75ch,
 	text-shadow: 0 1px 0 var(--color-gray-darken-5),
-	transition: all 0.3s ease-in-out,
+	transition: var(--transition-all),
 	will-change: all,
 	min-width: 0,
 	state: (

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

@@ -69,119 +69,95 @@ $vv-dialog: (
 			border-top: var(--border) solid var(--color-surface-4),
 		),
 	),
-	modifier: (
-		small: (
-			element: (
-				wrapper: (
-					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%),
+	transition: (
+		fade-block: (
+			active: (
+				transition: var(--transition-opacity),
+				element: (
+					wrapper: (
+						transition: var(--transition-transform),
+					),
 				),
 			),
-		),
-		fade-block-leave-to: (
-			opacity: 0,
-			element: (
-				wrapper: (
-					transform: translateY(-100%),
+			enter-from: (
+				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,
+			leave-to: (
+				opacity: 0,
+				element: (
+					wrapper: (
+						transform: translateY(-100%),
+					),
 				),
 			),
 		),
-		fade-inline-leave-active: (
-			transition: opacity 0.3s ease-in-out,
-			element: (
-				wrapper: (
-					transition: transform 0.3s ease-in-out,
+		fade-inline: (
+			active: (
+				transition: var(--transition-opacity),
+				element: (
+					wrapper: (
+						transition: var(--transition-transform),
+					),
 				),
 			),
-		),
-		fade-inline-enter-from: (
-			opacity: 0,
-			element: (
-				wrapper: (
-					transform: translateX(-100%),
+			enter-from: (
+				opacity: 0,
+				element: (
+					wrapper: (
+						transform: translateX(-100%),
+					),
 				),
 			),
-		),
-		fade-inline-leave-to: (
-			opacity: 0,
-			element: (
-				wrapper: (
-					transform: translateX(100%),
+			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: (
+			active: (
+				transition: var(--transition-opacity),
+				element: (
+					wrapper: (
+						transition: var(--transition-transform),
+					),
 				),
 			),
-		),
-		scale-leave-active: (
-			transition: opacity 0.3s ease-in-out,
-			element: (
-				wrapper: (
-					transition: transform 0.3s ease-in-out,
+			inert: (
+				opacity: 0,
+				element: (
+					wrapper: (
+						transform: scale(0%),
+					),
 				),
 			),
 		),
-		scale-enter-from: (
-			opacity: 0,
+	),
+	modifier: (
+		small: (
 			element: (
 				wrapper: (
-					transform: scale(0%),
+					width: clamp(10vw, 25rem, 90vw),
 				),
 			),
 		),
-		scale-leave-to: (
-			opacity: 0,
+		fullscreen: (
+			padding: 0,
 			element: (
 				wrapper: (
-					transform: scale(0%),
+					border-radius: var(--rounded-0),
+					max-width: auto,
+					max-height: auto,
+					width: 100%,
+					height: 100%,
 				),
 			),
 		),

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

@@ -57,7 +57,7 @@ $vv-input-checkbox: (
 					background-color: var(--color-word-5),
 					position: relative,
 					will-change: background-color,
-					transition: background-color 0.3s ease-in-out,
+					transition: var(--transition-colors),
 					pseudo: (
 						after: (
 							width: var(--spacing-20),
@@ -67,7 +67,7 @@ $vv-input-checkbox: (
 							inset: var(--spacing-2) 0 0 var(--spacing-2),
 							background: var(--color-white),
 							will-change: transform,
-							transition: transform 0.3s ease-in-out,
+							transition: var(--transition-transform),
 						),
 					),
 					state: (

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

@@ -41,7 +41,7 @@ $vv-input-radio: (
 					border-radius: 50%,
 					transform: translate(-50%, -50%) scale(0),
 					will-change: transform,
-					transition: transform 0.3s ease-in-out,
+					transition: var(--transition-transform),
 				),
 			),
 			state: (

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

@@ -26,7 +26,7 @@ $vv-input-text: (
 			overflow: hidden,
 			background-color: var(--input-background-color),
 			will-change: background-color,
-			transition: background-color 0.3s ease-in-out,
+			transition: var(--transition-colors),
 			pseudo: (
 				before: (
 					position: absolute,
@@ -42,7 +42,7 @@ $vv-input-text: (
 					transform: scaleX(0),
 					transform-origin: left,
 					will-change: transform,
-					transition: transform 0.3s ease-in-out,
+					transition: var(--transition-transform),
 				),
 			),
 			state: (
@@ -80,10 +80,7 @@ $vv-input-text: (
 					opacity: 0,
 				),
 				search-cancel-button: (
-					position: absolute,
-					padding: var(--spacing-sm),
-					top: 0,
-					right: 0,
+					-webkit-appearance: none,
 					opacity: 0,
 				),
 				color-swatch: (
@@ -271,7 +268,7 @@ $vv-input-text: (
 					margin: 0,
 					will-change: 'transform',
 					transform-origin: left,
-					transition: all 0.3s ease-in-out,
+					transition: var(--transition-all),
 				),
 				input: (
 					pseudo: (
@@ -285,11 +282,11 @@ $vv-input-text: (
 				focus-within: (
 					element: (
 						label: (
-							transform: translateY(-1.2ch),
+							transform: translateY(-0.8em),
 							font-size: var(--text-12),
 						),
 						input: (
-							transform: translateY(0.85ch),
+							transform: translateY(0.55em),
 							pseudo: (
 								placeholder: (
 									opacity: 1,
@@ -301,11 +298,11 @@ $vv-input-text: (
 				dirty: (
 					element: (
 						label: (
-							transform: translateY(-1.2ch),
+							transform: translateY(-0.8em),
 							font-size: var(--text-12),
 						),
 						input: (
-							transform: translateY(0.85ch),
+							transform: translateY(0.55em),
 							pseudo: (
 								placeholder: (
 									opacity: 1,

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

@@ -22,7 +22,7 @@ $vv-nav: (
 			display: flex,
 			align-items: center,
 			will-change: background-color color,
-			transition: all 0.3s ease-in-out,
+			transition: var(--transition-all),
 			color: var(--color-word-3),
 			[padding]: var(--nav-item-padding),
 			state: (

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

@@ -26,7 +26,7 @@ $vv-select: (
 			flex: 1,
 			background-color: var(--input-background-color),
 			will-change: background-color,
-			transition: background-color 0.3s ease-in-out,
+			transition: var(--transition-colors),
 			pseudo: (
 				before: (
 					position: absolute,
@@ -42,7 +42,7 @@ $vv-select: (
 					transform: scaleX(0),
 					transform-origin: left,
 					will-change: transform,
-					transition: transform 0.3s ease-in-out,
+					transition: var(--transition-transform),
 				),
 			),
 			state: (
@@ -209,7 +209,7 @@ $vv-select: (
 					margin: 0,
 					will-change: 'transform',
 					transform-origin: left,
-					transition: all 0.3s ease-in-out,
+					transition: var(--transition-all),
 				),
 				input: (
 					pseudo: (
@@ -223,14 +223,14 @@ $vv-select: (
 				focus-within: (
 					element: (
 						label: (
-							transform: translateY(-1.2ch),
+							transform: translateY(-0.8em),
 							font-size: var(--text-12),
 						),
 						input: (
 							[padding-top]:
-								calc(var(--input-padding-top) + 0.85ch),
+								calc(var(--input-padding-top) + 0.55em),
 							[padding-bottom]:
-								calc(var(--input-padding-bottom) - 0.85ch),
+								calc(var(--input-padding-bottom) - 0.55em),
 							pseudo: (
 								placeholder: (
 									opacity: 1,
@@ -242,14 +242,14 @@ $vv-select: (
 				dirty: (
 					element: (
 						label: (
-							transform: translateY(-1.2ch),
+							transform: translateY(-0.8em),
 							font-size: var(--text-12),
 						),
 						input: (
 							[padding-top]:
-								calc(var(--input-padding-top) + 0.85ch),
+								calc(var(--input-padding-top) + 0.55em),
 							[padding-bottom]:
-								calc(var(--input-padding-bottom) - 0.85ch),
+								calc(var(--input-padding-bottom) - 0.55em),
 							pseudo: (
 								placeholder: (
 									opacity: 1,

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

@@ -0,0 +1,21 @@
+$vv-skeleton: (
+	--skeleton-background: var(--color-surface-2),
+	--skeleton-shine-color: var(--color-surface),
+	display: grid,
+	gap: calc(1em * (var(--leading-normal) - 1)),
+	element: (
+		item: (
+			[background]:
+				linear-gradient(
+					110deg,
+					var(--skeleton-background) 8%,
+					var(--skeleton-shine-color) 18%,
+					var(--skeleton-background) 33%
+				),
+			background-size: 200% 100%,
+			height: 1em,
+			border-radius: var(--rounded),
+			animation: var(--animation-shine),
+		),
+	),
+) !default;

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

@@ -33,7 +33,7 @@ $vv-textarea: (
 			overflow: hidden,
 			background-color: var(--input-background-color),
 			will-change: background-color,
-			transition: background-color 0.3s ease-in-out,
+			transition: var(--transition-colors),
 			pseudo: (
 				before: (
 					position: absolute,
@@ -49,7 +49,7 @@ $vv-textarea: (
 					transform: scaleX(0),
 					transform-origin: left,
 					will-change: transform,
-					transition: transform 0.3s ease-in-out,
+					transition: var(--transition-transform),
 				),
 			),
 			state: (
@@ -218,7 +218,7 @@ $vv-textarea: (
 					margin: 0,
 					will-change: 'transform',
 					transform-origin: left,
-					transition: all 0.3s ease-in-out,
+					transition: var(--transition-all),
 				),
 				input: (
 					pseudo: (
@@ -232,11 +232,11 @@ $vv-textarea: (
 				focus-within: (
 					element: (
 						label: (
-							transform: translateY(-1.2ch),
+							transform: translateY(-0.8em),
 							font-size: var(--text-12),
 						),
 						input: (
-							transform: translateY(0.85ch),
+							transform: translateY(0.55em),
 							pseudo: (
 								placeholder: (
 									opacity: 1,
@@ -248,11 +248,11 @@ $vv-textarea: (
 				dirty: (
 					element: (
 						label: (
-							transform: translateY(-1.2ch),
+							transform: translateY(-0.8em),
 							font-size: var(--text-12),
 						),
 						input: (
-							transform: translateY(0.85ch),
+							transform: translateY(0.55em),
 							pseudo: (
 								placeholder: (
 									opacity: 1,

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

@@ -17,7 +17,7 @@ $vv-tooltip: (
 	text-align: center,
 	box-shadow: var(--shadow-md),
 	will-change: opacity,
-	transition: opacity 0.3s ease-in-out,
+	transition: var(--transition-opacity),
 	pseudo: (
 		after: (
 			position: absolute,