@volverjs/style 0.1.2-beta.11 → 0.1.2-beta.17

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

@@ -0,0 +1,128 @@
+$vv-toast: (
+	position: relative,
+	display: flex,
+	flex-direction: column,
+	overflow: hidden,
+	border-radius: var(--rounded),
+	background-color: var(--color-surface),
+	box-shadow: var(--shadow-lg),
+	color: var(--color-word-2),
+	backdrop-filter: none,
+	border-width: var(--border),
+	border-style: solid,
+	border-color: var(--color-gray),
+	width: clamp(15vw, 20rem, 80vw),
+	element: (
+		header: (
+			display: flex,
+			overflow: hidden,
+			align-items: center,
+			padding: var(--spacing-xs),
+			color: var(--color-white),
+			background-color: var(--color-gray),
+			font-size: var(--text-16),
+		),
+		content: (
+			padding: var(--spacing-xs),
+			background-color: var(--color-surface-2),
+			flex-grow: 1,
+			min-height: 0,
+			overflow: auto,
+			font-size: var(--text-14),
+		),
+		close: (
+			position: absolute,
+			right: var(--spacing-xs),
+			inline-size: 1.1em,
+			block-size: 1.1em,
+			cursor: pointer,
+			border-radius: var(--rounded),
+			background-image: var(--bg-close),
+			background-color: var(--color-surface-2),
+			background-position: center,
+			background-size: 70% auto,
+			background-repeat: no-repeat,
+		),
+	),
+	modifier: (
+		close: (
+			element: (
+				header: (
+					padding-right: calc(var(--spacing-xs) * 2 + 1.1em),
+				),
+			),
+		),
+		success: (
+			border-color: var(--color-success),
+			element: (
+				header: (
+					background-color: var(--color-success),
+				),
+				content: (
+					border-color: var(--color-success),
+					background-color: var(--color-surface-success),
+				),
+			),
+		),
+		danger: (
+			border-color: var(--color-danger),
+			element: (
+				header: (
+					background-color: var(--color-danger),
+				),
+				content: (
+					border-color: var(--color-danger),
+					background-color: var(--color-surface-danger),
+				),
+			),
+		),
+		warning: (
+			border-color: var(--color-warning-darken-1),
+			element: (
+				header: (
+					background-color: var(--color-warning-darken-1),
+				),
+				content: (
+					border-color: var(--color-warning),
+					background-color: var(--color-surface-warning),
+				),
+			),
+		),
+		info: (
+			border-color: var(--color-info-darken-1),
+			element: (
+				header: (
+					background-color: var(--color-info-darken-1),
+				),
+				content: (
+					border-color: var(--color-info),
+					background-color: var(--color-surface-info),
+				),
+			),
+		),
+		accent: (
+			border-color: var(--color-accent),
+			element: (
+				header: (
+					background-color: var(--color-accent),
+				),
+				content: (
+					border-color: var(--color-accent),
+					background-color: var(--color-surface-accent),
+				),
+			),
+		),
+		brand: (
+			border-color: var(--color-brand),
+			element: (
+				header: (
+					background-color: var(--color-brand),
+				),
+				content: (
+					border-color: var(--color-brand),
+					background-color: var(--color-surface-brand),
+				),
+			),
+		),
+	),
+) !default;

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

@@ -0,0 +1,140 @@
+$vv-tooltip: (
+	position: relative,
+	display: inline-flex,
+	align-items: center,
+	element: (
+		content: (
+			opacity: 0,
+			position: absolute,
+			z-index: var(--z-tooltip),
+			display: block,
+			min-width: var(--spacing-160),
+			border-radius: var(--rounded-md),
+			border-width: 2px,
+			border-style: solid,
+			border-color: var(--color-gray-darken-4),
+			padding: var(--spacing-4) var(--spacing-sm),
+			margin: 0 0 0 var(--spacing-xs),
+			background: var(--color-gray-darken-4),
+			font-size: var(--text-12),
+			font-weight: var(--font-normal),
+			color: var(--color-gray-lighten-5),
+			text-align: center,
+			inset-inline: 100% auto,
+			inset-block: auto,
+			box-shadow: var(--shadow-md),
+			pseudo: (
+				after: (
+					position: absolute,
+					z-index: -1,
+					inset-inline: -10% auto,
+					inset-block: 50% auto,
+					transform: translateY(-50%),
+					border-width: 10px,
+					border-style: solid,
+					border-color: transparent var(--color-gray-darken-4)
+						transparent transparent,
+				),
+			),
+		),
+	),
+	modifier: (
+		top: (
+			element: (
+				content: (
+					margin: 0 0 var(--spacing-xs) 0,
+					inset-inline: auto,
+					inset-block: auto 100%,
+					pseudo: (
+						after: (
+							position: absolute,
+							z-index: -1,
+							inset-inline: 45% auto,
+							inset-block: 130% auto,
+							border-width: 10px,
+							border-style: solid,
+							border-color: var(--color-gray-darken-4) transparent
+								transparent,
+						),
+					),
+				),
+			),
+		),
+		right: (
+			element: (
+				content: (
+					margin: 0 0 0 var(--spacing-xs),
+					inset-inline: 100% auto,
+					inset-block: auto,
+					pseudo: (
+						after: (
+							position: absolute,
+							z-index: -1,
+							inset-inline: -10% auto,
+							inset-block: 50% auto,
+							transform: translateY(-50%),
+							border-width: 10px,
+							border-style: solid,
+							border-color: transparent var(--color-gray-darken-4)
+								transparent transparent,
+						),
+					),
+				),
+			),
+		),
+		bottom: (
+			element: (
+				content: (
+					margin: var(--spacing-xs) 0 0 0,
+					inset-inline: auto,
+					inset-block: 100% auto,
+					pseudo: (
+						after: (
+							position: absolute,
+							z-index: -1,
+							inset-inline: 45% auto,
+							inset-block: auto 50%,
+							border-width: 10px,
+							border-style: solid,
+							border-color: transparent transparent
+								var(--color-gray-darken-4) transparent,
+						),
+					),
+				),
+			),
+		),
+		left: (
+			element: (
+				content: (
+					margin: 0 var(--spacing-xs) 0 0,
+					inset-inline: auto 100%,
+					inset-block: auto,
+					pseudo: (
+						after: (
+							position: absolute,
+							z-index: -1,
+							inset-inline: auto -10%,
+							inset-block: 50% auto,
+							transform: translateY(-50%),
+							border-width: 10px,
+							border-style: solid,
+							border-color: transparent transparent transparent
+								var(--color-gray-darken-4),
+						),
+					),
+				),
+			),
+		),
+	),
+	state: (
+		hover: (
+			element: (
+				content: (
+					opacity: 1,
+					will-change: opacity,
+					transition: opacity 0.3s ease-in-out,
+				),
+			),
+		),
+	),
+) !default;

package/src/themes/dark/_context.scss

@@ -4,5 +4,8 @@
 // tools (mixins, functions, recipes)
 @import '../../tools';
 
-// settings
+// main settings
+@import '../../settings';
+
+// theme settings
 @import 'settings';

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

@@ -1,3 +1,2 @@
-@import 'vv-alert';
 @import 'vv-button';
 @import 'vv-input-checkbox';

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

@@ -9,4 +9,6 @@ $dark-background-image: (
 		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='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"),
 	minus:
 		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='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"),
+	close:
+		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%3Cpath d='M20 20L4 4m16 0L4 20'/%3E%3C/svg%3E"),
 ) !default;

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

@@ -1,15 +1,28 @@
 @use 'sass:color';
+@use 'sass:map';
 
 $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-surface-palette: (
+	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: (
 	scheme: $dark-color-scheme,
 	word: color-darken-map($dark-color-word, 'word', $scale: 15%),
-	surface: color-lighten-map($dark-color-surface, 'surface', $scale: 5%),
+	surface:
+		map.merge(
+			color-lighten-map($dark-color-surface, 'surface', $scale: 5%),
+			$dark-color-surface-palette
+		),
 	alpha: color-alpha-map($dark-color-alpha, 'alpha', $steps: 5, $scale: 5%),
 ) !default;

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

@@ -1,6 +1,5 @@
 @import 'colors';
 @import 'background';
 
-@import 'components/vv-alert';
 @import 'components/vv-button';
 @import 'components/vv-input-checkbox';

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

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

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

@@ -1,80 +0,0 @@
-$dark-vv-alert: (
-	modifier: (
-		success: (
-			background-color:
-				hsl(
-					var(--color-success-hue) var(--color-success-saturation) 10%
-				),
-			element: (
-				icon: (
-					color: var(--color-success),
-				),
-				title: (
-					color: var(--color-success),
-				),
-			),
-		),
-		danger: (
-			background-color:
-				hsl(var(--color-danger-hue) var(--color-danger-saturation) 10%),
-			element: (
-				icon: (
-					color: var(--color-danger),
-				),
-				title: (
-					color: var(--color-danger),
-				),
-			),
-		),
-		warning: (
-			background-color:
-				hsl(
-					var(--color-warning-hue) var(--color-warning-saturation) 10%
-				),
-			element: (
-				icon: (
-					color: var(--color-warning),
-				),
-				title: (
-					color: var(--color-warning),
-				),
-			),
-		),
-		info: (
-			background-color:
-				hsl(var(--color-info-hue) var(--color-info-saturation) 10%),
-			element: (
-				icon: (
-					color: var(--color-info),
-				),
-				title: (
-					color: var(--color-info),
-				),
-			),
-		),
-		accent: (
-			background-color:
-				hsl(var(--color-accent-hue) var(--color-accent-saturation) 10%),
-			element: (
-				icon: (
-					color: var(--color-accent),
-				),
-				title: (
-					color: var(--color-accent),
-				),
-			),
-		),
-		brand: (
-			background-color:
-				hsl(var(--color-brand-hue) var(--color-brand-saturation) 10%),
-			element: (
-				icon: (
-					color: var(--color-brand),
-				),
-				title: (
-					color: var(--color-brand),
-				),
-			),
-		),
-	),
-) !default;