@volverjs/style 0.1.12-beta.1 → 0.1.12-beta.11

package/src/export.scss

@@ -24,6 +24,8 @@
 						} @else {
 							#{'colors__' + $key + '-' + $subKey}: $subValue;
 						}
+					} @else {
+						#{'colors-values__' + $key + '-' + $subKey}: $subValue;
 					}
 				}
 			}
@@ -32,8 +34,7 @@
 		}
 	}
 
-	// colors exported with no vars
-	@each $key, $value in $colors-computed {
+	@each $key, $value in $dark-colors {
 		@if type-of($value) == 'map' {
 			@each $subKey, $subValue in $value {
 				@if type-of($value) not 'map' {
@@ -43,38 +44,17 @@
 						str-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;
 		}
 	}
 
@@ -445,6 +425,10 @@
 		#{'background-image__' + $key}: $value;
 	}
 
+	@each $key, $value in $gradient {
+		#{'gradient__' + $key}: $value;
+	}
+
 	// #endregion
 
 	// ============================================================== */
@@ -463,10 +447,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;
@@ -496,6 +476,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/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/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;

package/src/settings/_colors.scss

@@ -7,7 +7,7 @@ $color-scheme: light !default;
 $color-transparent: transparent !default;
 $color-black: #000 !default;
 $color-white: #fff !default;
-$color-brand: #1976d2 !default;
+$color-brand: #166abd !default;
 $color-accent: #9c27b0 !default;
 $color-success: #178230 !default;
 $color-danger: #af2323 !default;
@@ -15,7 +15,7 @@ $color-info: #31ccec !default;
 $color-warning: #e7b735 !default;
 $color-gray: hsl(color.hue($color-brand) 15% 50%) !default;
 $color-word: hsl(color.hue($color-brand) 15% 10%) !default;
-$color-surface: hsl(color.hue($color-brand) 10% 98%) !default;
+$color-surface: hsl(color.hue($color-brand) 10% 100%) !default;
 $color-surface-palette: (
 	brand: hsl(var(--color-brand-hue) var(--color-brand-saturation) 90%),
 	accent: hsl(var(--color-accent-hue) var(--color-accent-saturation) 90%),
@@ -34,67 +34,23 @@ $color-surface-palette-no-vars: (
 ) !default;
 $color-shadow: hsl(color.hue($color-brand) 50% 20%) !default;
 $color-backdrop: hsla(color.hue($color-brand) 50% 20% / 20%) !default;
-$color-alpha: hsla(0deg 0% 0% / 0%) !default;
+$color-alpha: hsl(0deg 0% 0% / 0%) !default;
 
 // colors map
 $colors: (
 	scheme: $color-scheme,
 	transparent: $color-transparent,
-	black: hsla-map($color-black, 'black'),
-	white: hsla-map($color-white, 'white'),
-	brand: color-shades-map($color-brand, 'brand'),
-	accent: color-shades-map($color-accent, 'accent'),
-	success: color-shades-map($color-success, 'success'),
-	danger: color-shades-map($color-danger, 'danger'),
-	info: color-shades-map($color-info, 'info'),
-	warning: color-shades-map($color-warning, 'warning'),
-	gray: color-shades-map($color-gray, 'gray', $scale: 15%),
-	word: color-lighten-map($color-word, 'word', $scale: 12%, $fixed: true),
-	surface:
-		map.merge(
-			color-darken-map(
-				$color-surface,
-				'surface',
-				$scale: 2%,
-				$fixed: true
-			),
-			$color-surface-palette
-		),
 	shadow: hsla-map($color-shadow, 'shadow'),
 	backdrop: hsla-map($color-backdrop, 'backdrop'),
-	alpha: color-alpha-map($color-alpha, 'alpha', $steps: 5, $scale: 5%),
-) !default;
-
-// colors-computed map
-$colors-computed: (
-	scheme: $color-scheme,
-	transparent: $color-transparent,
-	black: hsla-map($color-black, 'black', $noVarExport: true),
-	white: hsla-map($color-white, 'white', $noVarExport: true),
-	shadow: hsla-map($color-shadow, 'shadow', $noVarExport: true),
-	backdrop: hsla-map($color-backdrop, 'backdrop', $noVarExport: true),
-	alpha:
-		color-alpha-map(
-			$color-alpha,
-			'alpha',
-			$steps: 5,
-			$scale: 5%,
-			$noVarExport: true
-		),
-	brand: color-shades-map($color-brand, 'brand', $noVarExport: true),
-	accent: color-shades-map($color-accent, 'accent', $noVarExport: true),
-	success: color-shades-map($color-success, 'success', $noVarExport: true),
-	danger: color-shades-map($color-danger, 'danger', $noVarExport: true),
-	info: color-shades-map($color-info, 'info', $noVarExport: true),
-	warning: color-shades-map($color-warning, 'warning', $noVarExport: true),
-	gray: color-shades-map($color-gray, 'gray', $scale: 15%, $noVarExport: true),
+	black: hsla-map($color-black, 'black'),
+	white: hsla-map($color-white, 'white'),
 	word:
 		color-lighten-map(
 			$color-word,
 			'word',
 			$scale: 12%,
 			$fixed: true,
-			$noVarExport: true
+			$inverted: false
 		),
 	surface:
 		map.merge(
@@ -102,9 +58,16 @@ $colors-computed: (
 				$color-surface,
 				'surface',
 				$scale: 2%,
-				$fixed: true,
-				$noVarExport: true
+				$fixed: true
 			),
-			$color-surface-palette-no-vars
+			$color-surface-palette
 		),
+	alpha: color-alpha-map($color-alpha, 'alpha', $steps: 5, $scale: 0.05),
+	brand: color-shades-map($color-brand, 'brand'),
+	accent: color-shades-map($color-accent, 'accent'),
+	success: color-shades-map($color-success, 'success'),
+	danger: color-shades-map($color-danger, 'danger'),
+	info: color-shades-map($color-info, 'info'),
+	warning: color-shades-map($color-warning, 'warning'),
+	gray: color-shades-map($color-gray, 'gray', $scale: 15%),
 ) !default;

package/src/settings/_effects.scss

@@ -26,24 +26,6 @@ $color-shadow-hue: color.hue(colors.$color-shadow);
 $color-shadow-saturation: color.saturation(colors.$color-shadow);
 $color-shadow-lightness: color.lightness(colors.$color-shadow);
 
-$box-shadow-no-vars: (
-	sm:
-		'0 1px 2px 0 hsla(#{$color-shadow-hue} #{$color-shadow-saturation} #{$color-shadow-lightness} / 5%)',
-	shadow:
-		'0 1px 3px 0 hsla(#{$color-shadow-hue} #{$color-shadow-saturation} #{$color-shadow-lightness} / 10%), 0 1px 2px -1px hsla(#{$color-shadow-hue} #{$color-shadow-saturation} #{$color-shadow-lightness} / 10%)',
-	md:
-		'0 4px 6px -1px hsla(#{$color-shadow-hue} #{$color-shadow-saturation} #{$color-shadow-lightness} / 10%), 0 2px 4px -2px hsla(#{$color-shadow-hue} #{$color-shadow-saturation} #{$color-shadow-lightness} / 10%)',
-	lg:
-		'0 10px 15px -3px hsla(#{$color-shadow-hue} #{$color-shadow-saturation} #{$color-shadow-lightness} / 10%), 0 4px 6px -4px hsla(#{$color-shadow-hue} #{$color-shadow-saturation} #{$color-shadow-lightness} / 10%)',
-	xl:
-		'0 20px 25px -5px hsla(#{$color-shadow-hue} #{$color-shadow-saturation} #{$color-shadow-lightness} / 10%), 0 8px 10px -6px hsla(#{$color-shadow-hue} #{$color-shadow-saturation} #{$color-shadow-lightness} / 10%)',
-	2xl:
-		'0 25px 50px -12px hsla(#{$color-shadow-hue} #{$color-shadow-saturation} #{$color-shadow-lightness} / 25%)',
-	inner:
-		'inset 0 2px 4px 0 hsla(#{$color-shadow-hue} #{$color-shadow-saturation} #{$color-shadow-lightness} / 5%)',
-	none: '0 0 #0000'
-) !default;
-
 // opacity
 $opacity: (
 	0: 0,

package/src/settings/_filters.scss

@@ -23,6 +23,21 @@ $brightness: (
 	125: brightness(1.25),
 	150: brightness(1.5),
 	200: brightness(2),
+	250: brightness(2.5),
+	500: brightness(5),
+	1000: brightness(10),
+) !default;
+
+// contrast
+$contrast: (
+	0: contrast(0),
+	50: contrast(0.5),
+	75: contrast(0.75),
+	100: contrast(1),
+	125: contrast(1.25),
+	150: contrast(1.5),
+	200: brightness(2),
+	300: brightness(3),
 ) !default;
 
 // saturation

package/src/settings/_index.scss

@@ -38,6 +38,7 @@
 @forward 'components/vv-radio-group';
 @forward 'components/vv-avatar';
 @forward 'components/vv-avatar-group';
+@forward 'components/vv-input-file';
 @forward 'components/vv-input-text';
 @forward 'components/vv-nav';
 @forward 'components/vv-progress';

package/src/settings/_input.scss

@@ -11,15 +11,16 @@ $input: (
 	line-height: var(--leading-normal),
 	min-height: var(--spacing-52),
 	min-width: 0,
+	spacing-top: var(--spacing-sm),
+	spacing-right: var(--spacing-sm),
 	spacing-bottom: var(--spacing-sm),
 	spacing-left: var(--spacing-sm),
-	spacing-right: var(--spacing-sm),
-	spacing-top: var(--spacing-sm),
 	text-overflow: ellipsis,
 	label: (
 		color: var(--color-word-2),
 		display: inline,
-		font-size: var(--text-xs),
+		font-size: var(--text-14),
+		font-weight: var(--font-normal),
 		gap: var(--spacing-xs),
 		max-width: 100%,
 		overflow: hidden,

package/src/settings/_layout.scss

@@ -114,6 +114,7 @@ $visibility: (
 
 // z-index
 $z-index: (
+	1: 1,
 	dropdown: 1000,
 	sticky: 1010,
 	fixed: 1020,

package/src/settings/_transitions.scss

@@ -39,4 +39,5 @@ $animation: (
 	pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite,
 	bounce: bounce 1s infinite,
 	shine: shine 1.5s infinite,
+	clippath: clippath 3s infinite,
 ) !default;

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

@@ -1,10 +1,10 @@
 $vv-accordion: (
 	--accordion-marker-size:
 		calc(var(--spacing-sm) + var(--leading-normal) * 1em),
-	--accordion-padding-top: var(--spacing-xs),
-	--accordion-padding-right: var(--spacing-xs),
-	--accordion-padding-bottom: var(--spacing-xs),
-	--accordion-padding-left: var(--spacing-xs),
+	--accordion-padding-top: var(--spacing-14),
+	--accordion-padding-right: var(--spacing-14),
+	--accordion-padding-bottom: var(--spacing-14),
+	--accordion-padding-left: var(--spacing-14),
 	overflow: hidden,
 	state: (
 		open: (
@@ -46,7 +46,6 @@ $vv-accordion: (
 			color: var(--color-word-2),
 			will-change: background-color,
 			transition: var(--transition-colors),
-			font-size: var(--text-sm),
 			border-radius: var(--rounded-lg),
 			-webkit-tap-highlight-color: transparent,
 			outline: none,

package/src/settings/components/_vv-alert-group.scss

@@ -5,17 +5,24 @@ $vv-alert-group: (
 	flex-direction: column,
 	gap: var(--spacing-sm),
 	overflow: hidden,
+	pointer-events: none,
 	element: (
 		list: (
 			_alias: '> [role="group"]',
 			display: flex,
 			flex-direction: column,
 			gap: var(--spacing-xs),
+			state: (
+				empty: (
+					display: none,
+				),
+			),
 		),
 		item: (
 			_alias: '> [role="group"] > *',
 			transition: var(--transition-all),
 			flex-shrink: 0,
+			pointer-events: auto,
 		),
 		not-first: (
 			_alias: '> [role="group"] > *:not(:first-child)',
@@ -58,10 +65,10 @@ $vv-alert-group: (
 			max-height: var(--h-full),
 		),
 		reverse: (
-			flex-flow: column-reverse,
+			flex-direction: column-reverse,
 			element: (
 				list: (
-					flex-flow: column-reverse,
+					flex-direction: column-reverse,
 				),
 			),
 		),

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

@@ -12,7 +12,6 @@ $vv-alert: (
 	gap: var(--spacing-sm),
 	min-width: 0,
 	overflow: hidden,
-	font-size: var(--text-sm),
 	padding: var(--spacing-sm),
 	element: (
 		header: (
@@ -23,6 +22,7 @@ $vv-alert: (
 			color: var(--color-word),
 			overflow: hidden,
 			text-overflow: ellipsis,
+			flex-shrink: 0,
 		),
 		title: (
 			min-width: 0,
@@ -133,10 +133,10 @@ $vv-alert: (
 			background-color: var(--color-surface-brand),
 			element: (
 				icon: (
-					color: var(--color-brand-darken-2),
+					color: var(--color-brand-darken-3),
 				),
 				header: (
-					color: var(--color-brand-darken-2),
+					color: var(--color-brand-darken-3),
 				),
 			),
 		),
@@ -174,7 +174,7 @@ $vv-alert: (
 				),
 				content: (
 					padding: var(--spacing-sm),
-					font-size: var(--text-xs),
+					font-size: var(--text-14),
 				),
 				footer: (
 					padding: 0 var(--spacing-sm) var(--spacing-sm)
@@ -215,18 +215,18 @@ $vv-alert: (
 					),
 				),
 				warning: (
-					border-color: var(--color-warning),
+					border-color: var(--color-warning-darken-5),
 					element: (
 						header: (
-							background-color: var(--color-warning),
+							background-color: var(--color-warning-darken-5),
 						),
 					),
 				),
 				info: (
-					border-color: var(--color-info),
+					border-color: var(--color-info-darken-5),
 					element: (
 						header: (
-							background-color: var(--color-info),
+							background-color: var(--color-info-darken-5),
 						),
 					),
 				),