@volverjs/style 0.1.9-beta.5 → 0.1.9-beta.6

package/package.json

@@ -24,7 +24,7 @@
   "bugs": {
     "url": "https://github.com/volverjs/style/issues"
   },
-  "version": "0.1.9-beta.5",
+  "version": "0.1.9-beta.6",
   "engines": {
     "node": ">= 12.x"
   },

package/src/export.scss

@@ -4,6 +4,7 @@
 
 // context
 @use 'context' as *;
+@use './themes/dark/context' as *;
 
 :export {
 	// ============================================================== */
@@ -31,6 +32,52 @@
 		}
 	}
 
+	// colors exported with no vars
+	@each $key, $value in $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 {
+							#{'colors-computed__' + $key}: $subValue;
+						} @else {
+							#{'colors-computed__' + $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;
+		}
+	}
+
 	// #endregion
 
 	// ==============================================================
@@ -280,11 +327,6 @@
 		#{'max-height__' + $key}: $value;
 	}
 
-	// max height
-	@each $key, $value in $max-height {
-		#{'max-height__' + $key}: $value;
-	}
-
 	// #endregion
 
 	// ============================================================== */
@@ -421,6 +463,10 @@
 		#{'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;

package/src/settings/_colors.scss

@@ -24,6 +24,14 @@ $color-surface-palette: (
 	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: hsla(0deg 0% 0% / 0%) !default;
@@ -56,3 +64,47 @@ $colors: (
 	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),
+	word:
+		color-lighten-map(
+			$color-word,
+			'word',
+			$scale: 12%,
+			$fixed: true,
+			$noVarExport: true
+		),
+	surface:
+		map.merge(
+			color-darken-map(
+				$color-surface,
+				'surface',
+				$scale: 2%,
+				$fixed: true,
+				$noVarExport: true
+			),
+			$color-surface-palette-no-vars
+		),
+) !default;

package/src/settings/_effects.scss

@@ -1,3 +1,7 @@
+@use 'sass:color';
+@use 'sass:map';
+@use './colors';
+
 // box-shadow
 $box-shadow: (
 	sm:
@@ -17,6 +21,29 @@ $box-shadow: (
 	none: '0 0 #0000',
 ) !default;
 
+// box-shadow without css vars
+$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/components/_vv-input-text.scss

@@ -282,6 +282,7 @@ $vv-input-text: (
 				wrapper: (
 					pseudo: (
 						after: (
+							opacity: var(--opacity-100),
 							animation: var(--animation-indeterminate),
 						),
 					),

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

@@ -24,6 +24,7 @@ $vv-nav: (
 			will-change: background-color color,
 			transition: var(--transition-all),
 			color: var(--color-word-3),
+			cursor: pointer,
 			[padding]: var(--nav-item-padding),
 			state: (
 				hover: (

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

@@ -226,6 +226,7 @@ $vv-select: (
 				wrapper: (
 					pseudo: (
 						after: (
+							opacity: var(--opacity-100),
 							animation: var(--animation-indeterminate),
 						),
 					),

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

@@ -202,6 +202,7 @@ $vv-textarea: (
 				wrapper: (
 					pseudo: (
 						after: (
+							opacity: var(--opacity-100),
 							animation: var(--animation-indeterminate),
 						),
 					),

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

@@ -16,6 +16,14 @@ $dark-color-surface-palette: (
 	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%),
+) !default;
 
 // color map
 $dark-colors: (
@@ -33,3 +41,35 @@ $dark-colors: (
 		),
 	alpha: color-alpha-map($dark-color-alpha, 'alpha', $steps: 5, $scale: 5%),
 ) !default;
+
+// dark-colors computed map
+$dark-colors-computed: (
+	scheme: $dark-color-scheme,
+	word:
+		color-darken-map(
+			$dark-color-word,
+			'word',
+			$scale: 12%,
+			$fixed: true,
+			$noVarExport: true
+		),
+	surface:
+		map.merge(
+			color-lighten-map(
+				$dark-color-surface,
+				'surface',
+				$scale: 5%,
+				$fixed: true,
+				$noVarExport: true
+			),
+			$dark-color-surface-palette-no-vars
+		),
+	alpha:
+		color-alpha-map(
+			$dark-color-alpha,
+			'alpha',
+			$steps: 5,
+			$scale: 5%,
+			$noVarExport: true
+		),
+) !default;

package/src/tools/_functions.scss

@@ -5,34 +5,60 @@
 @use 'sass:list';
 @use 'sass:math';
 
-@function hsla-map($color, $name) {
-	@return (
-		hue: color.hue($color),
-		saturation: color.saturation($color),
-		lightness: color.lightness($color),
-		#{$name}: hsla(var(--color-#{$name}-hue)
-					var(--color-#{$name}-saturation)
-					var(--color-#{$name}-lightness) / color.alpha($color))
-	);
+@function hsla-map($color, $name, $noVarExport: false) {
+	@if $noVarExport {
+		@return (
+			#{$name}: hsla(color.hue($color), color.saturation($color), color.lightness($color), color.alpha($color))
+		);
+	} @else {
+		@return (
+			hue: color.hue($color),
+			saturation: color.saturation($color),
+			lightness: color.lightness($color),
+			#{$name}: hsla(var(--color-#{$name}-hue)
+						var(--color-#{$name}-saturation)
+						var(--color-#{$name}-lightness) / color.alpha($color))
+		);
+	}
 }
 
-@function alpha-color($name, $alpha) {
-	@return hsla(
-		var(--color-#{$name}-hue) var(--color-#{$name}-saturation)
-			var(--color-#{$name}-lightness) / #{$alpha}
-	);
+@function alpha-color($color, $name, $alpha, $noVarExport) {
+	@if $noVarExport {
+		@return (
+			hsla(
+				color.hue($color),
+				color.saturation($color),
+				color.lightness($color),
+				$alpha
+			)
+		);
+	} @else {
+		@return hsla(
+			var(--color-#{$name}-hue) var(--color-#{$name}-saturation)
+				var(--color-#{$name}-lightness) / #{$alpha}
+		);
+	}
 }
 
 @function hex-to-rgb($hex) {
 	@return red($hex), green($hex), blue($hex);
 }
 
-@function color-alpha-map($color, $name, $steps: 9, $scale: 10%) {
-	$result: hsla-map($color, $name);
+@function color-alpha-map(
+	$color,
+	$name,
+	$steps: 9,
+	$scale: 10%,
+	$noVarExport: false
+) {
+	$result: hsla-map($color, $name, $noVarExport);
 	@for $index from 1 to ($steps + 1) {
 		$result: map.merge(
 			$result,
-			(#{$index}: alpha-color($name, $index * $scale))
+			(
+				#{$index}:
+					alpha-color($color, $name, $index * $scale, $noVarExport)
+			)
 		);
 	}
 	@return $result;
@@ -43,14 +69,31 @@
 	$name,
 	$steps: 5,
 	$scale: 10%,
-	$fixed: false
+	$fixed: false,
+	$noVarExport: false
 ) {
 	$result: map.merge(
 		map.merge(
 			(#{$name}: $color),
-			color-lighten-map($color, $name, $steps, $scale, 'lighten', $fixed)
+			color-lighten-map(
+				$color,
+				$name,
+				$steps,
+				$scale,
+				'lighten',
+				$fixed,
+				$noVarExport
+			)
 		),
-		color-darken-map($color, $name, $steps, $scale, 'darken', $fixed)
+		color-darken-map(
+			$color,
+			$name,
+			$steps,
+			$scale,
+			'darken',
+			$fixed,
+			$noVarExport
+		)
 	);
 	@return $result;
 }
@@ -61,9 +104,10 @@
 	$steps: 5,
 	$scale: 10%,
 	$prefix: '',
-	$fixed: false
+	$fixed: false,
+	$noVarExport: false
 ) {
-	$result: hsla-map($color, $name);
+	$result: hsla-map($color, $name, $noVarExport);
 	@for $index from 1 to ($steps + 1) {
 		$key: $index;
 		@if $prefix != '' {
@@ -72,38 +116,70 @@
 
 		@if $fixed {
 			$increment: $scale * $index;
-			$result: map.merge(
-				$result,
-				(
-					#{$key}:
-						hsl(
-							var(--color-#{$name}-hue)
-								var(--color-#{$name}-saturation)
-								calc(
-									var(--color-#{$name}-lightness) +
-										#{$increment}
-								)
-						)
-				)
-			);
+			@if $noVarExport {
+				$alpha: color.lightness($color) + $increment;
+				$result: map.merge(
+					$result,
+					(
+						#{$key}:
+							hsla(
+								color.hue($color),
+								color.saturation($color),
+								color.lightness($color),
+								$alpha
+							)
+					)
+				);
+			} @else {
+				$result: map.merge(
+					$result,
+					(
+						#{$key}:
+							hsl(
+								var(--color-#{$name}-hue)
+									var(--color-#{$name}-saturation)
+									calc(
+										var(--color-#{$name}-lightness) +
+											#{$increment}
+									)
+							)
+					)
+				);
+			}
 		} @else {
 			$increment: math.div($scale * $index, 100);
 			$increment: math.div($increment, ($increment * 0 + 1));
-			$result: map.merge(
-				$result,
-				(
-					#{$key}:
-						hsl(
-							var(--color-#{$name}-hue)
-								var(--color-#{$name}-saturation)
-								calc(
-									var(--color-#{$name}-lightness) +
+			$increment: $increment + 1;
+			@if $noVarExport {
+				$alpha: color.lightness($color) * $increment;
+				$result: map.merge(
+					$result,
+					(
+						#{$key}:
+							hsla(
+								color.hue($color),
+								color.saturation($color),
+								color.lightness($color),
+								$alpha
+							)
+					)
+				);
+			} @else {
+				$result: map.merge(
+					$result,
+					(
+						#{$key}:
+							hsl(
+								var(--color-#{$name}-hue)
+									var(--color-#{$name}-saturation)
+									calc(
 										var(--color-#{$name}-lightness) *
-										#{$increment}
-								)
-						)
-				)
-			);
+											#{$increment}
+									)
+							)
+					)
+				);
+			}
 		}
 	}
 	@return $result;
@@ -115,9 +191,10 @@
 	$steps: 5,
 	$scale: 10%,
 	$prefix: '',
-	$fixed: false
+	$fixed: false,
+	$noVarExport: false
 ) {
-	$result: hsla-map($color, $name);
+	$result: hsla-map($color, $name, $noVarExport);
 
 	@for $index from 1 to ($steps + 1) {
 		$key: $index;
@@ -127,38 +204,70 @@
 
 		@if $fixed {
 			$decrement: $scale * $index;
-			$result: map.merge(
-				$result,
-				(
-					#{$key}:
-						hsl(
-							var(--color-#{$name}-hue)
-								var(--color-#{$name}-saturation)
-								calc(
-									var(--color-#{$name}-lightness) -
-										#{$decrement}
-								)
-						)
-				)
-			);
+			@if $noVarExport {
+				$alpha: color.lightness($color) - $decrement;
+				$result: map.merge(
+					$result,
+					(
+						#{$key}:
+							hsla(
+								color.hue($color),
+								color.saturation($color),
+								color.lightness($color),
+								$alpha
+							)
+					)
+				);
+			} @else {
+				$result: map.merge(
+					$result,
+					(
+						#{$key}:
+							hsl(
+								var(--color-#{$name}-hue)
+									var(--color-#{$name}-saturation)
+									calc(
+										var(--color-#{$name}-lightness) -
+											#{$decrement}
+									)
+							)
+					)
+				);
+			}
 		} @else {
 			$decrement: math.div($scale * $index, 100);
 			$decrement: math.div($decrement, ($decrement * 0 + 1));
-			$result: map.merge(
-				$result,
-				(
-					#{$key}:
-						hsl(
-							var(--color-#{$name}-hue)
-								var(--color-#{$name}-saturation)
-								calc(
-									var(--color-#{$name}-lightness) -
+			$decrement: 1 - $decrement;
+			@if $noVarExport {
+				$alpha: color.lightness($color) * $decrement;
+				$result: map.merge(
+					$result,
+					(
+						#{$key}:
+							hsla(
+								color.hue($color),
+								color.saturation($color),
+								color.lightness($color),
+								$alpha
+							)
+					)
+				);
+			} @else {
+				$result: map.merge(
+					$result,
+					(
+						#{$key}:
+							hsl(
+								var(--color-#{$name}-hue)
+									var(--color-#{$name}-saturation)
+									calc(
 										var(--color-#{$name}-lightness) *
-										#{$decrement}
-								)
-						)
-				)
-			);
+											#{$decrement}
+									)
+							)
+					)
+				);
+			}
 		}
 	}
 	@return $result;