@volverjs/style 0.1.23 → 0.1.24-beta.2

package/src/settings/_colors.scss

@@ -1,12 +1,19 @@
 @use 'sass:color';
 @use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
 @use '../tools/functions' as *;
+@use '../config' as config;
 
-// color variables
+// ============================================
+// Color Variables
+// ============================================
 $color-scheme: light !default;
 $color-transparent: transparent !default;
 $color-black: #000 !default;
 $color-white: #fff !default;
+
+// Primary colors - accepts any CSS color format (hex, rgb, hsl, oklch, etc.)
 $color-brand: #166abd !default;
 $color-accent: #9c27b0 !default;
 $color-success: #178230 !default;
@@ -16,58 +23,81 @@ $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% 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%),
-	success: hsl(var(--color-success-hue) var(--color-success-saturation) 90%),
-	danger: hsl(var(--color-danger-hue) var(--color-danger-saturation) 90%),
-	info: hsl(var(--color-info-hue) var(--color-info-saturation) 90%),
-	warning: hsl(var(--color-warning-hue) var(--color-warning-saturation) 90%),
-) !default;
-$color-surface-palette-no-vars: (
-	brand: hsl(color-hue($color-brand) color-saturation($color-brand) 90%),
-	accent: hsl(color-hue($color-accent) color-saturation($color-accent) 90%),
-	success: hsl(color-hue($color-success) color-saturation($color-success) 90%),
-	danger: hsl(color-hue($color-danger) color-saturation($color-danger) 90%),
-	info: hsl(color-hue($color-info) color-saturation($color-info) 90%),
-	warning: hsl(color-hue($color-warning) color-saturation($color-warning) 90%),
-) !default;
 $color-shadow: hsl(color-hue($color-brand) 50% 20%) !default;
 $color-backdrop: hsla(color-hue($color-brand) 50% 20% / 20%) !default;
 $color-alpha: hsl(0deg 0% 0% / 0%) !default;
 
-// colors map
-$colors: (
-	scheme: $color-scheme,
-	transparent: $color-transparent,
-	shadow: hsla-map($color-shadow, 'shadow'),
-	backdrop: hsla-map($color-backdrop, 'backdrop'),
-	black: hsla-map($color-black, 'black'),
-	white: hsla-map($color-white, 'white'),
-	word:
-		color-lighten-map(
-			$color-word,
-			'word',
-			$scale: 12%,
-			$fixed: true,
-			$inverted: false
-		),
-	surface:
-		map.merge(
-			color-darken-map(
-				$color-surface,
-				'surface',
-				$scale: 2%,
-				$fixed: true
+// ============================================
+// Surface Palette (semantic surface colors)
+// ============================================
+$color-surface-palette: if(
+	sass(config.$use-color-mix):
+		(
+			brand: string.unquote('hsl(from var(--color-brand) h s 90%)'),
+			accent: string.unquote('hsl(from var(--color-accent) h s 90%)'),
+			success: string.unquote('hsl(from var(--color-success) h s 90%)'),
+			danger: string.unquote('hsl(from var(--color-danger) h s 90%)'),
+			info: string.unquote('hsl(from var(--color-info) h s 90%)'),
+			warning: string.unquote('hsl(from var(--color-warning) h s 90%)'),
+		);
+	else:
+		(
+			brand: hsl(var(--color-brand-hue) var(--color-brand-saturation) 90%),
+			accent: hsl(var(--color-accent-hue) var(--color-accent-saturation) 90%),
+			success: hsl(var(--color-success-hue) var(--color-success-saturation) 90%),
+			danger: hsl(var(--color-danger-hue) var(--color-danger-saturation) 90%),
+			info: hsl(var(--color-info-hue) var(--color-info-saturation) 90%),
+			warning: hsl(var(--color-warning-hue) var(--color-warning-saturation) 90%),
+		)
+) !default;
+
+// ============================================
+// Colors Map
+// Override this map or use map.merge() to customize
+// ============================================
+$colors: if(
+	sass(config.$use-color-mix):
+		(
+			scheme: $color-scheme,
+			transparent: $color-transparent,
+			shadow: color-base-map($color-shadow, 'shadow'),
+			backdrop: color-base-map($color-backdrop, 'backdrop'),
+			black: color-base-map($color-black, 'black'),
+			white: color-base-map($color-white, 'white'),
+			word: color-mix-lighten-map($color-word, 'word', $steps: 5, $scale: 12%),
+			surface: map.merge(
+				color-mix-darken-map($color-surface, 'surface', $steps: 5, $scale: 2%),
+				$color-surface-palette
+			),
+			alpha: color-mix-alpha-map($color-alpha, 'alpha', $steps: 5, $scale: 0.05),
+			brand: color-mix-shades-map($color-brand, 'brand'),
+			accent: color-mix-shades-map($color-accent, 'accent'),
+			success: color-mix-shades-map($color-success, 'success'),
+			danger: color-mix-shades-map($color-danger, 'danger'),
+			info: color-mix-shades-map($color-info, 'info'),
+			warning: color-mix-shades-map($color-warning, 'warning'),
+			gray: color-mix-shades-map($color-gray, 'gray', $scale: 15%),
+		);
+	else:
+		(
+			scheme: $color-scheme,
+			transparent: $color-transparent,
+			shadow: hsla-map($color-shadow, 'shadow'),
+			backdrop: hsla-map($color-backdrop, 'backdrop'),
+			black: hsla-map($color-black, 'black'),
+			white: hsla-map($color-white, 'white'),
+			word: color-lighten-map($color-word, 'word', $scale: 12%, $fixed: true, $inverted: false),
+			surface: map.merge(
+				color-darken-map($color-surface, 'surface', $scale: 2%, $fixed: true),
+				$color-surface-palette
 			),
-			$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%),
+			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

@@ -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-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-dialog.scss

@@ -1,5 +1,6 @@
 $vv-dialog: (
 	display: flex,
+	user-select: text,
 	z-index: var(--z-modal-backdrop),
 	position: fixed,
 	inset: 0,

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,26 @@
 @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,
+		$zero-specificity: $zero-specificity-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,26 @@
 @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,
+		$zero-specificity: $zero-specificity-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,26 @@
 @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,
+		$zero-specificity: $zero-specificity-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,26 @@
 @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,
+		$zero-specificity: $zero-specificity-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,26 @@
 @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,
+		$zero-specificity: $zero-specificity-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,26 @@
 @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,
+		$zero-specificity: $zero-specificity-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,26 @@
 @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,
+		$zero-specificity: $zero-specificity-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,26 @@
 @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,
+		$zero-specificity: $zero-specificity-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;
 }
+
+}