@volverjs/style 0.1.12-beta.2 → 0.1.12-beta.20

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

@@ -6,6 +6,7 @@ $vv-text: (
 		headline: (
 			font-weight: var(--font-semibold),
 			line-height: var(--leading-tight),
+			letter-spacing: var(--tracking-tight),
 			margin-top: var(--spacing-24),
 			margin-bottom: var(--spacing-16),
 		),

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

@@ -9,8 +9,10 @@ $vv-textarea: (
 	element: (
 		label: (
 			_alias: '> label',
+			_combinator: '>',
 			display: var(--input-label-display),
 			font-size: var(--input-label-font-size),
+			font-weight: var(--input-label-font-weight),
 			color: var(--input-label-color),
 			margin: 0 0 var(--input-label-gap) 0,
 			white-space: var(--input-label-white-space),
@@ -81,6 +83,7 @@ $vv-textarea: (
 				var(--input-spacing-bottom) var(--input-spacing-left),
 			overflow: auto,
 			text-overflow: var(--input-text-overflow),
+			min-height: var(--input-min-height),
 			pseudo: (
 				placeholder: (
 					color: var(--input-placeholder-color),
@@ -115,6 +118,7 @@ $vv-textarea: (
 			height: var(--input-min-height),
 			margin: var(--input-icon-margin),
 			pointer-events: var(--input-icon-pointer-events),
+			flex-shrink: 0,
 		),
 		icon-after: (
 			_alias: 'textarea + :where(svg, [data-icon])',
@@ -130,6 +134,7 @@ $vv-textarea: (
 		),
 		hint: (
 			_alias: '> small',
+			_combinator: '>',
 			display: var(--input-hint-display),
 			font-size: var(--input-hint-font-size),
 			color: var(--input-hint-color),
@@ -223,7 +228,7 @@ $vv-textarea: (
 				),
 				label: (
 					position: absolute,
-					z-index: 1,
+					z-index: var(--z-1),
 					min-height: var(--input-min-height),
 					line-height: var(--input-min-height),
 					pointer-events: none,

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

@@ -0,0 +1,22 @@
+@use 'sass:map';
+@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
+	);
+}
+
+: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;
+}

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

@@ -0,0 +1,22 @@
+@use 'sass:map';
+@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
+	);
+}
+
+: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;
+}

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

@@ -0,0 +1,22 @@
+@use 'sass:map';
+@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
+	);
+}
+
+: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;
+}

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

@@ -0,0 +1,22 @@
+@use 'sass:map';
+@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
+	);
+}
+
+: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;
+}

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

@@ -0,0 +1,22 @@
+@use 'sass:map';
+@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
+	);
+}
+
+: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;
+}

package/src/themes/dark/components/index.scss

@@ -1,2 +1,7 @@
-@use 'vv-button';
 @use 'vv-alert';
+@use 'vv-avatar';
+@use 'vv-badge';
+@use 'vv-button';
+@use 'vv-dropdown-action';
+@use 'vv-dropdown-option';
+@use 'vv-nav';

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

@@ -6,6 +6,8 @@ $dark-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($dark-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='white' x='0' y='0' width='10' height='10' opacity='0.1'/%3E%3Crect fill='black' x='10' y='0' width='10' height='10'/%3E%3Crect fill='white' x='10' y='10' width='10' height='10' opacity='0.1'/%3E%3Crect fill='black' 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' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(51 65 85 / 0.25)'%3E%3Cpath d='M0 .5H31.5V32'/%3E%3C/svg%3E"),
 	check:

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

@@ -4,10 +4,8 @@
 @use '../../../settings/colors' as *;
 
 $dark-color-scheme: dark !default;
-$dark-color-brand: #1976d2 !default;
-$dark-color-word: hsl(color.hue($dark-color-brand) 15% 85%) !default;
-$dark-color-surface: hsl(color.hue($dark-color-brand) 10% 5%) !default;
-$dark-color-alpha: hsla(0deg 0% 100% / 0%) !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%),
@@ -29,30 +27,6 @@ $dark-color-surface-palette-no-vars: (
 $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
-			),
-			$dark-color-surface-palette
-		),
-	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(
@@ -60,16 +34,8 @@ $dark-colors-computed: (
 				'surface',
 				$scale: 5%,
 				$fixed: true,
-				$noVarExport: true
+				$inverted: false
 			),
-			$dark-color-surface-palette-no-vars
-		),
-	alpha:
-		color-alpha-map(
-			$dark-color-alpha,
-			'alpha',
-			$steps: 5,
-			$scale: 5%,
-			$noVarExport: true
+			$dark-color-surface-palette
 		),
 ) !default;

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

@@ -2,5 +2,10 @@
 @forward 'background';
 @forward 'input';
 
-@forward 'components/vv-button';
 @forward 'components/vv-alert';
+@forward 'components/vv-avatar';
+@forward 'components/vv-badge';
+@forward 'components/vv-button';
+@forward 'components/vv-dropdown-action';
+@forward 'components/vv-dropdown-option';
+@forward 'components/vv-nav';

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

@@ -43,7 +43,7 @@ $dark-vv-alert: (
 		brand: (
 			element: (
 				header: (
-					color: var(--color-brand-lighten-2),
+					color: var(--color-brand-lighten-3),
 				),
 			),
 		),

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

@@ -0,0 +1,27 @@
+$dark-vv-avatar: (
+	modifier: (
+		ring: (
+			color: var(--color-brand-lighten-3),
+			modifier: (
+				danger: (
+					color: var(--color-danger-lighten-5),
+				),
+				success: (
+					color: var(--color-success-lighten-3),
+				),
+				warning: (
+					color: var(--color-warning),
+				),
+				gray: (
+					color: var(--color-gray-lighten-3),
+				),
+				info: (
+					color: var(--color-info),
+				),
+				accent: (
+					color: var(--color-accent-lighten-5),
+				),
+			),
+		),
+	),
+);

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

@@ -0,0 +1,50 @@
+$dark-vv-badge: (
+	modifier: (
+		outline: (
+			color: var(--color-brand-lighten-3),
+			modifier: (
+				danger: (
+					color: var(--color-danger-lighten-3),
+				),
+				success: (
+					color: var(--color-success-lighten-3),
+				),
+				warning: (
+					color: var(--color-warning),
+				),
+				info: (
+					color: var(--color-info),
+				),
+				accent: (
+					color: var(--color-accent-lighten-3),
+				),
+				gray: (
+					color: var(--color-gray-lighten-3),
+				),
+			),
+		),
+		ghost: (
+			color: var(--color-brand-lighten-3),
+			modifier: (
+				danger: (
+					color: var(--color-danger-lighten-3),
+				),
+				success: (
+					color: var(--color-success-lighten-3),
+				),
+				warning: (
+					color: var(--color-warning),
+				),
+				info: (
+					color: var(--color-info),
+				),
+				accent: (
+					color: var(--color-accent-lighten-3),
+				),
+				gray: (
+					color: var(--color-gray-lighten-3),
+				),
+			),
+		),
+	),
+);

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

@@ -1,25 +1,25 @@
 $dark-vv-button: (
 	modifier: (
 		primary: (
-			border-color: var(--color-gray-darken-1),
-			background: var(--color-gray-darken-1),
+			border-color: var(--color-gray-darken-3),
+			background: var(--color-gray-darken-3),
 			state: (
 				focus-visible: (
 					outline: var(--spacing-px) solid var(--color-gray),
 				),
 				hover: (
-					background: var(--color-gray-lighten-1),
-					border-color: var(--color-gray-lighten-1),
+					background: var(--color-gray-darken-2),
+					border-color: var(--color-gray-darken-2),
 				),
 				active: (
-					background: var(--color-gray),
-					border-color: var(--color-gray),
+					background: var(--color-gray-darken-1),
+					border-color: var(--color-gray-darken-1),
 				),
 			),
 		),
 		secondary: (
 			border-color: var(--color-gray-darken-1),
-			background: var(--color-gray-darken-3),
+			background: transparent,
 			text-shadow: 0 1px 0 var(--color-gray-darken-5),
 			state: (
 				focus-visible: (
@@ -52,7 +52,12 @@ $dark-vv-button: (
 			),
 		),
 		link: (
-			color: var(--color-brand-lighten-1),
+			color: var(--color-brand-lighten-3),
+			state: (
+				active: (
+					color: var(--color-brand-lighten-2),
+				),
+			),
 		),
 	),
 ) !default;

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

@@ -0,0 +1,3 @@
+$dark-vv-dropdown-action: (
+	color: var(--color-brand-lighten-3),
+);

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

@@ -0,0 +1,19 @@
+$dark-vv-dropdown-option: (
+	state: (
+		focus-visible: (
+			color: var(--color-success-lighten-3),
+		),
+		selected: (
+			color: var(--color-brand-lighten-3),
+		),
+	),
+	modifier: (
+		unselectable: (
+			state: (
+				focus-visible: (
+					color: var(--color-danger-lighten-5),
+				),
+			),
+		),
+	),
+);

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

@@ -0,0 +1,15 @@
+$dark-vv-nav: (
+	modifier: (
+		tabs: (
+			element: (
+				item-label: (
+					state: (
+						current: (
+							color: var(--color-brand-lighten-3),
+						),
+					),
+				),
+			),
+		),
+	),
+);

package/src/tools/_breakpoints.scss

@@ -19,9 +19,10 @@
 	$bps-names: map.keys($bps)
 ) {
 	$n: list.index($bps-names, $name);
+
 	@return if(
-		$n != null and $n < length($bps-names),
-		nth($bps-names, $n + 1),
+		$n != null and $n < list.length($bps-names),
+		list.nth($bps-names, $n + 1),
 		null
 	);
 }
@@ -31,6 +32,7 @@
 //    576px
 @function breakpoint-min($name, $bps) {
 	$min: map.get($bps, $name);
+
 	@return if($min != 0, $min, null);
 }
 
@@ -44,6 +46,7 @@
 //    767.98px
 @function breakpoint-max($name, $bps) {
 	$next: breakpoint-next($name, $bps);
+
 	@return if($next, breakpoint-min($next, $bps) - 0.02, null);
 }
 
@@ -61,12 +64,17 @@
 // Makes the @content apply to the given breakpoint and wider.
 @mixin media-breakpoint-up($name, $bps) {
 	$min: breakpoint-min($name, $bps);
+
 	@if $min {
 		@media (min-width: $min) {
-			@content;
+			& {
+				@content;
+			}
 		}
 	} @else {
-		@content;
+		& {
+			@content;
+		}
 	}
 }
 
@@ -74,6 +82,7 @@
 // Makes the @content apply to the given breakpoint and narrower.
 @mixin media-breakpoint-down($name, $bps) {
 	$max: breakpoint-max($name, $bps);
+
 	@if $max {
 		@media (max-width: $max) {
 			@content;

package/src/tools/_functions.scss

@@ -15,9 +15,7 @@
 			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))
+			#{$name}: hsla(var(--color-#{$name}-hue), var(--color-#{$name}-saturation), var(--color-#{$name}-lightness), color.alpha($color))
 		);
 	}
 }
@@ -34,8 +32,10 @@
 		);
 	} @else {
 		@return hsla(
-			var(--color-#{$name}-hue) var(--color-#{$name}-saturation)
-				var(--color-#{$name}-lightness) / #{$alpha}
+			var(--color-#{$name}-hue),
+			var(--color-#{$name}-saturation),
+			var(--color-#{$name}-lightness),
+			$alpha
 		);
 	}
 }
@@ -48,7 +48,7 @@
 	$color,
 	$name,
 	$steps: 9,
-	$scale: 10%,
+	$scale: 0.1,
 	$noVarExport: false
 ) {
 	$result: hsla-map($color, $name, $noVarExport);
@@ -73,8 +73,7 @@
 	$noVarExport: false
 ) {
 	$result: map.merge(
-		map.merge(
-			(#{$name}: $color),
+		map.set(
 			color-lighten-map(
 				$color,
 				$name,
@@ -83,7 +82,9 @@
 				'lighten',
 				$fixed,
 				$noVarExport
-			)
+			),
+			$name,
+			$color
 		),
 		color-darken-map(
 			$color,
@@ -105,10 +106,16 @@
 	$scale: 10%,
 	$prefix: '',
 	$fixed: false,
-	$noVarExport: false
+	$noVarExport: false,
+	$inverted: true
 ) {
 	$result: hsla-map($color, $name, $noVarExport);
-	@for $index from 1 to ($steps + 1) {
+	@for $counter from 1 to ($steps + 1) {
+		$index: $counter;
+		@if $inverted {
+			$index: $steps + 1 - $counter;
+		}
+
 		$key: $index;
 		@if $prefix != '' {
 			$key: $prefix + '-' + $index;
@@ -192,11 +199,17 @@
 	$scale: 10%,
 	$prefix: '',
 	$fixed: false,
-	$noVarExport: false
+	$noVarExport: false,
+	$inverted: false
 ) {
 	$result: hsla-map($color, $name, $noVarExport);
 
-	@for $index from 1 to ($steps + 1) {
+	@for $counter from 1 to ($steps + 1) {
+		$index: $counter;
+		@if $inverted {
+			$index: $steps + 1 - $counter;
+		}
+
 		$key: $index;
 		@if $prefix != '' {
 			$key: $prefix + '-' + $index;