@volverjs/style 0.1.29 → 0.1.30

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

@@ -40,7 +40,7 @@ $vv-input-file: (
 					position: absolute,
 					height: var(--spacing-2),
 					inset: auto 0 0 0,
-					background: var(--color-brand),
+					background: var(--color-brand-graphic),
 					scale: 0 1,
 					transform-origin: left,
 					will-change: transform,
@@ -287,7 +287,7 @@ $vv-input-file: (
 					background-color: var(--color-surface-5),
 				),
 				focus-visible: (
-					outline: var(--spacing-px) solid var(--color-gray-lighten-4),
+					outline: var(--spacing-px) solid var(--color-gray),
 				),
 				disabled: (
 					cursor: not-allowed,
@@ -336,13 +336,13 @@ $vv-input-file: (
 					),
 				),
 				hint: (
-					color: var(--input-valid-color),
+					color: var(--input-valid-text-color),
 				),
 				limit: (
-					color: var(--input-valid-color),
+					color: var(--input-valid-text-color),
 				),
 				icon-after: (
-					color: var(--input-valid-color),
+					color: var(--input-valid-text-color),
 				),
 				drop-area: (
 					pseudo: (
@@ -364,13 +364,13 @@ $vv-input-file: (
 					),
 				),
 				hint: (
-					color: var(--input-invalid-color),
+					color: var(--input-invalid-text-color),
 				),
 				limit: (
-					color: var(--input-invalid-color),
+					color: var(--input-invalid-text-color),
 				),
 				icon-after: (
-					color: var(--input-invalid-color),
+					color: var(--input-invalid-text-color),
 				),
 				drop-area: (
 					pseudo: (

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

@@ -0,0 +1,55 @@
+// A one-time code typed one character per slot: `slot` inputs side by side,
+// optionally split into groups by a `separator`. Each slot is a text input of
+// one character; moving the focus between them is behaviour and belongs to
+// the script. The slots take the surface and the text of the fields of the
+// library, a border so each reads as a box, and the focus of the library.
+$vv-input-otp: (
+	display: inline-flex,
+	align-items: center,
+	gap: var(--spacing-8),
+	element: (
+		group: (
+			display: inline-flex,
+			gap: var(--spacing-6),
+		),
+		slot: (
+			inline-size: 2.5em,
+			block-size: 3em,
+			border: var(--border) solid var(--color-surface-4),
+			border-radius: var(--rounded-md),
+			background-color: var(--input-background-color),
+			color: var(--input-color),
+			font-size: var(--text-20),
+			font-variant-numeric: tabular-nums,
+			text-align: center,
+			caret-color: var(--color-brand-graphic),
+			transition: border-color var(--duration-150) var(--ease-out),
+			state: (
+				hover: (
+					border-color: var(--color-surface-5),
+				),
+				focus-visible: (
+					border-color: var(--color-brand-graphic),
+					outline: var(--spacing-px) solid var(--color-brand-graphic),
+					outline-offset: 0,
+				),
+				disabled: (
+					opacity: var(--opacity-50),
+					cursor: not-allowed,
+				),
+			),
+		),
+		separator: (
+			color: var(--color-word-4),
+		),
+	),
+	modifier: (
+		invalid: (
+			element: (
+				slot: (
+					border-color: var(--input-invalid-color),
+				),
+			),
+		),
+	),
+) !default;

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

@@ -109,7 +109,7 @@ $vv-input-range: (
 						var(--input-range-thumb-shadow-hover),
 				),
 				focus-visible: (
-					outline: var(--border-2) solid var(--color-brand),
+					outline: var(--border-2) solid var(--color-brand-graphic),
 					outline-offset: var(--spacing-2),
 				),
 				disabled: (
@@ -155,7 +155,7 @@ $vv-input-range: (
 			--input-range-accent-color: var(--input-valid-color),
 			element: (
 				hint: (
-					color: var(--input-valid-color),
+					color: var(--input-valid-text-color),
 				),
 				value: (
 					border-color: var(--input-valid-color),
@@ -166,7 +166,7 @@ $vv-input-range: (
 			--input-range-accent-color: var(--input-invalid-color),
 			element: (
 				hint: (
-					color: var(--input-invalid-color),
+					color: var(--input-invalid-text-color),
 				),
 				value: (
 					border-color: var(--input-invalid-color),

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

@@ -43,7 +43,7 @@ $vv-input-text: (
 					position: absolute,
 					height: var(--spacing-2),
 					inset: auto 0 0 0,
-					background: var(--color-brand),
+					background: var(--color-brand-graphic),
 					scale: 0 1,
 					transform-origin: left,
 					will-change: transform,
@@ -252,13 +252,13 @@ $vv-input-text: (
 					),
 				),
 				hint: (
-					color: var(--input-valid-color),
+					color: var(--input-valid-text-color),
 				),
 				limit: (
-					color: var(--input-valid-color),
+					color: var(--input-valid-text-color),
 				),
 				icon-after: (
-					color: var(--input-valid-color),
+					color: var(--input-valid-text-color),
 				),
 			),
 		),
@@ -273,13 +273,13 @@ $vv-input-text: (
 					),
 				),
 				hint: (
-					color: var(--input-invalid-color),
+					color: var(--input-invalid-text-color),
 				),
 				limit: (
-					color: var(--input-invalid-color),
+					color: var(--input-invalid-text-color),
 				),
 				icon-after: (
-					color: var(--input-invalid-color),
+					color: var(--input-invalid-text-color),
 				),
 			),
 		),

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

@@ -0,0 +1,68 @@
+// A list of `vv-item` rows, with an optional header on top (the trail of a
+// picker that walks a tree: a breadcrumb, or one button per level). It sets
+// the four surfaces its rows read, so a modifier of the group restyles every
+// row without touching them: the hairline between two rows, the hover, the
+// chosen row and the current one.
+$vv-item-group: (
+	--item-divider: var(--color-surface-2),
+	--item-hover: var(--color-surface-1),
+	--item-chosen: var(--color-surface-1),
+	--item-current: var(--color-surface-2),
+	display: flex,
+	flex-direction: column,
+	min-height: 0,
+	font-size: var(--text-14),
+	element: (
+		header: (
+			display: flex,
+			align-items: center,
+			gap: var(--spacing-4),
+			min-width: 0,
+			padding: var(--spacing-8) var(--spacing-12),
+			border-bottom: var(--border) solid var(--color-surface-4),
+		),
+		// Bounded, so the footer of a dialog stays in view: the rows scroll
+		// inside
+		list: (
+			display: flex,
+			flex-direction: column,
+			max-height: 20rem,
+			margin: 0,
+			padding: 0,
+			overflow-y: auto,
+			list-style: none,
+		),
+	),
+	modifier: (
+		// The hairline and the radius of the other frames of the library.
+		// Leave it off when the list already sits in a frame: a card, a panel.
+		framed: (
+			overflow: hidden,
+			border: var(--border) solid var(--color-surface-4),
+			border-radius: var(--rounded-lg),
+		),
+		// The list is the whole panel: it takes the height it is given and
+		// scrolls there. Rows the width of a page need a hairline one step
+		// deeper, or the line between two of them disappears into the ground.
+		fill: (
+			--item-divider: var(--color-surface-3),
+			flex: 1,
+			element: (
+				list: (
+					flex: 1,
+					min-height: 0,
+					max-height: none,
+				),
+			),
+		),
+		// Drawn on a ground that is already `surface-1`: hover and chosen step
+		// up, and the current row goes the other way, to the plain surface,
+		// so it is the one light row on a grey panel
+		raised: (
+			--item-divider: var(--color-surface-3),
+			--item-hover: var(--color-surface-2),
+			--item-chosen: var(--color-surface-2),
+			--item-current: var(--color-surface),
+		),
+	),
+) !default;

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

@@ -0,0 +1,201 @@
+// A row of a list: something to choose, to open, or to act on. The row holds
+// an `entry`, the clickable part (a `<button>` or an `<a>`), and whatever sits
+// beside it with a hit area of its own: `actions` for controls that act on the
+// row, `open` for a divided area that opens a level while the entry chooses.
+// A button cannot contain buttons, which is why the row is not the button.
+
+// Selection is a step of surface, a step of weight on the title and a check,
+// never a colour: the brand is left to the primary action around the list.
+// Two different things are marked two different ways. `pressed-within` is the
+// row being chosen in a picker (the entry carries `aria-pressed`); `current`
+// is the row being looked at in a master list, marked by a bar along the
+// inline start instead of a check, which there would read as a verdict.
+
+// The four surfaces come from custom properties a `vv-item-group` sets, with a
+// fallback at the point of use, so a row works outside a group too and a group
+// drawn on a ground that is already `surface-1` only reassigns them (`raised`).
+// Every declaration that reads one is plain, in brackets: a `var()` inside a
+// generated custom property is substituted at the root, where the group's
+// values do not reach. `inherit` is plain for a related reason: written into a
+// custom property, a CSS-wide keyword applies to the property itself.
+$vv-item: (
+	display: flex,
+	align-items: stretch,
+	// A floor, so a row holding a short name and one holding a wrapped title
+	// read as the same kind of thing. `flex-shrink: 0` keeps a list that is a
+	// bounded flex column from squeezing its rows under their content.
+	min-height: var(--spacing-40),
+	flex-shrink: 0,
+	color: var(--color-word-2),
+	[border-bottom]: var(--border) solid var(--item-divider, var(--color-surface-2)),
+	transition: background-color var(--duration-150) var(--ease-out),
+	element: (
+		entry: (
+			display: flex,
+			flex: 1,
+			align-items: center,
+			gap: var(--spacing-sm),
+			min-width: 0,
+			margin: 0,
+			padding: var(--spacing-8) var(--spacing-12),
+			border: 0,
+			background: none,
+			[color]: inherit,
+			[font]: inherit,
+			text-align: start,
+			text-decoration: none,
+			cursor: pointer,
+			state: (
+				// Inset, so the scrolling list around the row does not clip it
+				focus-visible: (
+					outline: var(--spacing-2) solid var(--color-brand-graphic),
+					outline-offset: calc(var(--spacing-2) * -1),
+				),
+				disabled: (
+					opacity: var(--opacity-30),
+					cursor: not-allowed,
+				),
+			),
+		),
+		media: (
+			display: flex,
+			flex-shrink: 0,
+			align-items: center,
+			justify-content: center,
+			color: var(--color-word-3),
+		),
+		content: (
+			display: flex,
+			flex: 1,
+			flex-direction: column,
+			min-width: 0,
+		),
+		title: (
+			flex: 1,
+			min-width: 0,
+			overflow: hidden,
+			color: var(--color-word-1),
+			text-overflow: ellipsis,
+			white-space: nowrap,
+		),
+		description: (
+			display: -webkit-box,
+			overflow: hidden,
+			color: var(--color-word-3),
+			font-size: var(--text-12),
+			line-height: var(--leading-normal),
+			-webkit-box-orient: vertical,
+			-webkit-line-clamp: 2,
+		),
+		// A quiet note at the end of the row: a status, "current"
+		note: (
+			flex-shrink: 0,
+			color: var(--color-word-3),
+			font-size: var(--text-12),
+		),
+		// The mark of the chosen row, in the row's own colour
+		check: (
+			flex-shrink: 0,
+		),
+		// The row opens a level
+		chevron: (
+			flex-shrink: 0,
+			color: var(--color-word-4),
+		),
+		// Controls that act on the row, inline with it and without a divider:
+		// a divided column is for opening a level (`open`), not for acting
+		actions: (
+			display: flex,
+			flex-shrink: 0,
+			align-items: center,
+			gap: var(--spacing-2),
+			padding-inline-end: var(--spacing-8),
+		),
+		open: (
+			display: flex,
+			align-items: center,
+			margin: 0,
+			padding: 0 var(--spacing-12),
+			border: 0,
+			[border-inline-start]: var(--border) solid var(--item-divider, var(--color-surface-2)),
+			background: none,
+			color: var(--color-word-3),
+			[font]: inherit,
+			cursor: pointer,
+			transition: color var(--duration-150) var(--ease-out),
+			state: (
+				hover: (
+					color: var(--color-word-1),
+				),
+				focus-visible: (
+					outline: var(--spacing-2) solid var(--color-brand-graphic),
+					outline-offset: calc(var(--spacing-2) * -1),
+				),
+			),
+		),
+	),
+	state: (
+		last-child: (
+			border-bottom-width: 0,
+		),
+		hover: (
+			[background-color]: var(--item-hover, var(--color-surface-1)),
+		),
+		// Declared after `hover`, so the chosen and the current row keep their
+		// surface under the pointer
+		pressed-within: (
+			[background-color]: var(--item-chosen, var(--color-surface-1)),
+			element: (
+				title: (
+					font-weight: var(--font-medium),
+				),
+			),
+		),
+		current: (
+			[background-color]: var(--item-current, var(--color-surface-2)),
+			// On the inline start: `--direction` is -1 in a right to left page
+			[box-shadow]: inset calc(var(--spacing-3) * var(--direction, 1)) 0 0 var(--color-word-2),
+			element: (
+				title: (
+					font-weight: var(--font-medium),
+				),
+			),
+		),
+	),
+	modifier: (
+		// More inside than an icon and a line of text: an avatar, a title
+		// over a description, a row of badges. The floor goes on the entry,
+		// which holds the content, and the row stretches to it.
+		roomy: (
+			element: (
+				entry: (
+					min-height: var(--spacing-56),
+					padding: var(--spacing-12) var(--spacing-md),
+				),
+			),
+		),
+		// Content several lines tall: the media and the control belong next
+		// to the first line, not halfway down the row
+		top: (
+			element: (
+				entry: (
+					align-items: flex-start,
+				),
+			),
+		),
+		// Nothing to click and nothing to choose: the row holds its own
+		// controls, or it is a skeleton standing in for a row still loading
+		plain: (
+			state: (
+				hover: (
+					[background-color]: transparent,
+				),
+			),
+			element: (
+				entry: (
+					cursor: default,
+				),
+			),
+		),
+	),
+) !default;

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

@@ -0,0 +1,9 @@
+// The keys of a combination side by side, with what joins them (a `+`, a
+// `then`) written in the markup between them
+$vv-kbd-group: (
+	display: inline-flex,
+	align-items: center,
+	gap: 0.25em,
+	color: var(--color-word-4),
+	white-space: nowrap,
+) !default;

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

@@ -0,0 +1,20 @@
+// A key of the keyboard, to name a shortcut: a cap drawn in the mono face,
+// sized in `em` so it follows the text around it. A combination of keys is a
+// `vv-kbd-group`, with whatever joins them written in the markup.
+$vv-kbd: (
+	display: inline-flex,
+	align-items: center,
+	justify-content: center,
+	min-inline-size: 1.5em,
+	padding: 0.1em 0.4em,
+	border: var(--border) solid var(--color-surface-4),
+	border-bottom-width: var(--spacing-2),
+	border-radius: var(--rounded),
+	background-color: var(--color-surface-1),
+	color: var(--color-word-2),
+	font-family: var(--font-mono),
+	font-size: 0.8125em,
+	font-weight: var(--font-medium),
+	line-height: var(--leading-snug),
+	white-space: nowrap,
+) !default;

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

@@ -0,0 +1,32 @@
+// A note inside a conversation that nobody says: an operator joined, the
+// conversation was handed over, a tool ran. Quiet and centred, an optional
+// `icon` beside the `content`. `bordered` frames it in a pill; a date between
+// two days of messages is a `vv-separator` with a label.
+$vv-marker: (
+	display: flex,
+	align-items: center,
+	justify-content: center,
+	gap: var(--spacing-6),
+	color: var(--color-word-3),
+	font-size: var(--text-12),
+	line-height: var(--leading-snug),
+	text-align: center,
+	element: (
+		icon: (
+			flex-shrink: 0,
+		),
+		content: (
+			min-width: 0,
+		),
+	),
+	modifier: (
+		bordered: (
+			width: fit-content,
+			margin-inline: auto,
+			padding: var(--spacing-2) var(--spacing-10),
+			border: var(--border) solid var(--color-surface-3),
+			border-radius: var(--rounded-full),
+			background-color: var(--color-surface),
+		),
+	),
+) !default;

package/src/settings/components/_vv-message-scroller.scss

@@ -0,0 +1,65 @@
+// The scrolling column of a conversation. It lays the messages out with the
+// gap of a conversation and keeps the scroll inside itself; sticking to the
+// latest message while a reply streams in is behaviour and belongs to the
+// script that owns the list. `jump` is the button that goes back to the
+// latest message, pinned to the bottom edge of the column without taking room
+// in it; the script hides it with `hidden` when the reader is at the bottom,
+// which a rule on the entry honours over the block's own `display`.
+// `fade` dissolves the top and bottom edges into the surface.
+$vv-message-scroller: (
+	display: flex,
+	flex-direction: column,
+	gap: var(--spacing-md),
+	min-height: 0,
+	overflow-y: auto,
+	overscroll-behavior: contain,
+	scrollbar-width: thin,
+	scrollbar-color: var(--color-word-5) transparent,
+	element: (
+		jump: (
+			position: sticky,
+			inset-block-end: var(--spacing-8),
+			align-self: center,
+			display: inline-grid,
+			flex-shrink: 0,
+			place-items: center,
+			inline-size: var(--spacing-36),
+			block-size: var(--spacing-36),
+			// Its own height and the gap before it, so it takes no room
+			margin-block-start: calc((var(--spacing-36) + var(--spacing-md)) * -1),
+			border: var(--border) solid var(--color-surface-3),
+			border-radius: var(--rounded-full),
+			background-color: var(--color-surface-1),
+			box-shadow: var(--shadow-md),
+			color: var(--color-word-2),
+			cursor: pointer,
+			transition: background-color var(--duration-150) var(--ease-out),
+			state: (
+				hover: (
+					background-color: var(--color-surface-2),
+				),
+				focus-visible: (
+					outline: var(--spacing-px) solid var(--color-brand-graphic),
+					outline-offset: var(--spacing-2),
+				),
+			),
+		),
+	),
+	modifier: (
+		// The button rises above the faded strip, or the mask would fade it too
+		fade: (
+			element: (
+				jump: (
+					inset-block-end: var(--spacing-48),
+				),
+			),
+			mask-image: linear-gradient(
+				to bottom,
+				transparent 0,
+				black var(--spacing-40),
+				black calc(100% - var(--spacing-40)),
+				transparent 100%
+			),
+		),
+	),
+) !default;

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

@@ -0,0 +1,95 @@
+// A row of a conversation: who says it, what is said, and what can be done
+// with it. The row lays out an optional `avatar`, anchored to the last line,
+// beside a `content` column that holds a `header` (the sender, a time), one or
+// more `vv-bubble`, attachments or cards, and a `footer` (status, actions).
+// The rows of the one reading are `end`: mirrored to the inline end.
+// `meta` is metadata that shows on hover or focus only, and always on a
+// device that cannot hover (see `src/components/vv-message.scss`).
+$vv-message: (
+	display: flex,
+	align-items: flex-end,
+	gap: var(--spacing-sm),
+	max-width: 100%,
+	element: (
+		avatar: (
+			flex-shrink: 0,
+		),
+		content: (
+			display: flex,
+			flex-direction: column,
+			align-items: flex-start,
+			gap: var(--spacing-4),
+			min-width: 0,
+			max-width: min(100%, 48rem),
+		),
+		header: (
+			display: flex,
+			flex-wrap: wrap,
+			align-items: baseline,
+			gap: var(--spacing-8),
+			padding-inline: var(--spacing-4),
+			color: var(--color-word-3),
+			font-size: var(--text-12),
+		),
+		footer: (
+			display: flex,
+			flex-wrap: wrap,
+			align-items: center,
+			gap: var(--spacing-8),
+			color: var(--color-word-3),
+			font-size: var(--text-12),
+		),
+		meta: (
+			display: inline-flex,
+			align-items: center,
+			gap: var(--spacing-4),
+			font-variant-numeric: tabular-nums,
+			opacity: var(--opacity-0),
+			transition: opacity var(--duration-150) var(--ease-out),
+		),
+	),
+	state: (
+		hover: (
+			element: (
+				meta: (
+					opacity: var(--opacity-100),
+				),
+			),
+		),
+		focus-within: (
+			element: (
+				meta: (
+					opacity: var(--opacity-100),
+				),
+			),
+		),
+	),
+	modifier: (
+		end: (
+			flex-direction: row-reverse,
+			element: (
+				content: (
+					align-items: flex-end,
+				),
+				// Aligned to the end, not reversed: a reversed row would run the
+				// keyboard through its buttons against the order they are seen in
+				header: (
+					justify-content: flex-end,
+				),
+				footer: (
+					justify-content: flex-end,
+				),
+			),
+		),
+		// The content takes the whole row: an answer rendered as rich text,
+		// a card, a table
+		wide: (
+			element: (
+				content: (
+					flex: 1,
+					max-width: 100%,
+				),
+			),
+		),
+	),
+) !default;

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

@@ -79,8 +79,12 @@ $vv-nav: (
 						hover: (
 							background-color: var(--color-surface-2),
 						),
+						// Inverted, so it reads on any surface a sidebar sits
+						// on and stays apart from a hovered voice; it comes
+						// after hover and active, which it wins over
 						current: (
-							background-color: var(--color-surface-1),
+							color: var(--color-surface),
+							background-color: var(--color-word-1),
 						),
 					),
 				),
@@ -135,10 +139,10 @@ $vv-nav: (
 					white-space: nowrap,
 					state: (
 						hover: (
-							color: var(--color-brand),
+							color: var(--color-brand-readable),
 						),
 						current: (
-							color: var(--color-brand),
+							color: var(--color-brand-readable),
 							border-color: currentcolor,
 							background-color: color-mix(in srgb, var(--color-brand), transparent 95%),
 						),