@volverjs/style 0.1.29 → 0.1.30

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

@@ -0,0 +1,78 @@
+// Moving between the pages of a list or a table: a `<nav>` holding a list of
+// page links or buttons, previous and next, an ellipsis where pages are
+// skipped, and optionally a line that says where the reader is ("21-40 of
+// 240"). The page being shown is read from `aria-current="page"`, the way a
+// pagination marks it for assistive technology, so the markup states it once.
+// A page that cannot be reached (previous on the first page) is a `disabled`
+// button, or a link with `aria-disabled="true"` and no `href`: the
+// `pointer-events: none` below stops the pointer only, the missing `href`
+// takes the link out of the tab order.
+$vv-pagination: (
+	display: flex,
+	flex-wrap: wrap,
+	align-items: center,
+	gap: var(--spacing-sm),
+	font-size: var(--text-14),
+	element: (
+		list: (
+			_alias: '> :is(ol, ul)',
+			display: flex,
+			flex-wrap: wrap,
+			align-items: center,
+			gap: var(--spacing-4),
+			margin: 0,
+			padding: 0,
+			list-style: none,
+		),
+		page: (
+			display: inline-flex,
+			align-items: center,
+			justify-content: center,
+			gap: 0.25em,
+			min-width: 2.25em,
+			height: 2.25em,
+			padding-inline: 0.5em,
+			border-radius: var(--rounded),
+			color: var(--color-word-2),
+			font-variant-numeric: tabular-nums,
+			text-decoration: none,
+			cursor: pointer,
+			transition: (
+				background-color var(--duration-150) var(--ease-out),
+				color var(--duration-150) var(--ease-out),
+			),
+			state: (
+				hover: (
+					background-color: var(--color-surface-2),
+					color: var(--color-word),
+				),
+				focus-visible: (
+					outline: var(--spacing-px) solid var(--color-brand-graphic),
+					outline-offset: var(--spacing-2),
+				),
+				current-page: (
+					background-color: var(--color-surface-2),
+					color: var(--color-word),
+					font-weight: var(--font-semibold),
+				),
+				disabled: (
+					opacity: var(--opacity-30),
+					cursor: not-allowed,
+					pointer-events: none,
+				),
+			),
+		),
+		ellipsis: (
+			display: inline-flex,
+			align-items: center,
+			justify-content: center,
+			min-width: 2.25em,
+			color: var(--color-word-4),
+		),
+		summary: (
+			color: var(--color-word-3),
+			font-size: var(--text-12),
+			font-variant-numeric: tabular-nums,
+		),
+	),
+) !default;

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

@@ -0,0 +1,53 @@
+// A floating panel for a short piece of content or a small form, on the
+// Popover API: the element carries `popover`, the browser moves it to the top
+// layer and shows it while it is open. The reset of the library unsets the
+// fixed position the browser gives a popover, so the block puts it back, with
+// the z-index of a popover for a panel shown without the top layer. Placing
+// it next to its trigger is left to the script that opens it or to anchor
+// positioning, which set its inset: without one the panel opens at the top
+// left corner of the viewport, and `center` centres it instead.
+// A panel opened on hover (a hover card) is the same block: the delay is
+// behaviour and belongs to the script. `vv-dropdown` stays the menu and the
+// list of options.
+$vv-popover: (
+	position: fixed,
+	z-index: var(--z-popover),
+	inset: auto,
+	max-inline-size: min(20rem, calc(100vw - var(--spacing-32))),
+	max-block-size: calc(100dvh - var(--spacing-32)),
+	margin: 0,
+	padding: var(--spacing-sm),
+	overflow: auto,
+	border: var(--border) solid var(--color-surface-3),
+	border-radius: var(--rounded-lg),
+	background-color: var(--color-surface),
+	box-shadow: var(--shadow-lg),
+	color: var(--color-word-2),
+	font-size: var(--text-14),
+	line-height: var(--leading-normal),
+	element: (
+		title: (
+			margin: 0 0 var(--spacing-4),
+			color: var(--color-word-1),
+			font-size: var(--text-14),
+			font-weight: var(--font-semibold),
+		),
+		footer: (
+			display: flex,
+			flex-wrap: wrap,
+			justify-content: flex-end,
+			gap: var(--spacing-8),
+			margin-block-start: var(--spacing-sm),
+		),
+	),
+	modifier: (
+		// Centred in the viewport, as the browser shows a popover nobody
+		// places: for a panel opened by `popovertarget` alone
+		center: (
+			inset: 0,
+			inline-size: fit-content,
+			block-size: fit-content,
+			margin: auto,
+		),
+	),
+) !default;

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

@@ -9,18 +9,18 @@ $vv-progress: (
 	border: var(--border-0),
 	border-radius: var(--rounded-full),
 	overflow: hidden,
-	color: var(--color-brand),
+	color: var(--color-brand-graphic),
 	background-color: var(--color-surface-2),
 	pseudo: (
 		-webkit-progress-bar: (
 				background-color: transparent,
 			),
 		-moz-progress-bar: (
-				background-color: var(--color-brand),
+				background-color: var(--color-brand-graphic),
 				transition: var(--transition-all),
 			),
 		-webkit-progress-value: (
-				background-color: var(--color-brand),
+				background-color: var(--color-brand-graphic),
 				transition: var(--transition-all),
 			),
 	),
@@ -29,7 +29,7 @@ $vv-progress: (
 			background: var(--color-surface-2)
 				linear-gradient(
 					to right,
-					var(--color-brand) 30%,
+					var(--color-brand-graphic) 30%,
 					var(--color-surface-2) 30%
 				)
 				top left/150% 150% no-repeat,

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

@@ -0,0 +1,274 @@
+// A container for rich text that arrives as plain tags: rendered markdown,
+// the output of an editor or a CMS. Every element is an alias on a bare tag
+// inside the block, and a group of tags is one selector through `:is()`,
+// since an `_alias` has to be a single selector. The BEM classes the
+// generator emits next to the aliases are there if a tag needs one.
+
+// The reset of the library unsets every property of every tag but its
+// `display`, so the meaning of the inline tags (italic, struck, underlined,
+// raised) is given back here, not only their look.
+
+// Sizes are in `em`, not in the static steps of `vv-text`: rich text is set
+// at 14px in a chat bubble and at 16px on a page, and the headings follow the
+// text around them. The rhythm is a margin on every child after the first,
+// so the block has no margin of its own at either end.
+$vv-prose: (
+	line-height: var(--leading-normal),
+	overflow-wrap: break-word,
+	element: (
+		// Declared first: the rules below add space back where it belongs
+		child: (
+			_alias: '> *',
+			margin-block: 0,
+		),
+		flow: (
+			_alias: '> * + *',
+			margin-block-start: 0.75em,
+		),
+		// Markdown wraps content in these too: two paragraphs in a quote, a
+		// loose list item, a disclosure
+		nested-flow: (
+			_alias: ':is(blockquote, details, td, th) > * + *',
+			margin-block-start: 0.75em,
+		),
+		item-nested-flow: (
+			_alias: 'li > * + *',
+			margin-block-start: 0.25em,
+		),
+		heading: (
+			_alias: ':is(h1, h2, h3, h4, h5, h6)',
+			color: var(--color-word),
+			font-weight: var(--font-semibold),
+			line-height: var(--leading-tight),
+			text-wrap: balance,
+		),
+		// A heading opens a section: more room above it than between two
+		// paragraphs
+		heading-flow: (
+			_alias: '> * + :is(h1, h2, h3, h4, h5, h6)',
+			margin-block-start: 1.5em,
+		),
+		h1: (
+			_alias: 'h1',
+			font-size: 1.5em,
+		),
+		h2: (
+			_alias: 'h2',
+			font-size: 1.25em,
+		),
+		h3: (
+			_alias: 'h3',
+			font-size: 1.125em,
+		),
+		h4: (
+			_alias: ':is(h4, h5, h6)',
+			font-size: 1em,
+		),
+		link: (
+			_alias: 'a',
+			color: var(--color-brand-readable),
+			text-decoration: underline,
+			text-underline-offset: 0.2em,
+			state: (
+				hover: (
+					text-decoration-thickness: 2px,
+				),
+				focus-visible: (
+					outline: var(--spacing-px) solid var(--color-brand-graphic),
+					outline-offset: var(--spacing-2),
+				),
+			),
+		),
+		strong: (
+			_alias: ':is(b, strong)',
+			font-weight: var(--font-semibold),
+		),
+		emphasis: (
+			_alias: ':is(em, i, cite, dfn, var)',
+			font-style: italic,
+		),
+		strike: (
+			_alias: ':is(del, s)',
+			text-decoration: line-through,
+		),
+		underline: (
+			_alias: ':is(ins, u)',
+			text-decoration: underline,
+		),
+		abbr: (
+			_alias: 'abbr[title]',
+			text-decoration: underline dotted,
+			cursor: help,
+		),
+		small: (
+			_alias: 'small',
+			font-size: 0.875em,
+		),
+		mark: (
+			_alias: 'mark',
+			padding-inline: 0.1em,
+			background-color: var(--color-surface-warning),
+		),
+		script: (
+			_alias: ':is(sub, sup)',
+			position: relative,
+			font-size: 0.75em,
+			line-height: 0,
+		),
+		sub: (
+			_alias: 'sub',
+			bottom: -0.25em,
+		),
+		sup: (
+			_alias: 'sup',
+			top: -0.5em,
+		),
+		kbd: (
+			_alias: 'kbd',
+			padding: 0.1em 0.35em,
+			border: var(--border) solid var(--color-surface-4),
+			border-bottom-width: var(--spacing-2),
+			border-radius: var(--rounded),
+			font-family: var(--font-mono),
+			font-size: 0.875em,
+		),
+		list: (
+			_alias: ':is(ul, ol)',
+			padding-inline-start: 1.5em,
+		),
+		ul: (
+			_alias: 'ul',
+			list-style-type: disc,
+		),
+		ol: (
+			_alias: 'ol',
+			list-style-type: decimal,
+		),
+		item-flow: (
+			_alias: 'li + li',
+			margin-block-start: 0.25em,
+		),
+		nested-list: (
+			_alias: 'li > :is(ul, ol)',
+			margin-block-start: 0.25em,
+		),
+		// The checkbox of a task list item, which the reset leaves with no
+		// appearance and no size
+		task: (
+			_alias: "li > input[type='checkbox']",
+			appearance: auto,
+			margin-inline-end: 0.5em,
+			vertical-align: middle,
+		),
+		dt: (
+			_alias: 'dt',
+			font-weight: var(--font-semibold),
+		),
+		dd: (
+			_alias: 'dd',
+			margin-inline-start: 1.5em,
+		),
+		blockquote: (
+			_alias: 'blockquote',
+			margin-inline: 0,
+			padding-inline-start: 1em,
+			border-inline-start: var(--spacing-4) solid var(--color-surface-3),
+			color: var(--color-word-3),
+		),
+		code: (
+			_alias: ':not(pre) > code',
+			padding: 0.1em 0.3em,
+			border-radius: var(--rounded),
+			background-color: var(--color-surface-1),
+			font-family: var(--font-mono),
+			font-size: 0.875em,
+		),
+		pre: (
+			_alias: 'pre',
+			overflow: auto,
+			padding: 0.75em 1em,
+			border: var(--border) solid var(--color-surface-3),
+			border-radius: var(--rounded-md),
+			background-color: var(--color-surface-1),
+			font-family: var(--font-mono),
+			font-size: 0.875em,
+			line-height: var(--leading-snug),
+			white-space: pre,
+		),
+		table: (
+			_alias: 'table',
+			width: 100%,
+			border-collapse: collapse,
+			font-size: 0.875em,
+		),
+		cell: (
+			_alias: ':is(th, td)',
+			padding: 0.375em 0.625em,
+			border: var(--border) solid var(--color-surface-3),
+			text-align: start,
+			vertical-align: top,
+		),
+		th: (
+			_alias: 'th',
+			background-color: var(--color-surface-1),
+			font-weight: var(--font-semibold),
+		),
+		hr: (
+			_alias: 'hr',
+			margin-block: 1.5em,
+			border: 0,
+			border-block-start: var(--border) solid var(--color-surface-3),
+		),
+		img: (
+			_alias: 'img',
+			max-width: 100%,
+			height: auto,
+			border-radius: var(--rounded-md),
+		),
+		details: (
+			_alias: 'details',
+			padding: 0.5em 0.75em,
+			border: var(--border) solid var(--color-surface-3),
+			border-radius: var(--rounded-md),
+			background-color: var(--color-surface-1),
+		),
+		summary: (
+			_alias: 'summary',
+			font-weight: var(--font-semibold),
+			cursor: pointer,
+		),
+		summary-open: (
+			_alias: 'details[open] > summary',
+			margin-block-end: 0.5em,
+		),
+	),
+	modifier: (
+		// Rich text at the density of a field or a list: headings at the size
+		// of the text, the gaps halved
+		compact: (
+			element: (
+				flow: (
+					margin-block-start: 0.375em,
+				),
+				heading-flow: (
+					margin-block-start: 0.75em,
+				),
+				h1: (
+					font-size: 1em,
+				),
+				h2: (
+					font-size: 1em,
+				),
+				h3: (
+					font-size: 1em,
+				),
+				item-flow: (
+					margin-block-start: 0,
+				),
+				hr: (
+					margin-block: 0.75em,
+				),
+			),
+		),
+	),
+) !default;

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

@@ -0,0 +1,77 @@
+// Questions asked one step at a time, in a conversation or a panel: a
+// `header` with the title of the set, a `progress` bar, the `item` being
+// asked (a `title`, a `description`, the choices, an `error`) and the
+// `actions` that move between steps. The choices are fields of the library:
+// `vv-radio--card` or `vv-checkbox--card` for a single or a multiple choice,
+// a text field for a free answer.
+// The share of the steps done is `--questionnaire-progress`, set on the block
+// (`style="--questionnaire-progress: 40%"`) and read by a plain declaration.
+// The title and the description space themselves with a margin, not the item
+// with a gap: a choice keeps them inside its fieldset, as the `legend` and a
+// paragraph, where a gap of the item would not reach. The description sits
+// close under the title (see `src/components/vv-questionnaire.scss`).
+$vv-questionnaire: (
+	display: flex,
+	flex-direction: column,
+	overflow: hidden,
+	border: var(--border) solid var(--color-surface-3),
+	border-radius: var(--rounded-xl),
+	background-color: var(--color-surface),
+	element: (
+		// A heading, in the markup
+		header: (
+			display: flex,
+			align-items: center,
+			gap: var(--spacing-8),
+			margin: 0,
+			padding: var(--spacing-10) var(--spacing-sm),
+			font-size: var(--text-16),
+			color: var(--color-word-1),
+			font-weight: var(--font-semibold),
+		),
+		progress: (
+			position: relative,
+			block-size: var(--spacing-4),
+			overflow: hidden,
+			background-color: var(--color-surface-3),
+			pseudo: (
+				after: (
+					position: absolute,
+					inset-block: 0,
+					inset-inline-start: 0,
+					background-color: var(--color-word-4),
+					transition: inline-size var(--duration-300) var(--ease-out),
+					[inline-size]: var(--questionnaire-progress, 0%),
+				),
+			),
+		),
+		item: (
+			display: flex,
+			flex-direction: column,
+			padding: var(--spacing-16) var(--spacing-sm),
+		),
+		title: (
+			margin: 0 0 var(--spacing-12),
+			color: var(--color-word-1),
+			font-weight: var(--font-semibold),
+		),
+		description: (
+			margin: 0 0 var(--spacing-12),
+			color: var(--color-word-3),
+			font-size: var(--text-14),
+		),
+		error: (
+			color: var(--color-danger-readable),
+			font-size: var(--text-12),
+		),
+		actions: (
+			display: flex,
+			flex-wrap: wrap,
+			align-items: center,
+			justify-content: flex-end,
+			gap: var(--spacing-8),
+			padding: var(--spacing-10) var(--spacing-sm),
+			border-top: var(--border) solid var(--color-surface-3),
+		),
+	),
+) !default;

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

@@ -1,3 +1,5 @@
+@use 'choice' as *;
+
 $vv-radio: (
 	display: inline-flex,
 	flex-wrap: wrap,
@@ -21,6 +23,8 @@ $vv-radio: (
 		),
 	),
 	modifier: (
+		segment: $choice-segment,
+		card: $choice-card,
 		readonly: (
 			opacity: var(--opacity-100),
 			cursor: default,
@@ -29,14 +33,14 @@ $vv-radio: (
 		valid: (
 			element: (
 				hint: (
-					color: var(--input-valid-color),
+					color: var(--input-valid-text-color),
 				),
 			),
 		),
 		invalid: (
 			element: (
 				hint: (
-					color: var(--input-invalid-color),
+					color: var(--input-invalid-text-color),
 				),
 			),
 		),
@@ -92,7 +96,7 @@ $vv-radio: (
 					),
 				),
 				focus-visible: (
-					outline: var(--spacing-px) solid var(--color-brand),
+					outline: var(--spacing-px) solid var(--color-brand-graphic),
 					outline-offset: var(--spacing-2),
 				),
 			),

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

@@ -45,7 +45,7 @@ $vv-select: (
 					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,
@@ -243,7 +243,7 @@ $vv-select: (
 					color: var(--input-color),
 					state: (
 						checked: (
-							color: var(--color-brand),
+							color: var(--color-surface-brand-readable),
 							background-color: var(--color-surface-brand),
 						),
 						disabled: (
@@ -270,10 +270,10 @@ $vv-select: (
 					),
 				),
 				hint: (
-					color: var(--input-valid-color),
+					color: var(--input-valid-text-color),
 				),
 				icon-after: (
-					color: var(--input-valid-color),
+					color: var(--input-valid-text-color),
 				),
 			),
 		),
@@ -288,10 +288,10 @@ $vv-select: (
 					),
 				),
 				hint: (
-					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-separator.scss

@@ -0,0 +1,79 @@
+// A hairline between two groups of content, with an optional label on it
+// ("or", a date). The two halves of the line are the `::before` and `::after`
+// of the block, either side of the label, so a long label wraps and the
+// separator takes its own height instead of overlapping what is around it.
+// The generator gives both pseudo elements their empty `content`.
+
+// Each half keeps at least 16px and never shrinks, so a label too long for
+// the row wraps instead of squeezing the line out of sight.
+
+// The space around the label is its own padding, not a `gap` on the block:
+// without a label the halves have to meet, and `:empty` cannot tell, since
+// a single space or line break inside the block is enough to defeat it.
+
+// The line takes the colour of the block's `border-color`, which the block
+// never draws itself (it has no border of its own): override that one colour
+// and both halves follow. `inherit` goes through a plain declaration, in
+// brackets: written into a custom property, a CSS-wide keyword applies to the
+// custom property itself, at the root, and the halves would fall back to
+// `currentcolor`.
+$vv-separator: (
+	display: flex,
+	align-items: center,
+	margin: var(--spacing-0),
+	border: var(--border-0),
+	border-color: var(--color-surface-3),
+	color: var(--color-word-3),
+	font-size: var(--text-12),
+	line-height: var(--leading-snug),
+	text-transform: uppercase,
+	pseudo: (
+		before: (
+			flex: 1 0 var(--spacing-16),
+			border-block-start: var(--border) solid,
+			[border-color]: inherit,
+		),
+		after: (
+			flex: 1 0 var(--spacing-16),
+			border-block-start: var(--border) solid,
+			[border-color]: inherit,
+		),
+	),
+	element: (
+		label: (
+			_alias: '> span',
+			min-width: 0,
+			padding-inline: var(--spacing-8),
+			text-align: center,
+		),
+	),
+	modifier: (
+		// Between two items of a row: the halves stand up and the block
+		// stretches to the height of the row. They drop the 16px floor, which
+		// would make a row of text taller than its text.
+		vertical: (
+			flex-direction: column,
+			align-self: stretch,
+			pseudo: (
+				before: (
+					flex: 1,
+					border-block-start: var(--border-0),
+					border-inline-start: var(--border) solid,
+					[border-color]: inherit,
+				),
+				after: (
+					flex: 1,
+					border-block-start: var(--border-0),
+					border-inline-start: var(--border) solid,
+					[border-color]: inherit,
+				),
+			),
+			element: (
+				label: (
+					padding-block: var(--spacing-8),
+					padding-inline: var(--spacing-0),
+				),
+			),
+		),
+	),
+) !default;