@volverjs/style 0.0.0 → 0.1.2-beta-13

package/src/settings/_index.scss

@@ -15,20 +15,24 @@
 @import 'input';
 
 // components
+@import 'components/vv-accordion';
+@import 'components/vv-alert';
 @import 'components/vv-badge';
-@import 'components/vv-button';
+@import 'components/vv-breadcrumb';
 @import 'components/vv-button-group';
-@import 'components/vv-progress';
-@import 'components/vv-collapse';
+@import 'components/vv-button';
+@import 'components/vv-card';
 @import 'components/vv-dialog';
 @import 'components/vv-dropdown';
-@import 'components/vv-input-checkbox';
 @import 'components/vv-input-checkbox-group';
-@import 'components/vv-input-radio';
+@import 'components/vv-input-checkbox';
 @import 'components/vv-input-radio-group';
+@import 'components/vv-input-radio';
 @import 'components/vv-input-text';
-@import 'components/vv-textarea';
+@import 'components/vv-nav';
+@import 'components/vv-progress';
 @import 'components/vv-select';
 @import 'components/vv-table';
-@import 'components/vv-card';
 @import 'components/vv-text';
+@import 'components/vv-textarea';
+@import 'components/vv-tooltip';

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

@@ -0,0 +1,128 @@
+$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,
+	element: (
+		summary: (
+			_alias: '> summary',
+			position: relative,
+			cursor: pointer,
+			[padding-top]: var(--accordion-padding-top),
+			[padding-right]: var(--accordion-padding-right),
+			[padding-bottom]: var(--accordion-padding-bottom),
+			[padding-left]:
+				calc(
+					var(--accordion-padding-left) + var(--accordion-marker-size)
+				),
+			line-height: var(--leading-normal),
+			color: var(--color-word-2),
+			will-change: background-color,
+			transition: background-color 0.3s ease-in-out,
+			font-size: var(--text-sm),
+			pseudo: (
+				before: (
+					display: block,
+					position: absolute,
+					[top]: var(--accordion-padding-top),
+					[left]: var(--accordion-padding-left),
+					width: calc(var(--leading-normal) * 1em),
+					height: calc(var(--leading-normal) * 1em),
+					background-image: var(--bg-chevron),
+					background-position: center,
+					background-size: 1em,
+					background-repeat: no-repeat,
+					will-change: transform,
+					transition: transform 0.3s ease-in-out,
+					transform: rotate(-90deg),
+				),
+				marker: (
+					display: none,
+				),
+				-webkit-details-marker: (
+						display: none,
+					),
+			),
+		),
+		content: (
+			_alias: '> summary + *',
+			padding-block: var(--spacing-sm),
+			[padding-inline]: var(--accordion-padding-left)
+				var(--accordion-padding-right),
+		),
+	),
+	state: (
+		open: (
+			element: (
+				summary: (
+					pseudo: (
+						before: (
+							transform: rotate(0),
+						),
+					),
+				),
+			),
+		),
+	),
+	modifier: (
+		marker-right: (
+			element: (
+				summary: (
+					[padding-right]:
+						calc(
+							var(--accordion-padding-right) +
+								var(--accordion-marker-size)
+						),
+					[padding-left]: var(--accordion-padding-left),
+					pseudo: (
+						before: (
+							left: auto,
+							[right]: var(--accordion-padding-right),
+							transform: rotate(0def),
+						),
+					),
+				),
+			),
+			state: (
+				open: (
+					element: (
+						summary: (
+							pseudo: (
+								before: (
+									transform: rotate(-180deg),
+								),
+							),
+						),
+					),
+				),
+			),
+		),
+		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),
+						),
+					),
+				),
+			),
+			state: (
+				open: (
+					element: (
+						summary: (
+							background-color: var(--color-surface-2),
+						),
+					),
+				),
+			),
+		),
+	),
+) !default;

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

@@ -0,0 +1,148 @@
+$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),
+	background-color: var(--color-surface-2),
+	border-color: var(--color-surface-4),
+	border-width: var(--border),
+	border-style: solid,
+	border-radius: var(--rounded),
+	position: relative,
+	modifier: (
+		success: (
+			border-color: var(--color-success-lighten-5),
+			background-color:
+				hsl(
+					var(--color-success-hue) var(--color-success-saturation) 90%
+				),
+			element: (
+				icon: (
+					color: var(--color-success),
+				),
+				title: (
+					color: var(--color-success),
+				),
+			),
+		),
+		danger: (
+			border-color: var(--color-danger-lighten-5),
+			background-color:
+				hsl(var(--color-danger-hue) var(--color-danger-saturation) 90%),
+			element: (
+				icon: (
+					color: var(--color-danger-darken-1),
+				),
+				title: (
+					color: var(--color-danger-darken-1),
+				),
+			),
+		),
+		warning: (
+			border-color: var(--color-warning-lighten-5),
+			background-color:
+				hsl(
+					var(--color-warning-hue) var(--color-warning-saturation) 90%
+				),
+			element: (
+				icon: (
+					color: var(--color-warning-darken-1),
+				),
+				title: (
+					color: var(--color-warning-darken-1),
+				),
+			),
+		),
+		info: (
+			border-color: var(--color-info-lighten-5),
+			background-color:
+				hsl(var(--color-info-hue) var(--color-info-saturation) 90%),
+			element: (
+				icon: (
+					color: var(--color-info-darken-1),
+				),
+				title: (
+					color: var(--color-info-darken-1),
+				),
+			),
+		),
+		accent: (
+			border-color: var(--color-accent-lighten-5),
+			background-color:
+				hsl(var(--color-accent-hue) var(--color-accent-saturation) 90%),
+			element: (
+				icon: (
+					color: var(--color-accent-darken-1),
+				),
+				title: (
+					color: var(--color-accent-darken-1),
+				),
+			),
+		),
+		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%),
+			element: (
+				icon: (
+					color: var(--color-brand-darken-1),
+				),
+				title: (
+					color: var(--color-brand-darken-1),
+				),
+			),
+		),
+		callout: (
+			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),
+				),
+			),
+		),
+		action: (
+			[padding-right]: calc(var(--alert-padding-right) * 2 + 1.2em),
+			element: (
+				action: (
+					position: absolute,
+					[right]: var(--alert-padding-right),
+				),
+			),
+		),
+	),
+	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,
+		),
+		separator: (
+			_alias: '> hr',
+			height: var(--border),
+			background-color: var(--color-alpha-2),
+			margin-block: var(--spacing-sm),
+		),
+	),
+) !default;

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

@@ -1,27 +1,39 @@
 $vv-badge: (
-	border-radius: 1.0465em,
+	--badge-font-size: 0.7rem,
+	[font-size]: var(--badge-font-size),
+	border-radius: 0.5em,
 	background: var(--color-brand),
 	color: var(--color-white),
-	font-size: 0.6em,
-	height: 2.093em,
-	min-width: 2.093em,
-	padding: 0.37em 0.475em,
+	line-height: 2em,
+	min-height: 2em,
+	min-width: 2em,
+	padding: 0 0.5em,
 	display: inline-flex,
 	justify-content: center,
-	font-weight: normal,
+	align-items: center,
+	gap: 0.5ch,
+	white-space: nowrap,
 	font-family: var(--font-sans),
+	font-weight: var(--font-normal),
 	text-shadow: none,
 	state: (
 		empty: (
 			font-size: inherit,
-			width: 0.5em,
-			height: 0.5em,
 			min-width: 0,
-			border-radius: 0.25em,
+			min-height: 0,
+			[width]: var(--badge-font-size),
+			[height]: var(--badge-font-size),
+			[border-radius]: calc(var(--badge-font-size) * 0.5),
 			padding: 0,
 		),
 	),
 	modifier: (
+		small: (
+			--badge-font-size: 0.6rem,
+		),
+		rounded: (
+			border-radius: 1em,
+		),
 		white: (
 			background: alpha-color('white', 80%),
 			color: var(--color-black),

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

@@ -0,0 +1,87 @@
+$vv-breadcrumb: (
+	element: (
+		list: (
+			_alias: '> ol',
+			position: relative,
+			display: flex,
+			flex-wrap: no-wrap,
+			list-style: none,
+			overflow: auto,
+			padding: 0,
+			background: var(--color-surface),
+			pseudo: (
+				after: (
+					position: absolute,
+					top: 0,
+					bottom: 0,
+					right: 0,
+					display: block,
+					width: var(--spacing-sm),
+					background:
+						linear-gradient(
+							45deg,
+							transparent,
+							var(--color-surface)
+						),
+				),
+			),
+		),
+		item: (
+			_alias: '> ol > li:has(a)',
+			display: inline-flex,
+			align-items: center,
+			color: var(--color-word-2),
+			pseudo: (
+				after: (
+					display: block,
+					margin-inline: 1ch,
+					width: calc(var(--leading-normal) * 1em),
+					height: calc(var(--leading-normal) * 1em),
+					background-image: var(--bg-chevron),
+					background-position: center,
+					background-size: 1em,
+					background-repeat: no-repeat,
+					transform: rotate(-90deg),
+				),
+			),
+		),
+		item-active: (
+			_alias: '> ol > li:not(:has(a))',
+			display: inline-flex,
+			align-items: center,
+			font-weight: var(--font-bold),
+			padding-right: var(--spacing-16),
+		),
+		link: (
+			_alias: '> ol > li > a',
+			state: (
+				hover: (
+					text-decoration: underline,
+				),
+				focus-within: (
+					text-decoration: underline,
+				),
+				active: (
+					color: var(--color-brand-darken-2),
+				),
+			),
+		),
+	),
+	modifier: (
+		multiline: (
+			element: (
+				list: (
+					flex-wrap: wrap,
+				),
+				item: (
+					font-size: var(--text-12),
+				),
+				item-active: (
+					width: 100%,
+					font-size: var(--text-18),
+					line-height: var(--leading-relaxed),
+				),
+			),
+		),
+	),
+) !default;

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

@@ -1,8 +1,9 @@
 $vv-button: (
+	--button-border-width: var(--border-2),
 	position: relative,
 	background: var(--color-brand),
 	border-radius: 0.5ch,
-	border-width: var(--spacing-2),
+	[border-width]: var(--button-border-width),
 	border-style: solid,
 	border-color: var(--color-brand),
 	color: var(--color-white),
@@ -13,7 +14,7 @@ $vv-button: (
 	padding-block: 0.75ch,
 	padding-inline: 1.75ch,
 	text-shadow: 0 1px 0 var(--color-gray-darken-5),
-	transition: all 0.2s ease-in-out,
+	transition: all 0.3s ease-in-out,
 	will-change: all,
 	min-width: 0,
 	state: (
@@ -29,6 +30,10 @@ $vv-button: (
 			background: var(--color-brand-darken-2),
 			border-color: var(--color-brand-darken-2),
 		),
+		selected: (
+			background: var(--color-brand-darken-2),
+			border-color: var(--color-brand-darken-2),
+		),
 		disabled: (
 			opacity: 0.5,
 			cursor: not-allowed,
@@ -70,11 +75,14 @@ $vv-button: (
 					background: var(--color-gray-darken-5),
 					border-color: var(--color-gray-darken-5),
 				),
+				selected: (
+					background: var(--color-gray-darken-5),
+					border-color: var(--color-gray-darken-5),
+				),
 			),
 		),
 		secondary: (
 			background: var(--color-white),
-			border-width: var(--spacing-2),
 			border-style: solid,
 			border-color: var(--color-gray-lighten-4),
 			color: var(--color-word),
@@ -89,6 +97,9 @@ $vv-button: (
 				active: (
 					background: var(--color-gray-lighten-3),
 				),
+				selected: (
+					background: var(--color-gray-lighten-3),
+				),
 			),
 		),
 		danger: (
@@ -107,6 +118,10 @@ $vv-button: (
 					background: var(--color-danger-darken-2),
 					border-color: var(--color-danger-darken-2),
 				),
+				selected: (
+					background: var(--color-danger-darken-2),
+					border-color: var(--color-danger-darken-2),
+				),
 			),
 		),
 		ghost: (
@@ -125,12 +140,15 @@ $vv-button: (
 				active: (
 					background: var(--color-gray-lighten-4),
 				),
+				selected: (
+					background: var(--color-gray-lighten-4),
+				),
 			),
 		),
-		text: (
+		link: (
 			background: transparent,
 			border-color: var(--color-word),
-			border-width: 0,
+			border-width: var(--border-0),
 			border-radius: 0,
 			padding: 0,
 			color: var(--color-word),
@@ -141,7 +159,8 @@ $vv-button: (
 					outline: none,
 				),
 				hover: (
-					border-width: 0 0 1px 0,
+					text-decoration: underline,
+					text-underline-offset: var(--spacing-4),
 				),
 			),
 		),
@@ -162,6 +181,10 @@ $vv-button: (
 					border-color: var(--color-gray-lighten-4),
 					background: var(--color-gray-lighten-4),
 				),
+				selected: (
+					border-color: var(--color-gray-lighten-4),
+					background: var(--color-gray-lighten-4),
+				),
 			),
 		),
 		static-dark: (
@@ -181,6 +204,83 @@ $vv-button: (
 					border-color: var(--color-gray-darken-3),
 					background: var(--color-gray-darken-3),
 				),
+				selected: (
+					border-color: var(--color-gray-darken-3),
+					background: var(--color-gray-darken-3),
+				),
+			),
+		),
+		action: (
+			--button-border-width: var(--border),
+			font-size: 0.875em,
+			background: var(--color-surface-1),
+			color: var(--color-word-1),
+			border-color: var(--color-word-5),
+			font-weight: var(--font-normal),
+			padding-inline: 0.75ch,
+			padding-block: 0.5ch,
+			line-height: var(--leading-snug),
+			text-shadow: none,
+			state: (
+				focus-visible: (
+					outline: var(--spacing-px) solid var(--color-gray-lighten-4),
+				),
+				hover: (
+					background: var(--color-surface-2),
+				),
+				active: (
+					background: var(--color-surface-5),
+				),
+				selected: (
+					color: var(--color-white),
+					background: var(--color-gray),
+					border-color: var(--color-gray),
+				),
+			),
+			element: (
+				icon: (
+					margin-inline: -0.125ch,
+					block-size: calc(1em * var(--leading-snug)),
+					inline-size: calc(1em * var(--leading-snug)),
+				),
+			),
+		),
+		action-quiet: (
+			--button-border-width: var(--border),
+			font-size: var(--text-14),
+			background: transparent,
+			color: var(--color-word-1),
+			border-color: transparent,
+			font-weight: var(--font-normal),
+			padding-inline: 0.75ch,
+			padding-block: 0.5ch,
+			line-height: var(--leading-snug),
+			text-shadow: none,
+			state: (
+				focus-visible: (
+					outline: var(--spacing-px) solid var(--color-gray-lighten-4),
+					outline-offset: 0,
+				),
+				hover: (
+					background: var(--color-surface-2),
+					border-color: var(--color-surface-2),
+				),
+				active: (
+					background: var(--color-surface-5),
+					border-color: var(--color-surface-5),
+				),
+				selected: (
+					color: var(--color-white),
+					background: var(--color-gray),
+					border-color: var(--color-gray),
+				),
+			),
+			element: (
+				icon: (
+					margin-inline: -0.125ch,
+					block-size: calc(1em * var(--leading-snug)),
+					inline-size: calc(1em * var(--leading-snug)),
+				),
 			),
 		),
 		rounded: (

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

@@ -29,6 +29,8 @@ $vv-card: (
 			display: block,
 			width: 100%,
 			height: auto,
+			object-fit: cover,
+			object-position: center,
 		),
 		content: (
 			padding: var(--spacing-md),
@@ -38,7 +40,6 @@ $vv-card: (
 		),
 		footer: (
 			_alias: '> footer',
-			background-color: var(--color-surface-1),
 			border-top: var(--border) solid var(--color-surface-4),
 			padding: var(--spacing-md),
 		),

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, 90vw),
+			max-width: clamp(30vw, 40rem, 50vw),
 			max-height: 90vh,
 			z-index: var(--z-modal),
 			background: var(--color-surface),
@@ -67,7 +67,7 @@ $vv-dialog: (
 		small: (
 			element: (
 				wrapper: (
-					max-width: clamp(10vw, 25rem, 90vw),
+					max-width: clamp(10vw, 25rem, 30vw),
 				),
 			),
 		),

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

@@ -14,6 +14,7 @@ $vv-input-checkbox: (
 			cursor: not-allowed,
 		),
 		readonly: (
+			opacity: 1,
 			cursor: default,
 			pointer-events: none,
 		),
@@ -55,7 +56,7 @@ $vv-input-checkbox: (
 					background-color: var(--color-word-5),
 					position: relative,
 					will-change: background-color,
-					transition: background-color 0.2s ease-in-out,
+					transition: background-color 0.3s ease-in-out,
 					pseudo: (
 						after: (
 							width: var(--spacing-20),
@@ -65,7 +66,7 @@ $vv-input-checkbox: (
 							inset: var(--spacing-2) 0 0 var(--spacing-2),
 							background: var(--color-white),
 							will-change: transform,
-							transition: transform 0.2s ease-in-out,
+							transition: transform 0.3s ease-in-out,
 						),
 					),
 					state: (

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

@@ -14,6 +14,7 @@ $vv-input-radio: (
 			cursor: not-allowed,
 		),
 		readonly: (
+			opacity: 1,
 			cursor: default,
 			pointer-events: none,
 		),
@@ -39,7 +40,7 @@ $vv-input-radio: (
 					border-radius: 50%,
 					transform: translate(-50%, -50%) scale(0),
 					will-change: transform,
-					transition: transform 0.2s ease-in-out,
+					transition: transform 0.3s ease-in-out,
 				),
 			),
 			state: (