@volverjs/style 0.1.22 → 0.1.24-beta.1

package/src/props/effects.scss

@@ -1,6 +1,8 @@
 @use '../context' as *;
 
-:where(:host, :root, .theme) {
-	@include spread-map-into-props($box-shadow, $prefix: shadow);
-	@include spread-map-into-props($opacity, $prefix: opacity);
+@include layer(props, $use-css-layers, $layer-prefix) {
+	:where(:host, :root, .theme) {
+		@include spread-map-into-props($box-shadow, $prefix: shadow);
+		@include spread-map-into-props($opacity, $prefix: opacity);
+	}
 }

package/src/props/filters.scss

@@ -1,7 +1,9 @@
 @use '../context' as *;
 
-:where(:host, :root, .theme) {
-	@include spread-map-into-props($blur, $prefix: blur);
-	@include spread-map-into-props($brightness, $prefix: brightness);
-	@include spread-map-into-props($saturation, $prefix: saturate);
+@include layer(props, $use-css-layers, $layer-prefix) {
+	:where(:host, :root, .theme) {
+		@include spread-map-into-props($blur, $prefix: blur);
+		@include spread-map-into-props($brightness, $prefix: brightness);
+		@include spread-map-into-props($saturation, $prefix: saturate);
+	}
 }

package/src/props/input.scss

@@ -1,5 +1,7 @@
 @use '../context' as *;
 
-:where(:host, :root, .theme) {
-	@include spread-map-into-props($map: $input, $prefix: input);
+@include layer(props, $use-css-layers, $layer-prefix) {
+	:where(:host, :root, .theme) {
+		@include spread-map-into-props($map: $input, $prefix: input);
+	}
 }

package/src/props/layout.scss

@@ -1,6 +1,8 @@
 @use '../context' as *;
 
-:where(:host, :root, .theme) {
-	@include spread-map-into-props($map: $aspect-ratio, $prefix: aspect);
-	@include spread-map-into-props($map: $z-index, $prefix: z);
+@include layer(props, $use-css-layers, $layer-prefix) {
+	:where(:host, :root, .theme) {
+		@include spread-map-into-props($map: $aspect-ratio, $prefix: aspect);
+		@include spread-map-into-props($map: $z-index, $prefix: z);
+	}
 }

package/src/props/sizing.scss

@@ -1,6 +1,8 @@
 @use '../context' as *;
 
-:where(:host, :root, .theme) {
-	@include spread-map-into-props($width, $prefix: w);
-	@include spread-map-into-props($height, $prefix: h);
+@include layer(props, $use-css-layers, $layer-prefix) {
+	:where(:host, :root, .theme) {
+		@include spread-map-into-props($width, $prefix: w);
+		@include spread-map-into-props($height, $prefix: h);
+	}
 }

package/src/props/spacing.scss

@@ -1,25 +1,25 @@
 @use 'sass:map';
 @use '../context' as *;
 
-:where(:host, :root, .theme) {
-	// static
-	@each $size, $value in $spacing {
-		--spacing-#{$size}: #{$value};
-	}
+@include layer(props, $use-css-layers, $layer-prefix) {
+	:where(:host, :root, .theme) {
+		// static
+		@each $size, $value in $spacing {
+			--spacing-#{$size}: #{$value};
+		}
 
-	// dynamic
-	@each $name, $sizes in $spacing-dynamic {
-		@each $breakpoint, $size in $sizes {
-			@if map.has-key($breakpoints, $breakpoint) {
-				@include media-breakpoint-up($breakpoint, $breakpoints) {
-					$var: $size;
+		// dynamic
+		@each $name, $sizes in $spacing-dynamic {
+			@each $breakpoint, $size in $sizes {
+				@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) {
-						$var: var(--spacing-#{$size});
-					}
+						// if is a static spacing
+						@if map.has-key($spacing, $size) {
+							$var: var(--spacing-#{$size});
+						}
 
-					& {
 						--spacing-#{$name}: #{$var};
 					}
 				}

package/src/props/transitions.scss

@@ -1,167 +1,199 @@
 @use '../context' as *;
 @use 'sass:string';
 
-:where(:host, :root, .theme) {
-	// animation
-	@media (prefers-reduced-motion: no-preference) {
-		// transition-property
-		@include spread-map-into-props(
-			$transition-property,
-			$prefix: transition-property
-		);
-
-		// duration
-		@include spread-map-into-props(
-			$transition-duration-delay,
-			$prefix: duration
-		);
+@include layer(props, $use-css-layers, $layer-prefix) {
+	:where(:host, :root, .theme) {
+		// Default values for reduced-motion users
+		// These ensure variables are always defined but with no animation
+
+		// duration - set all to 0s for reduced motion
+		@each $key, $value in $transition-duration-delay {
+			--duration-#{$key}: 0s;
+		}
 
-		// ease
+		// ease - keep timing functions but they won't matter with 0s duration
 		@include spread-map-into-props(
 			$transition-timing-function,
 			$prefix: ease
 		);
 
-		// animation
-		@include spread-map-into-props($animation, animation);
+		// transition-property - define properties but transitions will be none
+		@include spread-map-into-props(
+			$transition-property,
+			$prefix: transition-property
+		);
 
-		// transition
+		// transition - set all to none for reduced motion
 		@each $property, $value in $transition-property {
-			@if $property != 'none' {
-				$transition: '';
-
-				@each $prop in str-split($value, ', ') {
-					$transition: $transition +
-						$prop +
-						' var(--duration-300) var(--ease-in-out), ';
-				}
+			--transition-#{$property}: none;
+		}
 
-				$transition: string.slice($transition, 1, -3);
+		// animation - set all to none for reduced motion
+		@each $key, $value in $animation {
+			--animation-#{$key}: none;
+		}
 
-				--transition-#{$property}: #{$transition};
-			} @else {
-				--transition-#{$property}: none;
+		// animation
+		@media (prefers-reduced-motion: no-preference) {
+			// transition-property
+			@include spread-map-into-props(
+				$transition-property,
+				$prefix: transition-property
+			);
+
+			// duration
+			@include spread-map-into-props(
+				$transition-duration-delay,
+				$prefix: duration
+			);
+
+			// ease
+			@include spread-map-into-props(
+				$transition-timing-function,
+				$prefix: ease
+			);
+
+			// animation
+			@include spread-map-into-props($animation, animation);
+
+			// transition
+			@each $property, $value in $transition-property {
+				@if $property != 'none' {
+					$transition: '';
+
+					@each $prop in str-split($value, ', ') {
+						$transition: $transition +
+							$prop +
+							' var(--duration-300) var(--ease-in-out), ';
+					}
+
+					$transition: string.slice($transition, 1, -3);
+
+					--transition-#{$property}: #{$transition};
+				} @else {
+					--transition-#{$property}: none;
+				}
 			}
 		}
 	}
-}
 
-// keyframes
-@keyframes indeterminate {
-	0% {
-		scale: 0 1;
-	}
+	// keyframes
+	@keyframes indeterminate {
+		0% {
+			scale: 0 1;
+		}
 
-	50% {
-		scale: 1;
-		transform-origin: left;
-	}
+		50% {
+			scale: 1;
+			transform-origin: left;
+		}
 
-	51% {
-		scale: 1;
-		transform-origin: center right;
-	}
+		51% {
+			scale: 1;
+			transform-origin: center right;
+		}
 
-	100% {
-		scale: 0 1;
-		transform-origin: center right;
+		100% {
+			scale: 0 1;
+			transform-origin: center right;
+		}
 	}
-}
 
-@keyframes spin {
-	from {
-		rotate: 0deg;
-	}
+	@keyframes spin {
+		from {
+			rotate: 0deg;
+		}
 
-	to {
-		rotate: 360deg;
+		to {
+			rotate: 360deg;
+		}
 	}
-}
 
-@keyframes ping {
-	75%,
-	100% {
-		scale: 2;
-		opacity: 0;
+	@keyframes ping {
+		75%,
+		100% {
+			scale: 2;
+			opacity: 0;
+		}
 	}
-}
 
-@keyframes pulse {
-	0%,
-	100% {
-		opacity: 1;
-	}
+	@keyframes pulse {
+		0%,
+		100% {
+			opacity: 1;
+		}
 
-	50% {
-		opacity: 0.5;
+		50% {
+			opacity: 0.5;
+		}
 	}
-}
 
-@keyframes bounce {
-	0%,
-	100% {
-		translate: 0 -25%;
-		animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
-	}
+	@keyframes bounce {
+		0%,
+		100% {
+			translate: 0 -25%;
+			animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+		}
 
-	50% {
-		translate: 0;
-		animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+		50% {
+			translate: 0;
+			animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+		}
 	}
-}
 
-@keyframes progress-indeterminate {
-	0% {
-		background-position: 200% 0;
-	}
+	@keyframes progress-indeterminate {
+		0% {
+			background-position: 200% 0;
+		}
 
-	100% {
-		background-position: -200% 0;
+		100% {
+			background-position: -200% 0;
+		}
 	}
-}
 
-@keyframes pie-masks {
-	0% {
-		opacity: 1;
-	}
+	@keyframes pie-masks {
+		0% {
+			opacity: 1;
+		}
 
-	50%,
-	100% {
-		opacity: 0;
+		50%,
+		100% {
+			opacity: 0;
+		}
 	}
-}
 
-@keyframes fade-out {
-	95% {
-		opacity: 1;
-	}
+	@keyframes fade-out {
+		95% {
+			opacity: 1;
+		}
 
-	100% {
-		opacity: 0;
+		100% {
+			opacity: 0;
+		}
 	}
-}
 
-@keyframes shine {
-	to {
-		background-position-x: -200%;
+	@keyframes shine {
+		to {
+			background-position-x: -200%;
+		}
 	}
-}
 
-@keyframes clippath {
-	0%,
-	100% {
-		clip-path: inset(0 0 95% 0);
-	}
+	@keyframes clippath {
+		0%,
+		100% {
+			clip-path: inset(0 0 95% 0);
+		}
 
-	25% {
-		clip-path: inset(0 95% 0 0);
-	}
+		25% {
+			clip-path: inset(0 95% 0 0);
+		}
 
-	50% {
-		clip-path: inset(95% 0 0 0);
-	}
+		50% {
+			clip-path: inset(95% 0 0 0);
+		}
 
-	75% {
-		clip-path: inset(0 0 0 95%);
+		75% {
+			clip-path: inset(0 0 0 95%);
+		}
 	}
 }

package/src/props/typography.scss

@@ -1,37 +1,37 @@
 @use 'sass:map';
 @use '../context' as *;
 
-:where(:host, :root, .theme) {
-	// font-family
-	@include spread-map-into-props($font-family, $prefix: font);
+@include layer(props, $use-css-layers, $layer-prefix) {
+	:where(:host, :root, .theme) {
+		// font-family
+		@include spread-map-into-props($font-family, $prefix: font);
 
-	// font-weight
-	@include spread-map-into-props($font-weight, $prefix: font);
+		// font-weight
+		@include spread-map-into-props($font-weight, $prefix: font);
 
-	// line-height
-	@include spread-map-into-props($line-height, $prefix: leading);
+		// line-height
+		@include spread-map-into-props($line-height, $prefix: leading);
 
-	// letter-spacing
-	@include spread-map-into-props($letter-spacing, $prefix: tracking);
+		// letter-spacing
+		@include spread-map-into-props($letter-spacing, $prefix: tracking);
 
-	// font-size
-	@each $size, $value in $font-size {
-		--text-#{$size}: #{$value};
-	}
+		// font-size
+		@each $size, $value in $font-size {
+			--text-#{$size}: #{$value};
+		}
 
-	// font-size dynamic
-	@each $name, $sizes in $font-size-dynamic {
-		@each $breakpoint, $size in $sizes {
-			@if map.has-key($breakpoints, $breakpoint) {
-				@include media-breakpoint-up($breakpoint, $breakpoints) {
-					$var: $size;
+		// font-size dynamic
+		@each $name, $sizes in $font-size-dynamic {
+			@each $breakpoint, $size in $sizes {
+				@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) {
-						$var: var(--text-#{$size});
-					}
+						// if is a static font-size
+						@if map.has-key($font-size, $size) {
+							$var: var(--text-#{$size});
+						}
 
-					& {
 						--text-#{$name}: #{$var};
 					}
 				}

package/src/reset.scss

@@ -1,3 +1,6 @@
+@use 'context' as *;
+
+@include layer(reset, $use-css-layers, $layer-prefix) {
 /*
     Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
     - The "symbol *" part is to solve Firefox SVG sprite bug
@@ -58,7 +61,6 @@
 
 /* minimum style to allow to style meter element */
 :where(meter) {
-	-webkit-appearance: revert;
 	appearance: revert;
 }
 
@@ -77,8 +79,6 @@
 	- fix for the content editable attribute will work properly.
    - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element */
 :where([contenteditable]:not([contenteditable='false'])) {
-	-moz-user-modify: read-write;
-	-webkit-user-modify: read-write;
 	overflow-wrap: break-word;
 	-webkit-line-break: after-white-space;
 	-webkit-user-select: auto;
@@ -98,3 +98,4 @@
 	scrollbar-color: initial;
 	font-family: initial;
 }
+}

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;