@volverjs/style 0.1.22 → 0.1.24-beta.1

package/src/settings/_effects.scss

@@ -5,19 +5,19 @@
 // box-shadow
 $box-shadow: (
 	sm:
-		'0 1px 2px 0 hsla(var(--color-shadow-hue) var(--color-shadow-saturation) var(--color-shadow-lightness) / 5%)',
+		'0 1px 2px 0 color-mix(in srgb, var(--color-shadow), transparent 95%)',
 	shadow:
-		'0 1px 3px 0 hsla(var(--color-shadow-hue) var(--color-shadow-saturation) var(--color-shadow-lightness) / 10%), 0 1px 2px -1px hsla(var(--color-shadow-hue) var(--color-shadow-saturation) var(--color-shadow-lightness) / 10%)',
+		'0 1px 3px 0 color-mix(in srgb, var(--color-shadow), transparent 90%), 0 1px 2px -1px color-mix(in srgb, var(--color-shadow), transparent 90%)',
 	md:
-		'0 4px 6px -1px hsla(var(--color-shadow-hue) var(--color-shadow-saturation) var(--color-shadow-lightness) / 10%), 0 2px 4px -2px hsla(var(--color-shadow-hue) var(--color-shadow-saturation) var(--color-shadow-lightness) / 10%)',
+		'0 4px 6px -1px color-mix(in srgb, var(--color-shadow), transparent 90%), 0 2px 4px -2px color-mix(in srgb, var(--color-shadow), transparent 90%)',
 	lg:
-		'0 10px 15px -3px hsla(var(--color-shadow-hue) var(--color-shadow-saturation) var(--color-shadow-lightness) / 10%), 0 4px 6px -4px hsla(var(--color-shadow-hue) var(--color-shadow-saturation) var(--color-shadow-lightness) / 10%)',
+		'0 10px 15px -3px color-mix(in srgb, var(--color-shadow), transparent 90%), 0 4px 6px -4px color-mix(in srgb, var(--color-shadow), transparent 90%)',
 	xl:
-		'0 20px 25px -5px hsla(var(--color-shadow-hue) var(--color-shadow-saturation) var(--color-shadow-lightness) / 10%), 0 8px 10px -6px hsla(var(--color-shadow-hue) var(--color-shadow-saturation) var(--color-shadow-lightness) / 10%)',
+		'0 20px 25px -5px color-mix(in srgb, var(--color-shadow), transparent 90%), 0 8px 10px -6px color-mix(in srgb, var(--color-shadow), transparent 90%)',
 	2xl:
-		'0 25px 50px -12px hsla(var(--color-shadow-hue) var(--color-shadow-saturation) var(--color-shadow-lightness) / 25%)',
+		'0 25px 50px -12px color-mix(in srgb, var(--color-shadow), transparent 75%)',
 	inner:
-		'inset 0 2px 4px 0 hsla(var(--color-shadow-hue) var(--color-shadow-saturation) var(--color-shadow-lightness) / 5%)',
+		'inset 0 2px 4px 0 color-mix(in srgb, var(--color-shadow), transparent 95%)',
 	none: '0 0 #0000',
 ) !default;
 

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

@@ -48,8 +48,9 @@ $vv-accordion: (
 			will-change: background-color,
 			transition: var(--transition-colors),
 			border-radius: var(--rounded-lg),
-			-webkit-tap-highlight-color: transparent,
 			outline: none,
+			list-style-type: none,	
+			-webkit-tap-highlight-color: transparent,
 			pseudo: (
 				before: (
 					display: block,

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

@@ -67,19 +67,11 @@ $vv-badge: (
 			border-radius: 1em,
 		),
 		white: (
-			background-color:
-				hsl(
-					var(--color-white-hue) var(--color-white-saturation)
-						var(--color-white-lightness) / 80%
-				),
+			background-color: color-mix(in srgb, var(--color-white), transparent 20%),
 			color: var(--color-black),
 		),
 		black: (
-			background-color:
-				hsl(
-					var(--color-black-hue) var(--color-black-saturation)
-						var(--color-black-lightness) / 80%
-				),
+			background-color: color-mix(in srgb, var(--color-black), transparent 20%),
 			color: var(--color-white),
 		),
 		danger: (

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

@@ -89,7 +89,7 @@ $vv-button: (
 			),
 		),
 		secondary: (
-			background: var(--color-white),
+			background: var(--color-surface),
 			border-style: solid,
 			border-color: var(--color-gray-lighten-4),
 			color: var(--color-word),

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

@@ -45,28 +45,14 @@ $vv-card: (
 	),
 	modifier: (
 		glass: (
-			background-color:
-				hsl(
-					var(--color-surface-hue) var(--color-surface-saturation)
-						var(--color-surface-lightness) / 60%
-				),
+			background-color: color-mix(in srgb, var(--color-surface), transparent 40%),
 			backdrop-filter: var(--blur-md),
 			element: (
 				header: (
-					background-color:
-						hsl(
-							var(--color-surface-hue)
-								var(--color-surface-saturation)
-								var(--color-surface-lightness) / 30%
-						),
+					background-color: color-mix(in srgb, var(--color-surface), transparent 70%),
 				),
 				footer: (
-					background-color:
-						hsl(
-							var(--color-surface-hue)
-								var(--color-surface-saturation)
-								var(--color-surface-lightness) / 30%
-						),
+					background-color: color-mix(in srgb, var(--color-surface), transparent 70%),
 				),
 			),
 		),

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

@@ -122,12 +122,7 @@ $vv-nav: (
 						current: (
 							color: var(--color-brand),
 							border-color: currentcolor,
-							background-color:
-								hsl(
-									var(--color-brand-hue)
-										var(--color-brand-saturation)
-										var(--color-brand-lightness) / 5%
-								),
+							background-color: color-mix(in srgb, var(--color-brand), transparent 95%),
 						),
 					),
 				),

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

@@ -9,6 +9,7 @@ $vv-text: (
 			letter-spacing: var(--tracking-tight),
 			margin-top: var(--spacing-24),
 			margin-bottom: var(--spacing-16),
+			color: var(--color-word),
 		),
 		copy: (
 			margin-block: var(--spacing-16),

package/src/themes/dark/components/_vv-alert.scss

@@ -2,21 +2,25 @@
 @use '../context' as *;
 
 $component-name: map.get($components-names, vv-alert);
-$component-map: $dark-vv-alert;
 
 @mixin theme-dark-vv-alert {
-	@include spread-map-into-props(
-		$map: $component-map,
-		$prefix: $component-name
+	@include spread-theme-component(
+		$base-map: $vv-alert,
+		$theme-map: $dark-vv-alert,
+		$component-name: $component-name,
+		$bps: $breakpoints,
+		$use-custom-props: $use-custom-props-for-components
 	);
 }
 
-:where(:host, :root, .theme):not(.theme--light) {
-	@media (prefers-color-scheme: dark) {
-		@include theme-dark-vv-alert;
+@include layer(themes, $use-css-layers, $layer-prefix) {
+	:where(:host, :root, .theme):not(.theme--light) {
+		@media (prefers-color-scheme: dark) {
+			@include theme-dark-vv-alert;
+		}
 	}
-}
 
-:where(.theme.theme--dark) {
-	@include theme-dark-vv-alert;
+	:where(.theme.theme--dark) {
+		@include theme-dark-vv-alert;
+	}
 }

package/src/themes/dark/components/_vv-avatar.scss

@@ -2,21 +2,25 @@
 @use '../context' as *;
 
 $component-name: map.get($components-names, vv-avatar);
-$component-map: $dark-vv-avatar;
 
 @mixin theme-dark-vv-avatar {
-	@include spread-map-into-props(
-		$map: $component-map,
-		$prefix: $component-name
+	@include spread-theme-component(
+		$base-map: $vv-avatar,
+		$theme-map: $dark-vv-avatar,
+		$component-name: $component-name,
+		$bps: $breakpoints,
+		$use-custom-props: $use-custom-props-for-components
 	);
 }
 
-:where(:host, :root, .theme):not(.theme--light) {
-	@media (prefers-color-scheme: dark) {
-		@include theme-dark-vv-avatar;
+@include layer(themes, $use-css-layers, $layer-prefix) {
+	:where(:host, :root, .theme):not(.theme--light) {
+		@media (prefers-color-scheme: dark) {
+			@include theme-dark-vv-avatar;
+		}
 	}
-}
 
-:where(.theme.theme--dark) {
-	@include theme-dark-vv-avatar;
+	:where(.theme.theme--dark) {
+		@include theme-dark-vv-avatar;
+	}
 }

package/src/themes/dark/components/_vv-badge.scss

@@ -2,21 +2,25 @@
 @use '../context' as *;
 
 $component-name: map.get($components-names, vv-badge);
-$component-map: $dark-vv-badge;
 
 @mixin theme-dark-vv-badge {
-	@include spread-map-into-props(
-		$map: $component-map,
-		$prefix: $component-name
+	@include spread-theme-component(
+		$base-map: $vv-badge,
+		$theme-map: $dark-vv-badge,
+		$component-name: $component-name,
+		$bps: $breakpoints,
+		$use-custom-props: $use-custom-props-for-components
 	);
 }
 
-:where(:host, :root, .theme):not(.theme--light) {
-	@media (prefers-color-scheme: dark) {
-		@include theme-dark-vv-badge;
+@include layer(themes, $use-css-layers, $layer-prefix) {
+	:where(:host, :root, .theme):not(.theme--light) {
+		@media (prefers-color-scheme: dark) {
+			@include theme-dark-vv-badge;
+		}
 	}
-}
 
-:where(.theme.theme--dark) {
-	@include theme-dark-vv-badge;
+	:where(.theme.theme--dark) {
+		@include theme-dark-vv-badge;
+	}
 }

package/src/themes/dark/components/_vv-button.scss

@@ -2,21 +2,25 @@
 @use '../context' as *;
 
 $component-name: map.get($components-names, vv-button);
-$component-map: $dark-vv-button;
 
 @mixin theme-dark-vv-button {
-	@include spread-map-into-props(
-		$map: $component-map,
-		$prefix: $component-name
+	@include spread-theme-component(
+		$base-map: $vv-button,
+		$theme-map: $dark-vv-button,
+		$component-name: $component-name,
+		$bps: $breakpoints,
+		$use-custom-props: $use-custom-props-for-components
 	);
 }
 
-:where(:host, :root, .theme):not(.theme--light) {
-	@media (prefers-color-scheme: dark) {
-		@include theme-dark-vv-button;
+@include layer(themes, $use-css-layers, $layer-prefix) {
+	:where(:host, :root, .theme):not(.theme--light) {
+		@media (prefers-color-scheme: dark) {
+			@include theme-dark-vv-button;
+		}
 	}
-}
 
-:where(.theme.theme--dark) {
-	@include theme-dark-vv-button;
+	:where(.theme.theme--dark) {
+		@include theme-dark-vv-button;
+	}
 }

package/src/themes/dark/components/_vv-dropdown-action.scss

@@ -2,21 +2,25 @@
 @use '../context' as *;
 
 $component-name: map.get($components-names, vv-dropdown-action);
-$component-map: $dark-vv-dropdown-action;
 
 @mixin theme-dark-vv-dropdown-action {
-	@include spread-map-into-props(
-		$map: $component-map,
-		$prefix: $component-name
+	@include spread-theme-component(
+		$base-map: $vv-dropdown-action,
+		$theme-map: $dark-vv-dropdown-action,
+		$component-name: $component-name,
+		$bps: $breakpoints,
+		$use-custom-props: $use-custom-props-for-components
 	);
 }
 
-:where(:host, :root, .theme):not(.theme--light) {
-	@media (prefers-color-scheme: dark) {
-		@include theme-dark-vv-dropdown-action;
+@include layer(themes, $use-css-layers, $layer-prefix) {
+	:where(:host, :root, .theme):not(.theme--light) {
+		@media (prefers-color-scheme: dark) {
+			@include theme-dark-vv-dropdown-action;
+		}
 	}
-}
 
-:where(.theme.theme--dark) {
-	@include theme-dark-vv-dropdown-action;
+	:where(.theme.theme--dark) {
+		@include theme-dark-vv-dropdown-action;
+	}
 }

package/src/themes/dark/components/_vv-dropdown-option.scss

@@ -2,21 +2,25 @@
 @use '../context' as *;
 
 $component-name: map.get($components-names, vv-dropdown-option);
-$component-map: $dark-vv-dropdown-option;
 
 @mixin theme-dark-vv-dropdown-option {
-	@include spread-map-into-props(
-		$map: $component-map,
-		$prefix: $component-name
+	@include spread-theme-component(
+		$base-map: $vv-dropdown-option,
+		$theme-map: $dark-vv-dropdown-option,
+		$component-name: $component-name,
+		$bps: $breakpoints,
+		$use-custom-props: $use-custom-props-for-components
 	);
 }
 
-:where(:host, :root, .theme):not(.theme--light) {
-	@media (prefers-color-scheme: dark) {
-		@include theme-dark-vv-dropdown-option;
+@include layer(themes, $use-css-layers, $layer-prefix) {
+	:where(:host, :root, .theme):not(.theme--light) {
+		@media (prefers-color-scheme: dark) {
+			@include theme-dark-vv-dropdown-option;
+		}
 	}
-}
 
-:where(.theme.theme--dark) {
-	@include theme-dark-vv-dropdown-option;
+	:where(.theme.theme--dark) {
+		@include theme-dark-vv-dropdown-option;
+	}
 }

package/src/themes/dark/components/_vv-nav.scss

@@ -2,21 +2,25 @@
 @use '../context' as *;
 
 $component-name: map.get($components-names, vv-nav);
-$component-map: $dark-vv-nav;
 
 @mixin theme-dark-vv-nav {
-	@include spread-map-into-props(
-		$map: $component-map,
-		$prefix: $component-name
+	@include spread-theme-component(
+		$base-map: $vv-nav,
+		$theme-map: $dark-vv-nav,
+		$component-name: $component-name,
+		$bps: $breakpoints,
+		$use-custom-props: $use-custom-props-for-components
 	);
 }
 
-:where(:host, :root, .theme):not(.theme--light) {
-	@media (prefers-color-scheme: dark) {
-		@include theme-dark-vv-nav;
+@include layer(themes, $use-css-layers, $layer-prefix) {
+	:where(:host, :root, .theme):not(.theme--light) {
+		@media (prefers-color-scheme: dark) {
+			@include theme-dark-vv-nav;
+		}
 	}
-}
 
-:where(.theme.theme--dark) {
-	@include theme-dark-vv-nav;
+	:where(.theme.theme--dark) {
+		@include theme-dark-vv-nav;
+	}
 }

package/src/themes/dark/components/_vv-select.scss

@@ -2,21 +2,25 @@
 @use '../context' as *;
 
 $component-name: map.get($components-names, vv-select);
-$component-map: $dark-vv-select;
 
 @mixin theme-dark-vv-select {
-	@include spread-map-into-props(
-		$map: $component-map,
-		$prefix: $component-name
+	@include spread-theme-component(
+		$base-map: $vv-select,
+		$theme-map: $dark-vv-select,
+		$component-name: $component-name,
+		$bps: $breakpoints,
+		$use-custom-props: $use-custom-props-for-components
 	);
 }
 
-:where(:host, :root, .theme):not(.theme--light) {
-	@media (prefers-color-scheme: dark) {
-		@include theme-dark-vv-select;
+@include layer(themes, $use-css-layers, $layer-prefix) {
+	:where(:host, :root, .theme):not(.theme--light) {
+		@media (prefers-color-scheme: dark) {
+			@include theme-dark-vv-select;
+		}
 	}
-}
 
-:where(.theme.theme--dark) {
-	@include theme-dark-vv-select;
+	:where(.theme.theme--dark) {
+		@include theme-dark-vv-select;
+	}
 }

package/src/themes/dark/props/_background.scss

@@ -4,6 +4,7 @@
 	@include spread-map-into-props($dark-background-image, 'bg');
 }
 
+@include layer(themes, $use-css-layers, $layer-prefix) {
 :where(:host, :root, .theme):not(.theme--light) {
 	@media (prefers-color-scheme: dark) {
 		@include theme-dark-bg;
@@ -13,3 +14,5 @@
 :where(.theme.theme--dark) {
 	@include theme-dark-bg;
 }
+
+}

package/src/themes/dark/props/_colors.scss

@@ -4,6 +4,7 @@
 	@include spread-map-into-props($dark-colors, 'color');
 }
 
+@include layer(themes, $use-css-layers, $layer-prefix) {
 :where(:host, :root, .theme):not(.theme--light) {
 	@media (prefers-color-scheme: dark) {
 		@include theme-dark-colors;
@@ -13,3 +14,5 @@
 :where(.theme.theme--dark) {
 	@include theme-dark-colors;
 }
+
+}

package/src/themes/dark/props/_input.scss

@@ -4,6 +4,7 @@
 	@include spread-map-into-props($dark-input, 'input');
 }
 
+@include layer(themes, $use-css-layers, $layer-prefix) {
 :where(:host, :root, .theme):not(.theme--light) {
 	@media (prefers-color-scheme: dark) {
 		@include theme-dark-input;
@@ -13,3 +14,5 @@
 :where(.theme.theme--dark) {
 	@include theme-dark-input;
 }
+
+}

package/src/themes/dark/settings/_colors.scss

@@ -1,41 +1,55 @@
 @use 'sass:color';
 @use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
 @use '../../../tools/functions' as *;
 @use '../../../settings/colors' as *;
+@use '../../../config' as config;
 
 $dark-color-scheme: dark !default;
 $dark-color-word: hsl(color-hue($color-brand) 15% 85%) !default;
 $dark-color-surface: hsl(color-hue($color-brand) 10% 5%) !default;
-$dark-color-surface-palette: (
-	brand: hsl(var(--color-brand-hue) var(--color-brand-saturation) 10%),
-	accent: hsl(var(--color-accent-hue) var(--color-accent-saturation) 10%),
-	success: hsl(var(--color-success-hue) var(--color-success-saturation) 10%),
-	danger: hsl(var(--color-danger-hue) var(--color-danger-saturation) 10%),
-	info: hsl(var(--color-info-hue) var(--color-info-saturation) 10%),
-	warning: hsl(var(--color-warning-hue) var(--color-warning-saturation) 10%),
-) !default;
-$dark-color-surface-palette-no-vars: (
-	brand: hsl(color-hue($color-brand) color-saturation($color-brand) 10%),
-	accent: hsl(color-hue($color-accent) color-saturation($color-accent) 10%),
-	success: hsl(color-hue($color-success) color-saturation($color-success) 10%),
-	danger: hsl(color-hue($color-danger) color-saturation($color-danger) 10%),
-	info: hsl(color-hue($color-info) color-saturation($color-info) 10%),
-	warning: hsl(color-hue($color-warning) color-saturation($color-warning) 10%),
+
+// Surface palette for dark theme
+$dark-color-surface-palette: if(
+	sass(config.$use-color-mix):
+		(
+			brand: string.unquote('hsl(from var(--color-brand) h s 10%)'),
+			accent: string.unquote('hsl(from var(--color-accent) h s 10%)'),
+			success: string.unquote('hsl(from var(--color-success) h s 10%)'),
+			danger: string.unquote('hsl(from var(--color-danger) h s 10%)'),
+			info: string.unquote('hsl(from var(--color-info) h s 10%)'),
+			warning: string.unquote('hsl(from var(--color-warning) h s 10%)'),
+		);
+	else:
+		(
+			brand: hsl(var(--color-brand-hue) var(--color-brand-saturation) 10%),
+			accent: hsl(var(--color-accent-hue) var(--color-accent-saturation) 10%),
+			success: hsl(var(--color-success-hue) var(--color-success-saturation) 10%),
+			danger: hsl(var(--color-danger-hue) var(--color-danger-saturation) 10%),
+			info: hsl(var(--color-info-hue) var(--color-info-saturation) 10%),
+			warning: hsl(var(--color-warning-hue) var(--color-warning-saturation) 10%),
+		)
 ) !default;
 
 // color map
-$dark-colors: (
-	scheme: $dark-color-scheme,
-	word: color-darken-map($dark-color-word, 'word', $scale: 12%, $fixed: true),
-	surface:
-		map.merge(
-			color-lighten-map(
-				$dark-color-surface,
-				'surface',
-				$scale: 5%,
-				$fixed: true,
-				$inverted: false
+$dark-colors: if(
+	sass(config.$use-color-mix):
+		(
+			scheme: $dark-color-scheme,
+			word: color-mix-darken-map($dark-color-word, 'word', $steps: 5, $scale: 12%),
+			surface: map.merge(
+				color-mix-lighten-map($dark-color-surface, 'surface', $steps: 5, $scale: 5%),
+				$dark-color-surface-palette
+			),
+		);
+	else:
+		(
+			scheme: $dark-color-scheme,
+			word: color-darken-map($dark-color-word, 'word', $scale: 12%, $fixed: true),
+			surface: map.merge(
+				color-lighten-map($dark-color-surface, 'surface', $scale: 5%, $fixed: true, $inverted: false),
+				$dark-color-surface-palette
 			),
-			$dark-color-surface-palette
-		),
+		)
 ) !default;

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

@@ -59,19 +59,41 @@ $dark-vv-alert: (
 			modifier: (
 				danger: (
 					border-color: var(--color-danger-lighten-3),
+					element: (
+						header: (
+							color: var(--color-white)
+						),
+					),
 				),
 				brand: (
 					border-color: var(--color-brand-lighten-3),
+					element: (
+						header: (
+							color: var(--color-white)
+						),
+					),
 				),
 				success: (
 					border-color: var(--color-success-lighten-3),
+					element: (
+						header: (
+							color: var(--color-white)
+						),
+					),
 				),
 				accent: (
 					border-color: var(--color-accent-lighten-3),
+					element: (
+						header: (
+							color: var(--color-white)
+						),
+					),
 				),
 				warning: (
+					border-color: var(--color-warning-darken-5),
 					element: (
 						header: (
+							color: var(--color-white),
 							background-color: var(--color-warning-darken-5),
 						),
 					),
@@ -80,6 +102,7 @@ $dark-vv-alert: (
 					border-color: var(--color-info-darken-2),
 					element: (
 						header: (
+							color: var(--color-white),
 							background-color: var(--color-info-darken-5),
 						),
 					),

package/src/themes/dark/settings/components/_vv-avatar.scss

@@ -21,6 +21,9 @@ $dark-vv-avatar: (
 				accent: (
 					color: var(--color-accent-lighten-5),
 				),
+				surface: (
+					color: var(--color-word-2),
+				),
 			),
 		),
 	),

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

@@ -19,7 +19,6 @@ $dark-vv-button: (
 		),
 		secondary: (
 			border-color: var(--color-gray-darken-1),
-			background: transparent,
 			text-shadow: 0 1px 0 var(--color-gray-darken-5),
 			state: (
 				focus-visible: (