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

package/src/settings/_background.scss

@@ -48,9 +48,11 @@ $background-image: (
 	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($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"),
 	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"),
+		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none' stroke='rgb(51 65 85 / 0.25)'%3E%3Cpath d='M0 .5H31.5V32'/%3E%3C/svg%3E"),
 	check:
 		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($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($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($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/settings/_colors.scss

@@ -1,4 +1,5 @@
 @use 'sass:color';
+@use 'sass:map';
 
 // color variables
 $color-scheme: light !default;
@@ -14,6 +15,14 @@ $color-warning: #f2c037 !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% 98%) !default;
+$color-surface-palette: (
+	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;
@@ -32,7 +41,11 @@ $colors: (
 	warning: color-shades-map($color-warning, 'warning'),
 	gray: color-shades-map($color-gray, 'gray', $scale: 15%),
 	word: color-lighten-map($color-word, 'word', $scale: 15%),
-	surface: color-darken-map($color-surface, 'surface', $scale: 2%),
+	surface:
+		map.merge(
+			color-darken-map($color-surface, 'surface', $scale: 2%),
+			$color-surface-palette
+		),
 	shadow: hsla-map($color-shadow, 'shadow'),
 	backdrop: hsla-map($color-backdrop, 'backdrop'),
 	alpha: color-alpha-map($color-alpha, 'alpha', $steps: 5, $scale: 5%),

package/src/settings/_index.scss

@@ -19,8 +19,8 @@
 @import 'components/vv-alert';
 @import 'components/vv-badge';
 @import 'components/vv-breadcrumb';
-@import 'components/vv-button-group';
 @import 'components/vv-button';
+@import 'components/vv-button-group';
 @import 'components/vv-card';
 @import 'components/vv-dialog';
 @import 'components/vv-dropdown';
@@ -35,3 +35,5 @@
 @import 'components/vv-table';
 @import 'components/vv-text';
 @import 'components/vv-textarea';
+@import 'components/vv-toast';
+@import 'components/vv-tooltip';

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

@@ -1,25 +1,59 @@
 $vv-alert: (
-	--alert-padding-top: var(--spacing-md),
-	--alert-padding-right: var(--spacing-md),
-	--alert-padding-bottom: var(--spacing-md),
-	--alert-padding-left: var(--spacing-md),
-	[padding-top]: var(--alert-padding-top),
-	[padding-right]: var(--alert-padding-right),
-	[padding-bottom]: var(--alert-padding-bottom),
-	[padding-left]: var(--alert-padding-left),
+	display: flex,
+	min-width: 0,
+	overflow: hidden,
+	align-items: center,
+	padding: var(--spacing-md),
 	background-color: var(--color-surface-2),
-	border-color: var(--color-surface-4),
+	border-color: var(--color-gray-lighten-4),
 	border-width: var(--border),
 	border-style: solid,
 	border-radius: var(--rounded),
 	position: relative,
+	element: (
+		icon: (
+			_alias: '> :where(svg, [data-icon])',
+			position: absolute,
+			left: var(--spacing-md),
+			inline-size: 1.2em,
+			block-size: 1.2em,
+		),
+		close: (
+			position: absolute,
+			right: var(--spacing-md),
+			inline-size: 1em,
+			block-size: 1em,
+			cursor: pointer,
+			background-image: var(--bg-close),
+			background-position: center,
+			background-size: 100% auto,
+			background-repeat: no-repeat,
+		),
+		title: (
+			display: flex,
+			margin-right: 1ch,
+			line-height: var(--leading-none),
+			font-weight: var(--font-bold),
+			color: var(--color-word),
+		),
+		content: (
+			line-height: var(--leading-none),
+			color: var(--color-word-1),
+			text-overflow: ellipsis,
+			white-space: nowrap,
+			overflow: hidden,
+		),
+		separator: (
+			_alias: '> hr',
+			height: var(--border),
+			background-color: var(--color-alpha-2),
+			margin-block: var(--spacing-sm),
+		),
+	),
 	modifier: (
 		success: (
 			border-color: var(--color-success-lighten-5),
-			background-color:
-				hsl(
-					var(--color-success-hue) var(--color-success-saturation) 90%
-				),
+			background-color: var(--color-surface-success),
 			element: (
 				icon: (
 					color: var(--color-success),
@@ -31,118 +65,85 @@ $vv-alert: (
 		),
 		danger: (
 			border-color: var(--color-danger-lighten-5),
-			background-color:
-				hsl(var(--color-danger-hue) var(--color-danger-saturation) 90%),
+			background-color: var(--color-surface-danger),
 			element: (
 				icon: (
-					color: var(--color-danger-darken-1),
+					color: var(--color-danger),
 				),
 				title: (
-					color: var(--color-danger-darken-1),
+					color: var(--color-danger),
 				),
 			),
 		),
 		warning: (
 			border-color: var(--color-warning-lighten-5),
-			background-color:
-				hsl(
-					var(--color-warning-hue) var(--color-warning-saturation) 90%
-				),
+			background-color: var(--color-surface-warning),
 			element: (
 				icon: (
-					color: var(--color-warning-darken-1),
+					color: var(--color-warning-darken-2),
 				),
 				title: (
-					color: var(--color-warning-darken-1),
+					color: var(--color-warning-darken-2),
 				),
 			),
 		),
 		info: (
 			border-color: var(--color-info-lighten-5),
-			background-color:
-				hsl(var(--color-info-hue) var(--color-info-saturation) 90%),
+			background-color: var(--color-surface-info),
 			element: (
 				icon: (
-					color: var(--color-info-darken-1),
+					color: var(--color-info-darken-2),
 				),
 				title: (
-					color: var(--color-info-darken-1),
+					color: var(--color-info-darken-2),
 				),
 			),
 		),
 		accent: (
 			border-color: var(--color-accent-lighten-5),
-			background-color:
-				hsl(var(--color-accent-hue) var(--color-accent-saturation) 90%),
+			background-color: var(--color-surface-accent),
 			element: (
 				icon: (
-					color: var(--color-accent-darken-1),
+					color: var(--color-accent),
 				),
 				title: (
-					color: var(--color-accent-darken-1),
+					color: var(--color-accent),
 				),
 			),
 		),
 		brand: (
-			--alert-color: var(--color-brand-darken-1),
 			border-color: var(--color-brand-lighten-5),
-			background-color:
-				hsl(var(--color-brand-hue) var(--color-brand-saturation) 90%),
+			background-color: var(--color-surface-brand),
 			element: (
 				icon: (
-					color: var(--color-brand-darken-1),
+					color: var(--color-brand),
 				),
 				title: (
-					color: var(--color-brand-darken-1),
+					color: var(--color-brand),
 				),
 			),
 		),
 		callout: (
+			display: block,
 			border-radius: var(--rounded-none),
 			border-width: 0 0 0 var(--spacing-4),
-		),
-		icon: (
-			[padding-left]: calc(var(--alert-padding-left) * 2 + 1.2em),
 			element: (
-				icon: (
-					position: absolute,
-					[left]: var(--alert-padding-left),
+				title: (
+					margin-bottom: var(--spacing-sm),
+					margin-right: 0,
+					text-transform: uppercase,
 				),
-			),
-		),
-		action: (
-			[padding-right]: calc(var(--alert-padding-right) * 2 + 1.2em),
-			element: (
-				action: (
-					position: absolute,
-					[right]: var(--alert-padding-right),
+				content: (
+					line-height: var(--leading-normal),
+					white-space: wrap,
 				),
 			),
 		),
-	),
-	element: (
 		icon: (
-			_alias: '> :where(svg, [data-icon])',
-			inline-size: 1.2em,
-			block-size: 1.2em,
-		),
-		action: (
-			font-size: 1.2em,
-			inline-size: 1em,
-			block-size: 1em,
-			cursor: pointer,
-		),
-		title: (
-			display: block,
-			margin-bottom: var(--spacing-sm),
-			font-weight: var(--font-bold),
-			text-transform: uppercase,
+			padding-left: calc(var(--spacing-md) * 2 + 1em),
 		),
-		separator: (
-			_alias: '> hr',
-			height: var(--border),
-			background-color: var(--color-alpha-2),
-			margin-block: var(--spacing-sm),
+		close: (
+			padding-right: calc(var(--spacing-md) * 2 + 1em),
 		),
 	),
 ) !default;

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

@@ -51,5 +51,11 @@ $vv-badge: (
 		warning: (
 			background: var(--color-warning),
 		),
+		info: (
+			background: var(--color-info),
+		),
+		accent: (
+			background: var(--color-accent),
+		),
 	),
 ) !default;

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

@@ -9,7 +9,7 @@ $vv-card: (
 	border-bottom-width: var(--border),
 	border-left-width: var(--border),
 	border-style: none,
-	border-radius: var(--border-8),
+	border-radius: var(--rounded-lg),
 	margin: var(--spacing-0),
 	background-color: var(--color-surface),
 	box-shadow: var(--shadow-md),
@@ -34,6 +34,7 @@ $vv-card: (
 		),
 		content: (
 			padding: var(--spacing-md),
+			line-height: var(--leading-normal),
 			flex-grow: 1,
 			min-height: 0,
 			overflow: auto,

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

@@ -26,7 +26,7 @@ $vv-dialog: (
 			flex-direction: column,
 			position: relative,
 			box-shadow: var(--shadow-lg),
-			max-width: clamp(30vw, 40rem, 50vw),
+			width: clamp(30vw, 40rem, 90vw),
 			max-height: 90vh,
 			z-index: var(--z-modal),
 			background: var(--color-surface),
@@ -45,11 +45,17 @@ $vv-dialog: (
 			border-bottom: var(--border) solid var(--color-surface-4),
 		),
 		close: (
-			display: flex,
+			inline-size: 1em,
+			block-size: 1em,
 			cursor: pointer,
+			background-image: var(--bg-close),
+			background-position: center,
+			background-size: 100% auto,
+			background-repeat: no-repeat,
 		),
 		content: (
 			padding: var(--spacing-md),
+			line-height: var(--leading-normal),
 			flex: 1,
 			min-height: 0,
 			overflow: auto,
@@ -67,7 +73,7 @@ $vv-dialog: (
 		small: (
 			element: (
 				wrapper: (
-					max-width: clamp(10vw, 25rem, 30vw),
+					width: clamp(10vw, 25rem, 90vw),
 				),
 			),
 		),

package/src/settings/components/_vv-input-checkbox.scss

@@ -76,6 +76,14 @@ $vv-input-checkbox: (
 						active: (
 							background-color: var(--color-word-3),
 						),
+						indeterminate: (
+							background-image: none,
+							pseudo: (
+								after: (
+									transform: translateX(50%),
+								),
+							),
+						),
 						checked: (
 							background-image: none,
 							background-color: var(--color-brand),

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

@@ -166,6 +166,11 @@ $vv-input-text: (
 			overflow: var(--input-hint-overflow),
 			max-width: var(--input-hint-max-width),
 		),
+		limit: (
+			[padding-right]: var(--input-padding-right),
+			font-size: var(--input-hint-font-size),
+			color: var(--input-hint-color),
+		),
 	),
 	modifier: (
 		icon-left: (
@@ -173,6 +178,11 @@ $vv-input-text: (
 		),
 		icon-right: (
 			--input-padding-right: calc(var(--spacing-sm) * 2 + 1em),
+			element: (
+				limit: (
+					margin-left: calc((var(--spacing-sm) + 1em) * -1),
+				),
+			),
 		),
 		valid: (
 			element: (
@@ -187,6 +197,9 @@ $vv-input-text: (
 				hint: (
 					color: var(--input-valid-color),
 				),
+				limit: (
+					color: var(--input-valid-color),
+				),
 				icon-right: (
 					color: var(--input-valid-color),
 				),
@@ -205,6 +218,9 @@ $vv-input-text: (
 				hint: (
 					color: var(--input-invalid-color),
 				),
+				limit: (
+					color: var(--input-invalid-color),
+				),
 				icon-right: (
 					color: var(--input-invalid-color),
 				),

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

@@ -19,7 +19,8 @@ $vv-nav: (
 		),
 		item-label: (
 			_alias: 'li > a',
-			display: block,
+			display: flex,
+			align-items: center,
 			will-change: background-color color,
 			transition: all 0.3s ease-in-out,
 			border-radius: var(--rounded-md),
@@ -53,5 +54,30 @@ $vv-nav: (
 			display: flex,
 			flex-direction: column,
 		),
+		border: (
+			--nav-item-padding: var(--spacing-8) var(--spacing-12),
+			font-size: var(--text-12),
+			display: flex,
+			flex-direction: column,
+			border-left: var(--border) solid var(--color-surface-3),
+			element: (
+				heading-label: (
+					text-transform: uppercase,
+				),
+				item-label: (
+					margin-left: calc(-1 * var(--border)),
+					border-left: var(--border) solid var(--color-surface-3),
+					border-radius: 0,
+					state: (
+						hover: (
+							border-color: var(--color-brand),
+						),
+						selected: (
+							border-color: var(--color-brand),
+						),
+					),
+				),
+			),
+		),
 	),
 ) !default;

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

@@ -17,6 +17,13 @@ $vv-textarea: (
 			overflow: var(--input-label-overflow),
 			max-width: var(--input-label-max-width),
 		),
+		limit: (
+			position: absolute,
+			right: var(--input-gap),
+			bottom: var(--input-gap),
+			font-size: var(--input-hint-font-size),
+			color: var(--input-hint-color),
+		),
 		wrapper: (
 			position: relative,
 			display: flex,
@@ -66,6 +73,7 @@ $vv-textarea: (
 			[padding]: var(--input-padding-top) var(--input-padding-right)
 				var(--input-padding-bottom) var(--input-padding-left),
 			min-height: var(--spacing-50),
+			overflow: auto,
 			pseudo: (
 				placeholder: (
 					color: var(--input-placeholder-color),
@@ -122,6 +130,13 @@ $vv-textarea: (
 		icon-right: (
 			--input-padding-right: calc(var(--spacing-sm) * 2 + 1em),
 		),
+		resizable: (
+			element: (
+				input: (
+					resize: vertical,
+				),
+			),
+		),
 		valid: (
 			element: (
 				wrapper: (
@@ -135,6 +150,9 @@ $vv-textarea: (
 				hint: (
 					color: var(--input-valid-color),
 				),
+				limit: (
+					color: var(--input-valid-color),
+				),
 				icon-right: (
 					color: var(--input-valid-color),
 				),
@@ -153,6 +171,9 @@ $vv-textarea: (
 				hint: (
 					color: var(--input-invalid-color),
 				),
+				limit: (
+					color: var(--input-invalid-color),
+				),
 				icon-right: (
 					color: var(--input-invalid-color),
 				),

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;