@volverjs/style 0.1.12-beta.2 → 0.1.12-beta.21

package/src/components/vv-textarea.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:list';
 @use '../context' as *;
 
 $component-name: map.get($components-names, vv-textarea);
@@ -15,34 +16,76 @@ $component-selector: '.#{ $component-name}';
 
 // disabled and readonly
 @each $state in ('disabled', 'readonly') {
+	$selector: '#{$component-selector}:has(textarea[#{$state}])';
 	@include wrap-with-where(
-		$selector: '#{$component-selector}:has(textarea:#{$state})',
+		$selector: $selector,
 		$enabled: $zero-specificity-for-components
 	) {
 		@extend %#{$component-name}--#{$state} !optional;
 	}
 
+	// element
 	@if map.get($component-map, 'state', $state, 'element') {
 		@each $element,
 			$map in map.get($component-map, 'state', $state, 'element')
 		{
+			$element-selector: (
+				'#{$selector} #{$component-selector}__#{$element}'
+			);
+			$alias: map.get($component-map, 'element', $element, '_alias');
+			@if $alias {
+				$element-selector: list.append(
+					$element-selector,
+					('#{$selector} #{$alias}')
+				);
+			}
+
 			@include wrap-with-where(
-				$selector:
-					'#{$component-selector}:has(textarea:#{$state}) #{$component-selector}__#{$element}',
+				$selector: $element-selector,
 				$enabled: $zero-specificity-for-components
 			) {
 				@extend %#{$component-name}-state-#{$state}__#{$element}
 						!optional;
 			}
 
+			// element state
 			@each $elementState, $elementMap in map.get($map, 'state') {
-				@include wrap-with-where(
-					$selector:
-						'#{$component-selector}:has(textarea:#{$state}) #{$component-selector}__#{$element}:#{$elementState}',
-					$enabled: $zero-specificity-for-components
-				) {
-					@extend %#{$component-name}-state-#{$state}-element-#{$element}--#{$elementState}
-							!optional;
+				@if $elementState {
+					$element-selector-state: ();
+					@each $item in $element-selector {
+						$element-selector-state: list.append(
+							$element-selector-state,
+							('#{$item}:#{$elementState}')
+						);
+					}
+
+					@include wrap-with-where(
+						$selector: $element-selector-state,
+						$enabled: $zero-specificity-for-components
+					) {
+						@extend %#{$component-name}-state-#{$state}-element-#{$element}--#{$elementState}
+								!optional;
+					}
+				}
+			}
+
+			// element pseudo
+			@each $pseudo, $pseudoMap in map.get($map, 'pseudo') {
+				@if $pseudo {
+					$element-selector-pseudo: ();
+					@each $item in $element-selector {
+						$element-selector-pseudo: list.append(
+							$element-selector-pseudo,
+							('#{$item}::#{$pseudo}')
+						);
+					}
+					@include wrap-with-where(
+						$selector: $element-selector-pseudo,
+						$enabled: $zero-specificity-for-components
+					) {
+						@extend %#{$component-name}-state-#{$state}-element-#{$element}--#{$pseudo}
+								!optional;
+					}
 				}
 			}
 		}

package/src/components/vv-tooltip.scss

@@ -14,7 +14,7 @@ $component-selector: '.#{ $component-name}';
 );
 
 @include wrap-with-where(
-	$selector: '*:has(#{$component-selector})',
+	$selector: '*:has(> #{$component-selector})',
 	$enabled: $zero-specificity-for-components
 ) {
 	position: relative;

package/src/export.scss

@@ -11,19 +11,21 @@
 	// #region CUSTOMIZATION
 	// colors
 	@each $key, $value in $colors {
-		@if type-of($value) == 'map' {
+		@if meta.type-of($value) == 'map' {
 			@each $subKey, $subValue in $value {
-				@if type-of($value) not 'map' {
+				@if meta.type-of($value) not 'map' {
 					@if not
-						str-index($subKey, 'hue') and not
-						str-index($subKey, 'saturation') and not
-						str-index($subKey, 'lightness')
+						string.index($subKey, 'hue') and not
+						string.index($subKey, 'saturation') and not
+						string.index($subKey, 'lightness')
 					{
 						@if '' + $key == $subKey {
 							#{'colors__' + $key}: $subValue;
 						} @else {
 							#{'colors__' + $key + '-' + $subKey}: $subValue;
 						}
+					} @else {
+						#{'colors-values__' + $key + '-' + $subKey}: $subValue;
 					}
 				}
 			}
@@ -32,49 +34,27 @@
 		}
 	}
 
-	// colors exported with no vars
-	@each $key, $value in $colors-computed {
-		@if type-of($value) == 'map' {
+	@each $key, $value in $dark-colors {
+		@if meta.type-of($value) == 'map' {
 			@each $subKey, $subValue in $value {
-				@if type-of($value) not 'map' {
+				@if meta.type-of($value) not 'map' {
 					@if not
-						str-index($subKey, 'hue') and not
-						str-index($subKey, 'saturation') and not
-						str-index($subKey, 'lightness')
+						string.index($subKey, 'hue') and not
+						string.index($subKey, 'saturation') and not
+						string.index($subKey, 'lightness')
 					{
 						@if '' + $key == $subKey {
-							#{'colors-computed__' + $key}: $subValue;
+							#{'dark-colors__' + $key}: $subValue;
 						} @else {
-							#{'colors-computed__' + $key + '-' + $subKey}: $subValue;
+							#{'dark-colors__' + $key + '-' + $subKey}: $subValue;
 						}
+					} @else {
+						#{'dark-colors-values__' + $key + '-' + $subKey}: $subValue;
 					}
 				}
 			}
 		} @else if $key != 'scheme' {
-			#{'colors-computed__' + $key}: $value;
-		}
-	}
-
-	// dark colors exported with no vars
-	@each $key, $value in $dark-colors-computed {
-		@if type-of($value) == 'map' {
-			@each $subKey, $subValue in $value {
-				@if type-of($value) not 'map' {
-					@if not
-						str-index($subKey, 'hue') and not
-						str-index($subKey, 'saturation') and not
-						str-index($subKey, 'lightness')
-					{
-						@if '' + $key == $subKey {
-							#{'dark-colors-computed__' + $key}: $subValue;
-						} @else {
-							#{'dark-colors-computed__' + $key + '-' + $subKey}: $subValue;
-						}
-					}
-				}
-			}
-		} @else if $key != 'scheme' {
-			#{'dark-colors-computed__' + $key}: $value;
+			#{'dark-colors__' + $key}: $value;
 		}
 	}
 
@@ -247,29 +227,17 @@
 
 	// #endregion
 
-	// #region GRADIENT
-	@each $size, $value in $gradient {
-		gradient__#{$size}: $value;
-	}
-	@each $size, $value in $noise {
-		noise__#{$size}: $value;
-	}
-	@each $size, $value in $noise-filter {
-		noise-filter__#{$size}: $value;
-	}
-
-	// #endregion
-
 	// ============================================================== */
 	// #region SPACING
 	// spacing & spacing-dynamic
 	@each $size, $value in $spacing {
 		spacing__#{$size}: $value;
 	}
+
 	@each $size, $value in $spacing-dynamic {
-		@if type-of($value) == 'map' {
+		@if meta.type-of($value) == 'map' {
 			@each $subKey, $subValue in $value {
-				@if type-of($value) not 'map' {
+				@if meta.type-of($value) not 'map' {
 					spacing-dynamic__#{$size}__#{$subKey}: $subValue;
 				}
 			}
@@ -280,10 +248,11 @@
 	@each $size, $value in $font-size {
 		font-size__#{$size}: $value;
 	}
+
 	@each $size, $value in $font-size-dynamic {
-		@if type-of($value) == 'map' {
+		@if meta.type-of($value) == 'map' {
 			@each $subKey, $subValue in $value {
-				@if type-of($value) not 'map' {
+				@if meta.type-of($value) not 'map' {
 					font-size-dynamic__#{$size}__#{$subKey}: $subValue;
 				}
 			}
@@ -458,6 +427,10 @@
 		#{'background-image__' + $key}: $value;
 	}
 
+	@each $key, $value in $gradient {
+		#{'gradient__' + $key}: $value;
+	}
+
 	// #endregion
 
 	// ============================================================== */
@@ -476,10 +449,6 @@
 		#{'box-shadow__' + $key}: $value;
 	}
 
-	@each $key, $value in $box-shadow-no-vars {
-		#{'box-shadow-no-vars__' + $key}: $value;
-	}
-
 	// opacity
 	@each $key, $value in $opacity {
 		#{'opacity__' + $key}: $value;
@@ -509,6 +478,11 @@
 		#{'brightness__' + $key}: $value;
 	}
 
+	// contrast
+	@each $key, $value in $contrast {
+		#{'contrast__' + $key}: $value;
+	}
+
 	// saturation
 	@each $key, $value in $saturation {
 		#{'saturation__' + $key}: $value;

package/src/props/background.scss

@@ -2,4 +2,5 @@
 
 :where(:host, :root, .theme) {
 	@include spread-map-into-props($background-image, $prefix: bg);
+	@include spread-map-into-props($gradient, $prefix: gradient);
 }

package/src/props/breakpoints.scss

@@ -2,14 +2,15 @@
 @use '../context' as *;
 
 :where(:host, :root, .theme) {
+	@include spread-map-into-props(
+		$map: map.remove($breakpoints, 'xxs'),
+		$prefix: breakpoint
+	);
+
 	@each $breakpoint, $breakpoint-value in $breakpoints {
 		@media screen and (min-width: $breakpoint-value) {
 			--breakpoint-key: #{$breakpoint};
 			--breakpoint-value: #{$breakpoint-value};
 		}
 	}
-	@include spread-map-into-props(
-		$map: map.remove($breakpoints, 'xxs'),
-		$prefix: breakpoint
-	);
 }

package/src/props/index.scss

@@ -4,7 +4,6 @@
 @use 'colors';
 @use 'effects';
 @use 'filters';
-@use 'gradient';
 @use 'input';
 @use 'layout';
 @use 'media';

package/src/props/spacing.scss

@@ -10,12 +10,12 @@
 	// dynamic
 	@each $name, $sizes in $spacing-dynamic {
 		@each $breakpoint, $size in $sizes {
-			@if map-has-key($breakpoints, $breakpoint) {
+			@if map.has-key($breakpoints, $breakpoint) {
 				@include media-breakpoint-up($breakpoint, $breakpoints) {
 					$var: $size;
 
 					// if is a static spacing
-					@if map-has-key($spacing, $size) {
+					@if map.has-key($spacing, $size) {
 						$var: var(--spacing-#{$size});
 					}
 

package/src/props/transitions.scss

@@ -145,3 +145,22 @@
 		background-position-x: -200%;
 	}
 }
+
+@keyframes clippath {
+	0%,
+	100% {
+		clip-path: inset(0 0 95% 0);
+	}
+
+	25% {
+		clip-path: inset(0 95% 0 0);
+	}
+
+	50% {
+		clip-path: inset(95% 0 0 0);
+	}
+
+	75% {
+		clip-path: inset(0 0 0 95%);
+	}
+}

package/src/props/typography.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use '../context' as *;
 
 :where(:host, :root, .theme) {
@@ -21,12 +22,12 @@
 	// font-size dynamic
 	@each $name, $sizes in $font-size-dynamic {
 		@each $breakpoint, $size in $sizes {
-			@if map-has-key($breakpoints, $breakpoint) {
+			@if map.has-key($breakpoints, $breakpoint) {
 				@include media-breakpoint-up($breakpoint, $breakpoints) {
 					$var: $size;
 
 					// if is a static font-size
-					@if map-has-key($font-size, $size) {
+					@if map.has-key($font-size, $size) {
 						$var: var(--text-#{$size});
 					}
 

package/src/settings/_background.scss

@@ -50,6 +50,8 @@ $background-image: (
 	none: none,
 	chevron:
 		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(#{hex-to-rgb($color-word)})' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"),
+	chessboard:
+		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' width='200' height='400'%3E%3Cdefs%3E%3Cpattern id='grid' width='20' height='20' patternUnits='userSpaceOnUse'%3E%3Crect fill='black' x='0' y='0' width='10' height='10' opacity='0.1'/%3E%3Crect fill='white' x='10' y='0' width='10' height='10'/%3E%3Crect fill='black' x='10' y='10' width='10' height='10' opacity='0.1'/%3E%3Crect fill='white' x='0' y='10' width='10' height='10'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23grid)' x='0' y='0' width='100%25' height='100%25'/%3E%3C/svg%3E"),
 	grid:
 		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none' stroke='rgb(51 65 85 / 0.25)'%3E%3Cpath d='M0 .5H31.5V32'/%3E%3C/svg%3E"),
 	check:
@@ -58,4 +60,230 @@ $background-image: (
 		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(#{hex-to-rgb($color-word)})' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"),
 	close:
 		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(#{hex-to-rgb($color-word)})' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 20L4 4m16 0L4 20'/%3E%3C/svg%3E"),
+	noise-1:
+		url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.005' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"),
+	noise-2:
+		url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"),
+	noise-3:
+		url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.25' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"),
+	noise-4:
+		url("data:image/svg+xml,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"),
+	noise-5:
+		url("data:image/svg+xml,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"),
+) !default;
+
+// gradient
+$gradient: (
+	brand:
+		linear-gradient(
+			to bottom right,
+			var(--color-brand-darken-3),
+			var(--color-brand),
+			var(--color-brand-lighten-3)
+		),
+	accent:
+		linear-gradient(
+			to bottom right,
+			var(--color-accent-darken-3),
+			var(--color-accent),
+			var(--color-accent-lighten-3)
+		),
+	info:
+		linear-gradient(
+			to bottom right,
+			var(--color-info-darken-3),
+			var(--color-info),
+			var(--color-info-lighten-3)
+		),
+	success:
+		linear-gradient(
+			to bottom right,
+			var(--color-success-darken-3),
+			var(--color-success),
+			var(--color-success-lighten-3)
+		),
+	warning:
+		linear-gradient(
+			to bottom right,
+			var(--color-warning-darken-3),
+			var(--color-warning),
+			var(--color-warning-lighten-3)
+		),
+	danger:
+		linear-gradient(
+			to bottom right,
+			var(--color-danger-darken-3),
+			var(--color-danger),
+			var(--color-danger-lighten-3)
+		),
+	gray:
+		linear-gradient(
+			to bottom right,
+			var(--color-gray-darken-3),
+			var(--color-gray),
+			var(--color-gray-lighten-3)
+		),
+	1:
+		linear-gradient(
+			to bottom right,
+			#1f005c,
+			#5b0060,
+			#870160,
+			#ac255e,
+			#ca485c,
+			#e16b5c,
+			#f39060,
+			#ffb56b
+		),
+	2: linear-gradient(to bottom right, #48005c, #8300e2, #a269ff),
+	3: #{radial-gradient(
+			circle at top right,
+			hsl(180deg 100% 50%),
+			hsl(180deg 100% 50% / 0%)
+		),
+	radial-gradient(
+			circle at bottom left,
+			hsl(328deg 100% 54%),
+			hsl(328deg 100% 54% / 0%)
+		)},
+	4: linear-gradient(to bottom right, #00f5a0, #00d9f5),
+	5: conic-gradient(from -270deg at 75% 110%, fuchsia, floralwhite),
+	6: conic-gradient(from -90deg at top left, black, white),
+	7: linear-gradient(to bottom right, #72c6ef, #004e8f),
+	8: conic-gradient(from 90deg at 50% 0%, #111, 50%, #222, #111),
+	9: conic-gradient(from 0.5turn at bottom center, lightblue, white),
+	10:
+		conic-gradient(
+			from 90deg at 40% -25%,
+			#ffd700,
+			#f79d03,
+			#ee6907,
+			#e6390a,
+			#de0d0d,
+			#d61039,
+			#cf1261,
+			#c71585,
+			#cf1261,
+			#d61039,
+			#de0d0d,
+			#ee6907,
+			#f79d03,
+			#ffd700,
+			#ffd700,
+			#ffd700
+		),
+	11: conic-gradient(at bottom left, deeppink, cyan),
+	12:
+		conic-gradient(
+			from 90deg at 25% -10%,
+			#ff4500,
+			#d3f340,
+			#7bee85,
+			#afeeee,
+			#7bee85
+		),
+	13:
+		radial-gradient(
+			circle at 50% 200%,
+			#000142,
+			#3b0083,
+			#b300c3,
+			#ff059f,
+			#ff4661,
+			#ffad86,
+			#fff3c7
+		),
+	14: conic-gradient(at top right, lime, cyan),
+	15: linear-gradient(to bottom right, #c7d2fe, #fecaca, #fef3c7),
+	16: radial-gradient(circle at 50% -250%, #374151, #111827, #000),
+	17: conic-gradient(from -90deg at 50% -25%, blue, blueviolet),
+	18: #{linear-gradient(
+			0deg,
+			hsla(0deg 100% 50% / 80%),
+			hsla(0deg 100% 50% / 0%) 75%
+		),
+	linear-gradient(
+		60deg,
+		hsla(60deg 100% 50% / 80%),
+		hsla(60deg 100% 50% / 0%) 75%,
+	),
+	linear-gradient(
+		120deg,
+		hsla(120deg 100% 50% / 80%),
+		hsla(120deg 100% 50% / 0%) 75%,
+	),
+	linear-gradient(
+		180deg,
+		hsla(180deg 100% 50% / 80%),
+		hsla(180deg 100% 50% / 0%) 75%,
+	),
+	linear-gradient(
+		240deg,
+		hsla(240deg 100% 50% / 80%),
+		hsla(240deg 100% 50% / 0%) 75%,
+	),
+	linear-gradient(
+			300deg,
+			hsla(300deg 100% 50% / 80%),
+			hsla(300deg 100% 50% / 0%) 75%
+		)},
+	19: linear-gradient(to bottom right, #ffe259, #ffa751),
+	20:
+		conic-gradient(
+			from -135deg at -10% center,
+			#ffa500,
+			#ff7715,
+			#ff522a,
+			#ff3f47,
+			#ff5482,
+			#ff69b4
+		),
+	21:
+		conic-gradient(
+			from -90deg at 25% 115%,
+			#f00,
+			#f06,
+			#f0c,
+			#c0f,
+			#60f,
+			#00f,
+			#00f,
+			#00f,
+			#00f
+		),
+	22: linear-gradient(to bottom right, #acb6e5, #86fde8),
+	23: linear-gradient(to bottom right, #536976, #292e49),
+	24:
+		conic-gradient(
+			from 0.5turn at 0% 0%,
+			#00c476,
+			10%,
+			#82b0ff,
+			90%,
+			#00c476
+		),
+	25: conic-gradient(at 125% 50%, #b78cf7, #ff7c94, #ffcf0d, #ff7c94, #b78cf7),
+	26: linear-gradient(to bottom right, #9796f0, #fbc7d4),
+	27: conic-gradient(from 0.5turn at bottom left, deeppink, rebeccapurple),
+	28: conic-gradient(from -90deg at 50% 105%, white, orchid),
+	29: #{radial-gradient(
+			circle at top right,
+			hsl(250deg 100% 85%),
+			hsl(250deg 100% 85% / 0%)
+		),
+	radial-gradient(
+			circle at bottom left,
+			hsl(220deg 90% 75%),
+			hsl(220deg 90% 75% / 0%)
+		)},
+	30: #{radial-gradient(
+			circle at top right,
+			hsl(150deg 100% 50%),
+			hsl(150deg 100% 50% / 0%)
+		),
+	radial-gradient(
+			circle at bottom left,
+			hsl(150deg 100% 84%),
+			hsl(150deg 100% 84% / 0%)
+		)},
 ) !default;