@volverjs/style 0.1.2-beta.18 → 0.1.2-beta.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@volverjs/style",
-  "version": "0.1.2-beta.18",
+  "version": "0.1.2-beta.19",
   "description": "@volverjs/style is a lightweight responsive CSS utility library to accompany @volverjs/ui and static webpages as well.",
   "main": "dist/style.css",
   "style": "dist/style.css",

package/src/_preflight.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+
 :where(:host, :root, [class*='theme']) {
 	accent-color: var(--color-brand);
 	background: var(--color-surface);
@@ -72,6 +74,10 @@
 			@extend %italic !optional;
 		}
 
+		&:where(svg) {
+			@extend %align-middle !optional;
+		}
+
 		&:where(dfn, var) {
 			@extend %font-serif !optional;
 		}
@@ -80,7 +86,7 @@
 			@extend %line-through !optional;
 		}
 
-		&:where(ins, u, cite, a) {
+		&:where(ins, u, cite) {
 			@extend %underline !optional;
 		}
 
@@ -135,6 +141,32 @@
 			@extend %border-surface-3 !optional;
 		}
 
+		// anchor
+		&:where(a:not(.#{map.get($components-names, vv-button)})) {
+			@extend %vv-text !optional;
+			@extend %vv-text--link !optional;
+
+			&:where(:hover) {
+				@extend %vv-button-modifier-link--hover !optional;
+			}
+
+			&:where(:focus) {
+				@extend %vv-button-modifier-link--focus !optional;
+			}
+
+			&:where(:focus-visible) {
+				@extend %vv-button-modifier-link--focus-visible !optional;
+			}
+
+			&:where(:visited) {
+				@extend %vv-button-modifier-link--visited !optional;
+			}
+
+			&:where(:active) {
+				@extend %vv-button-modifier-link--active !optional;
+			}
+		}
+
 		// buttons
 		&:where(button, input[type='button'], input[type='submit'], input[type='reset']) {
 			@extend %vv-button !optional;

package/src/components/vv-tooltip.scss

@@ -3,6 +3,7 @@
 
 $component-name: map.get($components-names, vv-tooltip);
 $component-map: $vv-tooltip;
+$component-selector: '.#{ $component-name}';
 
 @include spread-map-into-bem(
 	$map: $component-map,
@@ -10,3 +11,20 @@ $component-map: $vv-tooltip;
 	$props: $use-custom-props-for-components,
 	$zero-specificity: $zero-specificity-for-compoenents
 );
+
+@include wrap-with-where(
+	$selector: '*:has(#{$component-selector})',
+	$enabled: $zero-specificity-for-compoenents
+) {
+	position: relative;
+}
+
+@include wrap-with-where(
+	$selector: '*:has(> #{$component-selector})',
+	$enabled: $zero-specificity-for-compoenents
+) {
+	&:hover,
+	&:focus-visible {
+		@extend %vv-tooltip--visible !optional;
+	}
+}

package/src/props/animation.scss

@@ -78,3 +78,14 @@
 		background-position: -200% 0;
 	}
 }
+
+@keyframes pie-masks {
+	0% {
+		opacity: 1;
+	}
+
+	50%,
+	100% {
+		opacity: 0;
+	}
+}

package/src/settings/_spacing.scss

@@ -11,6 +11,7 @@ $spacing: (
 	12: 0.75rem,
 	14: 0.875rem,
 	16: 1rem,
+	18: 1.125rem,
 	20: 1.25rem,
 	22: 1.375rem,
 	24: 1.5rem,

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

@@ -5,6 +5,7 @@ $vv-accordion: (
 	--accordion-padding-right: 0px,
 	--accordion-padding-bottom: 0px,
 	--accordion-padding-left: 0px,
+	overflow: hidden,
 	element: (
 		summary: (
 			_alias: '> summary',
@@ -100,11 +101,12 @@ $vv-accordion: (
 			),
 		),
 		bordered: (
-			--accordion-padding-top: var(--spacing-sm),
-			--accordion-padding-right: var(--spacing-sm),
-			--accordion-padding-bottom: var(--spacing-sm),
-			--accordion-padding-left: var(--spacing-sm),
-			border-bottom: var(--border) solid var(--color-surface-2),
+			--accordion-padding-top: var(--spacing-xs),
+			--accordion-padding-right: var(--spacing-xs),
+			--accordion-padding-bottom: var(--spacing-xs),
+			--accordion-padding-left: var(--spacing-xs),
+			border: var(--border) solid var(--color-surface-4),
+			border-radius: var(--rounded-lg),
 			element: (
 				summary: (
 					state: (

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

@@ -51,6 +51,18 @@ $vv-alert: (
 		),
 	),
 	modifier: (
+		fixed: (
+			position: fixed,
+			z-index: var(--z-notification-alert),
+		),
+		top: (
+			inset-inline: var(--spacing-lg),
+			inset-block: var(--spacing-lg) auto,
+		),
+		bottom: (
+			inset-inline: var(--spacing-lg),
+			inset-block: auto var(--spacing-lg),
+		),
 		success: (
 			border-color: var(--color-success-lighten-5),
 			background-color: var(--color-surface-success),

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

@@ -1,34 +1,32 @@
 $vv-avatar: (
 	display: inline-flex,
+	position: relative,
 	justify-content: center,
 	align-items: center,
-	width: var(--spacing-40),
-	height: var(--spacing-40),
-	border-radius: 50%,
-	border-width: var(--spacing-2),
-	border-style: solid,
-	border-color: var(--color-surface-4),
-	background-color: var(--color-word),
+	font-size: var(--text-12),
+	line-height: var(--leading-none),
+	width: var(--spacing-28),
+	height: var(--spacing-28),
+	border-radius: var(--rounded),
 	background-position: center,
 	background-size: contain,
 	background-repeat: no-repeat,
-	color: var(--color-surface),
+	color: var(--color-white),
 	object-fit: contain,
-	overflow: hidden,
 	modifier: (
-		small: (
-			width: var(--spacing-40),
-			height: var(--spacing-40),
+		rounded: (
+			border-radius: var(--rounded-full),
+			overflow: hidden,
 		),
-		medium: (
-			width: var(--spacing-50),
-			height: var(--spacing-50),
-			font-size: 1.3em,
+		md: (
+			font-size: var(--text-14),
+			width: var(--spacing-34),
+			height: var(--spacing-34),
 		),
-		large: (
-			width: var(--spacing-64),
-			height: var(--spacing-64),
-			font-size: 1.7em,
+		lg: (
+			font-size: var(--text-16),
+			width: var(--spacing-40),
+			height: var(--spacing-40),
 		),
 	),
 	state: (
@@ -37,4 +35,14 @@ $vv-avatar: (
 			outline-offset: var(--spacing-0),
 		),
 	),
+	element: (
+		badge: (
+			_alias: '> sup',
+			position: absolute,
+			top: 0,
+			right: 0,
+			transform: translate(50%, -50%),
+			box-shadow: var(--shadow-sm),
+		),
+	),
 ) !default;

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

@@ -1,9 +1,15 @@
 $vv-badge: (
 	--badge-font-size: 0.7rem,
+	--badge-color: var(--color-white),
+	--badge-background-color: var(--color-brand),
+	--badge-border-width: 0,
 	[font-size]: var(--badge-font-size),
+	[background-color]: var(--badge-background-color),
+	[color]: var(--badge-color),
+	[border-width]: var(--badge-border-width),
+	[border-color]: var(--badge-background-color),
+	border-style: solid,
 	border-radius: 0.5em,
-	background: var(--color-brand),
-	color: var(--color-white),
 	line-height: 2em,
 	min-height: 2em,
 	min-width: 2em,
@@ -28,34 +34,43 @@ $vv-badge: (
 		),
 	),
 	modifier: (
-		small: (
+		sm: (
 			--badge-font-size: 0.6rem,
 		),
 		rounded: (
 			border-radius: 1em,
 		),
+		outline: (
+			--badge-border-width: var(--border),
+			[background-color]: transparent,
+			[color]: var(--badge-background-color),
+		),
+		ghost: (
+			[background-color]: transparent,
+			[color]: var(--badge-background-color),
+		),
 		white: (
-			background: alpha-color('white', 80%),
-			color: var(--color-black),
+			--badge-background-color: alpha-color('white', 80%),
+			--badge-color: var(--color-black),
 		),
 		black: (
-			background: alpha-color('black', 80%),
-			color: var(--color-white),
+			--badge-background-color: alpha-color('black', 80%),
+			--badge-color: var(--color-white),
 		),
 		danger: (
-			background: var(--color-danger),
+			--badge-background-color: var(--color-danger),
 		),
 		success: (
-			background: var(--color-success),
+			--badge-background-color: var(--color-success),
 		),
 		warning: (
-			background: var(--color-warning),
+			--badge-background-color: var(--color-warning),
 		),
 		info: (
-			background: var(--color-info),
+			--badge-background-color: var(--color-info),
 		),
 		accent: (
-			background: var(--color-accent),
+			--badge-background-color: var(--color-accent),
 		),
 	),
 ) !default;

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

@@ -25,6 +25,7 @@ $vv-button: (
 		hover: (
 			background: var(--color-brand-darken-1),
 			border-color: var(--color-brand-darken-1),
+			text-decoration: none,
 		),
 		active: (
 			background: var(--color-brand-darken-2),
@@ -147,21 +148,24 @@ $vv-button: (
 		),
 		link: (
 			background: transparent,
-			border-color: var(--color-word),
 			border-width: var(--border-0),
-			border-radius: 0,
 			padding: 0,
-			color: var(--color-word),
-			text-shadow: 0 1px 0 var(--color-gray-lighten-5),
+			color: var(--color-brand),
+			font-weight: var(--font-normal),
+			text-shadow: none,
 			state: (
 				focus-visible: (
-					color: var(--color-brand),
-					outline: none,
+					outline: var(--spacing-px) solid
+						var(--color-brand-lighten-4),
+					outline-offset: var(--spacing-4),
 				),
 				hover: (
 					text-decoration: underline,
 					text-underline-offset: var(--spacing-4),
 				),
+				active: (
+					color: var(--color-brand-darken-3),
+				),
 			),
 		),
 		static-light: (

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

@@ -1,5 +1,6 @@
 $vv-nav: (
 	--nav-item-padding: var(--spacing-xs) var(--spacing-sm),
+	display: flex,
 	element: (
 		menu: (
 			_alias: 'ul',
@@ -23,19 +24,13 @@ $vv-nav: (
 			align-items: center,
 			will-change: background-color color,
 			transition: all 0.3s ease-in-out,
-			border-radius: var(--rounded-md),
 			color: var(--color-word-3),
 			[padding]: var(--nav-item-padding),
 			state: (
 				hover: (
-					background-color: var(--color-surface-2),
 					color: var(--color-word-1),
 				),
-				active: (
-					background-color: var(--color-surface-3),
-				),
 				current: (
-					background-color: var(--color-surface-2),
 					color: var(--color-word-1),
 				),
 			),
@@ -49,16 +44,28 @@ $vv-nav: (
 		),
 	),
 	modifier: (
-		menu: (
-			font-size: 0.9em,
-			display: flex,
-			flex-direction: column,
+		sidebar: (
+			font-size: var(--text-14),
+			element: (
+				item-label: (
+					border-radius: var(--rounded-md),
+					state: (
+						hover: (
+							background-color: var(--color-surface-2),
+						),
+						active: (
+							background-color: var(--color-surface-3),
+						),
+						current: (
+							background-color: var(--color-surface-2),
+						),
+					),
+				),
+			),
 		),
-		border: (
+		aside: (
 			--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: (
@@ -72,7 +79,43 @@ $vv-nav: (
 						hover: (
 							border-color: var(--color-brand),
 						),
-						selected: (
+						current: (
+							border-color: var(--color-brand),
+						),
+					),
+				),
+				divider: (
+					margin-block: var(--spacing-8),
+				),
+			),
+		),
+		tabs: (
+			element: (
+				menu: (
+					overflow: auto hidden,
+					overscroll-behavior-x: contain,
+					scroll-behavior: smooth,
+					scroll-snap-type: x mandatory,
+					flex-direction: row,
+					border-bottom: 1px solid var(--color-surface-4),
+					scrollbar-width: none,
+					pseudo: (
+						-webkit-scrollbar: (
+								width: 0,
+								height: 0,
+							),
+					),
+				),
+				item-label: (
+					border-bottom: 2px solid transparent,
+					margin-bottom: -1px,
+					white-space: nowrap,
+					state: (
+						hover: (
+							color: var(--color-brand),
+						),
+						current: (
+							color: var(--color-brand),
 							border-color: var(--color-brand),
 						),
 					),

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

@@ -68,7 +68,8 @@ $vv-select: (
 		),
 		input: (
 			_alias: 'select',
-			display: block,
+			display: flex,
+			align-items: center,
 			flex: 1,
 			color: var(--input-placeholder-color),
 			[padding]: var(--input-padding-top) var(--input-padding-right)

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-toast.scss

@@ -1,4 +1,5 @@
 $vv-toast: (
+	--toast-pie-animation-duration: 3s,
 	position: relative,
 	display: flex,
 	flex-direction: column,
@@ -17,13 +18,13 @@ $vv-toast: (
 			display: flex,
 			overflow: hidden,
 			align-items: center,
-			padding: var(--spacing-xs),
+			padding: var(--spacing-10),
 			color: var(--color-white),
 			background-color: var(--color-gray),
 			font-size: var(--text-16),
 		),
 		content: (
-			padding: var(--spacing-xs),
+			padding: var(--spacing-10),
 			background-color: var(--color-surface-2),
 			flex-grow: 1,
 			min-height: 0,
@@ -32,7 +33,7 @@ $vv-toast: (
 		),
 		close: (
 			position: absolute,
-			right: var(--spacing-xs),
+			right: var(--spacing-10),
 			inline-size: 1.1em,
 			block-size: 1.1em,
 			cursor: pointer,
@@ -43,12 +44,83 @@ $vv-toast: (
 			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,
+			opactiy: 1,
+		),
 	),
 	modifier: (
-		close: (
+		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-xs) * 2 + 1.1em),
+					padding-right: calc(var(--spacing-10) * 2 + 1.1em),
 				),
 			),
 		),
@@ -62,6 +134,16 @@ $vv-toast: (
 					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: (
@@ -74,6 +156,16 @@ $vv-toast: (
 					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: (
@@ -86,6 +178,16 @@ $vv-toast: (
 					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: (
@@ -98,6 +200,16 @@ $vv-toast: (
 					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: (
@@ -110,6 +222,16 @@ $vv-toast: (
 					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: (
@@ -122,6 +244,16 @@ $vv-toast: (
 					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),
+				),
 			),
 		),
 	),