@volverjs/style 0.1.2-beta.9 → 0.1.2

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

@@ -0,0 +1,16 @@
+$vv-tab: (
+	display: flex,
+	flex-direction: column,
+	element: (
+		panel: (
+			display: none,
+			padding: var(--spacing-lg),
+			line-height: var(--leading-normal),
+			state: (
+				target: (
+					display: block,
+				),
+			),
+		),
+	),
+) !default;

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

@@ -4,6 +4,11 @@ $vv-table: (
 	border-collapse: collapse,
 	border-color: var(--color-surface-5),
 	element: (
+		caption: (
+			_alias: 'caption',
+			caption-side: bottom,
+			[padding]: var(--table-cell-padding),
+		),
 		tr: (
 			_alias: 'tr',
 			border-width: 0 0 1px 0,
@@ -21,15 +26,17 @@ $vv-table: (
 		),
 		th: (
 			_alias: 'th',
-			font-weight: semibold,
+			font-weight: var(--font-semibold),
 			font-size: var(--text-sm),
 			color: var(--color-word-2),
+			vertical-align: middle,
 			[padding]: var(--table-cell-padding),
 		),
 		td: (
 			_alias: 'td',
 			border-style: solid,
 			font-size: var(--text-xs),
+			vertical-align: middle,
 			[padding]: var(--table-cell-padding),
 		),
 	),

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

@@ -12,6 +12,26 @@ $vv-text: (
 		copy: (
 			margin-block: var(--spacing-16),
 		),
+		link: (
+			color: var(--color-brand),
+			state: (
+				focus-visible: (
+					outline: var(--spacing-px) solid var(--color-brand),
+					outline-offset: var(--spacing-4),
+				),
+				hover: (
+					text-decoration: underline,
+					text-underline-offset: var(--spacing-4),
+				),
+				active: (
+					color: var(--color-brand-darken-3),
+				),
+				disabled: (
+					opacity: 0.5,
+					cursor: not-allowed,
+				),
+			),
+		),
 		quote: (
 			font-family: var(--font-serif),
 			border-left: var(--spacing-4) solid var(--color-surface-3),

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

@@ -5,6 +5,7 @@ $vv-textarea: (
 	margin-bottom: var(--input-gap),
 	font-size: var(--input-font-size),
 	line-height: var(--input-line-height),
+	min-width: var(--input-min-width),
 	element: (
 		label: (
 			_alias: '> label',
@@ -17,6 +18,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,
@@ -25,7 +33,8 @@ $vv-textarea: (
 			overflow: hidden,
 			background-color: var(--input-background-color),
 			will-change: background-color,
-			transition: background-color 0.3s ease-in-out,
+			transition: var(--transition-colors),
+			min-height: var(--spacing-50),
 			pseudo: (
 				before: (
 					position: absolute,
@@ -41,7 +50,7 @@ $vv-textarea: (
 					transform: scaleX(0),
 					transform-origin: left,
 					will-change: transform,
-					transition: transform 0.3s ease-in-out,
+					transition: var(--transition-transform),
 				),
 			),
 			state: (
@@ -63,9 +72,9 @@ $vv-textarea: (
 			display: block,
 			flex: 1,
 			color: var(--input-color),
-			[padding]: var(--input-padding-top) var(--input-padding-right)
-				var(--input-padding-bottom) var(--input-padding-left),
-			min-height: var(--spacing-50),
+			[padding]: var(--input-spacing-top) var(--input-spacing-right)
+				var(--input-spacing-bottom) var(--input-spacing-left),
+			overflow: auto,
 			pseudo: (
 				placeholder: (
 					color: var(--input-placeholder-color),
@@ -82,8 +91,8 @@ $vv-textarea: (
 		),
 		icon: (
 			_alias: ':where(svg, [data-icon])',
-			margin: var(--input-padding-top) var(--input-padding-right)
-				var(--input-padding-bottom) var(--input-padding-left),
+			margin: var(--input-spacing-top) var(--input-spacing-right)
+				var(--input-spacing-bottom) var(--input-spacing-left),
 			position: var(--input-icon-position),
 			width: var(--input-icon-width),
 			height: var(--input-icon-height),
@@ -117,10 +126,17 @@ $vv-textarea: (
 	),
 	modifier: (
 		icon-left: (
-			--input-padding-left: calc(var(--spacing-sm) * 2 + 1em),
+			--input-spacing-left: calc(var(--spacing-sm) * 2 + 1em),
 		),
 		icon-right: (
-			--input-padding-right: calc(var(--spacing-sm) * 2 + 1em),
+			--input-spacing-right: calc(var(--spacing-sm) * 2 + 1em),
+		),
+		resizable: (
+			element: (
+				input: (
+					resize: vertical,
+				),
+			),
 		),
 		valid: (
 			element: (
@@ -135,6 +151,9 @@ $vv-textarea: (
 				hint: (
 					color: var(--input-valid-color),
 				),
+				limit: (
+					color: var(--input-valid-color),
+				),
 				icon-right: (
 					color: var(--input-valid-color),
 				),
@@ -153,6 +172,9 @@ $vv-textarea: (
 				hint: (
 					color: var(--input-invalid-color),
 				),
+				limit: (
+					color: var(--input-invalid-color),
+				),
 				icon-right: (
 					color: var(--input-invalid-color),
 				),
@@ -167,40 +189,43 @@ $vv-textarea: (
 							background: var(--color-brand-lighten-5),
 						),
 						after: (
-							animation: var(--animate-indeterminate),
+							animation: var(--animation-indeterminate),
 						),
 					),
 				),
 			),
 		),
 		floating: (
-			[margin-left]: var(--input-padding-left),
-			[margin-right]: var(--input-padding-right),
+			[margin-left]: var(--input-spacing-left),
+			[margin-right]: var(--input-spacing-right),
 			element: (
 				wrapper: (
-					[margin-left]: calc(var(--input-padding-left) * -1),
-					[margin-right]: calc(var(--input-padding-right) * -1),
+					[margin-left]: calc(var(--input-spacing-left) * -1),
+					[margin-right]: calc(var(--input-spacing-right) * -1),
 				),
 				hint: (
-					[margin-left]: calc(var(--input-padding-left) * -1),
-					[margin-right]: calc(var(--input-padding-right) * -1),
+					[margin-left]: calc(var(--input-spacing-left) * -1),
+					[margin-right]: calc(var(--input-spacing-right) * -1),
 				),
 				label: (
 					position: absolute,
 					z-index: 1,
 					pointer-events: none,
 					font-size: inherit,
-					[padding-top]: var(--input-padding-top),
-					[padding-bottom]: var(--input-padding-bottom),
+					[padding-top]: var(--input-spacing-top),
+					[padding-bottom]: var(--input-spacing-bottom),
 					padding-inline: 0,
 					margin: 0,
 					will-change: 'transform',
-					transform-origin: left,
-					transition: all 0.3s ease-in-out,
+					transition: var(--transition-all),
 				),
 				input: (
+					will-change: 'transform',
+					transition: var(--transition-all),
 					pseudo: (
 						placeholder: (
+							will-change: 'opacity',
+							transition: var(--transition-opacity),
 							opacity: 0,
 						),
 					),
@@ -210,11 +235,11 @@ $vv-textarea: (
 				focus-within: (
 					element: (
 						label: (
-							transform: translateY(-1.2ch),
+							transform: translateY(-0.8em),
 							font-size: var(--text-12),
 						),
 						input: (
-							transform: translateY(0.85ch),
+							transform: translateY(0.55em),
 							pseudo: (
 								placeholder: (
 									opacity: 1,
@@ -226,11 +251,11 @@ $vv-textarea: (
 				dirty: (
 					element: (
 						label: (
-							transform: translateY(-1.2ch),
+							transform: translateY(-0.8em),
 							font-size: var(--text-12),
 						),
 						input: (
-							transform: translateY(0.85ch),
+							transform: translateY(0.55em),
 							pseudo: (
 								placeholder: (
 									opacity: 1,

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

@@ -0,0 +1,259 @@
+$vv-toast: (
+	--toast-pie-animation-duration: 3s,
+	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-10),
+			color: var(--color-white),
+			background-color: var(--color-gray),
+			font-size: var(--text-16),
+		),
+		content: (
+			padding: var(--spacing-10),
+			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-10),
+			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,
+		),
+		pie: (
+			position: absolute,
+			display: block,
+			right: var(--spacing-10),
+			width: 1.1em,
+			height: 1.1em,
+			background-color: var(--color-white),
+			border: 1px solid var(--color-white),
+			border-radius: 50%,
+			overflow: hidden,
+			opacity: 0.8,
+			cursor: pointer,
+			pseudo: (
+				before: (
+					position: absolute,
+					top: 0,
+					width: 50%,
+					height: 100%,
+					transform-origin: 100% 50%,
+					background-color: var(--color-gray),
+					border-radius: 100% 0 0 100% / 50% 0 0 50%,
+					will-change: transform,
+					[animation]: spin var(--toast-pie-animation-duration) linear,
+				),
+				after: (
+					position: absolute,
+					top: 0,
+					width: 50%,
+					height: 100%,
+					background-color: var(--color-white),
+					will-change: opacity,
+					border-radius: 100% 0 0 100% / 50% 0 0 50%,
+					[animation]: pie-masks var(--toast-pie-animation-duration)
+						steps(1, end),
+					opacity: 0,
+				),
+			),
+		),
+		pie-mask: (
+			position: absolute,
+			top: 0,
+			width: 50%,
+			height: 100%,
+			left: 50%,
+			background-color: var(--color-gray),
+			will-change: opacity,
+			[animation]: pie-masks var(--toast-pie-animation-duration)
+				steps(1, end) reverse,
+			z-index: 1,
+		),
+	),
+	modifier: (
+		fixed: (
+			position: fixed,
+			z-index: var(--z-toast),
+		),
+		top: (
+			inset-block: var(--spacing-lg) auto,
+		),
+		right: (
+			inset-inline: auto var(--spacing-lg),
+		),
+		bottom: (
+			inset-block: auto var(--spacing-lg),
+		),
+		left: (
+			inset-inline: var(--spacing-lg) auto,
+		),
+		center: (
+			inset-inline: 50% auto,
+			transform: translateX(-50%),
+		),
+		dismissable: (
+			element: (
+				header: (
+					padding-right: calc(var(--spacing-10) * 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),
+				),
+				pie: (
+					pseudo: (
+						before: (
+							background-color: var(--color-success),
+						),
+					),
+				),
+				pie-mask: (
+					background-color: var(--color-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),
+				),
+				pie: (
+					pseudo: (
+						before: (
+							background-color: var(--color-danger),
+						),
+					),
+				),
+				pie-mask: (
+					background-color: var(--color-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),
+				),
+				pie: (
+					pseudo: (
+						before: (
+							background-color: var(--color-warning),
+						),
+					),
+				),
+				pie-mask: (
+					background-color: var(--color-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),
+				),
+				pie: (
+					pseudo: (
+						before: (
+							background-color: var(--color-info-darken-1),
+						),
+					),
+				),
+				pie-mask: (
+					background-color: var(--color-info-darken-1),
+				),
+			),
+		),
+		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),
+				),
+				pie: (
+					pseudo: (
+						before: (
+							background-color: var(--color-accent),
+						),
+					),
+				),
+				pie-mask: (
+					background-color: var(--color-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),
+				),
+				pie: (
+					pseudo: (
+						before: (
+							background-color: var(--color-brand),
+						),
+					),
+				),
+				pie-mask: (
+					background-color: var(--color-brand),
+				),
+			),
+		),
+	),
+) !default;

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

@@ -0,0 +1,74 @@
+$vv-tooltip: (
+	opacity: 0,
+	display: block,
+	position: absolute,
+	inset-inline: 100% auto,
+	top: 50%,
+	transform: translate(var(--spacing-10), -50%),
+	z-index: var(--z-tooltip),
+	inline-size: max-content,
+	max-inline-size: 25ch,
+	border-radius: var(--rounded-md),
+	padding: var(--spacing-4) var(--spacing-sm),
+	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,
+	box-shadow: var(--shadow-md),
+	will-change: opacity,
+	transition: var(--transition-opacity),
+	pseudo: (
+		after: (
+			position: absolute,
+			z-index: -1,
+			inset-inline: 0 auto,
+			inset-block: 50% auto,
+			transform: translate(-100%, -50%),
+			border-width: var(--spacing-8),
+			border-style: solid,
+			border-color: transparent var(--color-gray-darken-4) transparent
+				transparent,
+		),
+	),
+	modifier: (
+		visible: (
+			opacity: 1,
+		),
+		top: (
+			inset-inline: 50% 0,
+			inset-block: auto 100%,
+			transform: translate(-50%, calc(var(--spacing-10) * -1)),
+			pseudo: (
+				after: (
+					inset-inline: 50% auto,
+					inset-block: 100% auto,
+					transform: translate(-50%, 0) rotate(-90deg),
+				),
+			),
+		),
+		bottom: (
+			inset-inline: 50% 0,
+			inset-block: 100% auto,
+			transform: translate(-50%, var(--spacing-10)),
+			pseudo: (
+				after: (
+					inset-inline: 50% auto,
+					inset-block: 0 auto,
+					transform: translate(-50%, -100%) rotate(90deg),
+				),
+			),
+		),
+		left: (
+			inset-inline: auto 100%,
+			transform: translate(calc(var(--spacing-10) * -1), -50%),
+			pseudo: (
+				after: (
+					position: absolute,
+					inset-inline: auto 0,
+					transform: translate(100%, -50%) rotate(180deg),
+				),
+			),
+		),
+	),
+) !default;

package/src/themes/dark/_context.scss

@@ -1,8 +1,11 @@
 // configuration
-@import '../../config';
+@forward '../../config';
 
 // tools (mixins, functions, recipes)
-@import '../../tools';
+@forward '../../tools';
 
-// settings
-@import 'settings';
+// main settings
+@forward '../../settings';
+
+// theme settings
+@forward 'settings';

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

@@ -1,15 +1,13 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 $component-name: map.get($components-names, vv-button);
 $component-map: $dark-vv-button;
-$props: true;
 
 @mixin theme-dark-vv-button {
 	@include spread-map-into-props(
 		$map: $component-map,
-		$prefix: $component-name,
-		$deep: $props
+		$prefix: $component-name
 	);
 }
 

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

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

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

@@ -1,4 +1,4 @@
-@import '../context';
+@use '../context' as *;
 
 @mixin theme-dark-bg {
 	@include spread-map-into-props($dark-background-image, 'bg');

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

@@ -1,4 +1,4 @@
-@import '../context';
+@use '../context' as *;
 
 @mixin theme-dark-colors {
 	@include spread-map-into-props($dark-colors, 'color');

package/src/themes/dark/props/_input.scss

@@ -0,0 +1,15 @@
+@use '../context' as *;
+
+@mixin theme-dark-input {
+	@include spread-map-into-props($dark-input, 'input');
+}
+
+:where(:host, :root, .theme):not(.theme--light) {
+	@media (prefers-color-scheme: dark) {
+		@include theme-dark-input;
+	}
+}
+
+:where(.theme.theme--dark) {
+	@include theme-dark-input;
+}

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

@@ -1,2 +1,3 @@
-@import 'background';
-@import 'colors';
+@use 'background';
+@use 'colors';
+@use 'input';

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

@@ -1,3 +1,6 @@
+@use 'colors' as *;
+@use '../../../tools/functions' as *;
+
 // background-image
 $dark-background-image: (
 	none: none,
@@ -9,4 +12,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;