@volverjs/style 0.1.2-beta.25 → 0.1.2-beta.27

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,22 @@
+$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%
+				),
+			[color]: transparent,
+			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,

package/src/tools/_mixins.scss

@@ -857,6 +857,7 @@
 	$modifiers-key: 'modifier',
 	$states-key: 'state',
 	$breakpoints-key: 'breakpoint',
+	$transitions-key: 'transition',
 	$props: true,
 	$zero-specificity: true,
 	$custom-props: false,
@@ -865,6 +866,7 @@
 	$custom-modifiers: false,
 	$custom-states: false,
 	$custom-breakpoints: false,
+	$custom-transitions: false,
 	$bps: (xxs: 0)
 ) {
 	@if type-of($map) == 'map' and $block != '' {
@@ -951,6 +953,21 @@
 			}
 		}
 
+		// transition
+		@if not $custom-transitions {
+			@if map.has-key($map, $transitions-key) {
+				@include spread-map-into-transitions(
+					$map: $map,
+					$prefix: $block,
+					$key: $transitions-key,
+					$block: $selector,
+					$props: $props,
+					$zero-specificity: $zero-specificity,
+					$bps: $bps
+				);
+			}
+		}
+
 		// breakpoints
 		@if not $custom-breakpoints {
 			@if map.has-key($map, $breakpoints-key) {
@@ -967,3 +984,81 @@
 		}
 	}
 }
+
+// Transform a map into a list of transitions
+@mixin spread-map-into-transitions(
+	$map: (),
+	$prefix: '',
+	$key: 'transition',
+	$block: null,
+	$props: true,
+	$zero-specificity: true,
+	$bps: (
+		xxs: 0,
+	)
+) {
+	@if not $block {
+		$block: &;
+	}
+	@if type-of(map.get($map, $key)) == 'map' {
+		@each $transition, $states in map.get($map, $key) {
+			@each $state, $value in $states {
+				@if $state in [ 'enter-from', 'enter-active', 'enter-to',
+					'leave-from', 'leave-active', 'leave-to', 'active',
+					'inert' ] and type-of($value) == 'map'
+				{
+					$selector: '.#{$transition}';
+
+					@if $prefix != '' {
+						$selector: '.#{$prefix}--#{$transition}';
+					}
+
+					@if $state == 'active' {
+						$selector: (
+							'#{$selector}-enter-active',
+							'#{$selector}-leave-active'
+						);
+					} @else if $state == 'inert' {
+						$selector: (
+							'#{$selector}-enter-from',
+							'#{$selector}-leave-to'
+						);
+					} @else {
+						$selector: '#{$selector}-#{$state}';
+					}
+
+					// map props and attributes
+					@include wrap-with-where(
+						$selector,
+						$enabled: $zero-specificity
+					) {
+						@include spread-map-into-attrs(
+							$map: $value,
+							$prefix: $prefix,
+							$variant: #{$key}-#{$transition}-#{$state},
+							$deep: true,
+							$ignore: (
+								'element',
+							),
+							$props: $props
+						);
+					}
+
+					// map elements
+					@if map.get($value, 'element') {
+						@include spread-map-into-elements(
+							$original: $map,
+							$map: $value,
+							$prefix: #{$prefix}-#{$key}-#{$transition}-#{$state},
+							$key: 'element',
+							$block: $block,
+							$modifier: $selector,
+							$props: $props,
+							$zero-specificity: $zero-specificity
+						);
+					}
+				}
+			}
+		}
+	}
+}

package/src/utilities/borders.scss

@@ -41,6 +41,7 @@
 	$class: border,
 	$attribute: border-width,
 	$prop: border,
+	$bps: $breakpoints,
 	$zero-specificity: $zero-specificity-for-utilities
 );
 
@@ -51,6 +52,7 @@
 		border-right-width,
 		border-left-width,
 	),
+	$bps: $breakpoints,
 	$prop: border,
 	$zero-specificity: $zero-specificity-for-utilities
 );
@@ -62,6 +64,7 @@
 		border-top-width,
 		border-bottom-width,
 	),
+	$bps: $breakpoints,
 	$prop: border,
 	$zero-specificity: $zero-specificity-for-utilities
 );
@@ -73,6 +76,7 @@
 		$attribute: (
 			border- + $value + -width,
 		),
+		$bps: $breakpoints,
 		$prop: border,
 		$zero-specificity: $zero-specificity-for-utilities
 	);
@@ -83,5 +87,6 @@
 	$map: $border-style,
 	$class: border,
 	$attribute: border-style,
+	$bps: $breakpoints,
 	$zero-specificity: $zero-specificity-for-utilities
 );

package/src/utilities/filters.scss

@@ -16,6 +16,14 @@
 	$zero-specificity: $zero-specificity-for-utilities
 );
 
+// saturation
+@include spread-map-into-utilities(
+	$map: $saturation,
+	$class: saturate,
+	$attribute: filter,
+	$zero-specificity: $zero-specificity-for-utilities
+);
+
 // backdrop blur
 @include spread-map-into-utilities(
 	$map: $blur,

package/src/utilities/index.scss

@@ -1,4 +1,3 @@
-@forward 'animation';
 @forward 'backgrounds';
 @forward 'borders';
 @forward 'colors';
@@ -6,8 +5,9 @@
 @forward 'filters';
 @forward 'flexbox';
 @forward 'grid';
+@forward 'interactivity';
 @forward 'layout';
 @forward 'sizing';
 @forward 'spacing';
-@forward 'typography';
 @forward 'transitions';
+@forward 'typography';

package/src/utilities/{animation.scss → interactivity.scss}

@@ -1,9 +1,10 @@
+@use 'sass:map';
 @use '../context' as *;
 
-// animate
+// grid template columns
 @include spread-map-into-utilities(
-	$map: $animate,
-	$class: 'animate',
-	$attribute: 'animation',
+	$map: $cursor,
+	$class: cursor,
+	$attribute: cursor,
 	$zero-specificity: $zero-specificity-for-utilities
 );

package/src/utilities/transitions.scss

@@ -1,10 +1,11 @@
 @use 'sass:map';
+@use 'sass:string';
 @use '../context' as *;
 
 // transition property
 @include spread-map-into-utilities(
 	$map: $transition-property,
-	$class: transition,
+	$class: transition-property,
 	$attribute: transition-property,
 	$zero-specificity: $zero-specificity-for-utilities
 );
@@ -28,3 +29,19 @@
 	$attribute: transition-timing-function,
 	$zero-specificity: $zero-specificity-for-utilities
 );
+
+@each $property, $value in $transition-property {
+	@include wrap-with-where(
+		$selector: '.transition-#{$property}',
+		$enabled: $zero-specificity-for-utilities
+	) {
+		transition-property: string.unquote($value);
+		@if $property != 'none' {
+			transition-duration: map.get($transition-duration-delay, 300);
+			transition-timing-function: map.get(
+				$transition-timing-function,
+				'in-out'
+			);
+		}
+	}
+}

package/src/utilities/typography.scss

@@ -24,6 +24,7 @@
 	$map: map.merge($font-size, $font-size-dynamic),
 	$class: text,
 	$attribute: font-size,
+	$bps: $breakpoints,
 	$prop: text,
 	$deep: false,
 	$zero-specificity: $zero-specificity-for-utilities

package/dist/props/animation.css

@@ -1 +0,0 @@
-@media (prefers-reduced-motion: no-preference){:where(:host,:root,.theme){--animate-none: none;--animate-indeterminate: indeterminate 2s infinite;--animate-progress-indeterminate: progress-indeterminate 1.5s linear infinite;--animate-spin: spin 1s infinite;--animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite;--animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--animate-bounce: bounce 1s infinite}}@keyframes indeterminate{0%{transform:scaleX(0)}50%{transform:scaleX(1);transform-origin:left}51%{transform:scaleX(1);transform-origin:center right}to{transform:scaleX(0);transform-origin:center right}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:translateY(0);animation-timing-function:cubic-bezier(0,0,.2,1)}}@keyframes progress-indeterminate{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes pie-masks{0%{opacity:1}50%,to{opacity:0}}

package/dist/utilities/animation.css

@@ -1 +0,0 @@
-:where(.animate-none){animation:none}:where(.animate-indeterminate){animation:indeterminate 2s infinite}:where(.animate-progress-indeterminate){animation:progress-indeterminate 1.5s linear infinite}:where(.animate-spin){animation:spin 1s infinite}:where(.animate-ping){animation:ping 1s cubic-bezier(0,0,.2,1) infinite}:where(.animate-pulse){animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}:where(.animate-bounce){animation:bounce 1s infinite}

package/src/settings/_animation.scss

@@ -1,9 +0,0 @@
-$animate: (
-	none: none,
-	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,
-) !default;