@volverjs/style 0.1.2-beta.8 → 0.1.2

package/src/settings/_interactivity.scss

@@ -0,0 +1,39 @@
+// cursor
+$cursor: (
+	auto: auto,
+	default: default,
+	pointer: pointer,
+	wait: wait,
+	text: text,
+	move: move,
+	help: help,
+	not-allowed: not-allowed,
+	none: none,
+	context-menu: context-menu,
+	progress: progress,
+	cell: cell,
+	crosshair: crosshair,
+	vertical-text: vertical-text,
+	alias: alias,
+	copy: copy,
+	no-drop: no-drop,
+	grab: grab,
+	grabbing: grabbing,
+	all-scroll: all-scroll,
+	col-resize: col-resize,
+	row-resize: row-resize,
+	n-resize: n-resize,
+	e-resize: e-resize,
+	s-resize: s-resize,
+	w-resize: w-resize,
+	ne-resize: ne-resize,
+	nw-resize: nw-resize,
+	se-resize: se-resize,
+	sw-resize: sw-resize,
+	ew-resize: ew-resize,
+	ns-resize: ns-resize,
+	nesw-resize: nesw-resize,
+	nwse-resize: nwse-resize,
+	zoom-in: zoom-in,
+	zoom-out: zoom-out,
+) !default;

package/src/settings/_layout.scss

@@ -83,6 +83,14 @@ $object-position: (
 	top: top,
 ) !default;
 
+// overflow
+$overflow: (
+	visible: visible,
+	hidden: hidden,
+	scroll: scroll,
+	auto: auto,
+) !default;
+
 // position
 $position: (static, fixed, absolute, relative, sticky) !default;
 
@@ -95,15 +103,15 @@ $visibility: (
 // z-index
 $z-index: (
 	dropdown: 1000,
-	sticky: 1020,
-	fixed: 1030,
-	modal-backdrop: 1040,
-	modal: 1050,
-	confirm-backdrop: 1060,
-	confirm: 1070,
-	popover: 1060,
-	tooltip: 1070,
-	toast: 1080,
-	notification-alert: 1090,
+	sticky: 1010,
+	fixed: 1020,
+	modal-backdrop: 1030,
+	modal: 1040,
+	confirm-backdrop: 1050,
+	confirm: 1060,
+	popover: 1070,
+	tooltip: 1080,
+	toast: 1090,
+	notification-alert: 1100,
 	auto: 'auto',
 ) !default;

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/_transitions.scss

@@ -0,0 +1,44 @@
+// transition property
+$transition-property: (
+	none: none,
+	all: all,
+	transition:
+		'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
+	colors:
+		'color, background-color, border-color, text-decoration-color, fill, stroke',
+	opacity: opacity,
+	shadow: box-shadow,
+	transform: transform,
+) !default;
+
+// transition duration and transition delay
+$transition-duration-delay: (
+	75: 75ms,
+	100: 100ms,
+	150: 150ms,
+	200: 200ms,
+	300: 300ms,
+	500: 500ms,
+	700: 700ms,
+	1000: 1000ms,
+) !default;
+
+// transition timing function
+$transition-timing-function: (
+	linear: linear,
+	in: cubic-bezier(0.4, 0, 1, 1),
+	out: cubic-bezier(0, 0, 0.2, 1),
+	in-out: cubic-bezier(0.4, 0, 0.2, 1),
+) !default;
+
+// animation
+$animation: (
+	none: none,
+	indeterminate: indeterminate 2s infinite,
+	progress-indeterminate: progress-indeterminate 1.5s linear infinite,
+	spin: spin 1s infinite,
+	ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite,
+	pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite,
+	bounce: bounce 1s infinite,
+	shine: shine 1.5s infinite,
+) !default;

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

@@ -1,10 +1,25 @@
 $vv-accordion: (
 	--accordion-marker-size:
 		calc(var(--spacing-sm) + var(--leading-normal) * 1em),
-	--accordion-padding-top: 0px,
-	--accordion-padding-right: 0px,
-	--accordion-padding-bottom: 0px,
-	--accordion-padding-left: 0px,
+	--accordion-padding-top: var(--spacing-xs),
+	--accordion-padding-right: var(--spacing-xs),
+	--accordion-padding-bottom: var(--spacing-xs),
+	--accordion-padding-left: var(--spacing-xs),
+	overflow: hidden,
+	state: (
+		open: (
+			element: (
+				summary: (
+					background-color: var(--color-surface-2),
+					pseudo: (
+						before: (
+							transform: rotate(0),
+						),
+					),
+				),
+			),
+		),
+	),
 	element: (
 		summary: (
 			_alias: '> summary',
@@ -20,8 +35,11 @@ $vv-accordion: (
 			line-height: var(--leading-normal),
 			color: var(--color-word-2),
 			will-change: background-color,
-			transition: background-color 0.3s ease-in-out,
+			transition: var(--transition-colors),
 			font-size: var(--text-sm),
+			border-radius: var(--rounded-lg),
+			-webkit-tap-highlight-color: transparent,
+			outline: none,
 			pseudo: (
 				before: (
 					display: block,
@@ -35,7 +53,7 @@ $vv-accordion: (
 					background-size: 1em,
 					background-repeat: no-repeat,
 					will-change: transform,
-					transition: transform 0.3s ease-in-out,
+					transition: var(--transition-transform),
 					transform: rotate(-90deg),
 				),
 				marker: (
@@ -45,6 +63,14 @@ $vv-accordion: (
 						display: none,
 					),
 			),
+			state: (
+				hover: (
+					background-color: var(--color-surface-1),
+				),
+				focus-visible: (
+					background-color: var(--color-surface-1),
+				),
+			),
 		),
 		content: (
 			_alias: '> summary + *',
@@ -53,19 +79,6 @@ $vv-accordion: (
 				var(--accordion-padding-right),
 		),
 	),
-	state: (
-		open: (
-			element: (
-				summary: (
-					pseudo: (
-						before: (
-							transform: rotate(0),
-						),
-					),
-				),
-			),
-		),
-	),
 	modifier: (
 		marker-right: (
 			element: (
@@ -100,25 +113,18 @@ $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),
-			element: (
-				summary: (
-					state: (
-						hover: (
-							background-color: var(--color-surface-1),
-						),
-					),
-				),
-			),
+			--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),
 			state: (
 				open: (
 					element: (
 						summary: (
-							background-color: var(--color-surface-2),
+							border-bottom-right-radius: 0,
+							border-bottom-left-radius: 0,
 						),
 					),
 				),

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

@@ -0,0 +1,161 @@
+$vv-alert: (
+	display: flex,
+	min-width: 0,
+	overflow: hidden,
+	align-items: center,
+	padding: var(--spacing-sm) var(--spacing-md),
+	background-color: var(--color-surface-2),
+	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-normal),
+			font-weight: var(--font-bold),
+			color: var(--color-word),
+		),
+		content: (
+			line-height: var(--leading-normal),
+			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: (
+		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),
+			element: (
+				icon: (
+					color: var(--color-success),
+				),
+				title: (
+					color: var(--color-success),
+				),
+			),
+		),
+		danger: (
+			border-color: var(--color-danger-lighten-5),
+			background-color: var(--color-surface-danger),
+			element: (
+				icon: (
+					color: var(--color-danger),
+				),
+				title: (
+					color: var(--color-danger),
+				),
+			),
+		),
+		warning: (
+			border-color: var(--color-warning-lighten-5),
+			background-color: var(--color-surface-warning),
+			element: (
+				icon: (
+					color: var(--color-warning-darken-2),
+				),
+				title: (
+					color: var(--color-warning-darken-2),
+				),
+			),
+		),
+		info: (
+			border-color: var(--color-info-lighten-5),
+			background-color: var(--color-surface-info),
+			element: (
+				icon: (
+					color: var(--color-info-darken-2),
+				),
+				title: (
+					color: var(--color-info-darken-2),
+				),
+			),
+		),
+		accent: (
+			border-color: var(--color-accent-lighten-5),
+			background-color: var(--color-surface-accent),
+			element: (
+				icon: (
+					color: var(--color-accent),
+				),
+				title: (
+					color: var(--color-accent),
+				),
+			),
+		),
+		brand: (
+			border-color: var(--color-brand-lighten-5),
+			background-color: var(--color-surface-brand),
+			element: (
+				icon: (
+					color: var(--color-brand),
+				),
+				title: (
+					color: var(--color-brand),
+				),
+			),
+		),
+		callout: (
+			display: block,
+			border-radius: var(--rounded-none),
+			border-width: 0 0 0 var(--spacing-4),
+			element: (
+				title: (
+					margin-bottom: var(--spacing-sm),
+					margin-right: 0,
+					text-transform: uppercase,
+				),
+				content: (
+					line-height: var(--leading-normal),
+					white-space: wrap,
+				),
+			),
+		),
+		icon: (
+			padding-left: calc(var(--spacing-md) * 2 + 1em),
+		),
+		close: (
+			padding-right: calc(var(--spacing-md) * 2 + 1em),
+		),
+	),
+) !default;

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

@@ -0,0 +1,55 @@
+$vv-avatar: (
+	display: inline-flex,
+	position: relative,
+	justify-content: center,
+	align-items: center,
+	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-white),
+	object-fit: contain,
+	modifier: (
+		rounded: (
+			border-radius: var(--rounded-full),
+			overflow: hidden,
+		),
+		md: (
+			font-size: var(--text-14),
+			width: var(--spacing-34),
+			height: var(--spacing-34),
+		),
+		lg: (
+			font-size: var(--text-16),
+			width: var(--spacing-40),
+			height: var(--spacing-40),
+		),
+	),
+	state: (
+		focus: (
+			outline: var(--spacing-px) solid var(--color-brand),
+			outline-offset: var(--spacing-0),
+		),
+	),
+	element: (
+		badge: (
+			_alias: '> sup',
+			position: absolute,
+			top: 0,
+			right: 0,
+			transform: translate(50%, -50%),
+			box-shadow: var(--shadow-sm),
+		),
+		image: (
+			_alias: '> img',
+			width: 100%,
+			height: 100%,
+			border-radius: inherit,
+			object-fit: inherit,
+		),
+	),
+) !default;

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

@@ -1,10 +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,
 	padding: 0 0.5em,
@@ -16,6 +21,7 @@ $vv-badge: (
 	font-family: var(--font-sans),
 	font-weight: var(--font-normal),
 	text-shadow: none,
+	line-height: var(--leading-none),
 	state: (
 		empty: (
 			font-size: inherit,
@@ -28,28 +34,54 @@ $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:
+				hsla(
+					var(--color-white-hue) var(--color-white-saturation)
+						var(--color-white-lightness) / 80%
+				),
+			--badge-color: var(--color-black),
 		),
 		black: (
-			background: alpha-color('black', 80%),
-			color: var(--color-white),
+			--badge-background-color:
+				hsla(
+					var(--color-black-hue) var(--color-black-saturation)
+						var(--color-black-lightness) / 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: (
+			--badge-background-color: var(--color-info),
+		),
+		accent: (
+			--badge-background-color: var(--color-accent),
+		),
+		gray: (
+			--badge-background-color: var(--color-gray),
 		),
 	),
 ) !default;

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

@@ -1,29 +1,37 @@
 $vv-breadcrumb: (
+	position: relative,
+	pseudo: (
+		after: (
+			position: absolute,
+			top: 0,
+			bottom: 0,
+			right: 0,
+			display: block,
+			width: var(--spacing-sm),
+			background:
+				linear-gradient(45deg, transparent, var(--color-surface)),
+		),
+	),
 	element: (
 		list: (
 			_alias: '> ol',
 			position: relative,
+			overflow: auto hidden,
+			overscroll-behavior-x: contain,
+			scroll-behavior: smooth,
+			scroll-snap-type: x mandatory,
+			scrollbar-width: none,
 			display: flex,
 			flex-wrap: no-wrap,
 			list-style: none,
-			overflow: auto,
 			padding: 0,
 			background: var(--color-surface),
+			white-space: nowrap,
 			pseudo: (
-				after: (
-					position: absolute,
-					top: 0,
-					bottom: 0,
-					right: 0,
-					display: block,
-					width: var(--spacing-sm),
-					background:
-						linear-gradient(
-							45deg,
-							transparent,
-							var(--color-surface)
-						),
-				),
+				-webkit-scrollbar: (
+						width: 0,
+						height: 0,
+					),
 			),
 		),
 		item: (

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

@@ -1,6 +1,10 @@
 $vv-button-group: (
 	display: inline-flex,
+	flex-wrap: wrap,
+	min-width: 0,
+	max-width: 100%,
 	align-items: center,
+	justify-content: center,
 	gap: var(--spacing-4),
 	modifier: (
 		block: (