@volverjs/style 0.1.28 → 0.1.30-beta.1

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),
+					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),
 				),
 			),
 		),

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

@@ -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;

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

@@ -0,0 +1,91 @@
+// The width of the collapsed sidebar, read by the block and by its sections
+$-rail-width: var(--sidebar-collapsed-width, var(--spacing-64));
+
+// A section of the rail is one column as wide as the rail, anchored at its
+// start, with what is left in it centred: the icons of the header, of the
+// navigation and of the footer line up on the middle of the rail, whatever
+// padding each of them carries. The column keeps that width while the rail is
+// still narrowing, so the icons stay where they land instead of riding the
+// middle of a column that shrinks. `minmax(0, ...)` gives up the pixel of the
+// border at rest, where the section is that much narrower than the rail.
+$-rail-section: (
+	display: grid,
+	align-content: start,
+	justify-items: center,
+	padding-inline: 0,
+	[grid-template-columns]: minmax(0, $-rail-width),
+);
+
+// The side column of an application: a `header` (the product, a switcher), a
+// `content` that scrolls (a `vv-nav--sidebar`), a `footer` (the account).
+// Its width is `--sidebar-width`, 16rem when nothing sets it; `collapsed`
+// narrows it to `--sidebar-collapsed-width`, a 64px rail, and hides every
+// `label` from sight, so the icons of the navigation remain and still carry
+// their names. Both are read with a
+// fallback and never declared on the block, so a value set on the layout
+// around it reaches it.
+$vv-sidebar: (
+	display: flex,
+	flex-direction: column,
+	// Its width is the one set, even beside a main column that overflows
+	flex-shrink: 0,
+	block-size: 100%,
+	min-block-size: 0,
+	border-inline-end: var(--border) solid var(--color-surface-3),
+	background-color: var(--color-surface-1),
+	color: var(--color-word-2),
+	transition: inline-size var(--duration-300) var(--ease-out),
+	[inline-size]: var(--sidebar-width, 16rem),
+	element: (
+		header: (
+			display: flex,
+			flex-shrink: 0,
+			align-items: center,
+			gap: var(--spacing-8),
+			min-width: 0,
+			padding: var(--spacing-sm),
+		),
+		content: (
+			flex: 1,
+			min-height: 0,
+			padding: var(--spacing-xs) var(--spacing-sm),
+			overflow-y: auto,
+			scrollbar-width: thin,
+		),
+		footer: (
+			display: flex,
+			flex-shrink: 0,
+			align-items: center,
+			gap: var(--spacing-8),
+			min-width: 0,
+			padding: var(--spacing-sm),
+			border-top: var(--border) solid var(--color-surface-3),
+		),
+		label: (
+			min-width: 0,
+			overflow: hidden,
+			text-overflow: ellipsis,
+			white-space: nowrap,
+		),
+	),
+	modifier: (
+		// The labels leave the rail but stay in the accessibility tree, so an
+		// icon keeps the name of its link
+		collapsed: (
+			[inline-size]: $-rail-width,
+			element: (
+				header: $-rail-section,
+				content: $-rail-section,
+				footer: $-rail-section,
+				label: (
+					position: absolute,
+					inline-size: var(--spacing-1),
+					block-size: var(--spacing-1),
+					overflow: hidden,
+					clip-path: inset(50%),
+					white-space: nowrap,
+				),
+			),
+		),
+	),
+) !default;

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

@@ -0,0 +1,26 @@
+// A ring that turns while something is loading. It measures `1em` and draws
+// in `currentcolor`, so it takes the size and the colour of the text it sits
+// in: inside a button, next to a label, or alone with a text utility on it.
+
+// The animation tokens are `none` under `prefers-reduced-motion`, and a
+// spinner that stands still says nothing, so the block runs `spin` itself
+// and slows it down there instead (see `src/components/vv-spinner.scss`).
+// `--spinner-duration` and `--spinner-thickness` are read by plain
+// declarations, in brackets: a `var()` inside a generated custom property is
+// substituted where that property is declared, at the root, and would never
+// see a value set on the block.
+$vv-spinner: (
+	--spinner-duration: 0.75s,
+	--spinner-thickness: 0.125em,
+	display: inline-block,
+	flex-shrink: 0,
+	inline-size: 1em,
+	block-size: 1em,
+	border-style: solid,
+	border-color: color-mix(in srgb, currentcolor 20%, transparent),
+	border-block-start-color: currentcolor,
+	border-radius: var(--rounded-full),
+	vertical-align: middle,
+	[border-width]: var(--spinner-thickness),
+	[animation]: spin var(--spinner-duration) linear infinite,
+) !default;

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

@@ -27,12 +27,45 @@ $vv-table: (
 				last-child: (
 					border-width: 0,
 				),
+				// A row picked in a table that selects (`aria-selected`)
+				selected: (
+					background-color: var(--color-surface-1),
+				),
+				// The row being looked at, the table as a master list: a
+				// surface that stands apart and a bar along the inline start,
+				// as `vv-item--current` draws it. Plain markup puts `current`
+				// on the `tr`.
+				current: (
+					background-color: 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),
+				),
 			),
 		),
 		tfoot-tr: (
 			_alias: 'tfoot > tr',
 			border-width: 1px 0 0 0,
 		),
+		// A sortable column carries `aria-sort` on the `th` and a
+		// `vv-table__sort` button inside it. The indicator is the chevron of
+		// the library, drawn as a mask in the colour of the text after the
+		// button, faint while the column is not sorted. Declared before `th`,
+		// whose sorted states follow it.
+		sortable: (
+			_alias: 'th[aria-sort]',
+			pseudo: (
+				after: (
+					display: inline-block,
+					width: 0.75em,
+					height: 0.75em,
+					margin-inline-start: 0.25em,
+					vertical-align: middle,
+					background-color: currentcolor,
+					mask: var(--bg-chevron) center / contain no-repeat,
+					opacity: var(--opacity-40),
+				),
+			),
+		),
 		th: (
 			_alias: 'th',
 			font-weight: var(--font-semibold),
@@ -40,6 +73,36 @@ $vv-table: (
 			color: var(--color-word-2),
 			vertical-align: middle,
 			[padding]: var(--table-cell-padding),
+			// Sorted: the indicator of `sortable` above, full strength,
+			// pointing down for descending and up for ascending
+			state: (
+				sort-descending: (
+					pseudo: (
+						after: (
+							opacity: var(--opacity-100),
+						),
+					),
+				),
+				sort-ascending: (
+					pseudo: (
+						after: (
+							opacity: var(--opacity-100),
+							rotate: 180deg,
+						),
+					),
+				),
+			),
+		),
+		sort: (
+			display: inline-flex,
+			align-items: center,
+			cursor: pointer,
+			state: (
+				focus-visible: (
+					outline: var(--spacing-px) solid var(--color-brand),
+					outline-offset: var(--spacing-2),
+				),
+			),
 		),
 		td: (
 			_alias: 'td',