@volverjs/style 0.1.28 → 0.1.30-beta.1

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

@@ -0,0 +1,135 @@
+// A file or an image attached to a message or waiting in a composer: a tile
+// with its `media` (the icon of the kind of file, a thumbnail), a `content`
+// column with a `title` and a `description` (the kind, the size), `actions`
+// such as open or download, and an optional `remove` button pinned to the
+// top corner on the inline end, over the edge of the tile.
+// `image` shows a picture whole, with the caption under it; `invalid` is an
+// upload that failed; `loading` dims the media while a `vv-spinner` inside it
+// turns. A row of them is a `vv-attachment-group`.
+$vv-attachment: (
+	position: relative,
+	display: flex,
+	align-items: center,
+	gap: var(--spacing-8),
+	max-width: 17.5rem,
+	padding: var(--spacing-8),
+	border: var(--border) solid var(--color-surface-3),
+	border-radius: var(--rounded-lg),
+	background-color: var(--color-surface-1),
+	color: var(--color-word-2),
+	font-size: var(--text-12),
+	line-height: var(--leading-snug),
+	element: (
+		media: (
+			display: grid,
+			flex-shrink: 0,
+			place-items: center,
+			inline-size: var(--spacing-36),
+			block-size: var(--spacing-36),
+			overflow: hidden,
+			border-radius: var(--rounded-md),
+			background-color: var(--color-surface-2),
+			color: var(--color-word-3),
+			font-size: var(--text-16),
+		),
+		// A thumbnail fills the media
+		picture: (
+			_alias: 'img',
+			inline-size: 100%,
+			block-size: 100%,
+			object-fit: cover,
+		),
+		content: (
+			display: flex,
+			flex: 1,
+			flex-direction: column,
+			min-width: 0,
+		),
+		title: (
+			overflow: hidden,
+			color: var(--color-word-1),
+			font-weight: var(--font-medium),
+			text-overflow: ellipsis,
+			white-space: nowrap,
+		),
+		description: (
+			overflow: hidden,
+			color: var(--color-word-4),
+			font-variant-numeric: tabular-nums,
+			text-overflow: ellipsis,
+			white-space: nowrap,
+		),
+		actions: (
+			display: flex,
+			flex-shrink: 0,
+			align-items: center,
+			gap: var(--spacing-2),
+		),
+		// Half outside the tile on both axes, mirrored in a right to left
+		// page through `--direction`, read by a plain declaration
+		remove: (
+			position: absolute,
+			inset-block-start: 0,
+			inset-inline-end: 0,
+			display: grid,
+			place-items: center,
+			inline-size: var(--spacing-24),
+			block-size: var(--spacing-24),
+			border: var(--border) solid var(--color-surface-4),
+			border-radius: var(--rounded-full),
+			background-color: var(--color-surface),
+			box-shadow: var(--shadow-sm),
+			color: var(--color-word-2),
+			font-size: var(--text-12),
+			cursor: pointer,
+			[translate]: calc(50% * var(--direction, 1)) -50%,
+			state: (
+				hover: (
+					background-color: var(--color-surface-2),
+				),
+				focus-visible: (
+					outline: var(--spacing-px) solid var(--color-brand),
+					outline-offset: var(--spacing-2),
+				),
+			),
+		),
+	),
+	modifier: (
+		image: (
+			flex-direction: column,
+			align-items: stretch,
+			gap: 0,
+			padding: 0,
+			element: (
+				media: (
+					inline-size: 100%,
+					block-size: auto,
+					// A number, not `7 / 5`, which Sass would read as a division
+					aspect-ratio: calc(7 / 5),
+					border-radius: var(--rounded-lg) var(--rounded-lg) 0 0,
+				),
+				content: (
+					padding: var(--spacing-8),
+				),
+			),
+		),
+		invalid: (
+			border-color: var(--color-danger),
+			element: (
+				description: (
+					color: var(--color-danger-readable),
+				),
+			),
+		),
+		loading: (
+			element: (
+				media: (
+					color: var(--color-word-2),
+				),
+				picture: (
+					opacity: var(--opacity-50),
+				),
+			),
+		),
+	),
+) !default;

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

@@ -1,7 +1,7 @@
 $vv-avatar: (
 	background-color: var(--color-brand),
 	border-radius: var(--rounded),
-	color: var(--color-white),
+	color: var(--color-brand-contrast),
 	display: inline-flex,
 	position: relative,
 	justify-content: center,
@@ -82,8 +82,10 @@ $vv-avatar: (
 			width: var(--spacing-40),
 			height: var(--spacing-40),
 		),
+		// Keeps the white it had before the block followed the brand
 		transparent: (
 			background-color: var(--color-transparent),
+			color: var(--color-white),
 		),
 		surface: (
 			background-color: var(--color-surface-2),
@@ -93,29 +95,37 @@ $vv-avatar: (
 		danger: (
 			background-color: var(--color-danger),
 			border-color: var(--color-danger-lighten-3),
+			color: var(--color-danger-contrast),
 		),
 		success: (
 			background-color: var(--color-success),
 			border-color: var(--color-success-lighten-3),
+			color: var(--color-success-contrast),
 		),
+		// Filled with the darkest shade, so the text is the contrast of that
+		// shade and not of the base color
 		warning: (
 			background-color: var(--color-warning-darken-5),
 			border-color: var(--color-warning-darken-2),
+			color: var(--color-warning-darken-5-contrast),
 		),
 		info: (
 			background-color: var(--color-info-darken-5),
 			border-color: var(--color-info-darken-2),
+			color: var(--color-info-darken-5-contrast),
 		),
 		accent: (
 			background-color: var(--color-accent),
 			border-color: var(--color-accent-darken-3),
+			color: var(--color-accent-contrast),
 		),
 		gray: (
 			background-color: var(--color-gray-darken-1),
 			border-color: var(--color-gray-lighten-2),
+			color: var(--color-white),
 		),
 		ring: (
-			color: var(--color-brand-darken-3),
+			color: var(--color-surface-brand-readable),
 			background-color: var(--color-surface-brand),
 			border-color: currentcolor,
 			border-width: var(--border),
@@ -127,23 +137,23 @@ $vv-avatar: (
 				),
 				danger: (
 					background-color: var(--color-surface-danger),
-					color: var(--color-danger),
+					color: var(--color-surface-danger-readable),
 				),
 				success: (
 					background-color: var(--color-surface-success),
-					color: var(--color-success-darken-3),
+					color: var(--color-surface-success-readable),
 				),
 				warning: (
 					background-color: var(--color-surface-warning),
-					color: var(--color-warning-darken-5),
+					color: var(--color-surface-warning-readable),
 				),
 				info: (
 					background-color: var(--color-surface-info),
-					color: var(--color-info-darken-5),
+					color: var(--color-surface-info-readable),
 				),
 				accent: (
 					background-color: var(--color-surface-accent),
-					color: var(--color-accent),
+					color: var(--color-surface-accent-readable),
 				),
 				gray: (
 					background-color: var(--color-surface-4),

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

@@ -4,7 +4,7 @@ $vv-badge: (
 	border-width: 0,
 	background-color: var(--color-brand),
 	border-color: var(--color-brand),
-	color: var(--color-white),
+	color: var(--color-brand-contrast),
 	border-style: solid,
 	border-radius: 0.5em,
 	min-height: 2em,
@@ -96,42 +96,50 @@ $vv-badge: (
 		),
 		danger: (
 			background-color: var(--color-danger),
+			color: var(--color-danger-contrast),
 		),
 		success: (
 			background-color: var(--color-success),
+			color: var(--color-success-contrast),
 		),
+		// Filled with the darkest shade, so the text is the contrast of that
+		// shade and not of the base color
 		warning: (
 			background-color: var(--color-warning-darken-5),
+			color: var(--color-warning-darken-5-contrast),
 		),
 		info: (
 			background-color: var(--color-info-darken-5),
+			color: var(--color-info-darken-5-contrast),
 		),
 		accent: (
 			background-color: var(--color-accent),
+			color: var(--color-accent-contrast),
 		),
 		gray: (
 			background-color: var(--color-gray-darken-1),
+			color: var(--color-white),
 		),
 		outline: (
 			border-width: var(--border),
-			color: var(--color-brand),
+			color: var(--color-brand-readable),
 			border-color: currentcolor,
 			background-color: transparent,
 			modifier: (
 				danger: (
-					color: var(--color-danger),
+					color: var(--color-danger-readable),
 				),
 				success: (
-					color: var(--color-success),
+					color: var(--color-success-readable),
 				),
 				warning: (
-					color: var(--color-warning-darken-5),
+					color: var(--color-warning-readable),
 				),
 				info: (
-					color: var(--color-info-darken-5),
+					color: var(--color-info-readable),
 				),
 				accent: (
-					color: var(--color-accent),
+					color: var(--color-accent-readable),
 				),
 				gray: (
 					color: var(--color-gray-darken-1),
@@ -140,22 +148,22 @@ $vv-badge: (
 		),
 		ghost: (
 			background-color: transparent,
-			color: var(--color-brand),
+			color: var(--color-brand-readable),
 			modifier: (
 				danger: (
-					color: var(--color-danger),
+					color: var(--color-danger-readable),
 				),
 				success: (
-					color: var(--color-success),
+					color: var(--color-success-readable),
 				),
 				warning: (
-					color: var(--color-warning-darken-5),
+					color: var(--color-warning-readable),
 				),
 				info: (
-					color: var(--color-info-darken-5),
+					color: var(--color-info-readable),
 				),
 				accent: (
-					color: var(--color-accent),
+					color: var(--color-accent-readable),
 				),
 				gray: (
 					color: var(--color-gray-darken-1),

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

@@ -72,7 +72,7 @@ $vv-breadcrumb: (
 					text-decoration: underline,
 				),
 				active: (
-					color: var(--color-brand-darken-2),
+					color: var(--color-brand-readable-strong),
 				),
 			),
 		),

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

@@ -0,0 +1,31 @@
+// Consecutive bubbles of one speaker, stacked close and joined on the side of
+// the speaker: every bubble after the first tightens its top corner there, so
+// the first keeps a round top and the side of the speaker runs as one
+// straight edge down to the tail of the last. `end` groups the bubbles of the
+// one reading, whose bubbles take `vv-bubble--end` too. Load `vv-bubble`
+// before this block when importing the two on their own: the joined corners
+// have to come after the bubble's own radius.
+$vv-bubble-group: (
+	display: flex,
+	flex-direction: column,
+	align-items: flex-start,
+	gap: var(--spacing-2),
+	max-width: 100%,
+	element: (
+		joined: (
+			_alias: '> :not(:first-child)',
+			border-start-start-radius: var(--rounded-sm),
+		),
+	),
+	modifier: (
+		end: (
+			align-items: flex-end,
+			element: (
+				joined: (
+					border-start-start-radius: var(--rounded-xl),
+					border-start-end-radius: var(--rounded-sm),
+				),
+			),
+		),
+	),
+) !default;

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

@@ -0,0 +1,69 @@
+// The surface of a message. Its colours are tokens read with a fallback and
+// never declared on the block, so a value set on the conversation reaches
+// every bubble under it: `--bubble-background`, `--bubble-color` and
+// `--bubble-border-color` for the other side, `--bubble-end-background`,
+// `--bubble-end-color` and `--bubble-end-border-color` for the one reading.
+// A product paints the bubbles of one side in its own colour with one
+// declaration on the conversation. They are read by plain declarations, in
+// brackets: a `var()` inside a generated custom property is resolved at the
+// root, where a value set on a bubble or on its conversation does not reach.
+// The corner on the side of the speaker is tighter, a tail at the last line.
+// `reactions` hang over the bottom edge: `reacted` leaves room under the
+// bubble for them.
+$vv-bubble: (
+	position: relative,
+	max-width: 100%,
+	padding: var(--spacing-8) var(--spacing-12),
+	border-radius: var(--rounded-xl),
+	border-end-start-radius: var(--rounded-sm),
+	line-height: var(--leading-normal),
+	overflow-wrap: anywhere,
+	[border]: var(--border) solid var(--bubble-border-color, var(--color-surface-3)),
+	[background-color]: var(--bubble-background, var(--color-surface)),
+	[color]: var(--bubble-color, var(--color-word-2)),
+	element: (
+		reactions: (
+			position: absolute,
+			inset-block-end: 0,
+			inset-inline-end: var(--spacing-8),
+			translate: 0 50%,
+			display: inline-flex,
+			align-items: center,
+			gap: var(--spacing-2),
+			padding: var(--spacing-2) var(--spacing-6),
+			border: var(--border) solid var(--color-surface-3),
+			border-radius: var(--rounded-full),
+			background-color: var(--color-surface),
+			box-shadow: var(--shadow-sm),
+			color: var(--color-word-2),
+			font-size: var(--text-12),
+			line-height: var(--leading-none),
+		),
+	),
+	modifier: (
+		// The bubbles of the one reading: a filled surface, the tail on the
+		// inline end
+		end: (
+			[border-color]: var(--bubble-end-border-color, var(--color-surface-2)),
+			[background-color]: var(--bubble-end-background, var(--color-surface-2)),
+			[color]: var(--bubble-end-color, var(--color-word-1)),
+			border-end-start-radius: var(--rounded-xl),
+			border-end-end-radius: var(--rounded-sm),
+			element: (
+				reactions: (
+					inset-inline-end: auto,
+					inset-inline-start: var(--spacing-8),
+				),
+			),
+		),
+		// No surface: an answer set as rich text across the row
+		plain: (
+			[border-color]: transparent,
+			[background-color]: transparent,
+			padding: 0,
+		),
+		reacted: (
+			margin-block-end: var(--spacing-12),
+		),
+	),
+) !default;

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

@@ -8,13 +8,21 @@ $vv-button: (
 	border-radius: var(--rounded),
 	border-style: solid,
 	border-color: var(--color-brand),
-	color: var(--color-white),
+	color: var(--color-brand-contrast),
 	font-family: var(--font-sans),
 	font-weight: var(--font-semibold),
 	gap: 1ch,
 	padding-block: var(--spacing-7),
 	padding-inline: var(--spacing-16),
-	text-shadow: 0 1px 0 var(--color-gray-darken-5),
+	// The dark emboss suits light text only. The shadow above it is the cover
+	// of the fill, the fill itself where --color-brand-contrast turns dark and
+	// transparent otherwise, so it hides the emboss beneath dark text. Each
+	// state takes the contrast text and the cover of the shade it paints, so a
+	// color near the threshold turns its text white on the darker shades.
+	text-shadow: (
+		0 1px 0 var(--color-brand-cover),
+		0 1px 0 var(--color-gray-darken-5),
+	),
 	transition: var(--transition-all),
 	will-change: all,
 	min-width: 0,
@@ -27,15 +35,30 @@ $vv-button: (
 		hover: (
 			background: var(--color-brand-darken-1),
 			border-color: var(--color-brand-darken-1),
+			color: var(--color-brand-darken-1-contrast),
 			text-decoration: none,
+			text-shadow: (
+				0 1px 0 var(--color-brand-darken-1-cover),
+				0 1px 0 var(--color-gray-darken-5),
+			),
 		),
 		active: (
 			background: var(--color-brand-darken-2),
 			border-color: var(--color-brand-darken-2),
+			color: var(--color-brand-darken-2-contrast),
+			text-shadow: (
+				0 1px 0 var(--color-brand-darken-2-cover),
+				0 1px 0 var(--color-gray-darken-5),
+			),
 		),
 		pressed: (
 			background: var(--color-brand-darken-2),
 			border-color: var(--color-brand-darken-2),
+			color: var(--color-brand-darken-2-contrast),
+			text-shadow: (
+				0 1px 0 var(--color-brand-darken-2-cover),
+				0 1px 0 var(--color-gray-darken-5),
+			),
 		),
 		disabled: (
 			opacity: var(--opacity-50),
@@ -77,6 +100,7 @@ $vv-button: (
 			background: var(--color-gray-darken-3),
 			border-color: var(--color-gray-darken-3),
 			color: var(--color-white),
+			text-shadow: 0 1px 0 var(--color-gray-darken-5),
 			state: (
 				focus-visible: (
 					outline: var(--spacing-px) solid var(--color-gray-darken-3),
@@ -119,7 +143,11 @@ $vv-button: (
 		danger: (
 			background: var(--color-danger),
 			border-color: var(--color-danger),
-			color: var(--color-white),
+			color: var(--color-danger-contrast),
+			text-shadow: (
+				0 1px 0 var(--color-danger-cover),
+				0 1px 0 var(--color-gray-darken-5),
+			),
 			state: (
 				focus-visible: (
 					outline: var(--spacing-px) solid var(--color-danger),
@@ -127,14 +155,29 @@ $vv-button: (
 				hover: (
 					background: var(--color-danger-darken-1),
 					border-color: var(--color-danger-darken-1),
+					color: var(--color-danger-darken-1-contrast),
+					text-shadow: (
+						0 1px 0 var(--color-danger-darken-1-cover),
+						0 1px 0 var(--color-gray-darken-5),
+					),
 				),
 				active: (
 					background: var(--color-danger-darken-2),
 					border-color: var(--color-danger-darken-2),
+					color: var(--color-danger-darken-2-contrast),
+					text-shadow: (
+						0 1px 0 var(--color-danger-darken-2-cover),
+						0 1px 0 var(--color-gray-darken-5),
+					),
 				),
 				pressed: (
 					background: var(--color-danger-darken-2),
 					border-color: var(--color-danger-darken-2),
+					color: var(--color-danger-darken-2-contrast),
+					text-shadow: (
+						0 1px 0 var(--color-danger-darken-2-cover),
+						0 1px 0 var(--color-gray-darken-5),
+					),
 				),
 			),
 		),
@@ -166,7 +209,7 @@ $vv-button: (
 			background: transparent,
 			border-width: var(--border-0),
 			padding: 0,
-			color: var(--color-brand-darken-1),
+			color: var(--color-brand-readable),
 			font-weight: inherit,
 			text-shadow: none,
 			state: (
@@ -180,7 +223,7 @@ $vv-button: (
 					text-underline-offset: var(--spacing-4),
 				),
 				active: (
-					color: var(--color-brand-darken-3),
+					color: var(--color-brand-readable-strong),
 				),
 			),
 			element: (

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

@@ -0,0 +1,102 @@
+// A month to pick a date or a range from: a `header` with the `title` of the
+// month between two `nav` buttons, and a `grid`, a table whose `weekday`
+// headers sit over the `day` buttons of the month. The keyboard moves across
+// the grid with a roving tabindex: one day is `tabindex="0"`, the others
+// `tabindex="-1"`, which the shared `focus-visible` state leaves out, so the
+// ring of a day is a rule on the entry (`src/components/vv-calendar.scss`). What a day is comes from
+// its markup: the chosen day, or each end of a range, is `aria-pressed="true"`
+// on its button, today is `aria-current="date"`, a day that cannot be chosen
+// is `disabled`, and the days between the two ends of a range are cells with
+// `aria-selected="true"`. Days of the months around are left out, or written
+// as disabled buttons. A date picker is this block in a `vv-popover` next to
+// a field.
+$vv-calendar: (
+	display: inline-flex,
+	flex-direction: column,
+	gap: var(--spacing-8),
+	color: var(--color-word-2),
+	font-size: var(--text-14),
+	element: (
+		header: (
+			display: flex,
+			align-items: center,
+			justify-content: space-between,
+			gap: var(--spacing-8),
+		),
+		title: (
+			color: var(--color-word-1),
+			font-weight: var(--font-semibold),
+		),
+		nav: (
+			display: inline-grid,
+			place-items: center,
+			inline-size: 2em,
+			block-size: 2em,
+			border-radius: var(--rounded),
+			color: var(--color-word-3),
+			cursor: pointer,
+			state: (
+				hover: (
+					background-color: var(--color-surface-2),
+					color: var(--color-word),
+				),
+				focus-visible: (
+					outline: var(--spacing-px) solid var(--color-brand),
+					outline-offset: var(--spacing-2),
+				),
+			),
+		),
+		grid: (
+			_alias: 'table',
+			border-collapse: collapse,
+		),
+		weekday: (
+			_alias: 'th',
+			padding-block-end: var(--spacing-4),
+			color: var(--color-word-4),
+			font-size: var(--text-12),
+			font-weight: var(--font-normal),
+			text-align: center,
+		),
+		cell: (
+			_alias: 'td',
+			padding: var(--spacing-1) 0,
+			text-align: center,
+			state: (
+				// The band between the two ends of a range
+				selected: (
+					background-color: var(--color-surface-2),
+				),
+			),
+		),
+		day: (
+			display: inline-grid,
+			place-items: center,
+			inline-size: 2.25em,
+			block-size: 2.25em,
+			border-radius: var(--rounded-full),
+			font-variant-numeric: tabular-nums,
+			cursor: pointer,
+			state: (
+				// One step deeper than the band of a range, so it shows there
+				hover: (
+					background-color: var(--color-surface-3),
+				),
+				current-date: (
+					font-weight: var(--font-semibold),
+					box-shadow: inset 0 0 0 var(--spacing-px) var(--color-word-4),
+				),
+				// After the hover and today: the chosen day keeps its fill
+				pressed: (
+					background-color: var(--color-word),
+					color: var(--color-surface),
+					font-weight: var(--font-semibold),
+				),
+				disabled: (
+					opacity: var(--opacity-30),
+					cursor: not-allowed,
+				),
+			),
+		),
+	),
+) !default;

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

@@ -46,17 +46,48 @@ $vv-checkbox-group: (
 				),
 			),
 		),
+		// A segmented control: one recessed track the height of a field,
+		// the options side by side inside it, the chosen one raised (the
+		// `segment` modifier of the radio or the checkbox). For a choice
+		// between a few short named states. `vv-radio-group` shares this map,
+		// so a radio group takes the same modifiers. The options carry no
+		// margin here, so the wrapper takes the one they would have left under
+		// the last row, which the negative top margin of the hint expects.
+		segmented: (
+			element: (
+				wrapper: (
+					margin-bottom: var(--input-gap),
+					flex-direction: row,
+					flex-wrap: nowrap,
+					gap: var(--spacing-2),
+					padding: var(--spacing-4),
+					border-radius: var(--rounded-lg),
+					background-color: var(--color-surface-2),
+				),
+			),
+		),
+		// A row of choice cards (the `card` modifier of the radio or the
+		// checkbox), which wraps when a card would fall under its floor
+		cards: (
+			element: (
+				wrapper: (
+					margin-bottom: var(--input-gap),
+					flex-direction: row,
+					gap: var(--spacing-8),
+				),
+			),
+		),
 		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),
 				),
 			),
 		),