@volverjs/style 0.1.12-beta.3 → 0.1.12-beta.5

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

@@ -142,12 +142,15 @@ $vv-button: (
 				),
 				hover: (
 					background: var(--color-gray-lighten-5),
+					color: var(--color-word-2),
 				),
 				active: (
 					background: var(--color-gray-lighten-4),
+					color: var(--color-word-2),
 				),
 				pressed: (
 					background: var(--color-gray-lighten-4),
+					color: var(--color-word-2),
 				),
 			),
 		),
@@ -244,11 +247,12 @@ $vv-button: (
 				),
 				active: (
 					background: var(--color-surface-5),
+					color: var(--color-word),
 				),
 				pressed: (
 					color: var(--color-white),
-					background: var(--color-gray),
-					border-color: var(--color-gray),
+					background: var(--color-gray-darken-1),
+					border-color: var(--color-gray-darken-1),
 				),
 			),
 			element: (
@@ -282,11 +286,12 @@ $vv-button: (
 				active: (
 					background: var(--color-surface-5),
 					border-color: var(--color-surface-5),
+					color: var(--color-word),
 				),
 				pressed: (
 					color: var(--color-white),
-					background: var(--color-gray),
-					border-color: var(--color-gray),
+					background: var(--color-gray-darken-1),
+					border-color: var(--color-gray-darken-1),
 				),
 			),
 			element: (

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

@@ -13,7 +13,7 @@ $vv-dropdown-option: (
 		),
 		focus-visible: (
 			background-color: var(--color-surface-success),
-			color: var(--color-success),
+			color: var(--color-success-darken-1),
 			element: (
 				hint: (
 					opacity: var(--opacity-100),
@@ -23,7 +23,7 @@ $vv-dropdown-option: (
 		selected: (
 			font-weight: var(--font-bold),
 			background-color: var(--color-surface-brand),
-			color: var(--color-brand),
+			color: var(--color-brand-darken-1),
 		),
 	),
 	modifier: (

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

@@ -13,6 +13,21 @@ $vv-dropdown: (
 			[border-radius]: var(--dropdown-border-radius),
 			background-color: var(--color-surface-1),
 			overflow: auto,
+			pseudo: (
+				-webkit-scrollbar: (
+						width: var(--spacing-2),
+						height: var(--spacing-2),
+					),
+				-webkit-scrollbar-thumb: (
+						background-color: var(--color-brand-lighten-4),
+						border: var(--spacing-0) solid transparent,
+						background-clip: content-box,
+					),
+				-webkit-scrollbar-track: (
+						background-color: transparent,
+						padding: 0,
+					),
+			),
 		),
 		item: (
 			_alias: 'li',
@@ -161,6 +176,14 @@ $vv-dropdown: (
 						down-xs: (
 							z-index: var(--z-modal),
 							margin-bottom: auto,
+							[border-radius]: var(--dropdown-border-radius),
+						),
+					),
+				),
+				search: (
+					breakpoint: (
+						down-xs: (
+							[border-radius]: var(--dropdown-border-radius),
 						),
 					),
 				),
@@ -175,6 +198,9 @@ $vv-dropdown: (
 					list: (
 						transition: var(--transition-transform),
 					),
+					search: (
+						transition: var(--transition-transform),
+					),
 				),
 			),
 			enter-from: (
@@ -183,6 +209,9 @@ $vv-dropdown: (
 					list: (
 						translate: 0 100%,
 					),
+					search: (
+						translate: 0 -100%,
+					),
 				),
 			),
 			leave-to: (
@@ -191,6 +220,60 @@ $vv-dropdown: (
 					list: (
 						translate: 0 100%,
 					),
+					search: (
+						translate: 0 -100%,
+					),
+				),
+			),
+		),
+		mobile-fade-block: (
+			active: (
+				transition: var(--transition-opacity),
+				element: (
+					list: (
+						transition: var(--transition-transform),
+					),
+					search: (
+						transition: var(--transition-transform),
+					),
+				),
+			),
+			enter-from: (
+				opacity: var(--opacity-0),
+				element: (
+					list: (
+						breakpoint: (
+							down-xs: (
+								translate: 0 100%,
+							),
+						),
+					),
+					search: (
+						breakpoint: (
+							down-xs: (
+								translate: 0 -100%,
+							),
+						),
+					),
+				),
+			),
+			leave-to: (
+				opacity: var(--opacity-0),
+				element: (
+					list: (
+						breakpoint: (
+							down-xs: (
+								translate: 0 100%,
+							),
+						),
+					),
+					search: (
+						breakpoint: (
+							down-xs: (
+								translate: 0 -100%,
+							),
+						),
+					),
 				),
 			),
 		),

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

@@ -23,7 +23,7 @@ $vv-nav: (
 			align-items: center,
 			will-change: background-color color,
 			transition: var(--transition-all),
-			color: var(--color-word-3),
+			color: var(--color-word-2),
 			cursor: pointer,
 			[padding]: var(--nav-item-padding),
 			state: (
@@ -50,15 +50,15 @@ $vv-nav: (
 				item-label: (
 					border-radius: var(--rounded-md),
 					state: (
-						hover: (
-							background-color: var(--color-surface-2),
-						),
 						active: (
 							background-color: var(--color-surface-3),
 						),
-						current: (
+						hover: (
 							background-color: var(--color-surface-2),
 						),
+						current: (
+							background-color: var(--color-surface-1),
+						),
 					),
 				),
 			),
@@ -116,7 +116,7 @@ $vv-nav: (
 						),
 						current: (
 							color: var(--color-brand),
-							border-color: var(--color-brand),
+							border-color: currentcolor,
 							background-color:
 								hsla(
 									var(--color-brand-hue)

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

@@ -41,7 +41,7 @@ $vv-radio: (
 			_alias: "> input[type='radio']",
 			border-width: var(--spacing-2),
 			border-style: solid,
-			border-color: var(--input-color),
+			border-color: currentcolor,
 			min-width: var(--spacing-20),
 			height: var(--spacing-20),
 			border-radius: 50%,
@@ -54,7 +54,7 @@ $vv-radio: (
 					position: absolute,
 					width: 70%,
 					height: 70%,
-					background-color: var(--input-color),
+					background-color: currentcolor,
 					inset: 50% 50%,
 					border-radius: 50%,
 					translate: -50% -50%,

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

@@ -2,6 +2,7 @@ $vv-text: (
 	font-family: var(--font-sans),
 	font-weight: var(--font-normal),
 	line-height: var(--leading-normal),
+	text-wrap: balance,
 	modifier: (
 		headline: (
 			font-weight: var(--font-semibold),

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/_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),
+						),
+					),
+				),
+			),
+		),
+	),
+);